diff --git a/.circleci/config.yml b/.circleci/config.yml
index 663b0295a5979e..430c5abac8f574 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -391,7 +391,7 @@ jobs:
     <<: *default-job
     resource_class: 'medium+'
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -421,7 +421,7 @@ jobs:
   test_e2e:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -435,7 +435,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.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -450,7 +450,7 @@ jobs:
   test_profile:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -477,7 +477,7 @@ jobs:
   test_regressions:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -531,7 +531,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -555,7 +555,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -579,7 +579,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -603,7 +603,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -627,7 +627,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/vite/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -651,7 +651,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -679,7 +679,7 @@ jobs:
     <<: *default-job
     working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -780,7 +780,7 @@ jobs:
   test_benchmark:
     <<: *default-job
     docker:
-      - image: mcr.microsoft.com/playwright:v1.44.0-focal
+      - image: mcr.microsoft.com/playwright:v1.44.1-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 57e18e57f08442..0b32ace09f7d99 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -22,7 +22,8 @@
     "packages/mui-types",
     "packages/mui-utils",
     "packages-internal/docs-utils",
-    "packages-internal/scripts"
+    "packages-internal/scripts",
+    "packages-internal/test-utils"
   ],
   "publishDirectory": {
     "@mui/base": "packages/mui-base/build",
@@ -30,6 +31,7 @@
     "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
     "@mui/docs": "packages/mui-docs/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
+    "@mui/internal-test-utils": "packages-internal/test-utils",
     "@mui/internal-babel-macros": "packages/mui-babel-macros",
     "@mui/internal-docs-utils": "packages-internal/docs-utils",
     "@mui/internal-markdown": "packages/markdown",
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9dd14b3936da57..fd05c6b65817e6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,7 +30,7 @@ jobs:
           # fetch all tags which are required for `pnpm release:changelog`
           fetch-depth: 0
       - name: Set up pnpm
-        uses: pnpm/action-setup@d882d12c64e032187b2edb46d3a0d003b7a43598 # v2.4.0
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Use Node.js 18.x
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 8d85f7020200a0..105a4f31780e58 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
+        uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
         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@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
+        uses: github/codeql-action/analyze@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
diff --git a/.github/workflows/maintenance.yml b/.github/workflows/maintenance.yml
index 97ccb36abb0008..64b559405761d7 100644
--- a/.github/workflows/maintenance.yml
+++ b/.github/workflows/maintenance.yml
@@ -29,7 +29,7 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # v2.1.0
+        uses: eps1lon/actions-label-merge-conflict@6d74047dcef155976a15e4a124dde2c7fe0c5522 # v3.0.1
         with:
           dirtyLabel: 'PR: out-of-date'
           removeOnDirtyLabel: 'PR: ready to ship'
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
index 4f7a0759e797d3..b74dab17bfb014 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@b7cec7526559c32f1616476ff32d17ba4c59b2d6 # v3.25.5
+        uses: github/codeql-action/upload-sarif@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
         with:
           sarif_file: results.sarif
diff --git a/.mocharc.js b/.mocharc.js
index d57adb8886a831..9425179503b39a 100644
--- a/.mocharc.js
+++ b/.mocharc.js
@@ -10,7 +10,7 @@ module.exports = {
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: ['@mui-internal/test-utils/setupBabel', '@mui-internal/test-utils/setupJSDOM'],
+  require: ['@mui/internal-test-utils/setupBabel', '@mui/internal-test-utils/setupJSDOM'],
   'watch-ignore': [
     // default
     '.git',
diff --git a/.stylelintrc.js b/.stylelintrc.js
deleted file mode 100644
index 3fbebcc38f0350..00000000000000
--- a/.stylelintrc.js
+++ /dev/null
@@ -1,27 +0,0 @@
-module.exports = {
-  extends: 'stylelint-config-standard',
-  ignoreFiles: [
-    // TypeScript declaration files contain no styles.
-    // Stylelint is also reporting parseError on `docs/types/react-docgen.d.ts`.
-    '**/*.d.ts',
-  ],
-  rules: {
-    'alpha-value-notation': null,
-    'custom-property-pattern': null,
-    'declaration-colon-newline-after': null,
-    'function-parentheses-newline-inside': null, // not compatible with prettier
-    'media-feature-range-notation': null,
-    'no-empty-source': null,
-    'no-missing-end-of-source-newline': null,
-    'selector-class-pattern': null,
-    'string-no-newline': null, // not compatible with prettier
-    'value-keyword-case': null,
-    'value-list-comma-newline-after': null, // not compatible with prettier
-  },
-  overrides: [
-    {
-      files: ['**/*.js', '**/*.cjs', '**/*.mjs', '**/*.jsx', '**/*.ts', '**/*.tsx'],
-      customSyntax: 'postcss-styled-syntax',
-    },
-  ],
-};
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d8ee0daf4c2ec..6ae58e2ff9ece2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,81 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.9
+
+<!-- generated comparing v6.0.0-alpha.8..next -->
+
+_May 29, 2024_
+
+A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 `CssVarsProvider` and `extendTheme` are now stable (#42246) @siriwatknp
+
+### `@mui/material@6.0.0-alpha.9`
+
+- &#8203;<!-- 49 -->[AlertTitle] Enable extending Typography props (#42269) @lucasgmelo
+- &#8203;<!-- 48 -->[AvatarGroup] deprecate `componentsProps` for v6 (#42122) @lhilgert9
+- &#8203;<!-- 15 -->[Grid] Deprecate `wrap` prop (#42363) @fedirjh
+- &#8203;<!-- 14 -->[ListItem] Document `*Component` and `*Props` props deprecations (#42263) @aarongarciah
+- &#8203;<!-- 13 -->[ListItem] Deprecate ListItem's components and componentsProps (#42219) @aarongarciah
+- &#8203;<!-- 12 -->[ListItemSecondaryAction] Deprecate component (#42251) @aarongarciah
+- &#8203;<!-- 11 -->Stabilize `CssVarsProvider` and `extendTheme` (#42246) @siriwatknp
+- &#8203;<!-- 10 -->[Popper] Deprecate components and componentProps props for v6 (#42111) @ChronicusUA
+- &#8203;<!-- 09 -->[responsiveFontSizes] Handled undefined variants (#42412) @brijeshb42
+- &#8203;<!-- 08 -->[Slider] Fix wrong CSS value (#42370) @mnajdova
+- &#8203;<!-- 07 -->[Tooltip] Deprecate components and componentProps props for v6 (#42107) @ChronicusUA
+
+### `@mui/system@6.0.0-alpha.9`
+
+- &#8203;<!-- 34 -->[createStyled] Intercept `ownerState` coming from `props` and `ownerState` (#42358) @DiegoAndai
+
+### `@mui/codemod@6.0.0-alpha.9`
+
+- &#8203;<!-- 41 -->Add `sx` prop for v6 migration (#42153) @siriwatknp
+- &#8203;<!-- 40 -->Add codemod for removing system props (#42282) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 33 -->Remove unused images (#42324) @danilo-leal
+- &#8203;<!-- 32 -->Add Pigment CSS and Base UI logos SVGs (#42322) @danilo-leal
+- &#8203;<!-- 22 -->[joy-ui] Fix template responsiveness (#42422) @j4marcos
+- &#8203;<!-- 21 -->[material-ui] Add the Pashto locale (#42244) @sayoubiaf
+- &#8203;<!-- 20 -->[material-ui] Remove duplicate Design Kits page (#42338) @danilo-leal
+- &#8203;<!-- 19 -->[material-ui] Document callback to access theme in GlobalStyles (#42257) @aarongarciah
+- &#8203;<!-- 18 -->[material-ui] Add minor modifications to the Vertical stepper demo (#42342) @mihilt
+- &#8203;<!-- 17 -->[material-ui][Tabs] Improve the Basic Tabs demo (#42374) @MatheusEli
+- &#8203;<!-- 16 -->[pigment-css] Polish redirection mention @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 47 -->[blog] Add fixes and clean ups to the Blog page (#42311) @danilo-leal
+- &#8203;<!-- 46 -->[blog] Add the "Product" tag to the Pigment CSS post (#42365) @danilo-leal
+- &#8203;<!-- 45 -->[code-infra] Simplify .stylelintrc.js @oliviertassinari
+- &#8203;<!-- 44 -->[code-infra] Fix stylelint locally (#42411) @oliviertassinari
+- &#8203;<!-- 43 -->[code-infra] Run corepack enable on all CI jobs (#42331) @Janpot
+- &#8203;<!-- 42 -->[code-infra] Create examples eslint rule (#42170) @oliviertassinari
+- &#8203;<!-- 39 -->[core] Apply React 19 type changes that don't require upcoming `@types/` packages (#42346) @DiegoAndai
+- &#8203;<!-- 38 -->[core] Remove `react-swipeable-views-utils` package from docs (#42378) @ZeeshanTamboli
+- &#8203;<!-- 37 -->[core] Update `@testing-library/react` and `@testing-library/dom` packages (#42349) @ZeeshanTamboli
+- &#8203;<!-- 36 -->[core] Remove `@types/prettier` package (#42339) @ZeeshanTamboli
+- &#8203;<!-- 35 -->[core] Remove `WyW-in-JS` from Renovate config (#42335) @ZeeshanTamboli
+- &#8203;<!-- 31 -->[docs-infra] Split feedback channels per product (#42413) @alexfauquette
+- &#8203;<!-- 30 -->[docs-infra] Avoid cryptic errors when tests don't exist (#42356) @Janpot
+- &#8203;<!-- 29 -->[docs-infra] Make menu styles consistent (#42387) @danilo-leal
+- &#8203;<!-- 28 -->[docs-infra] Display deprecation messages in API pages (#42352) @aarongarciah
+- &#8203;<!-- 27 -->[docs-infra] Standardize API pages Alert styles (#42386) @danilo-leal
+- &#8203;<!-- 26 -->[docs-infra] Fix Toolpad Core API links (#42362) @apedroferreira
+- &#8203;<!-- 25 -->[docs-infra] Tigthen up the header design (#42180) @danilo-leal
+- &#8203;<!-- 24 -->[docs-infra] Add Toolpad to muiNpmOrgs for codesandbox demos (#42316) @Janpot
+- &#8203;<!-- 23 -->[docs-infra] Allow JSDoc tags (#42337) @aarongarciah
+- &#8203;<!-- 06 -->[test] Remove `userAgent` override in `jsdom` env (#42344) @cherniavskii
+- &#8203;<!-- 05 -->[utils] Fix GitHub-reported prototype pollution vulnerability in `deepmerge` (#41652) @tjcouch-sil
+- &#8203;<!-- 04 -->[website] Add Nikita to the about page (#42418) @nikitaa24
+- &#8203;<!-- 03 -->[website] Fix hero spacing changes applying at the wrong breakpoint (#42341) @KenanYusuf
+- &#8203;<!-- 02 -->[website] Adds Kenan Yusuf to about page (#42317) @KenanYusuf
+- &#8203;<!-- 01 -->[website] Improve about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @apedroferreira, @brijeshb42, @cherniavskii, @ChronicusUA, @danilo-leal, @DiegoAndai, @fedirjh, @j4marcos, @Janpot, @KenanYusuf, @lhilgert9, @lucasgmelo, @MatheusEli, @mihilt, @mnajdova, @nikitaa24, @oliviertassinari, @sayoubiaf, @siriwatknp, @tjcouch-sil, @ZeeshanTamboli
+
 ## v6.0.0-alpha.8
 
 <!-- generated comparing v6.0.0-alpha.7..next -->
diff --git a/apps/local-ui-lib/index.d.ts b/apps/local-ui-lib/index.d.ts
index a24be41b8decc5..3f926bfe3bb446 100644
--- a/apps/local-ui-lib/index.d.ts
+++ b/apps/local-ui-lib/index.d.ts
@@ -1,6 +1,8 @@
+import * as React from 'react';
+
 export const bounceAnim: string;
 export const Button: React.ComponentType<
-  JSX.IntrinsicElements['button'] & {
+  React.JSX.IntrinsicElements['button'] & {
     isRed?: boolean;
     sx?: unknown;
   }
diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
index a2187d6190e6ba..4155177fb4ca45 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.js
@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+const { extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index baf45d4960adc0..40352b6b781617 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/apps/pigment-css-vite-app/package.json
@@ -25,12 +25,12 @@
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
     "@pigment-css/vite-plugin": "^0.0.9",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.0",
     "postcss": "^8.4.38",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.2.11",
diff --git a/apps/pigment-css-vite-app/src/augment.ts b/apps/pigment-css-vite-app/src/augment.ts
index 1ce2a8f663e557..b1de2899db0e28 100644
--- a/apps/pigment-css-vite-app/src/augment.ts
+++ b/apps/pigment-css-vite-app/src/augment.ts
@@ -1,9 +1,9 @@
-import type { experimental_extendTheme } from '@mui/material/styles';
+import type { extendTheme } from '@mui/material/styles';
 import '@pigment-css/react/theme';
 
 declare module '@pigment-css/react/theme' {
   export interface ThemeArgs {
-    theme: ReturnType<typeof experimental_extendTheme> & {
+    theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;
     };
   }
diff --git a/apps/pigment-css-vite-app/src/extend-zero.ts b/apps/pigment-css-vite-app/src/extend-zero.ts
index 0d111cdfda4d6b..ea1689cc1f65af 100644
--- a/apps/pigment-css-vite-app/src/extend-zero.ts
+++ b/apps/pigment-css-vite-app/src/extend-zero.ts
@@ -1,8 +1,8 @@
-import type { experimental_extendTheme } from '@mui/material/styles';
+import type { extendTheme } from '@mui/material/styles';
 
 declare module '@pigment-css/react/theme' {
   interface ThemeArgs {
-    theme: ReturnType<typeof experimental_extendTheme> & {
+    theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;
     };
   }
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
index 031cd34a6f7571..c58f13101e834f 100644
--- a/apps/pigment-css-vite-app/vite.config.ts
+++ b/apps/pigment-css-vite-app/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
 
 const theme = extendTheme({
   getSelector: function getSelector(colorScheme, css) {
diff --git a/benchmark/package.json b/benchmark/package.json
index b3e7511166f7cb..20989d5df25726 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -24,7 +24,7 @@
     "express": "^4.19.2",
     "fs-extra": "^11.2.0",
     "jss": "^10.10.0",
-    "playwright": "^1.44.0",
+    "playwright": "^1.44.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/docs/data/about/teamMembers.json b/docs/data/about/teamMembers.json
index 7227d10b9825e9..db48483baf1139 100644
--- a/docs/data/about/teamMembers.json
+++ b/docs/data/about/teamMembers.json
@@ -315,5 +315,13 @@
     "about": "Amateur cook, DIYer, and film photographer",
     "github": "KenanYusuf",
     "twitter": "KebabYusuf"
+  },
+  {
+    "name": "Nikita Ossei",
+    "title": "Customer Support",
+    "location": "London, United Kingdom",
+    "locationCountry": "uk",
+    "about": "Astrology ♊️, learning 📚 and designing stuff 🎨",
+    "github": "nikitaa24"
   }
 ]
diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
index e2411c77d73684..44c2f280a8b452 100644
--- a/docs/data/base/components/modal/SpringModal.tsx
+++ b/docs/data/base/components/modal/SpringModal.tsx
@@ -37,7 +37,7 @@ export default function SpringModal() {
 
 const Backdrop = React.forwardRef<
   HTMLDivElement,
-  { children: React.ReactElement; open: boolean }
+  { children: React.ReactElement<any>; open: boolean }
 >((props, ref) => {
   const { open, ...other } = props;
   return <Fade ref={ref} in={open} {...other} />;
@@ -61,7 +61,7 @@ const StyledBackdrop = styled(Backdrop)`
 `;
 
 interface FadeProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   in?: boolean;
   onClick?: any;
   onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
diff --git a/docs/data/base/components/modal/UseModal.tsx b/docs/data/base/components/modal/UseModal.tsx
index 8024572f55d57b..0462704cf259e6 100644
--- a/docs/data/base/components/modal/UseModal.tsx
+++ b/docs/data/base/components/modal/UseModal.tsx
@@ -39,7 +39,7 @@ export default function UseModal() {
 }
 
 interface ModalProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   closeAfterTransition?: boolean;
   container?: Element | (() => Element | null) | null;
   disableAutoFocus?: boolean;
diff --git a/docs/data/base/components/popper/PlacementPopper.tsx b/docs/data/base/components/popper/PlacementPopper.tsx
index ce9c2b6bb352ab..d6d036e8175761 100644
--- a/docs/data/base/components/popper/PlacementPopper.tsx
+++ b/docs/data/base/components/popper/PlacementPopper.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Popper, PopperPlacementType } from '@mui/base/Popper';
 
-function Radio({ value, ...props }: JSX.IntrinsicElements['input']) {
+function Radio({ value, ...props }: React.JSX.IntrinsicElements['input']) {
   return (
     <span>
       <input
diff --git a/docs/data/base/components/popup/Placement.tsx b/docs/data/base/components/popup/Placement.tsx
index f32a105d6478ac..8fc8e9d43e41be 100644
--- a/docs/data/base/components/popup/Placement.tsx
+++ b/docs/data/base/components/popup/Placement.tsx
@@ -5,7 +5,7 @@ import {
 } from '@mui/base/Unstable_Popup';
 import { styled, css, Theme } from '@mui/system';
 
-function Radio({ value, ...props }: JSX.IntrinsicElements['input']) {
+function Radio({ value, ...props }: React.JSX.IntrinsicElements['input']) {
   return (
     <span>
       <input
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
index 615de264e9779b..88c122569ac467 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
@@ -23,7 +23,7 @@ const Select = React.forwardRef(function Select<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 export default function UnstyledSelectBasic() {
   return (
diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx b/docs/data/base/components/select/UnstyledSelectForm.tsx
index 114d64115e0a0c..9668cb831fcbdb 100644
--- a/docs/data/base/components/select/UnstyledSelectForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectForm.tsx
@@ -47,7 +47,7 @@ const Select = React.forwardRef(function CustomSelect<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 const blue = {
   100: '#DAECFF',
diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx
index deb51db7f93215..87216292aca7cd 100644
--- a/docs/data/base/components/slider/DiscreteSlider.tsx
+++ b/docs/data/base/components/slider/DiscreteSlider.tsx
@@ -21,7 +21,7 @@ export default function DiscreteSlider() {
 }
 
 interface SliderValueLabelProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 function SliderValueLabel({ children }: SliderValueLabelProps) {
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
index e7f0357f3869b9..143073006c60bb 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -11,7 +11,7 @@ export default function LabeledValuesSlider() {
 }
 
 interface SliderValueLabelProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 function SliderValueLabel({ children }: SliderValueLabelProps) {
diff --git a/docs/data/base/components/transitions/ReactTransitionGroup.tsx b/docs/data/base/components/transitions/ReactTransitionGroup.tsx
index 1f3ef41aaf6dfc..cc72ef63550fbc 100644
--- a/docs/data/base/components/transitions/ReactTransitionGroup.tsx
+++ b/docs/data/base/components/transitions/ReactTransitionGroup.tsx
@@ -115,7 +115,7 @@ function PopupWithTrigger(props: PopupProps) {
   );
 }
 
-function MaterialUITransitionAdapter(props: { children: React.ReactElement }) {
+function MaterialUITransitionAdapter(props: { children: React.ReactElement<any> }) {
   const { requestedEnter, onExited } = useTransitionStateManager();
   const { children } = props;
 
diff --git a/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx b/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx
index 917e340d1ea07d..90109120fee33e 100644
--- a/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx
+++ b/docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx
@@ -54,7 +54,7 @@ const Select = React.forwardRef(function Select<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 const SelectButton = React.forwardRef(function SelectButton<
   TValue extends {},
diff --git a/docs/data/joy/components/alert/AlertVariousStates.tsx b/docs/data/joy/components/alert/AlertVariousStates.tsx
index d5809cf4f57b3c..417632d2c3641c 100644
--- a/docs/data/joy/components/alert/AlertVariousStates.tsx
+++ b/docs/data/joy/components/alert/AlertVariousStates.tsx
@@ -14,7 +14,7 @@ export default function AlertVariousStates() {
   const items: {
     title: string;
     color: ColorPaletteProp;
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
   }[] = [
     { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
     { title: 'Warning', color: 'warning', icon: <WarningIcon /> },
diff --git a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx b/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
index 4b8ff21f8a4d04..4d7c518c49500f 100644
--- a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
@@ -12,7 +12,7 @@ const StyledDiv = styled('div')({
 });
 
 type WrapperProps = {
-  children: JSX.Element;
+  children: React.JSX.Element;
   hint: string;
 };
 
diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx b/docs/data/joy/components/autocomplete/Virtualize.tsx
index 3484ab6a27358b..96737ce4ed76cd 100644
--- a/docs/data/joy/components/autocomplete/Virtualize.tsx
+++ b/docs/data/joy/components/autocomplete/Virtualize.tsx
@@ -66,7 +66,7 @@ const ListboxComponent = React.forwardRef<
   const { children, anchorEl, open, modifiers, ...other } = props;
   const itemData: Array<any> = [];
   (
-    children as [Array<{ children: Array<React.ReactElement> | undefined }>]
+    children as [Array<{ children: Array<React.ReactElement<any>> | undefined }>]
   )[0].forEach((item) => {
     if (item) {
       itemData.push(item);
diff --git a/docs/data/joy/components/input/FloatingLabelInput.tsx b/docs/data/joy/components/input/FloatingLabelInput.tsx
index 521eb66351af7c..562227ac60e82f 100644
--- a/docs/data/joy/components/input/FloatingLabelInput.tsx
+++ b/docs/data/joy/components/input/FloatingLabelInput.tsx
@@ -56,7 +56,7 @@ const StyledLabel = styled('label')(({ theme }) => ({
 
 const InnerInput = React.forwardRef<
   HTMLInputElement,
-  JSX.IntrinsicElements['input']
+  React.JSX.IntrinsicElements['input']
 >(function InnerInput(props, ref) {
   const id = React.useId();
   return (
diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.tsx b/docs/data/joy/components/menu/MenuIconSideNavExample.tsx
index 28d26843928d4e..de451cc1bd3989 100644
--- a/docs/data/joy/components/menu/MenuIconSideNavExample.tsx
+++ b/docs/data/joy/components/menu/MenuIconSideNavExample.tsx
@@ -15,7 +15,7 @@ import MenuButton from '@mui/joy/MenuButton';
 // https://popper.js.org/docs/v2/modifiers/offset/
 interface MenuButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  menu: React.ReactElement;
+  menu: React.ReactElement<any>;
   open: boolean;
   onOpen: (
     event?:
diff --git a/docs/data/joy/components/menu/MenuToolbarExample.tsx b/docs/data/joy/components/menu/MenuToolbarExample.tsx
index d2cead8ad4fa98..764a66b010ec98 100644
--- a/docs/data/joy/components/menu/MenuToolbarExample.tsx
+++ b/docs/data/joy/components/menu/MenuToolbarExample.tsx
@@ -13,7 +13,7 @@ import { Theme } from '@mui/joy';
 type MenuBarButtonProps = Pick<DropdownProps, 'children' | 'open'> & {
   onOpen: DropdownProps['onOpenChange'];
   onKeyDown: React.KeyboardEventHandler;
-  menu: JSX.Element;
+  menu: React.JSX.Element;
   onMouseEnter: React.MouseEventHandler;
 };
 
diff --git a/docs/data/joy/components/textarea/FloatingLabelTextarea.tsx b/docs/data/joy/components/textarea/FloatingLabelTextarea.tsx
index 0115794252e0a7..f361e06583d233 100644
--- a/docs/data/joy/components/textarea/FloatingLabelTextarea.tsx
+++ b/docs/data/joy/components/textarea/FloatingLabelTextarea.tsx
@@ -48,7 +48,7 @@ const StyledLabel = styled('label')(({ theme }) => ({
 
 const InnerTextarea = React.forwardRef<
   HTMLTextAreaElement,
-  JSX.IntrinsicElements['textarea']
+  React.JSX.IntrinsicElements['textarea']
 >(function InnerTextarea(props, ref) {
   const id = React.useId();
   return (
diff --git a/docs/data/joy/getting-started/templates/files/components/Menu.tsx b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
index 9eb339005910d4..b5edc3477a58c0 100644
--- a/docs/data/joy/getting-started/templates/files/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
@@ -4,7 +4,7 @@ import MenuItem from '@mui/joy/MenuItem';
 import { ListActionTypes } from '@mui/base/useList';
 
 export default function Menu(props: {
-  control: React.ReactElement;
+  control: React.ReactElement<any>;
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
index adf0c5f3fa3258..85fbd4b4e4bb1c 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
@@ -24,7 +24,7 @@ export default function ChatsPane(props: ChatsPaneProps) {
       sx={{
         borderRight: '1px solid',
         borderColor: 'divider',
-        height: 'calc(100dvh - var(--Header-height))',
+        height: { sm: 'calc(100dvh - var(--Header-height))', md: '100dvh' },
         overflowY: 'auto',
       }}
     >
diff --git a/docs/data/joy/getting-started/templates/messages/components/Header.tsx b/docs/data/joy/getting-started/templates/messages/components/Header.tsx
index 9cae700a7495f4..5cad9f1367cb84 100644
--- a/docs/data/joy/getting-started/templates/messages/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/Header.tsx
@@ -9,7 +9,7 @@ export default function Header() {
   return (
     <Sheet
       sx={{
-        display: { xs: 'flex', sm: 'none' },
+        display: { sm: 'flex', md: 'none' },
         alignItems: 'center',
         justifyContent: 'space-between',
         position: 'fixed',
diff --git a/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx b/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx
index 7d3ac013f470b1..08c9c6bbc3f759 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx
@@ -24,7 +24,7 @@ export default function MessagesPane(props: MessagesPaneProps) {
   return (
     <Sheet
       sx={{
-        height: { xs: 'calc(100dvh - var(--Header-height))', lg: '100dvh' },
+        height: { xs: 'calc(100dvh - var(--Header-height))', md: '100dvh' },
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: 'background.level1',
diff --git a/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx b/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
index 4e08bc5d597e6d..9f03b83084a69b 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
@@ -14,7 +14,7 @@ export default function MyProfile() {
         flex: 1,
         width: '100%',
         mx: 'auto',
-        pt: { xs: 'var(--Header-height)', sm: 0 },
+        pt: { xs: 'var(--Header-height)', md: 0 },
         display: 'grid',
         gridTemplateColumns: {
           xs: '1fr',
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx
index 2d132f8a5ace3a..33d4a3025e113d 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx
@@ -7,7 +7,9 @@ import AspectRatio from '@mui/joy/AspectRatio';
 
 import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
 
-export default function DropZone(props: CardProps & { icon?: React.ReactElement }) {
+export default function DropZone(
+  props: CardProps & { icon?: React.ReactElement<any> },
+) {
   const { icon, sx, ...other } = props;
   return (
     <Card
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx
index 35b6aaf329f55f..0c907fd81371d6 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx
@@ -13,7 +13,7 @@ import RemoveCircleOutlineRoundedIcon from '@mui/icons-material/RemoveCircleOutl
 
 export default function FileUpload(
   props: CardProps & {
-    icon?: React.ReactElement;
+    icon?: React.ReactElement<any>;
     fileName: string;
     fileSize: string;
     progress: number;
diff --git a/docs/data/joy/integrations/material-ui/material-ui.md b/docs/data/joy/integrations/material-ui/material-ui.md
index 3ee00b0839c8d2..e0377eec85086d 100644
--- a/docs/data/joy/integrations/material-ui/material-ui.md
+++ b/docs/data/joy/integrations/material-ui/material-ui.md
@@ -29,8 +29,8 @@ Render Joy UI's `CssVarsProvider` inside Material UI's provider and use `THEME
 
 ```js
 import {
-  experimental_extendTheme as materialExtendTheme,
-  Experimental_CssVarsProvider as MaterialCssVarsProvider,
+  extendTheme as materialExtendTheme,
+  CssVarsProvider as MaterialCssVarsProvider,
   THEME_ID as MATERIAL_THEME_ID,
 } from '@mui/material/styles';
 import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/BackToTop.tsx
index 87eca489bf5c9f..c2d9673bdfa8fe 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<any>;
 }
 
 function ScrollTop(props: Props) {
diff --git a/docs/data/material/components/app-bar/ElevateAppBar.tsx b/docs/data/material/components/app-bar/ElevateAppBar.tsx
index 195908dcaf13fe..df548678f153fd 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<any>;
 }
 
 function ElevationScroll(props: Props) {
diff --git a/docs/data/material/components/app-bar/HideAppBar.tsx b/docs/data/material/components/app-bar/HideAppBar.tsx
index 4bc84bfc663305..925410ed692eb9 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<any>;
 }
 
 function HideOnScroll(props: Props) {
diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx
index 9cbc173d404c7f..7d7dab92ebd8c4 100644
--- a/docs/data/material/components/autocomplete/Virtualize.tsx
+++ b/docs/data/material/components/autocomplete/Virtualize.tsx
@@ -56,9 +56,9 @@ const ListboxComponent = React.forwardRef<
   React.HTMLAttributes<HTMLElement>
 >(function ListboxComponent(props, ref) {
   const { children, ...other } = props;
-  const itemData: React.ReactElement[] = [];
-  (children as React.ReactElement[]).forEach(
-    (item: React.ReactElement & { children?: React.ReactElement[] }) => {
+  const itemData: React.ReactElement<any>[] = [];
+  (children as React.ReactElement<any>[]).forEach(
+    (item: React.ReactElement<any> & { children?: React.ReactElement<any>[] }) => {
       itemData.push(item);
       itemData.push(...(item.children || []));
     },
@@ -71,7 +71,7 @@ const ListboxComponent = React.forwardRef<
   const itemCount = itemData.length;
   const itemSize = smUp ? 36 : 48;
 
-  const getChildSize = (child: React.ReactElement) => {
+  const getChildSize = (child: React.ReactElement<any>) => {
     if (child.hasOwnProperty('group')) {
       return 48;
     }
diff --git a/docs/data/material/components/dialogs/FullScreenDialog.tsx b/docs/data/material/components/dialogs/FullScreenDialog.tsx
index 1edd984e8388f5..5b0dc07b9cd042 100644
--- a/docs/data/material/components/dialogs/FullScreenDialog.tsx
+++ b/docs/data/material/components/dialogs/FullScreenDialog.tsx
@@ -15,7 +15,7 @@ import { TransitionProps } from '@mui/material/transitions';
 
 const Transition = React.forwardRef(function Transition(
   props: TransitionProps & {
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
   },
   ref: React.Ref<unknown>,
 ) {
diff --git a/docs/data/material/components/grid/AutoGridNoWrap.js b/docs/data/material/components/grid/AutoGridNoWrap.js
index 9dd12f5d3373f0..15ffadca4efc7e 100644
--- a/docs/data/material/components/grid/AutoGridNoWrap.js
+++ b/docs/data/material/components/grid/AutoGridNoWrap.js
@@ -27,7 +27,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -43,7 +43,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -59,7 +59,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
diff --git a/docs/data/material/components/grid/AutoGridNoWrap.tsx b/docs/data/material/components/grid/AutoGridNoWrap.tsx
index 9dd12f5d3373f0..15ffadca4efc7e 100644
--- a/docs/data/material/components/grid/AutoGridNoWrap.tsx
+++ b/docs/data/material/components/grid/AutoGridNoWrap.tsx
@@ -27,7 +27,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -43,7 +43,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -59,7 +59,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
diff --git a/docs/data/material/components/lists/InteractiveList.tsx b/docs/data/material/components/lists/InteractiveList.tsx
index ba8ed0cfabbd5d..661995d60917d4 100644
--- a/docs/data/material/components/lists/InteractiveList.tsx
+++ b/docs/data/material/components/lists/InteractiveList.tsx
@@ -16,7 +16,7 @@ import Typography from '@mui/material/Typography';
 import FolderIcon from '@mui/icons-material/Folder';
 import DeleteIcon from '@mui/icons-material/Delete';
 
-function generate(element: React.ReactElement) {
+function generate(element: React.ReactElement<any>) {
   return [0, 1, 2].map((value) =>
     React.cloneElement(element, {
       key: value,
diff --git a/docs/data/material/components/modal/SpringModal.tsx b/docs/data/material/components/modal/SpringModal.tsx
index b478ef1dc38fb2..31c07aadab1754 100644
--- a/docs/data/material/components/modal/SpringModal.tsx
+++ b/docs/data/material/components/modal/SpringModal.tsx
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import { useSpring, animated } from '@react-spring/web';
 
 interface FadeProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   in?: boolean;
   onClick?: any;
   onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
diff --git a/docs/data/material/components/popper/SpringPopper.tsx b/docs/data/material/components/popper/SpringPopper.tsx
index e7e5c98dee72f2..5526317503ff16 100644
--- a/docs/data/material/components/popper/SpringPopper.tsx
+++ b/docs/data/material/components/popper/SpringPopper.tsx
@@ -4,7 +4,7 @@ import Popper from '@mui/material/Popper';
 import { useSpring, animated } from '@react-spring/web';
 
 interface FadeProps {
-  children?: React.ReactElement;
+  children?: React.ReactElement<any>;
   in?: boolean;
   onEnter?: () => void;
   onExited?: () => void;
diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx b/docs/data/material/components/rating/RadioGroupRating.tsx
index 097970dd4bcd89..f42709d21c1359 100644
--- a/docs/data/material/components/rating/RadioGroupRating.tsx
+++ b/docs/data/material/components/rating/RadioGroupRating.tsx
@@ -15,7 +15,7 @@ const StyledRating = styled(Rating)(({ theme }) => ({
 
 const customIcons: {
   [index: string]: {
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
     label: string;
   };
 } = {
diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js
index ad14816a766901..29f00ad7234114 100644
--- a/docs/data/material/components/skeleton/YouTube.js
+++ b/docs/data/material/components/skeleton/YouTube.js
@@ -33,7 +33,7 @@ function Media(props) {
   const { loading = false } = props;
 
   return (
-    <Grid container wrap="nowrap">
+    <Grid container flexWrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
         <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (
diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/YouTube.tsx
index b0ac646c1853fd..e9dc01bacf6800 100644
--- a/docs/data/material/components/skeleton/YouTube.tsx
+++ b/docs/data/material/components/skeleton/YouTube.tsx
@@ -36,7 +36,7 @@ function Media(props: MediaProps) {
   const { loading = false } = props;
 
   return (
-    <Grid container wrap="nowrap">
+    <Grid container flexWrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
         <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (
diff --git a/docs/data/material/components/steppers/CustomizedSteppers.tsx b/docs/data/material/components/steppers/CustomizedSteppers.tsx
index 2fa6b486f6197f..3a4c2e7ddf879c 100644
--- a/docs/data/material/components/steppers/CustomizedSteppers.tsx
+++ b/docs/data/material/components/steppers/CustomizedSteppers.tsx
@@ -122,7 +122,7 @@ const ColorlibStepIconRoot = styled('div')<{
 function ColorlibStepIcon(props: StepIconProps) {
   const { active, completed, className } = props;
 
-  const icons: { [index: string]: React.ReactElement } = {
+  const icons: { [index: string]: React.ReactElement<any> } = {
     1: <SettingsIcon />,
     2: <GroupAddIcon />,
     3: <VideoLabelIcon />,
diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.js b/docs/data/material/components/steppers/VerticalLinearStepper.js
index f124736cc19fb5..732ac6bbf4fb65 100644
--- a/docs/data/material/components/steppers/VerticalLinearStepper.js
+++ b/docs/data/material/components/steppers/VerticalLinearStepper.js
@@ -51,7 +51,7 @@ export default function VerticalLinearStepper() {
           <Step key={step.label}>
             <StepLabel
               optional={
-                index === 2 ? (
+                index === steps.length - 1 ? (
                   <Typography variant="caption">Last step</Typography>
                 ) : null
               }
@@ -61,22 +61,20 @@ export default function VerticalLinearStepper() {
             <StepContent>
               <Typography>{step.description}</Typography>
               <Box sx={{ mb: 2 }}>
-                <div>
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
-                  </Button>
-                  <Button
-                    disabled={index === 0}
-                    onClick={handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    Back
-                  </Button>
-                </div>
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                </Button>
+                <Button
+                  disabled={index === 0}
+                  onClick={handleBack}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  Back
+                </Button>
               </Box>
             </StepContent>
           </Step>
diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.tsx b/docs/data/material/components/steppers/VerticalLinearStepper.tsx
index f124736cc19fb5..732ac6bbf4fb65 100644
--- a/docs/data/material/components/steppers/VerticalLinearStepper.tsx
+++ b/docs/data/material/components/steppers/VerticalLinearStepper.tsx
@@ -51,7 +51,7 @@ export default function VerticalLinearStepper() {
           <Step key={step.label}>
             <StepLabel
               optional={
-                index === 2 ? (
+                index === steps.length - 1 ? (
                   <Typography variant="caption">Last step</Typography>
                 ) : null
               }
@@ -61,22 +61,20 @@ export default function VerticalLinearStepper() {
             <StepContent>
               <Typography>{step.description}</Typography>
               <Box sx={{ mb: 2 }}>
-                <div>
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
-                  </Button>
-                  <Button
-                    disabled={index === 0}
-                    onClick={handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    Back
-                  </Button>
-                </div>
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                </Button>
+                <Button
+                  disabled={index === 0}
+                  onClick={handleBack}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  Back
+                </Button>
               </Box>
             </StepContent>
           </Step>
diff --git a/docs/data/material/components/tabs/BasicTabs.js b/docs/data/material/components/tabs/BasicTabs.js
index f641a7f4549c39..e8ba27f0025385 100644
--- a/docs/data/material/components/tabs/BasicTabs.js
+++ b/docs/data/material/components/tabs/BasicTabs.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 
 function CustomTabPanel(props) {
@@ -16,11 +15,7 @@ function CustomTabPanel(props) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && (
-        <Box sx={{ p: 3 }}>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
     </div>
   );
 }
diff --git a/docs/data/material/components/tabs/BasicTabs.tsx b/docs/data/material/components/tabs/BasicTabs.tsx
index c47dcb1992eeb0..947ad4d993b354 100644
--- a/docs/data/material/components/tabs/BasicTabs.tsx
+++ b/docs/data/material/components/tabs/BasicTabs.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 
 interface TabPanelProps {
@@ -21,11 +20,7 @@ function CustomTabPanel(props: TabPanelProps) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && (
-        <Box sx={{ p: 3 }}>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
     </div>
   );
 }
diff --git a/docs/data/material/experimental-api/css-theme-variables/customization.md b/docs/data/material/customization/css-theme-variables/configuration.md
similarity index 91%
rename from docs/data/material/experimental-api/css-theme-variables/customization.md
rename to docs/data/material/customization/css-theme-variables/configuration.md
index 6c8776bf98005e..5dad4c5f7f4b44 100644
--- a/docs/data/material/experimental-api/css-theme-variables/customization.md
+++ b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -1,16 +1,13 @@
-# CSS theme variables - Customization
+# CSS theme variables - Configuration
 
-<p class="description">A guide for customizing CSS theme variables in Material UI.</p>
+<p class="description">A guide for configuring CSS theme variables in Material UI.</p>
 
 ## Theming
 
-`experimental_extendTheme` is an API that extends the default theme. It returns a theme that can only be used by the `Experimental_CssVarsProvider`.
+`extendTheme` is an API that extends the default theme. It returns a theme that can only be used by the `CssVarsProvider`.
 
 ```js
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-} from '@mui/material/styles';
+import { CssVarsProvider, extendTheme } from '@mui/material/styles';
 
 const theme = extendTheme();
 // ...custom theme
@@ -181,7 +178,7 @@ Or use `var()` to refer to the CSS variable directly:
 ```
 
 :::warning
-If you're using a [custom prefix](/material-ui/experimental-api/css-theme-variables/customization/#changing-variable-prefixes), make sure to replace the default `--mui`.
+If you're using a [custom prefix](/material-ui/customization/css-theme-variables/configuration/#changing-variable-prefixes), make sure to replace the default `--mui`.
 :::
 
 ### TypeScript
@@ -289,7 +286,7 @@ function App() {
 }
 ```
 
-For a server-side application, provide the same value to [`getInitColorSchemeScript()`](/material-ui/experimental-api/css-theme-variables/usage/#server-side-rendering):
+For a server-side application, provide the same value to [`getInitColorSchemeScript()`](/material-ui/customization/css-theme-variables/usage/#server-side-rendering):
 
 ```js
 getInitColorSchemeScript({
diff --git a/docs/data/material/experimental-api/css-theme-variables/overview.md b/docs/data/material/customization/css-theme-variables/overview.md
similarity index 81%
rename from docs/data/material/experimental-api/css-theme-variables/overview.md
rename to docs/data/material/customization/css-theme-variables/overview.md
index c80b73e94c5dd7..b706687d6cb99e 100644
--- a/docs/data/material/experimental-api/css-theme-variables/overview.md
+++ b/docs/data/material/customization/css-theme-variables/overview.md
@@ -11,8 +11,15 @@ If this is your first time encountering CSS variables, you should check out [the
 
 ## Introduction
 
-CSS theme variable support is a new feature in Material UI added in [`v5.6.0`](https://github.com/mui/material-ui/releases/tag/v5.6.0) (but not enabled by default). It tells Material UI components to use the generated CSS theme variables instead of raw values. This provides significant improvements in developer experience related to theming and customization.
-With these variables, you can inject a theme into your app's stylesheet _at build time_ to apply the user's selected settings before the whole app is rendered.
+CSS theme variables replace raw values in Material UI components for a better developer experience because, in the browser dev tool, you will see which theme token is used as a value.
+
+In addition with these variables, you can inject a theme into your app's stylesheet _at build time_ to apply the user's selected settings before the whole app is rendered.
+
+:::info
+The `CssVarsProvider` is built on top of the [`ThemeProvider`](/material-ui/customization/theming/#themeprovider) with extra features like CSS variable generation, storage synchronization, unlimited color schemes, and more.
+
+If you have an existing theme, you can migrate to CSS theme variables by following the [migration guide](/material-ui/migration/migration-css-theme-variables/).
+:::
 
 ## Advantages
 
@@ -60,7 +67,7 @@ const darkTheme = createTheme({
 **CSS theme variables**: Light and dark colors are consolidated into a theme.
 
 ```js
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
 
 // `extendTheme` is a new API
 const theme = extendTheme({
@@ -117,6 +124,6 @@ extendTheme({
 
 ## What's next
 
-- To start a new project with CSS theme variables, check out the [basic usage guide](/material-ui/experimental-api/css-theme-variables/usage/).
-- For an existing Material UI project, check out the [migration guide](/material-ui/experimental-api/css-theme-variables/migration/).
-- For theming and customization, check out the [how-to guide](/material-ui/experimental-api/css-theme-variables/customization/).
+- To start a new project with CSS theme variables, check out the [basic usage guide](/material-ui/customization/css-theme-variables/usage/).
+- For an existing Material UI project, check out the [migration guide](/material-ui/migration/migration-css-theme-variables/).
+- For theming and customization, check out the [how-to guide](/material-ui/customization/css-theme-variables/configuration/).
diff --git a/docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.js b/docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.js
similarity index 69%
rename from docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.js
rename to docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.js
index cbbdc835b12d7c..db146ef6c72468 100644
--- a/docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.js
+++ b/docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.js
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  experimental_extendTheme as extendTheme,
-  Experimental_CssVarsProvider as CssVarsProvider,
-} from '@mui/material/styles';
+import { extendTheme, CssVarsProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 
 const theme = extendTheme({
diff --git a/docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.tsx b/docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.tsx
similarity index 69%
rename from docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.tsx
rename to docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.tsx
index cbbdc835b12d7c..db146ef6c72468 100644
--- a/docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.tsx
+++ b/docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  experimental_extendTheme as extendTheme,
-  Experimental_CssVarsProvider as CssVarsProvider,
-} from '@mui/material/styles';
+import { extendTheme, CssVarsProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 
 const theme = extendTheme({
diff --git a/docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.tsx.preview b/docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.tsx.preview
similarity index 100%
rename from docs/data/material/experimental-api/css-theme-variables/usage/CssVarsBasic.tsx.preview
rename to docs/data/material/customization/css-theme-variables/usage/CssVarsBasic.tsx.preview
diff --git a/docs/data/material/experimental-api/css-theme-variables/usage/usage.md b/docs/data/material/customization/css-theme-variables/usage/usage.md
similarity index 86%
rename from docs/data/material/experimental-api/css-theme-variables/usage/usage.md
rename to docs/data/material/customization/css-theme-variables/usage/usage.md
index 08089eb2def2a3..2b42442d16138a 100644
--- a/docs/data/material/experimental-api/css-theme-variables/usage/usage.md
+++ b/docs/data/material/customization/css-theme-variables/usage/usage.md
@@ -1,11 +1,11 @@
 # CSS theme variables - Usage
 
-<p class="description">Learn how to use the experimental APIs to adopt CSS theme variables.</p>
+<p class="description">Learn how to adopt CSS theme variables.</p>
 
 ## Getting started
 
-The CSS variables API relies on a new experimental provider for the theme called `Experimental_CssVarsProvider` to inject styles into Material UI components.
-In addition to providing the theme in the inner React context, this new provider also generates CSS variables out of all tokens in the theme that are not functions, and makes them available in the context as well.
+The CSS variables API relies on a provider called `CssVarsProvider` to inject styles into Material UI components.
+`CssVarsProvider` generates CSS variables out of all tokens in the theme that are serializable, and makes them available in the React context along with the theme itself via [`ThemeProvider`](/material-ui/customization/theming/#theme-provider).
 
 Once the `App` renders on the screen, you will see the CSS theme variables in the HTML `:root` stylesheet.
 The variables are flattened and prefixed with `--mui` by default:
@@ -27,6 +27,8 @@ The following demo uses `--md-demo` as a prefix for the variables:
 
 :::info
 The `CssVarsProvider` is built on top of the [`ThemeProvider`](/material-ui/customization/theming/#themeprovider) with extra features like CSS variable generation, storage synchronization, unlimited color schemes, and more.
+
+If you have an existing theme, you can migrate to CSS theme variables by following the [migration guide](/material-ui/migration/migration-css-theme-variables/).
 :::
 
 ## Toggle between light and dark mode
@@ -34,10 +36,7 @@ The `CssVarsProvider` is built on top of the [`ThemeProvider`](/material-ui/cust
 The `useColorScheme` hook lets you read and update the user-selected mode:
 
 ```jsx
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  useColorScheme,
-} from '@mui/material/styles';
+import { CssVarsProvider, useColorScheme } from '@mui/material/styles';
 
 // ModeSwitcher is an example interface for toggling between modes.
 // Material UI does not provide the toggle interface—you have to build it yourself.
@@ -111,7 +110,7 @@ The structure of this object is nearly identical to the theme structure, the onl
   ```
 
   :::warning
-  If you have set up a [custom prefix](/material-ui/experimental-api/css-theme-variables/customization/#changing-variable-prefixes), make sure to replace the default `--mui`.
+  If you have set up a [custom prefix](/material-ui/customization/css-theme-variables/configuration/#changing-variable-prefixes), make sure to replace the default `--mui`.
   :::
 
 ## Server-side rendering
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js
new file mode 100644
index 00000000000000..d0a3d09300bc39
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function GlobalCssOverrideTheme() {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={(theme) => ({
+          h1: { color: theme.palette.primary.main },
+        })}
+      />
+      <h1>Grey h1 element</h1>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx
new file mode 100644
index 00000000000000..d0a3d09300bc39
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function GlobalCssOverrideTheme() {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={(theme) => ({
+          h1: { color: theme.palette.primary.main },
+        })}
+      />
+      <h1>Grey h1 element</h1>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview
new file mode 100644
index 00000000000000..591f0b2d5b4c93
--- /dev/null
+++ b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview
@@ -0,0 +1,8 @@
+<React.Fragment>
+  <GlobalStyles
+    styles={(theme) => ({
+      h1: { color: theme.palette.primary.main },
+    })}
+  />
+  <h1>Grey h1 element</h1>
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/material/customization/how-to-customize/how-to-customize.md b/docs/data/material/customization/how-to-customize/how-to-customize.md
index 75ca321505d2d4..9dfed7035eb408 100644
--- a/docs/data/material/customization/how-to-customize/how-to-customize.md
+++ b/docs/data/material/customization/how-to-customize/how-to-customize.md
@@ -187,6 +187,10 @@ Here is an example of how you can override styles for the `h1` elements:
 
 {{"demo": "GlobalCssOverride.js", "iframe": true, "height": 100}}
 
+The `styles` prop in the `GlobalStyles` component supports a callback in case you need to access the theme.
+
+{{"demo": "GlobalCssOverrideTheme.js", "iframe": true, "height": 100}}
+
 If you are already using the [CssBaseline](/material-ui/react-css-baseline/) component for setting baseline styles, you can also add these global styles as overrides for this component. Here is how you can achieve the same by using this approach.
 
 {{"demo": "OverrideCssBaseline.js", "iframe": true, "height": 100}}
diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
index e545c049b02135..408dfe093c60a2 100644
--- a/docs/data/material/customization/theming/theming.md
+++ b/docs/data/material/customization/theming/theming.md
@@ -10,7 +10,7 @@ To promote greater consistency between apps, light and dark theme types are avai
 
 ## Theme provider
 
-If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application.
+Use `ThemeProvider` or [`CssVarsProvider`](#css-variables-provider) to inject a custom theme into your application.
 However, this is optional; Material UI components come with a default theme.
 
 `ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.
@@ -45,7 +45,8 @@ const theme = createTheme({
 ```
 
 :::warning
-`vars` is a private field for [CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/). It will throw an error if you try to pass a value to it:
+`vars` is an autogenerated field for [CSS theme variables](/material-ui/customization/css-theme-variables/overview/).
+It will throw an error if you try to pass a value to it:
 
 ```jsx
 createTheme({
@@ -114,6 +115,13 @@ You can extend the outer theme by providing a function:
 
 {{"demo": "ThemeNestingExtend.js"}}
 
+## CSS variables provider
+
+The `CssVarsProvider` is built on top of the `ThemeProvider` with extra features like theme CSS variables generation, built-in color scheme synchronization with the user's system preference, and more.
+The `CssVarsProvider` is built on top of the `ThemeProvider` with extra features like theme CSS variables generation, built-in color scheme synchronization, user's system preference, and more.
+
+To start using the `CssVarsProvider`, check out the [basic usage guide](/material-ui/customization/css-theme-variables/usage/). If you are using the `ThemeProvider`, read the [migration guide](/material-ui/migration/migration-css-theme-variables/).
+
 ## API
 
 ### `createTheme(options, ...args) => theme`
diff --git a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
index d3c75e66df3647..77d1ac95ea7d5d 100644
--- a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
+++ b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
@@ -237,16 +237,13 @@ You can also check out the Storybook preview to test the Material UI version of
 ## Using the generated theme
 
 :::warning
-Themes generated by Sync 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.
+Themes generated by Sync must be used with Material UI's [`CssVarsProvider`](/material-ui/migration/migration-css-theme-variables/)—the [`ThemeProvider`](/material-ui/customization/theming/#theme-provider) is not supported.
 :::
 
 Here's an example of how to add a Sync-generated theme to your codebase:
 
 ```tsx title="_app.tsx"
-import {
-  experimental_extendTheme as extendTheme,
-  Experimental_CssVarsProvider as CssVarsProvider,
-} from '@mui/material/styles';
+import { extendTheme, CssVarsProvider } from '@mui/material/styles';
 
 export default function MyApp({ Component, pageProps }) {
   const theme = extendTheme({
diff --git a/docs/data/material/discover-more/design-kits/design-kits.md b/docs/data/material/discover-more/design-kits/design-kits.md
deleted file mode 100644
index b6f0212daceecb..00000000000000
--- a/docs/data/material/discover-more/design-kits/design-kits.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Design kits
-
-<p class="description">Boost consistency and facilitate communication when working with developers by using Material UI components in your favorite design tool.</p>
-
-The Material UI design kits allow you to be more efficient by designing and developing with the same library.
-
-- **For designers:** Save time getting the Material UI components all set up, leveraging the latest features from your favorite design tool.
-- **For product managers:** Quickly put together ideas and high-fidelity mockups/prototypes using components from your actual product.
-- **For developers:** Effortlessly communicate with designers using the same language around the Material UI component props and variants.
-
-Find them in your design tool of choice:
-
-<a href="https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma" style="margin-left: 8px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-figma.svg" alt="figma" /></a>
-<a href="https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-adobe-xd.svg" alt="adobe-xd" /></a>
-<a href="https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" /></a>
diff --git a/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js b/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js
deleted file mode 100644
index 7d492392a9c6b1..00000000000000
--- a/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import { colorChannel } from '@mui/system';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  styled,
-} from '@mui/material/styles';
-
-// Custom button using custom styles with CSS variables
-const CustomButton = styled(Button)(({ theme }) => ({
-  backgroundColor: theme.vars.palette.success.dark,
-  color: theme.vars.palette.common.white,
-  '&:hover': {
-    backgroundColor: `rgba(${theme.vars.palette.success.mainChannel} / 0.95)`,
-  },
-}));
-
-// Custom button using CSS variables
-const CssVarsCustomButton = styled(Button)({
-  '--mui-palette-primary-main': '#FF0000',
-  '--mui-palette-primary-dark': '#8B0000',
-  '--mui-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values
-});
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-export default function CssVariablesCustomization() {
-  // the `node` is used for attaching CSS variables to this demo, you might not need it in your application.
-  const [node, setNode] = React.useState(null);
-  useEnhancedEffect(() => {
-    setNode(document.getElementById('css-vars-customization'));
-  }, []);
-  return (
-    <div id="css-vars-customization">
-      <CssVarsProvider
-        colorSchemeNode={node || null}
-        colorSchemeSelector="#css-vars-customization"
-      >
-        <CustomButton sx={{ mr: 1 }}>Custom styles</CustomButton>
-        <CssVarsCustomButton variant="contained">CSS variables</CssVarsCustomButton>
-      </CssVarsProvider>
-    </div>
-  );
-}
diff --git a/docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.js b/docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.js
deleted file mode 100644
index 53a109d954f207..00000000000000
--- a/docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  useColorScheme,
-  experimental_extendTheme,
-} from '@mui/material/styles';
-import Moon from '@mui/icons-material/DarkMode';
-import Sun from '@mui/icons-material/LightMode';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import { teal, deepOrange, orange, cyan } from '@mui/material/colors';
-
-function ColorSchemePicker() {
-  const { mode, setMode } = useColorScheme();
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <Button
-      variant="outlined"
-      onClick={() => {
-        if (mode === 'light') {
-          setMode('dark');
-        } else {
-          setMode('light');
-        }
-      }}
-    >
-      {mode === 'light' ? <Moon /> : <Sun />}
-    </Button>
-  );
-}
-
-const theme = experimental_extendTheme({
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: teal,
-        secondary: deepOrange,
-      },
-    },
-    dark: {
-      palette: {
-        primary: cyan,
-        secondary: orange,
-      },
-    },
-  },
-});
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-export default function CssVarsCustomTheme() {
-  // the `node` is used for attaching CSS variables to this demo, you might not need it in your application.
-  const [node, setNode] = React.useState(null);
-  useEnhancedEffect(() => {
-    setNode(document.getElementById('css-vars-custom-theme'));
-  }, []);
-  return (
-    <div id="css-vars-custom-theme">
-      <CssVarsProvider
-        theme={theme}
-        colorSchemeNode={node || null}
-        colorSchemeSelector="#css-vars-custom-theme"
-        colorSchemeStorageKey="custom-theme-color-scheme"
-        modeStorageKey="custom-theme-mode"
-      >
-        <Box bgcolor="background.paper" sx={{ p: 1 }}>
-          <Box sx={{ py: 2, mx: 'auto' }}>
-            <Box sx={{ pb: 4 }}>
-              <ColorSchemePicker />
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button variant="contained">Text</Button>
-              <Button variant="outlined">Text</Button>
-              <Button>Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="secondary" variant="contained">
-                Text
-              </Button>
-              <Button color="secondary" variant="outlined">
-                Text
-              </Button>
-              <Button color="secondary">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="error" variant="contained">
-                Text
-              </Button>
-              <Button color="error" variant="outlined">
-                Text
-              </Button>
-              <Button color="error">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="info" variant="contained">
-                Text
-              </Button>
-              <Button color="info" variant="outlined">
-                Text
-              </Button>
-              <Button color="info">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="warning" variant="contained">
-                Text
-              </Button>
-              <Button color="warning" variant="outlined">
-                Text
-              </Button>
-              <Button color="warning">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="success" variant="contained">
-                Text
-              </Button>
-              <Button color="success" variant="outlined">
-                Text
-              </Button>
-              <Button color="success">Text</Button>
-            </Box>
-          </Box>
-        </Box>
-      </CssVarsProvider>
-    </div>
-  );
-}
diff --git a/docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.tsx b/docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.tsx
deleted file mode 100644
index a0c0fa12fd97e7..00000000000000
--- a/docs/data/material/experimental-api/css-variables/CssVarsCustomTheme.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  useColorScheme,
-  experimental_extendTheme,
-} from '@mui/material/styles';
-import Moon from '@mui/icons-material/DarkMode';
-import Sun from '@mui/icons-material/LightMode';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import { teal, deepOrange, orange, cyan } from '@mui/material/colors';
-
-function ColorSchemePicker() {
-  const { mode, setMode } = useColorScheme();
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <Button
-      variant="outlined"
-      onClick={() => {
-        if (mode === 'light') {
-          setMode('dark');
-        } else {
-          setMode('light');
-        }
-      }}
-    >
-      {mode === 'light' ? <Moon /> : <Sun />}
-    </Button>
-  );
-}
-
-const theme = experimental_extendTheme({
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: teal,
-        secondary: deepOrange,
-      },
-    },
-    dark: {
-      palette: {
-        primary: cyan,
-        secondary: orange,
-      },
-    },
-  },
-});
-
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-export default function CssVarsCustomTheme() {
-  // the `node` is used for attaching CSS variables to this demo, you might not need it in your application.
-  const [node, setNode] = React.useState<null | HTMLElement>(null);
-  useEnhancedEffect(() => {
-    setNode(document.getElementById('css-vars-custom-theme') as null | HTMLElement);
-  }, []);
-  return (
-    <div id="css-vars-custom-theme">
-      <CssVarsProvider
-        theme={theme}
-        colorSchemeNode={node || null}
-        colorSchemeSelector="#css-vars-custom-theme"
-        colorSchemeStorageKey="custom-theme-color-scheme"
-        modeStorageKey="custom-theme-mode"
-      >
-        <Box bgcolor="background.paper" sx={{ p: 1 }}>
-          <Box sx={{ py: 2, mx: 'auto' }}>
-            <Box sx={{ pb: 4 }}>
-              <ColorSchemePicker />
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button variant="contained">Text</Button>
-              <Button variant="outlined">Text</Button>
-              <Button>Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="secondary" variant="contained">
-                Text
-              </Button>
-              <Button color="secondary" variant="outlined">
-                Text
-              </Button>
-              <Button color="secondary">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="error" variant="contained">
-                Text
-              </Button>
-              <Button color="error" variant="outlined">
-                Text
-              </Button>
-              <Button color="error">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="info" variant="contained">
-                Text
-              </Button>
-              <Button color="info" variant="outlined">
-                Text
-              </Button>
-              <Button color="info">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="warning" variant="contained">
-                Text
-              </Button>
-              <Button color="warning" variant="outlined">
-                Text
-              </Button>
-              <Button color="warning">Text</Button>
-            </Box>
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
-              <Button color="success" variant="contained">
-                Text
-              </Button>
-              <Button color="success" variant="outlined">
-                Text
-              </Button>
-              <Button color="success">Text</Button>
-            </Box>
-          </Box>
-        </Box>
-      </CssVarsProvider>
-    </div>
-  );
-}
diff --git a/docs/data/material/experimental-api/css-variables/CssVarsProviderBasic.tsx.preview b/docs/data/material/experimental-api/css-variables/CssVarsProviderBasic.tsx.preview
deleted file mode 100644
index 7e68c29d7f5fc5..00000000000000
--- a/docs/data/material/experimental-api/css-variables/CssVarsProviderBasic.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-<CssVarsProvider>
-  <ThemeConsumer />
-</CssVarsProvider>
\ No newline at end of file
diff --git a/docs/data/material/getting-started/templates/dashboard/Chart.js b/docs/data/material/getting-started/templates/dashboard/Chart.js
deleted file mode 100644
index fbacebefa328ea..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Chart.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { LineChart, axisClasses } from '@mui/x-charts';
-
-import Title from './Title';
-
-// Generate Sales Data
-function createData(time, amount) {
-  return { time, amount: amount ?? null };
-}
-
-const data = [
-  createData('00:00', 0),
-  createData('03:00', 300),
-  createData('06:00', 600),
-  createData('09:00', 800),
-  createData('12:00', 1500),
-  createData('15:00', 2000),
-  createData('18:00', 2400),
-  createData('21:00', 2400),
-  createData('24:00'),
-];
-
-export default function Chart() {
-  const theme = useTheme();
-
-  return (
-    <React.Fragment>
-      <Title>Today</Title>
-      <div style={{ width: '100%', flexGrow: 1, overflow: 'hidden' }}>
-        <LineChart
-          dataset={data}
-          margin={{
-            top: 16,
-            right: 20,
-            left: 70,
-            bottom: 30,
-          }}
-          xAxis={[
-            {
-              scaleType: 'point',
-              dataKey: 'time',
-              tickNumber: 2,
-              tickLabelStyle: theme.typography.body2,
-            },
-          ]}
-          yAxis={[
-            {
-              label: 'Sales ($)',
-              labelStyle: {
-                ...theme.typography.body1,
-                fill: theme.palette.text.primary,
-              },
-              tickLabelStyle: theme.typography.body2,
-              max: 2500,
-              tickNumber: 3,
-            },
-          ]}
-          series={[
-            {
-              dataKey: 'amount',
-              showMark: false,
-              color: theme.palette.primary.light,
-            },
-          ]}
-          sx={{
-            [`.${axisClasses.root} line`]: { stroke: theme.palette.text.secondary },
-            [`.${axisClasses.root} text`]: { fill: theme.palette.text.secondary },
-            [`& .${axisClasses.left} .${axisClasses.label}`]: {
-              transform: 'translateX(-25px)',
-            },
-          }}
-        />
-      </div>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/Chart.tsx b/docs/data/material/getting-started/templates/dashboard/Chart.tsx
deleted file mode 100644
index 0897a67f0c1cb9..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Chart.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { LineChart, axisClasses } from '@mui/x-charts';
-import { ChartsTextStyle } from '@mui/x-charts/ChartsText';
-import Title from './Title';
-
-// Generate Sales Data
-function createData(
-  time: string,
-  amount?: number,
-): { time: string; amount: number | null } {
-  return { time, amount: amount ?? null };
-}
-
-const data = [
-  createData('00:00', 0),
-  createData('03:00', 300),
-  createData('06:00', 600),
-  createData('09:00', 800),
-  createData('12:00', 1500),
-  createData('15:00', 2000),
-  createData('18:00', 2400),
-  createData('21:00', 2400),
-  createData('24:00'),
-];
-
-export default function Chart() {
-  const theme = useTheme();
-
-  return (
-    <React.Fragment>
-      <Title>Today</Title>
-      <div style={{ width: '100%', flexGrow: 1, overflow: 'hidden' }}>
-        <LineChart
-          dataset={data}
-          margin={{
-            top: 16,
-            right: 20,
-            left: 70,
-            bottom: 30,
-          }}
-          xAxis={[
-            {
-              scaleType: 'point',
-              dataKey: 'time',
-              tickNumber: 2,
-              tickLabelStyle: theme.typography.body2 as ChartsTextStyle,
-            },
-          ]}
-          yAxis={[
-            {
-              label: 'Sales ($)',
-              labelStyle: {
-                ...(theme.typography.body1 as ChartsTextStyle),
-                fill: theme.palette.text.primary,
-              },
-              tickLabelStyle: theme.typography.body2 as ChartsTextStyle,
-              max: 2500,
-              tickNumber: 3,
-            },
-          ]}
-          series={[
-            {
-              dataKey: 'amount',
-              showMark: false,
-              color: theme.palette.primary.light,
-            },
-          ]}
-          sx={{
-            [`.${axisClasses.root} line`]: { stroke: theme.palette.text.secondary },
-            [`.${axisClasses.root} text`]: { fill: theme.palette.text.secondary },
-            [`& .${axisClasses.left} .${axisClasses.label}`]: {
-              transform: 'translateX(-25px)',
-            },
-          }}
-        />
-      </div>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
index 0c8503667b3f30..c311599af0a6dd 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
@@ -1,204 +1,63 @@
 import * as React from 'react';
-import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import MuiDrawer from '@mui/material/Drawer';
 import Box from '@mui/material/Box';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import Badge from '@mui/material/Badge';
 import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Link from '@mui/material/Link';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import { mainListItems, secondaryListItems } from './listItems';
-import Chart from './Chart';
-import Deposits from './Deposits';
-import Orders from './Orders';
-
-function Copyright(props) {
-  return (
-    <Typography variant="body2" color="text.secondary" align="center" {...props}>
-      {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
-
-const drawerWidth = 240;
+import getDashboardTheme from './getDashboardTheme';
+import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
+import Copyright from './internals/components/Copyright';
+import Navbar from './components/Navbar';
+import Header from './components/Header';
+import MainGrid from './components/MainGrid';
 
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme, open }) => ({
-  zIndex: theme.zIndex.drawer + 1,
-  transition: theme.transitions.create(['width', 'margin'], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  ...(open && {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  }),
-}));
-
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }) => ({
-    '& .MuiDrawer-paper': {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      width: drawerWidth,
-      transition: theme.transitions.create('width', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-      boxSizing: 'border-box',
-      ...(!open && {
-        overflowX: 'hidden',
-        transition: theme.transitions.create('width', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        width: theme.spacing(7),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(9),
-        },
-      }),
-    },
-  }),
-);
+export default function Dashboard() {
+  const [mode, setMode] = React.useState('light');
+  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
+  const dashboardTheme = createTheme(getDashboardTheme(mode));
+  const defaultTheme = createTheme({ palette: { mode } });
 
-// TODO remove, this demo shouldn't need to reset the theme.
-const defaultTheme = createTheme();
+  const toggleColorMode = () => {
+    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
 
-export default function Dashboard() {
-  const [open, setOpen] = React.useState(true);
-  const toggleDrawer = () => {
-    setOpen(!open);
+  const toggleCustomTheme = () => {
+    setShowCustomTheme((prev) => !prev);
   };
 
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
+      <CssBaseline />
       <Box sx={{ display: 'flex' }}>
-        <CssBaseline />
-        <AppBar position="absolute" open={open}>
-          <Toolbar
-            sx={{
-              pr: '24px', // keep right padding when drawer closed
-            }}
-          >
-            <IconButton
-              edge="start"
-              color="inherit"
-              aria-label="open drawer"
-              onClick={toggleDrawer}
-              sx={{
-                marginRight: '36px',
-                ...(open && { display: 'none' }),
-              }}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography
-              component="h1"
-              variant="h6"
-              color="inherit"
-              noWrap
-              sx={{ flexGrow: 1 }}
-            >
-              Dashboard
-            </Typography>
-            <IconButton color="inherit">
-              <Badge badgeContent={4} color="secondary">
-                <NotificationsIcon />
-              </Badge>
-            </IconButton>
-          </Toolbar>
-        </AppBar>
-        <Drawer variant="permanent" open={open}>
-          <Toolbar
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              px: [1],
-            }}
-          >
-            <IconButton onClick={toggleDrawer}>
-              <ChevronLeftIcon />
-            </IconButton>
-          </Toolbar>
-          <Divider />
-          <List component="nav">
-            {mainListItems}
-            <Divider sx={{ my: 1 }} />
-            {secondaryListItems}
-          </List>
-        </Drawer>
+        <Navbar mode={mode} toggleColorMode={toggleColorMode} />
         <Box
           component="main"
           sx={{
-            backgroundColor: (theme) =>
-              theme.palette.mode === 'light'
-                ? theme.palette.grey[100]
-                : theme.palette.grey[900],
+            backgroundColor: 'background.default',
             flexGrow: 1,
             height: '100vh',
             overflow: 'auto',
           }}
         >
-          <Toolbar />
-          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-            <Grid container spacing={3}>
-              {/* Chart */}
-              <Grid item xs={12} md={8} lg={9}>
-                <Paper
-                  sx={{
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: 240,
-                  }}
-                >
-                  <Chart />
-                </Paper>
-              </Grid>
-              {/* Recent Deposits */}
-              <Grid item xs={12} md={4} lg={3}>
-                <Paper
-                  sx={{
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: 240,
-                  }}
-                >
-                  <Deposits />
-                </Paper>
-              </Grid>
-              {/* Recent Orders */}
-              <Grid item xs={12}>
-                <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
-                  <Orders />
-                </Paper>
-              </Grid>
-            </Grid>
-            <Copyright sx={{ pt: 4 }} />
+          {/* Main content */}
+          <Container
+            maxWidth="xl"
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              py: { xs: 14, sm: 16 },
+              gap: 2,
+            }}
+          >
+            <Header />
+            <MainGrid />
+            <Copyright sx={{ my: 4 }} />
           </Container>
         </Box>
+        <ToggleCustomTheme
+          showCustomTheme={showCustomTheme}
+          toggleCustomTheme={toggleCustomTheme}
+        />
       </Box>
     </ThemeProvider>
   );
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
index 1e9e9023891160..9285b6a8e2a421 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
@@ -1,208 +1,63 @@
 import * as React from 'react';
-import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
+import { PaletteMode } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import MuiDrawer from '@mui/material/Drawer';
 import Box from '@mui/material/Box';
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import Badge from '@mui/material/Badge';
 import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Link from '@mui/material/Link';
-import MenuIcon from '@mui/icons-material/Menu';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import { mainListItems, secondaryListItems } from './listItems';
-import Chart from './Chart';
-import Deposits from './Deposits';
-import Orders from './Orders';
+import getDashboardTheme from './getDashboardTheme';
+import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
+import Copyright from './internals/components/Copyright';
+import Navbar from './components/Navbar';
+import Header from './components/Header';
+import MainGrid from './components/MainGrid';
 
-function Copyright(props: any) {
-  return (
-    <Typography variant="body2" color="text.secondary" align="center" {...props}>
-      {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
-
-const drawerWidth: number = 240;
-
-interface AppBarProps extends MuiAppBarProps {
-  open?: boolean;
-}
-
-const AppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== 'open',
-})<AppBarProps>(({ theme, open }) => ({
-  zIndex: theme.zIndex.drawer + 1,
-  transition: theme.transitions.create(['width', 'margin'], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  ...(open && {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  }),
-}));
-
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }) => ({
-    '& .MuiDrawer-paper': {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      width: drawerWidth,
-      transition: theme.transitions.create('width', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-      boxSizing: 'border-box',
-      ...(!open && {
-        overflowX: 'hidden',
-        transition: theme.transitions.create('width', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        width: theme.spacing(7),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(9),
-        },
-      }),
-    },
-  }),
-);
+export default function Dashboard() {
+  const [mode, setMode] = React.useState<PaletteMode>('light');
+  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
+  const dashboardTheme = createTheme(getDashboardTheme(mode));
+  const defaultTheme = createTheme({ palette: { mode } });
 
-// TODO remove, this demo shouldn't need to reset the theme.
-const defaultTheme = createTheme();
+  const toggleColorMode = () => {
+    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
 
-export default function Dashboard() {
-  const [open, setOpen] = React.useState(true);
-  const toggleDrawer = () => {
-    setOpen(!open);
+  const toggleCustomTheme = () => {
+    setShowCustomTheme((prev) => !prev);
   };
 
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
+      <CssBaseline />
       <Box sx={{ display: 'flex' }}>
-        <CssBaseline />
-        <AppBar position="absolute" open={open}>
-          <Toolbar
-            sx={{
-              pr: '24px', // keep right padding when drawer closed
-            }}
-          >
-            <IconButton
-              edge="start"
-              color="inherit"
-              aria-label="open drawer"
-              onClick={toggleDrawer}
-              sx={{
-                marginRight: '36px',
-                ...(open && { display: 'none' }),
-              }}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography
-              component="h1"
-              variant="h6"
-              color="inherit"
-              noWrap
-              sx={{ flexGrow: 1 }}
-            >
-              Dashboard
-            </Typography>
-            <IconButton color="inherit">
-              <Badge badgeContent={4} color="secondary">
-                <NotificationsIcon />
-              </Badge>
-            </IconButton>
-          </Toolbar>
-        </AppBar>
-        <Drawer variant="permanent" open={open}>
-          <Toolbar
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              px: [1],
-            }}
-          >
-            <IconButton onClick={toggleDrawer}>
-              <ChevronLeftIcon />
-            </IconButton>
-          </Toolbar>
-          <Divider />
-          <List component="nav">
-            {mainListItems}
-            <Divider sx={{ my: 1 }} />
-            {secondaryListItems}
-          </List>
-        </Drawer>
+        <Navbar mode={mode} toggleColorMode={toggleColorMode} />
         <Box
           component="main"
           sx={{
-            backgroundColor: (theme) =>
-              theme.palette.mode === 'light'
-                ? theme.palette.grey[100]
-                : theme.palette.grey[900],
+            backgroundColor: 'background.default',
             flexGrow: 1,
             height: '100vh',
             overflow: 'auto',
           }}
         >
-          <Toolbar />
-          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-            <Grid container spacing={3}>
-              {/* Chart */}
-              <Grid item xs={12} md={8} lg={9}>
-                <Paper
-                  sx={{
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: 240,
-                  }}
-                >
-                  <Chart />
-                </Paper>
-              </Grid>
-              {/* Recent Deposits */}
-              <Grid item xs={12} md={4} lg={3}>
-                <Paper
-                  sx={{
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: 240,
-                  }}
-                >
-                  <Deposits />
-                </Paper>
-              </Grid>
-              {/* Recent Orders */}
-              <Grid item xs={12}>
-                <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
-                  <Orders />
-                </Paper>
-              </Grid>
-            </Grid>
-            <Copyright sx={{ pt: 4 }} />
+          {/* Main content */}
+          <Container
+            maxWidth="xl"
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              py: { xs: 14, sm: 16 },
+              gap: 2,
+            }}
+          >
+            <Header />
+            <MainGrid />
+            <Copyright sx={{ my: 4 }} />
           </Container>
         </Box>
+        <ToggleCustomTheme
+          showCustomTheme={showCustomTheme}
+          toggleCustomTheme={toggleCustomTheme}
+        />
       </Box>
     </ThemeProvider>
   );
diff --git a/docs/data/material/getting-started/templates/dashboard/Deposits.js b/docs/data/material/getting-started/templates/dashboard/Deposits.js
deleted file mode 100644
index d99bf6eb69d128..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Deposits.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import Title from './Title';
-
-function preventDefault(event) {
-  event.preventDefault();
-}
-
-export default function Deposits() {
-  return (
-    <React.Fragment>
-      <Title>Recent Deposits</Title>
-      <Typography component="p" variant="h4">
-        $3,024.00
-      </Typography>
-      <Typography color="text.secondary" sx={{ flex: 1 }}>
-        on 15 March, 2019
-      </Typography>
-      <div>
-        <Link color="primary" href="#" onClick={preventDefault}>
-          View balance
-        </Link>
-      </div>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/Deposits.tsx b/docs/data/material/getting-started/templates/dashboard/Deposits.tsx
deleted file mode 100644
index 0622041c26040f..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Deposits.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import Title from './Title';
-
-function preventDefault(event: React.MouseEvent) {
-  event.preventDefault();
-}
-
-export default function Deposits() {
-  return (
-    <React.Fragment>
-      <Title>Recent Deposits</Title>
-      <Typography component="p" variant="h4">
-        $3,024.00
-      </Typography>
-      <Typography color="text.secondary" sx={{ flex: 1 }}>
-        on 15 March, 2019
-      </Typography>
-      <div>
-        <Link color="primary" href="#" onClick={preventDefault}>
-          View balance
-        </Link>
-      </div>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/Deposits.tsx.preview b/docs/data/material/getting-started/templates/dashboard/Deposits.tsx.preview
deleted file mode 100644
index e7e01a7df11ec0..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Deposits.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-<React.Fragment>
-  <Title>Recent Deposits</Title>
-  <Typography component="p" variant="h4">
-    $3,024.00
-  </Typography>
-  <Typography color="text.secondary" sx={{ flex: 1 }}>
-    on 15 March, 2019
-  </Typography>
-  <div>
-    <Link color="primary" href="#" onClick={preventDefault}>
-      View balance
-    </Link>
-  </div>
-</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/material/getting-started/templates/dashboard/Orders.js b/docs/data/material/getting-started/templates/dashboard/Orders.js
deleted file mode 100644
index ef98995932640b..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Orders.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Title from './Title';
-
-// Generate Order Data
-function createData(id, date, name, shipTo, paymentMethod, amount) {
-  return { id, date, name, shipTo, paymentMethod, amount };
-}
-
-const rows = [
-  createData(
-    0,
-    '16 Mar, 2019',
-    'Elvis Presley',
-    'Tupelo, MS',
-    'VISA ⠀•••• 3719',
-    312.44,
-  ),
-  createData(
-    1,
-    '16 Mar, 2019',
-    'Paul McCartney',
-    'London, UK',
-    'VISA ⠀•••• 2574',
-    866.99,
-  ),
-  createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81),
-  createData(
-    3,
-    '16 Mar, 2019',
-    'Michael Jackson',
-    'Gary, IN',
-    'AMEX ⠀•••• 2000',
-    654.39,
-  ),
-  createData(
-    4,
-    '15 Mar, 2019',
-    'Bruce Springsteen',
-    'Long Branch, NJ',
-    'VISA ⠀•••• 5919',
-    212.79,
-  ),
-];
-
-function preventDefault(event) {
-  event.preventDefault();
-}
-
-export default function Orders() {
-  return (
-    <React.Fragment>
-      <Title>Recent Orders</Title>
-      <Table size="small">
-        <TableHead>
-          <TableRow>
-            <TableCell>Date</TableCell>
-            <TableCell>Name</TableCell>
-            <TableCell>Ship To</TableCell>
-            <TableCell>Payment Method</TableCell>
-            <TableCell align="right">Sale Amount</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row) => (
-            <TableRow key={row.id}>
-              <TableCell>{row.date}</TableCell>
-              <TableCell>{row.name}</TableCell>
-              <TableCell>{row.shipTo}</TableCell>
-              <TableCell>{row.paymentMethod}</TableCell>
-              <TableCell align="right">{`$${row.amount}`}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
-        See more orders
-      </Link>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/Orders.tsx b/docs/data/material/getting-started/templates/dashboard/Orders.tsx
deleted file mode 100644
index 77abe82a3490ef..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Orders.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Title from './Title';
-
-// Generate Order Data
-function createData(
-  id: number,
-  date: string,
-  name: string,
-  shipTo: string,
-  paymentMethod: string,
-  amount: number,
-) {
-  return { id, date, name, shipTo, paymentMethod, amount };
-}
-
-const rows = [
-  createData(
-    0,
-    '16 Mar, 2019',
-    'Elvis Presley',
-    'Tupelo, MS',
-    'VISA ⠀•••• 3719',
-    312.44,
-  ),
-  createData(
-    1,
-    '16 Mar, 2019',
-    'Paul McCartney',
-    'London, UK',
-    'VISA ⠀•••• 2574',
-    866.99,
-  ),
-  createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81),
-  createData(
-    3,
-    '16 Mar, 2019',
-    'Michael Jackson',
-    'Gary, IN',
-    'AMEX ⠀•••• 2000',
-    654.39,
-  ),
-  createData(
-    4,
-    '15 Mar, 2019',
-    'Bruce Springsteen',
-    'Long Branch, NJ',
-    'VISA ⠀•••• 5919',
-    212.79,
-  ),
-];
-
-function preventDefault(event: React.MouseEvent) {
-  event.preventDefault();
-}
-
-export default function Orders() {
-  return (
-    <React.Fragment>
-      <Title>Recent Orders</Title>
-      <Table size="small">
-        <TableHead>
-          <TableRow>
-            <TableCell>Date</TableCell>
-            <TableCell>Name</TableCell>
-            <TableCell>Ship To</TableCell>
-            <TableCell>Payment Method</TableCell>
-            <TableCell align="right">Sale Amount</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row) => (
-            <TableRow key={row.id}>
-              <TableCell>{row.date}</TableCell>
-              <TableCell>{row.name}</TableCell>
-              <TableCell>{row.shipTo}</TableCell>
-              <TableCell>{row.paymentMethod}</TableCell>
-              <TableCell align="right">{`$${row.amount}`}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
-        See more orders
-      </Link>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/Title.js b/docs/data/material/getting-started/templates/dashboard/Title.js
deleted file mode 100644
index d686a1ae8498da..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Title.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-
-function Title(props) {
-  return (
-    <Typography component="h2" variant="h6" color="primary" gutterBottom>
-      {props.children}
-    </Typography>
-  );
-}
-
-Title.propTypes = {
-  children: PropTypes.node,
-};
-
-export default Title;
diff --git a/docs/data/material/getting-started/templates/dashboard/Title.tsx b/docs/data/material/getting-started/templates/dashboard/Title.tsx
deleted file mode 100644
index c060b0906caf65..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/Title.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-
-interface TitleProps {
-  children?: React.ReactNode;
-}
-
-export default function Title(props: TitleProps) {
-  return (
-    <Typography component="h2" variant="h6" color="primary" gutterBottom>
-      {props.children}
-    </Typography>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
new file mode 100644
index 00000000000000..00446928c8b14b
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
@@ -0,0 +1,171 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { PieChart } from '@mui/x-charts/PieChart';
+import { useDrawingArea } from '@mui/x-charts/hooks';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+
+import {
+  IndiaFlag,
+  UsaFlag,
+  BrazilFlag,
+  GlobeFlag,
+} from '../internals/components/CustomIcons';
+
+const data = [
+  { label: 'India', value: 50000 },
+  { label: 'USA', value: 35000 },
+  { label: 'Brazil', value: 10000 },
+  { label: 'Other', value: 5000 },
+];
+
+const countries = [
+  {
+    name: 'India',
+    value: 50,
+    flag: <IndiaFlag />,
+    color: 'hsl(220, 25%, 65%)',
+  },
+  {
+    name: 'USA',
+    value: 35,
+    flag: <UsaFlag />,
+    color: 'hsl(220, 25%, 45%)',
+  },
+  {
+    name: 'Brazil',
+    value: 10,
+    flag: <BrazilFlag />,
+    color: 'hsl(220, 25%, 30%)',
+  },
+  {
+    name: 'Other',
+    value: 5,
+    flag: <GlobeFlag />,
+    color: 'hsl(220, 25%, 20%)',
+  },
+];
+
+const StyledText = styled('text', {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})(({ theme, variant }) => ({
+  textAnchor: 'middle',
+  dominantBaseline: 'central',
+  fill: theme.palette.text.secondary,
+  fontSize:
+    variant === 'primary'
+      ? theme.typography.h5.fontSize
+      : theme.typography.body2.fontSize,
+  fontWeight:
+    variant === 'primary'
+      ? theme.typography.h5.fontWeight
+      : theme.typography.body2.fontWeight,
+}));
+
+function PieCenterLabel({ primaryText, secondaryText }) {
+  const { width, height, left, top } = useDrawingArea();
+  const primaryY = top + height / 2 - 10;
+  const secondaryY = primaryY + 24;
+
+  return (
+    <React.Fragment>
+      <StyledText variant="primary" x={left + width / 2} y={primaryY}>
+        {primaryText}
+      </StyledText>
+      <StyledText variant="secondary" x={left + width / 2} y={secondaryY}>
+        {secondaryText}
+      </StyledText>
+    </React.Fragment>
+  );
+}
+
+PieCenterLabel.propTypes = {
+  primaryText: PropTypes.string.isRequired,
+  secondaryText: PropTypes.string.isRequired,
+};
+
+const colors = [
+  'hsl(220, 25%, 65%)',
+  'hsl(220, 25%, 45%)',
+  'hsl(220, 25%, 30%)',
+  'hsl(220, 25%, 20%)',
+];
+
+export default function ChartUserByCountry() {
+  return (
+    <Card variant="outlined" sx={{ pb: '8px' }}>
+      <CardContent>
+        <Typography component="h2" variant="subtitle2">
+          Users by country
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <PieChart
+            colors={colors}
+            margin={{
+              left: 80,
+              right: 80,
+              top: 80,
+              bottom: 80,
+            }}
+            series={[
+              {
+                data,
+                innerRadius: 75,
+                outerRadius: 100,
+                paddingAngle: 0,
+                highlightScope: { faded: 'global', highlighted: 'item' },
+              },
+            ]}
+            height={260}
+            width={260}
+            slotProps={{
+              legend: { hidden: true },
+            }}
+          >
+            <PieCenterLabel primaryText="98.5K" secondaryText="Total" />
+          </PieChart>
+        </Box>
+        {countries.map((country, index) => (
+          <Stack
+            key={index}
+            direction="row"
+            alignItems="center"
+            gap={2}
+            sx={{ pb: 2 }}
+          >
+            {country.flag}
+            <Stack gap={1} sx={{ flexGrow: 1 }}>
+              <Stack
+                direction="row"
+                justifyContent="space-between"
+                alignItems="center"
+                gap={2}
+              >
+                <Typography variant="body2" fontWeight="500">
+                  {country.name}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {country.value}%
+                </Typography>
+              </Stack>
+              <LinearProgress
+                variant="determinate"
+                value={country.value}
+                sx={{
+                  [`& .${linearProgressClasses.bar}`]: {
+                    backgroundColor: country.color,
+                  },
+                }}
+              />
+            </Stack>
+          </Stack>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
new file mode 100644
index 00000000000000..5048ba82ec7e62
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { PieChart } from '@mui/x-charts/PieChart';
+import { useDrawingArea } from '@mui/x-charts/hooks';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+
+import {
+  IndiaFlag,
+  UsaFlag,
+  BrazilFlag,
+  GlobeFlag,
+} from '../internals/components/CustomIcons';
+
+const data = [
+  { label: 'India', value: 50000 },
+  { label: 'USA', value: 35000 },
+  { label: 'Brazil', value: 10000 },
+  { label: 'Other', value: 5000 },
+];
+
+const countries = [
+  {
+    name: 'India',
+    value: 50,
+    flag: <IndiaFlag />,
+    color: 'hsl(220, 25%, 65%)',
+  },
+  {
+    name: 'USA',
+    value: 35,
+    flag: <UsaFlag />,
+    color: 'hsl(220, 25%, 45%)',
+  },
+  {
+    name: 'Brazil',
+    value: 10,
+    flag: <BrazilFlag />,
+    color: 'hsl(220, 25%, 30%)',
+  },
+  {
+    name: 'Other',
+    value: 5,
+    flag: <GlobeFlag />,
+    color: 'hsl(220, 25%, 20%)',
+  },
+];
+
+interface StyledTextProps {
+  variant: 'primary' | 'secondary';
+}
+
+const StyledText = styled('text', {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<StyledTextProps>(({ theme, variant }) => ({
+  textAnchor: 'middle',
+  dominantBaseline: 'central',
+  fill: theme.palette.text.secondary,
+  fontSize:
+    variant === 'primary'
+      ? theme.typography.h5.fontSize
+      : theme.typography.body2.fontSize,
+  fontWeight:
+    variant === 'primary'
+      ? theme.typography.h5.fontWeight
+      : theme.typography.body2.fontWeight,
+}));
+
+interface PieCenterLabelProps {
+  primaryText: string;
+  secondaryText: string;
+}
+
+function PieCenterLabel({ primaryText, secondaryText }: PieCenterLabelProps) {
+  const { width, height, left, top } = useDrawingArea();
+  const primaryY = top + height / 2 - 10;
+  const secondaryY = primaryY + 24;
+
+  return (
+    <React.Fragment>
+      <StyledText variant="primary" x={left + width / 2} y={primaryY}>
+        {primaryText}
+      </StyledText>
+      <StyledText variant="secondary" x={left + width / 2} y={secondaryY}>
+        {secondaryText}
+      </StyledText>
+    </React.Fragment>
+  );
+}
+
+const colors = [
+  'hsl(220, 25%, 65%)',
+  'hsl(220, 25%, 45%)',
+  'hsl(220, 25%, 30%)',
+  'hsl(220, 25%, 20%)',
+];
+
+export default function ChartUserByCountry() {
+  return (
+    <Card variant="outlined" sx={{ pb: '8px' }}>
+      <CardContent>
+        <Typography component="h2" variant="subtitle2">
+          Users by country
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <PieChart
+            colors={colors}
+            margin={{
+              left: 80,
+              right: 80,
+              top: 80,
+              bottom: 80,
+            }}
+            series={[
+              {
+                data,
+                innerRadius: 75,
+                outerRadius: 100,
+                paddingAngle: 0,
+                highlightScope: { faded: 'global', highlighted: 'item' },
+              },
+            ]}
+            height={260}
+            width={260}
+            slotProps={{
+              legend: { hidden: true },
+            }}
+          >
+            <PieCenterLabel primaryText="98.5K" secondaryText="Total" />
+          </PieChart>
+        </Box>
+        {countries.map((country, index) => (
+          <Stack
+            key={index}
+            direction="row"
+            alignItems="center"
+            gap={2}
+            sx={{ pb: 2 }}
+          >
+            {country.flag}
+            <Stack gap={1} sx={{ flexGrow: 1 }}>
+              <Stack
+                direction="row"
+                justifyContent="space-between"
+                alignItems="center"
+                gap={2}
+              >
+                <Typography variant="body2" fontWeight="500">
+                  {country.name}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {country.value}%
+                </Typography>
+              </Stack>
+              <LinearProgress
+                variant="determinate"
+                value={country.value}
+                sx={{
+                  [`& .${linearProgressClasses.bar}`]: {
+                    backgroundColor: country.color,
+                  },
+                }}
+              />
+            </Stack>
+          </Stack>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker.js b/docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker.js
new file mode 100644
index 00000000000000..e64f0631283a99
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker.js
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import Button from '@mui/material/Button';
+import CalendarTodayRoundedIcon from '@mui/icons-material/CalendarTodayRounded';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+function ButtonField(props) {
+  const {
+    setOpen,
+    label,
+    id,
+    disabled,
+    InputProps: { ref } = {},
+    inputProps: { 'aria-label': ariaLabel } = {},
+  } = props;
+
+  return (
+    <Button
+      variant="outlined"
+      id={id}
+      disabled={disabled}
+      ref={ref}
+      aria-label={ariaLabel}
+      size="small"
+      onClick={() => setOpen?.((prev) => !prev)}
+      startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
+      sx={{ minWidth: 'fit-content' }}
+    >
+      {label ? `${label}` : 'Pick a date'}
+    </Button>
+  );
+}
+
+ButtonField.propTypes = {
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  inputProps: PropTypes.shape({
+    'aria-label': PropTypes.string,
+  }),
+  InputProps: PropTypes.shape({
+    endAdornment: PropTypes.node,
+    startAdornment: PropTypes.node,
+  }),
+  label: PropTypes.node,
+  setOpen: PropTypes.func,
+};
+
+export default function CustomDatePicker() {
+  const [value, setValue] = React.useState(dayjs('2023-04-17'));
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        value={value}
+        label={value == null ? null : value.format('MMM DD, YYYY')}
+        onChange={(newValue) => setValue(newValue)}
+        slots={{ field: ButtonField }}
+        slotProps={{
+          field: { setOpen },
+          nextIconButton: { size: 'small' },
+          previousIconButton: { size: 'small' },
+        }}
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        views={['day', 'month', 'year']}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker.tsx
new file mode 100644
index 00000000000000..316f327a8e226c
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import Button from '@mui/material/Button';
+import CalendarTodayRoundedIcon from '@mui/icons-material/CalendarTodayRounded';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import {
+  BaseSingleInputFieldProps,
+  DateValidationError,
+  FieldSection,
+} from '@mui/x-date-pickers/models';
+
+interface ButtonFieldProps
+  extends UseDateFieldProps<Dayjs, false>,
+    BaseSingleInputFieldProps<
+      Dayjs | null,
+      Dayjs,
+      FieldSection,
+      false,
+      DateValidationError
+    > {
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function ButtonField(props: ButtonFieldProps) {
+  const {
+    setOpen,
+    label,
+    id,
+    disabled,
+    InputProps: { ref } = {},
+    inputProps: { 'aria-label': ariaLabel } = {},
+  } = props;
+
+  return (
+    <Button
+      variant="outlined"
+      id={id}
+      disabled={disabled}
+      ref={ref}
+      aria-label={ariaLabel}
+      size="small"
+      onClick={() => setOpen?.((prev) => !prev)}
+      startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
+      sx={{ minWidth: 'fit-content' }}
+    >
+      {label ? `${label}` : 'Pick a date'}
+    </Button>
+  );
+}
+
+export default function CustomDatePicker() {
+  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2023-04-17'));
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        value={value}
+        label={value == null ? null : value.format('MMM DD, YYYY')}
+        onChange={(newValue) => setValue(newValue)}
+        slots={{ field: ButtonField }}
+        slotProps={{
+          field: { setOpen } as any,
+          nextIconButton: { size: 'small' },
+          previousIconButton: { size: 'small' },
+        }}
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        views={['day', 'month', 'year']}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js
new file mode 100644
index 00000000000000..e2a10335890dd7
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { columns, rows } from '../internals/data/gridData';
+
+export default function CustomizedDataGrid() {
+  return (
+    <DataGrid
+      checkboxSelection
+      rows={rows}
+      columns={columns}
+      getRowClassName={(params) =>
+        params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
+      }
+      initialState={{
+        pagination: { paginationModel: { pageSize: 10 } },
+      }}
+      pageSizeOptions={[10, 25, 50]}
+      disableColumnResize
+    />
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx
new file mode 100644
index 00000000000000..e2a10335890dd7
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { columns, rows } from '../internals/data/gridData';
+
+export default function CustomizedDataGrid() {
+  return (
+    <DataGrid
+      checkboxSelection
+      rows={rows}
+      columns={columns}
+      getRowClassName={(params) =>
+        params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
+      }
+      initialState={{
+        pagination: { paginationModel: { pageSize: 10 } },
+      }}
+      pageSizeOptions={[10, 25, 50]}
+      disableColumnResize
+    />
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
new file mode 100644
index 00000000000000..bedfba4e43698e
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
@@ -0,0 +1,228 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { animated, useSpring } from '@react-spring/web';
+
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Collapse from '@mui/material/Collapse';
+import Typography from '@mui/material/Typography';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
+import {
+  TreeItem2Content,
+  TreeItem2IconContainer,
+  TreeItem2Label,
+  TreeItem2Root,
+} from '@mui/x-tree-view/TreeItem2';
+import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
+import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+
+import { useTheme } from '@mui/material/styles';
+
+const ITEMS = [
+  {
+    id: '1',
+    label: 'Website',
+    children: [
+      { id: '1.1', label: 'Home', color: 'green' },
+      { id: '1.2', label: 'Pricing', color: 'green' },
+      { id: '1.3', label: 'About us', color: 'green' },
+      {
+        id: '1.4',
+        label: 'Blog',
+        children: [
+          { id: '1.1.1', label: 'Announcements', color: 'blue' },
+          { id: '1.1.2', label: 'April lookahead', color: 'blue' },
+          { id: '1.1.3', label: "What's new", color: 'blue' },
+          { id: '1.1.4', label: 'Meet the team', color: 'blue' },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    label: 'Store',
+    children: [
+      { id: '2.1', label: 'All products', color: 'green' },
+      {
+        id: '2.2',
+        label: 'Categories',
+        children: [
+          { id: '2.2.1', label: 'Gadgets', color: 'blue' },
+          { id: '2.2.2', label: 'Phones', color: 'blue' },
+          { id: '2.2.3', label: 'Wearables', color: 'blue' },
+        ],
+      },
+      { id: '2.3', label: 'Bestsellers', color: 'green' },
+      { id: '2.4', label: 'Sales', color: 'green' },
+    ],
+  },
+  { id: '4', label: 'Contact', color: 'blue' },
+  { id: '5', label: 'Help', color: 'blue' },
+];
+
+function DotIcon({ color }) {
+  return (
+    <Box sx={{ marginRight: 1, display: 'flex', alignItems: 'center' }}>
+      <svg width={6} height={6}>
+        <circle cx={3} cy={3} r={3} fill={color} />
+      </svg>
+    </Box>
+  );
+}
+
+DotIcon.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
+const AnimatedCollapse = animated(Collapse);
+
+function TransitionComponent(props) {
+  const style = useSpring({
+    to: {
+      opacity: props.in ? 1 : 0,
+      transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
+    },
+  });
+
+  return <AnimatedCollapse style={style} {...props} />;
+}
+
+TransitionComponent.propTypes = {
+  /**
+   * Show the component; triggers the enter or exit states
+   */
+  in: PropTypes.bool,
+};
+
+function CustomLabel({ color, expandable, children, ...other }) {
+  const theme = useTheme();
+  const colors = {
+    blue: theme.palette.primary.main,
+    green: theme.palette.success.main,
+  };
+
+  const iconColor = color ? colors[color] : null;
+  return (
+    <TreeItem2Label
+      {...other}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      {iconColor && <DotIcon color={iconColor} />}
+
+      <Typography className="labelText" variant="body2" color="text.primary">
+        {children}
+      </Typography>
+    </TreeItem2Label>
+  );
+}
+
+CustomLabel.propTypes = {
+  children: PropTypes.node,
+  color: PropTypes.oneOf(['blue', 'green']),
+  expandable: PropTypes.bool,
+};
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status,
+    publicAPI,
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+
+  const item = publicAPI.getItem(itemId);
+  const color = item?.color;
+  return (
+    <TreeItem2Provider itemId={itemId}>
+      <TreeItem2Root {...getRootProps(other)}>
+        <TreeItem2Content
+          {...getContentProps({
+            className: clsx('content', {
+              expanded: status.expanded,
+              selected: status.selected,
+              focused: status.focused,
+              disabled: status.disabled,
+            }),
+          })}
+        >
+          {status.expandable && (
+            <TreeItem2IconContainer {...getIconContainerProps()}>
+              <TreeItem2Icon status={status} />
+            </TreeItem2IconContainer>
+          )}
+
+          <CustomLabel {...getLabelProps({ color })} />
+        </TreeItem2Content>
+        {children && (
+          <TransitionComponent
+            {...getGroupTransitionProps({ className: 'groupTransition' })}
+          />
+        )}
+      </TreeItem2Root>
+    </TreeItem2Provider>
+  );
+});
+
+CustomTreeItem.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * If `true`, the item is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The id attribute of the item. If not provided, it will be generated.
+   */
+  id: PropTypes.string,
+  /**
+   * The id of the item.
+   * Must be unique.
+   */
+  itemId: PropTypes.string.isRequired,
+  /**
+   * The label of the item.
+   */
+  label: PropTypes.node,
+};
+
+export default function CustomizedTreeView() {
+  return (
+    <Card
+      variant="outlined"
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+    >
+      <CardContent>
+        <Typography variant="subtitle2">Product tree</Typography>
+        <RichTreeView
+          items={ITEMS}
+          aria-label="pages"
+          multiSelect
+          defaultExpandedItems={['1', '1.1']}
+          defaultSelectedItems={['1.1', '1.1.1']}
+          sx={{
+            m: '0 -8px',
+            pb: '8px',
+            height: 'fit-content',
+            flexGrow: 1,
+            overflowY: 'auto',
+          }}
+          slots={{ item: CustomTreeItem }}
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
new file mode 100644
index 00000000000000..76406d4526faaa
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
@@ -0,0 +1,209 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { animated, useSpring } from '@react-spring/web';
+import { TransitionProps } from '@mui/material/transitions';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Collapse from '@mui/material/Collapse';
+import Typography from '@mui/material/Typography';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import {
+  unstable_useTreeItem2 as useTreeItem2,
+  UseTreeItem2Parameters,
+} from '@mui/x-tree-view/useTreeItem2';
+import {
+  TreeItem2Content,
+  TreeItem2IconContainer,
+  TreeItem2Label,
+  TreeItem2Root,
+} from '@mui/x-tree-view/TreeItem2';
+import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
+import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { useTheme } from '@mui/material/styles';
+
+type Color = 'blue' | 'green';
+
+type ExtendedTreeItemProps = {
+  color?: Color;
+  id: string;
+  label: string;
+};
+
+const ITEMS: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
+  {
+    id: '1',
+    label: 'Website',
+    children: [
+      { id: '1.1', label: 'Home', color: 'green' },
+      { id: '1.2', label: 'Pricing', color: 'green' },
+      { id: '1.3', label: 'About us', color: 'green' },
+      {
+        id: '1.4',
+        label: 'Blog',
+        children: [
+          { id: '1.1.1', label: 'Announcements', color: 'blue' },
+          { id: '1.1.2', label: 'April lookahead', color: 'blue' },
+          { id: '1.1.3', label: "What's new", color: 'blue' },
+          { id: '1.1.4', label: 'Meet the team', color: 'blue' },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    label: 'Store',
+    children: [
+      { id: '2.1', label: 'All products', color: 'green' },
+      {
+        id: '2.2',
+        label: 'Categories',
+        children: [
+          { id: '2.2.1', label: 'Gadgets', color: 'blue' },
+          { id: '2.2.2', label: 'Phones', color: 'blue' },
+          { id: '2.2.3', label: 'Wearables', color: 'blue' },
+        ],
+      },
+      { id: '2.3', label: 'Bestsellers', color: 'green' },
+      { id: '2.4', label: 'Sales', color: 'green' },
+    ],
+  },
+  { id: '4', label: 'Contact', color: 'blue' },
+  { id: '5', label: 'Help', color: 'blue' },
+];
+
+function DotIcon({ color }: { color: string }) {
+  return (
+    <Box sx={{ marginRight: 1, display: 'flex', alignItems: 'center' }}>
+      <svg width={6} height={6}>
+        <circle cx={3} cy={3} r={3} fill={color} />
+      </svg>
+    </Box>
+  );
+}
+
+const AnimatedCollapse = animated(Collapse);
+
+function TransitionComponent(props: TransitionProps) {
+  const style = useSpring({
+    to: {
+      opacity: props.in ? 1 : 0,
+      transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
+    },
+  });
+
+  return <AnimatedCollapse style={style} {...props} />;
+}
+
+interface CustomLabelProps {
+  children: React.ReactNode;
+  color?: Color;
+  expandable?: boolean;
+}
+
+function CustomLabel({ color, expandable, children, ...other }: CustomLabelProps) {
+  const theme = useTheme();
+  const colors = {
+    blue: theme.palette.primary.main,
+    green: theme.palette.success.main,
+  };
+
+  const iconColor = color ? colors[color] : null;
+  return (
+    <TreeItem2Label
+      {...other}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      {iconColor && <DotIcon color={iconColor} />}
+
+      <Typography className="labelText" variant="body2" color="text.primary">
+        {children}
+      </Typography>
+    </TreeItem2Label>
+  );
+}
+
+interface CustomTreeItemProps
+  extends Omit<UseTreeItem2Parameters, 'rootRef'>,
+    Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {}
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+  props: CustomTreeItemProps,
+  ref: React.Ref<HTMLLIElement>,
+) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    status,
+    publicAPI,
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+
+  const item = publicAPI.getItem(itemId);
+  const color = item?.color;
+  return (
+    <TreeItem2Provider itemId={itemId}>
+      <TreeItem2Root {...getRootProps(other)}>
+        <TreeItem2Content
+          {...getContentProps({
+            className: clsx('content', {
+              expanded: status.expanded,
+              selected: status.selected,
+              focused: status.focused,
+              disabled: status.disabled,
+            }),
+          })}
+        >
+          {status.expandable && (
+            <TreeItem2IconContainer {...getIconContainerProps()}>
+              <TreeItem2Icon status={status} />
+            </TreeItem2IconContainer>
+          )}
+
+          <CustomLabel {...getLabelProps({ color })} />
+        </TreeItem2Content>
+        {children && (
+          <TransitionComponent
+            {...getGroupTransitionProps({ className: 'groupTransition' })}
+          />
+        )}
+      </TreeItem2Root>
+    </TreeItem2Provider>
+  );
+});
+
+export default function CustomizedTreeView() {
+  return (
+    <Card
+      variant="outlined"
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+    >
+      <CardContent>
+        <Typography variant="subtitle2">Product tree</Typography>
+        <RichTreeView
+          items={ITEMS}
+          aria-label="pages"
+          multiSelect
+          defaultExpandedItems={['1', '1.1']}
+          defaultSelectedItems={['1.1', '1.1.1']}
+          sx={{
+            m: '0 -8px',
+            pb: '8px',
+            height: 'fit-content',
+            flexGrow: 1,
+            overflowY: 'auto',
+          }}
+          slots={{ item: CustomTreeItem }}
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Header.js b/docs/data/material/getting-started/templates/dashboard/components/Header.js
new file mode 100644
index 00000000000000..baee88632126d1
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/Header.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Search from './Search';
+import CustomDatePicker from './CustomDatePicker';
+
+export default function Header() {
+  return (
+    <Stack
+      direction={{ xs: 'column', md: 'row' }}
+      alignItems={{ xs: 'flex-start', md: 'flex-end' }}
+      justifyContent="space-between"
+      gap={2}
+      sx={{ my: 2 }}
+    >
+      <Stack sx={{ maxWidth: 500 }}>
+        <Typography variant="h4" component="h1">
+          Dashboard
+        </Typography>
+        <Typography color="text.secondary">
+          Real-time analytics to improve user engagement and guide strategy.
+        </Typography>
+      </Stack>
+      <Stack direction="row" gap={1} sx={{ width: { xs: '100%', sm: 'auto' } }}>
+        <Search />
+        <CustomDatePicker />
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Header.tsx b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
new file mode 100644
index 00000000000000..baee88632126d1
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Search from './Search';
+import CustomDatePicker from './CustomDatePicker';
+
+export default function Header() {
+  return (
+    <Stack
+      direction={{ xs: 'column', md: 'row' }}
+      alignItems={{ xs: 'flex-start', md: 'flex-end' }}
+      justifyContent="space-between"
+      gap={2}
+      sx={{ my: 2 }}
+    >
+      <Stack sx={{ maxWidth: 500 }}>
+        <Typography variant="h4" component="h1">
+          Dashboard
+        </Typography>
+        <Typography color="text.secondary">
+          Real-time analytics to improve user engagement and guide strategy.
+        </Typography>
+      </Stack>
+      <Stack direction="row" gap={1} sx={{ width: { xs: '100%', sm: 'auto' } }}>
+        <Search />
+        <CustomDatePicker />
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.js b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.js
new file mode 100644
index 00000000000000..659baca1bdc683
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.js
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import MuiCard from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import InsightsRoundedIcon from '@mui/icons-material/InsightsRounded';
+
+const Card = styled(MuiCard)(({ theme }) => ({
+  border: '1px solid',
+  borderColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.primary.light
+      : theme.palette.primary.dark,
+  boxShadow: 'none',
+  background:
+    theme.palette.mode === 'light'
+      ? 'hsl(210, 100%, 98%)'
+      : 'hsla(210, 100%, 15%, 0.25)',
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[900]
+      : theme.palette.grey[200],
+}));
+
+export default function HighlightedCard() {
+  return (
+    <Card sx={{ height: '100%' }}>
+      <CardContent>
+        <InsightsRoundedIcon color="primary" />
+        <Typography component="h2" variant="subtitle2" fontWeight="600" gutterBottom>
+          Explore your data
+        </Typography>
+        <Typography color="text.secondary" sx={{ mb: '8px' }}>
+          Uncover performance and visitor insights with our data wizardry.
+        </Typography>
+        <Button
+          variant="outlined"
+          size="small"
+          color="primary"
+          endIcon={<ChevronRightRoundedIcon />}
+        >
+          Get insights
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.tsx b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.tsx
new file mode 100644
index 00000000000000..659baca1bdc683
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import MuiCard from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import InsightsRoundedIcon from '@mui/icons-material/InsightsRounded';
+
+const Card = styled(MuiCard)(({ theme }) => ({
+  border: '1px solid',
+  borderColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.primary.light
+      : theme.palette.primary.dark,
+  boxShadow: 'none',
+  background:
+    theme.palette.mode === 'light'
+      ? 'hsl(210, 100%, 98%)'
+      : 'hsla(210, 100%, 15%, 0.25)',
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[900]
+      : theme.palette.grey[200],
+}));
+
+export default function HighlightedCard() {
+  return (
+    <Card sx={{ height: '100%' }}>
+      <CardContent>
+        <InsightsRoundedIcon color="primary" />
+        <Typography component="h2" variant="subtitle2" fontWeight="600" gutterBottom>
+          Explore your data
+        </Typography>
+        <Typography color="text.secondary" sx={{ mb: '8px' }}>
+          Uncover performance and visitor insights with our data wizardry.
+        </Typography>
+        <Button
+          variant="outlined"
+          size="small"
+          color="primary"
+          endIcon={<ChevronRightRoundedIcon />}
+        >
+          Get insights
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
new file mode 100644
index 00000000000000..7790a233c9c72c
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Grid from '@mui/material/Unstable_Grid2';
+import Stack from '@mui/material/Stack';
+import ChartUserByCountry from './ChartUserByCountry';
+import CustomizedTreeView from './CustomizedTreeView';
+import CustomizedDataGrid from './CustomizedDataGrid';
+import HighlightedCard from './HighlightedCard';
+import PageViewsBarChart from './PageViewsBarChart';
+import PageViewsChart from './PageViewsChart';
+import StatCard from './StatCard';
+
+const data = [
+  {
+    title: 'Users',
+    value: '14k',
+    interval: 'Last 30 days',
+    trend: 'up',
+    data: [2, 4, 3, 5, 7, 6, 8, 10],
+  },
+  {
+    title: 'Conversions',
+    value: '325',
+    interval: 'Last 30 days',
+    trend: 'down',
+    data: [10, 7, 6, 8, 5, 4, 4, 2],
+  },
+  {
+    title: 'Event count',
+    value: '200k',
+    interval: 'Last 30 days',
+    trend: 'neutral',
+    data: [5, 4, 6, 3, 4, 3, 7, 6],
+  },
+  {
+    title: 'Engagements',
+    value: '30k',
+    interval: 'Last 30 days',
+    trend: 'up',
+    data: [2, 4, 3, 4, 5, 4, 7, 8],
+  },
+];
+
+export default function MainGrid() {
+  return (
+    <React.Fragment>
+      {/* cards */}
+
+      <Grid container spacing={2} columns={12}>
+        {data.map((card, index) => (
+          <Grid xs={6} sm={3} md={2} lg={2.25}>
+            <StatCard key={index} {...card} />
+          </Grid>
+        ))}
+        <Grid xs={12} md={4} lg={3}>
+          <HighlightedCard />
+        </Grid>
+      </Grid>
+
+      <Grid
+        container
+        spacing={2}
+        direction={{ xs: 'row-reverse', md: 'row' }}
+        columns={12}
+      >
+        <Grid xs={12} md={8} lg={9}>
+          <Stack spacing={2}>
+            <PageViewsBarChart />
+            <PageViewsChart />
+            <CustomizedDataGrid />
+          </Stack>
+        </Grid>
+        <Grid xs={12} md={4} lg={3}>
+          <Stack spacing={2} direction={{ xs: 'column', sm: 'row', md: 'column' }}>
+            <CustomizedTreeView />
+            <ChartUserByCountry />
+          </Stack>
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
new file mode 100644
index 00000000000000..360b077c2a65ce
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Grid from '@mui/material/Unstable_Grid2';
+import Stack from '@mui/material/Stack';
+import ChartUserByCountry from './ChartUserByCountry';
+import CustomizedTreeView from './CustomizedTreeView';
+import CustomizedDataGrid from './CustomizedDataGrid';
+import HighlightedCard from './HighlightedCard';
+import PageViewsBarChart from './PageViewsBarChart';
+import PageViewsChart from './PageViewsChart';
+import StatCard, { StatCardProps } from './StatCard';
+
+const data: StatCardProps[] = [
+  {
+    title: 'Users',
+    value: '14k',
+    interval: 'Last 30 days',
+    trend: 'up',
+    data: [2, 4, 3, 5, 7, 6, 8, 10],
+  },
+  {
+    title: 'Conversions',
+    value: '325',
+    interval: 'Last 30 days',
+    trend: 'down',
+    data: [10, 7, 6, 8, 5, 4, 4, 2],
+  },
+  {
+    title: 'Event count',
+    value: '200k',
+    interval: 'Last 30 days',
+    trend: 'neutral',
+    data: [5, 4, 6, 3, 4, 3, 7, 6],
+  },
+  {
+    title: 'Engagements',
+    value: '30k',
+    interval: 'Last 30 days',
+    trend: 'up',
+    data: [2, 4, 3, 4, 5, 4, 7, 8],
+  },
+];
+
+export default function MainGrid() {
+  return (
+    <React.Fragment>
+      {/* cards */}
+
+      <Grid container spacing={2} columns={12}>
+        {data.map((card, index) => (
+          <Grid xs={6} sm={3} md={2} lg={2.25}>
+            <StatCard key={index} {...card} />
+          </Grid>
+        ))}
+        <Grid xs={12} md={4} lg={3}>
+          <HighlightedCard />
+        </Grid>
+      </Grid>
+
+      <Grid
+        container
+        spacing={2}
+        direction={{ xs: 'row-reverse', md: 'row' }}
+        columns={12}
+      >
+        <Grid xs={12} md={8} lg={9}>
+          <Stack spacing={2}>
+            <PageViewsBarChart />
+            <PageViewsChart />
+            <CustomizedDataGrid />
+          </Stack>
+        </Grid>
+        <Grid xs={12} md={4} lg={3}>
+          <Stack spacing={2} direction={{ xs: 'column', sm: 'row', md: 'column' }}>
+            <CustomizedTreeView />
+            <ChartUserByCountry />
+          </Stack>
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js
new file mode 100644
index 00000000000000..d324b3ba822816
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+
+function MenuButton({ showBadge = false, ...props }) {
+  return (
+    <Badge
+      color="error"
+      variant="dot"
+      invisible={!showBadge}
+      sx={{
+        '& .MuiBadge-badge': { right: 2, top: 2 },
+      }}
+    >
+      <IconButton size="small" {...props} />
+    </Badge>
+  );
+}
+
+MenuButton.propTypes = {
+  showBadge: PropTypes.bool,
+};
+
+export default MenuButton;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
new file mode 100644
index 00000000000000..35453496a9181a
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Badge from '@mui/material/Badge';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+
+interface StyledMenuButtonProps extends IconButtonProps {
+  showBadge?: boolean;
+}
+
+export default function MenuButton({
+  showBadge = false,
+  ...props
+}: StyledMenuButtonProps) {
+  return (
+    <Badge
+      color="error"
+      variant="dot"
+      invisible={!showBadge}
+      sx={{
+        '& .MuiBadge-badge': { right: 2, top: 2 },
+      }}
+    >
+      <IconButton size="small" {...props} />
+    </Badge>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
new file mode 100644
index 00000000000000..23a7fae0c99cd5
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+import AppBar from '@mui/material/AppBar';
+import Stack from '@mui/material/Stack';
+import MuiToolbar from '@mui/material/Toolbar';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import ToggleColorMode from './ToggleColorMode';
+import SideNav from './SideNav';
+import MenuButton from './MenuButton';
+import NavbarBreadcrumbs from './NavbarBreadcrumbs';
+import OptionsMenu from './OptionsMenu';
+
+const Toolbar = styled(MuiToolbar)({
+  maxWidth: 1538,
+  width: '100%',
+  padding: '16px 16px 0 16px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  justifyContent: 'center',
+  gap: '12px',
+  flexShrink: 0,
+  backdropFilter: 'blur(24px)',
+  '& .MuiTabs-flexContainer': {
+    gap: '8px',
+    p: '8px',
+    pb: 0,
+  },
+});
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+function Navbar({ mode, toggleColorMode }) {
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer = (newOpen) => () => {
+    setOpen(newOpen);
+  };
+
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <AppBar
+      position="fixed"
+      sx={(theme) => ({
+        boxShadow: 0,
+        bgcolor: 'transparent',
+        backgroundImage: 'none',
+        alignItems: 'center',
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+      })}
+    >
+      <Toolbar variant="regular">
+        <Stack
+          direction="row"
+          gap={1}
+          alignItems="center"
+          justifyContent={{ xs: 'flex-end', md: 'space-between' }}
+          flexGrow={1}
+          sx={{ width: '100%', display: { xs: 'none', md: 'flex' } }}
+        >
+          <NavbarBreadcrumbs />
+          <Stack direction="row" gap={1}>
+            <MenuButton showBadge>
+              <NotificationsRoundedIcon />
+            </MenuButton>
+            <OptionsMenu />
+            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          </Stack>
+        </Stack>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          flexGrow={1}
+          sx={{ width: '100%', display: { sm: 'flex', md: 'none' } }}
+        >
+          <NavbarBreadcrumbs />
+          <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
+            <MenuRoundedIcon />
+          </MenuButton>
+          <SideNav
+            open={open}
+            toggleDrawer={toggleDrawer}
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
+        </Stack>
+        <Tabs value={value} onChange={handleChange} aria-label="navbar tabs">
+          <Tab label="Home" {...a11yProps(0)} />
+          <Tab label="Analytics" {...a11yProps(1)} />
+          <Tab label="Clients" {...a11yProps(2)} />
+        </Tabs>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+Navbar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+};
+
+export default Navbar;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
new file mode 100644
index 00000000000000..b04d10dd672164
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { PaletteMode } from '@mui/material';
+import AppBar from '@mui/material/AppBar';
+import Stack from '@mui/material/Stack';
+import MuiToolbar from '@mui/material/Toolbar';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import ToggleColorMode from './ToggleColorMode';
+import SideNav from './SideNav';
+import MenuButton from './MenuButton';
+import NavbarBreadcrumbs from './NavbarBreadcrumbs';
+import OptionsMenu from './OptionsMenu';
+
+interface NavBarProps {
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+const Toolbar = styled(MuiToolbar)({
+  maxWidth: 1538,
+  width: '100%',
+  padding: '16px 16px 0 16px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  justifyContent: 'center',
+  gap: '12px',
+  flexShrink: 0,
+  backdropFilter: 'blur(24px)',
+  '& .MuiTabs-flexContainer': {
+    gap: '8px',
+    p: '8px',
+    pb: 0,
+  },
+});
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer = (newOpen: boolean) => () => {
+    setOpen(newOpen);
+  };
+
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <AppBar
+      position="fixed"
+      sx={(theme) => ({
+        boxShadow: 0,
+        bgcolor: 'transparent',
+        backgroundImage: 'none',
+        alignItems: 'center',
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+      })}
+    >
+      <Toolbar variant="regular">
+        <Stack
+          direction="row"
+          gap={1}
+          alignItems="center"
+          justifyContent={{ xs: 'flex-end', md: 'space-between' }}
+          flexGrow={1}
+          sx={{ width: '100%', display: { xs: 'none', md: 'flex' } }}
+        >
+          <NavbarBreadcrumbs />
+          <Stack direction="row" gap={1}>
+            <MenuButton showBadge>
+              <NotificationsRoundedIcon />
+            </MenuButton>
+            <OptionsMenu />
+            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          </Stack>
+        </Stack>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          flexGrow={1}
+          sx={{ width: '100%', display: { sm: 'flex', md: 'none' } }}
+        >
+          <NavbarBreadcrumbs />
+          <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
+            <MenuRoundedIcon />
+          </MenuButton>
+          <SideNav
+            open={open}
+            toggleDrawer={toggleDrawer}
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
+        </Stack>
+        <Tabs value={value} onChange={handleChange} aria-label="navbar tabs">
+          <Tab label="Home" {...a11yProps(0)} />
+          <Tab label="Analytics" {...a11yProps(1)} />
+          <Tab label="Clients" {...a11yProps(2)} />
+        </Tabs>
+      </Toolbar>
+    </AppBar>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js
new file mode 100644
index 00000000000000..a7ea114b17330b
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import { SitemarkIcon } from '../internals/components/CustomIcons';
+
+const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({
+  '& .MuiBreadcrumbs-separator': {
+    color: theme.palette.action.disabled,
+  },
+  '& .MuiBreadcrumbs-ol': {
+    alignItems: 'normal',
+  },
+}));
+
+export default function NavbarBreadcrumbs() {
+  return (
+    <StyledBreadcrumbs aria-label="breadcrumb">
+      <SitemarkIcon />
+      <Typography fontWeight="medium" color="text.primary">
+        Project (Production)
+      </Typography>
+    </StyledBreadcrumbs>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx
new file mode 100644
index 00000000000000..a7ea114b17330b
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import { SitemarkIcon } from '../internals/components/CustomIcons';
+
+const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({
+  '& .MuiBreadcrumbs-separator': {
+    color: theme.palette.action.disabled,
+  },
+  '& .MuiBreadcrumbs-ol': {
+    alignItems: 'normal',
+  },
+}));
+
+export default function NavbarBreadcrumbs() {
+  return (
+    <StyledBreadcrumbs aria-label="breadcrumb">
+      <SitemarkIcon />
+      <Typography fontWeight="medium" color="text.primary">
+        Project (Production)
+      </Typography>
+    </StyledBreadcrumbs>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js
new file mode 100644
index 00000000000000..da6b2efeb22c58
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Divider from '@mui/material/Divider';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
+import MenuButton from './MenuButton';
+
+export default function OptionsMenu() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <React.Fragment>
+      <MenuButton onClick={handleClick}>
+        <MoreVertRoundedIcon />
+      </MenuButton>
+      <Menu
+        anchorEl={anchorEl}
+        id="menu"
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem sx={{ mt: 1 }}>
+          <Avatar
+            sizes="small"
+            alt="Riley Carter"
+            src="/static/images/avatar/7.jpg"
+            sx={{
+              width: 24,
+              height: 24,
+              mr: 1,
+            }}
+          />
+          <Typography component="p" variant="subtitle2">
+            Riley Carter
+          </Typography>
+        </MenuItem>
+        <Divider />
+        <MenuItem onClick={handleClose}>Profile</MenuItem>
+        <MenuItem onClick={handleClose}>My account</MenuItem>
+        <Divider />
+        <MenuItem onClick={handleClose}>Add another account</MenuItem>
+        <MenuItem onClick={handleClose}>Settings</MenuItem>
+        <MenuItem onClick={handleClose}>Logout</MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx
new file mode 100644
index 00000000000000..ad68a17337210d
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Divider from '@mui/material/Divider';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
+import MenuButton from './MenuButton';
+
+export default function OptionsMenu() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <React.Fragment>
+      <MenuButton onClick={handleClick}>
+        <MoreVertRoundedIcon />
+      </MenuButton>
+      <Menu
+        anchorEl={anchorEl}
+        id="menu"
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem sx={{ mt: 1 }}>
+          <Avatar
+            sizes="small"
+            alt="Riley Carter"
+            src="/static/images/avatar/7.jpg"
+            sx={{
+              width: 24,
+              height: 24,
+              mr: 1,
+            }}
+          />
+          <Typography component="p" variant="subtitle2">
+            Riley Carter
+          </Typography>
+        </MenuItem>
+        <Divider />
+        <MenuItem onClick={handleClose}>Profile</MenuItem>
+        <MenuItem onClick={handleClose}>My account</MenuItem>
+        <Divider />
+        <MenuItem onClick={handleClose}>Add another account</MenuItem>
+        <MenuItem onClick={handleClose}>Settings</MenuItem>
+        <MenuItem onClick={handleClose}>Logout</MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
new file mode 100644
index 00000000000000..b5b75c47922e57
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { gray } from '../themePrimitives';
+
+const colorPaletteLight = [gray[700], gray[500], gray[300]];
+const colorPalette = (mode) =>
+  mode === 'dark' ? colorPaletteLight : colorPaletteLight;
+
+export default function PageViewsBarChart() {
+  return (
+    <Card variant="outlined" sx={{ width: '100%' }}>
+      <CardContent>
+        <Typography variant="subtitle2" gutterBottom>
+          Page views and downloads
+        </Typography>
+        <BarChart
+          borderRadius={6}
+          colors={colorPalette}
+          xAxis={[
+            {
+              scaleType: 'band',
+              categoryGapRatio: 0.5,
+              data: [
+                'Jan',
+                'Feb',
+                'Mar',
+                'Apr',
+                'May',
+                'Jun',
+                'Jul',
+                'Aug',
+                'Sep',
+                'Oct',
+                'Nov',
+                'Dec',
+              ],
+            },
+          ]}
+          series={[
+            {
+              id: 'page-views',
+              label: 'Page views',
+              data: [
+                2234, 3872, 2998, 4125, 3357, 2789, 4412, 2005, 4829, 3147, 4361,
+                2526,
+              ],
+              stack: 'A',
+            },
+            {
+              id: 'downloads',
+              label: 'Downloads',
+              data: [
+                3098, 4215, 2384, 2101, 4752, 3593, 2837, 4914, 2468, 3279, 4530,
+                3782,
+              ],
+              stack: 'A',
+            },
+            {
+              id: 'conversions',
+              label: 'Conversions',
+              data: [
+                4051, 2275, 3129, 4693, 3904, 2038, 4315, 2641, 3482, 4976, 2803,
+                3620,
+              ],
+              stack: 'A',
+            },
+          ]}
+          height={320}
+          margin={{ left: 50, right: 0, top: 60, bottom: 30 }}
+          grid={{ horizontal: true }}
+          slotProps={{
+            legend: {
+              position: { vertical: 'top', horizontal: 'right' },
+              itemMarkWidth: 10,
+              itemMarkHeight: 10,
+              itemGap: 24,
+              labelStyle: { fontSize: 14 },
+            },
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
new file mode 100644
index 00000000000000..5dab2c76f85a9f
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { gray } from '../themePrimitives';
+
+const colorPaletteLight = [gray[700], gray[500], gray[300]];
+const colorPalette = (mode: 'light' | 'dark') =>
+  mode === 'dark' ? colorPaletteLight : colorPaletteLight;
+
+export default function PageViewsBarChart() {
+  return (
+    <Card variant="outlined" sx={{ width: '100%' }}>
+      <CardContent>
+        <Typography variant="subtitle2" gutterBottom>
+          Page views and downloads
+        </Typography>
+        <BarChart
+          borderRadius={6}
+          colors={colorPalette}
+          xAxis={
+            [
+              {
+                scaleType: 'band',
+                categoryGapRatio: 0.5,
+                data: [
+                  'Jan',
+                  'Feb',
+                  'Mar',
+                  'Apr',
+                  'May',
+                  'Jun',
+                  'Jul',
+                  'Aug',
+                  'Sep',
+                  'Oct',
+                  'Nov',
+                  'Dec',
+                ],
+              },
+            ] as any
+          }
+          series={[
+            {
+              id: 'page-views',
+              label: 'Page views',
+              data: [
+                2234, 3872, 2998, 4125, 3357, 2789, 4412, 2005, 4829, 3147, 4361,
+                2526,
+              ],
+              stack: 'A',
+            },
+            {
+              id: 'downloads',
+              label: 'Downloads',
+              data: [
+                3098, 4215, 2384, 2101, 4752, 3593, 2837, 4914, 2468, 3279, 4530,
+                3782,
+              ],
+              stack: 'A',
+            },
+            {
+              id: 'conversions',
+              label: 'Conversions',
+              data: [
+                4051, 2275, 3129, 4693, 3904, 2038, 4315, 2641, 3482, 4976, 2803,
+                3620,
+              ],
+              stack: 'A',
+            },
+          ]}
+          height={320}
+          margin={{ left: 50, right: 0, top: 60, bottom: 30 }}
+          grid={{ horizontal: true }}
+          slotProps={{
+            legend: {
+              position: { vertical: 'top', horizontal: 'right' },
+              itemMarkWidth: 10,
+              itemMarkHeight: 10,
+              itemGap: 24,
+              labelStyle: { fontSize: 14 },
+            },
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js
new file mode 100644
index 00000000000000..93ef070b493fb5
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js
@@ -0,0 +1,164 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+function AreaGradient({ color, id }) {
+  return (
+    <defs>
+      <linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stopColor={color} stopOpacity={0.5} />
+        <stop offset="100%" stopColor={color} stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  );
+}
+
+AreaGradient.propTypes = {
+  color: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+};
+
+function getDaysInMonth(month, year) {
+  const date = new Date(year, month, 0);
+  const monthName = date.toLocaleDateString('en-US', {
+    month: 'short',
+  });
+  const daysInMonth = date.getDate();
+  const days = [];
+  let i = 1;
+  while (days.length < daysInMonth) {
+    days.push(`${monthName} ${i}`);
+    i += 1;
+  }
+  return days;
+}
+
+export default function PageViewsChart() {
+  const theme = useTheme();
+  const mode = theme.palette.mode;
+  const data = getDaysInMonth(4, 2024);
+
+  const colorPaletteLight = [
+    theme.palette.grey[300],
+    theme.palette.grey[400],
+    theme.palette.grey[500],
+  ];
+
+  const colorPaletteDark = [
+    theme.palette.grey[400],
+    theme.palette.grey[500],
+    theme.palette.grey[700],
+  ];
+
+  const colorPalette = mode === 'dark' ? colorPaletteDark : colorPaletteLight;
+
+  return (
+    <Card variant="outlined" sx={{ height: 400, width: '100%' }}>
+      <CardContent>
+        <Typography variant="subtitle2" gutterBottom>
+          Sessions
+        </Typography>
+        <LineChart
+          colors={colorPalette}
+          xAxis={[
+            {
+              scaleType: 'point',
+              data,
+              tickInterval: (index, i) => (i + 1) % 5 === 0,
+            },
+          ]}
+          series={[
+            {
+              id: 'organic',
+              label: 'Organic',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              stackOrder: 'ascending',
+              data: [
+                6234, 6087, 6421, 6312, 6190, 6400, 6357, 6029, 6173, 6482, 6215,
+                6051, 6338, 6142, 6018, 6247, 6463, 6371, 6060, 6100, 6389, 6203,
+                6497, 6036, 6156, 6470, 6269, 6091, 6445, 6121,
+              ],
+              area: true,
+            },
+            {
+              id: 'referral',
+              label: 'Referral',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              area: true,
+              stackOrder: 'ascending',
+              data: [
+                4486, 4255, 4046, 4316, 4418, 4498, 4421, 4474, 4036, 4049, 4206,
+                4458, 4259, 4353, 4496, 4178, 4265, 4424, 4186, 4003, 4204, 4467,
+                4120, 4410, 4292, 4143, 4403, 4373, 4079, 4291,
+              ],
+            },
+            {
+              id: 'direct',
+              label: 'Direct',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              area: true,
+              stackOrder: 'ascending',
+              data: [
+                2238, 2172, 2305, 2140, 2135, 2100, 2465, 2053, 2342, 2494, 2497,
+                2277, 2356, 2012, 2309, 2301, 2029, 2028, 2129, 2324, 2152, 2235,
+                2430, 2027, 2168, 2111, 2235, 2166, 2309, 2268,
+              ],
+            },
+          ]}
+          height={320}
+          margin={{ left: 50, right: 0, top: 60, bottom: 30 }}
+          grid={{ horizontal: true }}
+          sx={{
+            '& .MuiAreaElement-series-organic': {
+              fill: "url('#organic')",
+            },
+            '& .MuiAreaElement-series-referral': {
+              fill: "url('#referral')",
+            },
+            '& .MuiAreaElement-series-direct': {
+              fill: "url('#direct')",
+            },
+          }}
+          slotProps={{
+            legend: {
+              labelStyle: { fontSize: 14 },
+              itemMarkWidth: 10,
+              itemMarkHeight: 10,
+              itemGap: 24,
+              position: { vertical: 'top', horizontal: 'right' },
+            },
+          }}
+        >
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[600]
+            }
+            id="organic"
+          />
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[600]
+            }
+            id="referral"
+          />
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+            }
+            id="direct"
+          />
+        </LineChart>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
new file mode 100644
index 00000000000000..75ccda32685aef
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+function AreaGradient({ color, id }: { color: string; id: string }) {
+  return (
+    <defs>
+      <linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stopColor={color} stopOpacity={0.5} />
+        <stop offset="100%" stopColor={color} stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  );
+}
+
+function getDaysInMonth(month: number, year: number) {
+  const date = new Date(year, month, 0);
+  const monthName = date.toLocaleDateString('en-US', {
+    month: 'short',
+  });
+  const daysInMonth = date.getDate();
+  const days = [];
+  let i = 1;
+  while (days.length < daysInMonth) {
+    days.push(`${monthName} ${i}`);
+    i += 1;
+  }
+  return days;
+}
+
+export default function PageViewsChart() {
+  const theme = useTheme();
+  const mode = theme.palette.mode;
+  const data = getDaysInMonth(4, 2024);
+
+  const colorPaletteLight = [
+    theme.palette.grey[300],
+    theme.palette.grey[400],
+    theme.palette.grey[500],
+  ];
+  const colorPaletteDark = [
+    theme.palette.grey[400],
+    theme.palette.grey[500],
+    theme.palette.grey[700],
+  ];
+  const colorPalette = mode === 'dark' ? colorPaletteDark : colorPaletteLight;
+
+  return (
+    <Card variant="outlined" sx={{ height: 400, width: '100%' }}>
+      <CardContent>
+        <Typography variant="subtitle2" gutterBottom>
+          Sessions
+        </Typography>
+        <LineChart
+          colors={colorPalette}
+          xAxis={[
+            {
+              scaleType: 'point',
+              data,
+              tickInterval: (index, i) => (i + 1) % 5 === 0,
+            },
+          ]}
+          series={[
+            {
+              id: 'organic',
+              label: 'Organic',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              stackOrder: 'ascending',
+              data: [
+                6234, 6087, 6421, 6312, 6190, 6400, 6357, 6029, 6173, 6482, 6215,
+                6051, 6338, 6142, 6018, 6247, 6463, 6371, 6060, 6100, 6389, 6203,
+                6497, 6036, 6156, 6470, 6269, 6091, 6445, 6121,
+              ],
+              area: true,
+            },
+            {
+              id: 'referral',
+              label: 'Referral',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              area: true,
+              stackOrder: 'ascending',
+              data: [
+                4486, 4255, 4046, 4316, 4418, 4498, 4421, 4474, 4036, 4049, 4206,
+                4458, 4259, 4353, 4496, 4178, 4265, 4424, 4186, 4003, 4204, 4467,
+                4120, 4410, 4292, 4143, 4403, 4373, 4079, 4291,
+              ],
+            },
+            {
+              id: 'direct',
+              label: 'Direct',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              area: true,
+              stackOrder: 'ascending',
+              data: [
+                2238, 2172, 2305, 2140, 2135, 2100, 2465, 2053, 2342, 2494, 2497,
+                2277, 2356, 2012, 2309, 2301, 2029, 2028, 2129, 2324, 2152, 2235,
+                2430, 2027, 2168, 2111, 2235, 2166, 2309, 2268,
+              ],
+            },
+          ]}
+          height={320}
+          margin={{ left: 50, right: 0, top: 60, bottom: 30 }}
+          grid={{ horizontal: true }}
+          sx={{
+            '& .MuiAreaElement-series-organic': {
+              fill: "url('#organic')",
+            },
+            '& .MuiAreaElement-series-referral': {
+              fill: "url('#referral')",
+            },
+            '& .MuiAreaElement-series-direct': {
+              fill: "url('#direct')",
+            },
+          }}
+          slotProps={{
+            legend: {
+              labelStyle: { fontSize: 14 },
+              itemMarkWidth: 10,
+              itemMarkHeight: 10,
+              itemGap: 24,
+              position: { vertical: 'top', horizontal: 'right' },
+            },
+          }}
+        >
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[600]
+            }
+            id="organic"
+          />
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[600]
+            }
+            id="referral"
+          />
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+            }
+            id="direct"
+          />
+        </LineChart>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Search.js b/docs/data/material/getting-started/templates/dashboard/components/Search.js
new file mode 100644
index 00000000000000..58408e82350bae
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/Search.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputAdornment from '@mui/material/InputAdornment';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+
+export default function Search() {
+  return (
+    <FormControl sx={{ width: { xs: '100%', md: '25ch' } }} variant="outlined">
+      <OutlinedInput
+        size="small"
+        id="search"
+        placeholder="Search…"
+        sx={{ flexGrow: 1 }}
+        startAdornment={
+          <InputAdornment position="start" sx={{ color: 'text.primary' }}>
+            <SearchRoundedIcon fontSize="small" />
+          </InputAdornment>
+        }
+        inputProps={{
+          'aria-label': 'search',
+        }}
+      />
+    </FormControl>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Search.tsx b/docs/data/material/getting-started/templates/dashboard/components/Search.tsx
new file mode 100644
index 00000000000000..58408e82350bae
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/Search.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputAdornment from '@mui/material/InputAdornment';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+
+export default function Search() {
+  return (
+    <FormControl sx={{ width: { xs: '100%', md: '25ch' } }} variant="outlined">
+      <OutlinedInput
+        size="small"
+        id="search"
+        placeholder="Search…"
+        sx={{ flexGrow: 1 }}
+        startAdornment={
+          <InputAdornment position="start" sx={{ color: 'text.primary' }}>
+            <SearchRoundedIcon fontSize="small" />
+          </InputAdornment>
+        }
+        inputProps={{
+          'aria-label': 'search',
+        }}
+      />
+    </FormControl>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideNav.js b/docs/data/material/getting-started/templates/dashboard/components/SideNav.js
new file mode 100644
index 00000000000000..da44888b9966e0
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideNav.js
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import ContactPageRoundedIcon from '@mui/icons-material/ContactPageRounded';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+
+import MenuButton from './MenuButton';
+import ToggleColorMode from './ToggleColorMode';
+
+const accountsList = [
+  { label: 'Profile', icon: <AccountCircleRoundedIcon sx={{ fontSize: 20 }} /> },
+  { label: 'My account', icon: <ContactPageRoundedIcon sx={{ fontSize: 20 }} /> },
+];
+
+const settingsList = [
+  { label: 'Add account', icon: <AddRoundedIcon sx={{ fontSize: 20 }} /> },
+  { label: 'Settings', icon: <SettingsRoundedIcon sx={{ fontSize: 20 }} /> },
+];
+
+function SideNav({ open, toggleDrawer, mode, toggleColorMode }) {
+  return (
+    <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+      <Stack
+        gap={2}
+        sx={{
+          minWidth: '80dvw',
+          p: 3,
+          backgroundColor: 'background.paper',
+          flexGrow: 1,
+        }}
+      >
+        <Stack direction="row" gap={1}>
+          <Stack direction="row" gap={1} alignItems="center" flexGrow={1}>
+            <Avatar
+              sizes="small"
+              alt="Riley Carter"
+              src="/static/images/avatar/7.jpg"
+              sx={{
+                width: 24,
+                height: 24,
+              }}
+            />
+            <Typography component="p" variant="h6">
+              Riley Carter
+            </Typography>
+          </Stack>
+          <MenuButton showBadge>
+            <NotificationsRoundedIcon />
+          </MenuButton>
+          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+        </Stack>
+        <Stack gap={2}>
+          <Divider />
+          <List>
+            {accountsList.map((item, index) => (
+              <ListItem key={index}>
+                <ListItemButton>
+                  <ListItemIcon>{item.icon}</ListItemIcon>
+                  <ListItemText primary={item.label} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+
+            {settingsList.map((item, index) => (
+              <ListItem key={index}>
+                <ListItemButton>
+                  <ListItemIcon>{item.icon}</ListItemIcon>
+                  <ListItemText primary={item.label} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Stack>
+        <Stack>
+          <Button variant="outlined" fullWidth startIcon={<LogoutRoundedIcon />}>
+            Logout
+          </Button>
+        </Stack>
+      </Stack>
+    </Drawer>
+  );
+}
+
+SideNav.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  open: PropTypes.bool,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleDrawer: PropTypes.func.isRequired,
+};
+
+export default SideNav;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideNav.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideNav.tsx
new file mode 100644
index 00000000000000..6a9edc72f87048
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideNav.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { PaletteMode } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import ContactPageRoundedIcon from '@mui/icons-material/ContactPageRounded';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+
+import MenuButton from './MenuButton';
+import ToggleColorMode from './ToggleColorMode';
+
+interface SideNavProps {
+  open: boolean | undefined;
+  toggleDrawer: (newOpen: boolean) => () => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+const accountsList = [
+  { label: 'Profile', icon: <AccountCircleRoundedIcon sx={{ fontSize: 20 }} /> },
+  { label: 'My account', icon: <ContactPageRoundedIcon sx={{ fontSize: 20 }} /> },
+];
+
+const settingsList = [
+  { label: 'Add account', icon: <AddRoundedIcon sx={{ fontSize: 20 }} /> },
+  { label: 'Settings', icon: <SettingsRoundedIcon sx={{ fontSize: 20 }} /> },
+];
+
+export default function SideNav({
+  open,
+  toggleDrawer,
+  mode,
+  toggleColorMode,
+}: SideNavProps) {
+  return (
+    <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+      <Stack
+        gap={2}
+        sx={{
+          minWidth: '80dvw',
+          p: 3,
+          backgroundColor: 'background.paper',
+          flexGrow: 1,
+        }}
+      >
+        <Stack direction="row" gap={1}>
+          <Stack direction="row" gap={1} alignItems="center" flexGrow={1}>
+            <Avatar
+              sizes="small"
+              alt="Riley Carter"
+              src="/static/images/avatar/7.jpg"
+              sx={{
+                width: 24,
+                height: 24,
+              }}
+            />
+            <Typography component="p" variant="h6">
+              Riley Carter
+            </Typography>
+          </Stack>
+          <MenuButton showBadge>
+            <NotificationsRoundedIcon />
+          </MenuButton>
+          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+        </Stack>
+        <Stack gap={2}>
+          <Divider />
+          <List>
+            {accountsList.map((item, index) => (
+              <ListItem key={index}>
+                <ListItemButton>
+                  <ListItemIcon>{item.icon}</ListItemIcon>
+                  <ListItemText primary={item.label} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+
+            {settingsList.map((item, index) => (
+              <ListItem key={index}>
+                <ListItemButton>
+                  <ListItemIcon>{item.icon}</ListItemIcon>
+                  <ListItemText primary={item.label} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Stack>
+        <Stack>
+          <Button variant="outlined" fullWidth startIcon={<LogoutRoundedIcon />}>
+            Logout
+          </Button>
+        </Stack>
+      </Stack>
+    </Drawer>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/StatCard.js b/docs/data/material/getting-started/templates/dashboard/components/StatCard.js
new file mode 100644
index 00000000000000..8b1830d4b9a53b
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/StatCard.js
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+import { areaElementClasses } from '@mui/x-charts/LineChart';
+
+function AreaGradient({ color, id }) {
+  return (
+    <defs>
+      <linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+        <stop offset="100%" stopColor={color} stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  );
+}
+
+AreaGradient.propTypes = {
+  color: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+};
+
+function StatCard({ title, value, interval, trend, data }) {
+  const theme = useTheme();
+
+  const trendColors = {
+    up:
+      theme.palette.mode === 'light'
+        ? theme.palette.success.main
+        : theme.palette.success.dark,
+    down:
+      theme.palette.mode === 'light'
+        ? theme.palette.error.main
+        : theme.palette.error.dark,
+    neutral:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[400]
+        : theme.palette.grey[700],
+  };
+
+  const labelColors = {
+    up: 'success',
+    down: 'error',
+    neutral: 'default',
+  };
+
+  const color = labelColors[trend];
+  const chartColor = trendColors[trend];
+  const trendValues = { up: '+25%', down: '-25%', neutral: '+5%' };
+
+  return (
+    <Card variant="outlined" sx={{ height: '100%', flexGrow: 1 }}>
+      <CardContent>
+        <Typography component="h2" variant="subtitle2" gutterBottom>
+          {title}
+        </Typography>
+        <Stack
+          direction="column"
+          justifyContent="space-between"
+          flexGrow="1"
+          gap={1}
+        >
+          <Stack justifyContent="space-between">
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Typography variant="h4" component="p">
+                {value}
+              </Typography>
+              <Chip size="small" color={color} label={trendValues[trend]} />
+            </Stack>
+            <Typography variant="caption" color="text.secondary">
+              {interval}
+            </Typography>
+          </Stack>
+          <Box sx={{ width: '100%', height: 50 }}>
+            <SparkLineChart
+              colors={[chartColor]}
+              data={data}
+              area
+              sx={{
+                [`& .${areaElementClasses.root}`]: {
+                  fill: `url(#area-gradient-${value})`,
+                },
+              }}
+            >
+              <AreaGradient color={chartColor} id={`area-gradient-${value}`} />
+            </SparkLineChart>
+          </Box>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}
+
+StatCard.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.number).isRequired,
+  interval: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  trend: PropTypes.oneOf(['down', 'neutral', 'up']).isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default StatCard;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/StatCard.tsx b/docs/data/material/getting-started/templates/dashboard/components/StatCard.tsx
new file mode 100644
index 00000000000000..67776b8e0d09c0
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/StatCard.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+import { areaElementClasses } from '@mui/x-charts/LineChart';
+
+export type StatCardProps = {
+  title: string;
+  value: string;
+  interval: string;
+  trend: 'up' | 'down' | 'neutral';
+  data: number[];
+};
+
+function AreaGradient({ color, id }: { color: string; id: string }) {
+  return (
+    <defs>
+      <linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
+        <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+        <stop offset="100%" stopColor={color} stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  );
+}
+
+export default function StatCard({
+  title,
+  value,
+  interval,
+  trend,
+  data,
+}: StatCardProps) {
+  const theme = useTheme();
+
+  const trendColors = {
+    up:
+      theme.palette.mode === 'light'
+        ? theme.palette.success.main
+        : theme.palette.success.dark,
+    down:
+      theme.palette.mode === 'light'
+        ? theme.palette.error.main
+        : theme.palette.error.dark,
+    neutral:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[400]
+        : theme.palette.grey[700],
+  };
+
+  const labelColors = {
+    up: 'success' as const,
+    down: 'error' as const,
+    neutral: 'default' as const,
+  };
+
+  const color = labelColors[trend];
+  const chartColor = trendColors[trend];
+  const trendValues = { up: '+25%', down: '-25%', neutral: '+5%' };
+
+  return (
+    <Card variant="outlined" sx={{ height: '100%', flexGrow: 1 }}>
+      <CardContent>
+        <Typography component="h2" variant="subtitle2" gutterBottom>
+          {title}
+        </Typography>
+        <Stack
+          direction="column"
+          justifyContent="space-between"
+          flexGrow="1"
+          gap={1}
+        >
+          <Stack justifyContent="space-between">
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Typography variant="h4" component="p">
+                {value}
+              </Typography>
+              <Chip size="small" color={color} label={trendValues[trend]} />
+            </Stack>
+            <Typography variant="caption" color="text.secondary">
+              {interval}
+            </Typography>
+          </Stack>
+          <Box sx={{ width: '100%', height: 50 }}>
+            <SparkLineChart
+              colors={[chartColor]}
+              data={data}
+              area
+              sx={{
+                [`& .${areaElementClasses.root}`]: {
+                  fill: `url(#area-gradient-${value})`,
+                },
+              }}
+            >
+              <AreaGradient color={chartColor} id={`area-gradient-${value}`} />
+            </SparkLineChart>
+          </Box>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
new file mode 100644
index 00000000000000..317b5b764c06c4
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
+import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
+import MenuButton from './MenuButton';
+
+function ToggleColorMode({ mode, toggleColorMode }) {
+  return (
+    <MenuButton
+      onClick={toggleColorMode}
+      size="small"
+      aria-label="button to toggle theme"
+    >
+      {mode === 'dark' ? (
+        <WbSunnyRoundedIcon fontSize="small" />
+      ) : (
+        <ModeNightRoundedIcon fontSize="small" />
+      )}
+    </MenuButton>
+  );
+}
+
+ToggleColorMode.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+};
+
+export default ToggleColorMode;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
new file mode 100644
index 00000000000000..9642c2d2f21fcb
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PaletteMode } from '@mui/material';
+import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
+import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
+import MenuButton from './MenuButton';
+
+interface ToggleColorModeProps {
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function ToggleColorMode({
+  mode,
+  toggleColorMode,
+}: ToggleColorModeProps) {
+  return (
+    <MenuButton
+      onClick={toggleColorMode}
+      size="small"
+      aria-label="button to toggle theme"
+    >
+      {mode === 'dark' ? (
+        <WbSunnyRoundedIcon fontSize="small" />
+      ) : (
+        <ModeNightRoundedIcon fontSize="small" />
+      )}
+    </MenuButton>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js
new file mode 100644
index 00000000000000..faf6155e1fc22d
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js
@@ -0,0 +1,1115 @@
+import * as React from 'react';
+
+import { alpha } from '@mui/material/styles';
+
+import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
+import { brand, getDesignTokens, gray, green, red } from './themePrimitives';
+
+export default function getDashboardTheme(mode) {
+  return {
+    ...getDesignTokens(mode),
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          disableTouchRipple: true,
+          disableRipple: true,
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            boxSizing: 'border-box',
+            transition: 'all 100ms ease-in',
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
+              outlineOffset: '2px',
+            },
+          }),
+        },
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            boxShadow: 'none',
+            borderRadius: theme.shape.borderRadius,
+            textTransform: 'none',
+            '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' },
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
+                  color: 'white',
+                  backgroundColor: gray[900],
+                  backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
+                  boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`,
+                  border: `1px solid ${gray[700]}`,
+                  '&:hover': {
+                    backgroundImage: 'none',
+                    backgroundColor: gray[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: gray[800],
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: 'black',
+                    backgroundColor: gray[50],
+                    backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
+                    boxShadow:
+                      'inset 0 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)',
+                    border: `1px solid ${gray[100]}`,
+                    '&:hover': {
+                      backgroundImage: 'none',
+                      backgroundColor: gray[300],
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: gray[400],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'contained',
+                },
+                style: {
+                  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[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    backgroundImage: 'none',
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  color: theme.palette.text.primary,
+                  border: `1px solid ${theme.palette.divider}`,
+                  backgroundColor: gray[50],
+                  '&:hover': {
+                    backgroundColor: gray[100],
+                    borderColor: gray[300],
+                  },
+                  '&:active': {
+                    backgroundColor: gray[200],
+                  },
+                  ...theme.applyStyles('dark', {
+                    backgroundColor: gray[800],
+                    '&:hover': {
+                      backgroundColor: gray[900],
+                      borderColor: gray[600],
+                    },
+                    '&:active': {
+                      backgroundColor: gray[900],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  color: brand[700],
+                  border: '1px solid',
+                  borderColor: brand[200],
+                  backgroundColor: brand[50],
+                  '&:hover': {
+                    backgroundColor: brand[100],
+                    borderColor: brand[400],
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[200], 0.7),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: brand[50],
+                    border: '1px solid',
+                    borderColor: brand[900],
+                    backgroundColor: alpha(brand[900], 0.3),
+                    '&:hover': {
+                      borderColor: brand[700],
+                      backgroundColor: alpha(brand[900], 0.6),
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[900], 0.5),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[600],
+                  '&:hover': {
+                    backgroundColor: gray[100],
+                  },
+                  '&:active': {
+                    backgroundColor: gray[200],
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[50],
+                    '&:hover': {
+                      backgroundColor: gray[700],
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[700], 0.7),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[100], 0.5),
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[200], 0.7),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: brand[100],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[900], 0.5),
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[900], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
+          }),
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: ({ theme }) => {
+            return {
+              padding: 16,
+              transition: 'all 100ms ease',
+              backgroundColor: gray[50],
+              borderRadius: theme.shape.borderRadius,
+              border: `1px solid ${alpha(gray[200], 0.5)}`,
+              boxShadow: 'none',
+              ...theme.applyStyles('dark', {
+                backgroundColor: gray[800],
+                border: `1px solid ${alpha(gray[700], 0.3)}`,
+              }),
+              variants: [
+                {
+                  props: {
+                    variant: 'outlined',
+                  },
+                  style: {
+                    border: `1px solid ${gray[200]}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                  },
+                },
+                {
+                  props: {
+                    variant: 'outlined',
+                  },
+                  style: {
+                    ...theme.applyStyles('dark', {
+                      border: `1px solid ${alpha(gray[700], 0.4)}`,
+                      boxShadow: 'none',
+                      background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                        gray[800],
+                        0.5,
+                      )})`,
+                    }),
+                  },
+                },
+              ],
+            };
+          },
+        },
+      },
+      MuiCheckbox: {
+        defaultProps: {
+          disableRipple: true,
+          icon: (
+            <CheckBoxOutlineBlankRoundedIcon
+              sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }}
+            />
+          ),
+          checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
+          indeterminateIcon: <RemoveRoundedIcon 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': {
+              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.applyStyles('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-focusVisible': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              },
+            }),
+          }),
+        },
+      },
+      MuiCardContent: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+            '&:last-child': { paddingBottom: 0 },
+          },
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            border: '1px solid',
+            borderRadius: '999px',
+            '& .MuiChip-label': {
+              padding: '0 4px',
+              fontWeight: 600,
+            },
+            variants: [
+              {
+                props: {
+                  color: 'default',
+                },
+                style: {
+                  borderColor: gray[200],
+                  backgroundColor: gray[100],
+                  '& .MuiChip-label': {
+                    color: gray[500],
+                  },
+                  '& .MuiChip-icon': {
+                    color: gray[500],
+                  },
+                  ...theme.applyStyles('dark', {
+                    borderColor: gray[700],
+                    backgroundColor: gray[800],
+                    '& .MuiChip-label': {
+                      color: gray[300],
+                    },
+                    '& .MuiChip-icon': {
+                      color: gray[300],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'success',
+                },
+                style: {
+                  borderColor: green[200],
+                  backgroundColor: green[50],
+                  '& .MuiChip-label': {
+                    color: green[500],
+                  },
+                  '& .MuiChip-icon': {
+                    color: green[500],
+                  },
+                  ...theme.applyStyles('dark', {
+                    borderColor: green[800],
+                    backgroundColor: green[900],
+                    '& .MuiChip-label': {
+                      color: green[300],
+                    },
+                    '& .MuiChip-icon': {
+                      color: green[300],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[100],
+                  backgroundColor: red[50],
+                  '& .MuiChip-label': {
+                    color: red[500],
+                  },
+                  '& .MuiChip-icon': {
+                    color: red[500],
+                  },
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[800],
+                    backgroundColor: red[900],
+                    '& .MuiChip-label': {
+                      color: red[200],
+                    },
+                    '& .MuiChip-icon': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
+          }),
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            boxShadow: 'none',
+            borderRadius: theme.shape.borderRadius,
+            textTransform: 'none',
+            fontWeight: theme.typography.fontWeightMedium,
+            letterSpacing: 0,
+            color: theme.palette.text.primary,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundColor: gray[50],
+            '&:hover': {
+              backgroundColor: gray[100],
+              borderColor: gray[300],
+            },
+            '&:active': {
+              backgroundColor: gray[200],
+            },
+            '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' },
+            ...theme.applyStyles('dark', {
+              backgroundColor: gray[800],
+              '&:hover': {
+                backgroundColor: gray[900],
+                borderColor: gray[600],
+              },
+              '&:active': {
+                backgroundColor: gray[900],
+              },
+            }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  width: '2rem',
+                  height: '2rem',
+                  padding: '0.25rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  width: '2.5rem',
+                  height: '2.5rem',
+                },
+              },
+            ],
+          }),
+        },
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            border: 'none',
+          },
+        },
+      },
+      MuiLinearProgress: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            height: 8,
+            borderRadius: 8,
+            backgroundColor: gray[200],
+            ...theme.applyStyles('dark', {
+              backgroundColor: gray[800],
+            }),
+          }),
+        },
+      },
+      MuiLink: {
+        defaultProps: {
+          underline: 'none',
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: brand[600],
+            fontWeight: 500,
+            position: 'relative',
+            textDecoration: 'none',
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              width: 0,
+              height: '1px',
+              bottom: 0,
+              left: 0,
+              backgroundColor: brand[200],
+              opacity: 0.7,
+              transition: 'width 0.3s ease, opacity 0.3s ease',
+            },
+            '&:hover::before': {
+              width: '100%',
+              opacity: 1,
+            },
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '4px',
+              borderRadius: '2px',
+            },
+            ...theme.applyStyles('dark', {
+              color: brand[200],
+            }),
+          }),
+        },
+      },
+      MuiList: {
+        styleOverrides: {
+          root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          },
+        },
+      },
+      MuiListItem: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: 0,
+            '&.Mui-selected': { borderRadius: theme.shape.borderRadius },
+          }),
+        },
+      },
+      MuiListItemIcon: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            minWidth: 0,
+            marginRight: '8px',
+            color: theme.palette.grey[500],
+            ...theme.applyStyles('dark', { color: theme.palette.grey[100] }),
+          }),
+        },
+      },
+      MuiListItemText: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: theme.palette.grey[700],
+            ...theme.applyStyles('dark', { color: theme.palette.grey[50] }),
+          }),
+          primary: { fontWeight: 600 },
+        },
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: '4px 0',
+            borderRadius: theme.shape.borderRadius,
+            background: 'transparent',
+          }),
+        },
+      },
+      MuiMenu: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            marginTop: '4px',
+            padding: '0 8px',
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundImage: 'none',
+            boxShadow:
+              'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+            '& .MuiMenuItem-root': {
+              borderRadius: 6,
+              padding: '6px 8px',
+            },
+            '& .MuiMenu-list': {
+              '& .MuiDivider-root': { margin: '0 -8px' },
+            },
+            ...theme.applyStyles('dark', {
+              boxShadow:
+                'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+            }),
+          }),
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: theme.palette.text.primary,
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            transition: 'border 120ms ease-in',
+            '&:hover': {
+              borderColor: gray[400],
+            },
+            '&.Mui-focused': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              borderColor: brand[400],
+            },
+            ...theme.applyStyles('dark', {
+              '&:hover': {
+                borderColor: gray[500],
+              },
+            }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  padding: '0 0.5rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                },
+              },
+            ],
+          }),
+          notchedOutline: {
+            border: 'none',
+          },
+        },
+      },
+      MuiPaper: {
+        defaultProps: {
+          elevation: 0,
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: '10px',
+            boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
+            '& .Mui-selected': {
+              color: brand[500],
+            },
+            ...theme.applyStyles('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.applyStyles('dark', {
+              color: gray[400],
+              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+              '&.Mui-selected': { color: brand[300] },
+            }),
+          }),
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: { minHeight: 'fit-content' },
+          indicator: ({ theme }) => ({
+            backgroundColor: theme.palette.grey[800],
+            ...theme.applyStyles('dark', {
+              backgroundColor: theme.palette.grey[200],
+            }),
+          }),
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: '6px 8px',
+            marginBottom: '8px',
+            textTransform: 'none',
+            minWidth: 'fit-content',
+            minHeight: 'fit-content',
+            color: theme.palette.text.secondary,
+            borderRadius: theme.shape.borderRadius,
+            border: '1px solid',
+            borderColor: 'transparent',
+            ':hover': {
+              color: theme.palette.text.primary,
+              backgroundColor: gray[100],
+              borderColor: gray[200],
+            },
+            '&.Mui-selected': {
+              color: gray[900],
+            },
+            ...theme.applyStyles('dark', {
+              ':hover': {
+                color: theme.palette.text.primary,
+                backgroundColor: gray[800],
+                borderColor: gray[700],
+              },
+              '&.Mui-selected': {
+                color: '#fff',
+              },
+            }),
+          }),
+        },
+      },
+      MuiInputAdornment: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: theme.palette.grey[500],
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[400],
+            }),
+          }),
+        },
+      },
+      MuiPickersPopper: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            marginTop: 4,
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundImage: 'none',
+            boxShadow:
+              'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+            '& .MuiMenuItem-root': { borderRadius: 6, margin: '0 6px' },
+            ...theme.applyStyles('dark', {
+              boxShadow:
+                'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+            }),
+          }),
+        },
+      },
+      MuiPickersArrowSwitcher: {
+        styleOverrides: {
+          button: ({ theme }) => ({
+            color: theme.palette.grey[500],
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[400],
+            }),
+          }),
+        },
+      },
+      MuiPickersCalendarHeader: {
+        styleOverrides: {
+          switchViewButton: {
+            padding: 0,
+            border: 'none',
+          },
+        },
+      },
+      MuiPickersMonth: {
+        styleOverrides: {
+          monthButton: ({ theme }) => ({
+            fontSize: theme.typography.body1.fontSize,
+            color: theme.palette.grey[600],
+            padding: theme.spacing(0.5),
+            borderRadius: theme.shape.borderRadius,
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+            '&.Mui-selected': {
+              backgroundColor: gray[700],
+            },
+            '&:focus': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              backgroundColor: 'transparent',
+              '&.Mui-selected': { backgroundColor: gray[700] },
+            },
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[500],
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+              '&.Mui-selected': {
+                color: theme.palette.common.black,
+                backgroundColor: gray[300],
+              },
+              '&:focus': {
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+                backgroundColor: 'transparent',
+                '&.Mui-selected': { backgroundColor: gray[300] },
+              },
+            }),
+          }),
+        },
+      },
+      MuiPickersYear: {
+        styleOverrides: {
+          yearButton: ({ theme }) => ({
+            fontSize: theme.typography.body1.fontSize,
+            color: theme.palette.grey[600],
+            padding: theme.spacing(0.5),
+            borderRadius: theme.shape.borderRadius,
+            height: 'fit-content',
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+            '&.Mui-selected': {
+              backgroundColor: gray[700],
+            },
+            '&:focus': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              backgroundColor: 'transparent',
+              '&.Mui-selected': { backgroundColor: gray[700] },
+            },
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[500],
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+              '&.Mui-selected': {
+                color: theme.palette.common.black,
+                backgroundColor: gray[300],
+              },
+              '&:focus': {
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+                backgroundColor: 'transparent',
+                '&.Mui-selected': { backgroundColor: gray[300] },
+              },
+            }),
+          }),
+        },
+      },
+      MuiPickersDay: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            fontSize: theme.typography.body1.fontSize,
+            color: theme.palette.grey[600],
+            padding: theme.spacing(0.5),
+            borderRadius: theme.shape.borderRadius,
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+            '&.Mui-selected': {
+              backgroundColor: gray[700],
+            },
+            '&:focus': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              backgroundColor: 'transparent',
+              '&.Mui-selected': { backgroundColor: gray[700] },
+            },
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[500],
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+              '&.Mui-selected': {
+                color: theme.palette.common.black,
+                backgroundColor: gray[300],
+              },
+              '&:focus': {
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+                backgroundColor: 'transparent',
+                '&.Mui-selected': { backgroundColor: gray[300] },
+              },
+            }),
+          }),
+        },
+      },
+      MuiChartsAxis: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            '& .MuiChartsAxis-line': {
+              stroke: gray[300],
+            },
+            '& .MuiChartsAxis-tick': {
+              stroke: gray[300],
+            },
+            '& .MuiChartsAxis-tickLabel': {
+              fill: gray[400],
+              fontWeight: 500,
+            },
+            ...theme.applyStyles('dark', {
+              '& .MuiChartsAxis-line': {
+                stroke: gray[700],
+              },
+              '& .MuiChartsAxis-tick': {
+                stroke: gray[700],
+              },
+              '& .MuiChartsAxis-tickLabel': {
+                fill: gray[400],
+                fontWeight: 500,
+              },
+            }),
+          }),
+        },
+      },
+      MuiChartsLegend: {
+        styleOverrides: {
+          root: {
+            '& .MuiChartsLegend-mark': {
+              ry: 6,
+            },
+          },
+        },
+      },
+      MuiChartsGrid: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            '& .MuiChartsGrid-line': {
+              stroke: gray[200],
+              strokeDasharray: '4 2',
+              strokeWidth: 0.8,
+            },
+            ...theme.applyStyles('dark', {
+              '& .MuiChartsGrid-line': {
+                stroke: gray[700],
+                strokeDasharray: '4 2',
+                strokeWidth: 0.8,
+              },
+            }),
+          }),
+        },
+      },
+      MuiTreeItem2: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            position: 'relative',
+            boxSizing: 'border-box',
+            padding: theme.spacing(0, 1),
+            '& .groupTransition': {
+              marginLeft: theme.spacing(2),
+              padding: theme.spacing(0),
+              borderLeft: '1px solid',
+              borderColor: theme.palette.divider,
+            },
+          }),
+          content: ({ theme }) => ({
+            marginTop: theme.spacing(1),
+            padding: theme.spacing(0.5, 1),
+            overflow: 'clip',
+            '&:hover': {
+              backgroundColor: alpha(gray[300], 0.2),
+            },
+            '&.focused': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              '&:hover': {
+                backgroundColor: alpha(gray[300], 0.2),
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              },
+            },
+            '&.selected': {
+              backgroundColor: alpha(gray[300], 0.4),
+              '&:hover': {
+                backgroundColor: alpha(gray[300], 0.6),
+              },
+            },
+            ...theme.applyStyles('dark', {
+              '&:hover': {
+                backgroundColor: alpha(gray[500], 0.2),
+              },
+              '&:focus-visible': {
+                '&:hover': {
+                  backgroundColor: alpha(gray[500], 0.2),
+                },
+              },
+              '&.selected': {
+                backgroundColor: alpha(gray[500], 0.4),
+                '&:hover': {
+                  backgroundColor: alpha(gray[500], 0.6),
+                },
+              },
+            }),
+          }),
+        },
+      },
+      MuiTablePagination: {
+        styleOverrides: {
+          actions: {
+            display: 'flex',
+            gap: 8,
+            marginRight: 6,
+            '& .MuiIconButton-root': { minWidth: 0, width: 36, height: 36 },
+          },
+        },
+      },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderColor: theme.palette.divider,
+          }),
+          cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }),
+          menu: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundImage: 'none',
+            boxShadow:
+              'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+            '& .MuiMenuItem-root': {
+              borderRadius: theme.shape.borderRadius,
+              margin: '0 6px',
+            },
+            ...theme.applyStyles('dark', {
+              boxShadow:
+                'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+            }),
+          }),
+          row: ({ theme }) => ({
+            // borderBottom: `1px solid ${theme.palette.divider}`,
+            '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` },
+            '&:hover': {
+              background: alpha(theme.palette.primary.main, 0.1),
+            },
+            '&.Mui-selected': {
+              background: theme.palette.grey[100],
+              '&:hover': {
+                background: alpha(theme.palette.primary.main, 0.2),
+              },
+            },
+            '&.even': {
+              background: alpha(theme.palette.grey[200], 0.3),
+              '&:hover': {
+                background: alpha(theme.palette.primary.main, 0.1),
+              },
+              '&.Mui-selected': {
+                background: theme.palette.grey[100],
+                '&:hover': {
+                  background: alpha(theme.palette.primary.main, 0.2),
+                },
+              },
+            },
+            ...theme.applyStyles('dark', {
+              backgroundColor: theme.palette.grey[900],
+              '&.Mui-selected': {
+                background: theme.palette.grey[800],
+              },
+              '&.even': {
+                background: alpha(theme.palette.grey[800], 0.4),
+                '&:hover': {
+                  background: alpha(theme.palette.primary.main, 0.1),
+                },
+                '&.Mui-selected': {
+                  background: theme.palette.grey[800],
+                  '&:hover': {
+                    background: alpha(theme.palette.primary.main, 0.2),
+                  },
+                },
+              },
+            }),
+          }),
+          iconButtonContainer: ({ theme }) => ({
+            '& .MuiIconButton-root': {
+              border: 'none',
+              backgroundColor: 'transparent',
+              '&:hover': {
+                backgroundColor: gray[100],
+              },
+              '&:active': {
+                backgroundColor: gray[200],
+              },
+              ...theme.applyStyles('dark', {
+                color: gray[50],
+                '&:hover': {
+                  backgroundColor: gray[800],
+                },
+                '&:active': {
+                  backgroundColor: gray[900],
+                },
+              }),
+            },
+          }),
+          menuIconButton: ({ theme }) => ({
+            border: 'none',
+            backgroundColor: 'transparent',
+            '&:hover': {
+              backgroundColor: gray[100],
+            },
+            '&:active': {
+              backgroundColor: gray[200],
+            },
+            ...theme.applyStyles('dark', {
+              color: gray[50],
+              '&:hover': {
+                backgroundColor: gray[800],
+              },
+              '&:active': {
+                backgroundColor: gray[900],
+              },
+            }),
+          }),
+          columnHeaderTitleContainer: {
+            flexGrow: 1,
+            justifyContent: 'space-between',
+          },
+          columnHeaderDraggableContainer: { paddingRight: 2 },
+        },
+      },
+    },
+  };
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx
new file mode 100644
index 00000000000000..b8922dd62fcb9b
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx
@@ -0,0 +1,1121 @@
+import * as React from 'react';
+import type {} from '@mui/material/themeCssVarsAugmentation';
+import { ThemeOptions, alpha, Theme } from '@mui/material/styles';
+import { PaletteMode } from '@mui/material';
+import type {} from '@mui/x-date-pickers/themeAugmentation';
+import type {} from '@mui/x-charts/themeAugmentation';
+import type {} from '@mui/x-data-grid/themeAugmentation';
+import type {} from '@mui/x-tree-view/themeAugmentation';
+import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
+import { brand, getDesignTokens, gray, green, red } from './themePrimitives';
+
+export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
+  return {
+    ...getDesignTokens(mode),
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          disableTouchRipple: true,
+          disableRipple: true,
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            boxSizing: 'border-box',
+            transition: 'all 100ms ease-in',
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
+              outlineOffset: '2px',
+            },
+          }),
+        },
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            boxShadow: 'none',
+            borderRadius: theme.shape.borderRadius,
+            textTransform: 'none',
+            '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' },
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem', // 32px
+                  padding: '0 0.5rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem', // 40px
+                },
+              },
+              {
+                props: {
+                  color: 'primary',
+                  variant: 'contained',
+                },
+                style: {
+                  color: 'white',
+                  backgroundColor: gray[900],
+                  backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
+                  boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`,
+                  border: `1px solid ${gray[700]}`,
+                  '&:hover': {
+                    backgroundImage: 'none',
+                    backgroundColor: gray[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: gray[800],
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: 'black',
+                    backgroundColor: gray[50],
+                    backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
+                    boxShadow:
+                      'inset 0 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)',
+                    border: `1px solid ${gray[100]}`,
+                    '&:hover': {
+                      backgroundImage: 'none',
+                      backgroundColor: gray[300],
+                      boxShadow: 'none',
+                    },
+                    '&:active': {
+                      backgroundColor: gray[400],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'contained',
+                },
+                style: {
+                  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[700],
+                    boxShadow: 'none',
+                  },
+                  '&:active': {
+                    backgroundColor: brand[700],
+                    backgroundImage: 'none',
+                  },
+                },
+              },
+              {
+                props: {
+                  variant: 'outlined',
+                },
+                style: {
+                  color: theme.palette.text.primary,
+                  border: `1px solid ${theme.palette.divider}`,
+                  backgroundColor: gray[50],
+                  '&:hover': {
+                    backgroundColor: gray[100],
+                    borderColor: gray[300],
+                  },
+                  '&:active': {
+                    backgroundColor: gray[200],
+                  },
+                  ...theme.applyStyles('dark', {
+                    backgroundColor: gray[800],
+                    '&:hover': {
+                      backgroundColor: gray[900],
+                      borderColor: gray[600],
+                    },
+                    '&:active': {
+                      backgroundColor: gray[900],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'outlined',
+                },
+                style: {
+                  color: brand[700],
+                  border: '1px solid',
+                  borderColor: brand[200],
+                  backgroundColor: brand[50],
+                  '&:hover': {
+                    backgroundColor: brand[100],
+                    borderColor: brand[400],
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[200], 0.7),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: brand[50],
+                    border: '1px solid',
+                    borderColor: brand[900],
+                    backgroundColor: alpha(brand[900], 0.3),
+                    '&:hover': {
+                      borderColor: brand[700],
+                      backgroundColor: alpha(brand[900], 0.6),
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[900], 0.5),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  variant: 'text',
+                },
+                style: {
+                  color: gray[600],
+                  '&:hover': {
+                    backgroundColor: gray[100],
+                  },
+                  '&:active': {
+                    backgroundColor: gray[200],
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: gray[50],
+                    '&:hover': {
+                      backgroundColor: gray[700],
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(gray[700], 0.7),
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'secondary',
+                  variant: 'text',
+                },
+                style: {
+                  color: brand[700],
+                  '&:hover': {
+                    backgroundColor: alpha(brand[100], 0.5),
+                  },
+                  '&:active': {
+                    backgroundColor: alpha(brand[200], 0.7),
+                  },
+                  ...theme.applyStyles('dark', {
+                    color: brand[100],
+                    '&:hover': {
+                      backgroundColor: alpha(brand[900], 0.5),
+                    },
+                    '&:active': {
+                      backgroundColor: alpha(brand[900], 0.3),
+                    },
+                  }),
+                },
+              },
+            ],
+          }),
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: ({ theme }) => {
+            return {
+              padding: 16,
+              transition: 'all 100ms ease',
+              backgroundColor: gray[50],
+              borderRadius: theme.shape.borderRadius,
+              border: `1px solid ${alpha(gray[200], 0.5)}`,
+              boxShadow: 'none',
+              ...theme.applyStyles('dark', {
+                backgroundColor: gray[800],
+                border: `1px solid ${alpha(gray[700], 0.3)}`,
+              }),
+              variants: [
+                {
+                  props: {
+                    variant: 'outlined',
+                  },
+                  style: {
+                    border: `1px solid ${gray[200]}`,
+                    boxShadow: 'none',
+                    background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
+                  },
+                },
+                {
+                  props: {
+                    variant: 'outlined',
+                  },
+                  style: {
+                    ...theme.applyStyles('dark', {
+                      border: `1px solid ${alpha(gray[700], 0.4)}`,
+                      boxShadow: 'none',
+                      background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
+                        gray[800],
+                        0.5,
+                      )})`,
+                    }),
+                  },
+                },
+              ],
+            };
+          },
+        },
+      },
+      MuiCheckbox: {
+        defaultProps: {
+          disableRipple: true,
+          icon: (
+            <CheckBoxOutlineBlankRoundedIcon
+              sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }}
+            />
+          ),
+          checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
+          indeterminateIcon: <RemoveRoundedIcon 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': {
+              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.applyStyles('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-focusVisible': {
+                borderColor: brand[400],
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              },
+            }),
+          }),
+        },
+      },
+      MuiCardContent: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+            '&:last-child': { paddingBottom: 0 },
+          },
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            border: '1px solid',
+            borderRadius: '999px',
+            '& .MuiChip-label': {
+              padding: '0 4px',
+              fontWeight: 600,
+            },
+            variants: [
+              {
+                props: {
+                  color: 'default',
+                },
+                style: {
+                  borderColor: gray[200],
+                  backgroundColor: gray[100],
+                  '& .MuiChip-label': {
+                    color: gray[500],
+                  },
+                  '& .MuiChip-icon': {
+                    color: gray[500],
+                  },
+                  ...theme.applyStyles('dark', {
+                    borderColor: gray[700],
+                    backgroundColor: gray[800],
+                    '& .MuiChip-label': {
+                      color: gray[300],
+                    },
+                    '& .MuiChip-icon': {
+                      color: gray[300],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'success',
+                },
+                style: {
+                  borderColor: green[200],
+                  backgroundColor: green[50],
+                  '& .MuiChip-label': {
+                    color: green[500],
+                  },
+                  '& .MuiChip-icon': {
+                    color: green[500],
+                  },
+                  ...theme.applyStyles('dark', {
+                    borderColor: green[800],
+                    backgroundColor: green[900],
+                    '& .MuiChip-label': {
+                      color: green[300],
+                    },
+                    '& .MuiChip-icon': {
+                      color: green[300],
+                    },
+                  }),
+                },
+              },
+              {
+                props: {
+                  color: 'error',
+                },
+                style: {
+                  borderColor: red[100],
+                  backgroundColor: red[50],
+                  '& .MuiChip-label': {
+                    color: red[500],
+                  },
+                  '& .MuiChip-icon': {
+                    color: red[500],
+                  },
+                  ...theme.applyStyles('dark', {
+                    borderColor: red[800],
+                    backgroundColor: red[900],
+                    '& .MuiChip-label': {
+                      color: red[200],
+                    },
+                    '& .MuiChip-icon': {
+                      color: red[300],
+                    },
+                  }),
+                },
+              },
+            ],
+          }),
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            boxShadow: 'none',
+            borderRadius: theme.shape.borderRadius,
+            textTransform: 'none',
+            fontWeight: theme.typography.fontWeightMedium,
+            letterSpacing: 0,
+            color: theme.palette.text.primary,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundColor: gray[50],
+            '&:hover': {
+              backgroundColor: gray[100],
+              borderColor: gray[300],
+            },
+            '&:active': {
+              backgroundColor: gray[200],
+            },
+            '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' },
+            ...theme.applyStyles('dark', {
+              backgroundColor: gray[800],
+              '&:hover': {
+                backgroundColor: gray[900],
+                borderColor: gray[600],
+              },
+              '&:active': {
+                backgroundColor: gray[900],
+              },
+            }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  width: '2rem',
+                  height: '2rem',
+                  padding: '0.25rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  width: '2.5rem',
+                  height: '2.5rem',
+                },
+              },
+            ],
+          }),
+        },
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            border: 'none',
+          },
+        },
+      },
+      MuiLinearProgress: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            height: 8,
+            borderRadius: 8,
+            backgroundColor: gray[200],
+            ...theme.applyStyles('dark', {
+              backgroundColor: gray[800],
+            }),
+          }),
+        },
+      },
+      MuiLink: {
+        defaultProps: {
+          underline: 'none',
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: brand[600],
+            fontWeight: 500,
+            position: 'relative',
+            textDecoration: 'none',
+            '&::before': {
+              content: '""',
+              position: 'absolute',
+              width: 0,
+              height: '1px',
+              bottom: 0,
+              left: 0,
+              backgroundColor: brand[200],
+              opacity: 0.7,
+              transition: 'width 0.3s ease, opacity 0.3s ease',
+            },
+            '&:hover::before': {
+              width: '100%',
+              opacity: 1,
+            },
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '4px',
+              borderRadius: '2px',
+            },
+            ...theme.applyStyles('dark', {
+              color: brand[200],
+            }),
+          }),
+        },
+      },
+      MuiList: {
+        styleOverrides: {
+          root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          },
+        },
+      },
+      MuiListItem: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: 0,
+            '&.Mui-selected': { borderRadius: theme.shape.borderRadius },
+          }),
+        },
+      },
+      MuiListItemIcon: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            minWidth: 0,
+            marginRight: '8px',
+            color: theme.palette.grey[500],
+            ...theme.applyStyles('dark', { color: theme.palette.grey[100] }),
+          }),
+        },
+      },
+      MuiListItemText: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: theme.palette.grey[700],
+            ...theme.applyStyles('dark', { color: theme.palette.grey[50] }),
+          }),
+          primary: { fontWeight: 600 },
+        },
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: '4px 0',
+            borderRadius: theme.shape.borderRadius,
+            background: 'transparent',
+          }),
+        },
+      },
+      MuiMenu: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            marginTop: '4px',
+            padding: '0 8px',
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundImage: 'none',
+            boxShadow:
+              'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+            '& .MuiMenuItem-root': {
+              borderRadius: 6,
+              padding: '6px 8px',
+            },
+            '& .MuiMenu-list': {
+              '& .MuiDivider-root': { margin: '0 -8px' },
+            },
+            ...theme.applyStyles('dark', {
+              boxShadow:
+                'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+            }),
+          }),
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: theme.palette.text.primary,
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            transition: 'border 120ms ease-in',
+            '&:hover': {
+              borderColor: gray[400],
+            },
+            '&.Mui-focused': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              borderColor: brand[400],
+            },
+            ...theme.applyStyles('dark', {
+              '&:hover': {
+                borderColor: gray[500],
+              },
+            }),
+            variants: [
+              {
+                props: {
+                  size: 'small',
+                },
+                style: {
+                  height: '2rem',
+                  padding: '0 0.5rem',
+                },
+              },
+              {
+                props: {
+                  size: 'medium',
+                },
+                style: {
+                  height: '2.5rem',
+                },
+              },
+            ],
+          }),
+          notchedOutline: {
+            border: 'none',
+          },
+        },
+      },
+      MuiPaper: {
+        defaultProps: {
+          elevation: 0,
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderRadius: '10px',
+            boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
+            '& .Mui-selected': {
+              color: brand[500],
+            },
+            ...theme.applyStyles('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.applyStyles('dark', {
+              color: gray[400],
+              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+              '&.Mui-selected': { color: brand[300] },
+            }),
+          }),
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: { minHeight: 'fit-content' },
+          indicator: ({ theme }) => ({
+            backgroundColor: theme.palette.grey[800],
+            ...theme.applyStyles('dark', {
+              backgroundColor: theme.palette.grey[200],
+            }),
+          }),
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            padding: '6px 8px',
+            marginBottom: '8px',
+            textTransform: 'none',
+            minWidth: 'fit-content',
+            minHeight: 'fit-content',
+            color: theme.palette.text.secondary,
+            borderRadius: theme.shape.borderRadius,
+            border: '1px solid',
+            borderColor: 'transparent',
+            ':hover': {
+              color: theme.palette.text.primary,
+              backgroundColor: gray[100],
+              borderColor: gray[200],
+            },
+            '&.Mui-selected': {
+              color: gray[900],
+            },
+            ...theme.applyStyles('dark', {
+              ':hover': {
+                color: theme.palette.text.primary,
+                backgroundColor: gray[800],
+                borderColor: gray[700],
+              },
+              '&.Mui-selected': {
+                color: '#fff',
+              },
+            }),
+          }),
+        },
+      },
+      MuiInputAdornment: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            color: theme.palette.grey[500],
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[400],
+            }),
+          }),
+        },
+      },
+      MuiPickersPopper: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            marginTop: 4,
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundImage: 'none',
+            boxShadow:
+              'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+            '& .MuiMenuItem-root': { borderRadius: 6, margin: '0 6px' },
+            ...theme.applyStyles('dark', {
+              boxShadow:
+                'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+            }),
+          }),
+        },
+      },
+      MuiPickersArrowSwitcher: {
+        styleOverrides: {
+          button: ({ theme }) => ({
+            color: theme.palette.grey[500],
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[400],
+            }),
+          }),
+        },
+      },
+      MuiPickersCalendarHeader: {
+        styleOverrides: {
+          switchViewButton: {
+            padding: 0,
+            border: 'none',
+          },
+        },
+      },
+      MuiPickersMonth: {
+        styleOverrides: {
+          monthButton: ({ theme }) => ({
+            fontSize: theme.typography.body1.fontSize,
+            color: theme.palette.grey[600],
+            padding: theme.spacing(0.5),
+            borderRadius: theme.shape.borderRadius,
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+            '&.Mui-selected': {
+              backgroundColor: gray[700],
+            },
+            '&:focus': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              backgroundColor: 'transparent',
+              '&.Mui-selected': { backgroundColor: gray[700] },
+            },
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[500],
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+              '&.Mui-selected': {
+                color: theme.palette.common.black,
+                backgroundColor: gray[300],
+              },
+              '&:focus': {
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+                backgroundColor: 'transparent',
+                '&.Mui-selected': { backgroundColor: gray[300] },
+              },
+            }),
+          }),
+        },
+      },
+      MuiPickersYear: {
+        styleOverrides: {
+          yearButton: ({ theme }) => ({
+            fontSize: theme.typography.body1.fontSize,
+            color: theme.palette.grey[600],
+            padding: theme.spacing(0.5),
+            borderRadius: theme.shape.borderRadius,
+            height: 'fit-content',
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+            '&.Mui-selected': {
+              backgroundColor: gray[700],
+            },
+            '&:focus': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              backgroundColor: 'transparent',
+              '&.Mui-selected': { backgroundColor: gray[700] },
+            },
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[500],
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+              '&.Mui-selected': {
+                color: theme.palette.common.black,
+                backgroundColor: gray[300],
+              },
+              '&:focus': {
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+                backgroundColor: 'transparent',
+                '&.Mui-selected': { backgroundColor: gray[300] },
+              },
+            }),
+          }),
+        },
+      },
+      MuiPickersDay: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            fontSize: theme.typography.body1.fontSize,
+            color: theme.palette.grey[600],
+            padding: theme.spacing(0.5),
+            borderRadius: theme.shape.borderRadius,
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+            '&.Mui-selected': {
+              backgroundColor: gray[700],
+            },
+            '&:focus': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              backgroundColor: 'transparent',
+              '&.Mui-selected': { backgroundColor: gray[700] },
+            },
+            ...theme.applyStyles('dark', {
+              color: theme.palette.grey[500],
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+              '&.Mui-selected': {
+                color: theme.palette.common.black,
+                backgroundColor: gray[300],
+              },
+              '&:focus': {
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+                backgroundColor: 'transparent',
+                '&.Mui-selected': { backgroundColor: gray[300] },
+              },
+            }),
+          }),
+        },
+      },
+      MuiChartsAxis: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            '& .MuiChartsAxis-line': {
+              stroke: gray[300],
+            },
+            '& .MuiChartsAxis-tick': {
+              stroke: gray[300],
+            },
+            '& .MuiChartsAxis-tickLabel': {
+              fill: gray[400],
+              fontWeight: 500,
+            },
+            ...(theme as Omit<Theme, 'components'>).applyStyles('dark', {
+              '& .MuiChartsAxis-line': {
+                stroke: gray[700],
+              },
+              '& .MuiChartsAxis-tick': {
+                stroke: gray[700],
+              },
+              '& .MuiChartsAxis-tickLabel': {
+                fill: gray[400],
+                fontWeight: 500,
+              },
+            }),
+          }),
+        },
+      },
+      MuiChartsLegend: {
+        styleOverrides: {
+          root: {
+            '& .MuiChartsLegend-mark': {
+              ry: 6,
+            },
+          },
+        },
+      },
+      MuiChartsGrid: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            '& .MuiChartsGrid-line': {
+              stroke: gray[200],
+              strokeDasharray: '4 2',
+              strokeWidth: 0.8,
+            },
+            ...(theme as Omit<Theme, 'components'>).applyStyles('dark', {
+              '& .MuiChartsGrid-line': {
+                stroke: gray[700],
+                strokeDasharray: '4 2',
+                strokeWidth: 0.8,
+              },
+            }),
+          }),
+        },
+      },
+      MuiTreeItem2: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            position: 'relative',
+            boxSizing: 'border-box',
+            padding: theme.spacing(0, 1),
+            '& .groupTransition': {
+              marginLeft: theme.spacing(2),
+              padding: theme.spacing(0),
+              borderLeft: '1px solid',
+              borderColor: theme.palette.divider,
+            },
+          }),
+          content: ({ theme }) => ({
+            marginTop: theme.spacing(1),
+            padding: theme.spacing(0.5, 1),
+            overflow: 'clip',
+            '&:hover': {
+              backgroundColor: alpha(gray[300], 0.2),
+            },
+            '&.focused': {
+              outline: `3px solid ${alpha(brand[500], 0.5)}`,
+              outlineOffset: '2px',
+              '&:hover': {
+                backgroundColor: alpha(gray[300], 0.2),
+                outline: `3px solid ${alpha(brand[500], 0.5)}`,
+                outlineOffset: '2px',
+              },
+            },
+            '&.selected': {
+              backgroundColor: alpha(gray[300], 0.4),
+              '&:hover': {
+                backgroundColor: alpha(gray[300], 0.6),
+              },
+            },
+            ...theme.applyStyles('dark', {
+              '&:hover': {
+                backgroundColor: alpha(gray[500], 0.2),
+              },
+              '&:focus-visible': {
+                '&:hover': {
+                  backgroundColor: alpha(gray[500], 0.2),
+                },
+              },
+              '&.selected': {
+                backgroundColor: alpha(gray[500], 0.4),
+                '&:hover': {
+                  backgroundColor: alpha(gray[500], 0.6),
+                },
+              },
+            }),
+          }),
+        },
+      },
+      MuiTablePagination: {
+        styleOverrides: {
+          actions: {
+            display: 'flex',
+            gap: 8,
+            marginRight: 6,
+            '& .MuiIconButton-root': { minWidth: 0, width: 36, height: 36 },
+          },
+        },
+      },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderColor: theme.palette.divider,
+          }),
+
+          cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }),
+          menu: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius,
+            border: `1px solid ${theme.palette.divider}`,
+            backgroundImage: 'none',
+            boxShadow:
+              'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+            '& .MuiMenuItem-root': {
+              borderRadius: theme.shape.borderRadius,
+              margin: '0 6px',
+            },
+            ...theme.applyStyles('dark', {
+              boxShadow:
+                'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+            }),
+          }),
+          row: ({ theme }) => ({
+            // borderBottom: `1px solid ${theme.palette.divider}`,
+            '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` },
+            '&:hover': {
+              background: alpha(theme.palette.primary.main, 0.1),
+            },
+            '&.Mui-selected': {
+              background: theme.palette.grey[100],
+              '&:hover': {
+                background: alpha(theme.palette.primary.main, 0.2),
+              },
+            },
+            '&.even': {
+              background: alpha(theme.palette.grey[200], 0.3),
+              '&:hover': {
+                background: alpha(theme.palette.primary.main, 0.1),
+              },
+              '&.Mui-selected': {
+                background: theme.palette.grey[100],
+                '&:hover': {
+                  background: alpha(theme.palette.primary.main, 0.2),
+                },
+              },
+            },
+            ...theme.applyStyles('dark', {
+              backgroundColor: theme.palette.grey[900],
+              '&.Mui-selected': {
+                background: theme.palette.grey[800],
+              },
+              '&.even': {
+                background: alpha(theme.palette.grey[800], 0.4),
+                '&:hover': {
+                  background: alpha(theme.palette.primary.main, 0.1),
+                },
+                '&.Mui-selected': {
+                  background: theme.palette.grey[800],
+                  '&:hover': {
+                    background: alpha(theme.palette.primary.main, 0.2),
+                  },
+                },
+              },
+            }),
+          }),
+          iconButtonContainer: ({ theme }) => ({
+            '& .MuiIconButton-root': {
+              border: 'none',
+              backgroundColor: 'transparent',
+              '&:hover': {
+                backgroundColor: gray[100],
+              },
+              '&:active': {
+                backgroundColor: gray[200],
+              },
+              ...theme.applyStyles('dark', {
+                color: gray[50],
+                '&:hover': {
+                  backgroundColor: gray[800],
+                },
+                '&:active': {
+                  backgroundColor: gray[900],
+                },
+              }),
+            },
+          }),
+          menuIconButton: ({ theme }) => ({
+            border: 'none',
+            backgroundColor: 'transparent',
+            '&:hover': {
+              backgroundColor: gray[100],
+            },
+            '&:active': {
+              backgroundColor: gray[200],
+            },
+            ...theme.applyStyles('dark', {
+              color: gray[50],
+              '&:hover': {
+                backgroundColor: gray[800],
+              },
+              '&:active': {
+                backgroundColor: gray[900],
+              },
+            }),
+          }),
+
+          columnHeaderTitleContainer: {
+            flexGrow: 1,
+            justifyContent: 'space-between',
+          },
+          columnHeaderDraggableContainer: { paddingRight: 2 },
+        },
+      },
+    },
+  };
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.js b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.js
new file mode 100644
index 00000000000000..c4310abda3e321
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+export default function Copyright(props) {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Sitemark
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.tsx
new file mode 100644
index 00000000000000..52f72c48f2c05d
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+export default function Copyright(props: any) {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Sitemark
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.js b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.js
new file mode 100644
index 00000000000000..8cc34623cfa8b6
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.js
@@ -0,0 +1,326 @@
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+export function SitemarkIcon() {
+  return (
+    <SvgIcon sx={{ height: 21, width: 100 }}>
+      <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>
+  );
+}
+
+export function IndiaFlag() {
+  return (
+    <SvgIcon>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+        <g clipPath="url(#a)">
+          <mask
+            id="b"
+            maskUnits="userSpaceOnUse"
+            x="-4"
+            y="0"
+            width="32"
+            height="24"
+          >
+            <path d="M-4 0h32v24H-4V0Z" fill="#fff" />
+          </mask>
+          <g mask="url(#b)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M-4 0v24h32V0H-4Z"
+              fill="#F7FCFF"
+            />
+            <mask
+              id="c"
+              maskUnits="userSpaceOnUse"
+              x="-4"
+              y="0"
+              width="32"
+              height="24"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M-4 0v24h32V0H-4Z"
+                fill="#fff"
+              />
+            </mask>
+            <g mask="url(#c)" fillRule="evenodd" clipRule="evenodd">
+              <path d="M-4 0v8h32V0H-4Z" fill="#FF8C1A" />
+              <path d="M-4 16v8h32v-8H-4Z" fill="#5EAA22" />
+              <path
+                d="M8 12a4 4 0 1 0 8 0 4 4 0 0 0-8 0Zm7 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                fill="#3D58DB"
+              />
+              <path
+                d="m12 12.9-.6 3 .4-3-1.5 2.8 1.2-3L9.4 15l2-2.4-2.8 1.6 2.6-1.8-3 .7 3-1H8l3.2-.2-3-1 3 .8-2.6-1.9 2.8 1.7-2-2.5 2.1 2.3-1.2-3 1.5 2.9-.4-3.2.6 3.2.6-3.2-.4 3.2 1.5-2.8-1.2 2.9L14.6 9l-2 2.5 2.8-1.7-2.6 1.9 3-.8-3 1 3.2.1-3.2.1 3 1-3-.7 2.6 1.8-2.8-1.6 2 2.4-2.1-2.3 1.2 3-1.5-2.9.4 3.2-.6-3.1Z"
+                fill="#3D58DB"
+              />
+            </g>
+          </g>
+        </g>
+        <defs>
+          <clipPath id="a">
+            <rect width="24" height="24" rx="12" fill="#fff" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
+
+export function UsaFlag() {
+  return (
+    <SvgIcon>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_983_1725)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 0H28V24H-4V0Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 14.6667V16.6667H28V14.6667H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 18.3333V20.3333H28V18.3333H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 7.33325V9.33325H28V7.33325H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 22V24H28V22H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 11V13H28V11H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 0V2H28V0H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 3.66675V5.66675H28V3.66675H-4Z"
+            fill="#E31D1C"
+          />
+          <path d="M-4 0H16V13H-4V0Z" fill="#2E42A5" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-2.27876 2.93871L-3.00465 3.44759L-2.75958 2.54198L-3.4043 1.96807H-2.56221L-2.27978 1.229L-1.94861 1.96807H-1.23075L-1.79479 2.54198L-1.57643 3.44759L-2.27876 2.93871ZM1.72124 2.93871L0.995357 3.44759L1.24042 2.54198L0.595707 1.96807H1.43779L1.72022 1.229L2.05139 1.96807H2.76925L2.20521 2.54198L2.42357 3.44759L1.72124 2.93871ZM4.99536 3.44759L5.72124 2.93871L6.42357 3.44759L6.20517 2.54198L6.76927 1.96807H6.05137L5.72022 1.229L5.43779 1.96807H4.59571L5.24042 2.54198L4.99536 3.44759ZM9.72127 2.93871L8.99537 3.44759L9.24047 2.54198L8.59567 1.96807H9.43777L9.72027 1.229L10.0514 1.96807H10.7693L10.2052 2.54198L10.4236 3.44759L9.72127 2.93871ZM-3.00465 7.44759L-2.27876 6.93871L-1.57643 7.44759L-1.79479 6.54198L-1.23075 5.96807H-1.94861L-2.27978 5.229L-2.56221 5.96807H-3.4043L-2.75958 6.54198L-3.00465 7.44759ZM1.72124 6.93871L0.995357 7.44759L1.24042 6.54198L0.595707 5.96807H1.43779L1.72022 5.229L2.05139 5.96807H2.76925L2.20521 6.54198L2.42357 7.44759L1.72124 6.93871ZM4.99536 7.44759L5.72124 6.93871L6.42357 7.44759L6.20517 6.54198L6.76927 5.96807H6.05137L5.72022 5.229L5.43779 5.96807H4.59571L5.24042 6.54198L4.99536 7.44759ZM9.72127 6.93871L8.99537 7.44759L9.24047 6.54198L8.59567 5.96807H9.43777L9.72027 5.229L10.0514 5.96807H10.7693L10.2052 6.54198L10.4236 7.44759L9.72127 6.93871ZM-3.00465 11.4476L-2.27876 10.9387L-1.57643 11.4476L-1.79479 10.542L-1.23075 9.96807H-1.94861L-2.27978 9.229L-2.56221 9.96807H-3.4043L-2.75958 10.542L-3.00465 11.4476ZM1.72124 10.9387L0.995357 11.4476L1.24042 10.542L0.595707 9.96807H1.43779L1.72022 9.229L2.05139 9.96807H2.76925L2.20521 10.542L2.42357 11.4476L1.72124 10.9387ZM4.99536 11.4476L5.72124 10.9387L6.42357 11.4476L6.20517 10.542L6.76927 9.96807H6.05137L5.72022 9.229L5.43779 9.96807H4.59571L5.24042 10.542L4.99536 11.4476ZM9.72127 10.9387L8.99537 11.4476L9.24047 10.542L8.59567 9.96807H9.43777L9.72027 9.229L10.0514 9.96807H10.7693L10.2052 10.542L10.4236 11.4476L9.72127 10.9387ZM12.9954 3.44759L13.7213 2.93871L14.4236 3.44759L14.2052 2.54198L14.7693 1.96807H14.0514L13.7203 1.229L13.4378 1.96807H12.5957L13.2405 2.54198L12.9954 3.44759ZM13.7213 6.93871L12.9954 7.44759L13.2405 6.54198L12.5957 5.96807H13.4378L13.7203 5.229L14.0514 5.96807H14.7693L14.2052 6.54198L14.4236 7.44759L13.7213 6.93871ZM12.9954 11.4476L13.7213 10.9387L14.4236 11.4476L14.2052 10.542L14.7693 9.96807H14.0514L13.7203 9.229L13.4378 9.96807H12.5957L13.2405 10.542L12.9954 11.4476ZM-0.278763 4.93871L-1.00464 5.44759L-0.759583 4.54198L-1.40429 3.96807H-0.562213L-0.279783 3.229L0.0513873 3.96807H0.769247L0.205207 4.54198L0.423567 5.44759L-0.278763 4.93871ZM2.99536 5.44759L3.72124 4.93871L4.42357 5.44759L4.20521 4.54198L4.76925 3.96807H4.05139L3.72022 3.229L3.43779 3.96807H2.59571L3.24042 4.54198L2.99536 5.44759ZM7.72127 4.93871L6.99537 5.44759L7.24047 4.54198L6.59567 3.96807H7.43777L7.72027 3.229L8.05137 3.96807H8.76927L8.20517 4.54198L8.42357 5.44759L7.72127 4.93871ZM-1.00464 9.44759L-0.278763 8.93871L0.423567 9.44759L0.205207 8.54198L0.769247 7.96807H0.0513873L-0.279783 7.229L-0.562213 7.96807H-1.40429L-0.759583 8.54198L-1.00464 9.44759ZM3.72124 8.93871L2.99536 9.44759L3.24042 8.54198L2.59571 7.96807H3.43779L3.72022 7.229L4.05139 7.96807H4.76925L4.20521 8.54198L4.42357 9.44759L3.72124 8.93871ZM6.99537 9.44759L7.72127 8.93871L8.42357 9.44759L8.20517 8.54198L8.76927 7.96807H8.05137L7.72027 7.229L7.43777 7.96807H6.59567L7.24047 8.54198L6.99537 9.44759ZM11.7213 4.93871L10.9954 5.44759L11.2405 4.54198L10.5957 3.96807H11.4378L11.7203 3.229L12.0514 3.96807H12.7693L12.2052 4.54198L12.4236 5.44759L11.7213 4.93871ZM10.9954 9.44759L11.7213 8.93871L12.4236 9.44759L12.2052 8.54198L12.7693 7.96807H12.0514L11.7203 7.229L11.4378 7.96807H10.5957L11.2405 8.54198L10.9954 9.44759Z"
+            fill="#F7FCFF"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_983_1725">
+            <rect width="24" height="24" rx="12" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
+export function BrazilFlag() {
+  return (
+    <SvgIcon>
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_983_1741)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 0.5V24.5H28V0.5H-4Z"
+            fill="#009933"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.9265 4.20404L24.1283 12.7075L11.7605 20.6713L-0.191406 12.5427L11.9265 4.20404Z"
+            fill="#FFD221"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.9265 4.20404L24.1283 12.7075L11.7605 20.6713L-0.191406 12.5427L11.9265 4.20404Z"
+            fill="url(#paint0_linear_983_1741)"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 17.7C14.7614 17.7 17 15.4614 17 12.7C17 9.93853 14.7614 7.69995 12 7.69995C9.2386 7.69995 7 9.93853 7 12.7C7 15.4614 9.2386 17.7 12 17.7Z"
+            fill="#2E42A5"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.379 15.07L10.1556 15.1874L10.1983 14.9387L10.0176 14.7626L10.2673 14.7263L10.379 14.5L10.4907 14.7263L10.7404 14.7626L10.5597 14.9387L10.6024 15.1874L10.379 15.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.379 15.07L12.1556 15.1874L12.1983 14.9387L12.0176 14.7626L12.2673 14.7263L12.379 14.5L12.4907 14.7263L12.7404 14.7626L12.5597 14.9387L12.6024 15.1874L12.379 15.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.379 16.27L12.1556 16.3874L12.1983 16.1387L12.0176 15.9625L12.2673 15.9262L12.379 15.7L12.4907 15.9262L12.7404 15.9625L12.5597 16.1387L12.6024 16.3874L12.379 16.27Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.379 12.07L11.1556 12.1874L11.1983 11.9387L11.0176 11.7626L11.2673 11.7263L11.379 11.5L11.4907 11.7263L11.7404 11.7626L11.5597 11.9387L11.6024 12.1874L11.379 12.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.379 14.07L11.1556 14.1874L11.1983 13.9387L11.0176 13.7626L11.2673 13.7263L11.379 13.5L11.4907 13.7263L11.7404 13.7626L11.5597 13.9387L11.6024 14.1874L11.379 14.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.97859 13.07L9.75519 13.1874L9.79789 12.9387L9.61719 12.7626L9.86689 12.7263L9.97859 12.5L10.0903 12.7263L10.34 12.7626L10.1593 12.9387L10.2019 13.1874L9.97859 13.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.5783 13.87L8.3549 13.9875L8.3976 13.7388L8.2168 13.5626L8.4666 13.5263L8.5783 13.3L8.6899 13.5263L8.9397 13.5626L8.759 13.7388L8.8016 13.9875L8.5783 13.87Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.1798 10.47L12.9565 10.5875L12.9991 10.3387L12.8184 10.1626L13.0682 10.1263L13.1798 9.90002L13.2915 10.1263L13.5413 10.1626L13.3605 10.3387L13.4032 10.5875L13.1798 10.47Z"
+            fill="#F7FCFF"
+          />
+          <path
+            d="M7 12L7.5 10C11.6854 10.2946 14.6201 11.2147 17 13.5L16.5 15C14.4373 13.0193 10.7839 12.2664 7 12Z"
+            fill="#F7FCFF"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_983_1741"
+            x1="27.9997"
+            y1="24.5"
+            x2="27.9997"
+            y2="0.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FFC600" />
+            <stop offset="1" stopColor="#FFDE42" />
+          </linearGradient>
+          <clipPath id="clip0_983_1741">
+            <rect y="0.5" width="24" height="24" rx="12" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
+
+export function GlobeFlag() {
+  return (
+    <SvgIcon>
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_986_1789)">
+          <circle cx="12" cy="12.5" r="12" fill="#007FFF" />
+          <path
+            d="M12 0.5C5.376 0.5 0 5.876 0 12.5C0 19.124 5.376 24.5 12 24.5C18.624 24.5 24 19.124 24 12.5C24 5.876 18.624 0.5 12 0.5ZM10.8 22.016C6.06 21.428 2.4 17.396 2.4 12.5C2.4 11.756 2.496 11.048 2.652 10.352L8.4 16.1V17.3C8.4 18.62 9.48 19.7 10.8 19.7V22.016ZM19.08 18.968C18.768 17.996 17.88 17.3 16.8 17.3H15.6V13.7C15.6 13.04 15.06 12.5 14.4 12.5H7.2V10.1H9.6C10.26 10.1 10.8 9.56 10.8 8.9V6.5H13.2C14.52 6.5 15.6 5.42 15.6 4.1V3.608C19.116 5.036 21.6 8.48 21.6 12.5C21.6 14.996 20.64 17.264 19.08 18.968Z"
+            fill="#3EE07F"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_986_1789">
+            <rect width="24" height="24" fill="white" transform="translate(0 0.5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.tsx
new file mode 100644
index 00000000000000..8cc34623cfa8b6
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.tsx
@@ -0,0 +1,326 @@
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+export function SitemarkIcon() {
+  return (
+    <SvgIcon sx={{ height: 21, width: 100 }}>
+      <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>
+  );
+}
+
+export function IndiaFlag() {
+  return (
+    <SvgIcon>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+        <g clipPath="url(#a)">
+          <mask
+            id="b"
+            maskUnits="userSpaceOnUse"
+            x="-4"
+            y="0"
+            width="32"
+            height="24"
+          >
+            <path d="M-4 0h32v24H-4V0Z" fill="#fff" />
+          </mask>
+          <g mask="url(#b)">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M-4 0v24h32V0H-4Z"
+              fill="#F7FCFF"
+            />
+            <mask
+              id="c"
+              maskUnits="userSpaceOnUse"
+              x="-4"
+              y="0"
+              width="32"
+              height="24"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M-4 0v24h32V0H-4Z"
+                fill="#fff"
+              />
+            </mask>
+            <g mask="url(#c)" fillRule="evenodd" clipRule="evenodd">
+              <path d="M-4 0v8h32V0H-4Z" fill="#FF8C1A" />
+              <path d="M-4 16v8h32v-8H-4Z" fill="#5EAA22" />
+              <path
+                d="M8 12a4 4 0 1 0 8 0 4 4 0 0 0-8 0Zm7 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                fill="#3D58DB"
+              />
+              <path
+                d="m12 12.9-.6 3 .4-3-1.5 2.8 1.2-3L9.4 15l2-2.4-2.8 1.6 2.6-1.8-3 .7 3-1H8l3.2-.2-3-1 3 .8-2.6-1.9 2.8 1.7-2-2.5 2.1 2.3-1.2-3 1.5 2.9-.4-3.2.6 3.2.6-3.2-.4 3.2 1.5-2.8-1.2 2.9L14.6 9l-2 2.5 2.8-1.7-2.6 1.9 3-.8-3 1 3.2.1-3.2.1 3 1-3-.7 2.6 1.8-2.8-1.6 2 2.4-2.1-2.3 1.2 3-1.5-2.9.4 3.2-.6-3.1Z"
+                fill="#3D58DB"
+              />
+            </g>
+          </g>
+        </g>
+        <defs>
+          <clipPath id="a">
+            <rect width="24" height="24" rx="12" fill="#fff" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
+
+export function UsaFlag() {
+  return (
+    <SvgIcon>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_983_1725)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 0H28V24H-4V0Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 14.6667V16.6667H28V14.6667H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 18.3333V20.3333H28V18.3333H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 7.33325V9.33325H28V7.33325H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 22V24H28V22H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 11V13H28V11H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 0V2H28V0H-4Z"
+            fill="#E31D1C"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 3.66675V5.66675H28V3.66675H-4Z"
+            fill="#E31D1C"
+          />
+          <path d="M-4 0H16V13H-4V0Z" fill="#2E42A5" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-2.27876 2.93871L-3.00465 3.44759L-2.75958 2.54198L-3.4043 1.96807H-2.56221L-2.27978 1.229L-1.94861 1.96807H-1.23075L-1.79479 2.54198L-1.57643 3.44759L-2.27876 2.93871ZM1.72124 2.93871L0.995357 3.44759L1.24042 2.54198L0.595707 1.96807H1.43779L1.72022 1.229L2.05139 1.96807H2.76925L2.20521 2.54198L2.42357 3.44759L1.72124 2.93871ZM4.99536 3.44759L5.72124 2.93871L6.42357 3.44759L6.20517 2.54198L6.76927 1.96807H6.05137L5.72022 1.229L5.43779 1.96807H4.59571L5.24042 2.54198L4.99536 3.44759ZM9.72127 2.93871L8.99537 3.44759L9.24047 2.54198L8.59567 1.96807H9.43777L9.72027 1.229L10.0514 1.96807H10.7693L10.2052 2.54198L10.4236 3.44759L9.72127 2.93871ZM-3.00465 7.44759L-2.27876 6.93871L-1.57643 7.44759L-1.79479 6.54198L-1.23075 5.96807H-1.94861L-2.27978 5.229L-2.56221 5.96807H-3.4043L-2.75958 6.54198L-3.00465 7.44759ZM1.72124 6.93871L0.995357 7.44759L1.24042 6.54198L0.595707 5.96807H1.43779L1.72022 5.229L2.05139 5.96807H2.76925L2.20521 6.54198L2.42357 7.44759L1.72124 6.93871ZM4.99536 7.44759L5.72124 6.93871L6.42357 7.44759L6.20517 6.54198L6.76927 5.96807H6.05137L5.72022 5.229L5.43779 5.96807H4.59571L5.24042 6.54198L4.99536 7.44759ZM9.72127 6.93871L8.99537 7.44759L9.24047 6.54198L8.59567 5.96807H9.43777L9.72027 5.229L10.0514 5.96807H10.7693L10.2052 6.54198L10.4236 7.44759L9.72127 6.93871ZM-3.00465 11.4476L-2.27876 10.9387L-1.57643 11.4476L-1.79479 10.542L-1.23075 9.96807H-1.94861L-2.27978 9.229L-2.56221 9.96807H-3.4043L-2.75958 10.542L-3.00465 11.4476ZM1.72124 10.9387L0.995357 11.4476L1.24042 10.542L0.595707 9.96807H1.43779L1.72022 9.229L2.05139 9.96807H2.76925L2.20521 10.542L2.42357 11.4476L1.72124 10.9387ZM4.99536 11.4476L5.72124 10.9387L6.42357 11.4476L6.20517 10.542L6.76927 9.96807H6.05137L5.72022 9.229L5.43779 9.96807H4.59571L5.24042 10.542L4.99536 11.4476ZM9.72127 10.9387L8.99537 11.4476L9.24047 10.542L8.59567 9.96807H9.43777L9.72027 9.229L10.0514 9.96807H10.7693L10.2052 10.542L10.4236 11.4476L9.72127 10.9387ZM12.9954 3.44759L13.7213 2.93871L14.4236 3.44759L14.2052 2.54198L14.7693 1.96807H14.0514L13.7203 1.229L13.4378 1.96807H12.5957L13.2405 2.54198L12.9954 3.44759ZM13.7213 6.93871L12.9954 7.44759L13.2405 6.54198L12.5957 5.96807H13.4378L13.7203 5.229L14.0514 5.96807H14.7693L14.2052 6.54198L14.4236 7.44759L13.7213 6.93871ZM12.9954 11.4476L13.7213 10.9387L14.4236 11.4476L14.2052 10.542L14.7693 9.96807H14.0514L13.7203 9.229L13.4378 9.96807H12.5957L13.2405 10.542L12.9954 11.4476ZM-0.278763 4.93871L-1.00464 5.44759L-0.759583 4.54198L-1.40429 3.96807H-0.562213L-0.279783 3.229L0.0513873 3.96807H0.769247L0.205207 4.54198L0.423567 5.44759L-0.278763 4.93871ZM2.99536 5.44759L3.72124 4.93871L4.42357 5.44759L4.20521 4.54198L4.76925 3.96807H4.05139L3.72022 3.229L3.43779 3.96807H2.59571L3.24042 4.54198L2.99536 5.44759ZM7.72127 4.93871L6.99537 5.44759L7.24047 4.54198L6.59567 3.96807H7.43777L7.72027 3.229L8.05137 3.96807H8.76927L8.20517 4.54198L8.42357 5.44759L7.72127 4.93871ZM-1.00464 9.44759L-0.278763 8.93871L0.423567 9.44759L0.205207 8.54198L0.769247 7.96807H0.0513873L-0.279783 7.229L-0.562213 7.96807H-1.40429L-0.759583 8.54198L-1.00464 9.44759ZM3.72124 8.93871L2.99536 9.44759L3.24042 8.54198L2.59571 7.96807H3.43779L3.72022 7.229L4.05139 7.96807H4.76925L4.20521 8.54198L4.42357 9.44759L3.72124 8.93871ZM6.99537 9.44759L7.72127 8.93871L8.42357 9.44759L8.20517 8.54198L8.76927 7.96807H8.05137L7.72027 7.229L7.43777 7.96807H6.59567L7.24047 8.54198L6.99537 9.44759ZM11.7213 4.93871L10.9954 5.44759L11.2405 4.54198L10.5957 3.96807H11.4378L11.7203 3.229L12.0514 3.96807H12.7693L12.2052 4.54198L12.4236 5.44759L11.7213 4.93871ZM10.9954 9.44759L11.7213 8.93871L12.4236 9.44759L12.2052 8.54198L12.7693 7.96807H12.0514L11.7203 7.229L11.4378 7.96807H10.5957L11.2405 8.54198L10.9954 9.44759Z"
+            fill="#F7FCFF"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_983_1725">
+            <rect width="24" height="24" rx="12" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
+export function BrazilFlag() {
+  return (
+    <SvgIcon>
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_983_1741)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M-4 0.5V24.5H28V0.5H-4Z"
+            fill="#009933"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.9265 4.20404L24.1283 12.7075L11.7605 20.6713L-0.191406 12.5427L11.9265 4.20404Z"
+            fill="#FFD221"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.9265 4.20404L24.1283 12.7075L11.7605 20.6713L-0.191406 12.5427L11.9265 4.20404Z"
+            fill="url(#paint0_linear_983_1741)"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 17.7C14.7614 17.7 17 15.4614 17 12.7C17 9.93853 14.7614 7.69995 12 7.69995C9.2386 7.69995 7 9.93853 7 12.7C7 15.4614 9.2386 17.7 12 17.7Z"
+            fill="#2E42A5"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.379 15.07L10.1556 15.1874L10.1983 14.9387L10.0176 14.7626L10.2673 14.7263L10.379 14.5L10.4907 14.7263L10.7404 14.7626L10.5597 14.9387L10.6024 15.1874L10.379 15.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.379 15.07L12.1556 15.1874L12.1983 14.9387L12.0176 14.7626L12.2673 14.7263L12.379 14.5L12.4907 14.7263L12.7404 14.7626L12.5597 14.9387L12.6024 15.1874L12.379 15.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.379 16.27L12.1556 16.3874L12.1983 16.1387L12.0176 15.9625L12.2673 15.9262L12.379 15.7L12.4907 15.9262L12.7404 15.9625L12.5597 16.1387L12.6024 16.3874L12.379 16.27Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.379 12.07L11.1556 12.1874L11.1983 11.9387L11.0176 11.7626L11.2673 11.7263L11.379 11.5L11.4907 11.7263L11.7404 11.7626L11.5597 11.9387L11.6024 12.1874L11.379 12.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.379 14.07L11.1556 14.1874L11.1983 13.9387L11.0176 13.7626L11.2673 13.7263L11.379 13.5L11.4907 13.7263L11.7404 13.7626L11.5597 13.9387L11.6024 14.1874L11.379 14.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.97859 13.07L9.75519 13.1874L9.79789 12.9387L9.61719 12.7626L9.86689 12.7263L9.97859 12.5L10.0903 12.7263L10.34 12.7626L10.1593 12.9387L10.2019 13.1874L9.97859 13.07Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.5783 13.87L8.3549 13.9875L8.3976 13.7388L8.2168 13.5626L8.4666 13.5263L8.5783 13.3L8.6899 13.5263L8.9397 13.5626L8.759 13.7388L8.8016 13.9875L8.5783 13.87Z"
+            fill="#F7FCFF"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.1798 10.47L12.9565 10.5875L12.9991 10.3387L12.8184 10.1626L13.0682 10.1263L13.1798 9.90002L13.2915 10.1263L13.5413 10.1626L13.3605 10.3387L13.4032 10.5875L13.1798 10.47Z"
+            fill="#F7FCFF"
+          />
+          <path
+            d="M7 12L7.5 10C11.6854 10.2946 14.6201 11.2147 17 13.5L16.5 15C14.4373 13.0193 10.7839 12.2664 7 12Z"
+            fill="#F7FCFF"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_983_1741"
+            x1="27.9997"
+            y1="24.5"
+            x2="27.9997"
+            y2="0.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FFC600" />
+            <stop offset="1" stopColor="#FFDE42" />
+          </linearGradient>
+          <clipPath id="clip0_983_1741">
+            <rect y="0.5" width="24" height="24" rx="12" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
+
+export function GlobeFlag() {
+  return (
+    <SvgIcon>
+      <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_986_1789)">
+          <circle cx="12" cy="12.5" r="12" fill="#007FFF" />
+          <path
+            d="M12 0.5C5.376 0.5 0 5.876 0 12.5C0 19.124 5.376 24.5 12 24.5C18.624 24.5 24 19.124 24 12.5C24 5.876 18.624 0.5 12 0.5ZM10.8 22.016C6.06 21.428 2.4 17.396 2.4 12.5C2.4 11.756 2.496 11.048 2.652 10.352L8.4 16.1V17.3C8.4 18.62 9.48 19.7 10.8 19.7V22.016ZM19.08 18.968C18.768 17.996 17.88 17.3 16.8 17.3H15.6V13.7C15.6 13.04 15.06 12.5 14.4 12.5H7.2V10.1H9.6C10.26 10.1 10.8 9.56 10.8 8.9V6.5H13.2C14.52 6.5 15.6 5.42 15.6 4.1V3.608C19.116 5.036 21.6 8.48 21.6 12.5C21.6 14.996 20.64 17.264 19.08 18.968Z"
+            fill="#3EE07F"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_986_1789">
+            <rect width="24" height="24" fill="white" transform="translate(0 0.5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
new file mode 100644
index 00000000000000..21a8f10f6e75b1
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100dvw',
+        position: 'fixed',
+        bottom: 24,
+      }}
+    >
+      <ToggleButtonGroup
+        color="primary"
+        exclusive
+        value={showCustomTheme}
+        onChange={toggleCustomTheme}
+        aria-label="Platform"
+        sx={{
+          backgroundColor: 'background.default',
+          '& .Mui-selected': {
+            pointerEvents: 'none',
+          },
+        }}
+      >
+        <ToggleButton value>
+          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
+          Custom theme
+        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
+      </ToggleButtonGroup>
+    </Box>
+  );
+}
+
+ToggleCustomTheme.propTypes = {
+  showCustomTheme: PropTypes.shape({
+    valueOf: PropTypes.func.isRequired,
+  }).isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default ToggleCustomTheme;
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
new file mode 100644
index 00000000000000..58df9e79a64226
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+interface ToggleCustomThemeProps {
+  showCustomTheme: Boolean;
+  toggleCustomTheme: () => void;
+}
+
+export default function ToggleCustomTheme({
+  showCustomTheme,
+  toggleCustomTheme,
+}: ToggleCustomThemeProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100dvw',
+        position: 'fixed',
+        bottom: 24,
+      }}
+    >
+      <ToggleButtonGroup
+        color="primary"
+        exclusive
+        value={showCustomTheme}
+        onChange={toggleCustomTheme}
+        aria-label="Platform"
+        sx={{
+          backgroundColor: 'background.default',
+          '& .Mui-selected': {
+            pointerEvents: 'none',
+          },
+        }}
+      >
+        <ToggleButton value>
+          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
+          Custom theme
+        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
+      </ToggleButtonGroup>
+    </Box>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js
new file mode 100644
index 00000000000000..a24b8589635fe2
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+
+export function renderStatus(params) {
+  const colors = {
+    new: 'info',
+    verified: 'success',
+    blocked: 'error',
+    uncertain: 'default',
+  };
+
+  return (
+    <Chip
+      label={params.value.status}
+      color={colors[params.value.status]}
+      variant="outlined"
+    />
+  );
+}
+export function renderAvatar(params) {
+  if (params.value == null) {
+    return '';
+  }
+
+  return (
+    <Avatar
+      sx={{
+        backgroundColor: params.value.color,
+        width: '24px',
+        height: '24px',
+        fontSize: '0.85rem',
+      }}
+    >
+      {params.value.name.toUpperCase().substring(0, 1)}
+    </Avatar>
+  );
+}
+
+export const columns = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  { field: 'pageTitle', headerName: 'Page Title', width: 200 },
+  { field: 'eventCount', headerName: 'Event Count', width: 130 },
+  { field: 'users', headerName: 'Users', width: 100 },
+  {
+    field: 'viewsPerUser',
+    headerName: 'Views per User',
+    width: 130,
+  },
+  { field: 'averageTime', headerName: 'Average Time', width: 130 },
+  { field: 'conversions', headerName: 'Conversions', width: 120 },
+];
+
+export const rows = [
+  {
+    id: 1,
+    pageTitle: 'Homepage Overview',
+    eventCount: 6345,
+    users: 192423,
+    viewsPerUser: 19.2,
+    averageTime: '2m 23s',
+    conversions: 400,
+  },
+  {
+    id: 2,
+    pageTitle: 'Product Details - Gadgets',
+    eventCount: 4653,
+    users: 152240,
+    viewsPerUser: 10.2,
+    averageTime: '2m 23s',
+    conversions: 321,
+  },
+  {
+    id: 3,
+    pageTitle: 'Checkout Process - Step 1',
+    eventCount: 2455,
+    users: 61240,
+    viewsPerUser: 16.4,
+    averageTime: '2m 23s',
+    conversions: 120,
+  },
+  {
+    id: 4,
+    pageTitle: 'User Profile Dashboard',
+    eventCount: 123543,
+    users: 102240,
+    viewsPerUser: 3.74,
+    averageTime: '2m 23s',
+    conversions: 40,
+  },
+  {
+    id: 5,
+    pageTitle: 'Article Listing - Tech News',
+    eventCount: 4653,
+    users: 132240,
+    viewsPerUser: 2.24,
+    averageTime: '2m 23s',
+    conversions: 49,
+  },
+  {
+    id: 6,
+    pageTitle: 'FAQs - Customer Support',
+    eventCount: 123543,
+    users: 12240,
+    viewsPerUser: 3.67,
+    averageTime: '2m 23s',
+    conversions: 80,
+  },
+  {
+    id: 7,
+    pageTitle: 'About Us - Company Info',
+    eventCount: 4653,
+    users: 19240,
+    viewsPerUser: 1.02,
+    averageTime: '2m 23s',
+    conversions: 2,
+  },
+  {
+    id: 8,
+    pageTitle: 'Contact Form Page',
+    eventCount: 123543,
+    users: 12240,
+    viewsPerUser: 3.67,
+    averageTime: '2m 23s',
+    conversions: 80,
+  },
+  {
+    id: 9,
+    pageTitle: 'Services Overview - Web Development',
+    eventCount: 6345,
+    users: 19240,
+    viewsPerUser: 1.02,
+    averageTime: '2m 23s',
+    conversions: 2,
+  },
+  {
+    id: 10,
+    pageTitle: 'Pricing Page - Subscription Plans',
+    eventCount: 2455,
+    users: 12240,
+    viewsPerUser: 3.67,
+    averageTime: '2m 23s',
+    conversions: 80,
+  },
+];
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx
new file mode 100644
index 00000000000000..62552af61e0f60
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import { GridCellParams, GridRowsProp, GridColDef } from '@mui/x-data-grid';
+
+export function renderStatus(
+  params: GridCellParams<
+    { status: 'verified' | 'new' | 'blocked' | 'uncertain' },
+    any,
+    any
+  >,
+) {
+  const colors: { [index: string]: 'error' | 'success' | 'info' | 'default' } = {
+    new: 'info',
+    verified: 'success',
+    blocked: 'error',
+    uncertain: 'default',
+  };
+
+  return (
+    <Chip
+      label={params.value.status}
+      color={colors[params.value.status]}
+      variant="outlined"
+    />
+  );
+}
+export function renderAvatar(
+  params: GridCellParams<{ name: string; color: string }, any, any>,
+) {
+  if (params.value == null) {
+    return '';
+  }
+
+  return (
+    <Avatar
+      sx={{
+        backgroundColor: params.value.color,
+        width: '24px',
+        height: '24px',
+        fontSize: '0.85rem',
+      }}
+    >
+      {params.value.name.toUpperCase().substring(0, 1)}
+    </Avatar>
+  );
+}
+
+export const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 90 },
+  { field: 'pageTitle', headerName: 'Page Title', width: 200 },
+  { field: 'eventCount', headerName: 'Event Count', width: 130 },
+  { field: 'users', headerName: 'Users', width: 100 },
+  {
+    field: 'viewsPerUser',
+    headerName: 'Views per User',
+    width: 130,
+  },
+  { field: 'averageTime', headerName: 'Average Time', width: 130 },
+  { field: 'conversions', headerName: 'Conversions', width: 120 },
+];
+
+export const rows: GridRowsProp = [
+  {
+    id: 1,
+    pageTitle: 'Homepage Overview',
+    eventCount: 6345,
+    users: 192423,
+    viewsPerUser: 19.2,
+    averageTime: '2m 23s',
+    conversions: 400,
+  },
+  {
+    id: 2,
+    pageTitle: 'Product Details - Gadgets',
+    eventCount: 4653,
+    users: 152240,
+    viewsPerUser: 10.2,
+    averageTime: '2m 23s',
+    conversions: 321,
+  },
+  {
+    id: 3,
+    pageTitle: 'Checkout Process - Step 1',
+    eventCount: 2455,
+    users: 61240,
+    viewsPerUser: 16.4,
+    averageTime: '2m 23s',
+    conversions: 120,
+  },
+  {
+    id: 4,
+    pageTitle: 'User Profile Dashboard',
+    eventCount: 123543,
+    users: 102240,
+    viewsPerUser: 3.74,
+    averageTime: '2m 23s',
+    conversions: 40,
+  },
+  {
+    id: 5,
+    pageTitle: 'Article Listing - Tech News',
+    eventCount: 4653,
+    users: 132240,
+    viewsPerUser: 2.24,
+    averageTime: '2m 23s',
+    conversions: 49,
+  },
+  {
+    id: 6,
+    pageTitle: 'FAQs - Customer Support',
+    eventCount: 123543,
+    users: 12240,
+    viewsPerUser: 3.67,
+    averageTime: '2m 23s',
+    conversions: 80,
+  },
+  {
+    id: 7,
+    pageTitle: 'About Us - Company Info',
+    eventCount: 4653,
+    users: 19240,
+    viewsPerUser: 1.02,
+    averageTime: '2m 23s',
+    conversions: 2,
+  },
+  {
+    id: 8,
+    pageTitle: 'Contact Form Page',
+    eventCount: 123543,
+    users: 12240,
+    viewsPerUser: 3.67,
+    averageTime: '2m 23s',
+    conversions: 80,
+  },
+  {
+    id: 9,
+    pageTitle: 'Services Overview - Web Development',
+    eventCount: 6345,
+    users: 19240,
+    viewsPerUser: 1.02,
+    averageTime: '2m 23s',
+    conversions: 2,
+  },
+  {
+    id: 10,
+    pageTitle: 'Pricing Page - Subscription Plans',
+    eventCount: 2455,
+    users: 12240,
+    viewsPerUser: 3.67,
+    averageTime: '2m 23s',
+    conversions: 80,
+  },
+];
diff --git a/docs/data/material/getting-started/templates/dashboard/listItems.js b/docs/data/material/getting-started/templates/dashboard/listItems.js
deleted file mode 100644
index 7d4090b3c738dd..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/listItems.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import ListSubheader from '@mui/material/ListSubheader';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import PeopleIcon from '@mui/icons-material/People';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import LayersIcon from '@mui/icons-material/Layers';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-
-export const mainListItems = (
-  <React.Fragment>
-    <ListItemButton>
-      <ListItemIcon>
-        <DashboardIcon />
-      </ListItemIcon>
-      <ListItemText primary="Dashboard" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <ShoppingCartIcon />
-      </ListItemIcon>
-      <ListItemText primary="Orders" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <PeopleIcon />
-      </ListItemIcon>
-      <ListItemText primary="Customers" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <BarChartIcon />
-      </ListItemIcon>
-      <ListItemText primary="Reports" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <LayersIcon />
-      </ListItemIcon>
-      <ListItemText primary="Integrations" />
-    </ListItemButton>
-  </React.Fragment>
-);
-
-export const secondaryListItems = (
-  <React.Fragment>
-    <ListSubheader component="div" inset>
-      Saved reports
-    </ListSubheader>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Current month" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Last quarter" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Year-end sale" />
-    </ListItemButton>
-  </React.Fragment>
-);
diff --git a/docs/data/material/getting-started/templates/dashboard/listItems.tsx b/docs/data/material/getting-started/templates/dashboard/listItems.tsx
deleted file mode 100644
index 7d4090b3c738dd..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/listItems.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import ListSubheader from '@mui/material/ListSubheader';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import PeopleIcon from '@mui/icons-material/People';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import LayersIcon from '@mui/icons-material/Layers';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-
-export const mainListItems = (
-  <React.Fragment>
-    <ListItemButton>
-      <ListItemIcon>
-        <DashboardIcon />
-      </ListItemIcon>
-      <ListItemText primary="Dashboard" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <ShoppingCartIcon />
-      </ListItemIcon>
-      <ListItemText primary="Orders" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <PeopleIcon />
-      </ListItemIcon>
-      <ListItemText primary="Customers" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <BarChartIcon />
-      </ListItemIcon>
-      <ListItemText primary="Reports" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <LayersIcon />
-      </ListItemIcon>
-      <ListItemText primary="Integrations" />
-    </ListItemButton>
-  </React.Fragment>
-);
-
-export const secondaryListItems = (
-  <React.Fragment>
-    <ListSubheader component="div" inset>
-      Saved reports
-    </ListSubheader>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Current month" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Last quarter" />
-    </ListItemButton>
-    <ListItemButton>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Year-end sale" />
-    </ListItemButton>
-  </React.Fragment>
-);
diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/themePrimitives.js
new file mode 100644
index 00000000000000..1b98cf9e83a5e6
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/themePrimitives.js
@@ -0,0 +1,203 @@
+import { createTheme, alpha } from '@mui/material/styles';
+
+const customTheme = createTheme();
+
+export const brand = {
+  50: 'hsl(210, 100%, 95%)',
+  100: 'hsl(210, 100%, 92%)',
+  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: 'hsl(220, 60%, 97%)',
+  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: '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%, 18%)',
+  800: 'hsl(0, 95%, 12%)',
+  900: 'hsl(0, 93%, 6%)',
+};
+
+export const getDesignTokens = (mode) => ({
+  palette: {
+    mode,
+    primary: {
+      light: brand[200],
+      main: brand[500],
+      dark: brand[800],
+      contrastText: brand[50],
+      ...(mode === 'dark' && {
+        contrastText: brand[50],
+        light: brand[300],
+        main: brand[400],
+        dark: brand[800],
+      }),
+    },
+    info: {
+      light: brand[100],
+      main: brand[300],
+      dark: brand[600],
+      contrastText: gray[50],
+      ...(mode === 'dark' && {
+        contrastText: brand[300],
+        light: brand[500],
+        main: brand[700],
+        dark: brand[900],
+      }),
+    },
+    warning: {
+      light: orange[300],
+      main: orange[400],
+      dark: orange[800],
+      ...(mode === 'dark' && {
+        light: orange[400],
+        main: orange[500],
+        dark: orange[700],
+      }),
+    },
+    error: {
+      light: red[300],
+      main: red[400],
+      dark: red[800],
+      ...(mode === 'dark' && {
+        light: red[400],
+        main: red[500],
+        dark: red[700],
+      }),
+    },
+    success: {
+      light: green[300],
+      main: green[400],
+      dark: green[800],
+      ...(mode === 'dark' && {
+        light: green[400],
+        main: green[500],
+        dark: green[700],
+      }),
+    },
+    grey: {
+      ...gray,
+    },
+    divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
+    background: {
+      default: gray[50],
+      paper: gray[100],
+      ...(mode === 'dark' && { default: gray[900], paper: gray[800] }),
+    },
+    text: {
+      primary: gray[800],
+      secondary: gray[600],
+      warning: orange[400],
+      ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
+    },
+    action: {
+      hover: alpha(gray[300], 0.2),
+      selected: `${alpha(brand[200], 0.2)}`,
+      ...(mode === 'dark' && {
+        hover: alpha(gray[500], 0.2),
+        selected: alpha(brand[800], 0.2),
+      }),
+    },
+  },
+  typography: {
+    fontFamily: ['"Inter", "sans-serif"'].join(','),
+    h1: {
+      fontSize: customTheme.typography.pxToRem(48),
+      fontWeight: 600,
+      lineHeight: 1.2,
+      letterSpacing: -0.5,
+    },
+    h2: {
+      fontSize: customTheme.typography.pxToRem(36),
+      fontWeight: 600,
+      lineHeight: 1.2,
+    },
+    h3: {
+      fontSize: customTheme.typography.pxToRem(30),
+      lineHeight: 1.2,
+    },
+    h4: {
+      fontSize: customTheme.typography.pxToRem(24),
+      fontWeight: 600,
+      lineHeight: 1.5,
+    },
+    h5: {
+      fontSize: customTheme.typography.pxToRem(20),
+      fontWeight: 600,
+    },
+    h6: {
+      fontSize: customTheme.typography.pxToRem(18),
+      fontWeight: 600,
+    },
+    subtitle1: {
+      fontSize: customTheme.typography.pxToRem(18),
+    },
+    subtitle2: {
+      fontSize: customTheme.typography.pxToRem(14),
+      fontWeight: 500,
+    },
+    body1: {
+      fontSize: customTheme.typography.pxToRem(14),
+    },
+    body2: {
+      fontSize: customTheme.typography.pxToRem(14),
+      fontWeight: 400,
+    },
+    caption: {
+      fontSize: customTheme.typography.pxToRem(12),
+      fontWeight: 400,
+    },
+  },
+  shape: {
+    borderRadius: 10,
+  },
+});
diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts
new file mode 100644
index 00000000000000..c4b4887c7b62e5
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts
@@ -0,0 +1,226 @@
+import { PaletteMode } from '@mui/material';
+import { createTheme, alpha } from '@mui/material/styles';
+
+declare module '@mui/material/Paper' {
+  interface PaperPropsVariantOverrides {
+    highlighted: true;
+  }
+}
+declare module '@mui/material/styles/createPalette' {
+  interface ColorRange {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  }
+
+  interface PaletteColor extends ColorRange {}
+}
+
+const customTheme = createTheme();
+
+export const brand = {
+  50: 'hsl(210, 100%, 95%)',
+  100: 'hsl(210, 100%, 92%)',
+  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: 'hsl(220, 60%, 97%)',
+  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: '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%, 18%)',
+  800: 'hsl(0, 95%, 12%)',
+  900: 'hsl(0, 93%, 6%)',
+};
+
+export const getDesignTokens = (mode: PaletteMode) => ({
+  palette: {
+    mode,
+    primary: {
+      light: brand[200],
+      main: brand[500],
+      dark: brand[800],
+      contrastText: brand[50],
+      ...(mode === 'dark' && {
+        contrastText: brand[50],
+        light: brand[300],
+        main: brand[400],
+        dark: brand[800],
+      }),
+    },
+    info: {
+      light: brand[100],
+      main: brand[300],
+      dark: brand[600],
+      contrastText: gray[50],
+      ...(mode === 'dark' && {
+        contrastText: brand[300],
+        light: brand[500],
+        main: brand[700],
+        dark: brand[900],
+      }),
+    },
+    warning: {
+      light: orange[300],
+      main: orange[400],
+      dark: orange[800],
+      ...(mode === 'dark' && {
+        light: orange[400],
+        main: orange[500],
+        dark: orange[700],
+      }),
+    },
+    error: {
+      light: red[300],
+      main: red[400],
+      dark: red[800],
+      ...(mode === 'dark' && {
+        light: red[400],
+        main: red[500],
+        dark: red[700],
+      }),
+    },
+    success: {
+      light: green[300],
+      main: green[400],
+      dark: green[800],
+      ...(mode === 'dark' && {
+        light: green[400],
+        main: green[500],
+        dark: green[700],
+      }),
+    },
+    grey: {
+      ...gray,
+    },
+    divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
+    background: {
+      default: gray[50],
+      paper: gray[100],
+      ...(mode === 'dark' && { default: gray[900], paper: gray[800] }),
+    },
+    text: {
+      primary: gray[800],
+      secondary: gray[600],
+      warning: orange[400],
+      ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
+    },
+    action: {
+      hover: alpha(gray[300], 0.2),
+      selected: `${alpha(brand[200], 0.2)}`,
+      ...(mode === 'dark' && {
+        hover: alpha(gray[500], 0.2),
+        selected: alpha(brand[800], 0.2),
+      }),
+    },
+  },
+  typography: {
+    fontFamily: ['"Inter", "sans-serif"'].join(','),
+    h1: {
+      fontSize: customTheme.typography.pxToRem(48),
+      fontWeight: 600,
+      lineHeight: 1.2,
+      letterSpacing: -0.5,
+    },
+    h2: {
+      fontSize: customTheme.typography.pxToRem(36),
+      fontWeight: 600,
+      lineHeight: 1.2,
+    },
+    h3: {
+      fontSize: customTheme.typography.pxToRem(30),
+      lineHeight: 1.2,
+    },
+    h4: {
+      fontSize: customTheme.typography.pxToRem(24),
+      fontWeight: 600,
+      lineHeight: 1.5,
+    },
+    h5: {
+      fontSize: customTheme.typography.pxToRem(20),
+      fontWeight: 600,
+    },
+    h6: {
+      fontSize: customTheme.typography.pxToRem(18),
+      fontWeight: 600,
+    },
+    subtitle1: {
+      fontSize: customTheme.typography.pxToRem(18),
+    },
+    subtitle2: {
+      fontSize: customTheme.typography.pxToRem(14),
+      fontWeight: 500,
+    },
+    body1: {
+      fontSize: customTheme.typography.pxToRem(14),
+    },
+    body2: {
+      fontSize: customTheme.typography.pxToRem(14),
+      fontWeight: 400,
+    },
+    caption: {
+      fontSize: customTheme.typography.pxToRem(12),
+      fontWeight: 400,
+    },
+  },
+  shape: {
+    borderRadius: 10,
+  },
+});
diff --git a/docs/data/material/guides/localization/localization.md b/docs/data/material/guides/localization/localization.md
index 9f047bfea14351..2e69ae6826197d 100644
--- a/docs/data/material/guides/localization/localization.md
+++ b/docs/data/material/guides/localization/localization.md
@@ -77,6 +77,7 @@ The [Data Grid and Data Grid Pro](/x/react-data-grid/) components have their own
 | Nepali                  | ne-NP               | `neNP`      |
 | Norwegian (bokmål)      | nb-NO               | `nbNO`      |
 | Norwegian (nynorsk)     | nn-NO               | `nnNO`      |
+| Pashto (Afghanistan)    | ps-AF               | `psAF`      |
 | Persian                 | fa-IR               | `faIR`      |
 | Polish                  | pl-PL               | `plPL`      |
 | Portuguese              | pt-PT               | `ptPT`      |
diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md
index 5829d5d971a20c..75bcafea957d70 100644
--- a/docs/data/material/integrations/nextjs/nextjs.md
+++ b/docs/data/material/integrations/nextjs/nextjs.md
@@ -124,7 +124,7 @@ To learn more about theming, check out the [theming guide](/material-ui/customiz
 
 #### CSS theme variables
 
-If you want to use [CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` utilities instead:
+If you want to use [CSS theme variables](/material-ui/customization/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` utilities instead:
 
 ```diff title="src/theme.ts"
  'use client';
@@ -136,7 +136,7 @@ If you want to use [CSS theme variables](/material-ui/experimental-api/css-theme
 +import { CssVarsProvider } from '@mui/material/styles';
 ```
 
-Learn more about [the advantages of CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/#advantages).
+Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages).
 
 ### Using other styling solutions
 
@@ -367,11 +367,11 @@ To learn more about theming, check out the [Theming guide](/material-ui/customiz
 
 #### CSS theme variables
 
-If you want to use [CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` instead:
+If you want to use [CSS theme variables](/material-ui/customization/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` instead:
 
 ```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).
+Learn more about [the advantages of CSS theme variables](/material-ui/customization/css-theme-variables/overview/#advantages).
diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/docs/data/material/integrations/routing/ListRouter.tsx
index 1900b67cf2d582..be912a6f8c9eff 100644
--- a/docs/data/material/integrations/routing/ListRouter.tsx
+++ b/docs/data/material/integrations/routing/ListRouter.tsx
@@ -33,7 +33,7 @@ function Router(props: { children?: React.ReactNode }) {
 }
 
 interface ListItemLinkProps {
-  icon?: React.ReactElement;
+  icon?: React.ReactElement<any>;
   primary: string;
   to: string;
 }
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 1347af809feaa0..814f1a07349ab2 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
@@ -313,6 +313,64 @@ The Avatar's `imgProps` prop was deprecated in favor of `slotProps.img`:
  />;
 ```
 
+## AvatarGroup
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-group-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/avatar-group-props <path>
+```
+
+### slotProps.additionalAvatar
+
+The AvatarGroup's `slotProps.additionalAvatar` was deprecated in favor of `slotProps.surplus`:
+
+```diff
+ <AvatarGroup
+   slotProps={{
+-    additionalAvatar: {color: "red"}
++    surplus: {color: "red"}
+   }}
+ />;
+```
+
+```diff
+ MuiAvatarGroup: {
+   defaultProps: {
+     slotProps: {
+-      additionalAvatar: {color: "red"}
++      surplus: {color: "red"}
+     },
+   },
+ },
+```
+
+### componentsProps
+
+The AvatarGroup's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <AvatarGroup
+-  componentsProps={{
+-    additionalAvatar: {color: "red"}
++  slotProps={{
++    surplus: {color: "red"}
+   }}
+ />;
+```
+
+```diff
+ MuiAvatarGroup: {
+   defaultProps: {
+-    componentsProps: {
+-      additionalAvatar: {color: "red"}
++    slotProps: {
++      surplus: {color: "red"}
+     },
+   },
+ },
+```
+
 ## Backdrop
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#backdrop-props) below to migrate the code as described in the following sections:
@@ -972,6 +1030,36 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
  />
 ```
 
+## FilledInput
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#filled-input-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/filled-input-props <path>
+```
+
+### components
+
+The FilledInput's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <FilledInput
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The FilledInput's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <FilledInput
+-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
++  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+ />
+```
+
 ## FormControlLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#form-control-label-props) below to migrate the code as described in the following sections:
@@ -991,12 +1079,183 @@ The FormControlLabel's `componentsProps` prop was deprecated in favor of `slotPr
  />
 ```
 
+## Input
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#input-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/input-props <path>
+```
+
+### components
+
+The Input's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <Input
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The Input's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Input
+-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
++  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+ />
+```
+
+## InputBase
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#input-base-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/input-base-props <path>
+```
+
+### components
+
+The InputBase's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <InputBase
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The InputBase's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Input
+-  componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
++  slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ />
+```
+
+## ListItem
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#list-item-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/list-item-props <path>
+```
+
+### components
+
+The ListItem's `components` prop was deprecated in favor of `slots`:
+
+```diff
+ <ListItem
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The ListItem's `componentsProps` prop was deprecated in favor of `slotProps`:
+
+```diff
+ <ListItem
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
+### ContainerComponent
+
+The ListItem's `ContainerComponent` prop was deprecated in favor of `slots.root` or `component` instead.
+
+### ContainerProps
+
+The ListItem's `ContainerProps` prop was deprecated in favor of `slotProps.root` instead.
+
+## ListItemSecondaryAction
+
+### Deprecated component
+
+The ListItemSecondaryAction component was deprecated in favor of the `secondaryAction` prop in the ListItem component.
+
+```diff
+ <ListItem
++  secondaryAction={
++    <IconButton aria-label="Leave a comment">
++      <CommentIcon />
++    </IconButton>
++  }
+   disablePadding
+ >
+   <ListItemText primary="John Doe" />
+-  <ListItemSecondaryAction>
+-    <IconButton aria-label="Leave a comment">
+-      <CommentIcon />
+-    </IconButton>
+-  </ListItemSecondaryAction>
+ </ListItem>
+```
+
+## Grid
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#grid-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/grid-props <path>
+```
+
+### wrap prop
+
+The Grid's `wrap` prop was deprecated in favor of `flexWrap` MUI System prop:
+
+```diff
+ <Grid
+-  wrap="nowrap"
++  flexWrap="nowrap"
+ />;
+```
+
+## OutlinedInput
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#outlined-input-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/outlined-input-props <path>
+```
+
+### components
+
+The OutlinedInput's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <OutlinedInput
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The OutlinedInput's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <OutlinedInput
+-  componentsProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
++  slotProps={{ input: { id: 'test-input-id', root: { id: 'test-root-id' } } }}
+ />
+```
+
 ## PaginationItem
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections:
 
 ```bash
-npx @mui/codemod@latest deprecations/pagination-item-classes <path>
+npx @mui/codemod@next deprecations/pagination-item-classes <path>
 ```
 
 ### Composed CSS classes
@@ -1054,6 +1313,36 @@ The PaginationItems's `components` prop was deprecated in favor of `slots`:
  />
 ```
 
+## Popper
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popper-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/popper-props <path>
+```
+
+### components
+
+The Popper's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <Popper
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The Popper's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Popper
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
 ## Slider
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections:
@@ -1153,6 +1442,36 @@ All of the TextField's slot props (`*Props`) props were deprecated in favor of e
  />
 ```
 
+## Tooltip
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tooltip-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/tooltip-props <path>
+```
+
+### components
+
+The Tooltip's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <Tooltip
+-  components={{ Arrow: CustomArrow }}
++  slots={{ arrow: CustomArrow }}
+ />
+```
+
+### componentsProps
+
+The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Tooltip
+-  componentsProps={{ arrow: { testid: 'test-id' } }}
++  slotProps={{ arrow: { testid: 'test-id' } }}
+ />
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:
diff --git a/docs/data/material/experimental-api/css-theme-variables/migration.md b/docs/data/material/migration/migration-v5/migration-css-theme-variables.md
similarity index 89%
rename from docs/data/material/experimental-api/css-theme-variables/migration.md
rename to docs/data/material/migration/migration-v5/migration-css-theme-variables.md
index 02cf6c5a4bddc2..c1b74433614de7 100644
--- a/docs/data/material/experimental-api/css-theme-variables/migration.md
+++ b/docs/data/material/migration/migration-v5/migration-css-theme-variables.md
@@ -12,7 +12,7 @@ This migration offers a solution to a longstanding issue in which a user who pre
 If you aren't using [`ThemeProvider`](/material-ui/customization/theming/#theme-provider), then all you need to do is wrap your application with the `CssVarsProvider`:
 
 ```js
-import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
+import { CssVarsProvider } from '@mui/material/styles';
 
 function App() {
   return <CssVarsProvider>...your existing application</CssVarsProvider>;
@@ -30,7 +30,7 @@ Other properties can be copied and pasted.
 
 ```diff
 -import { createTheme } from '@mui/material/styles';
-+import { experimental_extendTheme as extendTheme} from '@mui/material/styles';
++import { extendTheme } from '@mui/material/styles';
 
 -const lightTheme = createTheme({
 -  palette: {
@@ -79,7 +79,7 @@ Then, replace the `ThemeProvider` with the `CssVarsProvider`:
 
 ```diff
 -import { ThemeProvider } from '@mui/material/styles';
-+import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
++import { CssVarsProvider } from '@mui/material/styles';
 
  const theme = extendTheme(...);
 
@@ -141,11 +141,7 @@ function App() {
 **After**:
 
 ```js
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-  useColorScheme,
-} from '@mui/material/styles';
+import { CssVarsProvider, extendTheme, useColorScheme } from '@mui/material/styles';
 
 function ModeToggle() {
   const { mode, setMode } = useColorScheme();
@@ -249,7 +245,7 @@ const Button = styled('button')(({ theme }) => ({
 
 This is because the `theme.palette.mode` is always `light` on the server.
 
-To fix this problem, replace conditional expressions with the attribute selector instead:
+To fix this problem, replace conditional expressions with `theme.applyStyles()` instead:
 
 ```js
 // theming example
@@ -259,9 +255,9 @@ extendTheme({
       styleOverrides: {
         root: ({ theme }) => ({
           backgroundColor: 'rgba(0 0 0 / 0.2)',
-          [theme.getColorSchemeSelector('dark')]: {
+          ...theme.applyStyles('dark', {
             backgroundColor: 'rgba(255 255 255 / 0.2)',
-          },
+          }),
         }),
       },
     },
@@ -271,16 +267,14 @@ extendTheme({
 // or a custom component example
 const Button = styled('button')(({ theme }) => ({
   backgroundColor: 'rgba(0 0 0 / 0.2)',
-  [theme.getColorSchemeSelector('dark')]: {
+  ...theme.applyStyles('dark', {
     backgroundColor: 'rgba(255 255 255 / 0.2)',
-  },
+  }),
 }));
 ```
 
-:::warning
-The `theme.getColorSchemeSelector()` is a utility function that returns an attribute selector `'[data-mui-color-scheme="dark"] &'`.
-
-Note that the attribute selector creates higher CSS specificity which could be cumbersome for theming.
+:::info
+The `theme.applyStyles()` is a new utility function available in Material UI v6 that applies the provided styles to the specified mode.
 :::
 
 ## 5. Test dark-mode flickering
diff --git a/docs/data/material/migration/migration-v5/migration-v5.md b/docs/data/material/migration/migration-v5/migration-v5.md
index 7ab3909a8671a0..c6febcdb642a63 100644
--- a/docs/data/material/migration/migration-v5/migration-v5.md
+++ b/docs/data/material/migration/migration-v5/migration-v5.md
@@ -48,6 +48,8 @@ Expect updates as new breaking changes are introduced.
 
 ### UMD bundle was removed
 
-<!-- #default-branch-switch -->
+To align with React 19's removal of UMD builds, Material UI has also removed its UMD bundle.
+This results in a reduction of the `@mui/material` package size by 2.5MB or 25% of the total package size.
 
-The UMD bundle is no longer provided. This was replaced in favor of [ESM CDNs](https://esm.sh/). Please refer to the [CDN docs](https://next.mui.com/material-ui/getting-started/installation/#cdn) for alternatives.
+Instead, using ESM-based CDNs such as [esm.sh](https://esm.sh/) is recommended.
+For alternative installation methods, refer to the [CDN documentation](/material-ui/getting-started/installation/#cdn).
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 9d3f176a50bacd..8d64d4110a5ac9 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -189,6 +189,17 @@ const pages: MuiPage[] = [
           { pathname: '/material-ui/customization/transitions' },
         ],
       },
+      {
+        pathname: '/material-ui/customization/css-variables',
+        subheader: '/material-ui/customization/css-variables',
+        children: [
+          { pathname: '/material-ui/customization/css-theme-variables/overview' },
+          { pathname: '/material-ui/customization/css-theme-variables/usage' },
+          {
+            pathname: '/material-ui/customization/css-theme-variables/configuration',
+          },
+        ],
+      },
     ],
   },
   {
@@ -238,19 +249,6 @@ const pages: MuiPage[] = [
         pathname: '/material-ui/experimental-api/classname-generator',
         title: 'ClassName generator',
       },
-      {
-        pathname: '/material-ui/experimental-api/css-theme-variables',
-        subheader: 'CSS theme variables',
-        children: [
-          { pathname: '/material-ui/experimental-api/css-theme-variables/overview' },
-          { pathname: '/material-ui/experimental-api/css-theme-variables/usage' },
-          { pathname: '/material-ui/experimental-api/css-theme-variables/customization' },
-          {
-            pathname: '/material-ui/experimental-api/css-theme-variables/migration',
-            title: 'Migrating to CSS variables',
-          },
-        ],
-      },
     ],
   },
   {
@@ -277,6 +275,10 @@ const pages: MuiPage[] = [
             pathname: '/material-ui/migration/migration-v5',
             title: 'Migrating to v6',
           },
+          {
+            pathname: '/material-ui/migration/migration-css-theme-variables',
+            title: 'Migrating to CSS theme variables',
+          },
         ],
       },
       {
@@ -320,7 +322,6 @@ const pages: MuiPage[] = [
     children: [
       { pathname: '/material-ui/discover-more/showcase' },
       { pathname: '/material-ui/discover-more/related-projects' },
-      { pathname: '/material-ui/discover-more/design-kits' },
       { pathname: '/material-ui/discover-more/roadmap' },
       { pathname: '/material-ui/discover-more/backers', title: 'Sponsors and Backers' },
       { pathname: '/material-ui/discover-more/vision' },
diff --git a/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md b/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
index 7f95416dee8ecf..9b834cccf0687e 100644
--- a/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
+++ b/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
@@ -12,7 +12,7 @@ If this is your first time encountering CSS variables, you should check out [the
 
 CSS theme variable support is a new feature in MUI System added in [`v5.0.5`](https://github.com/mui/material-ui/releases/tag/v5.0.5) as an experimental export. It tells the underlying Material UI, Joy UI or even custom UI library components to use the generated CSS theme variables instead of raw values. This provides significant improvements in developer experience related to theming and customization.
 With these variables, you can inject a theme into your app's stylesheet _at build time_ to apply the user's selected settings before the whole app is rendered.
-You can checkout the [advantages](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/#advantages) and [trade-offs](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/#trade-offs) of using CSS theme variables before using them.
+Learn more about the [advantages](https://mui.com/material-ui/customization/css-theme-variables/overview/#advantages) and [trade-offs](https://mui.com/material-ui/customization/css-theme-variables/overview/#trade-offs) of using CSS theme variables.
 
 ### Advantages
 
@@ -39,7 +39,8 @@ The comparison described in the table above may not be applicable to large and c
 
 ## Usage
 
-The CSS variables API usage is exposed as a higher order function called `unstable_createCssVarsProvider` which can be called to create a theme provider and other utilities to share the theme config throughout your app. This is a very low-level function and has a lot of moving parts. If you are already using [Material UI](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) or [Joy UI](https://mui.com/joy-ui/customization/using-css-variables/), they already expose their own `CssVarsProvider` component that you can use directly without needing to configure your theme. Now that's out of the way, we can continue with how this util can be used.
+The CSS variables API usage is exposed as a higher order function called `unstable_createCssVarsProvider` which can be called to create a theme provider and other utilities to share the theme config throughout your app. This is a very low-level function and has a lot of moving parts.
+If you're using [Material UI](https://mui.com/material-ui/customization/css-theme-variables/overview/) or [Joy UI](https://mui.com/joy-ui/customization/using-css-variables/), they expose their own `CssVarsProvider` component that you can use directly without configuring your theme.
 
 We'll first define a minimal theme palette for light and dark modes.
 
@@ -184,8 +185,8 @@ Now, the Button's `backgroundColor`, `borderColor` and text `color` values will
 ### Demo
 
 {{"demo": "CreateCssVarsProvider.js"}}
-
-For framework or language specific setup, see [this](https://mui.com/material-ui/experimental-api/css-theme-variables/usage/#server-side-rendering)
+For framework- or language-specific setup instructions, see [CSS theme variables—Usage—Server-side rendering](https://mui.com/material-ui/customization/css-theme-variables/usage/#server-side-rendering).
+For framework or language specific setup, see [this](https://mui.com/material-ui/customization/css-theme-variables/usage/#server-side-rendering)
 
 See the complete usage of `createCssVarsProvider` in [Material UI](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/CssVarsProvider.tsx) and [Joy UI](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/CssVarsProvider.tsx).
 
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
index 62eda396a074a4..b75f8f2c300eca 100644
--- a/docs/lib/sourcing.ts
+++ b/docs/lib/sourcing.ts
@@ -43,7 +43,6 @@ const ALLOWED_TAGS = [
   'Pigment CSS',
   'Joy UI',
   'MUI X',
-  'MUI System',
   'Toolpad',
 ];
 
diff --git a/docs/package.json b/docs/package.json
index f51e1ae46c104a..37003237da676c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,9 +19,9 @@
     "link-check": "node ./scripts/reportBrokenLinks.js"
   },
   "dependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/runtime": "^7.24.5",
-    "@babel/runtime-corejs2": "^7.24.5",
+    "@babel/core": "^7.24.6",
+    "@babel/runtime": "^7.24.6",
+    "@babel/runtime-corejs2": "^7.24.6",
     "@docsearch/react": "^3.6.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
@@ -29,13 +29,13 @@
     "@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.1",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/base": "workspace:*",
     "@mui/docs": "workspace:^",
     "@mui/icons-material": "workspace:^",
+    "@mui/internal-markdown": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
-    "@mui/internal-markdown": "workspace:^",
     "@mui/material": "workspace:^",
     "@mui/styled-engine": "workspace:^",
     "@mui/styled-engine-sc": "workspace:^",
@@ -43,15 +43,15 @@
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@mui/x-charts": "7.4.0",
-    "@mui/x-data-grid": "7.4.0",
-    "@mui/x-data-grid-generator": "7.4.0",
-    "@mui/x-data-grid-premium": "7.4.0",
-    "@mui/x-data-grid-pro": "7.4.0",
-    "@mui/x-date-pickers": "7.4.0",
-    "@mui/x-date-pickers-pro": "7.4.0",
-    "@mui/x-license": "7.2.0",
-    "@mui/x-tree-view": "7.4.0",
+    "@mui/x-charts": "7.5.1",
+    "@mui/x-data-grid": "7.5.1",
+    "@mui/x-data-grid-generator": "7.5.1",
+    "@mui/x-data-grid-premium": "7.5.1",
+    "@mui/x-data-grid-pro": "7.5.1",
+    "@mui/x-date-pickers": "7.5.1",
+    "@mui/x-date-pickers-pro": "7.5.1",
+    "@mui/x-license": "7.2.1",
+    "@mui/x-tree-view": "7.5.1",
     "@popperjs/core": "^2.11.8",
     "@react-spring/web": "^9.7.3",
     "autoprefixer": "^10.4.19",
@@ -68,6 +68,7 @@
     "css-mediaquery": "^0.1.2",
     "date-fns": "^2.30.0",
     "date-fns-jalali": "^2.21.3-1",
+    "dayjs": "^1.11.10",
     "feed": "^4.2.2",
     "fg-loadcss": "^3.1.0",
     "final-form": "^4.20.10",
@@ -80,7 +81,7 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "markdown-to-jsx": "^7.4.7",
-    "material-ui-popup-state": "^5.1.1",
+    "material-ui-popup-state": "^5.1.2",
     "next": "^13.5.1",
     "notistack": "3.0.1",
     "nprogress": "^0.2.0",
@@ -91,7 +92,7 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-final-form": "^6.5.9",
-    "react-imask": "^7.6.0",
+    "react-imask": "^7.6.1",
     "react-intersection-observer": "^9.10.2",
     "react-is": "^18.2.0",
     "react-number-format": "^5.3.4",
@@ -100,9 +101,8 @@
     "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.10",
+    "react-virtuoso": "^4.7.11",
     "react-window": "^1.8.10",
     "rimraf": "^5.0.7",
     "styled-components": "^6.1.11",
@@ -112,11 +112,11 @@
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-constant-elements": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/plugin-transform-react-constant-elements": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-scripts": "workspace:^",
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.16",
     "@types/css-mediaquery": "^0.1.4",
@@ -126,7 +126,6 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
     "@types/react-swipeable-views": "^0.13.5",
-    "@types/react-swipeable-views-utils": "^0.13.7",
     "@types/react-transition-group": "^4.4.10",
     "@types/react-window": "^1.8.8",
     "@types/stylis": "^4.2.0",
@@ -134,7 +133,7 @@
     "cross-fetch": "^4.0.0",
     "gm": "^1.25.0",
     "marked": "^5.1.2",
-    "playwright": "^1.44.0",
+    "playwright": "^1.44.1",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3",
     "yargs": "^17.7.2"
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index b17a4b54351526..a9b1066aac2118 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -163,7 +163,7 @@ function AppWrapper(props) {
 
     if (productId === 'material-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Material UI',
         versions: [
           { text: `v${materialPkgJson.version}`, current: true },
@@ -182,7 +182,7 @@ function AppWrapper(props) {
 
     if (productId === 'joy-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Joy UI',
         versions: [{ text: `v${joyPkgJson.version}`, current: true }],
       };
@@ -190,7 +190,7 @@ function AppWrapper(props) {
 
     if (productId === 'system') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'MUI System',
         versions: [
           { text: `v${systemPkgJson.version}`, current: true },
@@ -206,7 +206,7 @@ function AppWrapper(props) {
 
     if (productId === 'base-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Base UI',
         versions: [{ text: `v${basePkgJson.version}`, current: true }],
       };
diff --git a/docs/pages/base-ui/api/use-modal.json b/docs/pages/base-ui/api/use-modal.json
index 494620611cab21..81e8315c9273b4 100644
--- a/docs/pages/base-ui/api/use-modal.json
+++ b/docs/pages/base-ui/api/use-modal.json
@@ -2,8 +2,8 @@
   "parameters": {
     "children": {
       "type": {
-        "name": "React.ReactElement | undefined | null",
-        "description": "React.ReactElement | undefined | null"
+        "name": "React.ReactElement&lt;any&gt; | undefined | null",
+        "description": "React.ReactElement&lt;any&gt; | undefined | null"
       },
       "required": true
     },
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index fc98fa100f8f9a..94add9d096b780 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -82,28 +82,28 @@ function PostPreview(props: BlogPost) {
       </Typography>
       {props.authors && (
         <AvatarGroup
-          sx={[
-            (theme) => ({
-              mt: 2,
-              mb: 1,
-              alignSelf: 'flex-start',
+          sx={(theme) => ({
+            mt: 2,
+            mb: 1,
+            alignSelf: 'flex-start',
+            '& .MuiAvatar-circular': {
+              width: 28,
+              height: 28,
+              fontSize: theme.typography.pxToRem(13),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: (theme.vars || theme).palette.text.primary,
+              border: `1px solid ${(theme.vars || theme).palette.divider}`,
+              outline: '3px solid',
+              outlineColor: '#FFF',
+              backgroundColor: (theme.vars || theme).palette.grey[100],
+            },
+            ...theme.applyDarkStyles({
               '& .MuiAvatar-circular': {
-                width: 28,
-                height: 28,
-                border: `1px solid ${(theme.vars || theme).palette.divider}`,
-                outline: '3px solid',
-                outlineColor: '#FFF',
-                backgroundColor: (theme.vars || theme).palette.grey[100],
+                outlineColor: (theme.vars || theme).palette.primaryDark[900],
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
               },
             }),
-            (theme) =>
-              theme.applyDarkStyles({
-                '& .MuiAvatar-circular': {
-                  outlineColor: (theme.vars || theme).palette.primaryDark[900],
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                },
-              }),
-          ]}
+          })}
         >
           {(props.authors as Array<keyof typeof AUTHORS>).map((author) => (
             <Avatar
@@ -347,6 +347,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
             >
               <Paper variant="outlined">
                 <Typography
+                  component="h3"
                   color="text.primary"
                   fontWeight="semiBold"
                   variant="subtitle2"
@@ -387,9 +388,6 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                               },
                             })}
                         size="small"
-                        sx={{
-                          py: 1.2,
-                        }}
                       />
                     );
                   })}
@@ -397,6 +395,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
               </Paper>
               <Paper variant="outlined">
                 <Typography
+                  component="h3"
                   color="text.primary"
                   fontWeight="semiBold"
                   variant="subtitle2"
@@ -437,7 +436,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 <Box
                   component="li"
                   key={post.slug}
-                  sx={() => ({
+                  sx={{
                     py: 2.5,
                     display: 'flex',
                     flexDirection: 'column',
@@ -446,7 +445,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                       borderBottom: '1px solid',
                       borderColor: 'divider',
                     },
-                  })}
+                  }}
                 >
                   <PostPreview {...post} />
                 </Box>
@@ -461,7 +460,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 setPage(value - 1);
                 postListRef.current?.scrollIntoView();
               }}
-              sx={{ mt: 1, mb: 8 }}
+              sx={{ mt: 1, mb: 4 }}
             />
           </div>
         </Container>
diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
index 44099faacc9eba..b3856429416277 100644
--- a/docs/pages/blog/introducing-pigment-css.md
+++ b/docs/pages/blog/introducing-pigment-css.md
@@ -11,7 +11,7 @@ authors:
     'danilo-leal',
     'oliviertassinari',
   ]
-tags: ['Pigment CSS']
+tags: ['Pigment CSS', 'Product']
 manualCard: true
 ---
 
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
index 82e5393540bdbf..67140e15e00d5b 100644
--- a/docs/pages/experiments/website/branding-theme-test.tsx
+++ b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -43,7 +43,7 @@ export default function BrandingThemeTest() {
             <Button variant="outlined" size="small" color="secondary">
               Outlined secondary
             </Button>
-            <Button variant="text" size="small" color="info">
+            <Button variant="text" size="small">
               This button
             </Button>
             <IconButton color="primary">
diff --git a/docs/pages/experiments/website/dashboard-template-theme.tsx b/docs/pages/experiments/website/dashboard-template-theme.tsx
new file mode 100644
index 00000000000000..d89cf524819b30
--- /dev/null
+++ b/docs/pages/experiments/website/dashboard-template-theme.tsx
@@ -0,0 +1,286 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Container from '@mui/material/Container';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Stack from '@mui/material/Stack';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
+import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { PaletteMode } from '@mui/material';
+
+import Head from 'docs/src/modules/components/Head';
+import getDashboardTheme from 'docs/data/material/getting-started/templates/dashboard/getDashboardTheme';
+import CustomDatePicker from 'docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker';
+
+interface ToggleColorModeProps {
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) {
+  return (
+    <Box sx={{ maxWidth: '32px' }}>
+      <IconButton onClick={toggleColorMode} size="small" aria-label="button to toggle theme">
+        {mode === 'dark' ? (
+          <WbSunnyRoundedIcon fontSize="small" />
+        ) : (
+          <ModeNightRoundedIcon fontSize="small" />
+        )}
+      </IconButton>
+    </Box>
+  );
+}
+
+function CustomTabPanel(props: { [x: string]: any; children: any; value: any; index: any }) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+CustomTabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export default function DashboardTemplateTheme() {
+  const [mode, setMode] = React.useState<PaletteMode>('light');
+  const dashboardTheme = createTheme(getDashboardTheme(mode));
+  const toggleColorMode = () => {
+    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const [value, setValue] = React.useState(0);
+  const handleChange = (_event: any, newValue: React.SetStateAction<number>) => {
+    setValue(newValue);
+  };
+
+  return (
+    <ThemeProvider theme={dashboardTheme}>
+      <CssBaseline />
+      <Head title="MUI Branding Theme Test" description="" />
+      <Container
+        component="main"
+        maxWidth="xl"
+        id="main-content"
+        sx={{ display: 'flex', flexDirection: 'column', gap: 2, my: 2 }}
+      >
+        <Stack
+          direction={{ xs: 'column', md: 'row' }}
+          alignItems="flex-end"
+          justifyContent="space-between"
+          gap={2}
+        >
+          <Typography variant="h4" component="h1">
+            Dashboard template theme
+          </Typography>
+          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+        </Stack>
+        <Divider />
+        <Stack direction="column" gap={2}>
+          <Stack direction="row" gap={2} alignItems="center">
+            <Button variant="contained">Contained</Button>
+            <Button variant="outlined">Outlined</Button>
+            <Button variant="text">Text</Button>
+            <Button variant="contained" size="small">
+              Contained
+            </Button>
+            <Button variant="outlined" size="small">
+              Outlined
+            </Button>
+            <Button variant="text" size="small">
+              Text
+            </Button>
+          </Stack>
+          <Stack direction="row" gap={2} alignItems="center">
+            <Button variant="contained" color="secondary">
+              Contained
+            </Button>
+            <Button variant="outlined" color="secondary">
+              Outlined
+            </Button>
+            <Button variant="text" color="secondary">
+              Text
+            </Button>
+            <Button variant="contained" color="secondary" size="small">
+              Contained
+            </Button>
+            <Button variant="outlined" color="secondary" size="small">
+              Outlined
+            </Button>
+            <Button variant="text" color="secondary" size="small">
+              Text
+            </Button>
+          </Stack>
+          <Stack direction="row" gap={2} alignItems="center">
+            <IconButton>
+              <NotificationsRoundedIcon />
+            </IconButton>
+            <IconButton size="small">
+              <NotificationsRoundedIcon />
+            </IconButton>
+          </Stack>
+        </Stack>
+        <Stack direction="row" gap={2}>
+          <Card sx={{ width: 250 }}>
+            <CardContent>
+              <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                Word of the Day
+              </Typography>
+              <Typography variant="h5" component="div">
+                be•nev•o•lent
+              </Typography>
+              <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                adjective
+              </Typography>
+              <Typography variant="body2">
+                well meaning and kindly.
+                <br />
+                {'"a benevolent smile"'}
+              </Typography>
+            </CardContent>
+            <CardActions>
+              <Button size="small">Learn More</Button>
+            </CardActions>
+          </Card>
+          <Card variant="outlined" sx={{ width: 250 }}>
+            <CardContent>
+              <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                Word of the Day
+              </Typography>
+              <Typography variant="h5" component="div">
+                be•nev•o•lent
+              </Typography>
+              <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                adjective
+              </Typography>
+              <Typography variant="body2">
+                well meaning and kindly.
+                <br />
+                {'"a benevolent smile"'}
+              </Typography>
+            </CardContent>
+            <CardActions>
+              <Button size="small">Learn More</Button>
+            </CardActions>
+          </Card>
+        </Stack>
+        <LinearProgress variant="determinate" value={50} sx={{ width: 250 }} />
+        <Link href="/" sx={{ maxWidth: 'fit-content' }}>
+          Link
+        </Link>
+        <Stack direction="row" gap={2} alignItems="center">
+          <IconButton size="small" onClick={handleClick} sx={{ maxWidth: 'fit-content' }}>
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            id="menu"
+            open={open}
+            onClose={handleClose}
+            onClick={handleClose}
+            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          >
+            <MenuItem onClick={handleClose}>Profile</MenuItem>
+            <MenuItem onClick={handleClose}>My account</MenuItem>
+            <Divider />
+            <MenuItem onClick={handleClose}>Add another account</MenuItem>
+            <MenuItem onClick={handleClose}>Settings</MenuItem>
+            <MenuItem onClick={handleClose}>Logout</MenuItem>
+          </Menu>
+          <CustomDatePicker />
+        </Stack>
+        <Stack direction="row" gap={2} alignItems="center">
+          <OutlinedInput placeholder="Outlined input" />
+          <OutlinedInput size="small" placeholder="Outlined input" />
+        </Stack>
+        <Stack direction="row" gap={2} alignItems="center">
+          <Box
+            sx={{
+              height: 250,
+              width: 250,
+              backgroundColor: 'background.default',
+              border: '1px dashed',
+              borderColor: 'divider',
+            }}
+          />
+          <Box
+            sx={{
+              height: 250,
+              width: 250,
+              backgroundColor: 'background.paper',
+              border: '1px dashed',
+              borderColor: 'divider',
+            }}
+          />
+        </Stack>
+        <Box sx={{ width: 'fit-content' }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+              <Tab label="Item One" {...a11yProps(0)} />
+              <Tab label="Item Two" {...a11yProps(1)} />
+              <Tab label="Item Three" {...a11yProps(2)} />
+            </Tabs>
+          </Box>
+          <CustomTabPanel value={value} index={0}>
+            Item One
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={1}>
+            Item Two
+          </CustomTabPanel>
+          <CustomTabPanel value={value} index={2}>
+            Item Three
+          </CustomTabPanel>
+        </Box>
+      </Container>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/pages/material-ui/api/avatar-group.json b/docs/pages/material-ui/api/avatar-group.json
index d25bd7c131ab78..5170bcb64cecc6 100644
--- a/docs/pages/material-ui/api/avatar-group.json
+++ b/docs/pages/material-ui/api/avatar-group.json
@@ -5,7 +5,8 @@
     "component": { "type": { "name": "elementType" } },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
-      "default": "{}"
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "max": { "type": { "name": "custom", "description": "number" }, "default": "5" },
     "renderSurplus": {
@@ -17,7 +18,14 @@
       }
     },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ additionalAvatar?: object, surplus?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ surplus?: elementType }" },
       "default": "{}"
     },
     "spacing": {
@@ -48,6 +56,7 @@
     "import AvatarGroup from '@mui/material/AvatarGroup';",
     "import { AvatarGroup } from '@mui/material';"
   ],
+  "slots": [{ "name": "surplus", "description": "", "class": null }],
   "classes": [
     {
       "key": "avatar",
@@ -65,7 +74,6 @@
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiAvatarGroup",
-  "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-material/src/AvatarGroup/AvatarGroup.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/material-ui/react-avatar/\">Avatar</a></li></ul>",
diff --git a/docs/pages/material-ui/api/filled-input.json b/docs/pages/material-ui/api/filled-input.json
index 0422d195c86877..fefcc0459a78d3 100644
--- a/docs/pages/material-ui/api/filled-input.json
+++ b/docs/pages/material-ui/api/filled-input.json
@@ -11,11 +11,15 @@
     },
     "components": {
       "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ input?: object, root?: object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
diff --git a/docs/pages/material-ui/api/grid.json b/docs/pages/material-ui/api/grid.json
index 8dbd29b88f0e47..eacdac14949355 100644
--- a/docs/pages/material-ui/api/grid.json
+++ b/docs/pages/material-ui/api/grid.json
@@ -71,7 +71,9 @@
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
       },
-      "default": "'wrap'"
+      "default": "'wrap'",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>flexWrap</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "xl": {
       "type": {
diff --git a/docs/pages/material-ui/api/hidden.json b/docs/pages/material-ui/api/hidden.json
index 2e4e13ea697f0e..9c0112eb0ff82b 100644
--- a/docs/pages/material-ui/api/hidden.json
+++ b/docs/pages/material-ui/api/hidden.json
@@ -40,5 +40,6 @@
   "filename": "/packages/mui-material/src/Hidden/Hidden.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/material-ui/react-hidden/\">Hidden</a></li></ul>",
-  "cssComponent": false
+  "cssComponent": false,
+  "deprecated": true
 }
diff --git a/docs/pages/material-ui/api/input-base.json b/docs/pages/material-ui/api/input-base.json
index fee9a4248d84a8..692496c28ce8d0 100644
--- a/docs/pages/material-ui/api/input-base.json
+++ b/docs/pages/material-ui/api/input-base.json
@@ -11,11 +11,15 @@
     },
     "components": {
       "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ input?: object, root?: object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
diff --git a/docs/pages/material-ui/api/input.json b/docs/pages/material-ui/api/input.json
index 79a1bcd9305cb5..8d1dfb0c94ff05 100644
--- a/docs/pages/material-ui/api/input.json
+++ b/docs/pages/material-ui/api/input.json
@@ -11,11 +11,15 @@
     },
     "components": {
       "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ input?: object, root?: object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
diff --git a/docs/pages/material-ui/api/list-item-secondary-action.json b/docs/pages/material-ui/api/list-item-secondary-action.json
index 9179bdd88d9224..e46ec7a4249ddc 100644
--- a/docs/pages/material-ui/api/list-item-secondary-action.json
+++ b/docs/pages/material-ui/api/list-item-secondary-action.json
@@ -36,5 +36,6 @@
   "filename": "/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/material-ui/react-list/\">Lists</a></li></ul>",
-  "cssComponent": false
+  "cssComponent": false,
+  "deprecated": true
 }
diff --git a/docs/pages/material-ui/api/list-item.json b/docs/pages/material-ui/api/list-item.json
index d9de1313fd03c9..f9f795a1e09b04 100644
--- a/docs/pages/material-ui/api/list-item.json
+++ b/docs/pages/material-ui/api/list-item.json
@@ -21,18 +21,28 @@
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use the <code>slots</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ root?: object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use the <code>slotProps</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "ContainerComponent": {
       "type": { "name": "custom", "description": "element type" },
       "default": "'li'",
-      "deprecated": true
+      "deprecated": true,
+      "deprecationInfo": "Use the <code>component</code> or <code>slots.root</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "ContainerProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use the <code>slotProps.root</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
-    "ContainerProps": { "type": { "name": "object" }, "default": "{}", "deprecated": true },
     "dense": { "type": { "name": "bool" }, "default": "false" },
     "disabled": {
       "type": { "name": "bool" },
diff --git a/docs/pages/material-ui/api/outlined-input.json b/docs/pages/material-ui/api/outlined-input.json
index 0861c24ab65b0f..73efeefa0d9e74 100644
--- a/docs/pages/material-ui/api/outlined-input.json
+++ b/docs/pages/material-ui/api/outlined-input.json
@@ -11,7 +11,9 @@
     },
     "components": {
       "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
diff --git a/docs/pages/material-ui/api/popper.json b/docs/pages/material-ui/api/popper.json
index 06f2880cdc5b9e..94c41b76c2bb8f 100644
--- a/docs/pages/material-ui/api/popper.json
+++ b/docs/pages/material-ui/api/popper.json
@@ -11,11 +11,15 @@
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disablePortal": { "type": { "name": "bool" }, "default": "false" },
diff --git a/docs/pages/material-ui/api/tooltip.json b/docs/pages/material-ui/api/tooltip.json
index bf857d230f1b75..da38990cf9ce1d 100644
--- a/docs/pages/material-ui/api/tooltip.json
+++ b/docs/pages/material-ui/api/tooltip.json
@@ -8,14 +8,18 @@
         "name": "shape",
         "description": "{ Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "componentsProps": {
       "type": {
         "name": "shape",
         "description": "{ arrow?: object, popper?: object, tooltip?: object, transition?: object }"
       },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "describeChild": { "type": { "name": "bool" }, "default": "false" },
     "disableFocusListener": { "type": { "name": "bool" }, "default": "false" },
diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/usage.js b/docs/pages/material-ui/customization/css-theme-variables/configuration.js
similarity index 74%
rename from docs/pages/material-ui/experimental-api/css-theme-variables/usage.js
rename to docs/pages/material-ui/customization/css-theme-variables/configuration.js
index 497c44f45569f2..e4641afb30117a 100644
--- a/docs/pages/material-ui/experimental-api/css-theme-variables/usage.js
+++ b/docs/pages/material-ui/customization/css-theme-variables/configuration.js
@@ -4,7 +4,7 @@ import {
   demos,
   docs,
   demoComponents,
-} from 'docs/data/material/experimental-api/css-theme-variables/usage/usage.md?muiMarkdown';
+} from 'docs/data/material/customization/css-theme-variables/configuration.md?muiMarkdown';
 
 export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/overview.js b/docs/pages/material-ui/customization/css-theme-variables/overview.js
similarity index 74%
rename from docs/pages/material-ui/experimental-api/css-theme-variables/overview.js
rename to docs/pages/material-ui/customization/css-theme-variables/overview.js
index 4eeebce4de29b6..0c73e3264aa8a0 100644
--- a/docs/pages/material-ui/experimental-api/css-theme-variables/overview.js
+++ b/docs/pages/material-ui/customization/css-theme-variables/overview.js
@@ -4,7 +4,7 @@ import {
   demos,
   docs,
   demoComponents,
-} from 'docs/data/material/experimental-api/css-theme-variables/overview.md?muiMarkdown';
+} from 'docs/data/material/customization/css-theme-variables/overview.md?muiMarkdown';
 
 export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/migration.js b/docs/pages/material-ui/customization/css-theme-variables/usage.js
similarity index 74%
rename from docs/pages/material-ui/experimental-api/css-theme-variables/migration.js
rename to docs/pages/material-ui/customization/css-theme-variables/usage.js
index a196acdc43008c..8b2ce0b00358ef 100644
--- a/docs/pages/material-ui/experimental-api/css-theme-variables/migration.js
+++ b/docs/pages/material-ui/customization/css-theme-variables/usage.js
@@ -4,7 +4,7 @@ import {
   demos,
   docs,
   demoComponents,
-} from 'docs/data/material/experimental-api/css-theme-variables/migration.md?muiMarkdown';
+} from 'docs/data/material/customization/css-theme-variables/usage/usage.md?muiMarkdown';
 
 export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
diff --git a/docs/pages/material-ui/discover-more/design-kits.js b/docs/pages/material-ui/discover-more/design-kits.js
deleted file mode 100644
index 61f8faebcc7007..00000000000000
--- a/docs/pages/material-ui/discover-more/design-kits.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/material/discover-more/design-kits/design-kits.md?muiMarkdown';
-
-export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
-}
diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/customization.js b/docs/pages/material-ui/migration/migration-css-theme-variables.js
similarity index 73%
rename from docs/pages/material-ui/experimental-api/css-theme-variables/customization.js
rename to docs/pages/material-ui/migration/migration-css-theme-variables.js
index 53d9eec8396886..83ceb99d825d1e 100644
--- a/docs/pages/material-ui/experimental-api/css-theme-variables/customization.js
+++ b/docs/pages/material-ui/migration/migration-css-theme-variables.js
@@ -4,7 +4,7 @@ import {
   demos,
   docs,
   demoComponents,
-} from 'docs/data/material/experimental-api/css-theme-variables/customization.md?muiMarkdown';
+} from 'docs/data/material/migration/migration-v5/migration-css-theme-variables.md?muiMarkdown';
 
 export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
diff --git a/docs/public/_redirects b/docs/public/_redirects
index fe5b414f634110..0238ec6ee87a7d 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -508,6 +508,10 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
 /material-ui/guides/right-to-left/ /material-ui/customization/right-to-left/ 301
 /material-ui/guides/pickers-migration/ /material-ui/migration/pickers-migration/ 301
 /material-ui/guides/styled-components/ /material-ui/integrations/styled-components/ 301
+/material-ui/experimental-api/css-theme-variables/migration/ /material-ui/migration/migration-css-theme-variables/ 301
+/material-ui/experimental-api/css-theme-variables/overview/ /material-ui/customization/css-theme-variables/overview/ 301
+/material-ui/experimental-api/css-theme-variables/usage/ /material-ui/customization/css-theme-variables/usage/ 301
+/material-ui/experimental-api/css-theme-variables/customization/ /material-ui/customization/css-theme-variables/configuration/ 301
 
 # Proxies
 
diff --git a/docs/public/static/branding/about/nikita-ossei.png b/docs/public/static/branding/about/nikita-ossei.png
new file mode 100644
index 00000000000000..efc26faffa1ecc
Binary files /dev/null and b/docs/public/static/branding/about/nikita-ossei.png differ
diff --git a/docs/public/static/branding/mui-x/Mocktable-dark.png b/docs/public/static/branding/mui-x/Mocktable-dark.png
deleted file mode 100644
index c694b7fe68f7b0..00000000000000
Binary files a/docs/public/static/branding/mui-x/Mocktable-dark.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/Mocktable-light.png b/docs/public/static/branding/mui-x/Mocktable-light.png
deleted file mode 100644
index 486b70d8b7b86c..00000000000000
Binary files a/docs/public/static/branding/mui-x/Mocktable-light.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/card.png b/docs/public/static/branding/mui-x/card.png
deleted file mode 100644
index 3f2f963681c61e..00000000000000
Binary files a/docs/public/static/branding/mui-x/card.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-dark1.png b/docs/public/static/branding/mui-x/chart-dark1.png
deleted file mode 100644
index 20546632336f4e..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-dark1.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-dark2.png b/docs/public/static/branding/mui-x/chart-dark2.png
deleted file mode 100644
index 86a71206c342d1..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-dark2.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-dark3.png b/docs/public/static/branding/mui-x/chart-dark3.png
deleted file mode 100644
index 59e2f0f41bd1f0..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-dark3.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-dark4.png b/docs/public/static/branding/mui-x/chart-dark4.png
deleted file mode 100644
index cfa52eefa07c7e..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-dark4.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-light1.png b/docs/public/static/branding/mui-x/chart-light1.png
deleted file mode 100644
index 4ba600e7960d35..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-light1.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-light2.png b/docs/public/static/branding/mui-x/chart-light2.png
deleted file mode 100644
index 5e6046d56e6171..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-light2.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-light3.png b/docs/public/static/branding/mui-x/chart-light3.png
deleted file mode 100644
index 3ffb622496cdf4..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-light3.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/chart-light4.png b/docs/public/static/branding/mui-x/chart-light4.png
deleted file mode 100644
index ee0074033faed7..00000000000000
Binary files a/docs/public/static/branding/mui-x/chart-light4.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/sparkline-dark1.png b/docs/public/static/branding/mui-x/sparkline-dark1.png
deleted file mode 100644
index d1dce2120aefd8..00000000000000
Binary files a/docs/public/static/branding/mui-x/sparkline-dark1.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/sparkline-dark2.png b/docs/public/static/branding/mui-x/sparkline-dark2.png
deleted file mode 100644
index 02032bde731dd6..00000000000000
Binary files a/docs/public/static/branding/mui-x/sparkline-dark2.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/sparkline-light1.png b/docs/public/static/branding/mui-x/sparkline-light1.png
deleted file mode 100644
index 19bb11632260c3..00000000000000
Binary files a/docs/public/static/branding/mui-x/sparkline-light1.png and /dev/null differ
diff --git a/docs/public/static/branding/mui-x/sparkline-light2.png b/docs/public/static/branding/mui-x/sparkline-light2.png
deleted file mode 100644
index 381fc8fa041a68..00000000000000
Binary files a/docs/public/static/branding/mui-x/sparkline-light2.png and /dev/null differ
diff --git a/docs/public/static/images/avatar/1-sm.jpeg b/docs/public/static/images/avatar/1-sm.jpeg
deleted file mode 100644
index 93e9670dd12104..00000000000000
Binary files a/docs/public/static/images/avatar/1-sm.jpeg and /dev/null differ
diff --git a/docs/public/static/images/avatar/3-sm.jpeg b/docs/public/static/images/avatar/3-sm.jpeg
deleted file mode 100644
index 708f9e7c340ecc..00000000000000
Binary files a/docs/public/static/images/avatar/3-sm.jpeg and /dev/null differ
diff --git a/docs/public/static/images/download-adobe-xd.svg b/docs/public/static/images/download-adobe-xd.svg
deleted file mode 100644
index 4b4f1892a23ec1..00000000000000
--- a/docs/public/static/images/download-adobe-xd.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" height="68" width="69" xmlns="http://www.w3.org/2000/svg"><mask id="a" height="11" maskUnits="userSpaceOnUse" width="11" x="52" y="51"><path d="M62.5 56.5l-.9-.9-3.5 3.5v-7.6H57v7.6l-3.5-3.5-.9.9 5 5z" fill="#fff"/></mask><path d="M12.7 2h35.4c5.4 0 9.7 4.4 9.7 9.8v34.4c0 5.4-4.3 9.8-9.7 9.8H12.7A9.8 9.8 0 013 46.2V11.8C3 6.4 7.3 2 12.7 2z" fill="#470137"/><path d="M31.8 16.5L25 27.9l7.4 12v.4h-5.5c-.4 0-.6 0-.8-.2l-1.4-3-1.6-2.8-1.6-3-1.6 3-1.6 2.9-1.6 2.9c0 .2-.2.3-.5.3h-5l-.2-.1V40l7.2-11.7-7-11.8v-.3h5.7a43.2 43.2 0 001.7 3.2l1.7 2.9 1.5 3 1.6-3 1.5-3 1.6-2.9.1-.2h5.1l.3.1v.2zm10.6 24.3c-1.7 0-3.4-.3-5-1a8 8 0 01-3.4-3.2 10 10 0 01-1.2-5.2 9.5 9.5 0 014.9-8.5 11.7 11.7 0 016.3-1.3h.7v-7.2c0-.2 0-.3.2-.3h4.6c.2 0 .2.1.3.2v23.3L50 39c0 .2 0 .3-.2.4a18 18 0 01-7.3 1.4zm2.3-4.6V26H44l-.7-.1c-1 0-1.8.2-2.6.6-.8.4-1.5 1-2 1.7s-.7 1.7-.7 3c0 .7.1 1.5.4 2.3A4 4 0 0041 36a6 6 0 001.9.3h1a2 2 0 00.8-.1z" fill="#ff61f6"/><circle cx="57.5" cy="56.5" fill="#1976d2" r="11.5"/><g mask="url(#a)"><path d="M50 49h15v15H50z" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/docs/public/static/images/download-figma.svg b/docs/public/static/images/download-figma.svg
deleted file mode 100644
index 02948cca319cd0..00000000000000
--- a/docs/public/static/images/download-figma.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="46" height="68" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M12.5 7.5l-.9-.9-3.5 3.5V2.5H7v7.6L3.4 6.6l-.9.9 5 5z"/></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M11.5 68C17.8 68 23 62.8 23 56.5V45H11.5a11.5 11.5 0 000 23z" fill="#0ACF83"/><path d="M0 33.5C0 27.2 5.2 22 11.5 22H23v23H11.5C5.2 45 0 39.8 0 33.5z" fill="#A259FF"/><path d="M0 11.5C0 5.2 5.2 0 11.5 0H23v23H11.5C5.2 23 0 17.8 0 11.5z" fill="#F24E1E"/><path d="M23 0h11.5a11.5 11.5 0 010 23H23V0z" fill="#FF7262"/><path d="M46 33.5a11.5 11.5 0 11-23 0 11.5 11.5 0 0123 0z" fill="#1ABCFE"/></g><g transform="translate(23 45)"><circle fill="#1976D2" cx="11.5" cy="11.5" r="11.5"/><g transform="translate(4 4)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)" fill="#FFF"><path d="M0 0h15v15H0z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/public/static/images/download-sketch.svg b/docs/public/static/images/download-sketch.svg
deleted file mode 100644
index bf9aefdfb9c95f..00000000000000
--- a/docs/public/static/images/download-sketch.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="73" height="68" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M12.5 7.5l-.88-.88-3.5 3.49V2.5H6.88v7.6l-3.5-3.49-.88.89 5 5z"/></defs><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path fill="#FDB300" d="M15.93 2.14L36.5 0l20.57 2.14L73 23.18 36.5 65 0 23.18z"/><path fill="#EA6C00" d="M14.75 24l21.68 40.99L0 24zM58.1 24L36.43 64.99 72.85 24z"/><path fill="#FDAD00" d="M14.75 24H58.1L36.43 64.99z"/><g><path fill="#FDD231" d="M36.43 0L15.9 2.21l-1.15 21.77zM36.43 0l20.53 2.21 1.14 21.77z"/><path fill="#FDAD00" d="M72.85 23.98L56.95 2.2l1.15 21.77zM0 23.98L15.9 2.2l-1.15 21.77z"/><path fill="#FEEEB7" d="M36.43 0L14.75 23.98H58.1z"/></g></g><circle cx="11.5" cy="11.5" r="11.5" transform="translate(50 45)" fill="#1976D2"/><g transform="translate(54 49)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)" fill="#FFF"><path d="M0 0h15v15H0z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/public/static/images/packages/mui-packages.png b/docs/public/static/images/packages/mui-packages.png
deleted file mode 100644
index 86e549189acccd..00000000000000
Binary files a/docs/public/static/images/packages/mui-packages.png and /dev/null differ
diff --git a/docs/public/static/images/packages/mui-system.png b/docs/public/static/images/packages/mui-system.png
deleted file mode 100644
index d27e7bf2445946..00000000000000
Binary files a/docs/public/static/images/packages/mui-system.png and /dev/null differ
diff --git a/docs/public/static/images/survey/table-contents-banner.png b/docs/public/static/images/survey/table-contents-banner.png
deleted file mode 100644
index f9bb6c1fe36e8f..00000000000000
Binary files a/docs/public/static/images/survey/table-contents-banner.png and /dev/null differ
diff --git a/docs/public/static/images/templates/dashboard-dark.png b/docs/public/static/images/templates/dashboard-dark.png
index 42984725db85dc..5caee83f9c31a3 100644
Binary files a/docs/public/static/images/templates/dashboard-dark.png and b/docs/public/static/images/templates/dashboard-dark.png differ
diff --git a/docs/public/static/images/templates/dashboard-light.png b/docs/public/static/images/templates/dashboard-light.png
index e93b5e52c57954..721390ed90afe6 100644
Binary files a/docs/public/static/images/templates/dashboard-light.png and b/docs/public/static/images/templates/dashboard-light.png differ
diff --git a/docs/public/static/images/themes-dark.jpg b/docs/public/static/images/themes-dark.jpg
deleted file mode 100644
index d68d2ae9a0c481..00000000000000
Binary files a/docs/public/static/images/themes-dark.jpg and /dev/null differ
diff --git a/docs/public/static/images/themes-light.jpg b/docs/public/static/images/themes-light.jpg
deleted file mode 100644
index 5361d25cc7223d..00000000000000
Binary files a/docs/public/static/images/themes-light.jpg and /dev/null differ
diff --git a/docs/public/static/themes/onepirate.jpg b/docs/public/static/themes/onepirate.jpg
deleted file mode 100644
index 3886affc8c9e1f..00000000000000
Binary files a/docs/public/static/themes/onepirate.jpg and /dev/null differ
diff --git a/docs/public/static/themes/paperbase.png b/docs/public/static/themes/paperbase.png
deleted file mode 100644
index 0544363a22ab8e..00000000000000
Binary files a/docs/public/static/themes/paperbase.png and /dev/null differ
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
index 6cd467f1c10f9d..06b7a6197a67fc 100644
--- a/docs/src/BrandingCssVarsProvider.tsx
+++ b/docs/src/BrandingCssVarsProvider.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { deepmerge } from '@mui/utils';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-  PaletteColorOptions,
-} from '@mui/material/styles';
+import { CssVarsProvider, extendTheme, PaletteColorOptions } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx
index 128763cae41126..880347d3782e78 100644
--- a/docs/src/components/about/HowToSupport.tsx
+++ b/docs/src/components/about/HowToSupport.tsx
@@ -21,7 +21,7 @@ function Widget({
 }: {
   children: React.ReactNode;
   title: string;
-  icon: React.ReactElement;
+  icon: React.ReactElement<any>;
 }) {
   return (
     <Paper
diff --git a/docs/src/components/action/MuiLogoMenu.tsx b/docs/src/components/action/MuiLogoMenu.tsx
new file mode 100644
index 00000000000000..8c1f0f2a02cace
--- /dev/null
+++ b/docs/src/components/action/MuiLogoMenu.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import copy from 'clipboard-copy';
+import { Link } from '@mui/docs/Link';
+import { Portal } from '@mui/base/Portal';
+import Box from '@mui/material/Box';
+import Snackbar from '@mui/material/Snackbar';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Slide from '@mui/material/Slide';
+import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
+import TextFieldsRoundedIcon from '@mui/icons-material/TextFieldsRounded';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+
+const logoSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#0073E6" fill-rule="evenodd" d="M24 5.601V1.592a.344.344 0 0 0-.514-.298l-2.64 1.508a.688.688 0 0 0-.346.597v4.009c0 .264.285.43.514.298l2.64-1.508A.688.688 0 0 0 24 5.6ZM.515 1.295l7.643 4.383a.688.688 0 0 0 .684 0l7.643-4.383a.344.344 0 0 1 .515.298v12.03c0 .235-.12.453-.319.58l-4.65 2.953 3.11 1.832c.22.13.495.127.713-.009l4.61-2.878a.344.344 0 0 0 .161-.292v-4.085c0-.254.14-.486.362-.606l2.507-1.346a.344.344 0 0 1 .506.303v7.531c0 .244-.13.47-.34.593l-7.834 4.592a.688.688 0 0 1-.71-.009l-5.953-3.681A.344.344 0 0 1 9 18.808v-3.624c0-.115.057-.222.153-.286l4.04-2.694a.688.688 0 0 0 .307-.572v-4.39a.137.137 0 0 0-.208-.117l-4.44 2.664a.688.688 0 0 1-.705.002L3.645 7.123a.138.138 0 0 0-.208.118v7.933a.344.344 0 0 1-.52.295L.5 14.019C.19 13.833 0 13.497 0 13.135V1.593c0-.264.286-.43.515-.298Z" clip-rule="evenodd"/></svg>`;
+
+const logoWordmarkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="115" height="37" fill="none"><path fill="#0073E6" d="M11.995 12.023.753 5.441A.5.5 0 0 0 0 5.872v16.779a1.5 1.5 0 0 0 .728 1.286l3.515 2.109a.5.5 0 0 0 .757-.43v-11.27a.2.2 0 0 1 .3-.173l6.7 3.86a1 1 0 0 0 1 0l6.7-3.862a.2.2 0 0 1 .3.173v6.096a1 1 0 0 1-.477.853l-6.284 3.856a.5.5 0 0 0-.239.426v5.637a.5.5 0 0 0 .25.432l8.74 5.06a1 1 0 0 0 1.015-.007l11.51-6.906a1 1 0 0 0 .485-.857v-11.05a.5.5 0 0 0-.757-.43l-3.758 2.255a1 1 0 0 0-.485.857v5.65a.5.5 0 0 1-.243.43l-6.786 4.072a1 1 0 0 1-.962.037L17.5 28.5l7.015-4.209a1 1 0 0 0 .485-.857V5.872a.5.5 0 0 0-.753-.431l-11.242 6.582a1 1 0 0 1-1.01 0Z"/><path fill="#0073E6" d="M35 5.883v5.55a1 1 0 0 1-.486.858l-3.757 2.255a.5.5 0 0 1-.757-.43v-5.55a1 1 0 0 1 .485-.857l3.758-2.255a.5.5 0 0 1 .757.43Z"/><path fill="#090B0B" d="M50.38 28V9.8h4.498l7.566 10.504-3.328-.026L66.708 9.8h4.446V28h-4.966v-5.018c0-1.49.035-2.86.104-4.108.07-1.265.208-2.54.416-3.822l.52 1.612-5.642 7.28H59.87l-5.616-7.358.572-1.534a34.34 34.34 0 0 1 .416 3.744c.07 1.248.104 2.643.104 4.186V28H50.38Zm34.881.156c-1.768 0-3.336-.347-4.706-1.04-1.352-.693-2.409-1.655-3.172-2.886-.745-1.23-1.118-2.626-1.118-4.186V9.8h5.2v10.088c0 .763.165 1.43.494 2.002a3.43 3.43 0 0 0 1.352 1.326c.572.312 1.222.468 1.95.468.763 0 1.44-.156 2.028-.468a3.347 3.347 0 0 0 1.404-1.326c.347-.572.52-1.24.52-2.002V9.8h5.044v10.244c0 1.56-.38 2.955-1.144 4.186-.745 1.23-1.794 2.193-3.146 2.886-1.334.693-2.903 1.04-4.706 1.04ZM99.672 28v-4.316h4.186v-9.568h-4.186V9.8h13.494v4.316h-4.16v9.568h4.16V28H99.672Z"/></svg>`;
+
+interface MuiLogoMenuProps {
+  marginLeft?: boolean;
+  smallerMargin?: boolean;
+}
+
+export default function MuiLogoMenu({ smallerMargin, marginLeft }: MuiLogoMenuProps) {
+  const [contextMenu, setContextMenu] = React.useState<{
+    mouseX: number;
+    mouseY: number;
+  } | null>(null);
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenu(
+      contextMenu === null
+        ? {
+            mouseX: event.clientX + 8,
+            mouseY: event.clientY - 8,
+          }
+        : null,
+    );
+  };
+
+  const handleClose = () => {
+    setContextMenu(null);
+  };
+
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = (svgSnippet: string) => {
+    setCopied(true);
+    copy(svgSnippet).then(() => {
+      setTimeout(() => setCopied(false), 3500);
+      handleClose();
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <Box
+        component={Link}
+        href="/"
+        aria-label="Go to homepage"
+        onContextMenu={handleContextMenu}
+        sx={{
+          '& > svg': { m: '0 !important' }, // override the 2px margin-left coming from the Link component
+          mr: smallerMargin ? 1 : 1.5,
+          ml: marginLeft ? 1.5 : undefined,
+          cursor: 'default',
+        }}
+      >
+        <SvgMuiLogomark height={28} width={28} />
+      </Box>
+      <Menu
+        open={contextMenu !== null}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined
+        }
+        sx={(theme) => ({
+          '& .MuiMenuItem-root': {
+            '& * path, .MuiSvgIcon-root': {
+              fill: (theme.vars || theme).palette.text.tertiary,
+              color: (theme.vars || theme).palette.text.tertiary,
+            },
+            '&:hover, &:focus-visible': {
+              '& * path, .MuiSvgIcon-root': {
+                fill: (theme.vars || theme).palette.text.primary,
+                color: (theme.vars || theme).palette.text.primary,
+              },
+            },
+          },
+        })}
+      >
+        <MenuItem onClick={() => handleCopy(logoSvg)}>
+          <SvgMuiLogomark height={16} width={18} sx={{ mr: 1 }} />
+          Copy logo as SVG
+        </MenuItem>
+        <MenuItem onClick={() => handleCopy(logoWordmarkSvg)}>
+          <TextFieldsRoundedIcon sx={{ fontSize: '18px', mr: 1 }} />
+          Copy wordmark as SVG
+        </MenuItem>
+      </Menu>
+      <Portal container={() => document.body}>
+        <Snackbar
+          open={copied}
+          onClose={handleClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          TransitionComponent={Slide}
+          message={
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <CheckCircleRoundedIcon sx={{ fontSize: '18px', color: 'success.main' }} />
+              Logo SVG copied to clipboard!
+            </Box>
+          }
+        />
+      </Portal>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index 8e9eea208c0573..840ee3330149d0 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/docs/src/components/action/StylingInfo.tsx
@@ -12,7 +12,7 @@ export default function StylingInfo({
   appeared,
   stylingContent,
   ...props
-}: { appeared: boolean; stylingContent?: React.ReactElement } & BoxProps) {
+}: { appeared: boolean; stylingContent?: React.ReactElement<any> } & BoxProps) {
   const [hidden, setHidden] = React.useState(false);
   const defaultContent = (
     <React.Fragment>
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index a2c3f3fadff065..f135aa52fb9138 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -75,12 +75,12 @@ const PRODUCT_IDS = [
 ];
 
 type ProductSubMenuProps = {
-  icon: React.ReactElement;
+  icon: React.ReactElement<any>;
   name: React.ReactNode;
   description: React.ReactNode;
   chip?: React.ReactNode;
   href: string;
-} & Omit<JSX.IntrinsicElements['a'], 'ref'>;
+} & Omit<React.JSX.IntrinsicElements['a'], 'ref'>;
 
 const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
   function ProductSubMenu({ icon, name, description, chip, href, ...props }, ref) {
diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx
index fda2d61676d99d..05bfa95bb8ea14 100644
--- a/docs/src/components/header/ThemeModeToggle.tsx
+++ b/docs/src/components/header/ThemeModeToggle.tsx
@@ -14,6 +14,7 @@ function CssVarsModeToggle(props: { onChange: (newMode: string) => void }) {
     <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
       <IconButton
         color="primary"
+        size="small"
         disableTouchRipple
         disabled={!calculatedMode}
         onClick={() => {
@@ -51,6 +52,7 @@ export default function ThemeModeToggle() {
       <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
         <IconButton
           color="primary"
+          size="small"
           disableTouchRipple
           onClick={() => {
             setMode(calculatedMode === 'dark' ? 'light' : 'dark');
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index c83c844faec8c4..890441d426fe9d 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -4,8 +4,8 @@ import {
   Theme,
   ThemeOptions,
   alpha,
-  experimental_extendTheme as extendTheme,
-  Experimental_CssVarsProvider as CssVarsProvider,
+  extendTheme,
+  CssVarsProvider,
 } from '@mui/material/styles';
 import { capitalize } from '@mui/material/utils';
 import Alert from '@mui/material/Alert';
@@ -125,7 +125,7 @@ function Demo({
 }: {
   name: string;
   theme: Theme | undefined;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   control?: { prop: string; values: Array<string>; defaultValue?: string };
 }) {
   const [propValue, setPropValue] = React.useState(
diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx
index b71858367e3545..3c074746c06428 100644
--- a/docs/src/components/home/StoreTemplatesBanner.tsx
+++ b/docs/src/components/home/StoreTemplatesBanner.tsx
@@ -100,7 +100,7 @@ const StoreTemplateLink = React.forwardRef<
 
 const StoreTemplateImage = React.forwardRef<
   HTMLImageElement,
-  { brand: TemplateBrand } & Omit<JSX.IntrinsicElements['img'], 'ref'>
+  { brand: TemplateBrand } & Omit<React.JSX.IntrinsicElements['img'], 'ref'>
 >(function StoreTemplateImage({ brand, ...props }, ref) {
   return (
     <Image
diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx
index bd04831748ecbe..5f9786f3d08b66 100644
--- a/docs/src/components/home/UserFeedbacks.tsx
+++ b/docs/src/components/home/UserFeedbacks.tsx
@@ -95,7 +95,7 @@ function Feedback({
     avatarSrcSet: string;
     name: string;
     role: string;
-    company?: React.ReactElement;
+    company?: React.ReactElement<any>;
   };
 }) {
   return (
diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
index 0e6c75d91ed790..1b6809d16d98cf 100644
--- a/docs/src/components/icon/IconImage.tsx
+++ b/docs/src/components/icon/IconImage.tsx
@@ -40,7 +40,7 @@ export type IconImageProps = {
   mode?: '' | 'light' | 'dark';
   sx?: SxProps<Theme>;
   width?: number;
-} & Omit<JSX.IntrinsicElements['img'], 'ref'>;
+} & Omit<React.JSX.IntrinsicElements['img'], 'ref'>;
 
 const Img = styled('img')({ display: 'inline-block', verticalAlign: 'bottom' });
 
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index c342fed6910a1e..bfb7cbff5b33ea 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -382,7 +382,11 @@ function Cell({ highlighted = false, ...props }: BoxProps & { highlighted?: bool
   );
 }
 
-function RowHead({ children, startIcon, ...props }: BoxProps & { startIcon?: React.ReactElement }) {
+function RowHead({
+  children,
+  startIcon,
+  ...props
+}: BoxProps & { startIcon?: React.ReactElement<any> }) {
   return (
     <Box
       {...props}
diff --git a/docs/src/components/productBaseUI/components/BaseInputDemo.tsx b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
index 0e29c4cf49ec7b..fff67918856815 100644
--- a/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
+++ b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
@@ -95,19 +95,20 @@ const CSS = `.base-Input-root {${fieldStyles}}
 
 .base-Input-input {${inputStyles}}`;
 
-const StyledFloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
-  function StyledFloatingLabelInput(props, ref) {
-    const id = unstable_useId(props.id);
-    return (
-      <React.Fragment>
-        <StyledInput ref={ref} {...props} id={id} />
-        <label htmlFor={id}>Floating label</label>
-      </React.Fragment>
-    );
-  },
-);
+const StyledFloatingLabelInput = React.forwardRef<
+  HTMLInputElement,
+  React.JSX.IntrinsicElements['input']
+>(function StyledFloatingLabelInput(props, ref) {
+  const id = unstable_useId(props.id);
+  return (
+    <React.Fragment>
+      <StyledInput ref={ref} {...props} id={id} />
+      <label htmlFor={id}>Floating label</label>
+    </React.Fragment>
+  );
+});
 
-const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
+const FloatingLabelInput = React.forwardRef<HTMLInputElement, React.JSX.IntrinsicElements['input']>(
   function FloatingLabelInput(props, ref) {
     const id = unstable_useId(props.id);
     return (
@@ -121,7 +122,7 @@ const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicEleme
 
 const TailwindFloatingLabelInput = React.forwardRef<
   HTMLInputElement,
-  JSX.IntrinsicElements['input']
+  React.JSX.IntrinsicElements['input']
   // @ts-ignore
 >(function TailwindFloatingLabelInput({ ownerState, ...props }, ref) {
   const id = unstable_useId(props.id);
@@ -192,7 +193,7 @@ const Field = styled('div')\`${fieldStyles}\`;
 const StyledInput = styled('input')\`${inputStyles}/\`;
 
 const FloatingLabelInput = React.forwardRef<
-  HTMLInputElement, JSX.IntrinsicElements['input']
+  HTMLInputElement, React.JSX.IntrinsicElements['input']
 >(
   function FloatingLabelInput(props, ref) {
     const id = unstable_useId(props.id);
@@ -219,7 +220,7 @@ const FloatingLabelInput = React.forwardRef<
 import './styles.css';
 
 const FloatingLabelInput = React.forwardRef<
-  HTMLInputElement, JSX.IntrinsicElements['input']
+  HTMLInputElement, React.JSX.IntrinsicElements['input']
 >(
   function FloatingLabelInput(props, ref) {
     const id = unstable_useId(props.id);
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 08dd1449262faf..ec9be48156e150 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Experimental_CssVarsProvider as CssVarsProvider, alpha } from '@mui/material/styles';
+import { CssVarsProvider, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
 import Button, { buttonClasses } from '@mui/material/Button';
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index dd37121529358d..803fa87c9b345f 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  experimental_extendTheme as extendTheme,
-  Experimental_CssVarsProvider as CssVarsProvider,
-} from '@mui/material/styles';
+import { extendTheme, CssVarsProvider } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index a0c3560bbaebf1..abab393a9a15d9 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
+import { CssVarsProvider } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import Typography from '@mui/material/Typography';
 import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded';
diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx
index fc3803d400f5aa..a396a0f934fc1e 100644
--- a/docs/src/components/productX/XRoadmap.tsx
+++ b/docs/src/components/productX/XRoadmap.tsx
@@ -41,7 +41,7 @@ function RoadmapStatusDot({ color }: RoadmapStatusDotProps) {
 }
 
 export default function XRoadmap() {
-  function renderList(content: React.ReactElement, nested?: boolean) {
+  function renderList(content: React.ReactElement<any>, nested?: boolean) {
     return (
       <Box
         sx={{
diff --git a/docs/src/components/productX/XSparklineDemo.tsx b/docs/src/components/productX/XSparklineDemo.tsx
deleted file mode 100644
index 10fa632bf81984..00000000000000
--- a/docs/src/components/productX/XSparklineDemo.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import Chip from '@mui/material/Chip';
-import { styled } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
-import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
-import Frame from 'docs/src/components/action/Frame';
-
-const AspectRatioImage = styled('div', {
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
-})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
-  height: 0,
-  backgroundImage: `url(${src})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'contain',
-  paddingBottom: `${(1 / ratio) * 100}%`,
-  margin: 'auto',
-  ...theme.applyDarkStyles({
-    backgroundImage: `url(${src.replace('-light', '-dark')})`,
-  }),
-}));
-
-export default function XSparklineDemo() {
-  return (
-    <Box sx={{ height: '100%' }}>
-      <Frame sx={{ height: '100%' }}>
-        <Frame.Demo sx={{ p: 2, flexGrow: 1 }}>
-          <Grid container justifyContent="space-around" spacing={1}>
-            <Grid item xs={6}>
-              <Box sx={{ maxWidth: 200, ml: 'auto' }}>
-                <AspectRatioImage
-                  src="/static/branding/mui-x/sparkline-light1.png"
-                  ratio={211 / 220}
-                />
-              </Box>
-            </Grid>
-            <Grid item xs={6}>
-              <Box sx={{ maxWidth: 200, mr: 'auto' }}>
-                <AspectRatioImage
-                  src="/static/branding/mui-x/sparkline-light2.png"
-                  ratio={211 / 220}
-                />
-              </Box>
-            </Grid>
-          </Grid>
-        </Frame.Demo>
-        <Frame.Info data-mui-color-scheme="dark">
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              lineHeight: 1,
-              mb: 0.5,
-            }}
-          >
-            <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
-              Coming soon!
-            </Typography>
-            <Chip variant="outlined" label="PNG Preview" size="small" sx={{ fontWeight: 500 }} />
-          </Box>
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-            Subscribe to our newsletter to get first-hand info about the development and release of
-            new components.
-          </Typography>
-          <EmailSubscribe />
-        </Frame.Info>
-      </Frame>
-    </Box>
-  );
-}
diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx
index 62f34c9db157a3..bd9562419fa549 100644
--- a/docs/src/components/productX/XTheming.tsx
+++ b/docs/src/components/productX/XTheming.tsx
@@ -6,7 +6,7 @@ import {
   GridRenderEditCellParams,
 } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
+import { CssVarsProvider } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 import Grid from '@mui/material/Unstable_Grid2';
 import Typography from '@mui/material/Typography';
diff --git a/docs/src/components/showcase/NotificationCard.tsx b/docs/src/components/showcase/NotificationCard.tsx
index ab0f3097c1b409..ca926101b20191 100644
--- a/docs/src/components/showcase/NotificationCard.tsx
+++ b/docs/src/components/showcase/NotificationCard.tsx
@@ -42,7 +42,7 @@ export default function NotificationCard() {
         >
           <Avatar
             slotProps={{ img: { 'aria-labelledby': 'demo-notification-card-messenger-name' } }}
-            src="/static/images/avatar/3-sm.jpeg"
+            src="/static/images/avatar/3.jpg"
             sx={{ width: 40, height: 40 }}
           />
         </Box>
diff --git a/docs/src/components/showcase/ViewToggleButton.tsx b/docs/src/components/showcase/ViewToggleButton.tsx
index 17175c58b79d75..e4c155cbd9c987 100644
--- a/docs/src/components/showcase/ViewToggleButton.tsx
+++ b/docs/src/components/showcase/ViewToggleButton.tsx
@@ -11,7 +11,7 @@ const views = ['quilt', 'module', 'agenda', 'week', 'sidebar'] as const;
 
 type View = (typeof views)[number];
 
-const viewIcons: Record<View, React.ReactElement> = {
+const viewIcons: Record<View, React.ReactElement<any>> = {
   quilt: <ViewQuiltRounded />,
   module: <ViewModuleRounded />,
   agenda: <ViewAgendaRounded />,
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
index b2b587eee4595b..b1e30e3eb76611 100644
--- a/docs/src/components/typography/SectionHeadline.tsx
+++ b/docs/src/components/typography/SectionHeadline.tsx
@@ -11,7 +11,7 @@ interface SectionHeadlineProps {
    */
   inverted?: boolean;
   overline?: React.ReactNode;
-  title: string | React.ReactElement;
+  title: string | React.ReactElement<any>;
 }
 
 export default function SectionHeadline(props: SectionHeadlineProps) {
diff --git a/docs/src/icons/SvgHamburgerMenu.tsx b/docs/src/icons/SvgHamburgerMenu.tsx
index e47c00f841f79b..834d16372b7b6a 100644
--- a/docs/src/icons/SvgHamburgerMenu.tsx
+++ b/docs/src/icons/SvgHamburgerMenu.tsx
@@ -5,8 +5,8 @@ export default function SvgHamburgerMenu(props: RootSvgProps) {
   return (
     <RootSvg
       xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
+      width={18}
+      height={18}
       viewBox="0 0 16 16"
       fill="none"
       {...props}
diff --git a/docs/src/icons/SvgMuiLogomark.tsx b/docs/src/icons/SvgMuiLogomark.tsx
index 11fedda4e46f42..4cca7a7aaae5eb 100644
--- a/docs/src/icons/SvgMuiLogomark.tsx
+++ b/docs/src/icons/SvgMuiLogomark.tsx
@@ -5,16 +5,16 @@ export default function SvgMuiLogomark(props: RootSvgProps) {
   return (
     <RootSvg
       xmlns="http://www.w3.org/2000/svg"
-      width={36}
-      height={32}
-      viewBox="0 0 36 32"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
       fill="none"
       {...props}
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        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"
+        d="M24 5.601V1.592a.344.344 0 0 0-.514-.298l-2.64 1.508a.688.688 0 0 0-.346.597v4.009c0 .264.285.43.514.298l2.64-1.508A.688.688 0 0 0 24 5.6ZM.515 1.295l7.643 4.383a.688.688 0 0 0 .684 0l7.643-4.383a.344.344 0 0 1 .515.298v12.03c0 .235-.12.453-.319.58l-4.65 2.953 3.11 1.832c.22.13.495.127.713-.009l4.61-2.878a.344.344 0 0 0 .161-.292v-4.085c0-.254.14-.486.362-.606l2.507-1.346a.344.344 0 0 1 .506.303v7.531c0 .244-.13.47-.34.593l-7.834 4.592a.688.688 0 0 1-.71-.009l-5.953-3.681A.344.344 0 0 1 9 18.808v-3.624c0-.115.057-.222.153-.286l4.04-2.694a.688.688 0 0 0 .307-.572v-4.39a.137.137 0 0 0-.208-.117l-4.44 2.664a.688.688 0 0 1-.705.002L3.645 7.123a.138.138 0 0 0-.208.118v7.933a.344.344 0 0 1-.52.295L.5 14.019C.19 13.833 0 13.497 0 13.135V1.593c0-.264.286-.43.515-.298Z"
         fill="#007FFF"
       />
     </RootSvg>
diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
index 7c8d9de1f13614..058366525e0f5a 100644
--- a/docs/src/layouts/AppHeader.tsx
+++ b/docs/src/layouts/AppHeader.tsx
@@ -7,11 +7,10 @@ import Container from '@mui/material/Container';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
+import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu';
 import HeaderNavBar from 'docs/src/components/header/HeaderNavBar';
 import HeaderNavDropdown from 'docs/src/components/header/HeaderNavDropdown';
 import ThemeModeToggle from 'docs/src/components/header/ThemeModeToggle';
-import { Link } from '@mui/docs/Link';
 import { DeferredAppSearch } from 'docs/src/modules/components/AppFrame';
 import { useTranslate } from '@mui/docs/i18n';
 
@@ -51,9 +50,7 @@ export default function AppHeader(props: AppHeaderProps) {
         }}
       />
       <Container sx={{ display: 'flex', alignItems: 'center', minHeight: HEIGHT }}>
-        <Box component={Link} href="/" aria-label="Go to homepage" sx={{ lineHeight: 0, mr: 2 }}>
-          <SvgMuiLogomark width={30} />
-        </Box>
+        <MuiLogoMenu />
         <Box sx={{ display: { xs: 'none', md: 'initial' } }}>
           <HeaderNavBar />
         </Box>
@@ -64,6 +61,7 @@ export default function AppHeader(props: AppHeaderProps) {
             <IconButton
               component="a"
               color="primary"
+              size="small"
               href={gitHubRepository}
               target="_blank"
               rel="noopener"
diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx
index be0400a1a0659a..8001bbe7646f3d 100644
--- a/docs/src/layouts/HeroContainer.tsx
+++ b/docs/src/layouts/HeroContainer.tsx
@@ -8,9 +8,9 @@ import { alpha } from '@mui/material/styles';
 interface HeroContainerProps {
   disableMobileHidden?: boolean;
   disableTabExclusion?: boolean;
-  left: React.ReactElement;
+  left: React.ReactElement<any>;
   linearGradient?: boolean;
-  right: React.ReactElement;
+  right: React.ReactElement<any>;
   rightSx?: BoxProps['sx'];
 }
 
@@ -138,14 +138,14 @@ export default function HeroContainer(props: HeroContainerProps) {
     <Box sx={{ overflow: 'hidden' }}>
       <Container
         sx={{
-          pt: { xs: 8, sm: 0 },
-          minHeight: { xs: 'auto', sm: 500 },
+          pt: { xs: 8, md: 0 },
+          minHeight: { xs: 'auto', md: 500 },
           height: { md: 'calc(100vh - 120px)' },
           maxHeight: { md: 700, xl: 850 },
           transition: '0.3s',
         }}
       >
-        <Grid container alignItems="center" wrap="nowrap" sx={{ height: '100%', mx: 'auto' }}>
+        <Grid container alignItems="center" flexWrap="nowrap" sx={{ height: '100%', mx: 'auto' }}>
           <Grid item md={7} lg={6} sx={{ m: 'auto' }}>
             {left}
           </Grid>
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index 6561be4775cd11..d2189cf882ce16 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -3,17 +3,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp } from '@mui/utils';
 import Typography from '@mui/material/Typography';
-import AdGuest from 'docs/src/modules/components/AdGuest';
 import Alert from '@mui/material/Alert';
+import AdGuest from 'docs/src/modules/components/AdGuest';
 import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
-import { alpha } from '@mui/material/styles';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { BrandingProvider } from '@mui/docs/branding';
+import { SectionTitle } from '@mui/docs/SectionTitle';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import Ad from 'docs/src/modules/components/Ad';
-import { BrandingProvider } from '@mui/docs/branding';
-import { SectionTitle } from '@mui/docs/SectionTitle';
 import PropertiesSection, {
   getPropsToC,
 } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
@@ -72,6 +72,7 @@ export default function ApiPage(props) {
   const {
     cssComponent,
     demos,
+    deprecated,
     filename,
     forwardsRefTo,
     inheritance,
@@ -104,6 +105,7 @@ export default function ApiPage(props) {
     componentDescription,
     componentDescriptionToc = [],
     classDescriptions,
+    deprecationInfo,
     propDescriptions,
     slotDescriptions,
   } = descriptions[userLanguage];
@@ -180,6 +182,19 @@ export default function ApiPage(props) {
     >
       <MarkdownElement>
         <h1>{pageContent.name} API</h1>
+        {deprecated ? (
+          <Alert
+            severity="warning"
+            icon={<WarningRoundedIcon fontSize="small" />}
+            sx={{ mt: 1.5, mb: 3 }}
+          >
+            <span
+              dangerouslySetInnerHTML={{
+                __html: deprecationInfo || t('api-docs.defaultDeprecationMessage'),
+              }}
+            />
+          </Alert>
+        ) : null}
         <Typography variant="h5" component="p" className="description" gutterBottom>
           {description}
           {disableAd ? null : (
@@ -191,46 +206,7 @@ export default function ApiPage(props) {
           )}
         </Typography>
         <Heading hash="demos" />
-        <Alert
-          severity="success"
-          variant="outlined"
-          icon={<VerifiedRoundedIcon sx={{ fontSize: 20 }} />}
-          sx={[
-            (theme) => ({
-              mt: 1.5,
-              pt: 1,
-              px: 2,
-              pb: 0,
-              fontSize: theme.typography.pxToRem(16),
-              backgroundColor: (theme.vars || theme).palette.success[50],
-              borderColor: (theme.vars || theme).palette.success[100],
-              '& .MuiAlert-message': {
-                '& * p': {
-                  color: (theme.vars || theme).palette.text.primary,
-                  mb: 1,
-                },
-                '& * a': {
-                  fontWeight: theme.typography.fontWeightMedium,
-                  color: (theme.vars || theme).palette.success[900],
-                  textDecorationColor: alpha(theme.palette.success[600], 0.3),
-                },
-              },
-              ...theme.applyDarkStyles({
-                backgroundColor: alpha(theme.palette.success[700], 0.12),
-                borderColor: alpha(theme.palette.success[400], 0.1),
-                '& .MuiAlert-message': {
-                  ul: {
-                    pl: 3,
-                  },
-                  '& * a': {
-                    color: (theme.vars || theme).palette.success[100],
-                    textDecorationColor: alpha(theme.palette.success[100], 0.3),
-                  },
-                },
-              }),
-            }),
-          ]}
-        >
+        <Alert severity="success" icon={<VerifiedRoundedIcon fontSize="small" />}>
           <span
             dangerouslySetInnerHTML={{
               __html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
diff --git a/docs/src/modules/components/ApiPage/ApiWarning.tsx b/docs/src/modules/components/ApiPage/ApiWarning.tsx
deleted file mode 100644
index be5457e4e48a48..00000000000000
--- a/docs/src/modules/components/ApiPage/ApiWarning.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/system';
-import { styled } from '@mui/material/styles';
-import Alert from '@mui/material/Alert';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import {
-  brandingDarkTheme as darkTheme,
-  brandingLightTheme as lightTheme,
-} from '@mui/docs/branding';
-
-const StyledAlert = styled(Alert)(
-  ({ theme }) => ({
-    '&.MuiAlert-standardWarning': {
-      alignItems: 'center',
-      padding: '2px 12px',
-      fontWeight: theme.typography.fontWeightRegular,
-      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]})`,
-      '& .MuiAlert-icon': {
-        height: 'fit-content',
-        padding: 0,
-      },
-      '& code': { all: 'unset' },
-      '& strong': {
-        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-      },
-      '& svg': {
-        fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
-      },
-      '& a': {
-        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-        textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4),
-        '&:hover': {
-          textDecorationColor: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-        },
-      },
-    },
-  }),
-  ({ theme }) => ({
-    [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
-      '&.MuiAlert-standardWarning': {
-        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),
-        '& strong': {
-          color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
-        },
-        '& svg': {
-          fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
-        },
-        '& a': {
-          color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
-          textDecorationColor: alpha(darkTheme.palette.warning.main, 0.4),
-          '&:hover': {
-            textDecorationColor: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
-          },
-        },
-      },
-    },
-  }),
-);
-
-interface DeprecationAlertProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export default function ApiWarning({ children, className }: DeprecationAlertProps) {
-  return (
-    <StyledAlert
-      className={className}
-      severity="warning"
-      icon={<WarningRoundedIcon fontSize="small" />}
-    >
-      {children}
-    </StyledAlert>
-  );
-}
diff --git a/docs/src/modules/components/ApiPage/ApiWarningAlert.tsx b/docs/src/modules/components/ApiPage/ApiWarningAlert.tsx
new file mode 100644
index 00000000000000..bfec92a352174b
--- /dev/null
+++ b/docs/src/modules/components/ApiPage/ApiWarningAlert.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Alert from '@mui/material/Alert';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+
+interface ApiWarningAlertProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function ApiWarningAlert({ children, className }: ApiWarningAlertProps) {
+  return (
+    <Alert
+      severity="warning"
+      className={className}
+      icon={<WarningRoundedIcon fontSize="small" />}
+      sx={{ fontSize: '0.875rem', mt: '12px' }}
+    >
+      {children}
+    </Alert>
+  );
+}
diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
index 5a31850fce8a07..4e20b6e72eab4a 100644
--- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
@@ -11,7 +11,7 @@ import {
   brandingLightTheme as lightTheme,
   brandingDarkTheme as darkTheme,
 } from '@mui/docs/branding';
-import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning';
+import ApiWarningAlert from 'docs/src/modules/components/ApiPage/ApiWarningAlert';
 
 const StyledApiItem = styled(ExpandableApiItem)(
   ({ theme }) => ({
@@ -34,10 +34,6 @@ const StyledApiItem = styled(ExpandableApiItem)(
         color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`,
       },
     },
-    '& .classes-list-alert': {
-      marginTop: 12,
-      marginBottom: 16,
-    },
   }),
   ({ theme }) => ({
     [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
@@ -101,7 +97,7 @@ export default function ClassesList(props: ClassesListProps) {
               </p>
             )}
             {isDeprecated && (
-              <ApiWarning className="MuiApi-collapsible classes-list-alert">
+              <ApiWarningAlert>
                 <b>{t('api-docs.deprecated')}</b>
                 {deprecationInfo && (
                   <React.Fragment>
@@ -113,7 +109,7 @@ export default function ClassesList(props: ClassesListProps) {
                     />
                   </React.Fragment>
                 )}
-              </ApiWarning>
+              </ApiWarningAlert>
             )}
           </StyledApiItem>
         );
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index 63a7f49c933ea5..9bd1ed3d69e756 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -10,7 +10,7 @@ import {
 import ExpandableApiItem, {
   ApiItemContaier,
 } from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem';
-import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning';
+import ApiWarningAlert from 'docs/src/modules/components/ApiPage/ApiWarningAlert';
 
 const StyledApiItem = styled(ExpandableApiItem)(
   ({ theme }) => ({
@@ -42,8 +42,10 @@ const StyledApiItem = styled(ExpandableApiItem)(
       },
     },
     '& .prop-list-alert': {
-      marginTop: 12,
       marginBottom: 16,
+      '& .MuiAlert-icon': {
+        margin: 0,
+      },
     },
     '& .prop-list-default-props': {
       ...theme.typography.body2,
@@ -218,13 +220,13 @@ export default function PropertiesList(props: PropertiesListProps) {
             {description && <PropDescription description={description} />}
             {seeMoreDescription && <p dangerouslySetInnerHTML={{ __html: seeMoreDescription }} />}
             {requiresRef && (
-              <ApiWarning className="MuiApi-collapsible prop-list-alert">
+              <ApiWarningAlert className="MuiApi-collapsible prop-list-alert">
                 <span
                   dangerouslySetInnerHTML={{
                     __html: t('api-docs.requires-ref'),
                   }}
                 />
-              </ApiWarning>
+              </ApiWarningAlert>
             )}
             {additionalInfo.map((key) => (
               <p
@@ -291,7 +293,7 @@ export default function PropertiesList(props: PropertiesListProps) {
               )}
             </div>
             {isDeprecated && (
-              <ApiWarning className="MuiApi-collapsible prop-list-alert">
+              <ApiWarningAlert>
                 <b>{t('api-docs.deprecated')}</b>
                 {deprecationInfo && (
                   <React.Fragment>
@@ -303,7 +305,7 @@ export default function PropertiesList(props: PropertiesListProps) {
                     />
                   </React.Fragment>
                 )}
-              </ApiWarning>
+              </ApiWarningAlert>
             )}
           </StyledApiItem>
         );
diff --git a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
index 6c379397e6a41c..9bc9fc506d8b8e 100644
--- a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
+++ b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
@@ -135,10 +135,10 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="table"
         >
+          Table
           <CheckIcon
-            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'table' ? 1 : 0 }}
+            sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'table' ? 1 : 0 }}
           />
-          Table
         </MenuItem>
         <MenuItem
           value="expanded"
@@ -148,10 +148,10 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="expanded"
         >
+          Expanded list
           <CheckIcon
-            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'expanded' ? 1 : 0 }}
+            sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'expanded' ? 1 : 0 }}
           />
-          Expanded list
         </MenuItem>
         <MenuItem
           value="collapsed"
@@ -161,10 +161,10 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="collapsed"
         >
+          Collapsed list
           <CheckIcon
-            sx={{ fontSize: '0.85rem', mr: 1, opacity: displayOption === 'collapsed' ? 1 : 0 }}
+            sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'collapsed' ? 1 : 0 }}
           />
-          Collapsed list
         </MenuItem>
       </Menu>
     </React.Fragment>
diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
index 1a33afb9ca4bb0..3eb163ec72727c 100644
--- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { ComponentClassDefinition } from '@mui/internal-docs-utils';
+import { useTranslate } from '@mui/docs/i18n';
 import { styled, alpha } from '@mui/material/styles';
 import {
   brandingDarkTheme as darkTheme,
@@ -8,8 +9,7 @@ import {
 } from '@mui/docs/branding';
 import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList';
 import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
-import { useTranslate } from '@mui/docs/i18n';
-import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning';
+import ApiWarningAlert from 'docs/src/modules/components/ApiPage/ApiWarningAlert';
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
@@ -37,9 +37,6 @@ const StyledTable = styled('table')(
       borderColor: alpha(darkTheme.palette.primary[100], 0.8),
       backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
     },
-    '& .classes-table-alert': {
-      marginTop: 12,
-    },
   }),
   ({ theme }) => ({
     [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
@@ -94,7 +91,7 @@ export default function ClassesTable(props: ClassesTableProps) {
                     }}
                   />
                   {isDeprecated && (
-                    <ApiWarning className="classes-table-alert">
+                    <ApiWarningAlert>
                       <b>{t('api-docs.deprecated')}</b>
                       {deprecationInfo && (
                         <React.Fragment>
@@ -106,7 +103,7 @@ export default function ClassesTable(props: ClassesTableProps) {
                           />
                         </React.Fragment>
                       )}
-                    </ApiWarning>
+                    </ApiWarningAlert>
                   )}
                 </td>
               </tr>
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
index b30d981b6ed8a8..a0dede795e2271 100644
--- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -8,7 +8,7 @@ import {
 } from '@mui/docs/branding';
 import { Properties, getHash } from 'docs/src/modules/components/ApiPage/list/PropertiesList';
 import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
-import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning';
+import ApiWarningAlert from 'docs/src/modules/components/ApiPage/ApiWarningAlert';
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
@@ -63,7 +63,9 @@ const StyledTable = styled('table')(
         marginBottom: 0,
       },
       '& .prop-table-alert': {
-        marginTop: 12,
+        '& .MuiAlert-icon': {
+          margin: 0,
+        },
       },
     },
     '& .prop-table-signature': {
@@ -208,15 +210,6 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                       className="prop-table-additional-description"
                     />
                   )}
-                  {requiresRef && (
-                    <ApiWarning className="prop-table-alert">
-                      <span
-                        dangerouslySetInnerHTML={{
-                          __html: t('api-docs.requires-ref'),
-                        }}
-                      />
-                    </ApiWarning>
-                  )}
                   {additionalInfo.map((key) => (
                     <p
                       className="prop-table-additional-description"
@@ -226,8 +219,17 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                       }}
                     />
                   ))}
+                  {requiresRef && (
+                    <ApiWarningAlert className="prop-table-alert">
+                      <span
+                        dangerouslySetInnerHTML={{
+                          __html: t('api-docs.requires-ref'),
+                        }}
+                      />
+                    </ApiWarningAlert>
+                  )}
                   {isDeprecated && (
-                    <ApiWarning className="prop-table-alert">
+                    <ApiWarningAlert>
                       <b>{t('api-docs.deprecated')}</b>
                       {deprecationInfo && (
                         <React.Fragment>
@@ -239,7 +241,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                           />
                         </React.Fragment>
                       )}
-                    </ApiWarning>
+                    </ApiWarningAlert>
                   )}
                   {signature && (
                     <div className="prop-table-signature">
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 08d1eb2c232786..e10728f8c6db54 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -7,7 +7,6 @@ import NProgress from 'nprogress';
 import CssBaseline from '@mui/material/CssBaseline';
 import AppBar from '@mui/material/AppBar';
 import Stack from '@mui/material/Stack';
-import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
@@ -15,7 +14,6 @@ import SettingsIcon from '@mui/icons-material/SettingsOutlined';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import NProgressBar from '@mui/docs/NProgressBar';
 import { debounce } from '@mui/material/utils';
-import NextLink from 'next/link';
 import SvgHamburgerMenu from 'docs/src/icons/SvgHamburgerMenu';
 import AppNavDrawer from 'docs/src/modules/components/AppNavDrawer';
 import AppSettingsDrawer from 'docs/src/modules/components/AppSettingsDrawer';
@@ -24,7 +22,7 @@ import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
 import SkipLink from 'docs/src/modules/components/SkipLink';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { useTranslate } from '@mui/docs/i18n';
-import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
+import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu';
 import AppFrameBanner from 'docs/src/components/banner/AppFrameBanner';
 
 const nProgressStart = debounce(() => {
@@ -102,7 +100,7 @@ const StyledAppBar = styled(AppBar, {
   shouldForwardProp: (prop) => prop !== 'disablePermanent',
 })(({ disablePermanent, theme }) => {
   return {
-    padding: theme.spacing(1, 2),
+    padding: theme.spacing(1.5),
     transition: theme.transitions.create('width'),
     ...(disablePermanent && {
       boxShadow: 'none',
@@ -112,25 +110,19 @@ const StyledAppBar = styled(AppBar, {
         width: 'calc(100% - var(--MuiDocs-navDrawer-width))',
       },
     }),
+    justifyContent: 'center',
     boxShadow: 'none',
     backdropFilter: 'blur(8px)',
-    borderStyle: 'solid',
-    borderColor: (theme.vars || theme).palette.divider,
-    borderWidth: 0,
-    borderBottomWidth: 'thin',
-    backgroundColor: 'rgba(255,255,255,0.8)',
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+    backgroundColor: 'hsla(0, 0%, 100%, 0.6)',
     color: (theme.vars || theme).palette.grey[800],
     ...theme.applyDarkStyles({
-      backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
+      backgroundColor: alpha(theme.palette.primaryDark[900], 0.6),
       color: (theme.vars || theme).palette.grey[500],
     }),
   };
 });
 
-const GrowingDiv = styled('div')({
-  flex: '1 1 auto',
-});
-
 const NavIconButton = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== 'disablePermanent',
 })(({ disablePermanent, theme }) => {
@@ -156,7 +148,7 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) =>
   };
 });
 
-export const HEIGHT = 64;
+export const HEIGHT = 57;
 
 export default function AppFrame(props) {
   const { children, disableDrawer = false, className, BannerComponent = AppFrameBanner } = props;
@@ -178,7 +170,10 @@ export default function AppFrame(props) {
       <CssBaseline />
       <SkipLink />
       <MarkdownLinks />
-      <StyledAppBar disablePermanent={disablePermanent}>
+      <StyledAppBar
+        disablePermanent={disablePermanent}
+        sx={{ minHeight: 'var(--MuiDocs-header-height)' }}
+      >
         <GlobalStyles
           styles={{
             ':root': {
@@ -186,10 +181,11 @@ export default function AppFrame(props) {
             },
           }}
         />
-        <Toolbar variant="dense" disableGutters>
+        <Stack direction="row" alignItems="center" sx={{ position: 'relative', width: '100%' }}>
           <NavIconButton
             edge="start"
             color="primary"
+            size="small"
             aria-label={t('appFrame.openDrawer')}
             disablePermanent={disablePermanent}
             onClick={() => setMobileOpen(true)}
@@ -197,23 +193,17 @@ export default function AppFrame(props) {
           >
             <SvgHamburgerMenu />
           </NavIconButton>
-          <NextLink href="/" passHref /* onClick={onClose} */ legacyBehavior>
-            <Box
-              component="a"
-              aria-label={t('goToHome')}
-              sx={{ display: { md: 'flex', lg: 'none' }, ml: 2 }}
-            >
-              <SvgMuiLogomark width={30} />
-            </Box>
-          </NextLink>
-          <GrowingDiv />
-          <Stack direction="row" spacing={1} useFlexGap>
+          <Box sx={{ display: { md: 'flex', lg: 'none' } }}>
+            <MuiLogoMenu marginLeft />
+          </Box>
+          <Stack direction="row" spacing={1} useFlexGap sx={{ ml: 'auto' }}>
             <BannerComponent />
             <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>
               <IconButton
                 component="a"
                 color="primary"
+                size="small"
                 href={process.env.SOURCE_CODE_REPO}
                 data-ga-event-category="header"
                 data-ga-event-action="github"
@@ -223,12 +213,12 @@ export default function AppFrame(props) {
             </Tooltip>
             <Notifications />
             <Tooltip title={t('appFrame.toggleSettings')} enterDelay={300}>
-              <IconButton color="primary" onClick={() => setSettingsOpen(true)} sx={{ px: '8px' }}>
+              <IconButton color="primary" size="small" onClick={() => setSettingsOpen(true)}>
                 <SettingsIcon fontSize="small" />
               </IconButton>
             </Tooltip>
           </Stack>
-        </Toolbar>
+        </Stack>
       </StyledAppBar>
       <StyledAppNavDrawer
         disablePermanent={disablePermanent}
diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
index b507c377e10134..26fe9dbdfe8740 100644
--- a/docs/src/modules/components/AppLayoutDocsFooter.js
+++ b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -96,7 +96,7 @@ async function postFeedback(data) {
 }
 
 async function postFeedbackOnSlack(data) {
-  const { rating, comment, commentedSection } = data;
+  const { rating, comment, commentedSection, productId } = data;
 
   const sentData = {
     callback_id: 'send_feedback',
@@ -106,6 +106,7 @@ async function postFeedbackOnSlack(data) {
     commmentSectionURL: `${window.location.origin}${window.location.pathname}#${commentedSection.hash}`,
     commmentSectionTitle: commentedSection.text,
     githubRepo: process.env.SOURCE_CODE_REPO,
+    productId,
   };
   if (!comment || comment.length < 10) {
     return 'ignored';
@@ -187,7 +188,7 @@ async function getUserFeedback(id) {
   }
 }
 
-async function submitFeedback(page, rating, comment, language, commentedSection) {
+async function submitFeedback(page, rating, comment, language, commentedSection, productId) {
   const data = {
     id: getCookie('feedbackId'),
     page,
@@ -197,7 +198,7 @@ async function submitFeedback(page, rating, comment, language, commentedSection)
     language,
   };
 
-  const resultSlack = await postFeedbackOnSlack({ ...data, commentedSection });
+  const resultSlack = await postFeedbackOnSlack({ ...data, productId, commentedSection });
   if (rating !== undefined) {
     const resultVote = await postFeedback(data);
     if (resultVote) {
@@ -259,7 +260,7 @@ export default function AppLayoutDocsFooter(props) {
   const theme = useTheme();
   const t = useTranslate();
   const userLanguage = useUserLanguage();
-  const { activePage } = React.useContext(PageContext);
+  const { activePage, productId } = React.useContext(PageContext);
   const [rating, setRating] = React.useState();
   const [comment, setComment] = React.useState('');
   const [snackbarOpen, setSnackbarOpen] = React.useState(false);
@@ -303,6 +304,7 @@ export default function AppLayoutDocsFooter(props) {
       comment,
       userLanguage,
       commentedSection,
+      productId,
     );
     if (result) {
       setSnackbarMessage(t('feedbackSubmitted'));
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 0d0077b891a699..736ece487b4405 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import NextLink from 'next/link';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import { styled, ThemeProvider } from '@mui/material/styles';
@@ -15,7 +14,7 @@ import Box from '@mui/material/Box';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 import DoneRounded from '@mui/icons-material/DoneRounded';
-import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
+import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu';
 import AppNavDrawerItem from 'docs/src/modules/components/AppNavDrawerItem';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -44,6 +43,15 @@ function transitionTheme(theme) {
 
 const savedScrollTop = {};
 
+const customButtonStyles = (theme) => ({
+  pl: 1,
+  pr: '6px',
+  height: 26,
+  fontSize: theme.typography.pxToRem(13),
+  fontWeight: theme.typography.fontWeightMedium,
+  letterSpacing: '0.01rem',
+});
+
 function ProductDrawerButton(props) {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -67,26 +75,14 @@ function ProductDrawerButton(props) {
   return (
     <React.Fragment>
       <Button
+        size="small"
         id="mui-product-selector"
         aria-haspopup="true"
         aria-controls={open ? 'drawer-open-button' : undefined}
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
         endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
-        sx={(theme) => ({
-          minWidth: 0,
-          p: '1px 8px',
-          fontSize: theme.typography.pxToRem(13),
-          fontWeight: theme.typography.fontWeightMedium,
-          color: (theme.vars || theme).palette.primary[600],
-          '& svg': {
-            width: 18,
-            height: 18,
-          },
-          ...theme.applyDarkStyles({
-            color: (theme.vars || theme).palette.primary[300],
-          }),
-        })}
+        sx={customButtonStyles}
       >
         {props.productName}
       </Button>
@@ -121,8 +117,8 @@ function ProductIdentifier(props) {
     <Box sx={{ flexGrow: 1 }}>
       <Typography
         sx={(theme) => ({
-          ml: 1,
-          fontSize: theme.typography.pxToRem(11),
+          ml: '6px',
+          fontSize: theme.typography.pxToRem(10),
           fontWeight: theme.typography.fontWeightBold,
           textTransform: 'uppercase',
           letterSpacing: '.1rem',
@@ -184,7 +180,7 @@ PersistScroll.propTypes = {
 };
 
 const ToolbarDiv = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1.6, 2),
+  padding: theme.spacing(1.5),
   paddingRight: 0,
   flexShrink: 0,
   height: 'var(--MuiDocs-header-height)',
@@ -193,6 +189,8 @@ const ToolbarDiv = styled('div')(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
+  borderBottom: '1px solid',
+  borderColor: (theme.vars || theme).palette.divider,
 }));
 
 const StyledDrawer = styled(Drawer)(({ theme }) => ({
@@ -323,7 +321,7 @@ export default function AppNavDrawer(props) {
   const drawer = React.useMemo(() => {
     const navItems = renderNavItems({ onClose, pages, activePageParents, depth: 0, t });
 
-    const renderVersionSelector = (versions, sx) => {
+    const renderVersionSelector = (versions) => {
       if (!versions?.length) {
         return null;
       }
@@ -332,6 +330,9 @@ export default function AppNavDrawer(props) {
       return (
         <React.Fragment>
           <Button
+            variant="text"
+            color="secondary"
+            size="small"
             id="mui-version-selector"
             onClick={(event) => {
               setAnchorEl(event.currentTarget);
@@ -341,24 +342,7 @@ export default function AppNavDrawer(props) {
                 <ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />
               ) : null
             }
-            sx={[
-              (theme) => ({
-                py: 0.1,
-                minWidth: 0,
-                fontSize: theme.typography.pxToRem(13),
-                fontWeight: 500,
-                color: (theme.vars || theme).palette.primary[600],
-                '& svg': {
-                  ml: -0.6,
-                  width: 18,
-                  height: 18,
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[300],
-                }),
-              }),
-              ...(Array.isArray(sx) ? sx : [sx]),
-            ]}
+            sx={customButtonStyles}
           >
             {currentVersion.text}
           </Button>
@@ -392,7 +376,7 @@ export default function AppNavDrawer(props) {
                         onClick: onClose,
                       })}
                 >
-                  {item.text} {item.current && <DoneRounded sx={{ fontSize: 16, ml: 0.25 }} />}
+                  {item.text} {item.current && <DoneRounded sx={{ fontSize: 16, ml: 'auto' }} />}
                 </MenuItem>
               );
             })}
@@ -404,28 +388,13 @@ export default function AppNavDrawer(props) {
     return (
       <React.Fragment>
         <ToolbarDiv>
-          <NextLink href="/" passHref legacyBehavior>
-            <Box
-              component="a"
-              onClick={onClose}
-              aria-label={t('goToHome')}
-              sx={{
-                pr: '12px',
-                mr: '8px',
-                borderRight: '1px solid',
-                borderColor: 'divider',
-              }}
-            >
-              <SvgMuiLogomark width={30} />
-            </Box>
-          </NextLink>
+          <MuiLogoMenu smallerMargin />
           <ProductIdentifier
             name={productIdentifier.name}
             metadata={productIdentifier.metadata}
             versionSelector={renderVersionSelector(productIdentifier.versions)}
           />
         </ToolbarDiv>
-        <Divider />
         <Box
           sx={{
             pt: 0.5,
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 34029d6fd76d91..3b8d9f4189b7cd 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -30,12 +30,13 @@ import PageContext from 'docs/src/modules/components/PageContext';
 
 const SearchButton = styled('button')(({ theme }) => [
   {
-    minHeight: 34,
-    minWidth: 34,
+    minHeight: 32,
+    minWidth: 32,
+    margin: 0,
+    paddingLeft: theme.spacing(1),
     display: 'flex',
     alignItems: 'center',
-    margin: 0,
-    paddingLeft: theme.spacing(0.6),
+    gap: '6px',
     [theme.breakpoints.only('xs')]: {
       backgroundColor: 'transparent',
       padding: 0,
@@ -44,20 +45,21 @@ const SearchButton = styled('button')(({ theme }) => [
         display: 'none',
       },
     },
-    fontFamily: theme.typography.fontFamily,
     position: 'relative',
-    backgroundColor: (theme.vars || theme).palette.grey[50],
-    color: (theme.vars || theme).palette.text.secondary,
+    backgroundColor: alpha(theme.palette.grey[50], 0.6),
+    fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(14),
+    color: (theme.vars || theme).palette.text.secondary,
     border: `1px solid ${(theme.vars || theme).palette.grey[200]}`,
     borderRadius: (theme.vars || theme).shape.borderRadius,
     cursor: 'pointer',
     transitionProperty: 'all',
     transitionDuration: '150ms',
-    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`,
+    boxShadow: `hsl(200, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
     '&:hover': {
-      background: (theme.vars || theme).palette.grey[100],
+      background: alpha(theme.palette.grey[100], 0.5),
       borderColor: (theme.vars || theme).palette.grey[300],
+      boxShadow: 'none',
     },
     '&:focus-visible': {
       outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
@@ -66,25 +68,29 @@ const SearchButton = styled('button')(({ theme }) => [
   },
   theme.applyDarkStyles({
     backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-    borderColor: (theme.vars || theme).palette.primaryDark[700],
-    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`,
+    borderColor: alpha(theme.palette.primaryDark[600], 0.4),
+    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 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],
+      boxShadow: 'none',
     },
   }),
 ]);
 
 const SearchLabel = styled('span')(({ theme }) => ({
-  marginLeft: theme.spacing(1),
   marginRight: 'auto',
+  marginBottom: '1px', // optical alignment
+  color: (theme.vars || theme).palette.text.tertiary,
+  lineHeight: 1,
 }));
 
-const Shortcut = styled('div')(({ theme }) => {
+const Shortcut = styled('kbd')(({ theme }) => {
   return {
+    all: 'unset',
     fontSize: theme.typography.pxToRem(12),
     fontWeight: 'bold',
-    lineHeight: '20px',
+    lineHeight: '19px',
     marginLeft: theme.spacing(0.5),
     border: `1px solid ${(theme.vars || theme).palette.grey[200]}`,
     backgroundColor: '#FFF',
@@ -427,15 +433,7 @@ export default function AppSearch(props) {
         aria-labelledby="app-search-label"
         {...props}
       >
-        <SearchIcon
-          fontSize="small"
-          sx={(theme) => ({
-            color: 'primary.500',
-            ...theme.applyDarkStyles({
-              color: 'primary.300',
-            }),
-          })}
-        />
+        <SearchIcon color="primary" sx={{ fontSize: '1.125rem' }} />
         <SearchLabel id="app-search-label">{t('searchButton')}</SearchLabel>
         <Shortcut aria-hidden="true">
           {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js
index 98ae5157e10a34..422eb252bf0a52 100644
--- a/docs/src/modules/components/ComponentPageTabs.js
+++ b/docs/src/modules/components/ComponentPageTabs.js
@@ -100,9 +100,9 @@ export default function ComponentPageTabs(props) {
         className="component-tabs"
         sx={{
           position: 'sticky',
-          top: 65, // to be positioned below the app bar
-          width: '100%',
+          top: 57, // to be positioned below the app bar
           mt: 2,
+          mx: { xs: -2, sm: -1 },
           backgroundColor: 'background.default',
           borderBottom: 1,
           borderColor: 'divider',
diff --git a/docs/src/modules/components/HighlightedCode.test.js b/docs/src/modules/components/HighlightedCode.test.js
index 60ccf9b7c04ff4..f05b5cf2cefb9e 100644
--- a/docs/src/modules/components/HighlightedCode.test.js
+++ b/docs/src/modules/components/HighlightedCode.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { getDesignTokens } from '@mui/docs/branding';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
index 7cceb465dcba4b..849e4ab7297e94 100644
--- a/docs/src/modules/components/JoyThemeBuilder.tsx
+++ b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -1037,7 +1037,6 @@ function GlobalVariantForm({
         Pick the specific primitive color, now in CSS variables form already, to correspond to a
         semantic global variant token.
       </Typography>
-
       <Sheet
         variant="outlined"
         sx={{
@@ -1273,7 +1272,7 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') {
   return tokens;
 }
 
-function TemplatesDialog({ children, data }: { children: React.ReactElement; data: any }) {
+function TemplatesDialog({ children, data }: { children: React.ReactElement<any>; data: any }) {
   const [open, setOpen] = React.useState(false);
   const { map: templateMap } = sourceJoyTemplates();
   const renderItem = (name: string, item: TemplateData) => {
diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
index 787c5c22800aa4..afc7d5a4d6e19f 100644
--- a/docs/src/modules/components/JoyUsageDemo.tsx
+++ b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -165,7 +165,7 @@ interface JoyUsageDemoProps<ComponentProps> {
    * A function to override the code block result.
    */
   getCodeBlock?: (code: string, props: ComponentProps) => string;
-  renderDemo: (props: ComponentProps) => React.ReactElement;
+  renderDemo: (props: ComponentProps) => React.ReactElement<any>;
 }
 
 export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index fe4fb76e37d8ef..79d1ebd4dd03f5 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -33,7 +33,7 @@ function formatSx(sx: { [k: string]: string | number }) {
 interface SlotVariablesProps {
   slot: string;
   data: Array<DataItem>;
-  renderField: (item: DataItem) => React.ReactElement;
+  renderField: (item: DataItem) => React.ReactElement<any>;
   defaultOpen?: boolean;
 }
 
@@ -88,7 +88,7 @@ export default function JoyVariablesDemo(props: {
   componentName: string;
   childrenAccepted?: boolean;
   data: Array<DataItem | [string, Array<DataItem>, { defaultOpen?: boolean } | undefined]>;
-  renderDemo: (sx: { [k: string]: string | number }) => React.ReactElement;
+  renderDemo: (sx: { [k: string]: string | number }) => React.ReactElement<any>;
   renderCode?: (formattedSx: string) => string;
 }) {
   const { componentName, data = [], childrenAccepted = false, renderCode } = props;
diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js
index 2c213f6d8074be..b3fce3970e5cc2 100644
--- a/docs/src/modules/components/MaterialUIExampleCollection.js
+++ b/docs/src/modules/components/MaterialUIExampleCollection.js
@@ -8,6 +8,7 @@ import Link from '@mui/material/Link';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import CloudRoundedIcon from '@mui/icons-material/CloudRounded';
 
+// #default-branch-switch
 const examples = [
   {
     name: 'Next.js App Router',
diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 265312ae688114..d4b4ff1628b9f8 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -167,6 +167,7 @@ export default function Notifications() {
       >
         <IconButton
           color="primary"
+          size="small"
           ref={anchorRef}
           aria-controls={open ? 'notifications-popup' : undefined}
           aria-haspopup="true"
diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
index f19f2b919d006a..b34c9dd36dc4c6 100644
--- a/docs/src/modules/sandbox/Dependencies.ts
+++ b/docs/src/modules/sandbox/Dependencies.ts
@@ -2,7 +2,7 @@ import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl';
 
 const packagesWithBundledTypes = ['date-fns', '@emotion/react', '@emotion/styled', 'dayjs'];
-const muiNpmOrgs = ['@mui', '@base_ui', '@pigment-css'];
+const muiNpmOrgs = ['@mui', '@base_ui', '@pigment-css', '@toolpad'];
 
 /**
  * WARNING: Always uses `latest` typings.
diff --git a/docs/src/modules/utils/getProductInfoFromUrl.ts b/docs/src/modules/utils/getProductInfoFromUrl.ts
index f2577ae8c50b13..5a44572596f514 100644
--- a/docs/src/modules/utils/getProductInfoFromUrl.ts
+++ b/docs/src/modules/utils/getProductInfoFromUrl.ts
@@ -10,7 +10,10 @@ export type MuiProductId =
   | 'docs'
   | 'x-data-grid'
   | 'x-date-pickers'
-  | 'x-charts';
+  | 'x-charts'
+  | 'x-tree-view'
+  | 'toolpad-studio'
+  | 'toolpad-core';
 
 type MuiProductCategoryId = 'null' | 'core' | 'x';
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/withRoot.tsx b/docs/src/pages/premium-themes/onepirate/modules/withRoot.tsx
index e2d99a652a1988..d89dd45fea732e 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/withRoot.tsx
+++ b/docs/src/pages/premium-themes/onepirate/modules/withRoot.tsx
@@ -3,7 +3,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme';
 
-export default function withRoot<P extends JSX.IntrinsicAttributes>(
+export default function withRoot<P extends React.JSX.IntrinsicAttributes>(
   Component: React.ComponentType<P>,
 ) {
   function WithRoot(props: P) {
diff --git a/docs/translations/api-docs/avatar-group/avatar-group.json b/docs/translations/api-docs/avatar-group/avatar-group.json
index 245ca5d121acaa..80f2d199412170 100644
--- a/docs/translations/api-docs/avatar-group/avatar-group.json
+++ b/docs/translations/api-docs/avatar-group/avatar-group.json
@@ -7,7 +7,7 @@
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },
     "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop."
     },
     "max": { "description": "Max avatars to show before +x." },
     "renderSurplus": {
@@ -17,9 +17,8 @@
         "React.ReactNode": "custom element to display"
       }
     },
-    "slotProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future."
-    },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "spacing": { "description": "Spacing between avatars." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
@@ -35,5 +34,6 @@
       "nodeName": "the avatar elements"
     },
     "root": { "description": "Styles applied to the root element." }
-  }
+  },
+  "slotDescriptions": { "surplus": "" }
 }
diff --git a/docs/translations/api-docs/filled-input/filled-input.json b/docs/translations/api-docs/filled-input/filled-input.json
index 03a2c44eede3b9..663c798f1ef76a 100644
--- a/docs/translations/api-docs/filled-input/filled-input.json
+++ b/docs/translations/api-docs/filled-input/filled-input.json
@@ -11,11 +11,9 @@
     "color": {
       "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component."
     },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "components": { "description": "The components used for each slot inside." },
     "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
diff --git a/docs/translations/api-docs/hidden/hidden.json b/docs/translations/api-docs/hidden/hidden.json
index b4ac8adc37b812..761e9fd71256f4 100644
--- a/docs/translations/api-docs/hidden/hidden.json
+++ b/docs/translations/api-docs/hidden/hidden.json
@@ -1,5 +1,6 @@
 {
   "componentDescription": "Responsively hides children based on the selected implementation.",
+  "deprecationInfo": "The Hidden component was deprecated in Material UI v5. To learn more, see <a href=\"/material-ui/migration/v5-component-changes/#hidden\">the Hidden section</a> of the migration docs.",
   "propDescriptions": {
     "children": { "description": "The content of the component." },
     "implementation": {
diff --git a/docs/translations/api-docs/input-base/input-base.json b/docs/translations/api-docs/input-base/input-base.json
index 5589a24fe3d3f8..6b5be2851a4fcc 100644
--- a/docs/translations/api-docs/input-base/input-base.json
+++ b/docs/translations/api-docs/input-base/input-base.json
@@ -11,11 +11,9 @@
     "color": {
       "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component."
     },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "components": { "description": "The components used for each slot inside." },
     "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json
index dc63984b34e5ce..5c6263f5bb03dd 100644
--- a/docs/translations/api-docs/input/input.json
+++ b/docs/translations/api-docs/input/input.json
@@ -11,11 +11,9 @@
     "color": {
       "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component."
     },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "components": { "description": "The components used for each slot inside." },
     "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
diff --git a/docs/translations/api-docs/list-item-secondary-action/list-item-secondary-action.json b/docs/translations/api-docs/list-item-secondary-action/list-item-secondary-action.json
index 76c97232c297fd..3a537b274a4187 100644
--- a/docs/translations/api-docs/list-item-secondary-action/list-item-secondary-action.json
+++ b/docs/translations/api-docs/list-item-secondary-action/list-item-secondary-action.json
@@ -1,5 +1,6 @@
 {
   "componentDescription": "Must be used as the last child of ListItem to function properly.",
+  "deprecationInfo": "Use the <code>secondaryAction</code> prop in the <code>ListItem</code> component instead. This component will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details.",
   "propDescriptions": {
     "children": {
       "description": "The content of the component, normally an <code>IconButton</code> or selection control."
diff --git a/docs/translations/api-docs/list-item/list-item.json b/docs/translations/api-docs/list-item/list-item.json
index e2e49cb15c36ab..802cdbb8fca4b9 100644
--- a/docs/translations/api-docs/list-item/list-item.json
+++ b/docs/translations/api-docs/list-item/list-item.json
@@ -15,11 +15,9 @@
     "component": {
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "components": { "description": "The components used for each slot inside." },
     "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
     "ContainerComponent": {
       "description": "The container component used when a <code>ListItemSecondaryAction</code> is the last child.",
@@ -40,11 +38,9 @@
     "secondaryAction": { "description": "The element to display at the end of ListItem." },
     "selected": { "description": "Use to apply selected styling." },
     "slotProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future."
-    },
-    "slots": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }
diff --git a/docs/translations/api-docs/outlined-input/outlined-input.json b/docs/translations/api-docs/outlined-input/outlined-input.json
index 4c0a98ac1e7c09..7f6636f2615879 100644
--- a/docs/translations/api-docs/outlined-input/outlined-input.json
+++ b/docs/translations/api-docs/outlined-input/outlined-input.json
@@ -11,9 +11,7 @@
     "color": {
       "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component."
     },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "components": { "description": "The components used for each slot inside." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },
diff --git a/docs/translations/api-docs/tooltip/tooltip.json b/docs/translations/api-docs/tooltip/tooltip.json
index dbebeb920dcfd5..dc93836d7841a0 100644
--- a/docs/translations/api-docs/tooltip/tooltip.json
+++ b/docs/translations/api-docs/tooltip/tooltip.json
@@ -4,11 +4,9 @@
     "arrow": { "description": "If <code>true</code>, adds an arrow to the tooltip." },
     "children": { "description": "Tooltip reference element.", "requiresRef": true },
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "components": { "description": "The components used for each slot inside." },
     "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
     "describeChild": {
       "description": "Set to <code>true</code> if the <code>title</code> acts as an accessible description. By default the <code>title</code> acts as an accessible label for the child."
diff --git a/docs/translations/api-docs/use-menu-item-context-stabilizer/use-menu-item-context-stabilizer.json b/docs/translations/api-docs/use-menu-item-context-stabilizer/use-menu-item-context-stabilizer.json
index d3762313773adb..e9fb6768d1a77f 100644
--- a/docs/translations/api-docs/use-menu-item-context-stabilizer/use-menu-item-context-stabilizer.json
+++ b/docs/translations/api-docs/use-menu-item-context-stabilizer/use-menu-item-context-stabilizer.json
@@ -1,5 +1,5 @@
 {
-  "hookDescription": "Stabilizes the ListContext value for the MenuItem component, so it doesn't change when sibling items update.\n\n@param id The id of the MenuItem. If undefined, it will be generated with useId.\n@returns The stable ListContext value and the id of the MenuItem.",
+  "hookDescription": "Stabilizes the ListContext value for the MenuItem component, so it doesn't change when sibling items update.",
   "parametersDescriptions": {},
   "returnValueDescriptions": {}
 }
diff --git a/docs/translations/api-docs/use-option-context-stabilizer/use-option-context-stabilizer.json b/docs/translations/api-docs/use-option-context-stabilizer/use-option-context-stabilizer.json
index 6c507c07107d7b..9a29af89977418 100644
--- a/docs/translations/api-docs/use-option-context-stabilizer/use-option-context-stabilizer.json
+++ b/docs/translations/api-docs/use-option-context-stabilizer/use-option-context-stabilizer.json
@@ -1,5 +1,5 @@
 {
-  "hookDescription": "Stabilizes the ListContext value for the Option component, so it doesn't change when sibling Options update.\n\n@param value The value of the Option.\n@returns The stable ListContext value.",
+  "hookDescription": "Stabilizes the ListContext value for the Option component, so it doesn't change when sibling Options update.",
   "parametersDescriptions": {},
   "returnValueDescriptions": {}
 }
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 110ffd7366beeb..316ae96000b33e 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -236,6 +236,10 @@
     "/material-ui/customization/density": "Density",
     "/material-ui/customization/z-index": "z-index",
     "/material-ui/customization/transitions": "Transitions",
+    "/material-ui/customization/css-variables": "Css variables",
+    "/material-ui/customization/css-theme-variables/overview": "Overview",
+    "/material-ui/customization/css-theme-variables/usage": "Usage",
+    "/material-ui/customization/css-theme-variables/configuration": "Configuration",
     "/material-ui/guides": "How-to guides",
     "/material-ui/guides/minimizing-bundle-size": "Minimizing bundle size",
     "/material-ui/guides/server-rendering": "Server rendering",
@@ -253,17 +257,13 @@
     "/material-ui/integrations/theme-scoping": "Theme scoping",
     "/material-ui/experimental-api": "Experimental APIs",
     "/material-ui/experimental-api/classname-generator": "ClassName generator",
-    "CSS theme variables": "CSS theme variables",
-    "/material-ui/experimental-api/css-theme-variables/overview": "Overview",
-    "/material-ui/experimental-api/css-theme-variables/usage": "Usage",
-    "/material-ui/experimental-api/css-theme-variables/customization": "Customization",
-    "/material-ui/experimental-api/css-theme-variables/migration": "Migrating to CSS variables",
     "/material-ui/migration": "Migration",
     "/material-ui/migration/migrating-from-deprecated-apis": "Migrating from deprecated APIs",
     "/material-ui/migration/migration-grid-v2": "Migrating to Grid v2",
     "/material-ui/migration/pickers-migration": "Migration from @material-ui/pickers",
     "Upgrade to v6": "Upgrade to v6",
     "/material-ui/migration/migration-v5": "Migrating to v6",
+    "/material-ui/migration/migration-css-theme-variables": "Migrating to CSS theme variables",
     "Upgrade to v5": "Upgrade to v5",
     "/material-ui/migration/migration-v4": "Migrating to v5: getting started",
     "/material-ui/migration/v5-style-changes": "Breaking changes: style and theme",
@@ -276,7 +276,6 @@
     "/material-ui/discover-more": "Discover more",
     "/material-ui/discover-more/showcase": "Showcase",
     "/material-ui/discover-more/related-projects": "Related projects",
-    "/material-ui/discover-more/design-kits": "Design kits",
     "/material-ui/discover-more/roadmap": "Roadmap",
     "/material-ui/discover-more/backers": "Sponsors and Backers",
     "/material-ui/discover-more/vision": "Vision",
diff --git a/docs/types/docs.d.ts b/docs/types/docs.d.ts
index ccfe104621b766..fc96dea50c386a 100644
--- a/docs/types/docs.d.ts
+++ b/docs/types/docs.d.ts
@@ -10,7 +10,7 @@ declare module 'docs/src/modules/components/HighlightedCode' {
      */
     code: string;
     copyButtonHidden?: boolean;
-    copyButtonProps?: JSX.IntrinsicElements['button'];
+    copyButtonProps?: React.JSX.IntrinsicElements['button'];
     /**
      * short identifier of the code language
      * see @mui/internal-markdown/prism for possible languages
@@ -23,7 +23,7 @@ declare module 'docs/src/modules/components/HighlightedCode' {
     component?: React.ElementType;
     sx?: object;
   }
-  export default function HighlightedCode(props: Props): React.ReactElement;
+  export default function HighlightedCode(props: Props): React.ReactElement<any>;
 }
 
 declare module 'react-imask';
diff --git a/examples/material-ui-via-cdn/index.html b/examples/material-ui-via-cdn/index.html
index 253082f973bc5b..35d028fb989b3a 100644
--- a/examples/material-ui-via-cdn/index.html
+++ b/examples/material-ui-via-cdn/index.html
@@ -16,10 +16,10 @@
     <script type="importmap">
       {
         "imports": {
-          "react": "https://esm.sh/react@18.3.0",
-          "react-dom": "https://esm.sh/react-dom@18.3.0",
-          "react/jsx-runtime": "https://esm.sh/react@18.3.0/jsx-runtime",
-          "@mui/material": "https://esm.sh/@mui/material?external=react"
+          "react": "https://esm.sh/react@latest",
+          "react-dom": "https://esm.sh/react-dom@latest",
+          "react/jsx-runtime": "https://esm.sh/react@latest/jsx-runtime",
+          "@mui/material": "https://esm.sh/@mui/material@latest?external=react"
         }
       }
     </script>
@@ -32,13 +32,87 @@
     <script type="text/babel" data-type="module">
       import * as React from 'react';
       import { createRoot } from 'react-dom';
-      import { Button } from '@mui/material';
+      import {
+        colors,
+        CssBaseline,
+        ThemeProvider,
+        Typography,
+        Container,
+        createTheme,
+        Box,
+        SvgIcon,
+        Link,
+      } from '@mui/material';
+
+      // Create a theme instance.
+      const theme = createTheme({
+        palette: {
+          primary: {
+            main: '#556cd6',
+          },
+          secondary: {
+            main: '#19857b',
+          },
+          error: {
+            main: colors.red.A400,
+          },
+        },
+      });
+
+      function LightBulbIcon(props) {
+        return (
+          <SvgIcon {...props}>
+            <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+          </SvgIcon>
+        );
+      }
+
+      function ProTip() {
+        return (
+          <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
+            <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+            {'Pro tip: See more '}
+            <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>
+            {' in the Material UI documentation.'}
+          </Typography>
+        );
+      }
+
+      function Copyright() {
+        return (
+          <Typography variant="body2" color="text.secondary" align="center">
+            {'Copyright © '}
+            <Link color="inherit" href="https://mui.com/">
+              Your Website
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+          </Typography>
+        );
+      }
 
       function App() {
-        return <Button variant="contained">Button</Button>;
+        return (
+          <Container maxWidth="sm">
+            <Box sx={{ my: 4 }}>
+              <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+                Material UI CDN example
+              </Typography>
+              <ProTip />
+              <Copyright />
+            </Box>
+          </Container>
+        );
       }
 
-      createRoot(document.getElementById('root')).render(<App />);
+      const root = createRoot(document.getElementById('root'));
+      root.render(
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <App />
+        </ThemeProvider>,
+      );
     </script>
   </body>
 </html>
diff --git a/netlify/functions/feedback-management.mts b/netlify/functions/feedback-management.mts
index 051317beeafcd4..df1f852b44bcb5 100644
--- a/netlify/functions/feedback-management.mts
+++ b/netlify/functions/feedback-management.mts
@@ -8,25 +8,72 @@ const X_FEEBACKS_CHANNEL_ID = 'C04U3R2V9UK';
 const JOY_FEEBACKS_CHANNEL_ID = 'C050VE13HDL';
 const TOOLPAD_FEEBACKS_CHANNEL_ID = 'C050MHU703Z';
 const CORE_FEEBACKS_CHANNEL_ID = 'C041SDSF32L';
+
+const BASE_UI_FEEBACKS_CHANNEL_ID = 'C075LJG1LMP';
+const MATERIAL_UI_FEEBACKS_CHANNEL_ID = 'C0757QYLK7V';
+// const PIGMENT_CSS_FEEBACKS_CHANNEL_ID = 'C074TBW0JKZ';
+const X_GRID_FEEBACKS_CHANNEL_ID = 'C0757R0KW67';
+const X_CHARTS_FEEBACKS_CHANNEL_ID = 'C0757UBND98';
+const X_EXPLORE_FEEBACKS_CHANNEL_ID = 'C074TBYQK2T';
+// const DESIGN_KITS_FEEBACKS_CHANNEL_ID = 'C075ADGN0UU';
+
 // The design feedback alert was removed in https://github.com/mui/material-ui/pull/39691
 // This dead code is here to simplify the creation of special feedback channel
 const DESIGN_FEEDBACKS_CHANNEL_ID = 'C05HHSFH2QJ';
 
-const getSlackChannelId = (url, specialCases) => {
+export type MuiProductId =
+  | 'null'
+  | 'base-ui'
+  | 'material-ui'
+  | 'joy-ui'
+  | 'system'
+  | 'docs-infra'
+  | 'docs'
+  | 'x-data-grid'
+  | 'x-date-pickers'
+  | 'x-charts'
+  | 'x-tree-view'
+  | 'toolpad-studio'
+  | 'toolpad-core';
+
+const getSlackChannelId = (
+  url: string,
+  productId: MuiProductId,
+  specialCases: { isDesignFeedback?: boolean },
+) => {
   const { isDesignFeedback } = specialCases;
 
   if (isDesignFeedback) {
     return DESIGN_FEEDBACKS_CHANNEL_ID;
   }
+
+  switch (productId) {
+    case 'base-ui':
+      return BASE_UI_FEEBACKS_CHANNEL_ID;
+    case 'material-ui':
+    case 'system':
+      return MATERIAL_UI_FEEBACKS_CHANNEL_ID;
+    case 'joy-ui':
+      return JOY_FEEBACKS_CHANNEL_ID;
+    case 'x-data-grid':
+      return X_GRID_FEEBACKS_CHANNEL_ID;
+    case 'x-date-pickers':
+    case 'x-tree-view':
+      return X_EXPLORE_FEEBACKS_CHANNEL_ID;
+    case 'x-charts':
+      return X_CHARTS_FEEBACKS_CHANNEL_ID;
+    case 'toolpad-studio':
+    case 'toolpad-core':
+      return TOOLPAD_FEEBACKS_CHANNEL_ID;
+    default:
+      break;
+  }
+
+  // Fallback
+
   if (url.includes('/x/')) {
     return X_FEEBACKS_CHANNEL_ID;
   }
-  if (url.includes('/joy-ui/')) {
-    return JOY_FEEBACKS_CHANNEL_ID;
-  }
-  if (url.includes('/toolpad/')) {
-    return TOOLPAD_FEEBACKS_CHANNEL_ID;
-  }
   return CORE_FEEBACKS_CHANNEL_ID;
 };
 
@@ -154,6 +201,7 @@ export const handler: Handler = async (event, context, callback) => {
         commmentSectionURL: inCommmentSectionURL,
         commmentSectionTitle,
         githubRepo,
+        productId,
       } = data;
 
       // The design feedback alert was removed in https://github.com/mui/material-ui/pull/39691
@@ -181,7 +229,7 @@ from ${commmentSectionURL}
       });
 
       await app.client.chat.postMessage({
-        channel: getSlackChannelId(currentLocationURL, { isDesignFeedback }),
+        channel: getSlackChannelId(currentLocationURL, productId, { isDesignFeedback }),
         text: simpleSlackMessage, // Fallback for notification
         blocks: [
           {
diff --git a/package.json b/package.json
index 7f5e8108211eb5..c6cfaaa02436d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/monorepo",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-alpha.9",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -43,7 +43,7 @@
     "jsonlint": "node ./scripts/jsonlint.mjs",
     "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
     "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
-    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\"",
+    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\" --ignore-path .gitignore",
     "markdownlint": "markdownlint-cli2 \"**/*.md\"",
     "valelint": "git ls-files | grep -h \".md$\" | xargs vale --filter='.Level==\"error\"'",
     "prettier": "pretty-quick --ignore-path .eslintignore --branch next",
@@ -54,68 +54,76 @@
     "test": "node scripts/test.mjs",
     "tc": "node test/cli.js",
     "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
-    "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test:coverage": "nx run nx_test_coverage",
+    "test:coverage:ci": "nx run nx_test_coverage_ci",
+    "test:coverage:html": "nx run nx_test_coverage_html",
     "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"",
-    "test:e2e:build": "webpack --config test/e2e/webpack.config.js",
+    "test:e2e:build": "nx run nx_test_e2e_build",
     "test:e2e:dev": "concurrently \"pnpm test:e2e:build --watch\" \"pnpm test:e2e:server\"",
-    "test:e2e:run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'",
+    "test:e2e:run": "nx run nx_test_e2e_run",
     "test:e2e:server": "serve test/e2e -p 5001",
     "test:e2e-website": "playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
     "test:e2e-website:dev": "cross-env PLAYWRIGHT_TEST_BASE_URL=http://localhost:3000 playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
-    "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
-    "test:karma:profile": "cross-env NODE_ENV=test karma start test/karma.conf.profile.js",
+    "test:karma": "nx run nx_test_karma",
+    "test:karma:profile": "nx run nx_test_karma_profile",
     "test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"",
     "test:regressions:build": "webpack --config test/regressions/webpack.config.js",
     "test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"",
-    "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
+    "test:regressions:run": "nx run nx_test_regressions_run",
     "test:regressions:server": "serve test/regressions -p 5001",
-    "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test:unit": "nx run nx_test_unit",
     "test:argos": "node ./scripts/pushArgos.mjs",
     "typescript": "lerna run --no-bail --parallel typescript",
     "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript",
     "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts",
     "generate-codeowners": "node scripts/generateCodeowners.mjs",
-    "canary:release": "tsx ./scripts/canaryRelease.mts"
+    "canary:release": "tsx ./scripts/canaryRelease.mts",
+    "nx_test_coverage_ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "nx_test_coverage_html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "nx_test_coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "nx_test_e2e_build": "webpack --config test/e2e/webpack.config.js",
+    "nx_test_e2e_run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'",
+    "nx_test_karma_profile": "cross-env NODE_ENV=test karma start test/karma.conf.profile.js",
+    "nx_test_karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
+    "nx_test_regressions_run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
+    "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'"
   },
   "dependencies": {
-    "@googleapis/sheets": "^5.0.5",
-    "@slack/bolt": "^3.18.0",
+    "@googleapis/sheets": "^7.0.0",
     "@netlify/functions": "^2.7.0",
+    "@slack/bolt": "^3.18.0",
     "execa": "^8.0.1",
     "google-auth-library": "^9.10.0"
   },
   "devDependencies": {
     "@argos-ci/core": "^2.2.0",
-    "@babel/cli": "^7.24.5",
-    "@babel/core": "^7.24.5",
-    "@babel/node": "^7.23.9",
-    "@babel/plugin-transform-react-constant-elements": "^7.24.1",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/register": "^7.23.7",
+    "@babel/cli": "^7.24.6",
+    "@babel/core": "^7.24.6",
+    "@babel/node": "^7.24.6",
+    "@babel/plugin-transform-react-constant-elements": "^7.24.6",
+    "@babel/plugin-transform-runtime": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@babel/register": "^7.24.6",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
-    "@mui/internal-docs-utils": "workspace:^",
-    "@mui/internal-scripts": "workspace:^",
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui-internal/api-docs-builder-core": "workspace:^",
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-docs-utils": "workspace:^",
+    "@mui/internal-scripts": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/utils": "workspace:^",
     "@next/eslint-plugin-next": "^14.2.3",
     "@octokit/rest": "^20.1.1",
     "@pigment-css/react": "^0.0.10",
-    "@playwright/test": "1.44.0",
+    "@playwright/test": "1.44.1",
     "@types/enzyme": "^3.10.18",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.4",
     "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.33",
-    "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.55",
     "@types/yargs": "^17.0.32",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -132,12 +140,12 @@
     "concurrently": "^8.2.2",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "danger": "^11.3.1",
+    "danger": "^12.3.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-babel": "^5.3.1",
@@ -165,7 +173,7 @@
     "mocha": "^10.4.0",
     "nx": "^17.3.2",
     "nyc": "^15.1.0",
-    "piscina": "^4.4.0",
+    "piscina": "^4.5.1",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
@@ -176,7 +184,7 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-processor-styled-components": "^1.10.0",
     "terser-webpack-plugin": "^5.3.10",
-    "tsx": "^4.10.5",
+    "tsx": "^4.11.0",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.2",
@@ -188,14 +196,14 @@
     "pnpm": "8.15.8"
   },
   "resolutions": {
-    "@babel/core": "^7.24.5",
-    "@babel/code-frame": "^7.24.2",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/runtime": "^7.24.5",
-    "@babel/types": "^7.24.5",
+    "@babel/core": "^7.24.6",
+    "@babel/code-frame": "^7.24.6",
+    "@babel/plugin-transform-runtime": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@babel/runtime": "^7.24.6",
+    "@babel/types": "^7.24.6",
     "@definitelytyped/header-parser": "^0.2.9",
     "@definitelytyped/typescript-versions": "^0.1.1",
     "@definitelytyped/utils": "^0.1.6",
@@ -214,5 +222,54 @@
     ],
     "sourceMap": false,
     "instrument": false
+  },
+  "nx": {
+    "targets": {
+      "nx_test_unit": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_karma": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_karma_profile": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_coverage": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_coverage_ci": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_coverage_html": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_regressions_run": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_e2e_build": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_e2e_run": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      }
+    }
   }
 }
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
index 678e2489a648f9..7dcff86edbdc57 100644
--- a/packages-internal/scripts/package.json
+++ b/packages-internal/scripts/package.json
@@ -25,11 +25,11 @@
     "typescript": "tsc --build tsconfig.typecheck.json"
   },
   "dependencies": {
-    "@babel/core": "^7.24.5",
+    "@babel/core": "^7.24.6",
     "@babel/plugin-syntax-class-properties": "^7.12.13",
-    "@babel/plugin-syntax-jsx": "^7.24.1",
-    "@babel/plugin-syntax-typescript": "^7.24.1",
-    "@babel/types": "^7.24.5",
+    "@babel/plugin-syntax-jsx": "^7.24.6",
+    "@babel/plugin-syntax-typescript": "^7.24.6",
+    "@babel/types": "^7.24.6",
     "@mui/internal-docs-utils": "workspace:^",
     "doctrine": "^3.0.0",
     "lodash": "^4.17.21",
@@ -37,13 +37,12 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/register": "^7.23.7",
+    "@babel/register": "^7.24.6",
     "@types/babel__core": "^7.20.5",
     "@types/chai": "^4.3.16",
     "@types/doctrine": "^0.0.9",
     "@types/lodash": "^4.17.4",
     "@types/node": "^18.19.33",
-    "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.55",
     "@types/uuid": "^9.0.8",
     "chai": "^4.4.1",
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/input.d.ts
index 953ef5a74ea240..5481039977a030 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/input.d.ts
@@ -4,4 +4,4 @@ type Props = {
   baz?: false;
 };
 
-export default function Foo(props: Props): JSX.Element;
+export default function Foo(props: Props): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/input.d.ts
index 5567ba9073b92c..e7aa7242683598 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/input.d.ts
@@ -4,4 +4,4 @@ type Props = {
   baz: false;
 };
 
-export default function Foo(props: Props): JSX.Element;
+export default function Foo(props: Props): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/code-order/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/code-order/input.d.ts
index 4aeb223970ab39..0574e9ebe9651b 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/code-order/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/code-order/input.d.ts
@@ -4,4 +4,4 @@ export interface Props {
   value: unknown;
 }
 
-export default function Component(props: Props): JSX.Element;
+export default function Component(props: Props): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/default-value/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/default-value/input.d.ts
index 013e60b90d7ae4..6a227c3c2101ec 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/default-value/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/default-value/input.d.ts
@@ -6,4 +6,4 @@ interface Props {
   type?: 'button' | 'reset' | 'submit';
 }
 
-export function Foo(props: Props): JSX.Element;
+export function Foo(props: Props): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/input.d.ts
index ae12666f21c37d..38cb5e239a5192 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/input.d.ts
@@ -3,4 +3,4 @@ export function Foo(props: {
   optional?: Element;
   htmlElement: HTMLElement;
   bothTypes: Element | HTMLElement;
-}): JSX.Element;
+}): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/generic/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/generic/input.d.ts
index a9e29a70c9b050..61227d0f785937 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/generic/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/generic/input.d.ts
@@ -7,4 +7,4 @@ interface ParentProps<T extends Type> {
 
 interface ChildProps extends ParentProps<'one' | 'two'> {}
 
-export function Foo(props: ChildProps): JSX.Element;
+export function Foo(props: ChildProps): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.d.ts
index 6c9d2db1d951be..47ee0a18f6dfd3 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.d.ts
@@ -1,3 +1,3 @@
 import * as React from 'react';
 
-export default function Modal(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export default function Modal(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/input.d.ts
index 6a1e4b7aedd2ba..b06a97e352fd75 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/input.d.ts
@@ -2,4 +2,4 @@ type TextFieldProps<A extends boolean> = A extends true ? { testProp: string } :
 
 type Props<A extends boolean = false> = Omit<TextFieldProps<A>, 'b'>
 
-export function Foo<A extends boolean = false>(props: Props<A>): JSX.Element;
+export function Foo<A extends boolean = false>(props: Props<A>): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/input.d.ts
index d9fddc0e5f9303..406b40ac196649 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/input.d.ts
@@ -5,9 +5,9 @@ interface ButtonProps {
 }
 
 interface Component<C extends React.ElementType = 'div'> {
-  (props: ButtonProps): JSX.Element;
-  (props: { component: C } & ButtonProps): JSX.Element;
+  (props: ButtonProps): React.JSX.Element;
+  (props: { component: C } & ButtonProps): React.JSX.Element;
 }
 
 // a component using overloading and intersection of function signature
-declare const ButtonBase: Component & ((props: { href: string } & ButtonProps) => JSX.Element);
+declare const ButtonBase: Component & ((props: { href: string } & ButtonProps) => React.JSX.Element);
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/input.d.ts
index 03a37509db9dac..d11bad94c16c3f 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/input.d.ts
@@ -2,4 +2,4 @@ type Props = {
   foo: any;
 };
 
-export default function Foo(props: Partial<Props>): JSX.Element;
+export default function Foo(props: Partial<Props>): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/input.tsx
index 7c16789e21a3bf..89dccc3a6f106d 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/input.tsx
+++ b/packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/input.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 // empty props are likely a mistake.
 // We want to make sure we catch this instead of keeping .propTypes
-export default function Component(props: {}): JSX.Element {
+export default function Component(props: {}): React.JSX.Element {
   return <div />;
 }
 
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts
index 6e43fc6bc542bb..324e24da284d4f 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts
@@ -4,4 +4,4 @@ interface Props {
   children?: React.ReactNode;
 }
 
-export default function Component(props: Props): JSX.Element;
+export default function Component(props: Props): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.d.ts
index 5379600ee91549..7eefff1a862f14 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.d.ts
@@ -11,4 +11,4 @@ export interface Props {
   only?: Breakpoint | Breakpoint[];
 }
 
-export default function Hidden(props: Props): JSX.Element;
+export default function Hidden(props: Props): React.JSX.Element;
diff --git a/packages-internal/scripts/typescript-to-proptypes/test/union-props/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/union-props/input.d.ts
index 551c9bcf1002ff..f5debd26d41bc7 100644
--- a/packages-internal/scripts/typescript-to-proptypes/test/union-props/input.d.ts
+++ b/packages-internal/scripts/typescript-to-proptypes/test/union-props/input.d.ts
@@ -16,4 +16,4 @@ export interface FilledProps extends BaseProps {
 
 export type TextFieldProps = StandardProps | OutlinedProps | FilledProps;
 
-export default function TextField(props: TextFieldProps): JSX.Element;
+export default function TextField(props: TextFieldProps): React.JSX.Element;
diff --git a/packages-internal/test-utils/CHANGELOG.md b/packages-internal/test-utils/CHANGELOG.md
new file mode 100644
index 00000000000000..a6c93f9bf457a6
--- /dev/null
+++ b/packages-internal/test-utils/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+Initial release as an npm package.
diff --git a/packages-internal/test-utils/README.md b/packages-internal/test-utils/README.md
new file mode 100644
index 00000000000000..44b9199879e356
--- /dev/null
+++ b/packages-internal/test-utils/README.md
@@ -0,0 +1,9 @@
+# @mui/internal-test-utils
+
+This package contains test runner initialization functions and common tests shared between MUI packages.
+This is an internal package not meant for general use.
+
+## Release
+
+1. Build the project: `pnpm build`
+2. Publish the build artifacts to npm: `pnpm release:publish`
diff --git a/packages-internal/test-utils/package.json b/packages-internal/test-utils/package.json
new file mode 100644
index 00000000000000..f12d770fa985d2
--- /dev/null
+++ b/packages-internal/test-utils/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@mui/internal-test-utils",
+  "version": "1.0.0",
+  "author": "MUI Team",
+  "description": "Utilities for MUI tests. This is an internal package not meant for general use.",
+  "main": "./build/index.js",
+  "exports": {
+    ".": "./build/index.js",
+    "./createDescribe": "./build/createDescribe.js",
+    "./createRenderer": "./build/createRenderer.js",
+    "./init": "./build/init.js",
+    "./initMatchers": {
+      "types": "./build/initMatchers.d.ts",
+      "default": "./build/initMatchers.js"
+    },
+    "./initPlaywrightMatchers": {
+      "types": "./build/initPlaywrightMatchers.d.ts",
+      "default": "./build/initPlaywrightMatchers.js"
+    },
+    "./KarmaReporterReactProfiler": "./build/KarmaReporterReactProfiler.js",
+    "./setupBabel": "./build/setupBabel.js",
+    "./setupBabelPlaywright": "./build/setupBabelPlaywright.js",
+    "./setupJSDOM": "./build/setupJSDOM.js",
+    "./setupKarma": "./build/setupKarma.js"
+  },
+  "scripts": {
+    "prebuild": "rimraf ./build",
+    "build": "tsc -b tsconfig.build.json",
+    "typescript": "tsc -b tsconfig.json",
+    "release:publish": "pnpm publish --tag latest",
+    "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\""
+  },
+  "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@babel/register": "^7.24.6",
+    "@babel/runtime": "^7.24.6",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^15.0.7",
+    "chai": "^4.4.1",
+    "chai-dom": "^1.12.0",
+    "dom-accessibility-api": "^0.6.3",
+    "enzyme": "^3.11.0",
+    "format-util": "^1.0.5",
+    "fs-extra": "^11.2.0",
+    "jsdom": "^24.0.0",
+    "lodash": "^4.17.21",
+    "mocha": "^10.4.0",
+    "playwright": "^1.44.1",
+    "prop-types": "^15.8.1",
+    "react-test-renderer": "^18.2.0",
+    "sinon": "^16.1.3"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.3.16",
+    "@types/chai-dom": "^1.11.3",
+    "@types/enzyme": "^3.10.18",
+    "@types/format-util": "^1.0.4",
+    "@types/prop-types": "^15.7.12",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-test-renderer": "^18.3.0",
+    "@types/sinon": "^17.0.3",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/test-utils/src/KarmaReporterReactProfiler.js b/packages-internal/test-utils/src/KarmaReporterReactProfiler.js
similarity index 100%
rename from packages/test-utils/src/KarmaReporterReactProfiler.js
rename to packages-internal/test-utils/src/KarmaReporterReactProfiler.js
diff --git a/packages/test-utils/src/components.tsx b/packages-internal/test-utils/src/components.tsx
similarity index 100%
rename from packages/test-utils/src/components.tsx
rename to packages-internal/test-utils/src/components.tsx
diff --git a/packages/test-utils/src/createDOM.d.ts b/packages-internal/test-utils/src/createDOM.d.ts
similarity index 100%
rename from packages/test-utils/src/createDOM.d.ts
rename to packages-internal/test-utils/src/createDOM.d.ts
diff --git a/packages/test-utils/src/createDOM.js b/packages-internal/test-utils/src/createDOM.js
similarity index 96%
rename from packages/test-utils/src/createDOM.js
rename to packages-internal/test-utils/src/createDOM.js
index 867653ea38ccd8..c08017b408cf81 100644
--- a/packages/test-utils/src/createDOM.js
+++ b/packages-internal/test-utils/src/createDOM.js
@@ -54,10 +54,6 @@ function createDOM() {
   }
   global.window.Touch = Touch;
 
-  global.navigator = {
-    userAgent: 'node.js',
-  };
-
   Object.keys(dom.window)
     .filter((key) => !blacklist.includes(key))
     .concat(whitelist)
diff --git a/packages/test-utils/src/createDescribe.ts b/packages-internal/test-utils/src/createDescribe.ts
similarity index 100%
rename from packages/test-utils/src/createDescribe.ts
rename to packages-internal/test-utils/src/createDescribe.ts
diff --git a/packages/test-utils/src/createMount.tsx b/packages-internal/test-utils/src/createMount.tsx
similarity index 98%
rename from packages/test-utils/src/createMount.tsx
rename to packages-internal/test-utils/src/createMount.tsx
index 03f0d273d08bff..f690f03a7bb327 100644
--- a/packages/test-utils/src/createMount.tsx
+++ b/packages-internal/test-utils/src/createMount.tsx
@@ -11,7 +11,7 @@ interface ModeProps {
    * using `wrapper.setProps({ children })` would work differently if this component
    * would be the root.
    */
-  __element: React.ReactElement;
+  __element: React.ReactElement<any>;
   __strict: boolean;
 }
 
@@ -93,7 +93,7 @@ export default function createMount(options: CreateMountOptions = {}) {
   });
 
   const mountWithContext = function mountWithContext(
-    node: React.ReactElement,
+    node: React.ReactElement<any>,
     localOptions: Omit<CreateMountOptions, 'mount'> = {},
   ) {
     const { strict = globalStrict, ...localEnzymeOptions } = localOptions;
diff --git a/packages/test-utils/src/createRenderer.test.js b/packages-internal/test-utils/src/createRenderer.test.js
similarity index 100%
rename from packages/test-utils/src/createRenderer.test.js
rename to packages-internal/test-utils/src/createRenderer.test.js
diff --git a/packages/test-utils/src/createRenderer.tsx b/packages-internal/test-utils/src/createRenderer.tsx
similarity index 97%
rename from packages/test-utils/src/createRenderer.tsx
rename to packages-internal/test-utils/src/createRenderer.tsx
index 33d7a6017dfa3b..4813c6a5e63236 100644
--- a/packages/test-utils/src/createRenderer.tsx
+++ b/packages-internal/test-utils/src/createRenderer.tsx
@@ -281,7 +281,7 @@ export interface MuiRenderToStringResult {
 }
 
 function render(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   configuration: ClientRenderConfiguration,
 ): MuiRenderResult {
   const { container, hydrate, wrapper } = configuration;
@@ -316,7 +316,7 @@ function render(
 }
 
 function renderToString(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   configuration: ServerRenderConfiguration,
 ): { container: HTMLElement; hydrate(): MuiRenderResult } {
   const { container, wrapper: Wrapper } = configuration;
@@ -438,8 +438,11 @@ function createClock(defaultMode: 'fake' | 'real', config: ClockConfig): Clock {
 
 interface Renderer {
   clock: Clock;
-  render(element: React.ReactElement, options?: RenderOptions): MuiRenderResult;
-  renderToString(element: React.ReactElement, options?: RenderOptions): MuiRenderToStringResult;
+  render(element: React.ReactElement<any>, options?: RenderOptions): MuiRenderResult;
+  renderToString(
+    element: React.ReactElement<any>,
+    options?: RenderOptions,
+  ): MuiRenderToStringResult;
 }
 
 export interface CreateRendererOptions extends Pick<RenderOptions, 'strict' | 'strictEffects'> {
@@ -577,7 +580,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
 
   return {
     clock,
-    render(element: React.ReactElement, options: RenderOptions = {}) {
+    render(element: React.ReactElement<any>, options: RenderOptions = {}) {
       if (!prepared) {
         throw new Error(
           'Unable to finish setup before `render()` was called. ' +
@@ -592,7 +595,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
         wrapper: createWrapper(options),
       });
     },
-    renderToString(element: React.ReactElement, options: RenderOptions = {}) {
+    renderToString(element: React.ReactElement<any>, options: RenderOptions = {}) {
       if (!prepared) {
         throw new Error(
           'Unable to finish setup before `render()` was called. ' +
diff --git a/packages/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx
similarity index 95%
rename from packages/test-utils/src/describeConformance.tsx
rename to packages-internal/test-utils/src/describeConformance.tsx
index 1c5b6505118dfe..4cb6d35c2120bb 100644
--- a/packages/test-utils/src/describeConformance.tsx
+++ b/packages-internal/test-utils/src/describeConformance.tsx
@@ -26,7 +26,7 @@ export interface SlotTestingOptions {
   /**
    * A custom HTML tag to use for the `slots` prop.
    */
-  testWithElement?: keyof JSX.IntrinsicElements | null;
+  testWithElement?: keyof React.JSX.IntrinsicElements | null;
   /**
    * To ensure that the slot has this class name when `slotProps` is provided.
    */
@@ -45,8 +45,8 @@ export interface ConformanceOptions {
   refInstanceof: any;
   after?: () => void;
   inheritComponent?: React.ElementType;
-  render: (node: React.ReactElement) => MuiRenderResult;
-  mount?: (node: React.ReactElement) => ReactWrapper;
+  render: (node: React.ReactElement<any>) => MuiRenderResult;
+  mount?: (node: React.ReactElement<any>) => ReactWrapper;
   only?: Array<keyof typeof fullSuite>;
   skip?: Array<keyof typeof fullSuite | 'classesRoot'>;
   testComponentsRootPropWith?: string;
@@ -58,8 +58,8 @@ export interface ConformanceOptions {
   testVariantProps?: object;
   testLegacyComponentsProp?: boolean;
   wrapMount?: (
-    mount: (node: React.ReactElement) => ReactWrapper,
-  ) => (node: React.ReactElement) => ReactWrapper;
+    mount: (node: React.ReactElement<any>) => ReactWrapper,
+  ) => (node: React.ReactElement<any>) => ReactWrapper;
   slots?: Record<string, SlotTestingOptions>;
   ThemeProvider?: React.ElementType;
   createTheme?: (arg: any) => any;
@@ -79,7 +79,7 @@ function assertDOMNode(node: unknown) {
  * The element should have a component wrapped in withStyles as the root
  */
 function testRef(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   mount: ConformanceOptions['mount'],
   onRef: (instance: unknown, wrapper: import('enzyme').ReactWrapper) => void = assertDOMNode,
 ) {
@@ -129,7 +129,10 @@ function throwMissingPropError(field: string): never {
  * MUI components have a `className` prop. The `className` is applied to
  * the root component.
  */
-export function testClassName(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+export function testClassName(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   it('applies the className to the root component', () => {
     const { mount } = getOptions();
     if (!mount) {
@@ -149,7 +152,7 @@ export function testClassName(element: React.ReactElement, getOptions: () => Con
  * Component from @inheritComponent
  */
 export function testComponentProp(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   describe('prop: component', () => {
@@ -169,7 +172,10 @@ export function testComponentProp(
 /**
  * MUI components can spread additional props to a documented component.
  */
-export function testPropsSpread(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+export function testPropsSpread(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   it(`spreads props to the root component`, () => {
     // type def in ConformanceOptions
     const { inheritComponent, mount } = getOptions();
@@ -199,7 +205,10 @@ export function testPropsSpread(element: React.ReactElement, getOptions: () => C
  * This is determined by a given constructor i.e. a React.Component or HTMLElement for
  * components that forward their ref and attach it to a host component.
  */
-export function describeRef(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+export function describeRef(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   describe('ref', () => {
     it(`attaches the ref`, () => {
       // type def in ConformanceOptions
@@ -220,7 +229,10 @@ export function describeRef(element: React.ReactElement, getOptions: () => Confo
 /**
  * Tests that the root component has the root class
  */
-export function testRootClass(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+export function testRootClass(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   it('applies the root class to the root component if it has this class', () => {
     const { classes, render, skip } = getOptions();
     if (classes.root == null) {
@@ -259,7 +271,7 @@ export function testRootClass(element: React.ReactElement, getOptions: () => Con
  * Tests that the component can be rendered with react-test-renderer.
  * This is important for snapshot testing with Jest (even if we don't encourage it).
  */
-export function testReactTestRenderer(element: React.ReactElement) {
+export function testReactTestRenderer(element: React.ReactElement<any>) {
   it('should render without errors in ReactTestRenderer', () => {
     ReactTestRenderer.act(() => {
       ReactTestRenderer.create(element, {
@@ -286,7 +298,7 @@ function forEachSlot(
   });
 }
 
-function testSlotsProp(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+function testSlotsProp(element: React.ReactElement<any>, getOptions: () => ConformanceOptions) {
   const { render, slots, testLegacyComponentsProp } = getOptions();
 
   const CustomComponent = React.forwardRef<
@@ -457,7 +469,7 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => Conformanc
   });
 }
 
-function testSlotPropsProp(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+function testSlotPropsProp(element: React.ReactElement<any>, getOptions: () => ConformanceOptions) {
   const { render, slots, testLegacyComponentsProp } = getOptions();
 
   if (!render) {
@@ -540,7 +552,10 @@ function testSlotPropsProp(element: React.ReactElement, getOptions: () => Confor
   });
 }
 
-function testSlotPropsCallback(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+function testSlotPropsCallback(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   const { render, slots } = getOptions();
 
   if (!render) {
@@ -568,7 +583,10 @@ function testSlotPropsCallback(element: React.ReactElement, getOptions: () => Co
  * MUI components have a `components` prop that allows rendering a different
  * Components from @inheritComponent
  */
-function testComponentsProp(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+function testComponentsProp(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   describe('prop components:', () => {
     it('can render another root component with the `components` prop', () => {
       const { mount, testComponentsRootPropWith: component = 'em' } = getOptions();
@@ -587,7 +605,10 @@ function testComponentsProp(element: React.ReactElement, getOptions: () => Confo
  * MUI theme has a components section that allows specifying default props.
  * Components from @inheritComponent
  */
-function testThemeDefaultProps(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+function testThemeDefaultProps(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   describe('theme default components:', () => {
     it("respect theme's defaultProps", () => {
       const testProp = 'data-id';
@@ -631,7 +652,7 @@ function testThemeDefaultProps(element: React.ReactElement, getOptions: () => Co
  * Components from @inheritComponent
  */
 function testThemeStyleOverrides(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   describe('theme style overrides:', () => {
@@ -877,7 +898,7 @@ function testThemeStyleOverrides(
  * MUI theme has a components section that allows specifying custom variants.
  * Components from @inheritComponent
  */
-function testThemeVariants(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+function testThemeVariants(element: React.ReactElement<any>, getOptions: () => ConformanceOptions) {
   describe('theme variants:', () => {
     it("respect theme's variants", function test() {
       if (/jsdom/.test(window.navigator.userAgent)) {
@@ -982,7 +1003,10 @@ function testThemeVariants(element: React.ReactElement, getOptions: () => Confor
  * MUI theme supports custom palettes.
  * The components that iterate over the palette via `variants` should be able to render with or without applying the custom palette styles.
  */
-function testThemeCustomPalette(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+function testThemeCustomPalette(
+  element: React.ReactElement<any>,
+  getOptions: () => ConformanceOptions,
+) {
   describe('theme extended palette:', () => {
     it('should render without errors', function test() {
       const { render, ThemeProvider, createTheme } = getOptions();
@@ -1026,7 +1050,7 @@ const fullSuite = {
  * components.
  */
 function describeConformance(
-  minimalElement: React.ReactElement,
+  minimalElement: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   let originalMatchmedia: typeof window.matchMedia;
diff --git a/packages/test-utils/src/findOutermostIntrinsic.test.js b/packages-internal/test-utils/src/findOutermostIntrinsic.test.js
similarity index 100%
rename from packages/test-utils/src/findOutermostIntrinsic.test.js
rename to packages-internal/test-utils/src/findOutermostIntrinsic.test.js
diff --git a/packages/test-utils/src/findOutermostIntrinsic.ts b/packages-internal/test-utils/src/findOutermostIntrinsic.ts
similarity index 100%
rename from packages/test-utils/src/findOutermostIntrinsic.ts
rename to packages-internal/test-utils/src/findOutermostIntrinsic.ts
diff --git a/packages/test-utils/src/fireDiscreteEvent.ts b/packages-internal/test-utils/src/fireDiscreteEvent.ts
similarity index 100%
rename from packages/test-utils/src/fireDiscreteEvent.ts
rename to packages-internal/test-utils/src/fireDiscreteEvent.ts
diff --git a/packages/test-utils/src/flushMicrotasks.ts b/packages-internal/test-utils/src/flushMicrotasks.ts
similarity index 100%
rename from packages/test-utils/src/flushMicrotasks.ts
rename to packages-internal/test-utils/src/flushMicrotasks.ts
diff --git a/packages/test-utils/src/focusVisible.ts b/packages-internal/test-utils/src/focusVisible.ts
similarity index 100%
rename from packages/test-utils/src/focusVisible.ts
rename to packages-internal/test-utils/src/focusVisible.ts
diff --git a/packages/test-utils/src/index.ts b/packages-internal/test-utils/src/index.ts
similarity index 100%
rename from packages/test-utils/src/index.ts
rename to packages-internal/test-utils/src/index.ts
diff --git a/packages/test-utils/src/init.js b/packages-internal/test-utils/src/init.js
similarity index 100%
rename from packages/test-utils/src/init.js
rename to packages-internal/test-utils/src/init.js
diff --git a/packages/test-utils/src/initMatchers.test.js b/packages-internal/test-utils/src/initMatchers.test.js
similarity index 100%
rename from packages/test-utils/src/initMatchers.test.js
rename to packages-internal/test-utils/src/initMatchers.test.js
diff --git a/packages/test-utils/src/initMatchers.ts b/packages-internal/test-utils/src/initMatchers.ts
similarity index 100%
rename from packages/test-utils/src/initMatchers.ts
rename to packages-internal/test-utils/src/initMatchers.ts
diff --git a/packages/test-utils/src/initPlaywrightMatchers.ts b/packages-internal/test-utils/src/initPlaywrightMatchers.ts
similarity index 100%
rename from packages/test-utils/src/initPlaywrightMatchers.ts
rename to packages-internal/test-utils/src/initPlaywrightMatchers.ts
diff --git a/packages/test-utils/src/mochaHooks.js b/packages-internal/test-utils/src/mochaHooks.js
similarity index 100%
rename from packages/test-utils/src/mochaHooks.js
rename to packages-internal/test-utils/src/mochaHooks.js
diff --git a/packages/test-utils/src/mochaHooks.test.js b/packages-internal/test-utils/src/mochaHooks.test.js
similarity index 100%
rename from packages/test-utils/src/mochaHooks.test.js
rename to packages-internal/test-utils/src/mochaHooks.test.js
diff --git a/packages/test-utils/src/setup.js b/packages-internal/test-utils/src/setup.js
similarity index 100%
rename from packages/test-utils/src/setup.js
rename to packages-internal/test-utils/src/setup.js
diff --git a/packages/test-utils/src/setupBabel.js b/packages-internal/test-utils/src/setupBabel.js
similarity index 100%
rename from packages/test-utils/src/setupBabel.js
rename to packages-internal/test-utils/src/setupBabel.js
diff --git a/packages/test-utils/src/setupBabelPlaywright.js b/packages-internal/test-utils/src/setupBabelPlaywright.js
similarity index 100%
rename from packages/test-utils/src/setupBabelPlaywright.js
rename to packages-internal/test-utils/src/setupBabelPlaywright.js
diff --git a/packages/test-utils/src/setupJSDOM.js b/packages-internal/test-utils/src/setupJSDOM.js
similarity index 100%
rename from packages/test-utils/src/setupJSDOM.js
rename to packages-internal/test-utils/src/setupJSDOM.js
diff --git a/packages/test-utils/src/setupKarma.js b/packages-internal/test-utils/src/setupKarma.js
similarity index 100%
rename from packages/test-utils/src/setupKarma.js
rename to packages-internal/test-utils/src/setupKarma.js
diff --git a/packages/test-utils/src/until.js b/packages-internal/test-utils/src/until.js
similarity index 100%
rename from packages/test-utils/src/until.js
rename to packages-internal/test-utils/src/until.js
diff --git a/packages/test-utils/src/until.test.js b/packages-internal/test-utils/src/until.test.js
similarity index 100%
rename from packages/test-utils/src/until.test.js
rename to packages-internal/test-utils/src/until.test.js
diff --git a/packages/test-utils/src/userEvent.ts b/packages-internal/test-utils/src/userEvent.ts
similarity index 100%
rename from packages/test-utils/src/userEvent.ts
rename to packages-internal/test-utils/src/userEvent.ts
diff --git a/packages-internal/test-utils/tsconfig.build.json b/packages-internal/test-utils/tsconfig.build.json
new file mode 100644
index 00000000000000..62bf0d03440fe5
--- /dev/null
+++ b/packages-internal/test-utils/tsconfig.build.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./build",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noEmit": false,
+    "composite": true,
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "target": "ES2020",
+    "module": "commonjs",
+    "types": ["node"],
+    "allowJs": true
+  }
+}
diff --git a/packages-internal/test-utils/tsconfig.json b/packages-internal/test-utils/tsconfig.json
new file mode 100644
index 00000000000000..7aca675ada6360
--- /dev/null
+++ b/packages-internal/test-utils/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "moduleResolution": "node",
+    "types": ["node"],
+    "strict": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react"
+  },
+  "include": ["./src/**/*"]
+}
diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json
index 4be0cb0c177caa..0b70ab0a58e8fd 100644
--- a/packages/api-docs-builder-core/package.json
+++ b/packages/api-docs-builder-core/package.json
@@ -18,9 +18,9 @@
     "@types/chai": "^4.3.16",
     "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.33",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
-    "sinon": "^15.2.0",
+    "sinon": "^16.1.3",
     "typescript": "^5.4.5"
   }
 }
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 5c39c67af43796..5ad3416c3d59c8 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -11,6 +11,7 @@ import type { Link } from 'mdast';
 import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen';
 import { renderMarkdown } from '@mui/internal-markdown';
 import { ComponentClassDefinition } from '@mui/internal-docs-utils';
+import { parse as parseDoctrine, Annotation } from 'doctrine';
 import { ProjectSettings, SortingStrategiesType } from '../ProjectSettings';
 import { ComponentInfo, toGitHubPath, writePrettifiedFile } from '../buildApiUtils';
 import muiDefaultPropsHandler from '../utils/defaultPropsHandler';
@@ -80,6 +81,7 @@ export interface ReactApi extends ReactDocgenApi {
   imports: string[];
   translations: {
     componentDescription: string;
+    deprecationInfo: string | undefined;
     propDescriptions: {
       [key: string]: {
         description: string;
@@ -103,6 +105,7 @@ export interface ReactApi extends ReactDocgenApi {
    * The folder used to store the API translation.
    */
   apiDocsTranslationFolder?: string;
+  deprecated: true | undefined;
 }
 
 const cssComponents = ['Box', 'Grid', 'Typography', 'Stack'];
@@ -147,7 +150,7 @@ export async function computeApiDescription(
  *  *
  *  * - [Icon API](https://mui.com/api/icon/)
  */
-async function annotateComponentDefinition(api: ReactApi) {
+async function annotateComponentDefinition(api: ReactApi, componentJsdoc: Annotation) {
   const HOST = 'https://mui.com';
 
   const typesFilename = api.filename.replace(/\.js$/, '.d.ts');
@@ -283,7 +286,7 @@ async function annotateComponentDefinition(api: ReactApi) {
   }
 
   let inheritanceAPILink = null;
-  if (api.inheritance !== null) {
+  if (api.inheritance) {
     inheritanceAPILink = `[${api.inheritance.name} API](${
       api.inheritance.apiPathname.startsWith('http')
         ? api.inheritance.apiPathname
@@ -314,10 +317,18 @@ async function annotateComponentDefinition(api: ReactApi) {
       api.apiPathname.startsWith('http') ? api.apiPathname : `${HOST}${api.apiPathname}`
     })`,
   );
-  if (api.inheritance !== null) {
+  if (api.inheritance) {
     markdownLines.push(`- inherits ${inheritanceAPILink}`);
   }
 
+  if (componentJsdoc.tags.length > 0) {
+    markdownLines.push('');
+  }
+
+  componentJsdoc.tags.forEach((tag) => {
+    markdownLines.push(`@${tag.title}${tag.name ? ` ${tag.name} -` : ''} ${tag.description}`);
+  });
+
   const jsdoc = `/**\n${markdownLines
     .map((line) => (line.length > 0 ? ` * ${line}` : ` *`))
     .join('\n')}\n */`;
@@ -400,6 +411,7 @@ const generateApiPage = async (
       .map((item) => `<li><a href="${item.demoPathname}">${item.demoPageTitle}</a></li>`)
       .join('\n')}</ul>`,
     cssComponent: cssComponents.indexOf(reactApi.name) >= 0,
+    deprecated: reactApi.deprecated,
   };
 
   const { classesSort = sortAlphabetical('key'), slotsSort = null } = {
@@ -454,9 +466,14 @@ const generateApiPage = async (
   }
 };
 
-const attachTranslations = (reactApi: ReactApi, settings?: CreateDescribeablePropSettings) => {
+const attachTranslations = (
+  reactApi: ReactApi,
+  deprecationInfo: string | undefined,
+  settings?: CreateDescribeablePropSettings,
+) => {
   const translations: ReactApi['translations'] = {
     componentDescription: reactApi.description,
+    deprecationInfo: deprecationInfo ? renderMarkdown(deprecationInfo) : undefined,
     propDescriptions: {},
     classDescriptions: {},
   };
@@ -738,13 +755,19 @@ export default async function generateComponentApi(
     reactApi.props = {};
   }
 
+  const { getComponentImports = defaultGetComponentImports } = projectSettings;
+  const componentJsdoc = parseDoctrine(reactApi.description);
+
+  // We override `reactApi.description` with `componentJsdoc.description` because
+  // the former can include JSDoc tags that we don't want to render in the docs.
+  reactApi.description = componentJsdoc.description;
+
   // Ignore what we might have generated in `annotateComponentDefinition`
   const annotatedDescriptionMatch = reactApi.description.match(/(Demos|API):\r?\n\r?\n/);
   if (annotatedDescriptionMatch !== null) {
     reactApi.description = reactApi.description.slice(0, annotatedDescriptionMatch.index).trim();
   }
 
-  const { getComponentImports = defaultGetComponentImports } = projectSettings;
   reactApi.filename = filename;
   reactApi.name = componentInfo.name;
   reactApi.imports = getComponentImports(componentInfo.name, filename);
@@ -754,6 +777,7 @@ export default async function generateComponentApi(
   reactApi.slots = [];
   reactApi.classes = [];
   reactApi.demos = componentInfo.getDemos();
+  reactApi.inheritance = null;
   if (reactApi.demos.length === 0) {
     throw new Error(
       'Unable to find demos. \n' +
@@ -769,7 +793,8 @@ export default async function generateComponentApi(
     reactApi.spread = testInfo.spread ?? spread;
     reactApi.themeDefaultProps = testInfo.themeDefaultProps;
     reactApi.inheritance = componentInfo.getInheritance(testInfo.inheritComponent);
-  } catch (e) {
+  } catch (error: any) {
+    console.error(error.message);
     if (project.name.includes('grid')) {
       // TODO: Use `describeConformance` for the DataGrid components
       reactApi.forwardsRefTo = 'GridRoot';
@@ -789,8 +814,13 @@ export default async function generateComponentApi(
     reactApi.classes = classes;
   }
 
+  const deprecation = componentJsdoc.tags.find((tag) => tag.title === 'deprecated');
+  const deprecationInfo = deprecation?.description || undefined;
+
+  reactApi.deprecated = !!deprecation || undefined;
+
   attachPropsTable(reactApi, projectSettings.propsSettings);
-  attachTranslations(reactApi, projectSettings.propsSettings);
+  attachTranslations(reactApi, deprecationInfo, projectSettings.propsSettings);
 
   // eslint-disable-next-line no-console
   console.log('Built API docs for', reactApi.apiPathname);
@@ -825,7 +855,7 @@ export default async function generateComponentApi(
         : !skipAnnotatingComponentDefinition
     ) {
       // Add comment about demo & api links (including inherited component) to the component file
-      await annotateComponentDefinition(reactApi);
+      await annotateComponentDefinition(reactApi, componentJsdoc);
     }
   }
 
diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
index 2f48f39bc9d73f..1df6ccac4bd82b 100644
--- a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
@@ -8,6 +8,7 @@ import traverse from '@babel/traverse';
 import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen';
 import kebabCase from 'lodash/kebabCase';
 import upperFirst from 'lodash/upperFirst';
+import { parse as parseDoctrine, Annotation } from 'doctrine';
 import { renderMarkdown } from '@mui/internal-markdown';
 import { ProjectSettings } from '../ProjectSettings';
 import { computeApiDescription } from './ComponentApiBuilder';
@@ -78,6 +79,7 @@ export interface ReactApi extends ReactDocgenApi {
   }>;
   translations: {
     hookDescription: string;
+    deprecationInfo: string | undefined;
     parametersDescriptions: {
       [key: string]: {
         description: string;
@@ -95,6 +97,7 @@ export interface ReactApi extends ReactDocgenApi {
    * The folder used to store the API translation.
    */
   apiDocsTranslationFolder?: string;
+  deprecated: true | undefined;
 }
 
 /**
@@ -108,7 +111,7 @@ export interface ReactApi extends ReactDocgenApi {
  * *
  * * - [useButton API](https://mui.com/base-ui/api/use-button/)
  */
-async function annotateHookDefinition(api: ReactApi) {
+async function annotateHookDefinition(api: ReactApi, hookJsdoc: Annotation) {
   const HOST = 'https://mui.com';
 
   const typesFilename = api.filename.replace(/\.js$/, '.d.ts');
@@ -285,6 +288,14 @@ async function annotateHookDefinition(api: ReactApi) {
     })`,
   );
 
+  if (hookJsdoc.tags.length > 0) {
+    markdownLines.push('');
+  }
+
+  hookJsdoc.tags.forEach((tag) => {
+    markdownLines.push(`@${tag.title}${tag.name ? ` ${tag.name} -` : ''} ${tag.description}`);
+  });
+
   const jsdoc = `/**\n${markdownLines
     .map((line) => (line.length > 0 ? ` * ${line}` : ` *`))
     .join('\n')}\n */`;
@@ -361,9 +372,10 @@ const generateTranslationDescription = (description: string) => {
   return renderMarkdown(description.replace(/\n@default.*$/, ''));
 };
 
-const attachTranslations = (reactApi: ReactApi) => {
+const attachTranslations = (reactApi: ReactApi, deprecationInfo: string | undefined) => {
   const translations: ReactApi['translations'] = {
     hookDescription: reactApi.description,
+    deprecationInfo: deprecationInfo ? renderMarkdown(deprecationInfo).trim() : undefined,
     parametersDescriptions: {},
     returnValueDescriptions: {},
   };
@@ -431,6 +443,7 @@ const generateApiJson = async (outputDirectory: string, reactApi: ReactApi) => {
     demos: `<ul>${reactApi.demos
       .map((item) => `<li><a href="${item.demoPathname}">${item.demoPageTitle}</a></li>`)
       .join('\n')}</ul>`,
+    deprecated: reactApi.deprecated,
   };
 
   await writePrettifiedFile(
@@ -546,6 +559,11 @@ export default async function generateHookApi(
 
   const parameters = await extractInfoFromType(`${upperFirst(name)}Parameters`, project);
   const returnValue = await extractInfoFromType(`${upperFirst(name)}ReturnValue`, project);
+  const hookJsdoc = parseDoctrine(reactApi.description);
+
+  // We override `reactApi.description` with `hookJsdoc.description` because
+  // the former can include JSDoc tags that we don't want to render in the docs.
+  reactApi.description = hookJsdoc.description;
 
   // Ignore what we might have generated in `annotateHookDefinition`
   const annotatedDescriptionMatch = reactApi.description.match(/(Demos|API):\r?\n\r?\n/);
@@ -575,7 +593,12 @@ export default async function generateHookApi(
   attachTable(reactApi, returnValue, 'returnValueTable');
   reactApi.returnValue = returnValue;
 
-  attachTranslations(reactApi);
+  const deprecation = hookJsdoc.tags.find((tag) => tag.title === 'deprecated');
+  const deprecationInfo = deprecation?.description || undefined;
+
+  reactApi.deprecated = !!deprecation || undefined;
+
+  attachTranslations(reactApi, deprecationInfo);
 
   // eslint-disable-next-line no-console
   console.log('Built API docs for', reactApi.name);
@@ -590,7 +613,7 @@ export default async function generateHookApi(
     await generateApiJson(apiPagesDirectory, reactApi);
 
     // Add comment about demo & api links to the component hook file
-    await annotateHookDefinition(reactApi);
+    await annotateHookDefinition(reactApi, hookJsdoc);
   }
 
   return reactApi;
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index 0b7f7fee186de5..04a6f399f536de 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.24.5",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/traverse": "^7.24.5",
+    "@babel/core": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@babel/traverse": "^7.24.6",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-markdown": "workspace:^",
     "ast-types": "^0.14.2",
@@ -27,15 +27,15 @@
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
-    "@types/babel__traverse": "^7.20.5",
+    "@types/babel__traverse": "^7.20.6",
     "@types/chai": "^4.3.16",
     "@types/doctrine": "^0.0.9",
     "@types/mdast": "4.0.4",
     "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.33",
     "@types/react-docgen": "workspace:*",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   }
 }
diff --git a/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js b/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js
index 785736f28d1aad..6e90f6c1898800 100644
--- a/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js
+++ b/packages/eslint-plugin-material-ui/src/rules/disallow-active-elements-as-key-event-target.test.js
@@ -7,13 +7,13 @@ const ruleTester = new eslint.RuleTester({
 });
 ruleTester.run('disallow-active-element-as-key-event-target', rule, {
   valid: [
-    "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyDown(getByRole('button'), { key: ' ' })",
-    "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyDown(document.body, { key: 'Esc' })",
-    "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyUp(document.body, { key: 'Tab' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(getByRole('button'), { key: ' ' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(document.body, { key: 'Esc' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.body, { key: 'Tab' })",
   ],
   invalid: [
     {
-      code: "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyUp(document.activeElement, { key: 'LeftArrow' })",
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.activeElement, { key: 'LeftArrow' })",
       errors: [
         {
           message:
@@ -23,7 +23,7 @@ ruleTester.run('disallow-active-element-as-key-event-target', rule, {
       ],
     },
     {
-      code: "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyDown(document.activeElement, { key: 'DownArrow' })",
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(document.activeElement, { key: 'DownArrow' })",
       errors: [
         {
           message:
@@ -54,7 +54,7 @@ ruleTester.run('disallow-active-element-as-key-event-target', rule, {
     },
     {
       // test non-null assertion operator
-      code: "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyUp(document.activeElement!, { key: 'LeftArrow' })",
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.activeElement!, { key: 'LeftArrow' })",
       errors: [
         {
           message:
diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 896c284c4f9b37..d8feb509df76a1 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -25,6 +25,6 @@
     "claudia": "^5.14.1"
   },
   "optionalDependencies": {
-    "aws-sdk": "^2.1623.0"
+    "aws-sdk": "^2.1628.0"
   }
 }
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index e28a35a052f2d4..db788f7a1643db 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -20,7 +20,7 @@
     "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\""
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "lodash": "^4.17.21",
     "marked": "^5.1.2",
     "prismjs": "^1.29.0"
diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js
index 878bdea7e768db..79f8cf1f42a798 100644
--- a/packages/markdown/prepareMarkdown.js
+++ b/packages/markdown/prepareMarkdown.js
@@ -39,6 +39,9 @@ function resolveComponentApiUrl(productId, componentPkg, component) {
   if (componentPkg === 'mui-base' || BaseUIReexportedComponents.indexOf(component) >= 0) {
     return `/base-ui/react-${kebabCase(component)}/components-api/#${kebabCase(component)}`;
   }
+  if (productId === 'toolpad-core') {
+    return `/toolpad/core/api/${kebabCase(component)}/`;
+  }
   return `/${productId}/api/${kebabCase(component)}/`;
 }
 
diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json
index d4d029f674b17a..b272d251109ff3 100644
--- a/packages/mui-babel-macros/package.json
+++ b/packages/mui-babel-macros/package.json
@@ -23,8 +23,8 @@
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-babel-macros/**/*.test.{js,ts,tsx}'"
   },
   "dependencies": {
-    "@babel/helper-module-imports": "^7.24.3",
-    "@babel/runtime": "^7.24.5",
+    "@babel/helper-module-imports": "^7.24.6",
+    "@babel/runtime": "^7.24.6",
     "babel-plugin-macros": "^3.1.0"
   },
   "devDependencies": {
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index d7048db66cddd1..47a50adeb24fce 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.46",
+  "version": "5.0.0-beta.47",
   "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.",
@@ -40,8 +40,8 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@floating-ui/react-dom": "^2.0.8",
+    "@babel/runtime": "^7.24.6",
+    "@floating-ui/react-dom": "^2.1.0",
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
     "@popperjs/core": "^2.11.8",
@@ -49,22 +49,22 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
     "@mui/internal-babel-macros": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/types": "workspace:^",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.16",
     "@types/prop-types": "^15.7.12",
     "@types/react": "18.2.55",
     "@types/react-dom": "18.3.0",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
diff --git a/packages/mui-base/src/Badge/Badge.test.tsx b/packages/mui-base/src/Badge/Badge.test.tsx
index 141121f541adf1..57a1e60771a831 100644
--- a/packages/mui-base/src/Badge/Badge.test.tsx
+++ b/packages/mui-base/src/Badge/Badge.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, createMount } from '@mui-internal/test-utils';
+import { createRenderer, createMount } from '@mui/internal-test-utils';
 import { Badge, badgeClasses as classes } from '@mui/base/Badge';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
diff --git a/packages/mui-base/src/Button/Button.test.tsx b/packages/mui-base/src/Button/Button.test.tsx
index 2fabf5e4a81cb7..5c47b422cf2c4b 100644
--- a/packages/mui-base/src/Button/Button.test.tsx
+++ b/packages/mui-base/src/Button/Button.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, createMount, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createMount, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { Button, buttonClasses } from '@mui/base/Button';
diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
index a0032961f41db8..1cbd6e67d15e50 100644
--- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js
@@ -8,7 +8,7 @@ import {
   fireEvent,
   fireDiscreteEvent,
   screen,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { Portal } from '@mui/base/Portal';
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 
diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
index dbdfcee7f097d1..ee00d7d9fc8d2b 100644
--- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
@@ -35,7 +35,7 @@ export interface ClickAwayListenerProps {
   /**
    * The wrapped element.
    */
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   /**
    * If `true`, the React tree is ignored and only the DOM tree is considered.
    * This prop changes how portaled elements are handled.
@@ -70,7 +70,7 @@ export interface ClickAwayListenerProps {
  *
  * - [ClickAwayListener API](https://mui.com/base-ui/react-click-away-listener/components-api/#click-away-listener)
  */
-function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {
+function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
   const {
     children,
     disableReactTree = false,
diff --git a/packages/mui-base/src/Dropdown/Dropdown.test.tsx b/packages/mui-base/src/Dropdown/Dropdown.test.tsx
index a8596e735f550f..dde3e91b3c4bbc 100644
--- a/packages/mui-base/src/Dropdown/Dropdown.test.tsx
+++ b/packages/mui-base/src/Dropdown/Dropdown.test.tsx
@@ -6,7 +6,7 @@ import {
   flushMicrotasks,
   MuiRenderResult,
   RenderOptions,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { Dropdown } from '@mui/base/Dropdown';
 import { DropdownContext } from '@mui/base/useDropdown';
 import { MenuButton } from '@mui/base/MenuButton';
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.test.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.test.tsx
index b0cef9b7b289b0..1cca94309e0e8d 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.test.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
-import { act, createRenderer, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, screen } from '@mui/internal-test-utils';
 import { FocusTrap } from '@mui/base/FocusTrap';
 import { Portal } from '@mui/base/Portal';
 
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index bd52658ac9b7df..3d00b5fc6f7bdc 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -132,7 +132,7 @@ function defaultIsEnabled(): boolean {
  *
  * - [FocusTrap API](https://mui.com/base-ui/react-focus-trap/components-api/#focus-trap)
  */
-function FocusTrap(props: FocusTrapProps): JSX.Element {
+function FocusTrap(props: FocusTrapProps): React.JSX.Element {
   const {
     children,
     disableAutoFocus = false,
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.types.ts b/packages/mui-base/src/FocusTrap/FocusTrap.types.ts
index 70c6861eeaf4f7..be9cf5ee1e93c3 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.types.ts
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.types.ts
@@ -24,7 +24,7 @@ export interface FocusTrapProps {
   /**
    * A single child content element.
    */
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   /**
    * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.
diff --git a/packages/mui-base/src/FormControl/FormControl.test.tsx b/packages/mui-base/src/FormControl/FormControl.test.tsx
index 5556594730bd10..07d68dd4ed5775 100644
--- a/packages/mui-base/src/FormControl/FormControl.test.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createMount, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createMount, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { FormControl, formControlClasses, useFormControlContext } from '@mui/base/FormControl';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
diff --git a/packages/mui-base/src/Input/Input.test.tsx b/packages/mui-base/src/Input/Input.test.tsx
index 9b6ab632a816d3..cd1031e0239323 100644
--- a/packages/mui-base/src/Input/Input.test.tsx
+++ b/packages/mui-base/src/Input/Input.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createMount, createRenderer, fireEvent, screen, act } from '@mui-internal/test-utils';
+import { createMount, createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { Input, inputClasses, InputOwnerState } from '@mui/base/Input';
diff --git a/packages/mui-base/src/Menu/Menu.test.tsx b/packages/mui-base/src/Menu/Menu.test.tsx
index 98075cc60ac684..325e1b601062c3 100644
--- a/packages/mui-base/src/Menu/Menu.test.tsx
+++ b/packages/mui-base/src/Menu/Menu.test.tsx
@@ -9,7 +9,7 @@ import {
   MuiRenderResult,
   RenderOptions,
   flushMicrotasks,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { Menu, menuClasses } from '@mui/base/Menu';
 import { MenuItem, MenuItemRootSlotProps } from '@mui/base/MenuItem';
 import { DropdownContext, DropdownContextValue } from '@mui/base/useDropdown';
diff --git a/packages/mui-base/src/MenuButton/MenuButton.test.tsx b/packages/mui-base/src/MenuButton/MenuButton.test.tsx
index fa1fdbf1cf676b..fac3364dbcc5c9 100644
--- a/packages/mui-base/src/MenuButton/MenuButton.test.tsx
+++ b/packages/mui-base/src/MenuButton/MenuButton.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
-import { act, createMount, createRenderer } from '@mui-internal/test-utils';
+import { act, createMount, createRenderer } from '@mui/internal-test-utils';
 import { MenuButton, menuButtonClasses } from '@mui/base/MenuButton';
 import { DropdownContext, DropdownContextValue, DropdownActionTypes } from '@mui/base/useDropdown';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
diff --git a/packages/mui-base/src/MenuItem/MenuItem.test.tsx b/packages/mui-base/src/MenuItem/MenuItem.test.tsx
index 52498ff641935b..a60f727c3a87ad 100644
--- a/packages/mui-base/src/MenuItem/MenuItem.test.tsx
+++ b/packages/mui-base/src/MenuItem/MenuItem.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { MenuItem, menuItemClasses } from '@mui/base/MenuItem';
 import { MenuProvider } from '@mui/base/useMenu';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
diff --git a/packages/mui-base/src/Modal/Modal.test.tsx b/packages/mui-base/src/Modal/Modal.test.tsx
index d57885194867c0..feecda642f5c20 100644
--- a/packages/mui-base/src/Modal/Modal.test.tsx
+++ b/packages/mui-base/src/Modal/Modal.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { Modal, modalClasses as classes, ModalRootSlotProps } from '@mui/base/Modal';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
diff --git a/packages/mui-base/src/Modal/Modal.types.ts b/packages/mui-base/src/Modal/Modal.types.ts
index 899d1721291cdc..8aa7f1ea29ee85 100644
--- a/packages/mui-base/src/Modal/Modal.types.ts
+++ b/packages/mui-base/src/Modal/Modal.types.ts
@@ -10,7 +10,7 @@ export interface ModalOwnProps {
   /**
    * A single child content element.
    */
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false
diff --git a/packages/mui-base/src/NoSsr/NoSsr.test.tsx b/packages/mui-base/src/NoSsr/NoSsr.test.tsx
index 16a1a6e3cdf9f1..3fa928a48b4be0 100644
--- a/packages/mui-base/src/NoSsr/NoSsr.test.tsx
+++ b/packages/mui-base/src/NoSsr/NoSsr.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { NoSsr } from '@mui/base/NoSsr';
 
 describe('<NoSsr />', () => {
diff --git a/packages/mui-base/src/NoSsr/NoSsr.tsx b/packages/mui-base/src/NoSsr/NoSsr.tsx
index e2abe25adfb3fd..c637df94e70b61 100644
--- a/packages/mui-base/src/NoSsr/NoSsr.tsx
+++ b/packages/mui-base/src/NoSsr/NoSsr.tsx
@@ -22,7 +22,7 @@ import { NoSsrProps } from './NoSsr.types';
  *
  * - [NoSsr API](https://mui.com/base-ui/react-no-ssr/components-api/#no-ssr)
  */
-function NoSsr(props: NoSsrProps): JSX.Element {
+function NoSsr(props: NoSsrProps): React.JSX.Element {
   const { children, defer = false, fallback = null } = props;
   const [mountedState, setMountedState] = React.useState(false);
 
diff --git a/packages/mui-base/src/Option/Option.test.tsx b/packages/mui-base/src/Option/Option.test.tsx
index 584e91f4cd44be..b3f326d22a26d3 100644
--- a/packages/mui-base/src/Option/Option.test.tsx
+++ b/packages/mui-base/src/Option/Option.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { Option, optionClasses } from '@mui/base/Option';
 import { SelectProvider } from '../useSelect/SelectProvider';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
diff --git a/packages/mui-base/src/Option/Option.types.ts b/packages/mui-base/src/Option/Option.types.ts
index 3e08daa5712c90..907b8a8f601775 100644
--- a/packages/mui-base/src/Option/Option.types.ts
+++ b/packages/mui-base/src/Option/Option.types.ts
@@ -65,7 +65,7 @@ export interface OptionType {
     RootComponentType extends React.ElementType = OptionTypeMap<OptionValue>['defaultComponent'],
   >(
     props: PolymorphicProps<OptionTypeMap<OptionValue>, RootComponentType>,
-  ): JSX.Element | null;
+  ): React.JSX.Element | null;
   propTypes?: any;
   displayName?: string | undefined;
 }
diff --git a/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx b/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
index 27a8bcdcff83ce..f242b7830fb248 100644
--- a/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
+++ b/packages/mui-base/src/OptionGroup/OptionGroup.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { OptionGroup, optionGroupClasses } from '@mui/base/OptionGroup';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
diff --git a/packages/mui-base/src/Popper/Popper.test.tsx b/packages/mui-base/src/Popper/Popper.test.tsx
index 26160e8e82651e..f9332c71120dcb 100644
--- a/packages/mui-base/src/Popper/Popper.test.tsx
+++ b/packages/mui-base/src/Popper/Popper.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, createMount, screen } from '@mui-internal/test-utils';
+import { createRenderer, createMount, screen } from '@mui/internal-test-utils';
 import { Popper, popperClasses } from '@mui/base/Popper';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
diff --git a/packages/mui-base/src/Portal/Portal.test.tsx b/packages/mui-base/src/Portal/Portal.test.tsx
index 2d0091ac5539fb..4b9b0a6f9a6b3f 100644
--- a/packages/mui-base/src/Portal/Portal.test.tsx
+++ b/packages/mui-base/src/Portal/Portal.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Portal, PortalProps } from '@mui/base/Portal';
 
 describe('<Portal />', () => {
diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx
index f01024916eddf8..d3ec34e600d7c0 100644
--- a/packages/mui-base/src/Select/Select.test.tsx
+++ b/packages/mui-base/src/Select/Select.test.tsx
@@ -10,7 +10,7 @@ import {
   MuiRenderResult,
   RenderOptions,
   flushMicrotasks,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import userEvent from '@testing-library/user-event';
 import { Select, SelectListboxSlotProps, selectClasses } from '@mui/base/Select';
 import { SelectOption } from '@mui/base/useOption';
diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts
index cca29cc508554d..d6cd2b1c35aa72 100644
--- a/packages/mui-base/src/Select/Select.types.ts
+++ b/packages/mui-base/src/Select/Select.types.ts
@@ -191,7 +191,7 @@ export interface SelectType {
     >['defaultComponent'],
   >(
     props: PolymorphicProps<SelectTypeMap<OptionValue, Multiple>, RootComponentType>,
-  ): JSX.Element | null;
+  ): React.JSX.Element | null;
   propTypes?: any;
   displayName?: string | undefined;
 }
diff --git a/packages/mui-base/src/Slider/Slider.test.tsx b/packages/mui-base/src/Slider/Slider.test.tsx
index e6d70d846091f6..0c426a2544f2b1 100644
--- a/packages/mui-base/src/Slider/Slider.test.tsx
+++ b/packages/mui-base/src/Slider/Slider.test.tsx
@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import * as React from 'react';
 import { spy, stub } from 'sinon';
-import { act, createRenderer, createMount, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, createMount, fireEvent, screen } from '@mui/internal-test-utils';
 import {
   Slider,
   sliderClasses as classes,
diff --git a/packages/mui-base/src/Snackbar/Snackbar.test.tsx b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
index 3cd45136355ba5..70c147c8fd3af1 100644
--- a/packages/mui-base/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-base/src/Snackbar/Snackbar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, createMount, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, createMount, fireEvent } from '@mui/internal-test-utils';
 import { Snackbar, snackbarClasses as classes } from '@mui/base/Snackbar';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
@@ -17,7 +17,7 @@ describe('<Snackbar />', () => {
    * We have to defer the effect manually like `useEffect` would so we have to flush the effect manually instead of relying on `act()`.
    * React bug: https://github.com/facebook/react/issues/20074
    */
-  function render(...args: [React.ReactElement]) {
+  function render(...args: [React.ReactElement<any>]) {
     const result = clientRender(...args);
     clock.tick(0);
     return result;
diff --git a/packages/mui-base/src/Switch/Switch.test.tsx b/packages/mui-base/src/Switch/Switch.test.tsx
index e70c5ee78cf0a5..7ebe7e669e50ae 100644
--- a/packages/mui-base/src/Switch/Switch.test.tsx
+++ b/packages/mui-base/src/Switch/Switch.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { Switch, SwitchOwnerState, switchClasses } from '@mui/base/Switch';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
diff --git a/packages/mui-base/src/Tab/Tab.test.tsx b/packages/mui-base/src/Tab/Tab.test.tsx
index 77fde46c3d4087..97cc23fda2bc0b 100644
--- a/packages/mui-base/src/Tab/Tab.test.tsx
+++ b/packages/mui-base/src/Tab/Tab.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { Tab, tabClasses } from '@mui/base/Tab';
 import { TabsListProvider, TabsListProviderValue } from '../useTabsList';
 import { TabsContext } from '../Tabs';
diff --git a/packages/mui-base/src/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/TabPanel/TabPanel.test.tsx
index f9b0b5e97d3b9b..7d37cb6adee3ef 100644
--- a/packages/mui-base/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-base/src/TabPanel/TabPanel.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createMount, createRenderer } from '@mui-internal/test-utils';
+import { createMount, createRenderer } from '@mui/internal-test-utils';
 import { TabPanel, tabPanelClasses } from '@mui/base/TabPanel';
 import { TabsProvider, TabsProviderValue } from '../useTabs';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
diff --git a/packages/mui-base/src/TablePagination/TablePagination.test.tsx b/packages/mui-base/src/TablePagination/TablePagination.test.tsx
index dda030295d5824..0d0c32a88948df 100644
--- a/packages/mui-base/src/TablePagination/TablePagination.test.tsx
+++ b/packages/mui-base/src/TablePagination/TablePagination.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import PropTypes from 'prop-types';
-import { fireEvent, createRenderer, createMount } from '@mui-internal/test-utils';
+import { fireEvent, createRenderer, createMount } from '@mui/internal-test-utils';
 import {
   TablePagination,
   tablePaginationClasses as classes,
diff --git a/packages/mui-base/src/Tabs/Tabs.test.tsx b/packages/mui-base/src/Tabs/Tabs.test.tsx
index 82db18b887ec6b..f75b9a75e49f51 100644
--- a/packages/mui-base/src/Tabs/Tabs.test.tsx
+++ b/packages/mui-base/src/Tabs/Tabs.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen, createMount } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen, createMount } from '@mui/internal-test-utils';
 import { Tab } from '@mui/base/Tab';
 import { Tabs, tabsClasses as classes, TabsProps } from '@mui/base/Tabs';
 import { TabsList } from '@mui/base/TabsList';
diff --git a/packages/mui-base/src/TabsList/TabsList.test.tsx b/packages/mui-base/src/TabsList/TabsList.test.tsx
index 698dc7ce033cd1..f32487522d9486 100644
--- a/packages/mui-base/src/TabsList/TabsList.test.tsx
+++ b/packages/mui-base/src/TabsList/TabsList.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, createMount, createRenderer } from '@mui-internal/test-utils';
+import { act, createMount, createRenderer } from '@mui/internal-test-utils';
 import { Tab } from '@mui/base/Tab';
 import { Tabs, TabsContext } from '@mui/base/Tabs';
 import { TabsList, tabsListClasses } from '@mui/base/TabsList';
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
index 418d35795d263d..696f4821833fe3 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -8,7 +8,7 @@ import {
   createMount,
   createRenderer,
   fireEvent,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { TextareaAutosize } from '@mui/base/TextareaAutosize';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
diff --git a/packages/mui-base/src/Transitions/CssAnimation.test.tsx b/packages/mui-base/src/Transitions/CssAnimation.test.tsx
index 1d56dda2ed5191..828a3b322e0dc8 100644
--- a/packages/mui-base/src/Transitions/CssAnimation.test.tsx
+++ b/packages/mui-base/src/Transitions/CssAnimation.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { CssAnimation } from './CssAnimation';
 import { TransitionContext, TransitionContextValue } from '../useTransition';
 
diff --git a/packages/mui-base/src/Transitions/CssTransition.test.tsx b/packages/mui-base/src/Transitions/CssTransition.test.tsx
index ce9d3b04c651ae..cb2f2980729262 100644
--- a/packages/mui-base/src/Transitions/CssTransition.test.tsx
+++ b/packages/mui-base/src/Transitions/CssTransition.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { CssTransition } from './CssTransition';
 import { TransitionContext, TransitionContextValue } from '../useTransition';
 
diff --git a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
index 223ff1661faae2..99687a3571df0d 100644
--- a/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
+++ b/packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
-import { act, createMount, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createMount, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import {
   Unstable_NumberInput as NumberInput,
   numberInputClasses,
diff --git a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
index 03ae6a31d9195d..a44782ec2105c1 100644
--- a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
+++ b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, createMount, screen, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, createMount, screen, fireEvent } from '@mui/internal-test-utils';
 import { Unstable_Popup as Popup, popupClasses, PopupProps } from '@mui/base/Unstable_Popup';
 import { PopupContext } from './PopupContext';
 import { useTransitionStateManager } from '../useTransition';
diff --git a/packages/mui-base/src/unstable_useModal/useModal.types.ts b/packages/mui-base/src/unstable_useModal/useModal.types.ts
index 337b5b3918dfd0..ef7068b56f3a59 100644
--- a/packages/mui-base/src/unstable_useModal/useModal.types.ts
+++ b/packages/mui-base/src/unstable_useModal/useModal.types.ts
@@ -22,7 +22,7 @@ export type UseModalParameters = {
   /**
    * A single child content element.
    */
-  children: React.ReactElement | undefined | null;
+  children: React.ReactElement<any> | undefined | null;
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
index 67eb51f76b46bc..0b2a628606db49 100644
--- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
+++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import {
   unstable_useNumberInput as useNumberInput,
   UseNumberInputParameters,
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
index 9eeadda0cb3001..7058e9b6562699 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import { useAutocomplete, createFilterOptions } from '@mui/base/useAutocomplete';
 
diff --git a/packages/mui-base/src/useButton/useButton.test.tsx b/packages/mui-base/src/useButton/useButton.test.tsx
index 860114c3eba9fb..17951927d19c08 100644
--- a/packages/mui-base/src/useButton/useButton.test.tsx
+++ b/packages/mui-base/src/useButton/useButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { useButton } from '@mui/base/useButton';
diff --git a/packages/mui-base/src/useCompound/useCompound.test.tsx b/packages/mui-base/src/useCompound/useCompound.test.tsx
index 509e851cf6456b..c1790ce7848d04 100644
--- a/packages/mui-base/src/useCompound/useCompound.test.tsx
+++ b/packages/mui-base/src/useCompound/useCompound.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { render } from '@mui-internal/test-utils';
+import { render } from '@mui/internal-test-utils';
 import { CompoundComponentContext, useCompoundParent } from './useCompoundParent';
 import { useCompoundItem } from './useCompoundItem';
 
diff --git a/packages/mui-base/src/useInput/useInput.test.tsx b/packages/mui-base/src/useInput/useInput.test.tsx
index 9ece7ed65a20ad..1e59e4dd6e0492 100644
--- a/packages/mui-base/src/useInput/useInput.test.tsx
+++ b/packages/mui-base/src/useInput/useInput.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { useInput } from './useInput';
diff --git a/packages/mui-base/src/useList/useList.test.tsx b/packages/mui-base/src/useList/useList.test.tsx
index 1c225a474917bb..ca25e9101b9637 100644
--- a/packages/mui-base/src/useList/useList.test.tsx
+++ b/packages/mui-base/src/useList/useList.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { SinonSpy, spy } from 'sinon';
-import { createRenderer, createEvent, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, createEvent, fireEvent } from '@mui/internal-test-utils';
 import { useList } from './useList';
 
 describe('useList', () => {
diff --git a/packages/mui-base/src/useMenu/useMenu.test.js b/packages/mui-base/src/useMenu/useMenu.test.js
index bca1913869d9a2..6a07680a6e6c07 100644
--- a/packages/mui-base/src/useMenu/useMenu.test.js
+++ b/packages/mui-base/src/useMenu/useMenu.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { MenuItem } from '../MenuItem';
 import { useMenu } from './useMenu';
 
diff --git a/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx b/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx
index b58885e739495c..96a7e446c734a7 100644
--- a/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx
+++ b/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { DropdownContext, DropdownContextValue } from '@mui/base/useDropdown';
 import { useMenuButton } from './useMenuButton';
 
diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx b/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx
index 81b8e9435b303e..0da80599a0098d 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx
+++ b/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { Menu } from '../Menu';
 import { useMenuItem } from './useMenuItem';
 
diff --git a/packages/mui-base/src/useMenuItem/useMenuItemContextStabilizer.ts b/packages/mui-base/src/useMenuItem/useMenuItemContextStabilizer.ts
index fdcb643d437fd5..43e8719d5e0eac 100644
--- a/packages/mui-base/src/useMenuItem/useMenuItemContextStabilizer.ts
+++ b/packages/mui-base/src/useMenuItem/useMenuItemContextStabilizer.ts
@@ -6,9 +6,6 @@ import { ListContext, ListContextValue, ListItemState } from '../useList';
 /**
  * Stabilizes the ListContext value for the MenuItem component, so it doesn't change when sibling items update.
  *
- * @param id The id of the MenuItem. If undefined, it will be generated with useId.
- * @returns The stable ListContext value and the id of the MenuItem.
- *
  * Demos:
  *
  * - [Menu](https://mui.com/base-ui/react-menu/#hooks)
@@ -16,6 +13,9 @@ import { ListContext, ListContextValue, ListItemState } from '../useList';
  * API:
  *
  * - [useMenuItemContextStabilizer API](https://mui.com/base-ui/react-menu/hooks-api/#use-menu-item-context-stabilizer)
+ *
+ * @param id - The id of the MenuItem. If undefined, it will be generated with useId.
+ * @returns The stable ListContext value and the id of the MenuItem.
  */
 export function useMenuItemContextStabilizer(id: string | undefined) {
   const listContext = React.useContext(ListContext as React.Context<ListContextValue<string>>);
diff --git a/packages/mui-base/src/useOption/useOptionContextStabilizer.ts b/packages/mui-base/src/useOption/useOptionContextStabilizer.ts
index 520cb1b8351a70..fe77b4e319f17a 100644
--- a/packages/mui-base/src/useOption/useOptionContextStabilizer.ts
+++ b/packages/mui-base/src/useOption/useOptionContextStabilizer.ts
@@ -5,9 +5,6 @@ import { ListContext, ListContextValue } from '../useList';
 /**
  * Stabilizes the ListContext value for the Option component, so it doesn't change when sibling Options update.
  *
- * @param value The value of the Option.
- * @returns The stable ListContext value.
- *
  * Demos:
  *
  * - [Select](https://mui.com/base-ui/react-select/#hooks)
@@ -15,6 +12,9 @@ import { ListContext, ListContextValue } from '../useList';
  * API:
  *
  * - [useOptionContextStabilizer API](https://mui.com/base-ui/react-select/hooks-api/#use-option-context-stabilizer)
+ *
+ * @param value - The value of the Option.
+ * @returns The stable ListContext value.
  */
 export function useOptionContextStabilizer<OptionValue>(value: OptionValue) {
   const listContext = React.useContext(ListContext as React.Context<ListContextValue<OptionValue>>);
diff --git a/packages/mui-base/src/useSlider/useSlider.test.js b/packages/mui-base/src/useSlider/useSlider.test.js
index c7b964335e184e..e4ee0313bda6a5 100644
--- a/packages/mui-base/src/useSlider/useSlider.test.js
+++ b/packages/mui-base/src/useSlider/useSlider.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { useSlider } from './useSlider';
 
 describe('useSlider', () => {
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.test.tsx b/packages/mui-base/src/useSnackbar/useSnackbar.test.tsx
index 6ee48a71e0e017..cf8c62f2117828 100644
--- a/packages/mui-base/src/useSnackbar/useSnackbar.test.tsx
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { fireEvent, createRenderer } from '@mui-internal/test-utils';
+import { fireEvent, createRenderer } from '@mui/internal-test-utils';
 import { useSnackbar, UseSnackbarParameters } from '@mui/base/useSnackbar';
 
 describe('useSnackbar', () => {
diff --git a/packages/mui-base/src/useSwitch/useSwitch.test.tsx b/packages/mui-base/src/useSwitch/useSwitch.test.tsx
index 49fef25599635a..1a9bb0853af021 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.test.tsx
+++ b/packages/mui-base/src/useSwitch/useSwitch.test.tsx
@@ -8,7 +8,7 @@ import {
   programmaticFocusTriggersFocusVisible,
   screen,
   simulatePointerDevice,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
 
 describe('useSwitch', () => {
diff --git a/packages/mui-base/src/useTab/useTab.test.tsx b/packages/mui-base/src/useTab/useTab.test.tsx
index 047c739c137628..bcb42f3a59f3ff 100644
--- a/packages/mui-base/src/useTab/useTab.test.tsx
+++ b/packages/mui-base/src/useTab/useTab.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { Tabs } from '../Tabs';
 import { TabsList } from '../TabsList';
 import { useTab } from './useTab';
diff --git a/packages/mui-base/src/useTabPanel/useTabPanel.test.js b/packages/mui-base/src/useTabPanel/useTabPanel.test.js
index c516c2ce9b860d..5fe73365620363 100644
--- a/packages/mui-base/src/useTabPanel/useTabPanel.test.js
+++ b/packages/mui-base/src/useTabPanel/useTabPanel.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { Tabs } from '../Tabs';
 import { Tab } from '../Tab';
 import { TabsList } from '../TabsList';
diff --git a/packages/mui-base/src/useTabsList/useTabsList.test.tsx b/packages/mui-base/src/useTabsList/useTabsList.test.tsx
index 02fe3b020c6b1b..ea25334ff1c315 100644
--- a/packages/mui-base/src/useTabsList/useTabsList.test.tsx
+++ b/packages/mui-base/src/useTabsList/useTabsList.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { Tabs } from '../Tabs';
 import { useTabsList } from './useTabsList';
 
diff --git a/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts b/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts
index 2d66c57bc4633a..77e6b6cd4aae0c 100644
--- a/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts
+++ b/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import { renderHook } from '@testing-library/react';
-import { act } from '@mui-internal/test-utils';
+import { act } from '@mui/internal-test-utils';
 import { useTransitionTrigger } from './useTransitionTrigger';
 
 describe('useTransitionTrigger', () => {
diff --git a/packages/mui-base/src/utils/ClassNameConfigurator.test.tsx b/packages/mui-base/src/utils/ClassNameConfigurator.test.tsx
index 85d6db68f7d791..8500ad8f08c08a 100644
--- a/packages/mui-base/src/utils/ClassNameConfigurator.test.tsx
+++ b/packages/mui-base/src/utils/ClassNameConfigurator.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { Switch, switchClasses } from '@mui/base/Switch';
 import { ClassNameConfigurator } from '@mui/base/utils/ClassNameConfigurator';
diff --git a/packages/mui-base/src/utils/PolymorphicComponent.ts b/packages/mui-base/src/utils/PolymorphicComponent.ts
index 0110cfc87ff530..abcc2682228f1f 100644
--- a/packages/mui-base/src/utils/PolymorphicComponent.ts
+++ b/packages/mui-base/src/utils/PolymorphicComponent.ts
@@ -10,7 +10,7 @@ import { DistributiveOmit, OverridableTypeMap } from '@mui/types';
 export type PolymorphicComponent<TypeMap extends OverridableTypeMap> = {
   <RootComponent extends React.ElementType = TypeMap['defaultComponent']>(
     props: PolymorphicProps<TypeMap, RootComponent>,
-  ): JSX.Element | null;
+  ): React.JSX.Element | null;
   propTypes?: any;
   displayName?: string | undefined;
 };
diff --git a/packages/mui-base/src/utils/appendOwnerState.ts b/packages/mui-base/src/utils/appendOwnerState.ts
index 0ef5e0c47a4f60..965867cd8e71f0 100644
--- a/packages/mui-base/src/utils/appendOwnerState.ts
+++ b/packages/mui-base/src/utils/appendOwnerState.ts
@@ -10,7 +10,7 @@ import { isHostComponent } from './isHostComponent';
 type OwnerStateWhenApplicable<ElementType extends React.ElementType, OwnerState> =
   ElementType extends React.ComponentType<any>
     ? OwnerState
-    : ElementType extends keyof JSX.IntrinsicElements
+    : ElementType extends keyof React.JSX.IntrinsicElements
       ? undefined
       : OwnerState | undefined;
 
diff --git a/packages/mui-base/src/utils/prepareForSlot.test.tsx b/packages/mui-base/src/utils/prepareForSlot.test.tsx
index fd6e36368502bc..ff40d34f167f87 100644
--- a/packages/mui-base/src/utils/prepareForSlot.test.tsx
+++ b/packages/mui-base/src/utils/prepareForSlot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Button } from '@mui/base/Button';
 import { prepareForSlot } from './prepareForSlot';
 
diff --git a/packages/mui-base/src/utils/useControllableReducer.test.tsx b/packages/mui-base/src/utils/useControllableReducer.test.tsx
index a6cbde41c2b518..37e043b2c7e665 100644
--- a/packages/mui-base/src/utils/useControllableReducer.test.tsx
+++ b/packages/mui-base/src/utils/useControllableReducer.test.tsx
@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import * as React from 'react';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { useControllableReducer } from './useControllableReducer';
 import { ControllableReducerParameters } from './useControllableReducer.types';
 
diff --git a/packages/mui-base/src/utils/useSlotProps.test.tsx b/packages/mui-base/src/utils/useSlotProps.test.tsx
index 367aeba5ee67cb..f4e02b51fb8808 100644
--- a/packages/mui-base/src/utils/useSlotProps.test.tsx
+++ b/packages/mui-base/src/utils/useSlotProps.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { EventHandlers } from '@mui/base';
 import { useSlotProps, UseSlotPropsParameters, UseSlotPropsResult } from './useSlotProps';
 
diff --git a/packages/mui-base/test/describeConformanceUnstyled.tsx b/packages/mui-base/test/describeConformanceUnstyled.tsx
index 750748d411eed9..508f0b8664062e 100644
--- a/packages/mui-base/test/describeConformanceUnstyled.tsx
+++ b/packages/mui-base/test/describeConformanceUnstyled.tsx
@@ -12,7 +12,7 @@ import {
   testClassName,
   testComponentProp,
   testReactTestRenderer,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { ClassNameConfigurator } from '@mui/base/utils';
 
 export interface UnstyledConformanceOptions
@@ -60,7 +60,7 @@ function forEachSlot(
 }
 
 function testPropForwarding(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => UnstyledConformanceOptions,
 ) {
   const {
@@ -110,7 +110,10 @@ function testPropForwarding(
   });
 }
 
-function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledConformanceOptions) {
+function testSlotsProp(
+  element: React.ReactElement<any>,
+  getOptions: () => UnstyledConformanceOptions,
+) {
   const {
     render,
     slots,
@@ -224,7 +227,7 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledCo
 }
 
 function testSlotPropsProp(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => UnstyledConformanceOptions,
 ) {
   const { render, slots } = getOptions();
@@ -271,7 +274,7 @@ interface TestOwnerState {
 }
 
 function testSlotPropsCallbacks(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => UnstyledConformanceOptions,
 ) {
   const { render, slots } = getOptions();
@@ -307,7 +310,7 @@ function testSlotPropsCallbacks(
 }
 
 function testOwnerStatePropagation(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => UnstyledConformanceOptions,
 ) {
   const {
@@ -359,7 +362,7 @@ function testOwnerStatePropagation(
 }
 
 function testDisablingClassGeneration(
-  element: React.ReactElement,
+  element: React.ReactElement<any>,
   getOptions: () => UnstyledConformanceOptions,
 ) {
   const { render } = getOptions();
@@ -394,7 +397,7 @@ const fullSuite = {
 };
 
 function describeConformance(
-  minimalElement: React.ReactElement,
+  minimalElement: React.ReactElement<any>,
   getOptions: () => UnstyledConformanceOptions,
 ) {
   const { after: runAfterHook = () => {}, only = Object.keys(fullSuite), skip = [] } = getOptions();
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index 2d1c3cdf0345e5..f71396dcf265fe 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -325,6 +325,54 @@ npx @mui/codemod@next deprecations/alert-props <path>
 npx @mui/codemod@next deprecations/autocomplete-props <path>
 ```
 
+#### `avatar-group-props`
+
+```diff
+ <AvatarGroup
+-  componentsProps={{
+-    additionalAvatar: {color: "red"}
++  slotProps={{
++    surplus: {color: "red"}
+   }}
+ />;
+```
+
+```diff
+ <AvatarGroup
+   slotProps={{
+-    additionalAvatar: {color: "red"}
++    surplus: {color: "red"}
+   }}
+ />;
+```
+
+```diff
+ MuiAvatarGroup: {
+   defaultProps: {
+-    componentsProps: {
+-      additionalAvatar: {color: "red"}
++    slotProps: {
++      surplus: {color: "red"}
+     },
+   },
+ },
+```
+
+```diff
+ MuiAvatarGroup: {
+   defaultProps: {
+     slotProps: {
+-      additionalAvatar: {color: "red"}
++      surplus: {color: "red"}
+     },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/avatar-group-props <path>
+```
+
 #### `avatar-props`
 
 ```diff
@@ -960,6 +1008,32 @@ npx @mui/codemod@next deprecations/circular-progress-classes <path>
 npx @mui/codemod@next deprecations/divider-props <path>
 ```
 
+#### `filled-input-props`
+
+```diff
+ <FilledInput
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+-  componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
++  slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ />
+```
+
+```diff
+ MuiFilledInput: {
+   defaultProps: {
+-    components: { Input: CustomInput, Root: CustomRoot }
++    slots: { input: CustomInput, root: CustomRoot },
+-    componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
++    slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/filled-input-props <path>
+```
+
 #### `form-control-label-props`
 
 ```diff
@@ -983,6 +1057,97 @@ npx @mui/codemod@next deprecations/form-control-label-props <path>
 
 ```
 
+#### `list-item-props`
+
+```diff
+ <ListItem
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiListItem: {
+   defaultProps: {
+-    components: { Root: CustomRoot }
++    slots: { root: CustomRoot },
+-    componentsProps: { root: { testid: 'test-id' }}
++    slotProps: { root: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/list-item-props <path>
+```
+
+#### `grid-props`
+
+```diff
+ <Grid
+-    wrap="nowrap"
++    flexWrap="nowrap"
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/grid-props <path>
+```
+
+#### `input-base-props`
+
+```diff
+ <InputBase
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+-  componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
++  slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ />
+```
+
+```diff
+ MuiInputBase: {
+   defaultProps: {
+-    components: { Input: CustomInput, Root: CustomRoot }
++    slots: { input: CustomInput, root: CustomRoot },
+-    componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
++    slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/input-base-props <path>
+```
+
+#### `input-props`
+
+```diff
+ <Input
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+-  componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
++  slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ />
+```
+
+```diff
+ MuiInput: {
+   defaultProps: {
+-    components: { Input: CustomInput, Root: CustomRoot }
++    slots: { input: CustomInput, root: CustomRoot },
+-    componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
++    slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/input-props <path>
+```
+
 #### `pagination-item-classes`
 
 JS transforms:
@@ -1069,6 +1234,58 @@ npx @mui/codemod@next deprecations/pagination-item-classes <path>
 npx @mui/codemod@next deprecations/pagination-item-props <path>
 ```
 
+#### `popper-props`
+
+```diff
+ <Popper
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiPopper: {
+   defaultProps: {
+-    components: { Root: CustomRoot }
++    slots: { root: CustomRoot },
+-    componentsProps: { root: { testid: 'test-id' }}
++    slotProps: { root: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/popper-props <path>
+```
+
+#### `outlined-input-props`
+
+```diff
+ <OutlinedInput
+-  components={{ Input: CustomInput, Root: CustomRoot }}
++  slots={{ input: CustomInput, root: CustomRoot }}
+-  componentsProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
++  slotProps={{ input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }}
+ />
+```
+
+```diff
+ MuiOutlinedInput: {
+   defaultProps: {
+-    components: { Input: CustomInput, Root: CustomRoot }
++    slots: { input: CustomInput, root: CustomRoot },
+-    componentsProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } }
++    slotProps: { input: { id: 'test-input-id' }, root: { id: 'test-root-id' } },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/outlined-input-props <path>
+```
+
 #### `slider-props`
 
 ```diff
@@ -1095,45 +1312,48 @@ npx @mui/codemod@next deprecations/pagination-item-props <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
-#### `text-field-props`
+#### `tooltip-props`
 
 ```diff
- <TextField
--    InputProps={CustomInputProps}
--    inputProps={CustomHtmlInputProps}
--    SelectProps={CustomSelectProps}
--    InputLabelProps={CustomInputLabelProps}
--    FormHelperTextProps={CustomFormHelperProps}
-+    slotProps={{
-+        input: CustomInputProps
-+        htmlInput: CustomHtmlInputProps
-+        select: CustomSelectProps
-+        inputLabel: CustomInputLabelProps
-+        formHelper: CustomFormHelperProps
-+    }}
+ <Tooltip
+-  components={{ Arrow: CustomArrow }}
++  slots={{ arrow: CustomArrow }}
+-  componentsProps={{ arrow: { testid: 'test-id' } }}
++  slotProps={{ arrow: { testid: 'test-id' } }}
  />
 ```
 
+```diff
+ MuiTooltip: {
+   defaultProps: {
+-    components: { Arrow: CustomArrow }
++    slots: { arrow: CustomArrow },
+-    componentsProps: { arrow: { testid: 'test-id' }}
++    slotProps: { arrow: { testid: 'test-id' } },
+  },
+ },
+```
+
 ```bash
-npx @mui/codemod@next deprecations/text-field-props <path>
+npx @mui/codemod@next deprecations/tooltip-props <path>
 ```
 
-#### `toggle-button-group-classes`
+#### `step-connector-classes`
 
 JS transforms:
 
 ```diff
- import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
+ import { stepConnectorClasses } from '@mui/material/StepConnector';
 
- MuiToggleButtonGroup: {
+ MuiStepConnector: {
    styleOverrides: {
      root: {
--      [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
-+      [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
+-      [`& .${stepConnectorClasses.lineHorizontal}`]: {
++      [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
          color: 'red',
         },
--      [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
-+      [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
+-      [`& .${stepConnectorClasses.lineVertical}`]: {
++      [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
          color: 'red',
         },
      },
@@ -1141,20 +1361,6 @@ JS transforms:
  },
 ```
 
-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
@@ -1183,25 +1389,47 @@ npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>
 
 ```bash
 npx @mui/codemod@latest deprecations/step-label-props <path>
+```
+
+#### `text-field-props`
+
+```diff
+ <TextField
+-    InputProps={CustomInputProps}
+-    inputProps={CustomHtmlInputProps}
+-    SelectProps={CustomSelectProps}
+-    InputLabelProps={CustomInputLabelProps}
+-    FormHelperTextProps={CustomFormHelperProps}
++    slotProps={{
++        input: CustomInputProps
++        htmlInput: CustomHtmlInputProps
++        select: CustomSelectProps
++        inputLabel: CustomInputLabelProps
++        formHelper: CustomFormHelperProps
++    }}
+ />
+```
 
+```bash
+npx @mui/codemod@next deprecations/text-field-props <path>
 ```
 
-#### `step-connector-classes`
+#### `toggle-button-group-classes`
 
 JS transforms:
 
 ```diff
- import { stepConnectorClasses } from '@mui/material/StepConnector';
+ import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 
- MuiStepConnector: {
+ MuiToggleButtonGroup: {
    styleOverrides: {
      root: {
--      [`& .${stepConnectorClasses.lineHorizontal}`]: {
-+      [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
+-      [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
++      [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
          color: 'red',
         },
--      [`& .${stepConnectorClasses.lineVertical}`]: {
-+      [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
+-      [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
++      [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
          color: 'red',
         },
      },
@@ -1211,6 +1439,20 @@ JS transforms:
 
 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>
+```
+
+CSS transforms:
+
 ```diff
 - .MuiStepConnector-lineHorizontal
 +.MuiStepConnector-horizontal > .MuiStepConnector-line
@@ -1224,6 +1466,42 @@ npx @mui/codemod@next deprecations/step-connector-classes <path>
 
 ### v6.0.0
 
+#### `sx-prop`
+
+```bash
+npx @mui/codemod@next v6.0.0/sx-prop <path>
+```
+
+Update the usage of the `sx` prop to be compatible with `@pigment-css/react`.
+
+```diff
+ <Box
+-  sx={{
+-    backgroundColor: (theme) =>
+-       theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+-  }}
++  sx={theme => ({
++    backgroundColor: theme.palette.grey[900],
++    ...theme.applyStyles("light", {
++      backgroundColor: theme.palette.grey[100]
++    })
++  })}
+ />
+```
+
+#### `system-props`
+
+```bash
+npx @mui/codemod@next v6.0.0/system-props <path>
+```
+
+Remove system props and add them to the `sx` prop.
+
+```diff
+- <Box ml="2px" py={1} color="primary.main" />
++ <Box sx={{ ml: "2px", py: 1, color: 'primary.main' }} />
+```
+
 #### `theme-v6`
 
 ```bash
@@ -1286,10 +1564,10 @@ Update the theme creation from `@mui/system@v5` to be compatible with `@pigment-
   })
 ```
 
-#### `styled-v6`
+#### `styled`
 
 ```bash
-npx @mui/codemod@next v6.0.0/styled-v6 <path>
+npx @mui/codemod@next v6.0.0/styled <path>
 ```
 
 Updates the usage of `styled` from `@mui/system@v5` to be compatible with `@pigment-css/react`.
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index 2f0addd9cafedb..956144c3d001cb 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.8",
+  "version": "6.0.0-alpha.9",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/runtime": "^7.24.5",
-    "@babel/traverse": "^7.24.5",
+    "@babel/core": "^7.24.6",
+    "@babel/runtime": "^7.24.6",
+    "@babel/traverse": "^7.24.6",
     "jscodeshift": "^0.15.2",
     "jscodeshift-add-imports": "^1.0.10",
     "postcss": "^8.4.38",
diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
index b061a6e09918c1..bd443107e446eb 100644
--- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js
+++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
@@ -1,45 +1,57 @@
+import transformAccordionClasses from '../accordion-summary-classes';
 import transformAccordionProps from '../accordion-props';
+import transformAlertClasses from '../alert-classes';
+import transformAvatarGroupProps from '../avatar-group-props';
 import transformAutocompleteProps from '../autocomplete-props';
-import transformFormControlLabelProps from '../form-control-label-props';
 import transformAvatarProps from '../avatar-props';
-import transformDividerProps from '../divider-props';
-import transformAccordionClasses from '../accordion-summary-classes';
+import transformBackdropProps from '../backdrop-props';
 import transformButtonClasses from '../button-classes';
 import transformButtonGroupClasses from '../button-group-classes';
 import transformChipClasses from '../chip-classes';
-import transformPaginationItemClasses from '../pagination-item-classes';
-import transformAlertClasses from '../alert-classes';
-import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
-import transformStepLabelProps from '../step-label-props';
-import transformBackdropProps from '../backdrop-props';
-import transformStepConnectorClasses from '../step-connector-classes';
 import transformCircularProgressClasses from '../circular-progress-classes';
+import transformDividerProps from '../divider-props';
+import transformFilledInputProps from '../filled-input-props';
+import transformFormControlLabelProps from '../form-control-label-props';
+import transformGridProps from '../grid-props';
+import transformInputBaseProps from '../input-base-props';
+import transformInputProps from '../input-props';
+import transformOutlinedInputProps from '../outlined-input-props';
+import transformPaginationItemClasses from '../pagination-item-classes';
 import transformSpeedDialProps from '../speed-dial-props';
+import transformStepConnectorClasses from '../step-connector-classes';
+import transformStepLabelProps from '../step-label-props';
 import transformTextFieldProps from '../text-field-props';
+import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
 export default function deprecationsAll(file, api, options) {
+  file.source = transformAccordionClasses(file, api, options);
   file.source = transformAccordionProps(file, api, options);
+  file.source = transformAlertClasses(file, api, options);
+  file.source = transformAvatarGroupProps(file, api, options);
   file.source = transformAutocompleteProps(file, api, options);
-  file.source = transformFormControlLabelProps(file, api, options);
   file.source = transformAvatarProps(file, api, options);
-  file.source = transformDividerProps(file, api, options);
-  file.source = transformAccordionClasses(file, api, options);
+  file.source = transformBackdropProps(file, api, options);
   file.source = transformButtonClasses(file, api, options);
   file.source = transformButtonGroupClasses(file, api, options);
   file.source = transformChipClasses(file, api, options);
-  file.source = transformPaginationItemClasses(file, api, options);
-  file.source = transformAlertClasses(file, api, options);
-  file.source = transformToggleButtonGroupClasses(file, api, options);
-  file.source = transformStepLabelProps(file, api, options);
-  file.source = transformBackdropProps(file, api, options);
-  file.source = transformStepConnectorClasses(file, api, options);
   file.source = transformCircularProgressClasses(file, api, options);
+  file.source = transformDividerProps(file, api, options);
+  file.source = transformFilledInputProps(file, api, options);
+  file.source = transformFormControlLabelProps(file, api, options);
+  file.source = transformGridProps(file, api, options);
+  file.source = transformInputBaseProps(file, api, options);
+  file.source = transformInputProps(file, api, options);
+  file.source = transformOutlinedInputProps(file, api, options);
+  file.source = transformPaginationItemClasses(file, api, options);
   file.source = transformSpeedDialProps(file, api, options);
+  file.source = transformStepConnectorClasses(file, api, options);
+  file.source = transformStepLabelProps(file, api, options);
   file.source = transformTextFieldProps(file, api, options);
+  file.source = transformToggleButtonGroupClasses(file, api, options);
 
   return file.source;
 }
diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js
new file mode 100644
index 00000000000000..654981f97a612e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js
@@ -0,0 +1,94 @@
+import assignObject from '../../util/assignObject';
+import findComponentJSX from '../../util/findComponentJSX';
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'AvatarGroup' });
+
+  // replace `slotProps.additionalAvatar` with `slotProps.surplus` in JSX
+  findComponentJSX(j, { root, componentName: 'AvatarGroup' }, (elementPath) => {
+    const slotPropsIndex = elementPath.node.openingElement.attributes.findIndex(
+      (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'slotProps',
+    );
+    if (slotPropsIndex !== -1) {
+      const slotProps = elementPath.node.openingElement.attributes[slotPropsIndex].value.expression;
+      const additionalAvatarIndex = slotProps.properties.findIndex(
+        (prop) => prop?.key?.name === 'additionalAvatar',
+      );
+      if (additionalAvatarIndex !== -1) {
+        const surplusIndex = slotProps.properties.findIndex(
+          (prop) => prop?.key?.name === 'surplus',
+        );
+        const removedValue = slotProps.properties.splice(additionalAvatarIndex, 1)[0].value;
+        if (surplusIndex === -1) {
+          assignObject(j, {
+            target: elementPath.node.openingElement.attributes[slotPropsIndex],
+            key: 'surplus',
+            expression: removedValue,
+          });
+        } else {
+          const slotPropsSlotValue = slotProps.properties.splice(surplusIndex, 1)[0].value;
+          assignObject(j, {
+            target: elementPath.node.openingElement.attributes[slotPropsIndex],
+            key: 'surplus',
+            expression: j.objectExpression([
+              j.spreadElement(removedValue),
+              j.spreadElement(slotPropsSlotValue),
+            ]),
+          });
+        }
+      }
+    }
+  });
+
+  // replace `slotProps.additionalAvatar` with `slotProps.surplus` in theme
+  root.find(j.ObjectProperty, { key: { name: 'MuiAvatarGroup' } }).forEach((path) => {
+    const defaultPropsIndex = path.value.value.properties.findIndex(
+      (key) => key.key.name === 'defaultProps',
+    );
+    if (defaultPropsIndex !== -1) {
+      const defaultProps = path.value.value.properties[defaultPropsIndex];
+      const slotPropsIndex = defaultProps.value.properties.findIndex(
+        (prop) => prop.key.name === 'slotProps',
+      );
+      if (slotPropsIndex !== -1) {
+        const slotProps = defaultProps.value.properties[slotPropsIndex];
+        const additionalAvatarIndex = slotProps.value.properties.findIndex(
+          (prop) => prop.key.name === 'additionalAvatar',
+        );
+        if (additionalAvatarIndex !== -1) {
+          const removedValue = slotProps.value.properties.splice(additionalAvatarIndex, 1)[0].value;
+          const surplusIndex = slotProps.value.properties.findIndex(
+            (prop) => prop.key.name === 'surplus',
+          );
+          if (surplusIndex === -1) {
+            slotProps.value.properties.push(
+              j.objectProperty(j.identifier('surplus'), removedValue),
+            );
+          } else {
+            const slotPropsSlotValue = slotProps.value.properties.splice(surplusIndex, 1)[0].value;
+            slotProps.value.properties.push(
+              j.objectProperty(
+                j.identifier('surplus'),
+                j.objectExpression([
+                  j.spreadElement(removedValue),
+                  j.spreadElement(slotPropsSlotValue),
+                ]),
+              ),
+            );
+          }
+        }
+      }
+    }
+  });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js
new file mode 100644
index 00000000000000..5d4036be515ba0
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js
@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './avatar-group-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('avatar-group-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] avatar-group-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/index.js b/packages/mui-codemod/src/deprecations/avatar-group-props/index.js
new file mode 100644
index 00000000000000..d05ab1fe47f6dd
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/avatar-group-props/index.js
@@ -0,0 +1 @@
+export { default } from './avatar-group-props';
diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/actual.js
new file mode 100644
index 00000000000000..ad9bf37f288213
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/actual.js
@@ -0,0 +1,37 @@
+import AvatarGroup from '@mui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@mui/material';
+
+<AvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;
+<MyAvatarGroup
+componentsProps={{
+  additionalAvatar: {color: "red"},
+}}
+/>;
+<MyAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+  slotProps={{
+    additionalAvatar: {color: "blue"},
+  }}
+/>;
+<MyAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+  slotProps={{
+    additionalAvatar: {color: "blue"},
+    surplus: {color: "yellow"},
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/expected.js
new file mode 100644
index 00000000000000..ab0d5e1d30ad6a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/expected.js
@@ -0,0 +1,38 @@
+import AvatarGroup from '@mui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@mui/material';
+
+<AvatarGroup
+  slotProps={{
+    surplus: {color: "red"},
+  }}
+/>;
+<MyAvatarGroup
+slotProps={{
+  surplus: {color: "red"},
+}}
+/>;
+<MyAvatarGroup
+  slotProps={{
+    surplus: {
+      ...{color: "red"},
+      ...{color: "blue"}
+    },
+  }} />;
+<MyAvatarGroup
+  slotProps={{
+    surplus: {
+      ...{
+        ...{color: "red"},
+        ...{color: "blue"}
+      },
+
+      ...{color: "yellow"}
+    }
+  }} />;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..db4f92636812c7
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.actual.js
@@ -0,0 +1,36 @@
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"},
+      },
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"},
+      },
+      slotProps: {
+        additionalAvatar: {color: "blue"},
+      }
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"},
+      },
+      slotProps: {
+        additionalAvatar: {color: "blue"},
+        surplus: {color: "yellow"},
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..67db787e97b656
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.expected.js
@@ -0,0 +1,39 @@
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        surplus: {color: "red"}
+      }
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        surplus: {
+          ...{color: "red"},
+          ...{color: "blue"}
+        }
+      }
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        surplus: {
+          ...{
+            ...{color: "red"},
+            ...{color: "blue"}
+          },
+
+          ...{color: "yellow"}
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.js b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.js
new file mode 100644
index 00000000000000..f704f9848fc318
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'FilledInput' });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.test.js b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.test.js
new file mode 100644
index 00000000000000..dd3da4d40a3e6c
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './filled-input-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'filled-input-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/index.js b/packages/mui-codemod/src/deprecations/filled-input-props/index.js
new file mode 100644
index 00000000000000..c840de1458f20b
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/filled-input-props/index.js
@@ -0,0 +1 @@
+export { default } from './filled-input-props';
diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/actual.js
new file mode 100644
index 00000000000000..452906d4f4e4c1
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/actual.js
@@ -0,0 +1,24 @@
+import FilledInput from '@mui/material/FilledInput';
+
+<FilledInput
+  components={{ Input: ComponentsInput }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<FilledInput
+  slots={{ root: SlotsRoot }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<FilledInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<FilledInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps, root: componentsRootProps}}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/expected.js
new file mode 100644
index 00000000000000..c8527e9d830b8f
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/expected.js
@@ -0,0 +1,32 @@
+import FilledInput from '@mui/material/FilledInput';
+
+<FilledInput
+  slots={{
+    input: ComponentsInput
+  }}
+  slotProps={{ input: componentsInputProps }}
+/>;
+<FilledInput
+  slots={{
+    root: SlotsRoot,
+    input: ComponentsInput
+  }}
+  slotProps={{
+    root: slotsRootProps,
+    input: componentsInputProps
+  }} />;
+<FilledInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ root: slotsRootProps, input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  } }} />;
+<FilledInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  }, root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..461801f8652697
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/theme.actual.js
@@ -0,0 +1,41 @@
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      componentsProps: { input: componentsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps, root: componentsRootProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..2b396e8189109f
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/theme.expected.js
@@ -0,0 +1,72 @@
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput
+      },
+
+      slotProps: {
+        input: componentsInputProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: componentsInputProps,
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiFilledInput: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/grid-props/grid-props.js b/packages/mui-codemod/src/deprecations/grid-props/grid-props.js
new file mode 100644
index 00000000000000..328b30e9b657da
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/grid-props/grid-props.js
@@ -0,0 +1,42 @@
+import findComponentJSX from '../../util/findComponentJSX';
+
+/**
+ * @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;
+
+  const filterJSXAttr = (attr, name) => attr.type === 'JSXAttribute' && attr.name.name === name;
+
+  findComponentJSX(j, { root, componentName: 'Grid' }, (gridElement) => {
+    const attrs = gridElement.node.openingElement.attributes;
+    const wrapPropIndex = attrs.findIndex((attr) => filterJSXAttr(attr, 'wrap'));
+
+    if (wrapPropIndex !== -1) {
+      if (attrs.findIndex((attr) => filterJSXAttr(attr, 'flexWrap')) !== -1) {
+        attrs.splice(wrapPropIndex, 1);
+      } else {
+        attrs[wrapPropIndex].name.name = 'flexWrap';
+      }
+    }
+  });
+
+  root.find(j.ObjectProperty, { key: { name: 'MuiGrid' } }).forEach((path) => {
+    const defaultProps = path.value.value.properties.find(({ key }) => key.name === 'defaultProps');
+    const props = defaultProps.value.properties;
+    const wrapPropIndex = props.findIndex((prop) => prop.key.name === 'wrap');
+
+    if (wrapPropIndex !== -1) {
+      if (props.findIndex((prop) => prop.key.name === 'flexWrap') !== -1) {
+        props.splice(wrapPropIndex, 1);
+      } else {
+        props[wrapPropIndex].key.name = 'flexWrap';
+      }
+    }
+  });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/grid-props/grid-props.test.js b/packages/mui-codemod/src/deprecations/grid-props/grid-props.test.js
new file mode 100644
index 00000000000000..9e44307050e920
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/grid-props/grid-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './grid-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'grid-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/grid-props/index.js b/packages/mui-codemod/src/deprecations/grid-props/index.js
new file mode 100644
index 00000000000000..35a6d621882e1f
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/grid-props/index.js
@@ -0,0 +1 @@
+export { default } from './grid-props';
diff --git a/packages/mui-codemod/src/deprecations/grid-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/grid-props/test-cases/actual.js
new file mode 100644
index 00000000000000..bcddfdd74106fd
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/grid-props/test-cases/actual.js
@@ -0,0 +1,11 @@
+import Grid from '@mui/material/Grid';
+import { Grid as MyGrid } from '@mui/material';
+
+<Grid wrap="wrap-reverse" />;
+<MyGrid wrap="wrap-reverse" />;
+
+<Grid wrap="wrap-reverse" flexWrap="wrap" />;
+<MyGrid wrap="wrap-reverse" flexWrap="wrap" />;
+
+// should skip non MUI components
+<NonMuiGrid wrap="wrap-reverse" />;
diff --git a/packages/mui-codemod/src/deprecations/grid-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/grid-props/test-cases/expected.js
new file mode 100644
index 00000000000000..666e3fccfca565
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/grid-props/test-cases/expected.js
@@ -0,0 +1,11 @@
+import Grid from '@mui/material/Grid';
+import { Grid as MyGrid } from '@mui/material';
+
+<Grid flexWrap="wrap-reverse" />;
+<MyGrid flexWrap="wrap-reverse" />;
+
+<Grid flexWrap="wrap" />;
+<MyGrid flexWrap="wrap" />;
+
+// should skip non MUI components
+<NonMuiGrid wrap="wrap-reverse" />;
diff --git a/packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..86d9e8f604e87e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.actual.js
@@ -0,0 +1,24 @@
+fn({
+  MuiGrid: {
+    defaultProps: {
+      wrap: 'wrap'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      wrap: 'wrap-reverse'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      wrap: 'wrap-reverse',
+      flexWrap: 'wrap'
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..e64036c5678295
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.expected.js
@@ -0,0 +1,23 @@
+fn({
+  MuiGrid: {
+    defaultProps: {
+      flexWrap: 'wrap'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      flexWrap: 'wrap-reverse'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      flexWrap: 'wrap'
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/input-base-props/index.js b/packages/mui-codemod/src/deprecations/input-base-props/index.js
new file mode 100644
index 00000000000000..6e814fe70eab99
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-base-props/index.js
@@ -0,0 +1 @@
+export { default } from './input-base-props';
diff --git a/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.js b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.js
new file mode 100644
index 00000000000000..5fc9b0f8e905c7
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'InputBase' });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.test.js b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.test.js
new file mode 100644
index 00000000000000..22651e06f3a91b
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './input-base-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'input-base-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/input-base-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/actual.js
new file mode 100644
index 00000000000000..6ed61403687c63
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/actual.js
@@ -0,0 +1,24 @@
+import InputBase from '@mui/material/InputBase';
+
+<InputBase
+  components={{ Input: ComponentsInput }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<InputBase
+  slots={{ root: SlotsRoot }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<InputBase
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<InputBase
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps, root: componentsRootProps}}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/input-base-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/expected.js
new file mode 100644
index 00000000000000..ade7e630d825d4
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/expected.js
@@ -0,0 +1,32 @@
+import InputBase from '@mui/material/InputBase';
+
+<InputBase
+  slots={{
+    input: ComponentsInput
+  }}
+  slotProps={{ input: componentsInputProps }}
+/>;
+<InputBase
+  slots={{
+    root: SlotsRoot,
+    input: ComponentsInput
+  }}
+  slotProps={{
+    root: slotsRootProps,
+    input: componentsInputProps
+  }} />;
+<InputBase
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ root: slotsRootProps, input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  } }} />;
+<InputBase
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  }, root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/input-base-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..251cc05262e704
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/theme.actual.js
@@ -0,0 +1,41 @@
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      componentsProps: { input: componentsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps, root: componentsRootProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/input-base-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..6860cdd7afddc2
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/theme.expected.js
@@ -0,0 +1,72 @@
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput
+      },
+
+      slotProps: {
+        input: componentsInputProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: componentsInputProps,
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiInputBase: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/input-props/index.js b/packages/mui-codemod/src/deprecations/input-props/index.js
new file mode 100644
index 00000000000000..3613911c5a9b0c
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-props/index.js
@@ -0,0 +1 @@
+export { default } from './input-props';
diff --git a/packages/mui-codemod/src/deprecations/input-props/input-props.js b/packages/mui-codemod/src/deprecations/input-props/input-props.js
new file mode 100644
index 00000000000000..b69943a6bf2449
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-props/input-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'Input' });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/input-props/input-props.test.js b/packages/mui-codemod/src/deprecations/input-props/input-props.test.js
new file mode 100644
index 00000000000000..e8a216332c2b8a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-props/input-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './input-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'input-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/input-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/input-props/test-cases/actual.js
new file mode 100644
index 00000000000000..d228ca97f81ea1
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-props/test-cases/actual.js
@@ -0,0 +1,24 @@
+import Input from '@mui/material/Input';
+
+<Input
+  components={{ Input: ComponentsInput }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<Input
+  slots={{ root: SlotsRoot }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<Input
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<Input
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps, root: componentsRootProps}}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/input-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/input-props/test-cases/expected.js
new file mode 100644
index 00000000000000..9b9c8431cd654c
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-props/test-cases/expected.js
@@ -0,0 +1,32 @@
+import Input from '@mui/material/Input';
+
+<Input
+  slots={{
+    input: ComponentsInput
+  }}
+  slotProps={{ input: componentsInputProps }}
+/>;
+<Input
+  slots={{
+    root: SlotsRoot,
+    input: ComponentsInput
+  }}
+  slotProps={{
+    root: slotsRootProps,
+    input: componentsInputProps
+  }} />;
+<Input
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ root: slotsRootProps, input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  } }} />;
+<Input
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  }, root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/input-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/input-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..873347d96bea19
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-props/test-cases/theme.actual.js
@@ -0,0 +1,41 @@
+fn({
+  MuiInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      componentsProps: { input: componentsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps, root: componentsRootProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/input-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/input-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..cb5fc3d0442ca7
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/input-props/test-cases/theme.expected.js
@@ -0,0 +1,72 @@
+fn({
+  MuiInput: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput
+      },
+
+      slotProps: {
+        input: componentsInputProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiInput: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: componentsInputProps,
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiInput: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiInput: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/list-item-props/index.js b/packages/mui-codemod/src/deprecations/list-item-props/index.js
new file mode 100644
index 00000000000000..cfc345a9c46fe1
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/list-item-props/index.js
@@ -0,0 +1 @@
+export { default } from './list-item-props';
diff --git a/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.js b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.js
new file mode 100644
index 00000000000000..9960a48c87f505
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'ListItem' });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.test.js b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.test.js
new file mode 100644
index 00000000000000..f4175cf1c908db
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.test.js
@@ -0,0 +1,54 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './list-item-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('list-item-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] list-item-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/list-item-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/actual.js
new file mode 100644
index 00000000000000..c10b0f5e8ecc5e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/actual.js
@@ -0,0 +1,20 @@
+import ListItem from '@mui/material/ListItem';
+
+<ListItem
+  components={{ Root: ComponentsRoot }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+<ListItem
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+/>;
+<ListItem
+  slots={{ root: SlotsRoot }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+<ListItem
+  slots={{ root: SlotsRoot }}
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/list-item-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/expected.js
new file mode 100644
index 00000000000000..5f4d23c564f69a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/expected.js
@@ -0,0 +1,24 @@
+import ListItem from '@mui/material/ListItem';
+
+<ListItem
+  slots={{
+    root: ComponentsRoot
+  }}
+  slotProps={{ root: componentsRootProps }}
+/>;
+<ListItem
+  slotProps={{ root: slotsRootProps }}
+  slots={{
+    root: ComponentsRoot
+  }}
+/>;
+<ListItem
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: componentsRootProps }}
+/>;
+<ListItem
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/list-item-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..bde812b888245e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/theme.actual.js
@@ -0,0 +1,37 @@
+fn({
+  MuiListItem: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiListItem: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiListItem: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiListItem: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+      components: { Root: ComponentsRoot },
+      slotProps: { root: slotsRootProps },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/list-item-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..6ead6b88236443
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/theme.expected.js
@@ -0,0 +1,54 @@
+fn({
+  MuiListItem: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot
+      },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiListItem: {
+    defaultProps: {
+      slotProps: { root: slotsRootProps },
+
+      slots: {
+        root: ComponentsRoot
+      }
+    },
+  },
+});
+
+fn({
+  MuiListItem: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiListItem: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/index.js b/packages/mui-codemod/src/deprecations/outlined-input-props/index.js
new file mode 100644
index 00000000000000..8b830991361987
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/outlined-input-props/index.js
@@ -0,0 +1 @@
+export { default } from './outlined-input-props';
diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.js b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.js
new file mode 100644
index 00000000000000..370e230ef4dbff
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'OutlinedInput' });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.test.js b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.test.js
new file mode 100644
index 00000000000000..99e10a31159dda
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './outlined-input-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'outlined-input-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/actual.js
new file mode 100644
index 00000000000000..2eb900e8ead965
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/actual.js
@@ -0,0 +1,24 @@
+import OutlinedInput from '@mui/material/OutlinedInput';
+
+<OutlinedInput
+  components={{ Input: ComponentsInput }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<OutlinedInput
+  slots={{ root: SlotsRoot }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<OutlinedInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps }}
+/>;
+<OutlinedInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  components={{ Input: ComponentsInput }}
+  slotProps={{ root: slotsRootProps, input: slotsInputProps }}
+  componentsProps={{ input: componentsInputProps, root: componentsRootProps}}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/expected.js
new file mode 100644
index 00000000000000..3cd77bab85c909
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/expected.js
@@ -0,0 +1,32 @@
+import OutlinedInput from '@mui/material/OutlinedInput';
+
+<OutlinedInput
+  slots={{
+    input: ComponentsInput
+  }}
+  slotProps={{ input: componentsInputProps }}
+/>;
+<OutlinedInput
+  slots={{
+    root: SlotsRoot,
+    input: ComponentsInput
+  }}
+  slotProps={{
+    root: slotsRootProps,
+    input: componentsInputProps
+  }} />;
+<OutlinedInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ root: slotsRootProps, input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  } }} />;
+<OutlinedInput
+  slots={{ root: SlotsRoot, input: SlotsInput }}
+  slotProps={{ input: {
+    ...componentsInputProps,
+    ...slotsInputProps
+  }, root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..bbee6e9cf4e437
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/theme.actual.js
@@ -0,0 +1,41 @@
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      componentsProps: { input: componentsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
+
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      components: { Input: ComponentsInput },
+      slots: { root: SlotsRoot, input: SlotsInput },
+      componentsProps: { input: componentsInputProps, root: componentsRootProps },
+      slotProps: { root: slotsRootProps, input: slotsInputProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..c492c88ccd6fbe
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/theme.expected.js
@@ -0,0 +1,72 @@
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput
+      },
+
+      slotProps: {
+        input: componentsInputProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      slots: {
+        input: ComponentsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: componentsInputProps,
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: slotsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiOutlinedInput: {
+    defaultProps: {
+      slots: {
+        input: SlotsInput,
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        input: {
+          ...componentsInputProps,
+          ...slotsInputProps
+        },
+
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/popper-props/index.js b/packages/mui-codemod/src/deprecations/popper-props/index.js
new file mode 100644
index 00000000000000..1d9d5bdfb21134
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/popper-props/index.js
@@ -0,0 +1 @@
+export { default } from './popper-props';
diff --git a/packages/mui-codemod/src/deprecations/popper-props/popper-props.js b/packages/mui-codemod/src/deprecations/popper-props/popper-props.js
new file mode 100644
index 00000000000000..f005e8453bdb5d
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/popper-props/popper-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'Popper' });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js b/packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js
new file mode 100644
index 00000000000000..f50b9a59d25288
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './popper-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'popper-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/deprecations/popper-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/popper-props/test-cases/actual.js
new file mode 100644
index 00000000000000..dcd4a139ab2bf6
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/popper-props/test-cases/actual.js
@@ -0,0 +1,12 @@
+import Popper from '@mui/material/Popper';
+
+<Popper
+  components={{ Root: ComponentsRoot }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+<Popper
+  slots={{ root: SlotsRoot }}
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/popper-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/popper-props/test-cases/expected.js
new file mode 100644
index 00000000000000..0413a8592825f9
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/popper-props/test-cases/expected.js
@@ -0,0 +1,14 @@
+import Popper from '@mui/material/Popper';
+
+<Popper
+  slots={{
+    root: ComponentsRoot
+  }}
+  slotProps={{ root: componentsRootProps }}
+/>;
+<Popper
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..888e0cd2cff4d7
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.actual.js
@@ -0,0 +1,19 @@
+fn({
+  MuiPopper: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiPopper: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      slots: { root: SlotsRoot },
+      componentsProps: { root: componentsRootProps },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..ff6302e757b4d8
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/popper-props/test-cases/theme.expected.js
@@ -0,0 +1,30 @@
+fn({
+  MuiPopper: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot
+      },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiPopper: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/index.js b/packages/mui-codemod/src/deprecations/tooltip-props/index.js
new file mode 100644
index 00000000000000..3f4630b5474a31
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/tooltip-props/index.js
@@ -0,0 +1 @@
+export { default } from './tooltip-props';
diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/actual.js
new file mode 100644
index 00000000000000..a02495c65013ca
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/actual.js
@@ -0,0 +1,60 @@
+import Tooltip from '@mui/material/Tooltip';
+
+<Tooltip
+  components={{
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  }}
+  componentsProps={{
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }}
+/>;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip }}
+  components={{ Arrow: ComponentsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps }}
+  componentsProps={{ arrow: componentsArrowProps }}
+/>;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  components={{ Arrow: ComponentsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps, arrow: slotsArrowProps }}
+  componentsProps={{ arrow: componentsArrowProps }}
+/>;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  components={{ Arrow: ComponentsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps, arrow: slotsArrowProps }}
+  componentsProps={{ arrow: componentsArrowProps, tooltip: componentsTooltipProps}}
+/>;
+<Tooltip
+  slots={{
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  }}
+  components={{
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  }}
+  slotProps={{
+    arrow: slotsArrowProps,
+    popper: slotsPopperProps,
+    tooltip: slotsTooltipProps,
+    transition: slotsTransitionProps
+  }}
+  componentsProps={{
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/expected.js
new file mode 100644
index 00000000000000..a6e62ef6c7d73f
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/expected.js
@@ -0,0 +1,65 @@
+import Tooltip from '@mui/material/Tooltip';
+
+<Tooltip
+  slots={{
+    arrow: ComponentsArrow,
+    popper: ComponentsPopper,
+    tooltip: ComponentsTooltip,
+    transition: ComponentsTransition
+  }}
+  slotProps={{
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }}
+/>;
+<Tooltip
+  slots={{
+    tooltip: SlotsTooltip,
+    arrow: ComponentsArrow
+  }}
+  slotProps={{
+    tooltip: slotsTooltipProps,
+    arrow: componentsArrowProps
+  }} />;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps, arrow: {
+    ...componentsArrowProps,
+    ...slotsArrowProps
+  } }} />;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  slotProps={{ arrow: {
+    ...componentsArrowProps,
+    ...slotsArrowProps
+  }, tooltip: {
+    ...componentsTooltipProps,
+    ...slotsTooltipProps
+  } }} />;
+<Tooltip
+  slots={{
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  }}
+  slotProps={{
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    },
+    popper: {
+      ...componentsPopperProps,
+      ...slotsPopperProps
+    },
+    tooltip: {
+      ...componentsTooltipProps,
+      ...slotsTooltipProps
+    },
+    transition: {
+      ...componentsTransitionProps,
+      ...slotsTransitionProps
+    }
+  }} />;
diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..d6933e8bc29102
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/theme.actual.js
@@ -0,0 +1,41 @@
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      componentsProps: { arrow: componentsArrowProps },
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      slots: { tooltip: SlotsTooltip },
+      componentsProps: { arrow: componentsArrowProps },
+      slotProps: { tooltip: slotsTooltipProps },
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      slots: { tooltip: SlotsTooltip, arrow: SlotsArrow },
+      componentsProps: { arrow: componentsArrowProps },
+      slotProps: { tooltip: slotsTooltipProps, arrow: slotsArrowProps },
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      slots: { tooltip: SlotsTooltip, arrow: SlotsArrow },
+      componentsProps: { arrow: componentsArrowProps, tooltip: componentsTooltipProps },
+      slotProps: { tooltip: slotsTooltipProps, arrow: slotsArrowProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..ad6b795e2c4d53
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/theme.expected.js
@@ -0,0 +1,72 @@
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: ComponentsArrow
+      },
+
+      slotProps: {
+        arrow: componentsArrowProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: ComponentsArrow,
+        tooltip: SlotsTooltip
+      },
+
+      slotProps: {
+        arrow: componentsArrowProps,
+        tooltip: slotsTooltipProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: SlotsArrow,
+        tooltip: SlotsTooltip
+      },
+
+      slotProps: {
+        arrow: {
+          ...componentsArrowProps,
+          ...slotsArrowProps
+        },
+
+        tooltip: slotsTooltipProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: SlotsArrow,
+        tooltip: SlotsTooltip
+      },
+
+      slotProps: {
+        arrow: {
+          ...componentsArrowProps,
+          ...slotsArrowProps
+        },
+
+        tooltip: {
+          ...componentsTooltipProps,
+          ...slotsTooltipProps
+        }
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.js b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.js
new file mode 100644
index 00000000000000..feb7e35348d69b
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'Tooltip' });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.test.js b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.test.js
new file mode 100644
index 00000000000000..a3880ee54d158e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.test.js
@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './tooltip-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'tooltip-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/util/migrateToVariants.js b/packages/mui-codemod/src/util/migrateToVariants.js
index c8508c67b2f2d9..34ec7e27861b1a 100644
--- a/packages/mui-codemod/src/util/migrateToVariants.js
+++ b/packages/mui-codemod/src/util/migrateToVariants.js
@@ -1,10 +1,10 @@
 const MAX_DEPTH = 20;
+
 /**
- *
  * @param {import('jscodeshift').API['j']} j
- * @param {any[]} styles
+ * @returns
  */
-export default function migrateToVariants(j, styles) {
+export const getCreateBuildStyle = (j) =>
   function createBuildStyle(key, upperBuildStyle, applyStylesMode) {
     if (applyStylesMode) {
       upperBuildStyle = (styleExpression) =>
@@ -35,63 +35,159 @@ export default function migrateToVariants(j, styles) {
       }
       return upperBuildStyle ? upperBuildStyle(styleExpression) : styleExpression;
     };
-  }
+  };
 
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+export const getAppendPaletteModeStyles = (j) =>
   /**
    *
-   * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
+   * @param {{ properties: any[] }} node
+   * @param {Record<string, any[] | import('jscodeshift').ObjectExpression>} modeStyles
    */
-  function getIdentifierKey(node) {
-    if (node.type === 'MemberExpression') {
-      return node.property;
-    }
-    return node;
+  function appendPaletteModeStyles(node, modeStyles) {
+    Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+      node.properties.push(
+        j.spreadElement(
+          j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
+            j.stringLiteral(mode),
+            Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles,
+          ]),
+        ),
+      );
+    });
+  };
+
+/**
+ *
+ * @param {import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+export function getIdentifierKey(node) {
+  if (node.type === 'MemberExpression') {
+    return node.property;
   }
+  return node;
+}
 
-  /**
-   *
-   * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
-   */
-  function getObjectKey(node) {
-    let tempNode = { ...node };
-    while (tempNode.type === 'UnaryExpression') {
-      tempNode = tempNode.argument;
-    }
-    while (tempNode.type === 'MemberExpression') {
-      tempNode = tempNode.object;
+/**
+ *
+ * @param {import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+export function getObjectKey(node) {
+  let tempNode = { ...node };
+  while (tempNode.type === 'UnaryExpression') {
+    tempNode = tempNode.argument;
+  }
+  while (tempNode.type === 'MemberExpression' || tempNode.type === 'OptionMemberExpression') {
+    tempNode = tempNode.object;
+  }
+  return tempNode;
+}
+
+/**
+ *
+ * @param {import('jscodeshift').ObjectExpression} node
+ */
+export function removeProperty(parentNode, child) {
+  if (parentNode) {
+    if (parentNode.type === 'ObjectExpression') {
+      parentNode.properties = parentNode.properties.filter(
+        (prop) => prop !== child && prop.value !== child,
+      );
     }
-    return tempNode;
   }
+}
 
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+export const getBuildArrowFunctionAST = (j) =>
   /**
    *
-   * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
-   * @param {import('ast-types').namedTypes.BinaryExpression} addtional
+   * @param {Set<string> | import('jscodeshift').Expression[]} params
+   * @param {import('jscodeshift').BlockStatement} body
+   * @returns
    */
-  function objectToArrowFunction(objectExpression, addtional) {
-    const paramKeys = new Set();
-    let left;
-    objectExpression.properties.forEach((prop, index) => {
-      paramKeys.add(prop.key.name);
-      const result = j.binaryExpression('===', prop.key, prop.value);
-      if (index === 0) {
-        left = result;
-      } else {
-        left = j.logicalExpression('&&', left, result);
+  function buildArrowFunctionAST(params, body) {
+    const destructured = [...params].every((param) => typeof param === 'string');
+    return j.arrowFunctionExpression(
+      destructured
+        ? [
+            j.objectPattern(
+              [...params].map((k) => ({
+                ...j.objectProperty(j.identifier(k), j.identifier(k)),
+                shorthand: true,
+              })),
+            ),
+          ]
+        : params,
+      body,
+    );
+  };
+
+/**
+ * @param {import('jscodeshift').API['j']} j
+ */
+export const getObjectToArrowFunction = (j) => {
+  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
+  return (
+    /**
+     *
+     * @param {import('jscodeshift').ObjectExpression} objectExpression
+     * @param {import('jscodeshift').BinaryExpression} addtional
+     */
+    function objectToArrowFunction(objectExpression, addtional) {
+      const paramKeys = new Set();
+      let left;
+      objectExpression.properties.forEach((prop, index) => {
+        paramKeys.add(prop.key.name);
+        const result = j.binaryExpression('===', prop.key, prop.value);
+        if (index === 0) {
+          left = result;
+        } else {
+          left = j.logicalExpression('&&', left, result);
+        }
+      });
+      if (addtional) {
+        paramKeys.add(getObjectKey(addtional.left).name);
       }
-    });
-    if (addtional) {
-      paramKeys.add(getObjectKey(addtional.left).name);
+      return buildArrowFunctionAST(
+        paramKeys,
+        addtional ? j.logicalExpression('&&', left, addtional) : left,
+      );
     }
-    return buildArrowFunctionAST(
-      paramKeys,
-      addtional ? j.logicalExpression('&&', left, addtional) : left,
-    );
-  }
+  );
+};
+
+/**
+ *
+ * @param {undefined | null | import('jscodeshift').Expression} node
+ */
+export function isThemePaletteMode(node) {
+  return (
+    node?.type === 'MemberExpression' &&
+    node.object.type === 'MemberExpression' &&
+    node.object.object.name === 'theme' &&
+    node.object.property.name === 'palette' &&
+    node.property.name === 'mode'
+  );
+}
+
+/**
+ *
+ * @param {import('jscodeshift').API['j']} j
+ * @param {any[]} styles
+ */
+export default function migrateToVariants(j, styles) {
+  const createBuildStyle = getCreateBuildStyle(j);
+  const appendPaletteModeStyles = getAppendPaletteModeStyles(j);
+  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
+  const objectToArrowFunction = getObjectToArrowFunction(j);
 
   /**
    *
-   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+   * @param {import('jscodeshift').Identifier | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
    */
   function inverseBinaryExpression(node) {
     if (node.type === 'Identifier' || node.type === 'MemberExpression') {
@@ -112,20 +208,6 @@ export default function migrateToVariants(j, styles) {
     return node;
   }
 
-  /**
-   *
-   * @param {import('ast-types').namedTypes.ObjectExpression} node
-   */
-  function removeProperty(parentNode, child) {
-    if (parentNode) {
-      if (parentNode.type === 'ObjectExpression') {
-        parentNode.properties = parentNode.properties.filter(
-          (prop) => prop !== child && prop.value !== child,
-        );
-      }
-    }
-  }
-
   function buildObjectAST(jsObject) {
     const result = j.objectExpression([]);
     Object.entries(jsObject).forEach(([key, value]) => {
@@ -134,41 +216,9 @@ export default function migrateToVariants(j, styles) {
     return result;
   }
 
-  function buildArrowFunctionAST(params, body) {
-    return j.arrowFunctionExpression(
-      [
-        j.objectPattern(
-          [...params].map((k) => ({
-            ...j.objectProperty(j.identifier(k), j.identifier(k)),
-            shorthand: true,
-          })),
-        ),
-      ],
-      body,
-    );
-  }
-
-  /**
-   *
-   * @param {{ properties: any[] }} node
-   * @param {Record<string, any[] | import('ast-types').namedTypes.ObjectExpression>} modeStyles
-   */
-  function appendPaletteModeStyles(node, modeStyles) {
-    Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
-      node.properties.push(
-        j.spreadElement(
-          j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
-            j.stringLiteral(mode),
-            Array.isArray(objectStyles) ? j.objectExpression(objectStyles) : objectStyles,
-          ]),
-        ),
-      );
-    });
-  }
-
   /**
    *
-   * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+   * @param {import('jscodeshift').LogicalExpression | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
    */
   function buildProps(node) {
     const properties = [];
@@ -243,16 +293,6 @@ export default function migrateToVariants(j, styles) {
     );
   }
 
-  function isThemePaletteMode(node) {
-    return (
-      node.type === 'MemberExpression' &&
-      node.object.type === 'MemberExpression' &&
-      node.object.object.name === 'theme' &&
-      node.object.property.name === 'palette' &&
-      node.property.name === 'mode'
-    );
-  }
-
   // 2. Find logical spread expressions to convert to variants
   styles.forEach((style) => {
     const parameters = new Set();
@@ -262,14 +302,18 @@ export default function migrateToVariants(j, styles) {
           parameters.add(prop.key.name);
         });
       }
+      if (param.type === 'Identifier') {
+        parameters.add(param.name);
+      }
     });
     const variants = [];
 
     if (style.body.type === 'LogicalExpression') {
       if (
         style.params[0] &&
-        style.params[0].type === 'ObjectPattern' &&
-        style.params[0].properties.some((prop) => prop.key.name !== 'theme')
+        (style.params[0].type === 'Identifier' ||
+          (style.params[0].type === 'ObjectPattern' &&
+            style.params[0].properties.some((prop) => prop.key.name !== 'theme')))
       ) {
         // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
         style.body = j.objectExpression([
@@ -531,6 +575,11 @@ export default function migrateToVariants(j, styles) {
               }
               data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
             });
+            if (data.key) {
+              // to remove the arrow function
+              // { ...: theme => `1px solid...` } to { ...: `1px solid...` }
+              data.replaceValue?.(data.node);
+            }
           }
         }
       }
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/index.js b/packages/mui-codemod/src/v6.0.0/sx-prop/index.js
new file mode 100644
index 00000000000000..5058756b00f0f8
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/index.js
@@ -0,0 +1 @@
+export { default } from './sx-v6';
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.js b/packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.js
new file mode 100644
index 00000000000000..e6a0bf68d92c16
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.js
@@ -0,0 +1,426 @@
+import getReturnExpression from '../../util/getReturnExpression';
+import {
+  getCreateBuildStyle,
+  getAppendPaletteModeStyles,
+  getObjectKey,
+  getBuildArrowFunctionAST,
+  isThemePaletteMode,
+  removeProperty,
+} from '../../util/migrateToVariants';
+
+/**
+ *
+ * @param {import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
+ */
+function getCssVarName(node) {
+  if (node.type === 'MemberExpression') {
+    return `--${getObjectKey(node)?.name}-${node.property.name}`;
+  }
+  if (node.type === 'Identifier') {
+    return `--${node.name}`;
+  }
+  return '';
+}
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function sxV6(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  const createBuildStyle = getCreateBuildStyle(j);
+  const appendPaletteModeStyles = getAppendPaletteModeStyles(j);
+  const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
+
+  /**
+   *
+   * @param {import('jscodeshift').Identifier} node
+   */
+  function replaceUndefined(node, replacement = j.nullLiteral()) {
+    if (node?.type === 'Identifier' && node.name === 'undefined') {
+      return replacement;
+    }
+    return node;
+  }
+
+  let shouldTransform = false;
+
+  root
+    .find(j.JSXAttribute, { name: { name: 'sx' }, value: { type: 'JSXExpressionContainer' } })
+    .forEach((path) => {
+      /**
+       * @type {[import('jscodeshift').StringLiteral, import('jscodeshift').Expression][]}
+       */
+      const cssVars = [];
+      const conditionalExpressions = []; // for ensuring the sequence of styles
+      let currentIndex = 0;
+      const sxContainer = path.node.value;
+
+      if (
+        ['ArrowFunctionExpression', 'ObjectExpression', 'ArrayExpression'].includes(
+          sxContainer.expression.type,
+        )
+      ) {
+        shouldTransform = true;
+        (sxContainer.expression.type === 'ArrayExpression'
+          ? sxContainer.expression.elements
+          : [sxContainer.expression]
+        ).forEach((item, index) => {
+          currentIndex = index;
+          recurseObjectExpression({
+            root: item,
+            replaceRoot: (newRoot) => {
+              sxContainer.expression = newRoot;
+            },
+            node: item,
+            buildStyle: createBuildStyle(),
+          });
+        });
+
+        if (cssVars.length) {
+          const cssVarsObject = j.objectExpression(
+            cssVars.map(([varName, value]) => j.objectProperty(varName, value)),
+          );
+          if (path.parent.node.type === 'JSXOpeningElement') {
+            const styleAttribute = path.parent.node.attributes.find(
+              (attribute) => attribute.type === 'JSXAttribute' && attribute.name.name === 'style',
+            );
+            const spreadAttribute = path.parent.node.attributes.find(
+              (attribute) => attribute.type === 'JSXSpreadAttribute',
+            );
+            if (styleAttribute) {
+              if (styleAttribute.value.expression.type === 'ObjectExpression') {
+                styleAttribute.value.expression.properties = [
+                  ...cssVarsObject.properties,
+                  ...styleAttribute.value.expression.properties,
+                ];
+              } else if (
+                styleAttribute.value.expression.type === 'Identifier' ||
+                styleAttribute.value.expression.type === 'MemberExpression'
+              ) {
+                styleAttribute.value.expression = j.objectExpression([
+                  ...cssVarsObject.properties,
+                  j.spreadElement(styleAttribute.value.expression),
+                ]);
+              }
+            } else if (spreadAttribute) {
+              path.parent.node.attributes.push(
+                j.jsxAttribute(
+                  j.jsxIdentifier('style'),
+                  j.jsxExpressionContainer(
+                    j.objectExpression([
+                      ...cssVarsObject.properties,
+                      j.spreadElement(
+                        j.memberExpression(spreadAttribute.argument, j.identifier('style')),
+                      ),
+                    ]),
+                  ),
+                ),
+              );
+            } else {
+              path.parent.node.attributes.push(
+                j.jsxAttribute(j.jsxIdentifier('style'), j.jsxExpressionContainer(cssVarsObject)),
+              );
+            }
+          }
+        }
+
+        if (conditionalExpressions.length && sxContainer.expression.type === 'ArrayExpression') {
+          // insert the conditional expressions in the correct order
+          let cumulativeIndex = 0;
+          conditionalExpressions.forEach(([index, newElement]) => {
+            sxContainer.expression.elements.splice(index + 1 + cumulativeIndex, 0, newElement);
+            cumulativeIndex += 1;
+          });
+        }
+
+        if (sxContainer.expression.type === 'ArrayExpression') {
+          sxContainer.expression.elements = sxContainer.expression.elements.filter(
+            (item) => item.type !== 'ObjectExpression' || item.properties.length > 0,
+          );
+        }
+      }
+
+      function wrapSxInArray(newElement) {
+        if (
+          sxContainer.expression.type === 'ObjectExpression' ||
+          sxContainer.expression.type === 'ArrowFunctionExpression'
+        ) {
+          sxContainer.expression = j.arrayExpression([sxContainer.expression]);
+        }
+        if (sxContainer.expression.type === 'ArrayExpression') {
+          // store in a list to be added later to ensure the sequence of styles
+          conditionalExpressions.push([currentIndex, newElement]);
+        }
+      }
+
+      /**
+       *
+       * @param {{ node: import('jscodeshift').Expression }} data
+       */
+      function recurseObjectExpression(data) {
+        if (data.node.type === 'ArrowFunctionExpression') {
+          const returnExpression = getReturnExpression(data.node);
+          if (returnExpression) {
+            recurseObjectExpression({
+              ...data,
+              node: returnExpression,
+            });
+          }
+        }
+        if (data.node.type === 'ObjectExpression') {
+          const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+          data.node.properties.forEach((prop) => {
+            if (prop.type === 'ObjectProperty') {
+              recurseObjectExpression({
+                ...data,
+                node: prop.value,
+                parentNode: data.node,
+                key: prop.key,
+                buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                replaceValue: (newValue) => {
+                  prop.value = newValue;
+                },
+                deleteSelf: () => {
+                  removeProperty(data.node, prop);
+                  if (data.node.properties.length === 0) {
+                    data.deleteSelf?.();
+                  }
+                },
+                modeStyles,
+              });
+            } else {
+              recurseObjectExpression({
+                ...data,
+                node: prop,
+                parentNode: data.node,
+                buildStyle: createBuildStyle(prop.key, data.buildStyle),
+              });
+            }
+          });
+          appendPaletteModeStyles(data.node, modeStyles);
+        }
+        if (data.node.type === 'SpreadElement') {
+          if (data.node.argument.type === 'LogicalExpression') {
+            const paramName =
+              data.node.argument.left.type === 'BinaryExpression'
+                ? getObjectKey(data.node.argument.left.left)?.name
+                : getObjectKey(data.node.argument.left)?.name;
+            if (paramName === 'theme' && data.node.argument.left.right.type === 'StringLiteral') {
+              if (data.node.argument.right.type === 'ObjectExpression') {
+                const mode = data.node.argument.left.right.value;
+                data.node.argument.right.properties.forEach((prop) => {
+                  if (prop.type === 'ObjectProperty') {
+                    recurseObjectExpression({
+                      ...data,
+                      node: prop.value,
+                      parentNode: data.node.argument.right,
+                      key: prop.key,
+                      buildStyle: createBuildStyle(prop.key, data.buildStyle, mode),
+                      replaceValue: (newValue) => {
+                        prop.value = newValue;
+                      },
+                    });
+                  } else {
+                    recurseObjectExpression({
+                      ...data,
+                      node: prop,
+                      parentNode: data.node.argument.right,
+                      buildStyle: createBuildStyle(prop.key, data.buildStyle, mode),
+                    });
+                  }
+                });
+                appendPaletteModeStyles(data.parentNode, {
+                  [mode]: data.node.argument.right,
+                });
+              }
+              if (data.deleteSelf) {
+                data.deleteSelf();
+              } else {
+                removeProperty(data.parentNode, data.node);
+              }
+              return;
+            }
+
+            if (data.node.argument.right.type === 'ObjectExpression') {
+              recurseObjectExpression({
+                ...data,
+                node: data.node.argument.right,
+                root: data.node.argument.right,
+                replaceRoot: (newRoot) => {
+                  data.node.argument.right = newRoot;
+                },
+              });
+            }
+            wrapSxInArray(
+              j.logicalExpression(
+                data.node.argument.operator,
+                data.node.argument.left,
+                data.node.argument.right,
+              ),
+            );
+            if (data.deleteSelf) {
+              data.deleteSelf();
+            } else {
+              removeProperty(data.parentNode, data.node);
+            }
+          }
+          if (data.node.argument.type === 'ConditionalExpression') {
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument,
+              parentNode: data.node,
+            });
+            if (data.deleteSelf) {
+              data.deleteSelf();
+            } else {
+              removeProperty(data.parentNode, data.node);
+            }
+          }
+        }
+        if (data.node.type === 'ConditionalExpression') {
+          if (
+            data.node.test.type === 'BinaryExpression' ||
+            data.node.test.type === 'UnaryExpression' ||
+            data.node.test.type === 'Identifier' ||
+            data.node.test.type === 'MemberExpression'
+          ) {
+            if (
+              data.parentNode?.type === 'ObjectExpression' &&
+              (data.node.test?.type === 'BinaryExpression' || data.node.test?.type === 'Identifier')
+            ) {
+              if (
+                data.node.consequent.type !== 'ObjectExpression' &&
+                data.node.alternate.type !== 'ObjectExpression'
+              ) {
+                if (isThemePaletteMode(data.node.test.left)) {
+                  const consequentKey = getObjectKey(data.node.consequent);
+                  if (consequentKey.type === 'Identifier' && consequentKey.name !== 'theme') {
+                    const varName = getCssVarName(data.node.consequent);
+                    cssVars.push([j.stringLiteral(varName), data.node.consequent]);
+                    data.node.consequent = j.stringLiteral(`var(${varName})`);
+                  }
+                  const alternateKey = getObjectKey(data.node.alternate);
+                  if (alternateKey.type === 'Identifier' && alternateKey.name !== 'theme') {
+                    const varName = getCssVarName(data.node.alternate);
+                    cssVars.push([j.stringLiteral(varName), data.node.alternate]);
+                    data.node.alternate = j.stringLiteral(`var(${varName})`);
+                  }
+
+                  if (data.modeStyles) {
+                    if (!data.modeStyles[data.node.test.right.value]) {
+                      data.modeStyles[data.node.test.right.value] = [];
+                    }
+                    data.modeStyles[data.node.test.right.value].push(
+                      j.objectProperty(data.key, replaceUndefined(data.node.consequent)),
+                    );
+                  }
+                  data.replaceValue?.(replaceUndefined(data.node.alternate));
+
+                  if (data.root.type === 'ObjectExpression') {
+                    data.replaceRoot?.(buildArrowFunctionAST([j.identifier('theme')], data.root));
+                  } else if (data.root.type === 'ArrayExpression') {
+                    data.root.elements.forEach((item, index) => {
+                      if (item === data.node) {
+                        data.root.elements[index] = buildArrowFunctionAST(
+                          [j.identifier('theme')],
+                          data.root,
+                        );
+                      }
+                    });
+                  }
+                } else {
+                  wrapSxInArray(
+                    j.conditionalExpression(
+                      data.node.test,
+                      data.buildStyle?.(replaceUndefined(data.node.consequent)),
+                      data.buildStyle?.(replaceUndefined(data.node.alternate)),
+                    ),
+                  );
+                  if (data.deleteSelf) {
+                    data.deleteSelf();
+                  } else {
+                    removeProperty(data.parentNode, data.node);
+                  }
+                }
+              }
+            }
+          }
+        }
+        if (data.node.type === 'TemplateLiteral') {
+          if (data.parentNode?.type === 'ObjectExpression') {
+            const modeStyles = {};
+            data.node.expressions.forEach((expression, index) => {
+              if (expression.type === 'MemberExpression') {
+                const memberKey = getObjectKey(expression);
+                if (memberKey.type === 'Identifier' && memberKey.name !== 'theme') {
+                  const varName = getCssVarName(expression);
+                  cssVars.push([j.stringLiteral(varName), expression]);
+                  data.node.expressions[index] = j.stringLiteral(`var(${varName})`);
+                }
+              } else {
+                recurseObjectExpression({
+                  ...data,
+                  node: expression,
+                  parentNode: data.parentNode,
+                  buildStyle: createBuildStyle(data.key, data.buildStyle),
+                  replaceValue: (newValue) => {
+                    data.node.expressions[index] = newValue;
+                  },
+                  modeStyles,
+                });
+              }
+            });
+            if (data.modeStyles) {
+              Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+                const clonedNode = {
+                  ...data.node,
+                  expressions: data.node.expressions.map((expression) => ({ ...expression })),
+                };
+                clonedNode.expressions = objectStyles.map((item) => item.value);
+
+                if (!data.modeStyles[mode]) {
+                  data.modeStyles[mode] = [];
+                }
+                data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
+              });
+              if (data.key) {
+                data.replaceValue?.(data.node);
+              }
+            }
+          }
+        }
+      }
+    });
+
+  const transformed = root.toSource(printOptions);
+
+  if (shouldTransform) {
+    // recast adds extra newlines that we don't want, https://github.com/facebook/jscodeshift/issues/249
+    // need to remove them manually
+    const lines = [];
+    let isInStyled = false;
+    let spaceMatch;
+    transformed.split('\n').forEach((line) => {
+      if (!isInStyled) {
+        lines.push(line);
+      } else if (line !== '') {
+        if (spaceMatch && line.match(/^\s+/)?.[0] === spaceMatch?.[0] && line.endsWith('}')) {
+          isInStyled = false;
+          spaceMatch = null;
+        }
+        lines.push(line);
+      }
+      if (line.includes('sx=')) {
+        isInStyled = true;
+        spaceMatch = line.match(/^\s+/);
+      }
+    });
+    return lines.join('\n');
+  }
+
+  return transformed;
+}
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.test.js b/packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.test.js
new file mode 100644
index 00000000000000..69aa0b4d9332d3
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/sx-v6.test.js
@@ -0,0 +1,109 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './sx-v6';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('v6.0.0', () => {
+    describe('basic sx-v6', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/basic-sx.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/basic-sx.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/basic-sx.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/basic-sx.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('css vars sx-v6', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-css-vars.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-css-vars.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-css-vars.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-css-vars.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('dynamic spread sx-v6', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-dynamic.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-dynamic.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-dynamic.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-dynamic.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('dynamic conditional sx-v6', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-dynamic2.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-dynamic2.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/sx-dynamic2.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/sx-dynamic2.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/basic-sx.actual.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/basic-sx.actual.js
new file mode 100644
index 00000000000000..79f153de4a858a
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/basic-sx.actual.js
@@ -0,0 +1,40 @@
+<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)',
+  })}
+></Toolbar>;
+
+<Box
+  component="main"
+  sx={{
+    backgroundColor: (theme) =>
+      theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+  }}
+></Box>;
+
+<Box
+  sx={{
+    borderBottom: (theme) =>
+      `1px solid ${theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'}`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    minHeight: 280,
+  }}
+/>;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/basic-sx.expected.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/basic-sx.expected.js
new file mode 100644
index 00000000000000..37d9d40f3cea32
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/basic-sx.expected.js
@@ -0,0 +1,46 @@
+<Toolbar
+  variant="regular"
+  sx={(theme) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexShrink: 0,
+    borderRadius: '999px',
+    bgcolor: 'hsla(220, 0%, 0%, 0.7)',
+    backdropFilter: 'blur(24px)',
+    maxHeight: 40,
+    border: '1px solid',
+    borderColor: 'divider',
+    boxShadow:
+      '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)',
+    ...theme.applyStyles("light", {
+      bgcolor: 'hsla(220, 60%, 99%, 0.6)',
+      boxShadow: '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)'
+    })
+  })}
+></Toolbar>;
+
+<Box
+  component="main"
+  sx={theme => ({
+    backgroundColor: theme.palette.grey[900],
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.grey[100]
+    })
+  })}
+></Box>;
+
+<Box
+  sx={theme => ({
+    borderBottom: `1px solid ${'grey.800'}`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    minHeight: 280,
+    ...theme.applyStyles("light", {
+      borderBottom: `1px solid ${'grey.200'}`
+    })
+  })}
+/>;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js
new file mode 100644
index 00000000000000..b452e8f139288e
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js
@@ -0,0 +1,54 @@
+<Box
+  sx={{
+    backgroundImage: (theme) =>
+      theme.palette.mode === 'light'
+        ? items[selectedItemIndex].imageLight
+        : items[selectedItemIndex].imageDark,
+  }}
+/>;
+
+<Box
+  style={props.style}
+  sx={{
+    backgroundImage: (theme) =>
+      theme.palette.mode === 'light'
+        ? items[selectedItemIndex].imageLight
+        : items[selectedItemIndex].imageDark,
+  }}
+/>;
+
+<Box
+  style={{
+    color: 'red',
+    ...props.style,
+  }}
+  sx={{
+    backgroundImage: (theme) =>
+      theme.palette.mode === 'light'
+        ? items[selectedItemIndex].imageLight
+        : items[selectedItemIndex].imageDark,
+  }}
+/>;
+
+<Box
+  {...props}
+  sx={{
+    backgroundImage: (theme) =>
+      theme.palette.mode === 'light'
+        ? items[selectedItemIndex].imageLight
+        : items[selectedItemIndex].imageDark,
+  }}
+/>;
+
+<Paper
+  sx={{
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${post.image})`,
+  }}
+></Paper>;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-css-vars.expected.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-css-vars.expected.js
new file mode 100644
index 00000000000000..42a4309abdc52a
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-css-vars.expected.js
@@ -0,0 +1,69 @@
+<Box
+  sx={theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })}
+  style={{
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark
+  }} />;
+
+<Box
+  style={{
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    ...props.style
+  }}
+  sx={theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })}
+/>;
+
+<Box
+  style={{
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    color: 'red',
+    ...props.style
+  }}
+  sx={theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })}
+/>;
+
+<Box
+  {...props}
+  sx={theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })}
+  style={{
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    ...props.style
+  }} />;
+
+<Paper
+  sx={{
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${"var(--post-image)"})`,
+  }}
+  style={{
+    "--post-image": post.image
+  }}></Paper>;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic.actual.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic.actual.js
new file mode 100644
index 00000000000000..4d016d93060ef7
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic.actual.js
@@ -0,0 +1,102 @@
+<Box
+  sx={{
+    mb: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 2,
+    color: tier.title === 'Professional' ? 'grey.100' : '',
+    backgroundColor: (theme) =>
+      theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    borderBottom: (theme) =>
+      `1px solid ${theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'}`,
+  }}
+></Box>;
+
+<Card
+  sx={(theme) => ({
+    p: 2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    ...(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%))',
+    }),
+  })}
+></Card>;
+
+<Card
+  key={index}
+  component={Button}
+  onClick={() => handleItemClick(index)}
+  sx={(theme) => ({
+    p: 3,
+    height: 'fit-content',
+    width: '100%',
+    background: 'none',
+    ...(selectedItemIndex === index && {
+      backgroundColor: 'action.selected',
+      borderColor: theme.palette.mode === 'light' ? 'primary.light' : '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) ',
+    },
+  })}
+></Card>;
+
+<CreditCardRoundedIcon
+  fontSize="small"
+  sx={(theme) => ({
+    color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600',
+    ...(paymentType === 'creditCard' && {
+      color: 'primary.main',
+    }),
+  })}
+/>;
+
+<IconButton
+  edge="start"
+  color="inherit"
+  aria-label="open drawer"
+  onClick={toggleDrawer}
+  sx={{
+    marginRight: '36px',
+    ...(open && { display: 'none' }),
+  }}
+>
+  <MenuIcon />
+</IconButton>;
+
+<div
+  sx={[
+    {
+      ...(selectedItemIndex === index && {
+        backgroundColor: 'action.selected',
+        borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
+      }),
+    },
+    (theme) => ({
+      color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600',
+      ...(paymentType === 'creditCard' && {
+        color: 'primary.main',
+      }),
+    }),
+    {
+      marginRight: '36px',
+      ...(open && { display: 'none' }),
+    },
+  ]}
+/>;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic.expected.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic.expected.js
new file mode 100644
index 00000000000000..5846dd5a445e31
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic.expected.js
@@ -0,0 +1,105 @@
+<Box
+  sx={theme => ({
+    mb: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 2,
+    backgroundColor: theme.palette.grey[900],
+    borderBottom: `1px solid ${'grey.800'}`,
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.grey[100],
+      borderBottom: `1px solid ${'grey.200'}`
+    })
+  })}
+></Box>;
+
+<Card
+  sx={[(theme) => ({
+    p: 2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4
+  }), tier.title === 'Professional' && (theme => ({
+    border: 'none',
+    boxShadow:
+      `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
+    background: 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))',
+    ...theme.applyStyles("light", {
+      boxShadow: `0 8px 12px hsla(210, 98%, 42%, 0.2)`
+    })
+  }))]}
+></Card>;
+
+<Card
+  key={index}
+  component={Button}
+  onClick={() => handleItemClick(index)}
+  sx={[(theme) => ({
+    p: 3,
+    height: 'fit-content',
+    width: '100%',
+    background: 'none',
+    '&:hover': {
+      background:
+        'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
+      borderColor: 'primary.dark',
+      boxShadow:
+        '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
+      ...theme.applyStyles("light", {
+        background: 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)',
+        borderColor: 'primary.light',
+        boxShadow: '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
+      })
+    }
+  }), selectedItemIndex === index && (theme => ({
+    backgroundColor: 'action.selected',
+    borderColor: 'primary.dark',
+    ...theme.applyStyles("light", {
+      borderColor: 'primary.light'
+    })
+  }))]}
+></Card>;
+
+<CreditCardRoundedIcon
+  fontSize="small"
+  sx={[(theme) => ({
+    color: 'grey.600',
+    ...theme.applyStyles("light", {
+      color: 'grey.400'
+    }),
+  }), paymentType === 'creditCard' && {
+    color: 'primary.main',
+  }]}
+/>;
+
+<IconButton
+  edge="start"
+  color="inherit"
+  aria-label="open drawer"
+  onClick={toggleDrawer}
+  sx={[{
+    marginRight: '36px'
+  }, open && { display: 'none' }]}
+>
+  <MenuIcon />
+</IconButton>;
+
+<div
+  sx={[selectedItemIndex === index && (theme => ({
+    backgroundColor: 'action.selected',
+    borderColor: 'primary.dark',
+    ...theme.applyStyles("light", {
+      borderColor: 'primary.light'
+    })
+  })), (theme) => ({
+    color: 'grey.600',
+    ...theme.applyStyles("light", {
+      color: 'grey.400'
+    }),
+  }), paymentType === 'creditCard' && {
+    color: 'primary.main',
+  }, {
+    marginRight: '36px'
+  }, open && { display: 'none' }]}
+/>;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic2.actual.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic2.actual.js
new file mode 100644
index 00000000000000..fc585392630ee7
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic2.actual.js
@@ -0,0 +1,31 @@
+<Accordion
+  expanded={expanded}
+  onChange={handleExpansion}
+  slotProps={{ transition: { timeout: 400 } }}
+  sx={{
+    '& .MuiAccordion-region': { height: expanded ? 'auto' : 0 },
+    '& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' },
+  }}
+></Accordion>;
+
+<Box
+  sx={{
+    display: 'flex',
+    flexDirection: { xs: 'column-reverse', sm: 'row' },
+    justifyContent: activeStep !== 0 ? 'space-between' : 'flex-end',
+    alignItems: 'end',
+    flexGrow: 1,
+    gap: 1,
+    pb: { xs: 12, sm: 0 },
+    mt: { xs: 2, sm: 0 },
+    mb: '60px',
+  }}
+></Box>;
+
+<Box
+  sx={{
+    display: 'flex',
+    alignItems: 'baseline',
+    color: tier.title === 'Professional' ? 'grey.50' : undefined,
+  }}
+></Box>;
diff --git a/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic2.expected.js b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic2.expected.js
new file mode 100644
index 00000000000000..6a237cbb33f7ed
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-dynamic2.expected.js
@@ -0,0 +1,50 @@
+<Accordion
+  expanded={expanded}
+  onChange={handleExpansion}
+  slotProps={{ transition: { timeout: 400 } }}
+  sx={[expanded ? {
+    '& .MuiAccordion-region': {
+      height: 'auto'
+    }
+  } : {
+    '& .MuiAccordion-region': {
+      height: 0
+    }
+  }, expanded ? {
+    '& .MuiAccordionDetails-root': {
+      display: 'block'
+    }
+  } : {
+    '& .MuiAccordionDetails-root': {
+      display: 'none'
+    }
+  }]}
+></Accordion>;
+
+<Box
+  sx={[{
+    display: 'flex',
+    flexDirection: { xs: 'column-reverse', sm: 'row' },
+    alignItems: 'end',
+    flexGrow: 1,
+    gap: 1,
+    pb: { xs: 12, sm: 0 },
+    mt: { xs: 2, sm: 0 },
+    mb: '60px'
+  }, activeStep !== 0 ? {
+    justifyContent: 'space-between'
+  } : {
+    justifyContent: 'flex-end'
+  }]}
+></Box>;
+
+<Box
+  sx={[{
+    display: 'flex',
+    alignItems: 'baseline'
+  }, tier.title === 'Professional' ? {
+    color: 'grey.50'
+  } : {
+    color: null
+  }]}
+></Box>;
diff --git a/packages/mui-codemod/src/v6.0.0/system-props/index.js b/packages/mui-codemod/src/v6.0.0/system-props/index.js
new file mode 100644
index 00000000000000..d1fe754e407b16
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/system-props/index.js
@@ -0,0 +1 @@
+export { default } from './removeSystemProps';
diff --git a/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.js b/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.js
new file mode 100644
index 00000000000000..421fb32f5c9b0e
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.js
@@ -0,0 +1,291 @@
+// from `packages/mui-system/src/styleFunctionSx/defaultSxConfig.js`
+const defaultSxConfig = {
+  // borders
+  border: {},
+  borderTop: {},
+  borderRight: {},
+  borderBottom: {},
+  borderLeft: {},
+  borderColor: {},
+  borderTopColor: {},
+  borderRightColor: {},
+  borderBottomColor: {},
+  borderLeftColor: {},
+  outline: {},
+  outlineColor: {},
+  borderRadius: {},
+  color: {},
+  bgcolor: {},
+  backgroundColor: {},
+  p: {},
+  pt: {},
+  pr: {},
+  pb: {},
+  pl: {},
+  px: {},
+  py: {},
+  padding: {},
+  paddingTop: {},
+  paddingRight: {},
+  paddingBottom: {},
+  paddingLeft: {},
+  paddingX: {},
+  paddingY: {},
+  paddingInline: {},
+  paddingInlineStart: {},
+  paddingInlineEnd: {},
+  paddingBlock: {},
+  paddingBlockStart: {},
+  paddingBlockEnd: {},
+
+  m: {},
+  mt: {},
+  mr: {},
+  mb: {},
+  ml: {},
+  mx: {},
+  my: {},
+  margin: {},
+  marginTop: {},
+  marginRight: {},
+  marginBottom: {},
+  marginLeft: {},
+  marginX: {},
+  marginY: {},
+  marginInline: {},
+  marginInlineStart: {},
+  marginInlineEnd: {},
+  marginBlock: {},
+  marginBlockStart: {},
+  marginBlockEnd: {},
+
+  // display
+  displayPrint: {},
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+
+  // grid
+  gap: {},
+  rowGap: {},
+  columnGap: {},
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+
+  // positions
+  position: {},
+  zIndex: {},
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+
+  // shadows
+  boxShadow: {},
+
+  // sizing
+  width: {},
+  maxWidth: {},
+  minWidth: {},
+  height: {},
+  maxHeight: {},
+  minHeight: {},
+  boxSizing: {},
+
+  // typography
+  font: {},
+  fontFamily: {},
+  fontSize: {},
+  fontStyle: {},
+  fontWeight: {},
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {},
+};
+const systemProps = Object.keys(defaultSxConfig);
+const components = ['Box', 'Stack', 'Typography', 'Link', 'Grid'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function removeSystemProps(file, api, options) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  const deprecatedElements = [];
+  const customReplacement = {
+    Typography: {
+      matcher: (key, val) =>
+        key !== 'color' ||
+        (val.value?.includes('.') && val.value !== 'inherit') ||
+        val.value === 'divider',
+    },
+    Link: {
+      matcher: (key) => key !== 'color',
+    },
+  };
+  const elementReplacement = {};
+
+  root
+    .find(j.ImportDeclaration, (decl) => decl.source.value.includes('@mui'))
+    .forEach((decl) => {
+      decl.node.specifiers.forEach((spec) => {
+        if (spec.type === 'ImportSpecifier') {
+          if (components.includes(spec.imported.name)) {
+            deprecatedElements.push(spec.local.name);
+          }
+        }
+        if (spec.type === 'ImportDefaultSpecifier') {
+          const name = decl.node.source.value.split('/').pop();
+          if (components.includes(name)) {
+            deprecatedElements.push(spec.local.name);
+            if (customReplacement[name]) {
+              elementReplacement[spec.local.name] = customReplacement[name];
+            }
+          }
+        }
+      });
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: (name) => {
+            return deprecatedElements.includes(name);
+          },
+        },
+      },
+    })
+    .forEach((el) => {
+      const sx = j.objectExpression([]);
+      const elementName = el.value?.openingElement?.name?.name;
+
+      const sxNodes = j(el)
+        .find(j.JSXAttribute)
+        .filter((path) => path.parent.parent.node === el.node && path.node.name.name === 'sx');
+
+      const sxNodesArray = sxNodes.nodes() || [];
+      const existingSxValue = sxNodesArray[0]?.value?.expression;
+
+      let spreadElement = null;
+      el.node.openingElement.attributes.forEach((attr) => {
+        if (attr.type === 'JSXSpreadAttribute') {
+          spreadElement = attr;
+        }
+      });
+
+      const attrToPrune = ['sx'];
+      el.node.openingElement.attributes.forEach((attr) => {
+        if (
+          attr.type === 'JSXSpreadAttribute' ||
+          !attr.value ||
+          !systemProps.includes(attr?.name?.name)
+        ) {
+          return;
+        }
+        const key = attr?.name?.name;
+        const literal = attr?.value;
+        const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal;
+        const shouldPrune =
+          !elementReplacement[elementName] || elementReplacement[elementName].matcher(key, val);
+        if (key && val) {
+          if (shouldPrune) {
+            sx.properties.push(j.property('init', j.identifier(key), val));
+            attrToPrune.push(key);
+          }
+        }
+      });
+
+      if (sx.properties.length) {
+        el.node.openingElement.attributes = el.node.openingElement.attributes.filter(
+          (attr) => attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr?.name?.name),
+        );
+
+        let finalSx;
+        if (!existingSxValue) {
+          finalSx = sx;
+        } else if (existingSxValue?.type === 'ObjectExpression') {
+          sx.properties.push(...existingSxValue.properties);
+          finalSx = sx;
+        } else if (existingSxValue?.type === 'ArrayExpression') {
+          existingSxValue.elements = [sx, ...existingSxValue.elements];
+          finalSx = existingSxValue;
+        } else {
+          finalSx = j.arrayExpression([
+            sx,
+            existingSxValue.type === 'Identifier'
+              ? j.spreadElement(
+                  j.conditionalExpression(
+                    j.callExpression(
+                      j.memberExpression(j.identifier('Array'), j.identifier('isArray')),
+                      [existingSxValue],
+                    ),
+                    existingSxValue,
+                    j.arrayExpression([existingSxValue]),
+                  ),
+                )
+              : existingSxValue,
+          ]);
+        }
+
+        if (spreadElement && spreadElement.argument.type === 'Identifier') {
+          if (finalSx.type === 'ObjectExpression') {
+            const propSx = j.memberExpression(spreadElement.argument, j.identifier('sx'));
+            finalSx = j.arrayExpression([
+              finalSx,
+              j.spreadElement(
+                j.conditionalExpression(
+                  j.callExpression(
+                    j.memberExpression(j.identifier('Array'), j.identifier('isArray')),
+                    [propSx],
+                  ),
+                  propSx,
+                  j.arrayExpression([propSx]),
+                ),
+              ),
+            ]);
+          } else if (finalSx.type === 'ArrayExpression') {
+            finalSx.elements.push(j.memberExpression(spreadElement.argument, j.identifier('sx')));
+          }
+        }
+
+        el.node.openingElement.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier('sx'), j.jsxExpressionContainer(finalSx)),
+        );
+      }
+    });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.test.js b/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.test.js
new file mode 100644
index 00000000000000..d2ff1476234f11
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/system-props/removeSystemProps.test.js
@@ -0,0 +1,35 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './removeSystemProps';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('v6.0.0 - removeSystemProps', () => {
+    it('transforms props as needed', () => {
+      const actual = transform(
+        { source: read('./test-cases/system-props.actual.js') },
+        { jscodeshift },
+        {},
+      );
+
+      const expected = read('./test-cases/system-props.expected.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('should be idempotent', () => {
+      const actual = transform(
+        { source: read('./test-cases/system-props.expected.js') },
+        { jscodeshift },
+        {},
+      );
+
+      const expected = read('./test-cases/system-props.expected.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.actual.js b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.actual.js
new file mode 100644
index 00000000000000..71163fe44f369d
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.actual.js
@@ -0,0 +1,42 @@
+import { Box as Boxxx, Grid as Griddd } from '@mui/material';
+import Typographyyy from '@mui/material/Typography';
+import Stackkk from '@mui/material/Stack';
+
+<Boxxx typography="body1" />;
+<Boxxx color="palette.main" sx={{ display: 'block' }} />;
+
+<Griddd container flexDirection={`column`} />;
+
+const sx = { display: 'flex' };
+const ml = 2;
+<Typographyyy variant="body1" color="primary.main" ml={ml} sx={sx} />;
+<Typographyyy variant="body1" color="divider" ml={ml} sx={sx} />;
+<Typographyyy variant="body1" color="inherit" ml={ml} sx={sx} />;
+<Typographyyy
+  fontSize="xl4"
+  lineHeight={1}
+  startDecorator={
+    <Typographyyy fontSize="lg" textColor="text.secondary">
+      $
+    </Typographyyy>
+  }
+  sx={{ alignItems: 'flex-start' }}
+>
+  25
+</Typographyyy>;
+function Copyright(props) {
+  return (
+    <Typographyyy variant="body2" color="text.secondary" align="center" {...props}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typographyyy>
+  );
+}
+
+<Stackkk flex="1" sx={[...(Array.isArray(sx) ? sx : [sx])]} />;
+
+<Boxxx typography="body1" sx={foo.bar ? { opacity: 0 } : sx} />;
diff --git a/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.expected.js b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.expected.js
new file mode 100644
index 00000000000000..e137ecc15e479b
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/system-props/test-cases/system-props.expected.js
@@ -0,0 +1,80 @@
+import { Box as Boxxx, Grid as Griddd } from '@mui/material';
+import Typographyyy from '@mui/material/Typography';
+import Stackkk from '@mui/material/Stack';
+
+<Boxxx sx={{
+  typography: "body1"
+}} />;
+<Boxxx
+  sx={{
+    color: "palette.main",
+    display: 'block'
+  }} />;
+
+<Griddd container sx={{
+  flexDirection: `column`
+}} />;
+
+const sx = { display: 'flex' };
+const ml = 2;
+<Typographyyy
+  variant="body1"
+  sx={[{
+    color: "primary.main",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+<Typographyyy
+  variant="body1"
+  sx={[{
+    color: "divider",
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+<Typographyyy
+  variant="body1"
+  color="inherit"
+  sx={[{
+    ml: ml
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+<Typographyyy
+  startDecorator={
+    <Typographyyy textColor="text.secondary" sx={{
+      fontSize: "lg"
+    }}>
+      $
+    </Typographyyy>
+  }
+  sx={{
+    fontSize: "xl4",
+    lineHeight: 1,
+    alignItems: 'flex-start'
+  }}>
+  25
+</Typographyyy>;
+function Copyright(props) {
+  return (
+    (<Typographyyy
+      variant="body2"
+      align="center"
+      {...props}
+      sx={[{
+        color: "text.secondary"
+      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typographyyy>)
+  );
+}
+
+<Stackkk
+  sx={[{
+    flex: "1"
+  }, ...(Array.isArray(sx) ? sx : [sx])]} />;
+
+<Boxxx
+  sx={[{
+    typography: "body1"
+  }, foo.bar ? { opacity: 0 } : sx]} />;
diff --git a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
index 00b08bad9afdd9..07d21bc7f9eec6 100644
--- a/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
+++ b/packages/mui-codemod/src/v6.0.0/theme-v6/theme-v6.js
@@ -5,7 +5,7 @@ import migrateToVariants from '../../util/migrateToVariants';
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function styledV6(file, api, options) {
+export default function themeV6(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;
diff --git a/packages/mui-codemod/testUtils/index.js b/packages/mui-codemod/testUtils/index.js
index 771f9be3f7627f..e7bad6b85dbca0 100644
--- a/packages/mui-codemod/testUtils/index.js
+++ b/packages/mui-codemod/testUtils/index.js
@@ -1,5 +1,6 @@
 /* eslint-env mocha */
 import j from 'jscodeshift';
+import { EOL } from 'os';
 import path from 'path';
 import { expect } from 'chai';
 import readFile from '../src/util/readFile';
@@ -14,14 +15,30 @@ export function describeJscodeshiftTransform({ transformName, transform, testCas
   describe(transformName, () => {
     testCases.forEach((testCase) => {
       it('transforms as needed', () => {
-        const actual = transform({ source: read(dirname, testCase.actual) }, { jscodeshift }, {});
+        const actual = transform(
+          { source: read(dirname, testCase.actual) },
+          { jscodeshift },
+          {
+            printOptions: {
+              lineTerminator: EOL,
+            },
+          },
+        );
 
         const expected = read(dirname, testCase.expected);
         expect(actual).to.equal(expected, 'The transformed version should be correct');
       });
 
       it('should be idempotent', () => {
-        const actual = transform({ source: read(dirname, testCase.expected) }, { jscodeshift }, {});
+        const actual = transform(
+          { source: read(dirname, testCase.expected) },
+          { jscodeshift },
+          {
+            printOptions: {
+              lineTerminator: EOL,
+            },
+          },
+        );
 
         const expected = read(dirname, testCase.expected);
         expect(actual).to.equal(expected, 'The transformed version should be correct');
diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json
index 42a226784d5bbe..1e5629e46e69c1 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.8",
+  "version": "6.0.0-alpha.9",
   "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 08f7ae0688f2c2..987647f527f080 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.8",
+  "version": "6.0.0-alpha.9",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -34,7 +34,7 @@
     "test": "exit 0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index dec1d21b4986a0..fc9410d261540a 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -419,30 +419,89 @@ export function getThemedComponents(): ThemeOptions {
       MuiAlert: {
         styleOverrides: {
           root: {
-            padding: '12px 16px',
+            padding: '16px',
+            gap: '12px',
+            fontSize: '1rem',
+            '& * ul': { paddingLeft: '24px !important', marginBottom: '0 !important' }, // !important is used here to override the anchor tag color coming from MarkdownElement
+            '& .MuiAlert-icon': {
+              margin: 0,
+              marginTop: '2px',
+              padding: 0,
+            },
+            '& .MuiAlert-message': { padding: 0 },
+          },
+          icon: {
+            paddingTop: 10,
+            paddingBottom: 0,
           },
           standardWarning: ({ theme }) => [
+            // same styles from the MarkdownElement callout
             {
               backgroundColor: alpha(theme.palette.warning[50], 0.5),
               color: (theme.vars || theme).palette.grey[900],
               border: '1px solid',
-              borderColor: alpha(theme.palette.warning[600], 0.3),
+              borderColor: alpha(theme.palette.warning[700], 0.15),
               '& .MuiAlert-icon': {
-                color: (theme.vars || theme).palette.warning[700],
+                color: (theme.vars || theme).palette.warning[600],
+              },
+              '& * a': {
+                // !important is used here to override the anchor tag color coming from MarkdownElement
+                color: `${(theme.vars || theme).palette.warning[900]} !important`,
+                textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
+                '&:hover': {
+                  textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`,
+                },
               },
             },
             theme.applyDarkStyles({
-              backgroundColor: alpha(theme.palette.warning[700], 0.2),
+              backgroundColor: alpha(theme.palette.warning[700], 0.12),
               color: (theme.vars || theme).palette.warning[50],
               '& .MuiAlert-icon': {
-                color: (theme.vars || theme).palette.warning[200],
+                color: (theme.vars || theme).palette.warning[400],
+              },
+              '& * a': {
+                color: `${(theme.vars || theme).palette.warning[100]} !important`,
+                textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
+                '&:hover': {
+                  textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`,
+                },
+              },
+            }),
+          ],
+          standardSuccess: ({ theme }) => [
+            // same styles from the MarkdownElement callout
+            {
+              backgroundColor: alpha(theme.palette.success[50], 0.5),
+              color: (theme.vars || theme).palette.success[900],
+              border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
+              '& .MuiAlert-icon': {
+                color: (theme.vars || theme).palette.success[600],
+              },
+              '& * a': {
+                // !important is used here to override the anchor tag color coming from MarkdownElement
+                color: `${(theme.vars || theme).palette.success[900]} !important`,
+                textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
+                '&:hover': {
+                  textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`,
+                },
+              },
+            },
+            theme.applyDarkStyles({
+              backgroundColor: alpha(theme.palette.success[700], 0.12),
+              color: (theme.vars || theme).palette.success[50],
+              borderColor: alpha(theme.palette.success[400], 0.1),
+              '& .MuiAlert-icon': {
+                color: (theme.vars || theme).palette.success[500],
+              },
+              '& * a': {
+                color: `${(theme.vars || theme).palette.success[100]} !important`,
+                textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
+                '&:hover': {
+                  textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`,
+                },
               },
             }),
           ],
-          icon: {
-            paddingTop: 12,
-            paddingBottom: 0,
-          },
         },
       },
       MuiButtonBase: {
@@ -509,7 +568,7 @@ export function getThemedComponents(): ThemeOptions {
                 color: (theme.vars || theme).palette.text.primary,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.grey[50],
                 },
@@ -517,7 +576,7 @@ export function getThemedComponents(): ThemeOptions {
                   color: (theme.vars || theme).palette.primaryDark[100],
                   borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                   backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                     borderColor: (theme.vars || theme).palette.primaryDark[600],
@@ -559,12 +618,31 @@ export function getThemedComponents(): ThemeOptions {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
               }),
-            ...(ownerState.variant === 'text' && {
-              color: (theme.vars || theme).palette.primary[600],
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'secondary' && {
+                color: (theme.vars || theme).palette.text.secondary,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                },
+                '&:active': {
+                  backgroundColor: (theme.vars || theme).palette.grey[200],
+                },
+                ...theme.applyDarkStyles({
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+                  },
+                  '&:active': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                  },
+                }),
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: (theme.vars || theme).palette.primary[600],
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[300],
+                }),
               }),
-            }),
           }),
         },
         variants: [
@@ -702,19 +780,28 @@ export function getThemedComponents(): ThemeOptions {
         ],
       },
       MuiIconButton: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            borderRadius: theme.shape.borderRadius,
+            ...(ownerState.size === 'small' && {
+              height: 32,
+              width: 32,
+              '& .MuiSvgIcon-root': {
+                fontSize: defaultTheme.typography.pxToRem(18),
+              },
+            }),
+          }),
+        },
         variants: [
           {
             props: { color: 'primary' },
             style: ({ theme }) => [
               {
-                height: 34,
-                width: 34,
                 border: `1px solid`,
-                borderRadius: theme.shape.borderRadius,
                 color: (theme.vars || theme).palette.primary.main,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 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`,
+                boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 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],
@@ -724,10 +811,10 @@ 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 2px 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.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 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),
+                  borderColor: (theme.vars || theme).palette.primaryDark[600],
+                  background: alpha(theme.palette.primaryDark[700], 0.8),
                 },
               }),
             ],
@@ -736,14 +823,12 @@ export function getThemedComponents(): ThemeOptions {
             props: { color: 'info' },
             style: ({ theme }) => [
               {
-                height: 34,
-                width: 34,
                 color: (theme.vars || theme).palette.text.tertiary,
                 borderRadius: theme.shape.borderRadius,
                 border: `1px solid`,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 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`,
+                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1px 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],
@@ -753,7 +838,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 2px 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 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 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],
@@ -768,16 +853,27 @@ export function getThemedComponents(): ThemeOptions {
         styleOverrides: {
           paper: ({ theme }) => [
             {
+              padding: '6px',
               minWidth: 160,
               color: (theme.vars || theme).palette.text.secondary,
               backgroundImage: 'none',
               border: '1px solid',
               backgroundColor: (theme.vars || theme).palette.background.paper,
               borderColor: (theme.vars || theme).palette.grey[200],
+              '& .MuiMenu-list': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2px',
+                '& .MuiDivider-root': {
+                  margin: '4px -8px 4px -8px',
+                },
+              },
               '& .MuiMenuItem-root': {
+                padding: '6px 8px',
+                borderRadius: '6px',
                 fontSize: theme.typography.pxToRem(14),
-                fontWeight: 500,
-                '&:hover, &:focus': {
+                fontWeight: theme.typography.fontWeightMedium,
+                '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.grey[100],
                   color: (theme.vars || theme).palette.text.primary,
                 },
@@ -795,11 +891,11 @@ export function getThemedComponents(): ThemeOptions {
               backgroundColor: (theme.vars || theme).palette.primaryDark[900],
               borderColor: (theme.vars || theme).palette.primaryDark[700],
               '& .MuiMenuItem-root': {
-                '&:hover, &:focus': {
+                '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
                 '&.Mui-selected': {
-                  color: (theme.vars || theme).palette.primary[300],
+                  color: (theme.vars || theme).palette.primary[200],
                   backgroundColor: alpha(theme.palette.primary[900], 0.4),
                 },
               },
@@ -820,10 +916,7 @@ export function getThemedComponents(): ThemeOptions {
       MuiDivider: {
         styleOverrides: {
           root: ({ theme }) => ({
-            borderColor: (theme.vars || theme).palette.grey[100],
-            ...theme.applyDarkStyles({
-              borderColor: alpha(theme.palette.primaryDark[500], 0.3),
-            }),
+            borderColor: (theme.vars || theme).palette.divider,
           }),
         },
       },
@@ -1230,6 +1323,23 @@ export function getThemedComponents(): ThemeOptions {
           },
         },
       },
+      MuiSnackbar: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            '& .MuiSnackbarContent-root': {
+              backgroundColor: '#FFF',
+              color: (theme.vars || theme).palette.text.primary,
+              fontWeight: theme.typography.fontWeightMedium,
+              border: `1px solid ${(theme.vars || theme).palette.divider}`,
+              boxShadow: `0 4px 16px ${alpha(theme.palette.grey[400], 0.2)}`,
+              ...theme.applyDarkStyles({
+                backgroundColor: (theme.vars || theme).palette.primaryDark[800],
+                boxShadow: '0 4px 16px hsl(0, 100%, 1%)',
+              }),
+            },
+          }),
+        },
+      },
       MuiPaginationItem: {
         styleOverrides: {
           root: ({ theme }) => [
diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json
index fa24d3122de6ee..306501b6a72c1a 100644
--- a/packages/mui-docs/src/translations/translations.json
+++ b/packages/mui-docs/src/translations/translations.json
@@ -15,6 +15,7 @@
     "defaultComponent": "Default component",
     "defaultValue": "Default value",
     "defaultHTMLTag": "Default HTML tag",
+    "defaultDeprecationMessage": "This API is deprecated.",
     "demos": "Demos",
     "deprecated": "Deprecated",
     "description": "Description",
@@ -93,7 +94,7 @@
   "copySource": "Copy the source",
   "copySourceLinkJS": "Copy link to JavaScript source",
   "copySourceLinkTS": "Copy link to TypeScript source",
-  "dashboardDescr": "Contains a taskbar and a mini variant drawer. The chart is courtesy of Recharts.",
+  "dashboardDescr": "A collection of charts and complex components in a responsive dashboard layout.",
   "dashboardTitle": "Dashboard",
   "decreaseSpacing": "decrease spacing",
   "demoToolbarLabel": "demo source",
diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
index 3484b116829614..48d189392f5cc0 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.8",
+  "version": "6.0.0-alpha.9",
   "private": false,
   "author": "MUI Team",
   "description": "Material Design icons distributed as SVG React components.",
@@ -45,7 +45,7 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5"
+    "@babel/runtime": "^7.24.6"
   },
   "devDependencies": {
     "@mui/icons-material": "workspace:*",
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
index d9c3c34df0d968..2dbe117da22cb0 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.41",
+  "version": "5.0.0-beta.42",
   "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.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/base": "workspace:*",
     "@mui/core-downloads-tracker": "workspace:^",
     "@mui/system": "workspace:^",
@@ -48,20 +48,20 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/material": "workspace:^",
     "@types/chai": "^4.3.16",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
diff --git a/packages/mui-joy/src/Accordion/Accordion.test.tsx b/packages/mui-joy/src/Accordion/Accordion.test.tsx
index a534845c5a61e8..aebd710821c6b7 100644
--- a/packages/mui-joy/src/Accordion/Accordion.test.tsx
+++ b/packages/mui-joy/src/Accordion/Accordion.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Accordion, { accordionClasses as classes } from '@mui/joy/Accordion';
 import AccordionSummary from '@mui/joy/AccordionSummary';
diff --git a/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx b/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx
index 7c9c56bd4c3388..27058c1815baad 100644
--- a/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx
+++ b/packages/mui-joy/src/AccordionDetails/AccordionDetails.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Accordion from '@mui/joy/Accordion';
 import AccordionSummary from '@mui/joy/AccordionSummary';
diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
index 6a61c8ce1e103a..a9babd3b08e3d8 100644
--- a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
+++ b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AccordionGroup, { accordionGroupClasses as classes } from '@mui/joy/AccordionGroup';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/AccordionSummary/AccordionSummary.test.tsx b/packages/mui-joy/src/AccordionSummary/AccordionSummary.test.tsx
index 75f8cfe6569999..e8b530514069ad 100644
--- a/packages/mui-joy/src/AccordionSummary/AccordionSummary.test.tsx
+++ b/packages/mui-joy/src/AccordionSummary/AccordionSummary.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AccordionSummary, { accordionSummaryClasses as classes } from '@mui/joy/AccordionSummary';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Alert/Alert.test.tsx b/packages/mui-joy/src/Alert/Alert.test.tsx
index b6e5cbeca2d0c8..59d50645e39ff4 100644
--- a/packages/mui-joy/src/Alert/Alert.test.tsx
+++ b/packages/mui-joy/src/Alert/Alert.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Alert, { AlertClassKey, alertClasses as classes } from '@mui/joy/Alert';
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
index 7a2598b38cad1f..45e3a14fc7428f 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AspectRatio, {
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index 17447b87ab68e4..4d67f6f82e2db5 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -8,7 +8,7 @@ import {
   act,
   fireEvent,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import Autocomplete, {
   autocompleteClasses as classes,
   createFilterOptions,
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
index dbbb1631332c72..21879755e722cc 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -735,7 +735,7 @@ interface AutocompleteComponent {
     FreeSolo extends boolean | undefined = undefined,
   >(
     props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
-  ): JSX.Element;
+  ): React.JSX.Element;
   propTypes?: any;
 }
 
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx
index 9aa78ca9a3a932..564552a8d07c7d 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AutocompleteListbox, {
   autocompleteListboxClasses as classes,
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx
index 6b3f4aab2166d3..41dec8446562b6 100644
--- a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx
+++ b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AutocompleteOption, {
   autocompleteOptionClasses as classes,
diff --git a/packages/mui-joy/src/Avatar/Avatar.test.tsx b/packages/mui-joy/src/Avatar/Avatar.test.tsx
index 0ba492bcf227b3..854829420fd137 100644
--- a/packages/mui-joy/src/Avatar/Avatar.test.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Avatar, { AvatarClassKey, avatarClasses as classes } from '@mui/joy/Avatar';
diff --git a/packages/mui-joy/src/AvatarGroup/AvatarGroup.test.tsx b/packages/mui-joy/src/AvatarGroup/AvatarGroup.test.tsx
index 5e7668a0d309eb..89d5031ff8de17 100644
--- a/packages/mui-joy/src/AvatarGroup/AvatarGroup.test.tsx
+++ b/packages/mui-joy/src/AvatarGroup/AvatarGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AvatarGroup, { avatarGroupClasses as classes } from '@mui/joy/AvatarGroup';
 import Avatar, { avatarClasses } from '@mui/joy/Avatar';
diff --git a/packages/mui-joy/src/Badge/Badge.test.tsx b/packages/mui-joy/src/Badge/Badge.test.tsx
index cf235ec1de0bf9..60fda872fd6efa 100644
--- a/packages/mui-joy/src/Badge/Badge.test.tsx
+++ b/packages/mui-joy/src/Badge/Badge.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Badge, { BadgeClassKey, BadgeOrigin, badgeClasses as classes } from '@mui/joy/Badge';
diff --git a/packages/mui-joy/src/Box/Box.test.tsx b/packages/mui-joy/src/Box/Box.test.tsx
index b5380ff674fa1a..87644fe248ef20 100644
--- a/packages/mui-joy/src/Box/Box.test.tsx
+++ b/packages/mui-joy/src/Box/Box.test.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable material-ui/no-empty-box */
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, CssVarsProvider, extendTheme, PalettePrimary } from '@mui/joy/styles';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/joy/className';
 import Box from '@mui/joy/Box';
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.tsx
index dcee24fcb2ea49..2bd67bd0e0a31a 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.tsx
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Breadcrumbs, {
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
index 6da089a2c1d580..10a278263f5500 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
@@ -154,7 +154,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
   const allItems = (
     React.Children.toArray(children).filter((child) => {
       return React.isValidElement(child);
-    }) as Array<React.ReactElement>
+    }) as Array<React.ReactElement<any>>
   ).map((child, index) => (
     <SlotLi key={`child-${index}`} {...liProps}>
       {isMuiElement(child, ['Typography'])
diff --git a/packages/mui-joy/src/Button/Button.spec.tsx b/packages/mui-joy/src/Button/Button.spec.tsx
index 0eb33a5f726351..c24940a6880324 100644
--- a/packages/mui-joy/src/Button/Button.spec.tsx
+++ b/packages/mui-joy/src/Button/Button.spec.tsx
@@ -47,7 +47,7 @@ function CustomLink({
   children,
   to,
   ...props
-}: React.PropsWithChildren<{ to: string } & Omit<JSX.IntrinsicElements['a'], 'href'>>) {
+}: React.PropsWithChildren<{ to: string } & Omit<React.JSX.IntrinsicElements['a'], 'href'>>) {
   return (
     <a href={to} {...props}>
       {children}
diff --git a/packages/mui-joy/src/Button/Button.test.tsx b/packages/mui-joy/src/Button/Button.test.tsx
index 590e7a7af67666..47e10fce89fec8 100644
--- a/packages/mui-joy/src/Button/Button.test.tsx
+++ b/packages/mui-joy/src/Button/Button.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Button, { buttonClasses as classes } from '@mui/joy/Button';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Button/ButtonProps.ts b/packages/mui-joy/src/Button/ButtonProps.ts
index 6cb4ab2d12c8df..5c4a676bf0d0b5 100644
--- a/packages/mui-joy/src/Button/ButtonProps.ts
+++ b/packages/mui-joy/src/Button/ButtonProps.ts
@@ -147,5 +147,5 @@ export interface ButtonOwnerState extends ApplyColorInversion<ButtonProps> {
 
 export type ExtendButton<M extends OverridableTypeMap> = ((
   props: OverrideProps<ExtendButtonTypeMap<M>, 'a'>,
-) => JSX.Element) &
+) => React.JSX.Element) &
   OverridableComponent<ExtendButtonTypeMap<M>>;
diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.test.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.test.tsx
index 615fa7eae901f2..d03977d1216933 100644
--- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.test.tsx
+++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ButtonGroup, {
diff --git a/packages/mui-joy/src/Card/Card.test.tsx b/packages/mui-joy/src/Card/Card.test.tsx
index 833b27ce4df918..fd271fdf791809 100644
--- a/packages/mui-joy/src/Card/Card.test.tsx
+++ b/packages/mui-joy/src/Card/Card.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Card, { cardClasses as classes, CardClassKey } from '@mui/joy/Card';
diff --git a/packages/mui-joy/src/CardActions/CardActions.test.tsx b/packages/mui-joy/src/CardActions/CardActions.test.tsx
index 9cc27519797f9a..9c5731e7db7a72 100644
--- a/packages/mui-joy/src/CardActions/CardActions.test.tsx
+++ b/packages/mui-joy/src/CardActions/CardActions.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CardActions, { cardActionsClasses as classes } from '@mui/joy/CardActions';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/CardContent/CardContent.test.tsx b/packages/mui-joy/src/CardContent/CardContent.test.tsx
index ce0a1f73f5d4e9..7814064512f3ba 100644
--- a/packages/mui-joy/src/CardContent/CardContent.test.tsx
+++ b/packages/mui-joy/src/CardContent/CardContent.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CardContent, { cardContentClasses as classes } from '@mui/joy/CardContent';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/CardCover/CardCover.test.tsx b/packages/mui-joy/src/CardCover/CardCover.test.tsx
index 378a635f0a870b..92c92ee10330aa 100644
--- a/packages/mui-joy/src/CardCover/CardCover.test.tsx
+++ b/packages/mui-joy/src/CardCover/CardCover.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CardCover, { cardCoverClasses as classes } from '@mui/joy/CardCover';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
index f41c047557ce8b..d32893c5541f27 100644
--- a/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
+++ b/packages/mui-joy/src/CardOverflow/CardOverflow.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CardOverflow, {
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
index 8b76c36fbb533a..f2a5636cd49926 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Checkbox, { checkboxClasses as classes } from '@mui/joy/Checkbox';
 import { ThemeProvider } from '@mui/joy/styles';
 import CloseIcon from '../internal/svg-icons/Close';
diff --git a/packages/mui-joy/src/Chip/Chip.test.tsx b/packages/mui-joy/src/Chip/Chip.test.tsx
index cabfad12d0f696..f4d82776064b61 100644
--- a/packages/mui-joy/src/Chip/Chip.test.tsx
+++ b/packages/mui-joy/src/Chip/Chip.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Chip, { ChipClassKey, chipClasses as classes } from '@mui/joy/Chip';
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
index a36b316f97e1e8..a730b96220c642 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, act, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, act, fireEvent } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Chip from '@mui/joy/Chip';
 import ChipDelete, { chipDeleteClasses as classes } from '@mui/joy/ChipDelete';
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
index e663da95d04200..474d33d281cd54 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CircularProgress, { circularProgressClasses as classes } from '@mui/joy/CircularProgress';
diff --git a/packages/mui-joy/src/Container/Container.test.tsx b/packages/mui-joy/src/Container/Container.test.tsx
index 1ea7b81396b27c..3b497a29a3af34 100644
--- a/packages/mui-joy/src/Container/Container.test.tsx
+++ b/packages/mui-joy/src/Container/Container.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Container, { containerClasses as classes } from '@mui/joy/Container';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/DialogActions/DialogActions.test.tsx b/packages/mui-joy/src/DialogActions/DialogActions.test.tsx
index 7059dfbabee6c0..ebede69703efe0 100644
--- a/packages/mui-joy/src/DialogActions/DialogActions.test.tsx
+++ b/packages/mui-joy/src/DialogActions/DialogActions.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import DialogActions, { dialogActionsClasses as classes } from '@mui/joy/DialogActions';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/DialogContent/DialogContent.test.tsx b/packages/mui-joy/src/DialogContent/DialogContent.test.tsx
index 6ec3a8257d9612..8e3ebb49794b46 100644
--- a/packages/mui-joy/src/DialogContent/DialogContent.test.tsx
+++ b/packages/mui-joy/src/DialogContent/DialogContent.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import DialogContent, { dialogContentClasses as classes } from '@mui/joy/DialogContent';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/DialogTitle/DialogTitle.test.tsx b/packages/mui-joy/src/DialogTitle/DialogTitle.test.tsx
index ce0a1f73f5d4e9..7814064512f3ba 100644
--- a/packages/mui-joy/src/DialogTitle/DialogTitle.test.tsx
+++ b/packages/mui-joy/src/DialogTitle/DialogTitle.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import CardContent, { cardContentClasses as classes } from '@mui/joy/CardContent';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Divider/Divider.test.tsx b/packages/mui-joy/src/Divider/Divider.test.tsx
index 0cd3e64429bda2..077e6871c5960c 100644
--- a/packages/mui-joy/src/Divider/Divider.test.tsx
+++ b/packages/mui-joy/src/Divider/Divider.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Divider, { dividerClasses as classes } from '@mui/joy/Divider';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Drawer/Drawer.test.tsx b/packages/mui-joy/src/Drawer/Drawer.test.tsx
index 6ef1423b748f84..263db3880481f4 100644
--- a/packages/mui-joy/src/Drawer/Drawer.test.tsx
+++ b/packages/mui-joy/src/Drawer/Drawer.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, CssVarsProvider, extendTheme } from '@mui/joy/styles';
 import Drawer, { drawerClasses as classes } from '@mui/joy/Drawer';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/FormControl/FormControl.test.tsx b/packages/mui-joy/src/FormControl/FormControl.test.tsx
index c56a1c4e2fbbf9..d3c490b23c32c0 100644
--- a/packages/mui-joy/src/FormControl/FormControl.test.tsx
+++ b/packages/mui-joy/src/FormControl/FormControl.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import FormControl, { formControlClasses as classes } from '@mui/joy/FormControl';
diff --git a/packages/mui-joy/src/FormHelperText/FormHelperText.test.tsx b/packages/mui-joy/src/FormHelperText/FormHelperText.test.tsx
index ef86a79b14dbc7..369e66266d6d64 100644
--- a/packages/mui-joy/src/FormHelperText/FormHelperText.test.tsx
+++ b/packages/mui-joy/src/FormHelperText/FormHelperText.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import FormHelperText, { formHelperTextClasses as classes } from '@mui/joy/FormHelperText';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/FormLabel/FormLabel.test.tsx b/packages/mui-joy/src/FormLabel/FormLabel.test.tsx
index 7404c439dc0b08..641161fb9a920e 100644
--- a/packages/mui-joy/src/FormLabel/FormLabel.test.tsx
+++ b/packages/mui-joy/src/FormLabel/FormLabel.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import FormLabel, { formLabelClasses as classes } from '@mui/joy/FormLabel';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Grid/Grid.test.tsx b/packages/mui-joy/src/Grid/Grid.test.tsx
index fe7182b9f8658d..70b59f98e02665 100644
--- a/packages/mui-joy/src/Grid/Grid.test.tsx
+++ b/packages/mui-joy/src/Grid/Grid.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Grid, { gridClasses as classes } from '@mui/joy/Grid';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/IconButton/IconButton.test.tsx b/packages/mui-joy/src/IconButton/IconButton.test.tsx
index 9e026fcbb43193..13a90be9f7d326 100644
--- a/packages/mui-joy/src/IconButton/IconButton.test.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import IconButton, { iconButtonClasses as classes } from '@mui/joy/IconButton';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/IconButton/IconButtonProps.ts b/packages/mui-joy/src/IconButton/IconButtonProps.ts
index 69479718836f3d..573fdc45783f50 100644
--- a/packages/mui-joy/src/IconButton/IconButtonProps.ts
+++ b/packages/mui-joy/src/IconButton/IconButtonProps.ts
@@ -120,5 +120,5 @@ export interface IconButtonOwnerState extends ApplyColorInversion<IconButtonProp
 
 export type ExtendIconButton<M extends OverridableTypeMap> = ((
   props: OverrideProps<ExtendIconButtonTypeMap<M>, 'a'>,
-) => JSX.Element) &
+) => React.JSX.Element) &
   OverridableComponent<ExtendIconButtonTypeMap<M>>;
diff --git a/packages/mui-joy/src/Input/Input.test.tsx b/packages/mui-joy/src/Input/Input.test.tsx
index 8bd2a8d9cac635..ace9fa75ffe8f3 100644
--- a/packages/mui-joy/src/Input/Input.test.tsx
+++ b/packages/mui-joy/src/Input/Input.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, act, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, act, fireEvent } from '@mui/internal-test-utils';
 import Input, { inputClasses as classes } from '@mui/joy/Input';
 import { ThemeProvider, extendTheme } from '@mui/joy/styles';
 import FormControl from '@mui/joy/FormControl';
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
index 30c719e00ebb68..37a7f8884d005a 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import LinearProgress, { linearProgressClasses as classes } from '@mui/joy/LinearProgress';
diff --git a/packages/mui-joy/src/Link/Link.test.tsx b/packages/mui-joy/src/Link/Link.test.tsx
index ebc39e477aa134..68da3bea32c381 100644
--- a/packages/mui-joy/src/Link/Link.test.tsx
+++ b/packages/mui-joy/src/Link/Link.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { SinonSpy, spy } from 'sinon';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import Link, { LinkClassKey, linkClasses as classes } from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 378a91b8d2f142..bac2fbe4f315bc 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -292,8 +292,8 @@ const Link = React.forwardRef(function Link(inProps, ref) {
         )}
 
         {isMuiElement(children, ['Skeleton'])
-          ? React.cloneElement(children as React.ReactElement, {
-              variant: (children as React.ReactElement).props.variant || 'inline',
+          ? React.cloneElement(children as React.ReactElement<any>, {
+              variant: (children as React.ReactElement<any>).props.variant || 'inline',
             })
           : children}
         {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
diff --git a/packages/mui-joy/src/List/List.test.tsx b/packages/mui-joy/src/List/List.test.tsx
index 252995e53feb8d..15ecee4fc0e392 100644
--- a/packages/mui-joy/src/List/List.test.tsx
+++ b/packages/mui-joy/src/List/List.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import List, { listClasses as classes } from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
diff --git a/packages/mui-joy/src/ListDivider/ListDivider.test.tsx b/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
index e958c94631f13e..eaba1068e18869 100644
--- a/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
+++ b/packages/mui-joy/src/ListDivider/ListDivider.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import List from '@mui/joy/List';
 import ListDivider, { listDividerClasses as classes } from '@mui/joy/ListDivider';
diff --git a/packages/mui-joy/src/ListItem/ListItem.test.tsx b/packages/mui-joy/src/ListItem/ListItem.test.tsx
index 03b1217c2b298a..3c8ae0423c0ddc 100644
--- a/packages/mui-joy/src/ListItem/ListItem.test.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuList from '@mui/joy/MenuList';
 import List from '@mui/joy/List';
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
index 723a21bba45a0b..0c40f7ad93923c 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, act, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, act, fireEvent } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListItemButton, { listItemButtonClasses as classes } from '@mui/joy/ListItemButton';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
index 54402f51c8991d..4fe2151bff8fcd 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
+++ b/packages/mui-joy/src/ListItemButton/ListItemButtonProps.ts
@@ -123,5 +123,5 @@ export interface ListItemButtonOwnerState extends ApplyColorInversion<ListItemBu
 
 export type ExtendListItemButton<M extends OverridableTypeMap> = ((
   props: OverrideProps<ExtendListItemButtonTypeMap<M>, 'a'>,
-) => JSX.Element) &
+) => React.JSX.Element) &
   OverridableComponent<ExtendListItemButtonTypeMap<M>>;
diff --git a/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx b/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
index 3d7af18633f725..9bd21582efba82 100644
--- a/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
+++ b/packages/mui-joy/src/ListItemContent/ListItemContent.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListItemContent, { listItemContentClasses as classes } from '@mui/joy/ListItemContent';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
index 2f756156c88743..43a8fe1cb4feea 100644
--- a/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
+++ b/packages/mui-joy/src/ListItemDecorator/ListItemDecorator.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListItemDecorator, { listItemDecoratorClasses as classes } from '@mui/joy/ListItemDecorator';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
index 6af9deba3d4a54..c0a69da6d87db7 100644
--- a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
+++ b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListSubheader, { listSubheaderClasses as classes } from '@mui/joy/ListSubheader';
 import ListSubheaderContext from './ListSubheaderContext';
diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx
index d6969b30334951..c1eb7a52292e8e 100644
--- a/packages/mui-joy/src/Menu/Menu.test.tsx
+++ b/packages/mui-joy/src/Menu/Menu.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import { act, createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { Popper as PopperUnstyled } from '@mui/base/Popper';
 import { DropdownContext, DropdownContextValue } from '@mui/base/useDropdown';
 import { ThemeProvider } from '@mui/joy/styles';
diff --git a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx
index 92052dba8ebc6d..85081fb4ba3890 100644
--- a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx
+++ b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { DropdownContext, DropdownContextValue } from '@mui/base/useDropdown';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuButton, { menuButtonClasses as classes } from '@mui/joy/MenuButton';
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
index 7492c1e39340e3..a7c06365e4249e 100644
--- a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
+++ b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { MenuProvider, MenuProviderValue } from '@mui/base/useMenu';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuItem, { menuItemClasses as classes } from '@mui/joy/MenuItem';
@@ -26,7 +26,7 @@ function Wrapper({ children }: { children: React.ReactNode }) {
 
 describe('Joy <MenuItem />', () => {
   const { render: baseRender } = createRenderer();
-  const render = (element: JSX.Element, options = {}) =>
+  const render = (element: React.JSX.Element, options = {}) =>
     baseRender(element, {
       wrapper: Wrapper as React.JSXElementConstructor<{ children?: React.ReactNode }>,
       ...options,
diff --git a/packages/mui-joy/src/MenuItem/MenuItemProps.ts b/packages/mui-joy/src/MenuItem/MenuItemProps.ts
index d67ec37029a28a..d87650a1bf351c 100644
--- a/packages/mui-joy/src/MenuItem/MenuItemProps.ts
+++ b/packages/mui-joy/src/MenuItem/MenuItemProps.ts
@@ -50,5 +50,5 @@ export interface MenuItemOwnerState extends ApplyColorInversion<MenuItemProps> {
 
 export type ExtendMenuItem<M extends OverridableTypeMap> = ((
   props: OverrideProps<ExtendMenuItemTypeMap<M>, 'a'>,
-) => JSX.Element) &
+) => React.JSX.Element) &
   OverridableComponent<ExtendMenuItemTypeMap<M>>;
diff --git a/packages/mui-joy/src/MenuList/MenuList.test.tsx b/packages/mui-joy/src/MenuList/MenuList.test.tsx
index f9b58f914c8a15..1f57a53936ca85 100644
--- a/packages/mui-joy/src/MenuList/MenuList.test.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuList, { menuListClasses as classes } from '@mui/joy/MenuList';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Modal/Modal.test.tsx b/packages/mui-joy/src/Modal/Modal.test.tsx
index e597c4197cf9ab..58ea6b843e68da 100644
--- a/packages/mui-joy/src/Modal/Modal.test.tsx
+++ b/packages/mui-joy/src/Modal/Modal.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { spy } from 'sinon';
 import { expect } from 'chai';
-import { createRenderer, act, fireEvent, within } from '@mui-internal/test-utils';
+import { createRenderer, act, fireEvent, within } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Modal, { modalClasses as classes, ModalProps } from '@mui/joy/Modal';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/ModalClose/ModalClose.test.tsx b/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
index 86a7548a4b94f7..24a159cec4f86c 100644
--- a/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
+++ b/packages/mui-joy/src/ModalClose/ModalClose.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Modal from '@mui/joy/Modal';
diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
index 701f04b771835b..b76afc80dd6468 100644
--- a/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
+++ b/packages/mui-joy/src/ModalDialog/ModalDialog.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ModalDialog, { modalDialogClasses as classes } from '@mui/joy/ModalDialog';
diff --git a/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx b/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx
index 4c46778eda25a1..e121128689599d 100644
--- a/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx
+++ b/packages/mui-joy/src/ModalOverflow/ModalOverflow.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ModalOverflow, { modalOverflowClasses as classes } from '@mui/joy/ModalOverflow';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Option/OptionProps.ts b/packages/mui-joy/src/Option/OptionProps.ts
index e13575dfa2bcd3..6466898f1f634a 100644
--- a/packages/mui-joy/src/Option/OptionProps.ts
+++ b/packages/mui-joy/src/Option/OptionProps.ts
@@ -48,7 +48,7 @@ export interface OptionTypeMap<P = {}, D extends React.ElementType = 'li'> {
      * A text representation of the option's content.
      * Used for keyboard text navigation matching.
      */
-    label?: string | React.ReactElement;
+    label?: string | React.ReactElement<any>;
     /**
      * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
      * @default 'plain'
@@ -100,5 +100,5 @@ export interface OptionOwnerState extends ApplyColorInversion<Omit<OptionProps,
 
 export type ExtendOption<M extends OverridableTypeMap> = ((
   props: OverrideProps<ExtendOptionTypeMap<M>, 'a'>,
-) => JSX.Element) &
+) => React.JSX.Element) &
   OverridableComponent<ExtendOptionTypeMap<M>>;
diff --git a/packages/mui-joy/src/Radio/Radio.test.tsx b/packages/mui-joy/src/Radio/Radio.test.tsx
index 471918c6ecc3ff..fdb63ce9459b5c 100644
--- a/packages/mui-joy/src/Radio/Radio.test.tsx
+++ b/packages/mui-joy/src/Radio/Radio.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Radio, { radioClasses as classes } from '@mui/joy/Radio';
 import { ThemeProvider, extendTheme } from '@mui/joy/styles';
 import FormControl from '@mui/joy/FormControl';
diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
index 22f32cf05c664e..8665f6bd97ad82 100644
--- a/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
+++ b/packages/mui-joy/src/RadioGroup/RadioGroup.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import RadioGroup, { radioGroupClasses as classes, RadioGroupProps } from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import { ThemeProvider } from '@mui/joy/styles';
diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx
index 37ad4fed32befc..f727a39368b417 100644
--- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx
+++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ScopedCssBaseline, { scopedCssBaselineClasses as classes } from '@mui/joy/ScopedCssBaseline';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Select/Select.test.tsx b/packages/mui-joy/src/Select/Select.test.tsx
index 6f04051bea4e26..787f43225dc0de 100644
--- a/packages/mui-joy/src/Select/Select.test.tsx
+++ b/packages/mui-joy/src/Select/Select.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Select, { selectClasses as classes, SelectOption } from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index 017fd87c2c348e..5a4db947b53849 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -626,12 +626,12 @@ interface SelectComponent {
       component: C;
       multiple?: Multiple;
     } & OverrideProps<SelectTypeMap<OptionValue, Multiple>, C>,
-  ): JSX.Element | null;
+  ): React.JSX.Element | null;
   <OptionValue extends {}, Multiple extends boolean = false>(
     props: {
       multiple?: Multiple;
     } & DefaultComponentProps<SelectTypeMap<OptionValue, Multiple>>,
-  ): JSX.Element | null;
+  ): React.JSX.Element | null;
   propTypes?: any;
 }
 
diff --git a/packages/mui-joy/src/Sheet/Sheet.test.tsx b/packages/mui-joy/src/Sheet/Sheet.test.tsx
index 5019044fe05f1a..d3df7490c7d15c 100644
--- a/packages/mui-joy/src/Sheet/Sheet.test.tsx
+++ b/packages/mui-joy/src/Sheet/Sheet.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Sheet, { sheetClasses as classes, SheetClassKey } from '@mui/joy/Sheet';
diff --git a/packages/mui-joy/src/Skeleton/Skeleton.test.tsx b/packages/mui-joy/src/Skeleton/Skeleton.test.tsx
index ea32bc9be607ef..67f317211c7d5c 100644
--- a/packages/mui-joy/src/Skeleton/Skeleton.test.tsx
+++ b/packages/mui-joy/src/Skeleton/Skeleton.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Skeleton, { skeletonClasses as classes } from '@mui/joy/Skeleton';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Slider/Slider.test.tsx b/packages/mui-joy/src/Slider/Slider.test.tsx
index 23c22a222d3c82..42901b09289b80 100644
--- a/packages/mui-joy/src/Slider/Slider.test.tsx
+++ b/packages/mui-joy/src/Slider/Slider.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Slider, { sliderClasses as classes } from '@mui/joy/Slider';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
index e0041cbe6e5ab1..af55c7aa4e5d98 100644
--- a/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
+++ b/packages/mui-joy/src/Snackbar/Snackbar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent, act } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, act } from '@mui/internal-test-utils';
 import Snackbar, { snackbarClasses as classes } from '@mui/joy/Snackbar';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
@@ -19,7 +19,7 @@ describe('Joy <Snackbar />', () => {
    * We have to defer the effect manually like `useEffect` would so we have to flush the effect manually instead of relying on `act()`.
    * React bug: https://github.com/facebook/react/issues/20074
    */
-  function render(...args: [React.ReactElement]) {
+  function render(...args: [React.ReactElement<any>]) {
     const result = clientRender(...args);
     clock.tick(0);
     return result;
diff --git a/packages/mui-joy/src/Stack/Stack.test.tsx b/packages/mui-joy/src/Stack/Stack.test.tsx
index 35ba54915ca1a4..6a7bd0d042fba0 100644
--- a/packages/mui-joy/src/Stack/Stack.test.tsx
+++ b/packages/mui-joy/src/Stack/Stack.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Stack, { stackClasses as classes } from '@mui/joy/Stack';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Step/Step.test.tsx b/packages/mui-joy/src/Step/Step.test.tsx
index 131a79d8445332..4af17d272126a8 100644
--- a/packages/mui-joy/src/Step/Step.test.tsx
+++ b/packages/mui-joy/src/Step/Step.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Step, { stepClasses as classes } from '@mui/joy/Step';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/StepButton/StepButton.test.tsx b/packages/mui-joy/src/StepButton/StepButton.test.tsx
index 6b2f4c14661447..706549765b8325 100644
--- a/packages/mui-joy/src/StepButton/StepButton.test.tsx
+++ b/packages/mui-joy/src/StepButton/StepButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import StepButton, { stepButtonClasses as classes } from '@mui/joy/StepButton';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx b/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx
index b063de785f46b8..267152885c27cc 100644
--- a/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx
+++ b/packages/mui-joy/src/StepIndicator/StepIndicator.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { unstable_capitalize as capitalize } from '@mui/utils';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import StepIndicator, { stepIndicatorClasses as classes } from '@mui/joy/StepIndicator';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Stepper/Stepper.test.tsx b/packages/mui-joy/src/Stepper/Stepper.test.tsx
index ec1dcf56f4a6a1..27352f3a0ab1e3 100644
--- a/packages/mui-joy/src/Stepper/Stepper.test.tsx
+++ b/packages/mui-joy/src/Stepper/Stepper.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Stepper, { stepperClasses as classes } from '@mui/joy/Stepper';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx
index 6d540c947fbf11..9c7dd2a22a7b7d 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import SvgIcon, {
   svgIconClasses as classes,
diff --git a/packages/mui-joy/src/Switch/Switch.test.tsx b/packages/mui-joy/src/Switch/Switch.test.tsx
index fa849dc389e9fb..d14a52403e2db0 100644
--- a/packages/mui-joy/src/Switch/Switch.test.tsx
+++ b/packages/mui-joy/src/Switch/Switch.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import Switch, { switchClasses as classes } from '@mui/joy/Switch';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Tab/Tab.test.tsx b/packages/mui-joy/src/Tab/Tab.test.tsx
index 37113dc2be0e6e..a5f783caa2a190 100644
--- a/packages/mui-joy/src/Tab/Tab.test.tsx
+++ b/packages/mui-joy/src/Tab/Tab.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { TabsProps } from '@mui/base/Tabs';
 import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
 import { useTabsList, TabsListProvider as BaseTabsListProvider } from '@mui/base/useTabsList';
diff --git a/packages/mui-joy/src/TabList/TabList.test.tsx b/packages/mui-joy/src/TabList/TabList.test.tsx
index 515450dbed9eef..4af93910b9b729 100644
--- a/packages/mui-joy/src/TabList/TabList.test.tsx
+++ b/packages/mui-joy/src/TabList/TabList.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { TabsProps } from '@mui/base/Tabs';
 import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
 import { ThemeProvider } from '@mui/joy/styles';
diff --git a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
index 9bf7a615fde964..89c2ba13f945c3 100644
--- a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { TabsProps } from '@mui/base/Tabs';
 import { useTabs, TabsProvider as BaseTabsProvider } from '@mui/base/useTabs';
 import { ThemeProvider } from '@mui/joy/styles';
diff --git a/packages/mui-joy/src/Table/Table.test.tsx b/packages/mui-joy/src/Table/Table.test.tsx
index 6be49bb54cb8a8..6fa3b341f772cc 100644
--- a/packages/mui-joy/src/Table/Table.test.tsx
+++ b/packages/mui-joy/src/Table/Table.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Table, { tableClasses as classes } from '@mui/joy/Table';
diff --git a/packages/mui-joy/src/Tabs/Tabs.test.tsx b/packages/mui-joy/src/Tabs/Tabs.test.tsx
index da7a8b3b2e1a98..f9e4e4324084c5 100644
--- a/packages/mui-joy/src/Tabs/Tabs.test.tsx
+++ b/packages/mui-joy/src/Tabs/Tabs.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Tabs, { tabsClasses as classes } from '@mui/joy/Tabs';
 import SizeTabsContext from './SizeTabsContext';
diff --git a/packages/mui-joy/src/Textarea/Textarea.test.tsx b/packages/mui-joy/src/Textarea/Textarea.test.tsx
index 60cc2e70934025..25f272d8b7939e 100644
--- a/packages/mui-joy/src/Textarea/Textarea.test.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, act, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, act, fireEvent } from '@mui/internal-test-utils';
 import Textarea, { textareaClasses as classes } from '@mui/joy/Textarea';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
index 2f5777f4fd4209..b2b1a3068cbe5d 100644
--- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
+++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ToggleButtonGroup, { toggleButtonGroupClasses as classes } from '@mui/joy/ToggleButtonGroup';
 import Button from '@mui/joy/Button';
diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx
index 54564bcc9c78b2..85282d67ef56aa 100644
--- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -193,10 +193,10 @@ interface ToggleButtonGroupComponent {
        */
       component: C;
     } & OverrideProps<ToggleButtonGroupTypeMap<TValue>, C>,
-  ): JSX.Element | null;
+  ): React.JSX.Element | null;
   <TValue extends SupportedValue>(
     props: DefaultComponentProps<ToggleButtonGroupTypeMap<TValue>>,
-  ): JSX.Element | null;
+  ): React.JSX.Element | null;
   propTypes?: any;
 }
 
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
index 7a277704e347dd..64361e880a4ae1 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, act } from '@mui-internal/test-utils';
+import { createRenderer, act } from '@mui/internal-test-utils';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { PopperProps } from '@mui/base';
 import { ThemeProvider } from '@mui/joy/styles';
diff --git a/packages/mui-joy/src/Tooltip/TooltipProps.ts b/packages/mui-joy/src/Tooltip/TooltipProps.ts
index bd01a316186c3c..f76a50e775fd86 100644
--- a/packages/mui-joy/src/Tooltip/TooltipProps.ts
+++ b/packages/mui-joy/src/Tooltip/TooltipProps.ts
@@ -47,7 +47,7 @@ export interface TooltipTypeMap<P = {}, D extends React.ElementType = 'div'> {
       /**
        * Tooltip reference element.
        */
-      children: React.ReactElement;
+      children: React.ReactElement<any>;
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        * @default 'neutral'
diff --git a/packages/mui-joy/src/Typography/Typography.spec.tsx b/packages/mui-joy/src/Typography/Typography.spec.tsx
index 87059cd77ed56c..c85d02d5e2ebc2 100644
--- a/packages/mui-joy/src/Typography/Typography.spec.tsx
+++ b/packages/mui-joy/src/Typography/Typography.spec.tsx
@@ -6,7 +6,7 @@ import Typography, { TypographyOwnerState } from '@mui/joy/Typography';
   Text
 </Typography>;
 
-function Link(props: JSX.IntrinsicElements['a']) {
+function Link(props: React.JSX.IntrinsicElements['a']) {
   return <a {...props} />;
 }
 <Typography component={Link} href="/">
diff --git a/packages/mui-joy/src/Typography/Typography.test.tsx b/packages/mui-joy/src/Typography/Typography.test.tsx
index 0b721f3a5dc024..8bf2616d5f177a 100644
--- a/packages/mui-joy/src/Typography/Typography.test.tsx
+++ b/packages/mui-joy/src/Typography/Typography.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography, { typographyClasses as classes, TypographyProps } from '@mui/joy/Typography';
 import { ThemeProvider } from '@mui/joy/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index e77423e8c6400e..dd520cde4d4d3b 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -250,8 +250,8 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
         )}
 
         {hasSkeleton
-          ? React.cloneElement(children as React.ReactElement, {
-              variant: (children as React.ReactElement).props.variant || 'inline',
+          ? React.cloneElement(children as React.ReactElement<any>, {
+              variant: (children as React.ReactElement<any>).props.variant || 'inline',
             })
           : children}
         {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
diff --git a/packages/mui-joy/src/colorInversion/colorInversionUtils.test.tsx b/packages/mui-joy/src/colorInversion/colorInversionUtils.test.tsx
index 151e901ff7d304..897bcceaaf5f0b 100644
--- a/packages/mui-joy/src/colorInversion/colorInversionUtils.test.tsx
+++ b/packages/mui-joy/src/colorInversion/colorInversionUtils.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Box from '@mui/joy/Box';
 import { styled } from '@mui/joy/styles';
 import { applySoftInversion, applySolidInversion } from '@mui/joy/colorInversion';
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
index 354fa25ce36dac..fcbdb5349589d8 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { CssVarsProvider, useTheme, shouldSkipGeneratingVar } from '@mui/joy/styles';
 
 describe('[Joy] CssVarsProvider', () => {
diff --git a/packages/mui-joy/src/styles/ThemeProvider.test.tsx b/packages/mui-joy/src/styles/ThemeProvider.test.tsx
index 75de20ec715c57..8d702717ecc95d 100644
--- a/packages/mui-joy/src/styles/ThemeProvider.test.tsx
+++ b/packages/mui-joy/src/styles/ThemeProvider.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, useTheme } from '@mui/joy/styles';
 import defaultTheme from './defaultTheme';
 
diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
index 078384e854e218..fe85a90982d372 100644
--- a/packages/mui-joy/src/styles/extendTheme.test.js
+++ b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { extendTheme, useTheme, CssVarsProvider, styled } from '@mui/joy/styles';
 
 describe('extendTheme', () => {
diff --git a/packages/mui-joy/src/styles/styled.test.tsx b/packages/mui-joy/src/styles/styled.test.tsx
index 4ddf5a023bdc84..db726b2913d10e 100644
--- a/packages/mui-joy/src/styles/styled.test.tsx
+++ b/packages/mui-joy/src/styles/styled.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { CssVarsProvider, ThemeProvider, styled, extendTheme } from '@mui/joy/styles';
 import defaultTheme from './defaultTheme';
 
diff --git a/packages/mui-joy/src/styles/variantColorInheritance.test.tsx b/packages/mui-joy/src/styles/variantColorInheritance.test.tsx
index d6f967869565ee..1f12e1f4133a6c 100644
--- a/packages/mui-joy/src/styles/variantColorInheritance.test.tsx
+++ b/packages/mui-joy/src/styles/variantColorInheritance.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { VariantColorProvider, useVariantColor } from './variantColorInheritance';
 
 describe('VariantColorProvider', () => {
diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx
index 7aab3a0233e590..7c542ef4c60c6d 100644
--- a/packages/mui-joy/src/utils/useSlot.test.tsx
+++ b/packages/mui-joy/src/utils/useSlot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '../styles';
 import { SlotProps } from './types';
diff --git a/packages/mui-joy/test/describeConformance.ts b/packages/mui-joy/test/describeConformance.ts
index f82c1e1e0215b7..135af2b4f88ca5 100644
--- a/packages/mui-joy/test/describeConformance.ts
+++ b/packages/mui-joy/test/describeConformance.ts
@@ -1,12 +1,12 @@
 import {
   describeConformance as baseDescribeConformance,
   ConformanceOptions,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import { createTheme } from '@mui/system';
 
 export default function describeConformance(
-  minimalElement: React.ReactElement,
+  minimalElement: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   function getOptionsWithDefaults() {
diff --git a/packages/mui-joy/test/integration/TabsIntegration.test.tsx b/packages/mui-joy/test/integration/TabsIntegration.test.tsx
index 6a27f964e0cbb0..e61afeef57c368 100644
--- a/packages/mui-joy/test/integration/TabsIntegration.test.tsx
+++ b/packages/mui-joy/test/integration/TabsIntegration.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab from '@mui/joy/Tab';
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index 57d93163d43a88..efc5357d4c2bc5 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.8",
+  "version": "6.0.0-alpha.9",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
@@ -40,7 +40,7 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/base": "workspace:*",
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",
@@ -49,17 +49,17 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/material": "workspace:*",
     "@types/chai": "^4.3.16",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
diff --git a/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx b/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx
index d1b244336688e5..f5999beccc8488 100644
--- a/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx
+++ b/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type CalendarPickerComponent = (<TDate>(
   props: CalendarPickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The CalendarPicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx b/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
index 5a5eedc42e23ba..1fdb678f251d1a 100644
--- a/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
+++ b/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type CalendarPickerSkeletonComponent = ((
   props: CalendarPickerSkeletonProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The CalendarPickerSkeleton component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/ClockPicker/ClockPicker.tsx b/packages/mui-lab/src/ClockPicker/ClockPicker.tsx
index ff9f19395863cb..47187af85eee8c 100644
--- a/packages/mui-lab/src/ClockPicker/ClockPicker.tsx
+++ b/packages/mui-lab/src/ClockPicker/ClockPicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type ClockPickerComponent = (<TDate>(
   props: ClockPickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The ClockPicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/DatePicker/DatePicker.tsx b/packages/mui-lab/src/DatePicker/DatePicker.tsx
index de1b2d83ea164c..a684d79cae4e1f 100644
--- a/packages/mui-lab/src/DatePicker/DatePicker.tsx
+++ b/packages/mui-lab/src/DatePicker/DatePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type DatePickerComponent = (<TDate>(
   props: DatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @ignore - do not document.
diff --git a/packages/mui-lab/src/DateRangePicker/DateRangePicker.ts b/packages/mui-lab/src/DateRangePicker/DateRangePicker.ts
index a0e08d393c6d44..24c4bfc4352984 100644
--- a/packages/mui-lab/src/DateRangePicker/DateRangePicker.ts
+++ b/packages/mui-lab/src/DateRangePicker/DateRangePicker.ts
@@ -23,7 +23,7 @@ const warn = () => {
 
 type DateRangePickerComponent = (<TDate>(
   props: DateRangePickerProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The DateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/DateRangePickerDay/DateRangePickerDay.ts b/packages/mui-lab/src/DateRangePickerDay/DateRangePickerDay.ts
index 2b2c3db7ed6912..f7a27e2bbb22f7 100644
--- a/packages/mui-lab/src/DateRangePickerDay/DateRangePickerDay.ts
+++ b/packages/mui-lab/src/DateRangePickerDay/DateRangePickerDay.ts
@@ -22,7 +22,7 @@ const warn = () => {
 
 type DateRangePickerDayComponent = (<TDate>(
   props: DateRangePickerDayProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The DateRangePickerDay component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx b/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx
index c65c2db4a7d155..aefd8cde158008 100644
--- a/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx
+++ b/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type DateTimePickerComponent = (<TDate>(
   props: DateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The DateTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx
index 23bfe7b4a463b8..0d48b7a1847e35 100644
--- a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx
+++ b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type DesktopDatePickerComponent = (<TDate>(
   props: DesktopDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The DesktopDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.ts b/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.ts
index bc5697f3f97cdd..b9343203786669 100644
--- a/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.ts
+++ b/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.ts
@@ -23,7 +23,7 @@ const warn = () => {
 
 type DesktopDateRangePickerComponent = (<TDate>(
   props: DesktopDateRangePickerProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The DesktopDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
index fc3f559a4a3ff2..c7cc3a097b1a7d 100644
--- a/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
+++ b/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type DesktopDateTimePickerComponent = (<TDate>(
   props: DesktopDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The DesktopDateTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx
index f09c774b9bf6e7..cb9be262d70210 100644
--- a/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx
+++ b/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type DesktopTimePickerComponent = (<TDate>(
   props: DesktopTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The DesktopTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js b/packages/mui-lab/src/LoadingButton/LoadingButton.test.js
index fc959d6bea21e3..837ef793bcebcc 100644
--- a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js
+++ b/packages/mui-lab/src/LoadingButton/LoadingButton.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, screen, within } from '@mui-internal/test-utils';
+import { createRenderer, screen, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import Button, { buttonClasses } from '@mui/material/Button';
 import LoadingButton, { loadingButtonClasses as classes } from '@mui/lab/LoadingButton';
diff --git a/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx b/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx
index 2e3ead720c4300..8b662afd80a00f 100644
--- a/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx
+++ b/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx
@@ -22,7 +22,7 @@ const warn = () => {
 
 type LocalizationProviderComponent = ((
   props: LocalizationProviderProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The LocalizationProvider component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/Masonry/Masonry.test.js b/packages/mui-lab/src/Masonry/Masonry.test.js
index ae1627d641f3a9..c5e56f2a0ac5b0 100644
--- a/packages/mui-lab/src/Masonry/Masonry.test.js
+++ b/packages/mui-lab/src/Masonry/Masonry.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createTheme } from '@mui/material/styles';
 import defaultTheme from '@mui/material/styles/defaultTheme';
diff --git a/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx b/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx
index f0b0f9defa6395..d2fb825a73f84e 100644
--- a/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx
+++ b/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type MobileDatePickerComponent = (<TDate>(
   props: MobileDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.ts b/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.ts
index a5a9768e1e57aa..d8609f6a180f4e 100644
--- a/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.ts
+++ b/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.ts
@@ -23,7 +23,7 @@ const warn = () => {
 
 type MobileDateRangePickerComponent = (<TDate>(
   props: MobileDateRangePickerProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The MobileDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
index 6a24b35b216f53..992337cf359ec3 100644
--- a/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
+++ b/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type MobileDateTimePickerComponent = (<TDate>(
   props: MobileDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The MobileDateTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx b/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx
index aef9f13eb0f734..b59f3e8066f2fc 100644
--- a/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx
+++ b/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type MobileTimePickerComponent = (<TDate>(
   props: MobileTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The MobileTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/MonthPicker/MonthPicker.tsx b/packages/mui-lab/src/MonthPicker/MonthPicker.tsx
index baa3643955e109..bfd784b256e06b 100644
--- a/packages/mui-lab/src/MonthPicker/MonthPicker.tsx
+++ b/packages/mui-lab/src/MonthPicker/MonthPicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type MonthPickerComponent = (<TDate>(
   props: MonthPickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The MonthPicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/PickersDay/PickersDay.tsx b/packages/mui-lab/src/PickersDay/PickersDay.tsx
index dbd13583b7e868..d4ec6e02fe99e1 100644
--- a/packages/mui-lab/src/PickersDay/PickersDay.tsx
+++ b/packages/mui-lab/src/PickersDay/PickersDay.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type PickersDayComponent = (<TDate>(
   props: PickersDayProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The PickersDay component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx b/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx
index 07aedfa8e1c201..e25bd78b8df689 100644
--- a/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx
+++ b/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type StaticDatePickerComponent = (<TDate>(
   props: StaticDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The StaticDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.ts b/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.ts
index ab9e86fe8bcfa0..51954ef4cabaa1 100644
--- a/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.ts
+++ b/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.ts
@@ -23,7 +23,7 @@ const warn = () => {
 
 type StaticDateRangePickerComponent = (<TDate>(
   props: StaticDateRangePickerProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The StaticDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
index e2adcb889202ea..cee2ec9b345afc 100644
--- a/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
+++ b/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type StaticDateTimePickerComponent = (<TDate>(
   props: StaticDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The StaticDateTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx b/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx
index 743b8168c0d2b2..d09364b5804bd3 100644
--- a/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx
+++ b/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type StaticTimePickerComponent = (<TDate>(
   props: StaticTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The StaticTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/TabContext/TabContext.d.ts b/packages/mui-lab/src/TabContext/TabContext.d.ts
index b3db92467f8936..38274ad8257053 100644
--- a/packages/mui-lab/src/TabContext/TabContext.d.ts
+++ b/packages/mui-lab/src/TabContext/TabContext.d.ts
@@ -25,7 +25,7 @@ export interface TabContextProps {
  *
  * - [TabContext API](https://mui.com/material-ui/api/tab-context/)
  */
-export default function TabContext(props: TabContextProps): JSX.Element;
+export default function TabContext(props: TabContextProps): React.JSX.Element;
 export function useTabContext(): TabContextValue | null;
 export function getPanelId(context: TabContextValue, tabValue: string): string;
 export function getTabId(context: TabContextValue, tabValue: string): string;
diff --git a/packages/mui-lab/src/TabContext/TabContext.test.js b/packages/mui-lab/src/TabContext/TabContext.test.js
index 657bae9e853620..e2871b415bc24f 100644
--- a/packages/mui-lab/src/TabContext/TabContext.test.js
+++ b/packages/mui-lab/src/TabContext/TabContext.test.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TabContext, { getPanelId, getTabId, useTabContext } from './TabContext';
 
 describe('<TabContext />', () => {
diff --git a/packages/mui-lab/src/TabList/TabList.test.js b/packages/mui-lab/src/TabList/TabList.test.js
index 2f34f2b0994517..20f560859732d9 100644
--- a/packages/mui-lab/src/TabList/TabList.test.js
+++ b/packages/mui-lab/src/TabList/TabList.test.js
@@ -1,7 +1,7 @@
 // @ts-check
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses as classes } from '@mui/material/Tabs';
 import TabList from './TabList';
diff --git a/packages/mui-lab/src/TabPanel/TabPanel.d.ts b/packages/mui-lab/src/TabPanel/TabPanel.d.ts
index 378190b80f60e7..47905950704896 100644
--- a/packages/mui-lab/src/TabPanel/TabPanel.d.ts
+++ b/packages/mui-lab/src/TabPanel/TabPanel.d.ts
@@ -39,4 +39,4 @@ export interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDi
  *
  * - [TabPanel API](https://mui.com/material-ui/api/tab-panel/)
  */
-export default function TabPanel(props: TabPanelProps): JSX.Element;
+export default function TabPanel(props: TabPanelProps): React.JSX.Element;
diff --git a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx
index bf6ec9394c9737..0f4403330e21e7 100644
--- a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx
+++ b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TabPanel, { tabPanelClasses as classes } from '@mui/lab/TabPanel';
 import TabContext from '../TabContext';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-lab/src/TimePicker/TimePicker.tsx b/packages/mui-lab/src/TimePicker/TimePicker.tsx
index 8fcc8a2e79163c..0b2d22d2daab01 100644
--- a/packages/mui-lab/src/TimePicker/TimePicker.tsx
+++ b/packages/mui-lab/src/TimePicker/TimePicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type TimePickerComponent = (<TDate>(
   props: TimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The StaticTimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/src/Timeline/Timeline.test.tsx b/packages/mui-lab/src/Timeline/Timeline.test.tsx
index 08df8eac324dff..4ae9aa703e81db 100644
--- a/packages/mui-lab/src/Timeline/Timeline.test.tsx
+++ b/packages/mui-lab/src/Timeline/Timeline.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import Timeline, { timelineClasses as classes } from '@mui/lab/Timeline';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-lab/src/TimelineConnector/TimelineConnector.d.ts b/packages/mui-lab/src/TimelineConnector/TimelineConnector.d.ts
index df54d02189e8cb..168b023cece9c2 100644
--- a/packages/mui-lab/src/TimelineConnector/TimelineConnector.d.ts
+++ b/packages/mui-lab/src/TimelineConnector/TimelineConnector.d.ts
@@ -30,4 +30,4 @@ export interface TimelineConnectorProps
  *
  * - [TimelineConnector API](https://mui.com/material-ui/api/timeline-connector/)
  */
-export default function TimelineConnector(props: TimelineConnectorProps): JSX.Element;
+export default function TimelineConnector(props: TimelineConnectorProps): React.JSX.Element;
diff --git a/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js b/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js
index 29b157a7b929ce..3a5c31fa6fa04b 100644
--- a/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js
+++ b/packages/mui-lab/src/TimelineConnector/TimelineConnector.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TimelineConnector, { timelineConnectorClasses as classes } from '@mui/lab/TimelineConnector';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-lab/src/TimelineContent/TimelineContent.d.ts b/packages/mui-lab/src/TimelineContent/TimelineContent.d.ts
index a7991cd1aba397..6bfe5fe24e9ffd 100644
--- a/packages/mui-lab/src/TimelineContent/TimelineContent.d.ts
+++ b/packages/mui-lab/src/TimelineContent/TimelineContent.d.ts
@@ -30,4 +30,4 @@ export interface TimelineContentProps extends StandardProps<TypographyProps> {
  * - [TimelineContent API](https://mui.com/material-ui/api/timeline-content/)
  * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
  */
-export default function TimelineContent(props: TimelineContentProps): JSX.Element;
+export default function TimelineContent(props: TimelineContentProps): React.JSX.Element;
diff --git a/packages/mui-lab/src/TimelineContent/TimelineContent.test.js b/packages/mui-lab/src/TimelineContent/TimelineContent.test.js
index 1c8a31f0a6e3e9..11fb2446f632e0 100644
--- a/packages/mui-lab/src/TimelineContent/TimelineContent.test.js
+++ b/packages/mui-lab/src/TimelineContent/TimelineContent.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography from '@mui/material/Typography';
 import Timeline from '@mui/lab/Timeline';
 import TimelineItem from '@mui/lab/TimelineItem';
diff --git a/packages/mui-lab/src/TimelineDot/TimelineDot.d.ts b/packages/mui-lab/src/TimelineDot/TimelineDot.d.ts
index 2109ee9592186c..1d04d9caacd8f4 100644
--- a/packages/mui-lab/src/TimelineDot/TimelineDot.d.ts
+++ b/packages/mui-lab/src/TimelineDot/TimelineDot.d.ts
@@ -47,4 +47,4 @@ export interface TimelineDotProps extends StandardProps<React.HTMLAttributes<HTM
  *
  * - [TimelineDot API](https://mui.com/material-ui/api/timeline-dot/)
  */
-export default function TimelineDot(props: TimelineDotProps): JSX.Element;
+export default function TimelineDot(props: TimelineDotProps): React.JSX.Element;
diff --git a/packages/mui-lab/src/TimelineDot/TimelineDot.test.js b/packages/mui-lab/src/TimelineDot/TimelineDot.test.js
index 24f5460d3d550a..ab05f57e305308 100644
--- a/packages/mui-lab/src/TimelineDot/TimelineDot.test.js
+++ b/packages/mui-lab/src/TimelineDot/TimelineDot.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TimelineDot, { timelineDotClasses as classes } from '@mui/lab/TimelineDot';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-lab/src/TimelineItem/TimelineItem.d.ts b/packages/mui-lab/src/TimelineItem/TimelineItem.d.ts
index e168cf1be724f7..8d2b0847e11eb2 100644
--- a/packages/mui-lab/src/TimelineItem/TimelineItem.d.ts
+++ b/packages/mui-lab/src/TimelineItem/TimelineItem.d.ts
@@ -33,4 +33,4 @@ export interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HT
  *
  * - [TimelineItem API](https://mui.com/material-ui/api/timeline-item/)
  */
-export default function TimelineItem(props: TimelineItemProps): JSX.Element;
+export default function TimelineItem(props: TimelineItemProps): React.JSX.Element;
diff --git a/packages/mui-lab/src/TimelineItem/TimelineItem.test.js b/packages/mui-lab/src/TimelineItem/TimelineItem.test.js
index 72339942424918..e20950d6ae04af 100644
--- a/packages/mui-lab/src/TimelineItem/TimelineItem.test.js
+++ b/packages/mui-lab/src/TimelineItem/TimelineItem.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TimelineItem, { timelineItemClasses as classes } from '@mui/lab/TimelineItem';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts
index 4b811f4a2de721..ea287b8677accf 100644
--- a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts
+++ b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts
@@ -30,7 +30,9 @@ export interface TimelineOppositeContentProps extends StandardProps<TypographyPr
  * - [TimelineOppositeContent API](https://mui.com/material-ui/api/timeline-opposite-content/)
  * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
  */
-declare const TimelineOppositeContent: ((props: TimelineOppositeContentProps) => JSX.Element) & {
+declare const TimelineOppositeContent: ((
+  props: TimelineOppositeContentProps,
+) => React.JSX.Element) & {
   muiName: string;
 };
 
diff --git a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js
index 5b4470b34f40b8..80df63588a5962 100644
--- a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js
+++ b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography from '@mui/material/Typography';
 import Timeline from '@mui/lab/Timeline';
 import TimelineItem from '@mui/lab/TimelineItem';
diff --git a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.d.ts b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.d.ts
index 4f851adbfa3f7e..3f5b950647e812 100644
--- a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.d.ts
+++ b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.d.ts
@@ -30,4 +30,4 @@ export interface TimelineSeparatorProps
  *
  * - [TimelineSeparator API](https://mui.com/material-ui/api/timeline-separator/)
  */
-export default function TimelineSeparator(props: TimelineSeparatorProps): JSX.Element;
+export default function TimelineSeparator(props: TimelineSeparatorProps): React.JSX.Element;
diff --git a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js
index 484bdb4db0fc6b..9015797c81645e 100644
--- a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js
+++ b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TimelineSeparator, { timelineSeparatorClasses as classes } from '@mui/lab/TimelineSeparator';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-lab/src/TreeItem/TreeItem.tsx b/packages/mui-lab/src/TreeItem/TreeItem.tsx
index 5920ce65567cae..6a202115c04d23 100644
--- a/packages/mui-lab/src/TreeItem/TreeItem.tsx
+++ b/packages/mui-lab/src/TreeItem/TreeItem.tsx
@@ -22,7 +22,7 @@ const warn = () => {
 
 type TreeItemComponent = ((
   props: TreeItemProps & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The TreeItem component was moved from `@mui/lab` to `@mui/x-tree-view`. More information about this migration on our blog: https://mui.com/blog/lab-tree-view-to-mui-x/.
diff --git a/packages/mui-lab/src/TreeView/TreeView.tsx b/packages/mui-lab/src/TreeView/TreeView.tsx
index a9baef3618f4ba..cc7b3000f58154 100644
--- a/packages/mui-lab/src/TreeView/TreeView.tsx
+++ b/packages/mui-lab/src/TreeView/TreeView.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type TreeViewComponent<Multiple extends boolean | undefined = undefined> = ((
   props: TreeViewProps<Multiple> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The TreeView component was moved from `@mui/lab` to `@mui/x-tree-view`. More information about this migration on our blog: https://mui.com/blog/lab-tree-view-to-mui-x/.
diff --git a/packages/mui-lab/src/YearPicker/YearPicker.tsx b/packages/mui-lab/src/YearPicker/YearPicker.tsx
index b83ba6b10812dd..9f67498da59c8d 100644
--- a/packages/mui-lab/src/YearPicker/YearPicker.tsx
+++ b/packages/mui-lab/src/YearPicker/YearPicker.tsx
@@ -23,7 +23,7 @@ const warn = () => {
 
 type YearPickerComponent = (<TDate>(
   props: YearPickerProps<TDate> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element) & { propTypes?: any };
+) => React.JSX.Element) & { propTypes?: any };
 
 /**
  * @deprecated The YearPicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
diff --git a/packages/mui-lab/test/describeConformance.ts b/packages/mui-lab/test/describeConformance.ts
index 633cf72e03ebbe..62213f84d1e951 100644
--- a/packages/mui-lab/test/describeConformance.ts
+++ b/packages/mui-lab/test/describeConformance.ts
@@ -1,11 +1,11 @@
 import {
   describeConformance as baseDescribeConformance,
   ConformanceOptions,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 export default function describeConformance(
-  minimalElement: React.ReactElement,
+  minimalElement: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   function getOptionsWithDefaults() {
diff --git a/packages/mui-lab/test/integration/Tabs.test.js b/packages/mui-lab/test/integration/Tabs.test.js
index 4106b9f10a8e22..9cc945eb0e60c3 100644
--- a/packages/mui-lab/test/integration/Tabs.test.js
+++ b/packages/mui-lab/test/integration/Tabs.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Tab from '@mui/material/Tab';
 import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index e4d07fc672a085..36263785a85244 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -36,7 +36,7 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5"
+    "@babel/runtime": "^7.24.6"
   },
   "devDependencies": {
     "@emotion/cache": "^11.11.0",
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx
index c8c385ea74ab10..2bc922d62dd059 100644
--- a/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13Document.tsx
@@ -9,7 +9,7 @@ import createEmotionCache from './createCache';
 interface Plugin {
   enhanceApp: (
     App: React.ComponentType<React.ComponentProps<AppType>>,
-  ) => (props: any) => JSX.Element;
+  ) => (props: any) => React.JSX.Element;
   resolveProps: (initialProps: DocumentInitialProps) => Promise<DocumentInitialProps>;
 }
 
@@ -37,7 +37,7 @@ export function createGetInitialProps(plugins: Plugin[]) {
 }
 
 export interface DocumentHeadTagsProps {
-  emotionStyleTags: React.ReactElement[];
+  emotionStyleTags: React.ReactElement<any>[];
 }
 
 export function DocumentHeadTags(props: DocumentHeadTagsProps) {
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index c61087e346084e..da4f3b15007726 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.8",
+  "version": "6.0.0-alpha.9",
   "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.",
@@ -40,7 +40,7 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/base": "workspace:*",
     "@mui/core-downloads-tracker": "workspace:^",
     "@mui/system": "workspace:^",
@@ -54,26 +54,26 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/internal-babel-macros": "workspace:^",
     "@popperjs/core": "^2.11.8",
-    "@testing-library/dom": "^9.3.4",
+    "@testing-library/dom": "^10.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.16",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "css-mediaquery": "^0.1.2",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "lodash": "^4.17.21",
-    "playwright": "^1.44.0",
+    "playwright": "^1.44.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
diff --git a/packages/mui-material/src/Accordion/Accordion.test.js b/packages/mui-material/src/Accordion/Accordion.test.js
index fe06f0c0f07dd4..c1d8f3889c73d8 100644
--- a/packages/mui-material/src/Accordion/Accordion.test.js
+++ b/packages/mui-material/src/Accordion/Accordion.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Accordion, { accordionClasses as classes } from '@mui/material/Accordion';
 import Paper from '@mui/material/Paper';
 import AccordionSummary from '@mui/material/AccordionSummary';
diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.d.ts b/packages/mui-material/src/AccordionActions/AccordionActions.d.ts
index 2e8b781355f70a..39c13ee770255f 100644
--- a/packages/mui-material/src/AccordionActions/AccordionActions.d.ts
+++ b/packages/mui-material/src/AccordionActions/AccordionActions.d.ts
@@ -33,4 +33,4 @@ export interface AccordionActionsProps extends StandardProps<React.HTMLAttribute
  *
  * - [AccordionActions API](https://mui.com/material-ui/api/accordion-actions/)
  */
-export default function AccordionActions(props: AccordionActionsProps): JSX.Element;
+export default function AccordionActions(props: AccordionActionsProps): React.JSX.Element;
diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.test.js b/packages/mui-material/src/AccordionActions/AccordionActions.test.js
index 7f70db48417548..0ce0b4e300a52b 100644
--- a/packages/mui-material/src/AccordionActions/AccordionActions.test.js
+++ b/packages/mui-material/src/AccordionActions/AccordionActions.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import AccordionActions, {
   accordionActionsClasses as classes,
 } from '@mui/material/AccordionActions';
diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts b/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts
index 17a0992587fcf1..b03bca28434607 100644
--- a/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts
+++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts
@@ -28,4 +28,4 @@ export interface AccordionDetailsProps extends StandardProps<React.HTMLAttribute
  *
  * - [AccordionDetails API](https://mui.com/material-ui/api/accordion-details/)
  */
-export default function AccordionDetails(props: AccordionDetailsProps): JSX.Element;
+export default function AccordionDetails(props: AccordionDetailsProps): React.JSX.Element;
diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js b/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js
index 209d1a0a84e93c..835468a22bea74 100644
--- a/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js
+++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import AccordionDetails, {
   accordionDetailsClasses as classes,
 } from '@mui/material/AccordionDetails';
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
index 8cab6b766b5aa1..ae4d845e9ad07d 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import AccordionSummary, {
   accordionSummaryClasses as classes,
 } from '@mui/material/AccordionSummary';
diff --git a/packages/mui-material/src/Alert/Alert.d.ts b/packages/mui-material/src/Alert/Alert.d.ts
index 6d3fdefb36501c..575cb610e3eb9e 100644
--- a/packages/mui-material/src/Alert/Alert.d.ts
+++ b/packages/mui-material/src/Alert/Alert.d.ts
@@ -133,4 +133,4 @@ export interface AlertOwnerState extends AlertProps {}
  * - [Alert API](https://mui.com/material-ui/api/alert/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function Alert(props: AlertProps): JSX.Element;
+export default function Alert(props: AlertProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Alert/Alert.test.js b/packages/mui-material/src/Alert/Alert.test.js
index e0fefe68874db0..e5d4ff4b54f2e7 100644
--- a/packages/mui-material/src/Alert/Alert.test.js
+++ b/packages/mui-material/src/Alert/Alert.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Alert, { alertClasses as classes } from '@mui/material/Alert';
 import Paper, { paperClasses } from '@mui/material/Paper';
diff --git a/packages/mui-material/src/AlertTitle/AlertTitle.d.ts b/packages/mui-material/src/AlertTitle/AlertTitle.d.ts
index 7af306b943d4d6..f85b125962f08c 100644
--- a/packages/mui-material/src/AlertTitle/AlertTitle.d.ts
+++ b/packages/mui-material/src/AlertTitle/AlertTitle.d.ts
@@ -29,4 +29,4 @@ export interface AlertTitleProps extends TypographyProps<'div'> {
  * - [AlertTitle API](https://mui.com/material-ui/api/alert-title/)
  * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
  */
-export default function AlertTitle(props: AlertTitleProps): JSX.Element;
+export default function AlertTitle(props: AlertTitleProps): React.JSX.Element;
diff --git a/packages/mui-material/src/AlertTitle/AlertTitle.test.js b/packages/mui-material/src/AlertTitle/AlertTitle.test.js
index 96ec86a03a3c98..56a7ed754253d4 100644
--- a/packages/mui-material/src/AlertTitle/AlertTitle.test.js
+++ b/packages/mui-material/src/AlertTitle/AlertTitle.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import AlertTitle, { alertTitleClasses as classes } from '@mui/material/AlertTitle';
 import Typography from '@mui/material/Typography';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/AppBar/AppBar.test.js b/packages/mui-material/src/AppBar/AppBar.test.js
index 2f21d3626e6ae8..9084206c03eca8 100644
--- a/packages/mui-material/src/AppBar/AppBar.test.js
+++ b/packages/mui-material/src/AppBar/AppBar.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import AppBar, { appBarClasses as classes } from '@mui/material/AppBar';
 import Paper from '@mui/material/Paper';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
index cfc564954e847c..3119083dab2ef3 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
@@ -372,4 +372,4 @@ export default function Autocomplete<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 >(
   props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-): JSX.Element;
+): React.JSX.Element;
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 4a54e94916d388..cc2550cb230cbd 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -7,7 +7,7 @@ import {
   fireEvent,
   screen,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
 import Box from '@mui/system/Box';
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
index dcc82a4d146c91..30c2f794d52534 100644
--- a/packages/mui-material/src/Avatar/Avatar.js
+++ b/packages/mui-material/src/Avatar/Avatar.js
@@ -172,6 +172,8 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
     component,
     variant,
   };
+  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
+  delete ownerState.ownerState;
 
   const classes = useUtilityClasses(ownerState);
 
@@ -201,10 +203,10 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
   return (
     <AvatarRoot
       as={component}
-      ownerState={ownerState}
       className={clsx(classes.root, className)}
       ref={ref}
       {...other}
+      ownerState={ownerState}
     >
       {children}
     </AvatarRoot>
diff --git a/packages/mui-material/src/Avatar/Avatar.test.js b/packages/mui-material/src/Avatar/Avatar.test.js
index 558b3646948b0c..5f3fb5796106ee 100644
--- a/packages/mui-material/src/Avatar/Avatar.test.js
+++ b/packages/mui-material/src/Avatar/Avatar.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
 import Avatar, { avatarClasses as classes } from '@mui/material/Avatar';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts
index ed052bbf48d468..8ba6e494f8e5bb 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts
@@ -1,14 +1,40 @@
 import * as React from 'react';
-import { OverridableStringUnion } from '@mui/types';
+import {
+  OverridableComponent,
+  OverridableStringUnion,
+  OverrideProps,
+  PartiallyRequired,
+} from '@mui/types';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
+import { Theme } from '@mui/material';
 import { AvatarGroupClasses } from './avatarGroupClasses';
 import Avatar from '../Avatar';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface AvatarGroupPropsVariantOverrides {}
 
 export interface AvatarGroupComponentsPropsOverrides {}
-export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+
+export interface AvatarGroupSlots {
+  surplus?: React.ElementType;
+}
+
+export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AvatarGroupSlots,
+  {
+    /**
+     * @deprecated use `slotProps.surplus` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+     *  */
+    additionalAvatar: React.ComponentPropsWithRef<typeof Avatar> &
+      AvatarGroupComponentsPropsOverrides;
+    surplus: SlotProps<
+      React.ElementType<React.ComponentPropsWithRef<typeof Avatar>>,
+      AvatarGroupComponentsPropsOverrides,
+      AvatarGroupOwnerState
+    >;
+  }
+>;
+export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
   /**
    * The avatars to stack.
    */
@@ -27,9 +53,8 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * You can override the existing props or add new ones.
    *
    * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
    *
-   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps?: {
     additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
@@ -46,18 +71,6 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * @returns {React.ReactNode} custom element to display
    */
   renderSurplus?: (surplus: number) => React.ReactNode;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
-   * @default {}
-   */
-  slotProps?: {
-    additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
-      AvatarGroupComponentsPropsOverrides;
-  };
   /**
    * Spacing between avatars.
    * @default 'medium'
@@ -82,6 +95,14 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
   >;
 }
 
+export interface AvatarGroupTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & AvatarGroupOwnProps;
+  defaultComponent: RootComponent;
+}
+
 /**
  *
  * Demos:
@@ -92,4 +113,16 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
  *
  * - [AvatarGroup API](https://mui.com/material-ui/api/avatar-group/)
  */
-export default function AvatarGroup(props: AvatarGroupProps): JSX.Element;
+declare const AvatarGroup: OverridableComponent<AvatarGroupTypeMap>;
+
+export type AvatarGroupProps<
+  RootComponent extends React.ElementType = AvatarGroupTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AvatarGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export interface AvatarGroupOwnerState
+  extends PartiallyRequired<AvatarGroupProps, 'max' | 'spacing' | 'component' | 'variant'> {}
+
+export default AvatarGroup;
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
index 1f6221e06a02ab..ba3f229dde4b0f 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -8,6 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { styled, createUseThemeProps } from '../zero-styled';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
+import useSlot from '../utils/useSlot';
 
 const SPACINGS = {
   small: -16,
@@ -57,10 +58,11 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
     children: childrenProp,
     className,
     component = 'div',
-    componentsProps = {},
+    componentsProps,
     max = 5,
     renderSurplus,
     slotProps = {},
+    slots = {},
     spacing = 'medium',
     total,
     variant = 'circular',
@@ -105,13 +107,34 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
 
-  const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
-
   const marginValue =
     ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined
       ? SPACINGS[ownerState.spacing]
       : -ownerState.spacing || -8;
 
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
+      ...componentsProps,
+      ...slotProps,
+    },
+  };
+
+  const [SurplusSlot, surplusProps] = useSlot('surplus', {
+    elementType: Avatar,
+    externalForwardedProps,
+    className: classes.avatar,
+    ownerState,
+    additionalProps: {
+      variant,
+      style: {
+        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
+        ...other.style,
+      },
+    },
+  });
+
   return (
     <AvatarGroupRoot
       as={component}
@@ -120,19 +143,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
       ref={ref}
       {...other}
     >
-      {extraAvatars ? (
-        <Avatar
-          variant={variant}
-          {...additionalAvatarSlotProps}
-          className={clsx(classes.avatar, additionalAvatarSlotProps?.className)}
-          style={{
-            '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
-            ...other.style,
-          }}
-        >
-          {extraAvatarsElement}
-        </Avatar>
-      ) : null}
+      {extraAvatars ? <SurplusSlot {...surplusProps}>{extraAvatarsElement}</SurplusSlot> : null}
       {children
         .slice(0, maxAvatars)
         .reverse()
@@ -173,9 +184,8 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
    * You can override the existing props or add new ones.
    *
    * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
    *
-   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: PropTypes.shape({
     additionalAvatar: PropTypes.object,
@@ -203,15 +213,19 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
    */
   renderSurplus: PropTypes.func,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
     additionalAvatar: PropTypes.object,
+    surplus: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    surplus: PropTypes.elementType,
   }),
   /**
    * Spacing between avatars.
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
index b646ad3fcf0f82..e4110d01c28849 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Avatar from '@mui/material/Avatar';
 import AvatarGroup, { avatarGroupClasses as classes } from '@mui/material/AvatarGroup';
 import describeConformance from '../../test/describeConformance';
@@ -21,15 +21,28 @@ describe('<AvatarGroup />', () => {
       muiName: 'MuiAvatarGroup',
       refInstanceof: window.HTMLDivElement,
       testVariantProps: { max: 10, spacing: 'small', variant: 'square' },
-      testLegacyComponentsProp: true,
+      slots: {
+        surplus: { expectedClassName: classes.avatar },
+      },
+      skip: ['componentsProp'],
+    }),
+  );
+
+  // test additionalAvatar slot separately
+  describeConformance(
+    <AvatarGroup max={2}>
+      <Avatar src="/fake.png" />
+      <Avatar src="/fake.png" />
+      <Avatar src="/fake.png" />
+    </AvatarGroup>,
+    () => ({
+      classes,
+      render,
+      muiName: 'MuiAvatarGroup',
       slots: {
         additionalAvatar: { expectedClassName: classes.avatar },
       },
-      skip: [
-        'componentsProp',
-        'slotsProp',
-        'slotPropsCallback', // not supported yet
-      ],
+      only: ['slotPropsProp'],
     }),
   );
 
diff --git a/packages/mui-material/src/Backdrop/Backdrop.test.js b/packages/mui-material/src/Backdrop/Backdrop.test.js
index a5bb505cb0f071..2445bf18438dec 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.test.js
+++ b/packages/mui-material/src/Backdrop/Backdrop.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Backdrop, { backdropClasses as classes } from '@mui/material/Backdrop';
 import Fade from '@mui/material/Fade';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/Badge/Badge.test.js b/packages/mui-material/src/Badge/Badge.test.js
index 0a40111d95d5f9..2b60f5182c056d 100644
--- a/packages/mui-material/src/Badge/Badge.test.js
+++ b/packages/mui-material/src/Badge/Badge.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Badge, { badgeClasses as classes } from '@mui/material/Badge';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.test.js b/packages/mui-material/src/BottomNavigation/BottomNavigation.test.js
index 3fccecb91d6089..5fa07409efb5bb 100755
--- a/packages/mui-material/src/BottomNavigation/BottomNavigation.test.js
+++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import BottomNavigation, {
   bottomNavigationClasses as classes,
 } from '@mui/material/BottomNavigation';
diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.test.js b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.test.js
index 634e12a4e2078c..f95fd4ebe0557a 100644
--- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.test.js
+++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, within } from '@mui-internal/test-utils';
+import { createRenderer, within } from '@mui/internal-test-utils';
 import BottomNavigationAction, {
   bottomNavigationActionClasses as classes,
 } from '@mui/material/BottomNavigationAction';
diff --git a/packages/mui-material/src/Box/Box.test.js b/packages/mui-material/src/Box/Box.test.js
index 0905f1bb6ebffd..b030336bcb05a3 100644
--- a/packages/mui-material/src/Box/Box.test.js
+++ b/packages/mui-material/src/Box/Box.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable material-ui/no-empty-box */
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
diff --git a/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.test.js b/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.test.js
index a5d1542fe008b2..49430452d1dee8 100644
--- a/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.test.js
+++ b/packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { fireEvent, createRenderer } from '@mui-internal/test-utils';
+import { fireEvent, createRenderer } from '@mui/internal-test-utils';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
 
 describe('<BreadcrumbCollapsed />', () => {
diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js
index 574323d99f4de0..3308455a9c7e24 100644
--- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js
+++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.test.js
@@ -5,7 +5,7 @@ import {
   createRenderer,
   screen,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import Breadcrumbs, { breadcrumbsClasses as classes } from '@mui/material/Breadcrumbs';
 import Typography from '@mui/material/Typography';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts
index 63b078984b6330..c1e3e95f747014 100644
--- a/packages/mui-material/src/Button/Button.d.ts
+++ b/packages/mui-material/src/Button/Button.d.ts
@@ -104,7 +104,7 @@ export interface ExtendButtonTypeMap<TypeMap extends OverridableTypeMap> {
 
 export type ExtendButton<TypeMap extends OverridableTypeMap> = ((
   props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<TypeMap>, 'a'>,
-) => JSX.Element) &
+) => React.JSX.Element) &
   OverridableComponent<ExtendButtonBaseTypeMap<TypeMap>>;
 
 /**
diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js
index 411e988ac8dc19..0b887e085482df 100644
--- a/packages/mui-material/src/Button/Button.test.js
+++ b/packages/mui-material/src/Button/Button.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { ClassNames } from '@emotion/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button, { buttonClasses as classes } from '@mui/material/Button';
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
index af1edc9aa88849..53a65f79fc1920 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts
@@ -105,7 +105,7 @@ export interface ExtendButtonBaseTypeMap<TypeMap extends OverridableTypeMap> {
 
 export type ExtendButtonBase<TypeMap extends OverridableTypeMap> = ((
   props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<TypeMap>, 'a'>,
-) => JSX.Element) &
+) => React.JSX.Element) &
   OverridableComponent<ExtendButtonBaseTypeMap<TypeMap>>;
 
 /**
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.test.js b/packages/mui-material/src/ButtonBase/ButtonBase.test.js
index 35ddbff211a3d5..3a7e62cf3286f1 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.test.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.test.js
@@ -10,7 +10,7 @@ import {
   focusVisible,
   simulatePointerDevice,
   programmaticFocusTriggersFocusVisible,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import PropTypes from 'prop-types';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ButtonBase, { buttonBaseClasses as classes } from '@mui/material/ButtonBase';
diff --git a/packages/mui-material/src/ButtonBase/Ripple.test.js b/packages/mui-material/src/ButtonBase/Ripple.test.js
index 23e325362196b9..a0ff4d03b7166b 100644
--- a/packages/mui-material/src/ButtonBase/Ripple.test.js
+++ b/packages/mui-material/src/ButtonBase/Ripple.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Ripple from './Ripple';
 import classes from './touchRippleClasses';
 
diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.test.js b/packages/mui-material/src/ButtonBase/TouchRipple.test.js
index ace2ae03183d51..c2948f1b3dd481 100644
--- a/packages/mui-material/src/ButtonBase/TouchRipple.test.js
+++ b/packages/mui-material/src/ButtonBase/TouchRipple.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import TouchRipple, { DELAY_RIPPLE } from './TouchRipple';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js
index 65387b240d46ef..ec308440ad9385 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import ButtonGroup, { buttonGroupClasses as classes } from '@mui/material/ButtonGroup';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button, { buttonClasses } from '@mui/material/Button';
diff --git a/packages/mui-material/src/Card/Card.test.tsx b/packages/mui-material/src/Card/Card.test.tsx
index 63d2fb12550e0b..fbe6ebcfab228c 100644
--- a/packages/mui-material/src/Card/Card.test.tsx
+++ b/packages/mui-material/src/Card/Card.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Card, { cardClasses as classes } from '@mui/material/Card';
 import Paper from '@mui/material/Paper';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.test.js b/packages/mui-material/src/CardActionArea/CardActionArea.test.js
index 98ba28bb38fc45..e81597982270d5 100644
--- a/packages/mui-material/src/CardActionArea/CardActionArea.test.js
+++ b/packages/mui-material/src/CardActionArea/CardActionArea.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import CardActionArea, { cardActionAreaClasses as classes } from '@mui/material/CardActionArea';
 import ButtonBase from '@mui/material/ButtonBase';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/CardActions/CardActions.d.ts b/packages/mui-material/src/CardActions/CardActions.d.ts
index 3258f2ca248e6d..eb5494dc0e0229 100644
--- a/packages/mui-material/src/CardActions/CardActions.d.ts
+++ b/packages/mui-material/src/CardActions/CardActions.d.ts
@@ -33,4 +33,4 @@ export interface CardActionsProps extends StandardProps<React.HTMLAttributes<HTM
  *
  * - [CardActions API](https://mui.com/material-ui/api/card-actions/)
  */
-export default function CardActions(props: CardActionsProps): JSX.Element;
+export default function CardActions(props: CardActionsProps): React.JSX.Element;
diff --git a/packages/mui-material/src/CardActions/CardActions.test.js b/packages/mui-material/src/CardActions/CardActions.test.js
index d74acef7f0d3d4..fdf25621db96a1 100644
--- a/packages/mui-material/src/CardActions/CardActions.test.js
+++ b/packages/mui-material/src/CardActions/CardActions.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import CardActions, { cardActionsClasses as classes } from '@mui/material/CardActions';
 import Button from '@mui/material/Button';
 import { expect } from 'chai';
diff --git a/packages/mui-material/src/CardContent/CardContent.test.js b/packages/mui-material/src/CardContent/CardContent.test.js
index 81175c54cec088..5ca8f0eed2f0da 100644
--- a/packages/mui-material/src/CardContent/CardContent.test.js
+++ b/packages/mui-material/src/CardContent/CardContent.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import CardContent, { cardContentClasses as classes } from '@mui/material/CardContent';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/CardHeader/CardHeader.d.ts b/packages/mui-material/src/CardHeader/CardHeader.d.ts
index cfa1cfd5942f4a..4fce9fed0685d3 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.d.ts
+++ b/packages/mui-material/src/CardHeader/CardHeader.d.ts
@@ -98,7 +98,7 @@ export interface OverridableCardHeader extends OverridableComponent<CardHeaderTy
       TitleTypographyComponent,
       SubheaderTypographyComponent
     >,
-  ): JSX.Element;
+  ): React.JSX.Element;
 }
 
 export type CardHeaderProps<
diff --git a/packages/mui-material/src/CardHeader/CardHeader.test.js b/packages/mui-material/src/CardHeader/CardHeader.test.js
index c7dbb8f55d1290..2c40497429048f 100644
--- a/packages/mui-material/src/CardHeader/CardHeader.test.js
+++ b/packages/mui-material/src/CardHeader/CardHeader.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { typographyClasses } from '@mui/material/Typography';
 import CardHeader, { cardHeaderClasses as classes } from '@mui/material/CardHeader';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/CardMedia/CardMedia.test.js b/packages/mui-material/src/CardMedia/CardMedia.test.js
index 64ff9777ce0e69..9d97d2a7c4dcd2 100644
--- a/packages/mui-material/src/CardMedia/CardMedia.test.js
+++ b/packages/mui-material/src/CardMedia/CardMedia.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import CardMedia, { cardMediaClasses as classes } from '@mui/material/CardMedia';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Checkbox/Checkbox.d.ts b/packages/mui-material/src/Checkbox/Checkbox.d.ts
index 8d3b3529cde81e..9d9d6ffca56d24 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.d.ts
+++ b/packages/mui-material/src/Checkbox/Checkbox.d.ts
@@ -115,4 +115,4 @@ export interface CheckboxProps
  * - [Checkbox API](https://mui.com/material-ui/api/checkbox/)
  * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
-export default function Checkbox(props: CheckboxProps): JSX.Element;
+export default function Checkbox(props: CheckboxProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js
index cabc759e240997..17c12fc3878ae2 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.test.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import Checkbox, { checkboxClasses as classes } from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
 import ButtonBase from '@mui/material/ButtonBase';
diff --git a/packages/mui-material/src/Chip/Chip.d.ts b/packages/mui-material/src/Chip/Chip.d.ts
index 1b576bf9705a27..4db5e9ac779872 100644
--- a/packages/mui-material/src/Chip/Chip.d.ts
+++ b/packages/mui-material/src/Chip/Chip.d.ts
@@ -15,7 +15,7 @@ export interface ChipOwnProps {
   /**
    * The Avatar element to display.
    */
-  avatar?: React.ReactElement;
+  avatar?: React.ReactElement<any>;
   /**
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
@@ -47,7 +47,7 @@ export interface ChipOwnProps {
   /**
    * Override the default delete icon element. Shown only if `onDelete` is set.
    */
-  deleteIcon?: React.ReactElement;
+  deleteIcon?: React.ReactElement<any>;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -56,7 +56,7 @@ export interface ChipOwnProps {
   /**
    * Icon element.
    */
-  icon?: React.ReactElement;
+  icon?: React.ReactElement<any>;
   /**
    * The content of the component.
    */
diff --git a/packages/mui-material/src/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js
index 6af617103ddb7d..3f2f182ac9155e 100644
--- a/packages/mui-material/src/Chip/Chip.test.js
+++ b/packages/mui-material/src/Chip/Chip.test.js
@@ -8,15 +8,10 @@ import {
   focusVisible,
   simulatePointerDevice,
   programmaticFocusTriggersFocusVisible,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import Avatar from '@mui/material/Avatar';
 import Chip, { chipClasses as classes } from '@mui/material/Chip';
-import {
-  ThemeProvider,
-  createTheme,
-  hexToRgb,
-  experimental_extendTheme as extendTheme,
-} from '@mui/material/styles';
+import { ThemeProvider, createTheme, hexToRgb, extendTheme } from '@mui/material/styles';
 import CheckBox from '../internal/svg-icons/CheckBox';
 import defaultTheme from '../styles/defaultTheme';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts
index c0046a5b247e2b..31b99ab6a7273e 100644
--- a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts
+++ b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts
@@ -73,4 +73,4 @@ export interface CircularProgressProps
  *
  * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
  */
-export default function CircularProgress(props: CircularProgressProps): JSX.Element;
+export default function CircularProgress(props: CircularProgressProps): React.JSX.Element;
diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.test.js b/packages/mui-material/src/CircularProgress/CircularProgress.test.js
index fcf98b530112c6..7838a293d6abf5 100644
--- a/packages/mui-material/src/CircularProgress/CircularProgress.test.js
+++ b/packages/mui-material/src/CircularProgress/CircularProgress.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import CircularProgress, {
   circularProgressClasses as classes,
 } from '@mui/material/CircularProgress';
diff --git a/packages/mui-material/src/Collapse/Collapse.d.ts b/packages/mui-material/src/Collapse/Collapse.d.ts
index 2206f44019aefc..aa756bb779a3f7 100644
--- a/packages/mui-material/src/Collapse/Collapse.d.ts
+++ b/packages/mui-material/src/Collapse/Collapse.d.ts
@@ -69,4 +69,4 @@ export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 
-export default function Collapse(props: CollapseProps): JSX.Element;
+export default function Collapse(props: CollapseProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Collapse/Collapse.test.js b/packages/mui-material/src/Collapse/Collapse.test.js
index f5ff14984ff104..420db44a9ba7c1 100644
--- a/packages/mui-material/src/Collapse/Collapse.test.js
+++ b/packages/mui-material/src/Collapse/Collapse.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Collapse, { collapseClasses as classes } from '@mui/material/Collapse';
diff --git a/packages/mui-material/src/Container/Container.test.js b/packages/mui-material/src/Container/Container.test.js
index 3f37487e6a78b9..6874046a71597e 100644
--- a/packages/mui-material/src/Container/Container.test.js
+++ b/packages/mui-material/src/Container/Container.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Container, { containerClasses as classes } from '@mui/material/Container';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.d.ts b/packages/mui-material/src/CssBaseline/CssBaseline.d.ts
index 45af35281561a9..11cb225bd7ac03 100644
--- a/packages/mui-material/src/CssBaseline/CssBaseline.d.ts
+++ b/packages/mui-material/src/CssBaseline/CssBaseline.d.ts
@@ -26,4 +26,4 @@ export interface CssBaselineProps extends StyledComponentProps<never> {
  *
  * - [CssBaseline API](https://mui.com/material-ui/api/css-baseline/)
  */
-export default function CssBaseline(props: CssBaselineProps): JSX.Element;
+export default function CssBaseline(props: CssBaselineProps): React.JSX.Element;
diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.test.js b/packages/mui-material/src/CssBaseline/CssBaseline.test.js
index af2be310779777..867e3f48b91805 100644
--- a/packages/mui-material/src/CssBaseline/CssBaseline.test.js
+++ b/packages/mui-material/src/CssBaseline/CssBaseline.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, createTheme, hexToRgb } from '@mui/material/styles';
 
diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts
index 14fdf0f2bc5c9d..d3c52d4ce7ccb4 100644
--- a/packages/mui-material/src/Dialog/Dialog.d.ts
+++ b/packages/mui-material/src/Dialog/Dialog.d.ts
@@ -118,4 +118,4 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
  * - [Dialog API](https://mui.com/material-ui/api/dialog/)
  * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
  */
-export default function Dialog(props: DialogProps): JSX.Element;
+export default function Dialog(props: DialogProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index e17f7ac397d7de..f0ad7c61d2bdf9 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import Modal from '@mui/material/Modal';
 import Dialog, { dialogClasses as classes } from '@mui/material/Dialog';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -20,14 +20,14 @@ function userClick(element) {
 }
 
 /**
- * @param {typeof import('@mui-internal/test-utils').screen} view
+ * @param {typeof import('@mui/internal-test-utils').screen} view
  */
 function findBackdrop(view) {
   return view.getByRole('dialog').parentElement;
 }
 
 /**
- * @param {typeof import('@mui-internal/test-utils').screen} view
+ * @param {typeof import('@mui/internal-test-utils').screen} view
  */
 function clickBackdrop(view) {
   userClick(findBackdrop(view));
diff --git a/packages/mui-material/src/DialogActions/DialogActions.d.ts b/packages/mui-material/src/DialogActions/DialogActions.d.ts
index 5e6a13e309c1d0..3f1842f3461c08 100644
--- a/packages/mui-material/src/DialogActions/DialogActions.d.ts
+++ b/packages/mui-material/src/DialogActions/DialogActions.d.ts
@@ -33,4 +33,4 @@ export interface DialogActionsProps extends StandardProps<React.HTMLAttributes<H
  *
  * - [DialogActions API](https://mui.com/material-ui/api/dialog-actions/)
  */
-export default function DialogActions(props: DialogActionsProps): JSX.Element;
+export default function DialogActions(props: DialogActionsProps): React.JSX.Element;
diff --git a/packages/mui-material/src/DialogActions/DialogActions.test.js b/packages/mui-material/src/DialogActions/DialogActions.test.js
index 546aa57422a9ca..4c602365d6a006 100644
--- a/packages/mui-material/src/DialogActions/DialogActions.test.js
+++ b/packages/mui-material/src/DialogActions/DialogActions.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import DialogActions, { dialogActionsClasses as classes } from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { expect } from 'chai';
diff --git a/packages/mui-material/src/DialogContent/DialogContent.d.ts b/packages/mui-material/src/DialogContent/DialogContent.d.ts
index e0a17cb60e2ae2..b4b85853e400e7 100644
--- a/packages/mui-material/src/DialogContent/DialogContent.d.ts
+++ b/packages/mui-material/src/DialogContent/DialogContent.d.ts
@@ -33,4 +33,4 @@ export interface DialogContentProps extends StandardProps<React.HTMLAttributes<H
  *
  * - [DialogContent API](https://mui.com/material-ui/api/dialog-content/)
  */
-export default function DialogContent(props: DialogContentProps): JSX.Element;
+export default function DialogContent(props: DialogContentProps): React.JSX.Element;
diff --git a/packages/mui-material/src/DialogContent/DialogContent.test.js b/packages/mui-material/src/DialogContent/DialogContent.test.js
index 521b9005a2c839..6fc08806110851 100644
--- a/packages/mui-material/src/DialogContent/DialogContent.test.js
+++ b/packages/mui-material/src/DialogContent/DialogContent.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import DialogContent, { dialogContentClasses as classes } from '@mui/material/DialogContent';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.test.js b/packages/mui-material/src/DialogContentText/DialogContentText.test.js
index bbb60dd27bd069..b840627e34f341 100644
--- a/packages/mui-material/src/DialogContentText/DialogContentText.test.js
+++ b/packages/mui-material/src/DialogContentText/DialogContentText.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography from '@mui/material/Typography';
 import DialogContentText, {
   dialogContentTextClasses as classes,
diff --git a/packages/mui-material/src/DialogTitle/DialogTitle.test.js b/packages/mui-material/src/DialogTitle/DialogTitle.test.js
index b4f7a96517fd5a..589b5a4276380a 100644
--- a/packages/mui-material/src/DialogTitle/DialogTitle.test.js
+++ b/packages/mui-material/src/DialogTitle/DialogTitle.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography from '@mui/material/Typography';
 import DialogTitle, { dialogTitleClasses as classes } from '@mui/material/DialogTitle';
 import Dialog from '@mui/material/Dialog';
diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js
index 2dfd208d321d3e..57f7fbc689a643 100644
--- a/packages/mui-material/src/Divider/Divider.test.js
+++ b/packages/mui-material/src/Divider/Divider.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Divider, { dividerClasses as classes } from '@mui/material/Divider';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts
index ab7f745e9f1ae1..63807058e521ab 100644
--- a/packages/mui-material/src/Drawer/Drawer.d.ts
+++ b/packages/mui-material/src/Drawer/Drawer.d.ts
@@ -85,4 +85,4 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
  *
  * - [Drawer API](https://mui.com/material-ui/api/drawer/)
  */
-export default function Drawer(props: DrawerProps): JSX.Element;
+export default function Drawer(props: DrawerProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Drawer/Drawer.test.js b/packages/mui-material/src/Drawer/Drawer.test.js
index 6a5c949eb02206..c36497f005418a 100644
--- a/packages/mui-material/src/Drawer/Drawer.test.js
+++ b/packages/mui-material/src/Drawer/Drawer.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Drawer, { drawerClasses as classes } from '@mui/material/Drawer';
 import { getAnchor, isHorizontal } from './Drawer';
diff --git a/packages/mui-material/src/Fab/Fab.test.js b/packages/mui-material/src/Fab/Fab.test.js
index f902c6d6314f40..4cc81fbc832e71 100644
--- a/packages/mui-material/src/Fab/Fab.test.js
+++ b/packages/mui-material/src/Fab/Fab.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, act, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, act, fireEvent } from '@mui/internal-test-utils';
 import Fab, { fabClasses as classes } from '@mui/material/Fab';
 import ButtonBase, { touchRippleClasses } from '@mui/material/ButtonBase';
 import Icon from '@mui/material/Icon';
diff --git a/packages/mui-material/src/Fade/Fade.d.ts b/packages/mui-material/src/Fade/Fade.d.ts
index b9b5288ea5f14c..e95260eff4bcd3 100644
--- a/packages/mui-material/src/Fade/Fade.d.ts
+++ b/packages/mui-material/src/Fade/Fade.d.ts
@@ -46,4 +46,4 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
  * - [Fade API](https://mui.com/material-ui/api/fade/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Fade(props: FadeProps): JSX.Element;
+export default function Fade(props: FadeProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Fade/Fade.test.js b/packages/mui-material/src/Fade/Fade.test.js
index 14b68f38e02560..6971bc3f4b875a 100644
--- a/packages/mui-material/src/Fade/Fade.test.js
+++ b/packages/mui-material/src/Fade/Fade.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import Fade from '@mui/material/Fade';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
diff --git a/packages/mui-material/src/FilledInput/FilledInput.d.ts b/packages/mui-material/src/FilledInput/FilledInput.d.ts
index b54d7c165608ec..c31279ed4f8b8b 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.d.ts
+++ b/packages/mui-material/src/FilledInput/FilledInput.d.ts
@@ -37,6 +37,6 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
  * - [FilledInput API](https://mui.com/material-ui/api/filled-input/)
  * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-declare const FilledInput: ((props: FilledInputProps) => JSX.Element) & { muiName: string };
+declare const FilledInput: ((props: FilledInputProps) => React.JSX.Element) & { muiName: string };
 
 export default FilledInput;
diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
index 5d243249930f48..998e3de6dc2b91 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -345,8 +345,7 @@ FilledInput.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -358,8 +357,7 @@ FilledInput.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
diff --git a/packages/mui-material/src/FilledInput/FilledInput.test.js b/packages/mui-material/src/FilledInput/FilledInput.test.js
index ad2bd3f0b01416..e23b512bf5e2b2 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.test.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { styled } from '@mui/material/styles';
 import FilledInput, { filledInputClasses as classes } from '@mui/material/FilledInput';
 import InputBase from '@mui/material/InputBase';
diff --git a/packages/mui-material/src/FormControl/FormControl.test.js b/packages/mui-material/src/FormControl/FormControl.test.js
index f6ac1fab86f142..430efdedaff13b 100644
--- a/packages/mui-material/src/FormControl/FormControl.test.js
+++ b/packages/mui-material/src/FormControl/FormControl.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import FormControl, { formControlClasses as classes } from '@mui/material/FormControl';
 import Input from '@mui/material/Input';
 import Select from '@mui/material/Select';
diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts b/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts
index 0a171d69a5db2f..8191b83c0638bc 100644
--- a/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts
+++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts
@@ -106,4 +106,4 @@ export interface FormControlLabelProps
  *
  * - [FormControlLabel API](https://mui.com/material-ui/api/form-control-label/)
  */
-export default function FormControlLabel(props: FormControlLabelProps): JSX.Element;
+export default function FormControlLabel(props: FormControlLabelProps): React.JSX.Element;
diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js
index 623c7bbcdfbb7b..528a181936859c 100644
--- a/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js
+++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import FormControlLabel, {
   formControlLabelClasses as classes,
 } from '@mui/material/FormControlLabel';
diff --git a/packages/mui-material/src/FormGroup/FormGroup.d.ts b/packages/mui-material/src/FormGroup/FormGroup.d.ts
index b8e6478f1b3ef4..120c8bda2f6ad4 100644
--- a/packages/mui-material/src/FormGroup/FormGroup.d.ts
+++ b/packages/mui-material/src/FormGroup/FormGroup.d.ts
@@ -37,4 +37,4 @@ export interface FormGroupProps extends StandardProps<React.HTMLAttributes<HTMLD
  *
  * - [FormGroup API](https://mui.com/material-ui/api/form-group/)
  */
-export default function FormGroup(props: FormGroupProps): JSX.Element;
+export default function FormGroup(props: FormGroupProps): React.JSX.Element;
diff --git a/packages/mui-material/src/FormGroup/FormGroup.test.js b/packages/mui-material/src/FormGroup/FormGroup.test.js
index e3e8326cb55c91..837a243ddc05cc 100644
--- a/packages/mui-material/src/FormGroup/FormGroup.test.js
+++ b/packages/mui-material/src/FormGroup/FormGroup.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import FormGroup, { formGroupClasses as classes } from '@mui/material/FormGroup';
 import FormControl from '@mui/material/FormControl';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.test.js b/packages/mui-material/src/FormHelperText/FormHelperText.test.js
index c450910ed76121..6df345fad295f7 100644
--- a/packages/mui-material/src/FormHelperText/FormHelperText.test.js
+++ b/packages/mui-material/src/FormHelperText/FormHelperText.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import FormHelperText, { formHelperTextClasses as classes } from '@mui/material/FormHelperText';
 import FormControl from '@mui/material/FormControl';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/FormLabel/FormLabel.test.js b/packages/mui-material/src/FormLabel/FormLabel.test.js
index 9852498cc78aac..4595e95aa0327d 100644
--- a/packages/mui-material/src/FormLabel/FormLabel.test.js
+++ b/packages/mui-material/src/FormLabel/FormLabel.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import FormLabel, { formLabelClasses as classes } from '@mui/material/FormLabel';
 import FormControl, { useFormControl } from '@mui/material/FormControl';
 import { hexToRgb } from '@mui/material/styles';
diff --git a/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts
index 28ac44918a1ac1..a3d531791c9651 100644
--- a/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts
+++ b/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts
@@ -18,4 +18,4 @@ export interface GlobalStylesProps {
  *
  * - [GlobalStyles API](https://mui.com/material-ui/api/global-styles/)
  */
-export default function GlobalStyles(props: GlobalStylesProps): React.ReactElement;
+export default function GlobalStyles(props: GlobalStylesProps): React.ReactElement<any>;
diff --git a/packages/mui-material/src/GlobalStyles/GlobalStyles.test.js b/packages/mui-material/src/GlobalStyles/GlobalStyles.test.js
index 7d203be949b1c5..8284c1297cb095 100644
--- a/packages/mui-material/src/GlobalStyles/GlobalStyles.test.js
+++ b/packages/mui-material/src/GlobalStyles/GlobalStyles.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { ThemeProvider, createTheme } from '@mui/material//styles/';
 
diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts
index 8df168eec79edb..b25bcac691eeb5 100644
--- a/packages/mui-material/src/Grid/Grid.d.ts
+++ b/packages/mui-material/src/Grid/Grid.d.ts
@@ -139,6 +139,7 @@ export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
+   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap?: GridWrap;
   /**
diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js
index 7d8935e4395b74..da39ef72229cf7 100644
--- a/packages/mui-material/src/Grid/Grid.js
+++ b/packages/mui-material/src/Grid/Grid.js
@@ -598,6 +598,7 @@ Grid.propTypes /* remove-proptypes */ = {
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
+   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /**
diff --git a/packages/mui-material/src/Grid/Grid.test.js b/packages/mui-material/src/Grid/Grid.test.js
index cb4039c0d0def9..68ce2ec894958f 100644
--- a/packages/mui-material/src/Grid/Grid.test.js
+++ b/packages/mui-material/src/Grid/Grid.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import defaultTheme from '@mui/material/styles/defaultTheme';
 import Grid, { gridClasses as classes } from '@mui/material/Grid';
diff --git a/packages/mui-material/src/Grow/Grow.d.ts b/packages/mui-material/src/Grow/Grow.d.ts
index 173360b6ed7b55..244a6278f734e6 100644
--- a/packages/mui-material/src/Grow/Grow.d.ts
+++ b/packages/mui-material/src/Grow/Grow.d.ts
@@ -47,4 +47,4 @@ export interface GrowProps extends Omit<TransitionProps, 'timeout'> {
  * - [Grow API](https://mui.com/material-ui/api/grow/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Grow(props: GrowProps): JSX.Element;
+export default function Grow(props: GrowProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Grow/Grow.test.js b/packages/mui-material/src/Grow/Grow.test.js
index 5f0f6a49f75095..71d64855760a76 100644
--- a/packages/mui-material/src/Grow/Grow.test.js
+++ b/packages/mui-material/src/Grow/Grow.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Grow from '@mui/material/Grow';
diff --git a/packages/mui-material/src/Hidden/Hidden.d.ts b/packages/mui-material/src/Hidden/Hidden.d.ts
index b56e7e43b1c519..f07cf95a14c119 100644
--- a/packages/mui-material/src/Hidden/Hidden.d.ts
+++ b/packages/mui-material/src/Hidden/Hidden.d.ts
@@ -90,6 +90,8 @@ export interface HiddenProps {
  * API:
  *
  * - [Hidden API](https://mui.com/material-ui/api/hidden/)
+ *
+ * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
  */
 declare const Hidden: React.JSXElementConstructor<HiddenProps>;
 
diff --git a/packages/mui-material/src/Hidden/Hidden.js b/packages/mui-material/src/Hidden/Hidden.js
index a099e9060269e3..6796312c6bf9bc 100644
--- a/packages/mui-material/src/Hidden/Hidden.js
+++ b/packages/mui-material/src/Hidden/Hidden.js
@@ -6,6 +6,8 @@ import HiddenCss from './HiddenCss';
 
 /**
  * Responsively hides children based on the selected implementation.
+ *
+ * @deprecated The Hidden component was deprecated in Material UI v5. To learn more, see [the Hidden section](/material-ui/migration/v5-component-changes/#hidden) of the migration docs.
  */
 function Hidden(props) {
   const {
diff --git a/packages/mui-material/src/Hidden/Hidden.test.js b/packages/mui-material/src/Hidden/Hidden.test.js
index f5024fe11fb8fa..94ceb1766c7e7e 100644
--- a/packages/mui-material/src/Hidden/Hidden.test.js
+++ b/packages/mui-material/src/Hidden/Hidden.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Hidden from '@mui/material/Hidden';
 
 describe('<Hidden />', () => {
diff --git a/packages/mui-material/src/Hidden/HiddenCss.test.js b/packages/mui-material/src/Hidden/HiddenCss.test.js
index b86a63c6889b8b..f44f8672bdf420 100644
--- a/packages/mui-material/src/Hidden/HiddenCss.test.js
+++ b/packages/mui-material/src/Hidden/HiddenCss.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils';
+import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui/internal-test-utils';
 import HiddenCss from './HiddenCss';
 import { createTheme, ThemeProvider } from '../styles';
 import classes from './hiddenCssClasses';
diff --git a/packages/mui-material/src/Hidden/HiddenJs.test.js b/packages/mui-material/src/Hidden/HiddenJs.test.js
index 43cc2320c25648..e6a2702d2dfe55 100644
--- a/packages/mui-material/src/Hidden/HiddenJs.test.js
+++ b/packages/mui-material/src/Hidden/HiddenJs.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import HiddenJs from './HiddenJs';
 
 describe('<HiddenJs />', () => {
diff --git a/packages/mui-material/src/Icon/Icon.test.js b/packages/mui-material/src/Icon/Icon.test.js
index 79dd4f8e3c828a..057c74aeb4edb9 100644
--- a/packages/mui-material/src/Icon/Icon.test.js
+++ b/packages/mui-material/src/Icon/Icon.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Icon, { iconClasses as classes } from '@mui/material/Icon';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js
index b32027f326b020..317e11f48b7394 100644
--- a/packages/mui-material/src/IconButton/IconButton.test.js
+++ b/packages/mui-material/src/IconButton/IconButton.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import capitalize from '@mui/utils/capitalize';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton';
diff --git a/packages/mui-material/src/ImageList/ImageList.test.js b/packages/mui-material/src/ImageList/ImageList.test.js
index 1a99d7ee7b6526..80de907544a6fa 100644
--- a/packages/mui-material/src/ImageList/ImageList.test.js
+++ b/packages/mui-material/src/ImageList/ImageList.test.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ImageList, { imageListClasses as classes } from '@mui/material/ImageList';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.test.js b/packages/mui-material/src/ImageListItem/ImageListItem.test.js
index 91c2acc21af112..1febe18fde76b8 100644
--- a/packages/mui-material/src/ImageListItem/ImageListItem.test.js
+++ b/packages/mui-material/src/ImageListItem/ImageListItem.test.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ImageList from '@mui/material/ImageList';
 import ImageListItem, { imageListItemClasses as classes } from '@mui/material/ImageListItem';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts
index fb9e5260c08a64..b134d22e35121d 100644
--- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts
+++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts
@@ -48,4 +48,4 @@ export interface ImageListItemBarProps
  *
  * - [ImageListItemBar API](https://mui.com/material-ui/api/image-list-item-bar/)
  */
-export default function ImageListItemBar(props: ImageListItemBarProps): JSX.Element;
+export default function ImageListItemBar(props: ImageListItemBarProps): React.JSX.Element;
diff --git a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js
index b7ec8e63e07488..5fb7e82f511af6 100644
--- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js
+++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ImageListItemBar, {
   imageListItemBarClasses as classes,
 } from '@mui/material/ImageListItemBar';
diff --git a/packages/mui-material/src/Input/Input.d.ts b/packages/mui-material/src/Input/Input.d.ts
index 87e624d32c0b21..771af138da3324 100644
--- a/packages/mui-material/src/Input/Input.d.ts
+++ b/packages/mui-material/src/Input/Input.d.ts
@@ -30,6 +30,6 @@ export interface InputProps extends StandardProps<InputBaseProps> {
  * - [Input API](https://mui.com/material-ui/api/input/)
  * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-declare const Input: ((props: InputProps) => JSX.Element) & { muiName: string };
+declare const Input: ((props: InputProps) => React.JSX.Element) & { muiName: string };
 
 export default Input;
diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index 2b511501b95efe..6634fc1623c118 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -209,8 +209,7 @@ Input.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -222,8 +221,7 @@ Input.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
diff --git a/packages/mui-material/src/Input/Input.test.js b/packages/mui-material/src/Input/Input.test.js
index 8c77acac086dba..3774a38f5821c9 100644
--- a/packages/mui-material/src/Input/Input.test.js
+++ b/packages/mui-material/src/Input/Input.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import InputBase from '@mui/material/InputBase';
 import Input, { inputClasses as classes } from '@mui/material/Input';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.test.js b/packages/mui-material/src/InputAdornment/InputAdornment.test.js
index 0b0ddd480fd0eb..8cc82820def96d 100644
--- a/packages/mui-material/src/InputAdornment/InputAdornment.test.js
+++ b/packages/mui-material/src/InputAdornment/InputAdornment.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils';
+import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui/internal-test-utils';
 import { typographyClasses } from '@mui/material/Typography';
 import InputAdornment, { inputAdornmentClasses as classes } from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
diff --git a/packages/mui-material/src/InputBase/InputBase.d.ts b/packages/mui-material/src/InputBase/InputBase.d.ts
index 98d5fb1e411020..1fc733478cd66c 100644
--- a/packages/mui-material/src/InputBase/InputBase.d.ts
+++ b/packages/mui-material/src/InputBase/InputBase.d.ts
@@ -56,8 +56,7 @@ export interface InputBaseProps
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -69,8 +68,7 @@ export interface InputBaseProps
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -263,4 +261,4 @@ export interface InputBaseComponentProps
  *
  * - [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-export default function InputBase(props: InputBaseProps): JSX.Element;
+export default function InputBase(props: InputBaseProps): React.JSX.Element;
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index dac171b0401af3..37a3e30ab16789 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -645,8 +645,7 @@ InputBase.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -658,8 +657,7 @@ InputBase.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
index 8bce7862d203f1..f35299e9dd8e29 100644
--- a/packages/mui-material/src/InputBase/InputBase.test.js
+++ b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@emotion/react';
 import FormControl, { useFormControl } from '@mui/material/FormControl';
 import InputAdornment from '@mui/material/InputAdornment';
diff --git a/packages/mui-material/src/InputLabel/InputLabel.test.js b/packages/mui-material/src/InputLabel/InputLabel.test.js
index e34ec0aa59bb26..e12c475ceb84ec 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.test.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import { ClassNames } from '@emotion/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import FormControl from '@mui/material/FormControl';
diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.d.ts b/packages/mui-material/src/LinearProgress/LinearProgress.d.ts
index 9b940c879c61bd..58e7a73e9e80c5 100644
--- a/packages/mui-material/src/LinearProgress/LinearProgress.d.ts
+++ b/packages/mui-material/src/LinearProgress/LinearProgress.d.ts
@@ -59,4 +59,4 @@ export interface LinearProgressProps
  *
  * - [LinearProgress API](https://mui.com/material-ui/api/linear-progress/)
  */
-export default function LinearProgress(props: LinearProgressProps): JSX.Element;
+export default function LinearProgress(props: LinearProgressProps): React.JSX.Element;
diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.test.js b/packages/mui-material/src/LinearProgress/LinearProgress.test.js
index fbdd5f3300c4e4..5a97ff6fc1b88e 100644
--- a/packages/mui-material/src/LinearProgress/LinearProgress.test.js
+++ b/packages/mui-material/src/LinearProgress/LinearProgress.test.js
@@ -4,7 +4,7 @@ import {
   createRenderer,
   screen,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import LinearProgress, { linearProgressClasses as classes } from '@mui/material/LinearProgress';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Link/Link.test.js b/packages/mui-material/src/Link/Link.test.js
index ac117c44fa4ebe..1fb1e0f14d8407 100644
--- a/packages/mui-material/src/Link/Link.test.js
+++ b/packages/mui-material/src/Link/Link.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Link, { linkClasses as classes } from '@mui/material/Link';
 import Typography, { typographyClasses } from '@mui/material/Typography';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/Link/getTextDecoration.test.js b/packages/mui-material/src/Link/getTextDecoration.test.js
index 41e92011448c54..cf15c993b1d48c 100644
--- a/packages/mui-material/src/Link/getTextDecoration.test.js
+++ b/packages/mui-material/src/Link/getTextDecoration.test.js
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { createTheme, experimental_extendTheme as extendTheme } from '../styles';
+import { createTheme, extendTheme } from '../styles';
 import getTextDecoration from './getTextDecoration';
 
 describe('getTextDecoration', () => {
diff --git a/packages/mui-material/src/List/List.test.js b/packages/mui-material/src/List/List.test.js
index b70b0280ab0db7..9616458792fc18 100644
--- a/packages/mui-material/src/List/List.test.js
+++ b/packages/mui-material/src/List/List.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ListSubheader, { listSubheaderClasses } from '@mui/material/ListSubheader';
 import ListItem, { listItemClasses } from '@mui/material/ListItem';
 import List, { listClasses as classes } from '@mui/material/List';
diff --git a/packages/mui-material/src/ListItem/ListItem.d.ts b/packages/mui-material/src/ListItem/ListItem.d.ts
index b4e22ee6ba1c8f..44ce52818c2c22 100644
--- a/packages/mui-material/src/ListItem/ListItem.d.ts
+++ b/packages/mui-material/src/ListItem/ListItem.d.ts
@@ -35,13 +35,13 @@ export interface ListItemBaseProps {
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.
    * @default 'li'
-   * @deprecated
+   * @deprecated Use the `component` or `slots.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ContainerComponent?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
   /**
    * Props applied to the container component if used.
    * @default {}
-   * @deprecated
+   * @deprecated Use the `slotProps.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
   /**
@@ -91,9 +91,7 @@ export interface ListItemOwnProps extends ListItemBaseProps {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
-   *
+   * @deprecated Use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   components?: {
@@ -103,9 +101,7 @@ export interface ListItemOwnProps extends ListItemBaseProps {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-   *
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   componentsProps?: {
@@ -115,8 +111,6 @@ export interface ListItemOwnProps extends ListItemBaseProps {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slotProps?: {
@@ -125,8 +119,6 @@ export interface ListItemOwnProps extends ListItemBaseProps {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots?: {
diff --git a/packages/mui-material/src/ListItem/ListItem.js b/packages/mui-material/src/ListItem/ListItem.js
index afdd2218a9a717..3597750670b2a3 100644
--- a/packages/mui-material/src/ListItem/ListItem.js
+++ b/packages/mui-material/src/ListItem/ListItem.js
@@ -255,7 +255,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
 
   const children = React.Children.toArray(childrenProp);
 
-  // v4 implementation, deprecated in v5, will be removed in v6
+  // v4 implementation, deprecated in v6, will be removed in v7
   const hasSecondaryAction =
     children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
 
@@ -298,7 +298,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
     Component = ButtonBase;
   }
 
-  // v4 implementation, deprecated in v5, will be removed in v6
+  // v4 implementation, deprecated in v6, will be removed in v7
   if (hasSecondaryAction) {
     // Use div by default.
     Component = !componentProps.component && !componentProp ? 'div' : Component;
@@ -423,9 +423,7 @@ ListItem.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
-   *
+   * @deprecated Use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   components: PropTypes.shape({
@@ -435,9 +433,7 @@ ListItem.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-   *
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   componentsProps: PropTypes.shape({
@@ -446,13 +442,13 @@ ListItem.propTypes /* remove-proptypes */ = {
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.
    * @default 'li'
-   * @deprecated
+   * @deprecated Use the `component` or `slots.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ContainerComponent: elementTypeAcceptingRef,
   /**
    * Props applied to the container component if used.
    * @default {}
-   * @deprecated
+   * @deprecated Use the `slotProps.root` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ContainerProps: PropTypes.object,
   /**
@@ -500,8 +496,6 @@ ListItem.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -510,8 +504,6 @@ ListItem.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
diff --git a/packages/mui-material/src/ListItem/ListItem.test.js b/packages/mui-material/src/ListItem/ListItem.test.js
index aaf0e4bffd7ef8..306c601a9631bc 100644
--- a/packages/mui-material/src/ListItem/ListItem.test.js
+++ b/packages/mui-material/src/ListItem/ListItem.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { act, createRenderer, fireEvent, queries } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, queries } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
diff --git a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts
index 0fe8e56956dc83..5a13d4c9d5d8de 100644
--- a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts
+++ b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts
@@ -28,4 +28,4 @@ export interface ListItemAvatarProps extends StandardProps<React.HTMLAttributes<
  *
  * - [ListItemAvatar API](https://mui.com/material-ui/api/list-item-avatar/)
  */
-export default function ListItemAvatar(props: ListItemAvatarProps): JSX.Element;
+export default function ListItemAvatar(props: ListItemAvatarProps): React.JSX.Element;
diff --git a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.test.js b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.test.js
index b0a0d2d64d6791..08f39e2fdb0086 100644
--- a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.test.js
+++ b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ListItemAvatar, { listItemAvatarClasses as classes } from '@mui/material/ListItemAvatar';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.test.js b/packages/mui-material/src/ListItemButton/ListItemButton.test.js
index 8ac181e5f9383d..00a1eb34dba8b8 100644
--- a/packages/mui-material/src/ListItemButton/ListItemButton.test.js
+++ b/packages/mui-material/src/ListItemButton/ListItemButton.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import ListItemButton, { listItemButtonClasses as classes } from '@mui/material/ListItemButton';
 import ButtonBase from '@mui/material/ButtonBase';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
diff --git a/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts b/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts
index 357596d183207a..076ca13b5513eb 100644
--- a/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts
+++ b/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts
@@ -30,4 +30,4 @@ export interface ListItemIconProps extends StandardProps<React.HTMLAttributes<HT
  *
  * - [ListItemIcon API](https://mui.com/material-ui/api/list-item-icon/)
  */
-export default function ListItemIcon(props: ListItemIconProps): JSX.Element;
+export default function ListItemIcon(props: ListItemIconProps): React.JSX.Element;
diff --git a/packages/mui-material/src/ListItemIcon/ListItemIcon.test.js b/packages/mui-material/src/ListItemIcon/ListItemIcon.test.js
index 329d7cf7b904da..f2945d8f17d5bf 100644
--- a/packages/mui-material/src/ListItemIcon/ListItemIcon.test.js
+++ b/packages/mui-material/src/ListItemIcon/ListItemIcon.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ListItemIcon, { listItemIconClasses as classes } from '@mui/material/ListItemIcon';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts
index e4ee9cbfb450d3..da907804355eae 100644
--- a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts
+++ b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts
@@ -29,8 +29,12 @@ export interface ListItemSecondaryActionProps
  * API:
  *
  * - [ListItemSecondaryAction API](https://mui.com/material-ui/api/list-item-secondary-action/)
+ *
+ * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
-declare const ListItemSecondaryAction: ((props: ListItemSecondaryActionProps) => JSX.Element) & {
+declare const ListItemSecondaryAction: ((
+  props: ListItemSecondaryActionProps,
+) => React.JSX.Element) & {
   muiName: string;
 };
 
diff --git a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js
index d3e0058fd93e22..f91162f6bc3aae 100644
--- a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js
+++ b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js
@@ -44,6 +44,8 @@ const ListItemSecondaryActionRoot = styled('div', {
 
 /**
  * Must be used as the last child of ListItem to function properly.
+ *
+ * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
 const ListItemSecondaryAction = React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiListItemSecondaryAction' });
diff --git a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js
index ae4e487b252995..50625f3e09d154 100644
--- a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js
+++ b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ListItem from '@mui/material/ListItem';
 import ListItemSecondaryAction, {
   listItemSecondaryActionClasses as classes,
diff --git a/packages/mui-material/src/ListItemText/ListItemText.d.ts b/packages/mui-material/src/ListItemText/ListItemText.d.ts
index 5c1f4f1690ca8b..f99f467ec6b74c 100644
--- a/packages/mui-material/src/ListItemText/ListItemText.d.ts
+++ b/packages/mui-material/src/ListItemText/ListItemText.d.ts
@@ -73,4 +73,6 @@ export interface ListItemTextProps<
 export default function ListItemText<
   PrimaryTypographyComponent extends React.ElementType = 'span',
   SecondaryTypographyComponent extends React.ElementType = 'p',
->(props: ListItemTextProps<PrimaryTypographyComponent, SecondaryTypographyComponent>): JSX.Element;
+>(
+  props: ListItemTextProps<PrimaryTypographyComponent, SecondaryTypographyComponent>,
+): React.JSX.Element;
diff --git a/packages/mui-material/src/ListItemText/ListItemText.test.js b/packages/mui-material/src/ListItemText/ListItemText.test.js
index af506159bf6dd6..830a763b3bc6c5 100644
--- a/packages/mui-material/src/ListItemText/ListItemText.test.js
+++ b/packages/mui-material/src/ListItemText/ListItemText.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography, { typographyClasses } from '@mui/material/Typography';
 import ListItemText, { listItemTextClasses as classes } from '@mui/material/ListItemText';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/ListSubheader/ListSubheader.test.js b/packages/mui-material/src/ListSubheader/ListSubheader.test.js
index b36c1add038963..b7bbfe6fb77abe 100644
--- a/packages/mui-material/src/ListSubheader/ListSubheader.test.js
+++ b/packages/mui-material/src/ListSubheader/ListSubheader.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ListSubheader, { listSubheaderClasses as classes } from '@mui/material/ListSubheader';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Menu/Menu.d.ts b/packages/mui-material/src/Menu/Menu.d.ts
index 34b27cb8cca448..4e25f63ddfd124 100644
--- a/packages/mui-material/src/Menu/Menu.d.ts
+++ b/packages/mui-material/src/Menu/Menu.d.ts
@@ -94,4 +94,4 @@ export declare const MenuPaper: React.FC<PaperProps>;
  * - [Menu API](https://mui.com/material-ui/api/menu/)
  * - inherits [Popover API](https://mui.com/material-ui/api/popover/)
  */
-export default function Menu(props: MenuProps): JSX.Element;
+export default function Menu(props: MenuProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js
index 1a882da0ac7b66..ef7aa46172dd12 100644
--- a/packages/mui-material/src/Menu/Menu.test.js
+++ b/packages/mui-material/src/Menu/Menu.test.js
@@ -7,7 +7,7 @@ import {
   screen,
   fireEvent,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import Menu, { menuClasses as classes } from '@mui/material/Menu';
 import Popover from '@mui/material/Popover';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
diff --git a/packages/mui-material/src/MenuItem/MenuItem.test.js b/packages/mui-material/src/MenuItem/MenuItem.test.js
index cab913de295f06..6c8513da6fc83b 100644
--- a/packages/mui-material/src/MenuItem/MenuItem.test.js
+++ b/packages/mui-material/src/MenuItem/MenuItem.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import MenuItem, { menuItemClasses as classes } from '@mui/material/MenuItem';
 import ButtonBase from '@mui/material/ButtonBase';
 import ListContext from '../List/ListContext';
diff --git a/packages/mui-material/src/MenuList/MenuList.test.js b/packages/mui-material/src/MenuList/MenuList.test.js
index 4e72262e4ce9d8..ba523f4a56c18b 100644
--- a/packages/mui-material/src/MenuList/MenuList.test.js
+++ b/packages/mui-material/src/MenuList/MenuList.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { stub } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Divider from '@mui/material/Divider';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.d.ts b/packages/mui-material/src/MobileStepper/MobileStepper.d.ts
index 86a5e95f20981e..9a05cabb4b9b5d 100644
--- a/packages/mui-material/src/MobileStepper/MobileStepper.d.ts
+++ b/packages/mui-material/src/MobileStepper/MobileStepper.d.ts
@@ -59,4 +59,4 @@ export interface MobileStepperProps extends StandardProps<PaperProps, 'children'
  * - [MobileStepper API](https://mui.com/material-ui/api/mobile-stepper/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function MobileStepper(props: MobileStepperProps): JSX.Element;
+export default function MobileStepper(props: MobileStepperProps): React.JSX.Element;
diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.test.js b/packages/mui-material/src/MobileStepper/MobileStepper.test.js
index c65edbc89144a7..6bd31fa8291e19 100644
--- a/packages/mui-material/src/MobileStepper/MobileStepper.test.js
+++ b/packages/mui-material/src/MobileStepper/MobileStepper.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Button from '@mui/material/Button';
 import MobileStepper, { mobileStepperClasses as classes } from '@mui/material/MobileStepper';
diff --git a/packages/mui-material/src/Modal/Modal.d.ts b/packages/mui-material/src/Modal/Modal.d.ts
index a9ad08c406c944..80ffdb1809368f 100644
--- a/packages/mui-material/src/Modal/Modal.d.ts
+++ b/packages/mui-material/src/Modal/Modal.d.ts
@@ -50,7 +50,7 @@ export interface ModalOwnProps {
   /**
    * A single child content element.
    */
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   /**
    * Override or extend the styles applied to the component.
    */
diff --git a/packages/mui-material/src/Modal/Modal.test.js b/packages/mui-material/src/Modal/Modal.test.js
index 8051a236fca9f2..abda282882ee6b 100644
--- a/packages/mui-material/src/Modal/Modal.test.js
+++ b/packages/mui-material/src/Modal/Modal.test.js
@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import PropTypes from 'prop-types';
-import { act, createRenderer, fireEvent, within, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, within, screen } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Fade from '@mui/material/Fade';
 import Modal, { modalClasses as classes } from '@mui/material/Modal';
diff --git a/packages/mui-material/src/NativeSelect/NativeSelect.d.ts b/packages/mui-material/src/NativeSelect/NativeSelect.d.ts
index 6e4d078e6179ce..4f09d74c00833a 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelect.d.ts
+++ b/packages/mui-material/src/NativeSelect/NativeSelect.d.ts
@@ -64,6 +64,6 @@ export interface NativeSelectProps
  * - [NativeSelect API](https://mui.com/material-ui/api/native-select/)
  * - inherits [Input API](https://mui.com/material-ui/api/input/)
  */
-declare const NativeSelect: ((props: NativeSelectProps) => JSX.Element) & { muiName: string };
+declare const NativeSelect: ((props: NativeSelectProps) => React.JSX.Element) & { muiName: string };
 
 export default NativeSelect;
diff --git a/packages/mui-material/src/NativeSelect/NativeSelect.test.js b/packages/mui-material/src/NativeSelect/NativeSelect.test.js
index 1f0118c2b13f05..1a57c51923b84a 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelect.test.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelect.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
 import NativeSelect, { nativeSelectClasses as classes } from '@mui/material/NativeSelect';
 import Input, { inputClasses } from '@mui/material/Input';
diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
index 8f0dbace379d31..6dec2d7a4e9ad2 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import NativeSelectInput from './NativeSelectInput';
 import nativeSelectClasses from './nativeSelectClasses';
diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.test.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.test.js
index b27d8e928cbe75..e1f14b83580bc6 100644
--- a/packages/mui-material/src/OutlinedInput/NotchedOutline.test.js
+++ b/packages/mui-material/src/OutlinedInput/NotchedOutline.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import NotchedOutline from './NotchedOutline';
 
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts b/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts
index 61646bc8096fef..f8faee63a44db8 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts
@@ -35,6 +35,8 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
  * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-declare const OutlinedInput: ((props: OutlinedInputProps) => JSX.Element) & { muiName: string };
+declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
+  muiName: string;
+};
 
 export default OutlinedInput;
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
index cddb78bfd06f8e..43a2aaa51e06da 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -290,8 +290,7 @@ OutlinedInput.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js
index b45720d6055341..145bc5d8b15f90 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import OutlinedInput, { outlinedInputClasses as classes } from '@mui/material/OutlinedInput';
 import InputBase from '@mui/material/InputBase';
diff --git a/packages/mui-material/src/OverridableComponent.d.ts b/packages/mui-material/src/OverridableComponent.d.ts
index 1a65de60e6c1f5..d982e97a4d009a 100644
--- a/packages/mui-material/src/OverridableComponent.d.ts
+++ b/packages/mui-material/src/OverridableComponent.d.ts
@@ -20,8 +20,8 @@ export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
        */
       component: RootComponent;
     } & OverrideProps<TypeMap, RootComponent>,
-  ): JSX.Element | null;
-  (props: DefaultComponentProps<TypeMap>): JSX.Element | null;
+  ): React.JSX.Element | null;
+  (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
 }
 
 /**
diff --git a/packages/mui-material/src/Pagination/Pagination.d.ts b/packages/mui-material/src/Pagination/Pagination.d.ts
index 11a27ca7b51a4c..130d148f830c15 100644
--- a/packages/mui-material/src/Pagination/Pagination.d.ts
+++ b/packages/mui-material/src/Pagination/Pagination.d.ts
@@ -86,4 +86,4 @@ export interface PaginationProps
  *
  * - [Pagination API](https://mui.com/material-ui/api/pagination/)
  */
-export default function Pagination(props: PaginationProps): JSX.Element;
+export default function Pagination(props: PaginationProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Pagination/Pagination.test.js b/packages/mui-material/src/Pagination/Pagination.test.js
index 84ced518138f9a..44d778114b3284 100644
--- a/packages/mui-material/src/Pagination/Pagination.test.js
+++ b/packages/mui-material/src/Pagination/Pagination.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Pagination, { paginationClasses as classes } from '@mui/material/Pagination';
 import { paginationItemClasses } from '@mui/material/PaginationItem';
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.test.js b/packages/mui-material/src/PaginationItem/PaginationItem.test.js
index f0785d8df1fe90..593037012dc26b 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.test.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
diff --git a/packages/mui-material/src/Paper/Paper.test.js b/packages/mui-material/src/Paper/Paper.test.js
index a0faade99f7af1..0539834b7a51b6 100644
--- a/packages/mui-material/src/Paper/Paper.test.js
+++ b/packages/mui-material/src/Paper/Paper.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
-import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils';
+import { createRenderer, strictModeDoubleLoggingSuppressed } from '@mui/internal-test-utils';
 import Paper, { paperClasses as classes } from '@mui/material/Paper';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts
index d8308b68ac7a5b..cd61ebd110215c 100644
--- a/packages/mui-material/src/Popover/Popover.d.ts
+++ b/packages/mui-material/src/Popover/Popover.d.ts
@@ -195,4 +195,4 @@ export declare const PopoverPaper: React.FC<PopoverPaperProps>;
  * - [Popover API](https://mui.com/material-ui/api/popover/)
  * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
  */
-export default function Popover(props: PopoverProps): JSX.Element;
+export default function Popover(props: PopoverProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js
index 656e70e2b1919b..07d030bdf585a5 100644
--- a/packages/mui-material/src/Popover/Popover.test.js
+++ b/packages/mui-material/src/Popover/Popover.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub, match } from 'sinon';
-import { act, createMount, createRenderer, screen } from '@mui-internal/test-utils';
+import { act, createMount, createRenderer, screen } from '@mui/internal-test-utils';
 import PropTypes from 'prop-types';
 import Grow from '@mui/material/Grow';
 import Modal from '@mui/material/Modal';
diff --git a/packages/mui-material/src/Popper/Popper.spec.tsx b/packages/mui-material/src/Popper/Popper.spec.tsx
index c970097dd3db65..0431883265da3f 100644
--- a/packages/mui-material/src/Popper/Popper.spec.tsx
+++ b/packages/mui-material/src/Popper/Popper.spec.tsx
@@ -3,7 +3,7 @@ import { Instance } from '@popperjs/core';
 import Tooltip from '@mui/material/Tooltip';
 
 interface Props {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   value: number;
 }
 
diff --git a/packages/mui-material/src/Popper/Popper.test.js b/packages/mui-material/src/Popper/Popper.test.js
index cbe5f8db368e36..c4d8a36ac3f616 100644
--- a/packages/mui-material/src/Popper/Popper.test.js
+++ b/packages/mui-material/src/Popper/Popper.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/system';
 import createTheme from '@mui/system/createTheme';
 import Grow from '@mui/material/Grow';
diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 3d946e9e32adf8..2213d3ee72419b 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -17,6 +17,8 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components?: {
@@ -24,6 +26,8 @@ export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
   };
   /**
    * The props used for each slot inside the Popper.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps?: BasePopperProps['slotProps'];
@@ -137,6 +141,8 @@ Popper.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: PropTypes.shape({
@@ -144,6 +150,8 @@ Popper.propTypes /* remove-proptypes */ = {
   }),
   /**
    * The props used for each slot inside the Popper.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: PropTypes.shape({
diff --git a/packages/mui-material/src/Radio/Radio.d.ts b/packages/mui-material/src/Radio/Radio.d.ts
index 9b07e5576a34c3..839696994c4b31 100644
--- a/packages/mui-material/src/Radio/Radio.d.ts
+++ b/packages/mui-material/src/Radio/Radio.d.ts
@@ -62,4 +62,4 @@ export interface RadioProps
  * - [Radio API](https://mui.com/material-ui/api/radio/)
  * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
-export default function Radio(props: RadioProps): JSX.Element;
+export default function Radio(props: RadioProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Radio/Radio.test.js b/packages/mui-material/src/Radio/Radio.test.js
index 392d6d52042552..9be88a2227efb5 100644
--- a/packages/mui-material/src/Radio/Radio.test.js
+++ b/packages/mui-material/src/Radio/Radio.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Radio, { radioClasses as classes } from '@mui/material/Radio';
 import FormControl from '@mui/material/FormControl';
 import ButtonBase from '@mui/material/ButtonBase';
diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.d.ts b/packages/mui-material/src/RadioGroup/RadioGroup.d.ts
index 3cfdf5713537e9..3793f088ac1384 100644
--- a/packages/mui-material/src/RadioGroup/RadioGroup.d.ts
+++ b/packages/mui-material/src/RadioGroup/RadioGroup.d.ts
@@ -36,4 +36,4 @@ export interface RadioGroupProps extends Omit<FormGroupProps, 'onChange'> {
  * - [RadioGroup API](https://mui.com/material-ui/api/radio-group/)
  * - inherits [FormGroup API](https://mui.com/material-ui/api/form-group/)
  */
-export default function RadioGroup(props: RadioGroupProps): JSX.Element;
+export default function RadioGroup(props: RadioGroupProps): React.JSX.Element;
diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.test.js b/packages/mui-material/src/RadioGroup/RadioGroup.test.js
index ad9c3d2068eebe..be154233f9fbbe 100644
--- a/packages/mui-material/src/RadioGroup/RadioGroup.test.js
+++ b/packages/mui-material/src/RadioGroup/RadioGroup.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import PropTypes from 'prop-types';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import FormGroup from '@mui/material/FormGroup';
 import Radio from '@mui/material/Radio';
 import RadioGroup, { useRadioGroup, radioGroupClasses as classes } from '@mui/material/RadioGroup';
diff --git a/packages/mui-material/src/Rating/Rating.d.ts b/packages/mui-material/src/Rating/Rating.d.ts
index 1eb262d4c43d9f..6056f8966d5d4f 100644
--- a/packages/mui-material/src/Rating/Rating.d.ts
+++ b/packages/mui-material/src/Rating/Rating.d.ts
@@ -124,4 +124,4 @@ export interface RatingProps
  *
  * - [Rating API](https://mui.com/material-ui/api/rating/)
  */
-export default function Rating(props: RatingProps): JSX.Element;
+export default function Rating(props: RatingProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js
index ee1447cd07637d..afd6b60d710e92 100644
--- a/packages/mui-material/src/Rating/Rating.test.js
+++ b/packages/mui-material/src/Rating/Rating.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { stub, spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import Rating, { ratingClasses as classes } from '@mui/material/Rating';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.test.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.test.js
index 2d472399b8e389..8418733ea0c390 100644
--- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.test.js
+++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ScopedCssBaseline, {
   scopedCssBaselineClasses as classes,
 } from '@mui/material/ScopedCssBaseline';
diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts
index f4984bdc71f84d..3f68467ee861ab 100644
--- a/packages/mui-material/src/Select/Select.d.ts
+++ b/packages/mui-material/src/Select/Select.d.ts
@@ -196,7 +196,7 @@ 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/)
  */
-declare const Select: (<Value = unknown>(props: SelectProps<Value>) => JSX.Element) & {
+declare const Select: (<Value = unknown>(props: SelectProps<Value>) => React.JSX.Element) & {
   muiName: string;
 };
 
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 120e3027b413f5..501d4421b2f0c2 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
-import { ErrorBoundary, act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { ErrorBoundary, act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
 import ListSubheader from '@mui/material/ListSubheader';
diff --git a/packages/mui-material/src/Skeleton/Skeleton.test.js b/packages/mui-material/src/Skeleton/Skeleton.test.js
index 67cbd095ea909b..3cdcbb02c47d78 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.test.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.test.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Skeleton, { skeletonClasses as classes } from '@mui/material/Skeleton';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Slide/Slide.d.ts b/packages/mui-material/src/Slide/Slide.d.ts
index 76621b10735cbf..c7e2d14e5bc92f 100644
--- a/packages/mui-material/src/Slide/Slide.d.ts
+++ b/packages/mui-material/src/Slide/Slide.d.ts
@@ -61,4 +61,4 @@ export interface SlideProps extends TransitionProps {
  * - [Slide API](https://mui.com/material-ui/api/slide/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Slide(props: SlideProps): JSX.Element;
+export default function Slide(props: SlideProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Slide/Slide.test.js b/packages/mui-material/src/Slide/Slide.test.js
index d8c516943c4885..a5e069c854343a 100644
--- a/packages/mui-material/src/Slide/Slide.test.js
+++ b/packages/mui-material/src/Slide/Slide.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Slide from '@mui/material/Slide';
diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts
index 98a9f281f14ae6..4aa0b3f0f7a399 100644
--- a/packages/mui-material/src/Slider/Slider.d.ts
+++ b/packages/mui-material/src/Slider/Slider.d.ts
@@ -281,7 +281,7 @@ export interface SliderTypeMap<
 }
 
 export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   index: number;
   open: boolean;
   value: number;
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 8ed7a63e3407d1..00c7f49cfcaf81 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -321,7 +321,7 @@ export const SliderThumb = styled('span', {
           [`&.${sliderClasses.active}`]: {
             ...(theme.vars
               ? {
-                  boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`,
+                  boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`,
                 }
               : {
                   boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`,
diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
index 7e3207d337dcbc..9dde053cf3708b 100644
--- a/packages/mui-material/src/Slider/Slider.test.js
+++ b/packages/mui-material/src/Slider/Slider.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { spy, stub } from 'sinon';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { Slider as BaseSlider } from '@mui/base/Slider';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Slider, { sliderClasses as classes } from '@mui/material/Slider';
diff --git a/packages/mui-material/src/Slider/SliderValueLabel.types.ts b/packages/mui-material/src/Slider/SliderValueLabel.types.ts
index 68fe865e14d10f..251c91edc65617 100644
--- a/packages/mui-material/src/Slider/SliderValueLabel.types.ts
+++ b/packages/mui-material/src/Slider/SliderValueLabel.types.ts
@@ -1,5 +1,5 @@
 export interface SliderValueLabelProps {
-  children?: React.ReactElement;
+  children?: React.ReactElement<any>;
   className?: string;
   style?: React.CSSProperties;
   /**
diff --git a/packages/mui-material/src/Snackbar/Snackbar.d.ts b/packages/mui-material/src/Snackbar/Snackbar.d.ts
index 30b6fc17082d8b..7c9d89895df2e7 100644
--- a/packages/mui-material/src/Snackbar/Snackbar.d.ts
+++ b/packages/mui-material/src/Snackbar/Snackbar.d.ts
@@ -127,4 +127,4 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
  *
  * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
  */
-export default function Snackbar(props: SnackbarProps): JSX.Element;
+export default function Snackbar(props: SnackbarProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Snackbar/Snackbar.test.js b/packages/mui-material/src/Snackbar/Snackbar.test.js
index 3a3558ef53c13c..51d858f4a8ad9e 100644
--- a/packages/mui-material/src/Snackbar/Snackbar.test.js
+++ b/packages/mui-material/src/Snackbar/Snackbar.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Snackbar, { snackbarClasses as classes } from '@mui/material/Snackbar';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts b/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts
index 767023bd3215d7..18176778d0641f 100644
--- a/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts
+++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts
@@ -40,4 +40,4 @@ export interface SnackbarContentProps extends StandardProps<PaperProps, 'childre
  * - [SnackbarContent API](https://mui.com/material-ui/api/snackbar-content/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function SnackbarContent(props: SnackbarContentProps): JSX.Element;
+export default function SnackbarContent(props: SnackbarContentProps): React.JSX.Element;
diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.test.js b/packages/mui-material/src/SnackbarContent/SnackbarContent.test.js
index 7996611beadab1..cc6798a1dd7c23 100644
--- a/packages/mui-material/src/SnackbarContent/SnackbarContent.test.js
+++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Paper from '@mui/material/Paper';
 import SnackbarContent, { snackbarContentClasses as classes } from '@mui/material/SnackbarContent';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts
index fcbd55f7ad01d8..cd0d58af0e0350 100644
--- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts
+++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts
@@ -129,4 +129,4 @@ export interface SpeedDialOwnerState extends SpeedDialProps {}
  *
  * - [SpeedDial API](https://mui.com/material-ui/api/speed-dial/)
  */
-export default function SpeedDial(props: SpeedDialProps): JSX.Element;
+export default function SpeedDial(props: SpeedDialProps): React.JSX.Element;
diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js
index 562cf84ea99326..c6a9bd916c0e11 100644
--- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js
+++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js
@@ -7,7 +7,7 @@ import {
   fireEvent,
   fireDiscreteEvent,
   screen,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import Icon from '@mui/material/Icon';
 import SpeedDial, { speedDialClasses as classes } from '@mui/material/SpeedDial';
 import SpeedDialAction from '@mui/material/SpeedDialAction';
diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts
index 1a63ac305015fb..08939ec337e1dc 100644
--- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts
+++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts
@@ -60,4 +60,4 @@ export interface SpeedDialActionProps extends StandardProps<Partial<TooltipProps
  * - [SpeedDialAction API](https://mui.com/material-ui/api/speed-dial-action/)
  * - inherits [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
-export default function SpeedDialAction(props: SpeedDialActionProps): JSX.Element;
+export default function SpeedDialAction(props: SpeedDialActionProps): React.JSX.Element;
diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js
index 3cee98729c5fef..66f289e76c5f8c 100644
--- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js
+++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Icon from '@mui/material/Icon';
 import Tooltip from '@mui/material/Tooltip';
 import { fabClasses } from '@mui/material/Fab';
diff --git a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts
index 861f6d959d6611..81b87d264c24d0 100644
--- a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts
+++ b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts
@@ -39,6 +39,8 @@ export interface SpeedDialIconProps
  *
  * - [SpeedDialIcon API](https://mui.com/material-ui/api/speed-dial-icon/)
  */
-declare const SpeedDialIcon: ((props: SpeedDialIconProps) => JSX.Element) & { muiName: string };
+declare const SpeedDialIcon: ((props: SpeedDialIconProps) => React.JSX.Element) & {
+  muiName: string;
+};
 
 export default SpeedDialIcon;
diff --git a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.test.js b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.test.js
index 46ce7bdda052fb..b90008dc575f47 100644
--- a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.test.js
+++ b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Icon from '@mui/material/Icon';
 import SpeedDialIcon, { speedDialIconClasses as classes } from '@mui/material/SpeedDialIcon';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js
index b30b1972bb478e..ac5ccf5c6cb0b0 100644
--- a/packages/mui-material/src/Stack/Stack.test.js
+++ b/packages/mui-material/src/Stack/Stack.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Stack, { stackClasses as classes } from '@mui/material/Stack';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Step/Step.test.js b/packages/mui-material/src/Step/Step.test.js
index f6d9a1c3ad1861..af5299d691cd7b 100644
--- a/packages/mui-material/src/Step/Step.test.js
+++ b/packages/mui-material/src/Step/Step.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Step, { stepClasses as classes } from '@mui/material/Step';
 import Stepper from '@mui/material/Stepper';
 import StepLabel, { stepLabelClasses } from '@mui/material/StepLabel';
diff --git a/packages/mui-material/src/StepButton/StepButton.test.js b/packages/mui-material/src/StepButton/StepButton.test.js
index 14dface8befd23..675e5b97ce6b49 100644
--- a/packages/mui-material/src/StepButton/StepButton.test.js
+++ b/packages/mui-material/src/StepButton/StepButton.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { fireEvent } from '@testing-library/dom';
 import StepButton, { stepButtonClasses as classes } from '@mui/material/StepButton';
 import Step from '@mui/material/Step';
diff --git a/packages/mui-material/src/StepConnector/StepConnector.d.ts b/packages/mui-material/src/StepConnector/StepConnector.d.ts
index 28d55ad48c9476..e60c7c6bac61b4 100644
--- a/packages/mui-material/src/StepConnector/StepConnector.d.ts
+++ b/packages/mui-material/src/StepConnector/StepConnector.d.ts
@@ -4,7 +4,7 @@ import { InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { StepConnectorClasses } from './stepConnectorClasses';
 
-export type StepConnectorIcon = React.ReactElement | string | number;
+export type StepConnectorIcon = React.ReactElement<any> | string | number;
 
 export interface StepConnectorProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -30,4 +30,4 @@ export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classe
  *
  * - [StepConnector API](https://mui.com/material-ui/api/step-connector/)
  */
-export default function StepConnector(props: StepConnectorProps): JSX.Element;
+export default function StepConnector(props: StepConnectorProps): React.JSX.Element;
diff --git a/packages/mui-material/src/StepConnector/StepConnector.test.js b/packages/mui-material/src/StepConnector/StepConnector.test.js
index 8ac7a6ce9d2d5d..7b6da9d9964308 100644
--- a/packages/mui-material/src/StepConnector/StepConnector.test.js
+++ b/packages/mui-material/src/StepConnector/StepConnector.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Stepper from '@mui/material/Stepper';
 import Step from '@mui/material/Step';
 import StepConnector, { stepConnectorClasses as classes } from '@mui/material/StepConnector';
diff --git a/packages/mui-material/src/StepContent/StepContent.d.ts b/packages/mui-material/src/StepContent/StepContent.d.ts
index 60213039b3d901..91b12aab4b8059 100644
--- a/packages/mui-material/src/StepContent/StepContent.d.ts
+++ b/packages/mui-material/src/StepContent/StepContent.d.ts
@@ -53,4 +53,4 @@ export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>
  *
  * - [StepContent API](https://mui.com/material-ui/api/step-content/)
  */
-export default function StepContent(props: StepContentProps): JSX.Element;
+export default function StepContent(props: StepContentProps): React.JSX.Element;
diff --git a/packages/mui-material/src/StepContent/StepContent.test.js b/packages/mui-material/src/StepContent/StepContent.test.js
index 0033a0ff1ca6da..7be20dc45c0251 100644
--- a/packages/mui-material/src/StepContent/StepContent.test.js
+++ b/packages/mui-material/src/StepContent/StepContent.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { collapseClasses } from '@mui/material/Collapse';
 import Stepper from '@mui/material/Stepper';
 import Step from '@mui/material/Step';
diff --git a/packages/mui-material/src/StepIcon/StepIcon.d.ts b/packages/mui-material/src/StepIcon/StepIcon.d.ts
index 4f0c11140ae708..d71906a033977e 100644
--- a/packages/mui-material/src/StepIcon/StepIcon.d.ts
+++ b/packages/mui-material/src/StepIcon/StepIcon.d.ts
@@ -47,4 +47,4 @@ export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
  *
  * - [StepIcon API](https://mui.com/material-ui/api/step-icon/)
  */
-export default function StepIcon(props: StepIconProps): JSX.Element;
+export default function StepIcon(props: StepIconProps): React.JSX.Element;
diff --git a/packages/mui-material/src/StepIcon/StepIcon.test.js b/packages/mui-material/src/StepIcon/StepIcon.test.js
index bec0ddbec05ef1..1469588b5bba7c 100644
--- a/packages/mui-material/src/StepIcon/StepIcon.test.js
+++ b/packages/mui-material/src/StepIcon/StepIcon.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import StepIcon, { stepIconClasses as classes } from '@mui/material/StepIcon';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/StepLabel/StepLabel.d.ts b/packages/mui-material/src/StepLabel/StepLabel.d.ts
index c695ac48ef9fe5..f3606a5e8c7b55 100644
--- a/packages/mui-material/src/StepLabel/StepLabel.d.ts
+++ b/packages/mui-material/src/StepLabel/StepLabel.d.ts
@@ -92,7 +92,7 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * - [StepLabel API](https://mui.com/material-ui/api/step-label/)
  */
-declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & {
+declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & {
   muiName: string;
 };
 
diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js
index 912a1a2b98d578..0b63fe6a5c46c3 100644
--- a/packages/mui-material/src/StepLabel/StepLabel.test.js
+++ b/packages/mui-material/src/StepLabel/StepLabel.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography from '@mui/material/Typography';
 import Stepper from '@mui/material/Stepper';
 import Step from '@mui/material/Step';
diff --git a/packages/mui-material/src/Stepper/Stepper.test.tsx b/packages/mui-material/src/Stepper/Stepper.test.tsx
index 94ac9689272123..6556a711d9ab11 100644
--- a/packages/mui-material/src/Stepper/Stepper.test.tsx
+++ b/packages/mui-material/src/Stepper/Stepper.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Step, { StepProps, stepClasses } from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.test.js b/packages/mui-material/src/SvgIcon/SvgIcon.test.js
index b7216da509c881..77562a46200553 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.test.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import SvgIcon, { svgIconClasses as classes } from '@mui/material/SvgIcon';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index d11b9f01c4a29a..a31e311fb1e683 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { fireEvent, createRenderer, screen } from '@mui-internal/test-utils';
+import { fireEvent, createRenderer, screen } from '@mui/internal-test-utils';
 import PropTypes, { checkPropTypes } from 'prop-types';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import Drawer, { drawerClasses } from '@mui/material/Drawer';
diff --git a/packages/mui-material/src/Switch/Switch.d.ts b/packages/mui-material/src/Switch/Switch.d.ts
index e4592a27ebfd57..b57cb0aa32fa4c 100644
--- a/packages/mui-material/src/Switch/Switch.d.ts
+++ b/packages/mui-material/src/Switch/Switch.d.ts
@@ -66,4 +66,4 @@ export interface SwitchProps
  * - [Switch API](https://mui.com/material-ui/api/switch/)
  * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
  */
-export default function Switch(props: SwitchProps): JSX.Element;
+export default function Switch(props: SwitchProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Switch/Switch.test.js b/packages/mui-material/src/Switch/Switch.test.js
index 99f454cdb3006b..e35a171eeff4d7 100644
--- a/packages/mui-material/src/Switch/Switch.test.js
+++ b/packages/mui-material/src/Switch/Switch.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Switch, { switchClasses as classes } from '@mui/material/Switch';
 import FormControl from '@mui/material/FormControl';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/Tab/Tab.d.ts b/packages/mui-material/src/Tab/Tab.d.ts
index dc19a6eed31db4..f4885f67009c07 100644
--- a/packages/mui-material/src/Tab/Tab.d.ts
+++ b/packages/mui-material/src/Tab/Tab.d.ts
@@ -28,7 +28,7 @@ export interface TabOwnProps {
   /**
    * The icon to display.
    */
-  icon?: string | React.ReactElement;
+  icon?: string | React.ReactElement<any>;
   /**
    * The position of the icon relative to the label.
    * @default 'top'
diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
index fdad02650e0918..01000e2c3d6819 100644
--- a/packages/mui-material/src/Tab/Tab.test.js
+++ b/packages/mui-material/src/Tab/Tab.test.js
@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import * as React from 'react';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Tab, { tabClasses as classes } from '@mui/material/Tab';
 import ButtonBase from '@mui/material/ButtonBase';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts b/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts
index e8d396e4a49b12..e755333b88ed82 100644
--- a/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts
+++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts
@@ -75,4 +75,4 @@ export interface TabScrollButtonProps extends ButtonBaseProps {
  *
  * - [TabScrollButton API](https://mui.com/material-ui/api/tab-scroll-button/)
  */
-export default function TabScrollButton(props: TabScrollButtonProps): JSX.Element;
+export default function TabScrollButton(props: TabScrollButtonProps): React.JSX.Element;
diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
index 9ffee7fd1309e9..f27c9b3e3fe60a 100644
--- a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
+++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TabScrollButton, { tabScrollButtonClasses as classes } from '@mui/material/TabScrollButton';
 import { createSvgIcon } from '@mui/material/utils';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/Table/Table.test.js b/packages/mui-material/src/Table/Table.test.js
index 20d3c37ed581c2..5412b0a22572b9 100644
--- a/packages/mui-material/src/Table/Table.test.js
+++ b/packages/mui-material/src/Table/Table.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Table, { tableClasses as classes } from '@mui/material/Table';
 import TableContext from './TableContext';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/TableBody/TableBody.test.js b/packages/mui-material/src/TableBody/TableBody.test.js
index 8faaa00569c13c..7912ca2c8b8230 100644
--- a/packages/mui-material/src/TableBody/TableBody.test.js
+++ b/packages/mui-material/src/TableBody/TableBody.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableBody, { tableBodyClasses as classes } from '@mui/material/TableBody';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/TableCell/TableCell.d.ts b/packages/mui-material/src/TableCell/TableCell.d.ts
index a702716b8e456f..0a5de08842ca09 100644
--- a/packages/mui-material/src/TableCell/TableCell.d.ts
+++ b/packages/mui-material/src/TableCell/TableCell.d.ts
@@ -83,4 +83,4 @@ export type SortDirection = 'asc' | 'desc' | false;
  *
  * - [TableCell API](https://mui.com/material-ui/api/table-cell/)
  */
-export default function TableCell(props: TableCellProps): JSX.Element;
+export default function TableCell(props: TableCellProps): React.JSX.Element;
diff --git a/packages/mui-material/src/TableCell/TableCell.test.js b/packages/mui-material/src/TableCell/TableCell.test.js
index 427864cf0df7e7..7baee719f2bfe7 100644
--- a/packages/mui-material/src/TableCell/TableCell.test.js
+++ b/packages/mui-material/src/TableCell/TableCell.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableCell, { tableCellClasses as classes } from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
diff --git a/packages/mui-material/src/TableContainer/TableContainer.test.js b/packages/mui-material/src/TableContainer/TableContainer.test.js
index e7a4a8b978e010..981521c0cb7b71 100644
--- a/packages/mui-material/src/TableContainer/TableContainer.test.js
+++ b/packages/mui-material/src/TableContainer/TableContainer.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableContainer, { tableContainerClasses as classes } from '@mui/material/TableContainer';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/TableFooter/TableFooter.test.js b/packages/mui-material/src/TableFooter/TableFooter.test.js
index b0ffcd15d9da50..ae6b880965529f 100644
--- a/packages/mui-material/src/TableFooter/TableFooter.test.js
+++ b/packages/mui-material/src/TableFooter/TableFooter.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableFooter, { tableFooterClasses as classes } from '@mui/material/TableFooter';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/TableHead/TableHead.test.js b/packages/mui-material/src/TableHead/TableHead.test.js
index 0d898aee753bc2..54cce9737cf9b7 100644
--- a/packages/mui-material/src/TableHead/TableHead.test.js
+++ b/packages/mui-material/src/TableHead/TableHead.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableHead, { tableHeadClasses as classes } from '@mui/material/TableHead';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
index dd84205b454d2d..1293b6189b27f6 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.test.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import PropTypes from 'prop-types';
-import { fireEvent, createRenderer } from '@mui-internal/test-utils';
+import { fireEvent, createRenderer } from '@mui/internal-test-utils';
 import TableFooter from '@mui/material/TableFooter';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
diff --git a/packages/mui-material/src/TableRow/TableRow.test.js b/packages/mui-material/src/TableRow/TableRow.test.js
index 5dee6de9e0dc3e..ffab5aab8fd19a 100644
--- a/packages/mui-material/src/TableRow/TableRow.test.js
+++ b/packages/mui-material/src/TableRow/TableRow.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableRow, { tableRowClasses as classes } from '@mui/material/TableRow';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js b/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js
index 21c751ee314a42..6865b0907d7e3e 100644
--- a/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js
+++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableSortLabel, { tableSortLabelClasses as classes } from '@mui/material/TableSortLabel';
 import ButtonBase from '@mui/material/ButtonBase';
 import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.test.js b/packages/mui-material/src/Tabs/ScrollbarSize.test.js
index eb6e6899303525..45ecf406e77c50 100644
--- a/packages/mui-material/src/Tabs/ScrollbarSize.test.js
+++ b/packages/mui-material/src/Tabs/ScrollbarSize.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ScrollbarSize from './ScrollbarSize';
 
 describe('<ScrollbarSize />', () => {
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index bc3ff1e1cbb555..de3be255ec46f7 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -8,7 +8,7 @@ import {
   screen,
   strictModeDoubleLoggingSuppressed,
   waitFor,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses as classes } from '@mui/material/Tabs';
 import { svgIconClasses } from '@mui/material/SvgIcon';
@@ -46,7 +46,7 @@ function hasRightScrollButton(container) {
 
 describe('<Tabs />', () => {
   // tests mocking getBoundingClientRect prevent mocha to exit
-  const isJSDOM = navigator.userAgent === 'node.js';
+  const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
   const { clock, render, renderToString } = createRenderer();
 
diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
index 84c910a3e11599..eaa9d2ab97c03d 100644
--- a/packages/mui-material/src/TextField/TextField.d.ts
+++ b/packages/mui-material/src/TextField/TextField.d.ts
@@ -340,4 +340,4 @@ export default function TextField<Variant extends TextFieldVariants>(
      */
     variant?: Variant;
   } & Omit<TextFieldProps, 'variant'>,
-): JSX.Element;
+): React.JSX.Element;
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index 2d14112c3ddbff..fef0e80b808ea1 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import FormControl from '@mui/material/FormControl';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import MenuItem from '@mui/material/MenuItem';
diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.test.js b/packages/mui-material/src/ToggleButton/ToggleButton.test.js
index a273fdd6c80678..3e2abc61028ab5 100644
--- a/packages/mui-material/src/ToggleButton/ToggleButton.test.js
+++ b/packages/mui-material/src/ToggleButton/ToggleButton.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import ToggleButton, { toggleButtonClasses as classes } from '@mui/material/ToggleButton';
 import ButtonBase from '@mui/material/ButtonBase';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
index 2ba480dca945d4..dee8f289b5553b 100644
--- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
+++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
@@ -86,4 +86,4 @@ export interface ToggleButtonGroupProps
  *
  * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
  */
-export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;
diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js
index 385ae149f5d6a7..e72faf25cfa733 100644
--- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js
+++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import ToggleButtonGroup, {
   toggleButtonGroupClasses as classes,
 } from '@mui/material/ToggleButtonGroup';
diff --git a/packages/mui-material/src/Toolbar/Toolbar.test.js b/packages/mui-material/src/Toolbar/Toolbar.test.js
index 18e81a43afdbcd..73bfc346d80430 100644
--- a/packages/mui-material/src/Toolbar/Toolbar.test.js
+++ b/packages/mui-material/src/Toolbar/Toolbar.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Toolbar, { toolbarClasses as classes } from '@mui/material/Toolbar';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Tooltip/Tooltip.d.ts b/packages/mui-material/src/Tooltip/Tooltip.d.ts
index a6f699533ec61f..9991be721dcccc 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.d.ts
+++ b/packages/mui-material/src/Tooltip/Tooltip.d.ts
@@ -24,8 +24,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -39,8 +38,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -225,4 +223,4 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
  *
  * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
-export default function Tooltip(props: TooltipProps): JSX.Element;
+export default function Tooltip(props: TooltipProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
index 5bfe05f2d1e25e..a3115d00e0620d 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -802,8 +802,7 @@ Tooltip.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -817,8 +816,7 @@ Tooltip.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
diff --git a/packages/mui-material/src/Tooltip/Tooltip.test.js b/packages/mui-material/src/Tooltip/Tooltip.test.js
index f63ab0555bdfdb..597a2785999ac4 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.test.js
@@ -9,7 +9,7 @@ import {
   simulatePointerDevice,
   focusVisible,
   programmaticFocusTriggersFocusVisible,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { camelCase } from 'lodash/string';
 import Tooltip, { tooltipClasses as classes } from '@mui/material/Tooltip';
 import { testReset } from './Tooltip';
diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js
index 7dce4e414d9147..26dbd19f402f18 100644
--- a/packages/mui-material/src/Typography/Typography.test.js
+++ b/packages/mui-material/src/Typography/Typography.test.js
@@ -1,7 +1,7 @@
 // @ts-check
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Typography, { typographyClasses as classes } from '@mui/material/Typography';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Typography/typography.spec.tsx b/packages/mui-material/src/Typography/typography.spec.tsx
index 0ef0026b5e37d7..e5a04e944952d7 100644
--- a/packages/mui-material/src/Typography/typography.spec.tsx
+++ b/packages/mui-material/src/Typography/typography.spec.tsx
@@ -11,7 +11,7 @@ const typographyTest = () => {
     ...props
   }: TypographyProps & {
     maxLines?: number;
-  }): JSX.Element => {
+  }): React.JSX.Element => {
     return (
       <Typography
         {...props}
diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2.test.js b/packages/mui-material/src/Unstable_Grid2/Grid2.test.js
index 026320553bdd9a..cba4834e0f29f1 100644
--- a/packages/mui-material/src/Unstable_Grid2/Grid2.test.js
+++ b/packages/mui-material/src/Unstable_Grid2/Grid2.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Grid2, { grid2Classes as classes } from '@mui/material/Unstable_Grid2';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-material/src/Zoom/Zoom.d.ts b/packages/mui-material/src/Zoom/Zoom.d.ts
index dbe0e5f86e08a7..9f9620c51ba8a9 100644
--- a/packages/mui-material/src/Zoom/Zoom.d.ts
+++ b/packages/mui-material/src/Zoom/Zoom.d.ts
@@ -47,4 +47,4 @@ export interface ZoomProps extends TransitionProps {
  * - [Zoom API](https://mui.com/material-ui/api/zoom/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Zoom(props: ZoomProps): JSX.Element;
+export default function Zoom(props: ZoomProps): React.JSX.Element;
diff --git a/packages/mui-material/src/Zoom/Zoom.test.js b/packages/mui-material/src/Zoom/Zoom.test.js
index c3d272f2dd0650..d1cd69bd9d1ea4 100644
--- a/packages/mui-material/src/Zoom/Zoom.test.js
+++ b/packages/mui-material/src/Zoom/Zoom.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Transition } from 'react-transition-group';
 import Zoom from '@mui/material/Zoom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
diff --git a/packages/mui-material/src/internal/SwitchBase.test.js b/packages/mui-material/src/internal/SwitchBase.test.js
index 2a91f2a3a39085..fef9508d39395e 100644
--- a/packages/mui-material/src/internal/SwitchBase.test.js
+++ b/packages/mui-material/src/internal/SwitchBase.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import SwitchBase from './SwitchBase';
 import FormControl, { useFormControl } from '../FormControl';
 import ButtonBase from '../ButtonBase';
diff --git a/packages/mui-material/src/internal/animate.test.js b/packages/mui-material/src/internal/animate.test.js
index 48b7640fea491d..239c2c48dddfcd 100644
--- a/packages/mui-material/src/internal/animate.test.js
+++ b/packages/mui-material/src/internal/animate.test.js
@@ -6,7 +6,7 @@ describe('animate', () => {
 
   before(function beforeHook() {
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-    const isJSDOM = navigator.userAgent === 'node.js';
+    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
     if (isJSDOM || isSafari) {
       // The test fails on Safari with just:
       //
diff --git a/packages/mui-material/src/locale/index.ts b/packages/mui-material/src/locale/index.ts
index c6c494c16f96f8..21a691b2c62cfc 100644
--- a/packages/mui-material/src/locale/index.ts
+++ b/packages/mui-material/src/locale/index.ts
@@ -1007,7 +1007,7 @@ export const enUS: Localization = {
       },
       labelRowsPerPage: 'Rows per page:',
       labelDisplayedRows: ({ from, to, count }) =>
-  `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
+  `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`, 
     }},
     MuiRating: { defaultProps: {
       getLabelText: value => `${value} Star${value !== 1 ? 's' : ''}`,
@@ -3006,6 +3006,77 @@ export const plPL: Localization = {
   },
 };
 
+export const psAF: Localization = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'لاره ښکاره کړه',
+      },
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: (type) => {
+          if (type === 'first') {
+            return 'لومړۍ پاڼې ته لاړ شه';
+          }
+          if (type === 'last') {
+            return 'ورستۍ پاڼې ته لاړ شه';
+          }
+          if (type === 'next') {
+            return 'بلی پاڼې ته لاړ شه';
+          }
+          // if (type === 'previous') {
+          return 'مخکینۍ پاڼې ته لاړ شه';
+        },
+        labelRowsPerPage: 'په پاڼه کی د کرښو شمیر',
+        labelDisplayedRows: ({ from, to, count }) =>
+          `${count !== -1 ? count : `${to} زیات له`} ${to}- ${from} د`,
+      },
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: (value) => `${value} ستوری`,
+        emptyLabelText: 'خالی',
+      },
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'پاک کول',
+        closeText: 'تړل',
+        loadingText: '... لوډ کیږی',
+        noOptionsText: 'بی پایلی',
+        openText: 'خلاصول',
+      },
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'تړل',
+      },
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'د پاڼو ترتیب',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : ' ته لاړ شه'}پاڼې ${page}`;
+          }
+          if (type === 'first') {
+            return 'لومړۍ پاڼی ته لاړ شه';
+          }
+          if (type === 'last') {
+            return 'وروستۍ پاڼې ته لاړه شه';
+          }
+          if (type === 'next') {
+            return 'بلې پاڼې ته لاړ شه';
+          }
+          // if (type === 'previous') {
+          return 'مخکنۍ پاڼې ته لاړ شه';
+        },
+      },
+    },
+  },
+};
+
 export const ptBR: Localization = {
   components: {
     MuiBreadcrumbs: {
diff --git a/packages/mui-material/src/styles/CssVarsProvider.spec.tsx b/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
index 4d4c97cf7497da..ebd779e2085610 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.spec.tsx
@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  experimental_extendTheme as extendTheme,
-  Experimental_CssVarsProvider as CssVarsProvider,
-  styled,
-  useTheme,
-  Overlays,
-} from '@mui/material/styles';
+import { extendTheme, CssVarsProvider, styled, useTheme, Overlays } from '@mui/material/styles';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 
 const customTheme = extendTheme({
diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js
index 7cba05db4952b8..e77b138bf4e680 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.test.js
+++ b/packages/mui-material/src/styles/CssVarsProvider.test.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import Box from '@mui/material/Box';
-import { Experimental_CssVarsProvider as CssVarsProvider, useTheme } from '@mui/material/styles';
+import { CssVarsProvider, useTheme } from '@mui/material/styles';
 
 describe('[Material UI] CssVarsProvider', () => {
   let originalMatchmedia;
diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index e7779777a3094c..06c0ad33302fda 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -1,18 +1,12 @@
 'use client';
-// do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// @ts-ignore
 import * as React from 'react';
 import { unstable_createCssVarsProvider as createCssVarsProvider, SxProps } from '@mui/system';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
-import experimental_extendTheme, {
-  SupportedColorScheme,
-  CssVarsTheme,
-} from './experimental_extendTheme';
+import extendTheme, { SupportedColorScheme, CssVarsTheme } from './extendTheme';
 import createTypography from './createTypography';
 import THEME_ID from './identifier';
 
-const defaultTheme = experimental_extendTheme();
+const defaultTheme = extendTheme();
 
 const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
   SupportedColorScheme,
@@ -41,8 +35,23 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
   },
 });
 
-export {
-  useColorScheme,
-  getInitColorSchemeScript,
-  CssVarsProvider as Experimental_CssVarsProvider,
-};
+let warnedOnce = false;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function Experimental_CssVarsProvider(props: any) {
+  if (!warnedOnce) {
+    console.warn(
+      [
+        'MUI: The Experimental_CssVarsProvider component has been stabilized.',
+        '',
+        "You should use `import { CssVarsProvider } from '@mui/material/styles'`",
+      ].join('\n'),
+    );
+
+    warnedOnce = true;
+  }
+
+  return <CssVarsProvider {...props} />;
+}
+
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider, Experimental_CssVarsProvider };
diff --git a/packages/mui-material/src/styles/ThemeProvider.test.tsx b/packages/mui-material/src/styles/ThemeProvider.test.tsx
index 7393cf0673dcd8..0e7d7b83d0e3f5 100644
--- a/packages/mui-material/src/styles/ThemeProvider.test.tsx
+++ b/packages/mui-material/src/styles/ThemeProvider.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/material/styles';
 
 describe('ThemeProvider', () => {
diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js
index 28db852c08c2fa..03c0472c15b4a6 100644
--- a/packages/mui-material/src/styles/createTheme.test.js
+++ b/packages/mui-material/src/styles/createTheme.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { ThemeProvider, createTheme, styled } from '@mui/material/styles';
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
index 8dea1c19f7ef61..3ead445e2bd92a 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -1,452 +1,19 @@
-import deepmerge from '@mui/utils/deepmerge';
-import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
-import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
-import styleFunctionSx, {
-  unstable_defaultSxConfig as defaultSxConfig,
-} from '@mui/system/styleFunctionSx';
-
-import {
-  private_safeColorChannel as safeColorChannel,
-  private_safeAlpha as safeAlpha,
-  private_safeDarken as safeDarken,
-  private_safeLighten as safeLighten,
-  private_safeEmphasize as safeEmphasize,
-  hslToRgb,
-} from '@mui/system/colorManipulator';
-
-import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
-import createThemeWithoutVars from './createTheme';
-import getOverlayAlpha from './getOverlayAlpha';
-import defaultGetSelector from './createGetSelector';
-
-const defaultDarkOverlays = [...Array(25)].map((_, index) => {
-  if (index === 0) {
-    return undefined;
-  }
-  const overlay = getOverlayAlpha(index);
-  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
-});
-
-function assignNode(obj, keys) {
-  keys.forEach((k) => {
-    if (!obj[k]) {
-      obj[k] = {};
-    }
-  });
-}
-
-function setColor(obj, key, defaultValue) {
-  if (!obj[key] && defaultValue) {
-    obj[key] = defaultValue;
-  }
-}
-
-function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
-    return color;
-  }
-  return hslToRgb(color);
-}
-
-function setColorChannel(obj, key) {
-  if (!(`${key}Channel` in obj)) {
-    // custom channel token is not provided, generate one.
-    // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = safeColorChannel(
-      toRgb(obj[key]),
-      `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` +
-        '\n' +
-        `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`,
+import extendTheme from './extendTheme';
+
+let warnedOnce = false;
+
+export default function deprecatedExtendTheme(...args) {
+  if (!warnedOnce) {
+    console.warn(
+      [
+        'MUI: The `experimental_extendTheme` has been stabilized.',
+        '',
+        "You should use `import { extendTheme } from '@mui/material/styles'`",
+      ].join('\n'),
     );
-  }
-}
-
-function getSpacingVal(spacingInput) {
-  if (typeof spacingInput === 'number') {
-    return `${spacingInput}px`;
-  }
-  if (typeof spacingInput === 'string') {
-    return spacingInput;
-  }
-  if (typeof spacingInput === 'function') {
-    return getSpacingVal(spacingInput(1));
-  }
-  if (Array.isArray(spacingInput)) {
-    return spacingInput;
-  }
-  return '8px';
-}
 
-const silent = (fn) => {
-  try {
-    return fn();
-  } catch (error) {
-    // ignore error
+    warnedOnce = true;
   }
-  return undefined;
-};
-
-export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
-
-export default function extendTheme(options = {}, ...args) {
-  const {
-    colorSchemes: colorSchemesInput = {},
-    cssVarPrefix = 'mui',
-    shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
-    getSelector,
-    ...input
-  } = options;
-  const getCssVar = createGetCssVar(cssVarPrefix);
-
-  const { palette: lightPalette, ...muiTheme } = createThemeWithoutVars({
-    ...input,
-    ...(colorSchemesInput.light && { palette: colorSchemesInput.light?.palette }),
-  });
-  const { palette: darkPalette } = createThemeWithoutVars({
-    palette: { mode: 'dark', ...colorSchemesInput.dark?.palette },
-  });
-
-  let theme = {
-    defaultColorScheme: 'light',
-    ...muiTheme,
-    cssVarPrefix,
-    getCssVar,
-    colorSchemes: {
-      ...colorSchemesInput,
-      light: {
-        ...colorSchemesInput.light,
-        palette: lightPalette,
-        opacity: {
-          inputPlaceholder: 0.42,
-          inputUnderline: 0.42,
-          switchTrackDisabled: 0.12,
-          switchTrack: 0.38,
-          ...colorSchemesInput.light?.opacity,
-        },
-        overlays: colorSchemesInput.light?.overlays || [],
-      },
-      dark: {
-        ...colorSchemesInput.dark,
-        palette: darkPalette,
-        opacity: {
-          inputPlaceholder: 0.5,
-          inputUnderline: 0.7,
-          switchTrackDisabled: 0.2,
-          switchTrack: 0.3,
-          ...colorSchemesInput.dark?.opacity,
-        },
-        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays,
-      },
-    },
-    font: { ...prepareTypographyVars(muiTheme.typography), ...muiTheme.font },
-    spacing: getSpacingVal(input.spacing),
-  };
-
-  Object.keys(theme.colorSchemes).forEach((key) => {
-    const palette = theme.colorSchemes[key].palette;
-
-    const setCssVarColor = (cssVar) => {
-      const tokens = cssVar.split('-');
-      const color = tokens[1];
-      const colorToken = tokens[2];
-      return getCssVar(cssVar, palette[color][colorToken]);
-    };
-
-    // attach black & white channels to common node
-    if (key === 'light') {
-      setColor(palette.common, 'background', '#fff');
-      setColor(palette.common, 'onBackground', '#000');
-    } else {
-      setColor(palette.common, 'background', '#000');
-      setColor(palette.common, 'onBackground', '#fff');
-    }
-
-    // assign component variables
-    assignNode(palette, [
-      'Alert',
-      'AppBar',
-      'Avatar',
-      'Button',
-      'Chip',
-      'FilledInput',
-      'LinearProgress',
-      'Skeleton',
-      'Slider',
-      'SnackbarContent',
-      'SpeedDialAction',
-      'StepConnector',
-      'StepContent',
-      'Switch',
-      'TableCell',
-      'Tooltip',
-    ]);
-    if (key === 'light') {
-      setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', safeDarken(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
-      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
-      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
-      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
-      setColor(
-        palette.Alert,
-        'errorFilledColor',
-        silent(() => lightPalette.getContrastText(palette.error.main)),
-      );
-      setColor(
-        palette.Alert,
-        'infoFilledColor',
-        silent(() => lightPalette.getContrastText(palette.info.main)),
-      );
-      setColor(
-        palette.Alert,
-        'successFilledColor',
-        silent(() => lightPalette.getContrastText(palette.success.main)),
-      );
-      setColor(
-        palette.Alert,
-        'warningFilledColor',
-        silent(() => lightPalette.getContrastText(palette.warning.main)),
-      );
-      setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
-      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
-      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
-      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
-      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
-      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
-      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
-      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
-      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
-      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
-      setColor(
-        palette.Skeleton,
-        'bg',
-        `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`,
-      );
-      setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
-      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(
-        palette.SnackbarContent,
-        'color',
-        silent(() => lightPalette.getContrastText(snackbarContentBackground)),
-      );
-      setColor(
-        palette.SpeedDialAction,
-        'fabHoverBg',
-        safeEmphasize(palette.background.paper, 0.15),
-      );
-      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
-      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
-      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
-      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
-      setColor(palette.Switch, 'primaryDisabledColor', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
-    } else {
-      setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', safeLighten(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
-      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
-      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
-      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
-      setColor(
-        palette.Alert,
-        'errorFilledColor',
-        silent(() => darkPalette.getContrastText(palette.error.dark)),
-      );
-      setColor(
-        palette.Alert,
-        'infoFilledColor',
-        silent(() => darkPalette.getContrastText(palette.info.dark)),
-      );
-      setColor(
-        palette.Alert,
-        'successFilledColor',
-        silent(() => darkPalette.getContrastText(palette.success.dark)),
-      );
-      setColor(
-        palette.Alert,
-        'warningFilledColor',
-        silent(() => darkPalette.getContrastText(palette.warning.dark)),
-      );
-      setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', safeDarken(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-900'));
-      setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
-      setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
-      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
-      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
-      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
-      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
-      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
-      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
-      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
-      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
-      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
-      setColor(
-        palette.Skeleton,
-        'bg',
-        `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`,
-      );
-      setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
-      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(
-        palette.SnackbarContent,
-        'color',
-        silent(() => darkPalette.getContrastText(snackbarContentBackground)),
-      );
-      setColor(
-        palette.SpeedDialAction,
-        'fabHoverBg',
-        safeEmphasize(palette.background.paper, 0.15),
-      );
-      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
-      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
-      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
-      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
-      setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
-    }
-
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-
-    setColorChannel(palette, 'divider');
-
-    Object.keys(palette).forEach((color) => {
-      const colors = palette[color];
-
-      // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
-
-      if (colors && typeof colors === 'object') {
-        // Silent the error for custom palettes.
-        if (colors.main) {
-          setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
-        }
-        if (colors.light) {
-          setColor(palette[color], 'lightChannel', safeColorChannel(toRgb(colors.light)));
-        }
-        if (colors.dark) {
-          setColor(palette[color], 'darkChannel', safeColorChannel(toRgb(colors.dark)));
-        }
-        if (colors.contrastText) {
-          setColor(
-            palette[color],
-            'contrastTextChannel',
-            safeColorChannel(toRgb(colors.contrastText)),
-          );
-        }
-
-        if (color === 'text') {
-          // Text colors: text.primary, text.secondary
-          setColorChannel(palette[color], 'primary');
-          setColorChannel(palette[color], 'secondary');
-        }
-
-        if (color === 'action') {
-          // Action colors: action.active, action.selected
-          if (colors.active) {
-            setColorChannel(palette[color], 'active');
-          }
-          if (colors.selected) {
-            setColorChannel(palette[color], 'selected');
-          }
-        }
-      }
-    });
-  });
-
-  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
-
-  const parserConfig = {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar,
-    getSelector: getSelector || defaultGetSelector(theme),
-  };
-  const { vars, generateThemeVars, generateStyleSheets } = prepareCssVars(theme, parserConfig);
-  theme.attribute = 'data-mui-color-scheme';
-  theme.colorSchemeSelector = ':root';
-  theme.vars = vars;
-  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
-    theme[key] = value;
-  });
-  theme.generateThemeVars = generateThemeVars;
-  theme.generateStyleSheets = generateStyleSheets;
-  theme.generateSpacing = function generateSpacing() {
-    return createSpacing(input.spacing, createUnarySpacing(this));
-  };
-  theme.getColorSchemeSelector = (colorScheme) => `[${theme.attribute}="${colorScheme}"] &`;
-  theme.spacing = theme.generateSpacing();
-  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...input?.unstable_sxConfig,
-  };
-  theme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this,
-    });
-  };
 
-  return theme;
+  return extendTheme(...args);
 }
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/extendTheme.d.ts
similarity index 99%
rename from packages/mui-material/src/styles/experimental_extendTheme.d.ts
rename to packages/mui-material/src/styles/extendTheme.d.ts
index b82af5287cf4aa..6a01d0dae59322 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts
+++ b/packages/mui-material/src/styles/extendTheme.d.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { OverridableStringUnion } from '@mui/types';
 import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
 import { ExtractTypographyTokens } from '@mui/system/cssVars';
@@ -465,7 +464,7 @@ export interface CssVarsTheme extends ColorSystem {
  * @param args Deep merge the arguments with the about to be returned theme.
  * @returns A complete, ready-to-use theme object.
  */
-export default function experimental_extendTheme(
+export default function extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
 ): Omit<Theme, 'applyStyles'> & CssVarsTheme;
diff --git a/packages/mui-material/src/styles/extendTheme.js b/packages/mui-material/src/styles/extendTheme.js
new file mode 100644
index 00000000000000..8dea1c19f7ef61
--- /dev/null
+++ b/packages/mui-material/src/styles/extendTheme.js
@@ -0,0 +1,452 @@
+import deepmerge from '@mui/utils/deepmerge';
+import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
+import { createUnarySpacing } from '@mui/system/spacing';
+import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
+import styleFunctionSx, {
+  unstable_defaultSxConfig as defaultSxConfig,
+} from '@mui/system/styleFunctionSx';
+
+import {
+  private_safeColorChannel as safeColorChannel,
+  private_safeAlpha as safeAlpha,
+  private_safeDarken as safeDarken,
+  private_safeLighten as safeLighten,
+  private_safeEmphasize as safeEmphasize,
+  hslToRgb,
+} from '@mui/system/colorManipulator';
+
+import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
+import createThemeWithoutVars from './createTheme';
+import getOverlayAlpha from './getOverlayAlpha';
+import defaultGetSelector from './createGetSelector';
+
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
+
+function assignNode(obj, keys) {
+  keys.forEach((k) => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+
+function setColor(obj, key, defaultValue) {
+  if (!obj[key] && defaultValue) {
+    obj[key] = defaultValue;
+  }
+}
+
+function toRgb(color) {
+  if (!color || !color.startsWith('hsl')) {
+    return color;
+  }
+  return hslToRgb(color);
+}
+
+function setColorChannel(obj, key) {
+  if (!(`${key}Channel` in obj)) {
+    // custom channel token is not provided, generate one.
+    // if channel token can't be generated, show a warning.
+    obj[`${key}Channel`] = safeColorChannel(
+      toRgb(obj[key]),
+      `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` +
+        '\n' +
+        `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`,
+    );
+  }
+}
+
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === 'number') {
+    return `${spacingInput}px`;
+  }
+  if (typeof spacingInput === 'string') {
+    return spacingInput;
+  }
+  if (typeof spacingInput === 'function') {
+    return getSpacingVal(spacingInput(1));
+  }
+  if (Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return '8px';
+}
+
+const silent = (fn) => {
+  try {
+    return fn();
+  } catch (error) {
+    // ignore error
+  }
+  return undefined;
+};
+
+export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
+
+export default function extendTheme(options = {}, ...args) {
+  const {
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui',
+    shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+    getSelector,
+    ...input
+  } = options;
+  const getCssVar = createGetCssVar(cssVarPrefix);
+
+  const { palette: lightPalette, ...muiTheme } = createThemeWithoutVars({
+    ...input,
+    ...(colorSchemesInput.light && { palette: colorSchemesInput.light?.palette }),
+  });
+  const { palette: darkPalette } = createThemeWithoutVars({
+    palette: { mode: 'dark', ...colorSchemesInput.dark?.palette },
+  });
+
+  let theme = {
+    defaultColorScheme: 'light',
+    ...muiTheme,
+    cssVarPrefix,
+    getCssVar,
+    colorSchemes: {
+      ...colorSchemesInput,
+      light: {
+        ...colorSchemesInput.light,
+        palette: lightPalette,
+        opacity: {
+          inputPlaceholder: 0.42,
+          inputUnderline: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38,
+          ...colorSchemesInput.light?.opacity,
+        },
+        overlays: colorSchemesInput.light?.overlays || [],
+      },
+      dark: {
+        ...colorSchemesInput.dark,
+        palette: darkPalette,
+        opacity: {
+          inputPlaceholder: 0.5,
+          inputUnderline: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3,
+          ...colorSchemesInput.dark?.opacity,
+        },
+        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays,
+      },
+    },
+    font: { ...prepareTypographyVars(muiTheme.typography), ...muiTheme.font },
+    spacing: getSpacingVal(input.spacing),
+  };
+
+  Object.keys(theme.colorSchemes).forEach((key) => {
+    const palette = theme.colorSchemes[key].palette;
+
+    const setCssVarColor = (cssVar) => {
+      const tokens = cssVar.split('-');
+      const color = tokens[1];
+      const colorToken = tokens[2];
+      return getCssVar(cssVar, palette[color][colorToken]);
+    };
+
+    // attach black & white channels to common node
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    }
+
+    // assign component variables
+    assignNode(palette, [
+      'Alert',
+      'AppBar',
+      'Avatar',
+      'Button',
+      'Chip',
+      'FilledInput',
+      'LinearProgress',
+      'Skeleton',
+      'Slider',
+      'SnackbarContent',
+      'SpeedDialAction',
+      'StepConnector',
+      'StepContent',
+      'Switch',
+      'TableCell',
+      'Tooltip',
+    ]);
+    if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', safeDarken(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
+      setColor(
+        palette.Alert,
+        'errorFilledColor',
+        silent(() => lightPalette.getContrastText(palette.error.main)),
+      );
+      setColor(
+        palette.Alert,
+        'infoFilledColor',
+        silent(() => lightPalette.getContrastText(palette.info.main)),
+      );
+      setColor(
+        palette.Alert,
+        'successFilledColor',
+        silent(() => lightPalette.getContrastText(palette.success.main)),
+      );
+      setColor(
+        palette.Alert,
+        'warningFilledColor',
+        silent(() => lightPalette.getContrastText(palette.warning.main)),
+      );
+      setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
+      setColor(
+        palette.Skeleton,
+        'bg',
+        `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`,
+      );
+      setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
+      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(
+        palette.SnackbarContent,
+        'color',
+        silent(() => lightPalette.getContrastText(snackbarContentBackground)),
+      );
+      setColor(
+        palette.SpeedDialAction,
+        'fabHoverBg',
+        safeEmphasize(palette.background.paper, 0.15),
+      );
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
+      setColor(palette.Switch, 'primaryDisabledColor', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
+    } else {
+      setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', safeLighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
+      setColor(
+        palette.Alert,
+        'errorFilledColor',
+        silent(() => darkPalette.getContrastText(palette.error.dark)),
+      );
+      setColor(
+        palette.Alert,
+        'infoFilledColor',
+        silent(() => darkPalette.getContrastText(palette.info.dark)),
+      );
+      setColor(
+        palette.Alert,
+        'successFilledColor',
+        silent(() => darkPalette.getContrastText(palette.success.dark)),
+      );
+      setColor(
+        palette.Alert,
+        'warningFilledColor',
+        silent(() => darkPalette.getContrastText(palette.warning.dark)),
+      );
+      setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', safeDarken(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
+      setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', safeDarken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
+      setColor(
+        palette.Skeleton,
+        'bg',
+        `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`,
+      );
+      setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
+      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(
+        palette.SnackbarContent,
+        'color',
+        silent(() => darkPalette.getContrastText(snackbarContentBackground)),
+      );
+      setColor(
+        palette.SpeedDialAction,
+        'fabHoverBg',
+        safeEmphasize(palette.background.paper, 0.15),
+      );
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
+      setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
+    }
+
+    // MUI X - DataGrid needs this token.
+    setColorChannel(palette.background, 'default');
+
+    // added for consistency with the `background.default` token
+    setColorChannel(palette.background, 'paper');
+
+    setColorChannel(palette.common, 'background');
+    setColorChannel(palette.common, 'onBackground');
+
+    setColorChannel(palette, 'divider');
+
+    Object.keys(palette).forEach((color) => {
+      const colors = palette[color];
+
+      // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
+
+      if (colors && typeof colors === 'object') {
+        // Silent the error for custom palettes.
+        if (colors.main) {
+          setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
+        }
+        if (colors.light) {
+          setColor(palette[color], 'lightChannel', safeColorChannel(toRgb(colors.light)));
+        }
+        if (colors.dark) {
+          setColor(palette[color], 'darkChannel', safeColorChannel(toRgb(colors.dark)));
+        }
+        if (colors.contrastText) {
+          setColor(
+            palette[color],
+            'contrastTextChannel',
+            safeColorChannel(toRgb(colors.contrastText)),
+          );
+        }
+
+        if (color === 'text') {
+          // Text colors: text.primary, text.secondary
+          setColorChannel(palette[color], 'primary');
+          setColorChannel(palette[color], 'secondary');
+        }
+
+        if (color === 'action') {
+          // Action colors: action.active, action.selected
+          if (colors.active) {
+            setColorChannel(palette[color], 'active');
+          }
+          if (colors.selected) {
+            setColorChannel(palette[color], 'selected');
+          }
+        }
+      }
+    });
+  });
+
+  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+
+  const parserConfig = {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar,
+    getSelector: getSelector || defaultGetSelector(theme),
+  };
+  const { vars, generateThemeVars, generateStyleSheets } = prepareCssVars(theme, parserConfig);
+  theme.attribute = 'data-mui-color-scheme';
+  theme.colorSchemeSelector = ':root';
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    theme[key] = value;
+  });
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
+    return createSpacing(input.spacing, createUnarySpacing(this));
+  };
+  theme.getColorSchemeSelector = (colorScheme) => `[${theme.attribute}="${colorScheme}"] &`;
+  theme.spacing = theme.generateSpacing();
+  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
+  theme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...input?.unstable_sxConfig,
+  };
+  theme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this,
+    });
+  };
+
+  return theme;
+}
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.spec.ts b/packages/mui-material/src/styles/extendTheme.spec.ts
similarity index 86%
rename from packages/mui-material/src/styles/experimental_extendTheme.spec.ts
rename to packages/mui-material/src/styles/extendTheme.spec.ts
index 96e6b8b89b5256..ae8722c899c93b 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.spec.ts
+++ b/packages/mui-material/src/styles/extendTheme.spec.ts
@@ -1,4 +1,4 @@
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
 
 const theme = extendTheme();
 
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js
similarity index 98%
rename from packages/mui-material/src/styles/experimental_extendTheme.test.js
rename to packages/mui-material/src/styles/extendTheme.test.js
index 601dc385562a73..f2ac5fa8dc9502 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.test.js
+++ b/packages/mui-material/src/styles/extendTheme.test.js
@@ -1,15 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Button from '@mui/material/Button';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-  styled,
-} from '@mui/material/styles';
+import { CssVarsProvider, extendTheme, styled } from '@mui/material/styles';
 import { deepOrange, green } from '@mui/material/colors';
 
-describe('experimental_extendTheme', () => {
+describe('extendTheme', () => {
   let originalMatchmedia;
   const { render } = createRenderer();
   const storage = {};
diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
index 234aed07d592ce..8db9015025569e 100644
--- a/packages/mui-material/src/styles/index.d.ts
+++ b/packages/mui-material/src/styles/index.d.ts
@@ -99,7 +99,7 @@ export { default as withTheme } from './withTheme';
 
 export * from './CssVarsProvider';
 
-export { default as experimental_extendTheme } from './experimental_extendTheme';
+export { default as extendTheme } from './extendTheme';
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,
@@ -132,7 +132,7 @@ export type {
   ThemeCssVar,
   ThemeCssVarOverrides,
   ColorSystemOptions,
-} from './experimental_extendTheme';
+} from './extendTheme';
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
 
diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js
index 42e3a789b6c13c..82a05b20ac68e6 100644
--- a/packages/mui-material/src/styles/index.js
+++ b/packages/mui-material/src/styles/index.js
@@ -45,7 +45,8 @@ export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
 export * from './CssVarsProvider';
-export { default as experimental_extendTheme } from './experimental_extendTheme';
+export { default as extendTheme } from './extendTheme';
+export { default as experimental_extendTheme } from './experimental_extendTheme'; // TODO: Remove in v7
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
 
diff --git a/packages/mui-material/src/styles/responsiveFontSizes.js b/packages/mui-material/src/styles/responsiveFontSizes.js
index fe0a5a6eda7d4f..e01b0a3e186c5c 100644
--- a/packages/mui-material/src/styles/responsiveFontSizes.js
+++ b/packages/mui-material/src/styles/responsiveFontSizes.js
@@ -34,6 +34,11 @@ export default function responsiveFontSizes(themeInput, options = {}) {
 
   variants.forEach((variant) => {
     const style = typography[variant];
+
+    if (!style) {
+      return;
+    }
+
     const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
 
     if (remFontSize <= 1) {
diff --git a/packages/mui-material/src/styles/responsiveFontSizes.test.js b/packages/mui-material/src/styles/responsiveFontSizes.test.js
index 2383c2ecddd6c2..bf7da7e0d2a9ef 100644
--- a/packages/mui-material/src/styles/responsiveFontSizes.test.js
+++ b/packages/mui-material/src/styles/responsiveFontSizes.test.js
@@ -59,6 +59,19 @@ describe('responsiveFontSizes', () => {
     });
   });
 
+  it('should handle variants that have been reset to undefined', () => {
+    const theme = createTheme({
+      typography: {
+        h1: undefined,
+      },
+    });
+    const { typography } = responsiveFontSizes(theme, {
+      disableAlign: true,
+    });
+
+    expect(typography.h1).to.deep.equal(undefined);
+  });
+
   describe('when requesting a responsive typography with non unitless line height and alignment', () => {
     it('should throw an error, as this is not supported', () => {
       const theme = createTheme({
diff --git a/packages/mui-material/src/styles/styled.test.js b/packages/mui-material/src/styles/styled.test.js
index 3402325b32f36d..b547370b18f569 100644
--- a/packages/mui-material/src/styles/styled.test.js
+++ b/packages/mui-material/src/styles/styled.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import createTheme from './createTheme';
 import styled from './styled';
 import ThemeProvider from './ThemeProvider';
diff --git a/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts
index b34facddabf5d9..06f66f75d2088a 100644
--- a/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts
+++ b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts
@@ -6,7 +6,7 @@ import type {
   PaletteColorChannel,
   PaletteTextChannel,
   PaletteActionChannel,
-} from '../styles/experimental_extendTheme';
+} from '../styles/extendTheme';
 
 /**
  * Enhance the theme types to include new properties from the CssVarsProvider.
diff --git a/packages/mui-material/src/types/OverridableComponentAugmentation.ts b/packages/mui-material/src/types/OverridableComponentAugmentation.ts
index e3b9d08664e56f..f7f3bb22765d8b 100644
--- a/packages/mui-material/src/types/OverridableComponentAugmentation.ts
+++ b/packages/mui-material/src/types/OverridableComponentAugmentation.ts
@@ -16,8 +16,8 @@ declare module '@mui/material/OverridableComponent' {
          */
         component: DefaultComponent;
       } & OverridePropsVer2<TypeMap, DefaultComponent>,
-    ): JSX.Element;
-    (props: DefaultComponentPropsVer2<TypeMap>): JSX.Element;
+    ): React.JSX.Element;
+    (props: DefaultComponentPropsVer2<TypeMap>): React.JSX.Element;
   }
 
   /**
diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js
index ec3c5d8c8f4d1a..cc76df77055a75 100644
--- a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js
+++ b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js
@@ -6,7 +6,7 @@ import {
   screen,
   RenderCounter,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import mediaQuery from 'css-mediaquery';
 import { expect } from 'chai';
 import { stub } from 'sinon';
diff --git a/packages/mui-material/src/usePagination/usePagination.test.js b/packages/mui-material/src/usePagination/usePagination.test.js
index 993c0c157670c8..6c90a0cc415662 100644
--- a/packages/mui-material/src/usePagination/usePagination.test.js
+++ b/packages/mui-material/src/usePagination/usePagination.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import usePagination from '@mui/material/usePagination';
 
diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
index 664ac0894181d2..95b1aaa3f28151 100644
--- a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
+++ b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
-import { act, createRenderer, RenderCounter, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, RenderCounter, screen } from '@mui/internal-test-utils';
 import useScrollTrigger from '@mui/material/useScrollTrigger';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
diff --git a/packages/mui-material/src/utils/useSlot.test.tsx b/packages/mui-material/src/utils/useSlot.test.tsx
index 7aab3a0233e590..7c542ef4c60c6d 100644
--- a/packages/mui-material/src/utils/useSlot.test.tsx
+++ b/packages/mui-material/src/utils/useSlot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '../styles';
 import { SlotProps } from './types';
diff --git a/packages/mui-material/test/describeConformance.ts b/packages/mui-material/test/describeConformance.ts
index 633cf72e03ebbe..62213f84d1e951 100644
--- a/packages/mui-material/test/describeConformance.ts
+++ b/packages/mui-material/test/describeConformance.ts
@@ -1,11 +1,11 @@
 import {
   describeConformance as baseDescribeConformance,
   ConformanceOptions,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 export default function describeConformance(
-  minimalElement: React.ReactElement,
+  minimalElement: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   function getOptionsWithDefaults() {
diff --git a/packages/mui-material/test/integration/DialogIntegration.test.js b/packages/mui-material/test/integration/DialogIntegration.test.js
index aa0a013092dec2..c42a680d68798e 100644
--- a/packages/mui-material/test/integration/DialogIntegration.test.js
+++ b/packages/mui-material/test/integration/DialogIntegration.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 
diff --git a/packages/mui-material/test/integration/Menu.test.js b/packages/mui-material/test/integration/Menu.test.js
index 77f6e6542b9cc7..754034805fad5f 100644
--- a/packages/mui-material/test/integration/Menu.test.js
+++ b/packages/mui-material/test/integration/Menu.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import Button from '@mui/material/Button';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
diff --git a/packages/mui-material/test/integration/MenuList.test.js b/packages/mui-material/test/integration/MenuList.test.js
index ec2a3dc9535f81..a2ea6e3af6710c 100644
--- a/packages/mui-material/test/integration/MenuList.test.js
+++ b/packages/mui-material/test/integration/MenuList.test.js
@@ -7,7 +7,7 @@ import {
   fireEvent,
   screen,
   programmaticFocusTriggersFocusVisible,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
diff --git a/packages/mui-material/test/integration/NestedMenu.test.js b/packages/mui-material/test/integration/NestedMenu.test.js
index 066971cbbab5f3..befe7f5b677347 100644
--- a/packages/mui-material/test/integration/NestedMenu.test.js
+++ b/packages/mui-material/test/integration/NestedMenu.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, within } from '@mui-internal/test-utils';
+import { createRenderer, within } from '@mui/internal-test-utils';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
diff --git a/packages/mui-material/test/integration/PopperChildrenLayout.test.js b/packages/mui-material/test/integration/PopperChildrenLayout.test.js
index f5ad0e4ef7fd04..507ad32719ea8e 100644
--- a/packages/mui-material/test/integration/PopperChildrenLayout.test.js
+++ b/packages/mui-material/test/integration/PopperChildrenLayout.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Collapse from '@mui/material/Collapse';
 import Fade from '@mui/material/Fade';
 import Grow from '@mui/material/Grow';
diff --git a/packages/mui-material/test/integration/Select.test.js b/packages/mui-material/test/integration/Select.test.js
index e9f31d3ef5981a..356e115806624b 100644
--- a/packages/mui-material/test/integration/Select.test.js
+++ b/packages/mui-material/test/integration/Select.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import Dialog from '@mui/material/Dialog';
diff --git a/packages/mui-material/test/integration/TableCell.test.js b/packages/mui-material/test/integration/TableCell.test.js
index 17438f10e3a913..65d04a3ec10f71 100644
--- a/packages/mui-material/test/integration/TableCell.test.js
+++ b/packages/mui-material/test/integration/TableCell.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableCell, { tableCellClasses as classes } from '@mui/material/TableCell';
 import Table from '@mui/material/Table';
 import TableFooter from '@mui/material/TableFooter';
diff --git a/packages/mui-material/test/integration/TableRow.test.js b/packages/mui-material/test/integration/TableRow.test.js
index dafad88ead09cf..a59391f973e5ce 100644
--- a/packages/mui-material/test/integration/TableRow.test.js
+++ b/packages/mui-material/test/integration/TableRow.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import TableFooter from '@mui/material/TableFooter';
 import TableHead from '@mui/material/TableHead';
 import TableRow, { tableRowClasses as classes } from '@mui/material/TableRow';
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.spec.tsx
index 7c319f041a45a1..b6a26ebfc464ba 100644
--- a/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.spec.tsx
+++ b/packages/mui-material/test/typescript/moduleAugmentation/themeCssVariables.spec.tsx
@@ -1,5 +1,5 @@
 // testing docs/src/pages/customization/theme-components/theme-components.md
-import { styled, experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { styled, extendTheme } from '@mui/material/styles';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 
 declare module '@mui/material/styles' {
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/themeGetCssVar.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/themeGetCssVar.spec.tsx
index 96c53215f78be1..8690b12518c372 100644
--- a/packages/mui-material/test/typescript/moduleAugmentation/themeGetCssVar.spec.tsx
+++ b/packages/mui-material/test/typescript/moduleAugmentation/themeGetCssVar.spec.tsx
@@ -1,4 +1,4 @@
-import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 
 declare module '@mui/material/styles' {
diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json
index 5aaea93a6ba4ab..a5fc76431f7219 100644
--- a/packages/mui-private-theming/package.json
+++ b/packages/mui-private-theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/private-theming",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-alpha.9",
   "private": false,
   "author": "MUI Team",
   "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.",
@@ -37,12 +37,12 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/utils": "workspace:^",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/types": "workspace:^",
     "@types/chai": "^4.3.16",
     "@types/react": "^18.2.55",
diff --git a/packages/mui-private-theming/src/ThemeProvider/ThemeProvider.test.js b/packages/mui-private-theming/src/ThemeProvider/ThemeProvider.test.js
index 2ad69ef6db96d8..82ea191c13e33b 100644
--- a/packages/mui-private-theming/src/ThemeProvider/ThemeProvider.test.js
+++ b/packages/mui-private-theming/src/ThemeProvider/ThemeProvider.test.js
@@ -4,7 +4,7 @@ import {
   createRenderer,
   RenderCounter,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import useTheme from '../useTheme';
 import ThemeProvider from './ThemeProvider';
 
diff --git a/packages/mui-private-theming/src/useTheme/useTheme.test.js b/packages/mui-private-theming/src/useTheme/useTheme.test.js
index 77c28631d0aa8e..14cfdcb748d950 100644
--- a/packages/mui-private-theming/src/useTheme/useTheme.test.js
+++ b/packages/mui-private-theming/src/useTheme/useTheme.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import useTheme from './useTheme';
 import ThemeProvider from '../ThemeProvider';
 
diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json
index 518d19a65a450f..1869d77e76224f 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.24",
+  "version": "6.0.0-alpha.25",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",
@@ -37,13 +37,13 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "csstype": "^3.1.3",
     "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/styled-engine-sc": "workspace:*",
     "@types/chai": "^4.3.16",
     "@types/hoist-non-react-statics": "^3.3.5",
diff --git a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts
index 6e46a0722a27e1..0c2ef1cd47e33f 100644
--- a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts
+++ b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.d.ts
@@ -8,4 +8,4 @@ export interface GlobalStylesProps<Theme extends object = {}> {
 
 export default function Global<Theme extends object = {}>(
   props: GlobalStylesProps<Theme>,
-): React.ReactElement;
+): React.ReactElement<any>;
diff --git a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx
index a87926dad34aac..f253f453661a40 100644
--- a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx
+++ b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.spec.tsx
@@ -25,7 +25,7 @@ export interface GlobalStylesProps {
   styles: SCGlobalStylesProps<Theme>['styles'];
 }
 
-function GlobalStyles(props: GlobalStylesProps): React.ReactElement {
+function GlobalStyles(props: GlobalStylesProps): React.ReactElement<any> {
   return <SCGlobalStyles {...props} defaultTheme={defaultTheme} />;
 }
 
diff --git a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.test.js b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.test.js
index a5c48b4d8cfd44..85f44f455476d0 100644
--- a/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.test.js
+++ b/packages/mui-styled-engine-sc/src/GlobalStyles/GlobalStyles.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from 'styled-components';
 import styled from '..';
 import GlobalStyles from './GlobalStyles';
diff --git a/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.d.ts b/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.d.ts
index 64288e446205fd..267542a1f6be31 100644
--- a/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.d.ts
+++ b/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.d.ts
@@ -5,4 +5,4 @@ export interface StyledEngineProviderProps {
   injectFirst?: boolean;
 }
 
-export default function StyledEngineProvider(props: StyledEngineProviderProps): JSX.Element;
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;
diff --git a/packages/mui-styled-engine-sc/src/index.d.ts b/packages/mui-styled-engine-sc/src/index.d.ts
index ea46672d21563a..994c02c99c3c28 100644
--- a/packages/mui-styled-engine-sc/src/index.d.ts
+++ b/packages/mui-styled-engine-sc/src/index.d.ts
@@ -23,7 +23,7 @@ type Defaultize<P, D> = P extends any
         Partial<PickU<D, Exclude<keyof D, keyof P>>>
   : never;
 
-export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
+export type IntrinsicElementsKeys = keyof React.JSX.IntrinsicElements;
 type ReactDefaultizedProps<C, P> = C extends { defaultProps: infer D } ? Defaultize<P, D> : P;
 
 type MakeAttrsOptional<
@@ -156,7 +156,7 @@ type StyledComponentPropsWithAs<
 };
 
 export type StyledComponent<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   T extends object = {},
   O extends object = {},
   A extends keyof any = never,
@@ -217,7 +217,7 @@ export interface StyledComponentBase<
     O & StyledComponentInnerOtherProps<WithC>,
     A | StyledComponentInnerAttrs<WithC>
   >;
-  withComponent<WithC extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
+  withComponent<WithC extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>>(
     component: WithC,
   ): StyledComponent<WithC, T, O, A>;
 }
@@ -232,18 +232,18 @@ type StyledComponentInterpolation =
 type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
 
 type ThemedStyledComponentFactories<T extends object> = {
-  [TTag in keyof JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;
+  [TTag in keyof React.JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T>;
 };
 
 export type StyledComponentPropsWithRef<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
 > = C extends AnyStyledComponent
   ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>>
   : React.ComponentPropsWithRef<C>;
 
 // Same as in styled-components, but copied here so that it would use the Interpolation & CSS typings from above
 export interface ThemedStyledFunctionBase<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   T extends object,
   O extends object = {},
   A extends keyof any = never,
@@ -267,7 +267,7 @@ export interface ThemedStyledFunctionBase<
 
 // same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
 export interface ThemedStyledFunction<
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
   T extends object,
   O extends object = {},
   A extends keyof any = never,
@@ -348,22 +348,24 @@ export interface ThemedBaseStyledInterface<
   ): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
 
   <
-    Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag],
+    Tag extends keyof React.JSX.IntrinsicElements,
+    ForwardedProps extends
+      keyof React.JSX.IntrinsicElements[Tag] = keyof React.JSX.IntrinsicElements[Tag],
   >(
     tag: Tag,
-    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions,
+    options: FilteringStyledOptions<React.JSX.IntrinsicElements[Tag], ForwardedProps> &
+      MuiStyledOptions,
   ): CreateStyledComponent<
     MUIStyledCommonProps,
-    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>,
+    Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>,
     {},
     Theme
   >;
 
-  <Tag extends keyof JSX.IntrinsicElements>(
+  <Tag extends keyof React.JSX.IntrinsicElements>(
     tag: Tag,
     options?: StyledConfig<MUIStyledCommonProps> & MuiStyledOptions,
-  ): CreateStyledComponent<MUIStyledCommonProps, JSX.IntrinsicElements[Tag], {}, Theme>;
+  ): CreateStyledComponent<MUIStyledCommonProps, React.JSX.IntrinsicElements[Tag], {}, Theme>;
 }
 
 export type CreateMUIStyled<
@@ -372,8 +374,9 @@ export type CreateMUIStyled<
   T extends object = {},
 > = ThemedBaseStyledInterface<MUIStyledCommonProps, MuiStyledOptions, AnyIfEmpty<T>>;
 
-export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
-  JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
+export type PropsOf<
+  C extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+> = React.JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
 
 export interface MUIStyledComponent<
   ComponentProps extends {},
@@ -386,7 +389,7 @@ export interface MUIStyledComponent<
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C,
   ): MUIStyledComponent<ComponentProps & PropsOf<C>>;
-  withComponent<Tag extends keyof JSX.IntrinsicElements>(
+  withComponent<Tag extends keyof React.JSX.IntrinsicElements>(
     tag: Tag,
-  ): MUIStyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>;
+  ): MUIStyledComponent<ComponentProps, React.JSX.IntrinsicElements[Tag]>;
 }
diff --git a/packages/mui-styled-engine-sc/src/styled.test.js b/packages/mui-styled-engine-sc/src/styled.test.js
index 22d16ba1fe1bf7..11c0c75da7c578 100644
--- a/packages/mui-styled-engine-sc/src/styled.test.js
+++ b/packages/mui-styled-engine-sc/src/styled.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import styled from '@mui/styled-engine-sc';
 
 describe('styled', () => {
diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json
index 3352b89017750e..d1d845b9c26131 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.8",
+  "version": "6.0.0-alpha.9",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",
@@ -37,7 +37,7 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@emotion/cache": "^11.11.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1"
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/styled-engine": "workspace:*",
     "@types/chai": "^4.3.16",
     "@types/react": "^18.2.55",
diff --git a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts
index 41b379c3214083..e746c3036a3a62 100644
--- a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts
+++ b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.d.ts
@@ -8,4 +8,4 @@ export interface GlobalStylesProps<Theme = {}> {
 
 export default function GlobalStyles<Theme = {}>(
   props: GlobalStylesProps<Theme>,
-): React.ReactElement;
+): React.ReactElement<any>;
diff --git a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx
index 2420e7ea060d97..13b34d7f29b019 100644
--- a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx
+++ b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.spec.tsx
@@ -25,7 +25,7 @@ export interface GlobalStylesProps {
   styles: EmGlobalStylesProps<Theme>['styles'];
 }
 
-function GlobalStyles(props: GlobalStylesProps): React.ReactElement {
+function GlobalStyles(props: GlobalStylesProps): React.ReactElement<any> {
   return <EmGlobalStyles {...props} defaultTheme={defaultTheme} />;
 }
 
diff --git a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.test.js b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.test.js
index 8febe0855b8ded..500a5dfdfce657 100644
--- a/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.test.js
+++ b/packages/mui-styled-engine/src/GlobalStyles/GlobalStyles.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@emotion/react';
 import styled from '..';
 import GlobalStyles from './GlobalStyles';
diff --git a/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.d.ts b/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.d.ts
index 64288e446205fd..267542a1f6be31 100644
--- a/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.d.ts
+++ b/packages/mui-styled-engine/src/StyledEngineProvider/StyledEngineProvider.d.ts
@@ -5,4 +5,4 @@ export interface StyledEngineProviderProps {
   injectFirst?: boolean;
 }
 
-export default function StyledEngineProvider(props: StyledEngineProviderProps): JSX.Element;
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;
diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts
index 4bc50bc1452bda..d0df929ca95554 100644
--- a/packages/mui-styled-engine/src/index.d.ts
+++ b/packages/mui-styled-engine/src/index.d.ts
@@ -200,20 +200,22 @@ export interface CreateMUIStyled<
   ): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
 
   <
-    Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag],
+    Tag extends keyof React.JSX.IntrinsicElements,
+    ForwardedProps extends
+      keyof React.JSX.IntrinsicElements[Tag] = keyof React.JSX.IntrinsicElements[Tag],
   >(
     tag: Tag,
-    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions,
+    options: FilteringStyledOptions<React.JSX.IntrinsicElements[Tag], ForwardedProps> &
+      MuiStyledOptions,
   ): CreateStyledComponent<
     MUIStyledCommonProps,
-    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>,
+    Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>,
     {},
     Theme
   >;
 
-  <Tag extends keyof JSX.IntrinsicElements>(
+  <Tag extends keyof React.JSX.IntrinsicElements>(
     tag: Tag,
     options?: StyledOptions<MUIStyledCommonProps> & MuiStyledOptions,
-  ): CreateStyledComponent<MUIStyledCommonProps, JSX.IntrinsicElements[Tag], {}, Theme>;
+  ): CreateStyledComponent<MUIStyledCommonProps, React.JSX.IntrinsicElements[Tag], {}, Theme>;
 }
diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json
index 9604b904c32b87..00e155da7dfb26 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.8",
+  "version": "6.0.0-alpha.9",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.",
@@ -37,7 +37,7 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@emotion/hash": "^0.9.1",
     "@mui/private-theming": "workspace:^",
     "@mui/types": "workspace:^",
@@ -56,16 +56,16 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/material": "workspace:^",
     "@types/chai": "^4.3.16",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
diff --git a/packages/mui-styles/src/ServerStyleSheets/ServerStyleSheets.d.ts b/packages/mui-styles/src/ServerStyleSheets/ServerStyleSheets.d.ts
index 84617671784509..24ec50839ed00a 100644
--- a/packages/mui-styles/src/ServerStyleSheets/ServerStyleSheets.d.ts
+++ b/packages/mui-styles/src/ServerStyleSheets/ServerStyleSheets.d.ts
@@ -5,7 +5,7 @@ declare class ServerStyleSheets {
   constructor(options?: object);
   collect(children: React.ReactNode, options?: object): React.ReactElement<StylesProviderProps>;
   toString(): string;
-  getStyleElement(props?: object): React.ReactElement;
+  getStyleElement(props?: object): React.ReactElement<any>;
 }
 
 export default ServerStyleSheets;
diff --git a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
index 0c9945949a95ce..50ea3ac6303ca0 100644
--- a/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
+++ b/packages/mui-styles/src/StylesProvider/StylesProvider.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import { expect } from 'chai';
 import { create, SheetsRegistry } from 'jss';
-import { createMount, strictModeDoubleLoggingSuppressed } from '@mui-internal/test-utils';
+import { createMount, strictModeDoubleLoggingSuppressed } from '@mui/internal-test-utils';
 import StylesProvider, { StylesContext } from './StylesProvider';
 import makeStyles from '../makeStyles';
 import createGenerateClassName from '../createGenerateClassName';
diff --git a/packages/mui-styles/src/ThemeProvider/ThemeProvider.test.js b/packages/mui-styles/src/ThemeProvider/ThemeProvider.test.js
index 862ed5ffc1de7f..7544f22d9e771d 100644
--- a/packages/mui-styles/src/ThemeProvider/ThemeProvider.test.js
+++ b/packages/mui-styles/src/ThemeProvider/ThemeProvider.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import ThemeProvider from '@mui/private-theming/ThemeProvider';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import makeStyles from '../makeStyles';
 
 describe('ThemeProvider', () => {
diff --git a/packages/mui-styles/src/makeStyles/makeStyles.test.js b/packages/mui-styles/src/makeStyles/makeStyles.test.js
index 7cddc8825c46d3..a4b49a82628da6 100644
--- a/packages/mui-styles/src/makeStyles/makeStyles.test.js
+++ b/packages/mui-styles/src/makeStyles/makeStyles.test.js
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SheetsRegistry } from 'jss';
 import { act } from 'react-dom/test-utils';
-import { createMount } from '@mui-internal/test-utils';
+import { createMount } from '@mui/internal-test-utils';
 import { createTheme } from '@mui/material/styles';
 import createGenerateClassName from '../createGenerateClassName';
 import makeStyles from './makeStyles';
diff --git a/packages/mui-styles/src/styled/styled.d.ts b/packages/mui-styles/src/styled/styled.d.ts
index 7e3666e301b576..f0d15df8f4dff6 100644
--- a/packages/mui-styles/src/styled/styled.d.ts
+++ b/packages/mui-styles/src/styled/styled.d.ts
@@ -23,7 +23,7 @@ export type ComponentCreator<Component extends React.ElementType> = <
   options?: WithStylesOptions<Theme>,
 ) => StyledComponent<
   DistributiveOmit<
-    JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
+    React.JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
     'classes' | 'className'
   > &
     StyledComponentProps<'root'> &
diff --git a/packages/mui-styles/src/styled/styled.test.js b/packages/mui-styles/src/styled/styled.test.js
index ab34d9c4406612..2648eb2b42f5a1 100644
--- a/packages/mui-styles/src/styled/styled.test.js
+++ b/packages/mui-styles/src/styled/styled.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
 import { SheetsRegistry } from 'jss';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { createGenerateClassName } from '@mui/styles';
 import styled from './styled';
 import StylesProvider from '../StylesProvider';
diff --git a/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js b/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js
index 5773f098072cc2..e2e86feab67305 100644
--- a/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js
+++ b/packages/mui-styles/src/useThemeVariants/useThemeVariants.test.js
@@ -4,7 +4,7 @@ import {
   createRenderer,
   screen,
   strictModeDoubleLoggingSuppressed,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { createTheme } from '@mui/material/styles';
 import ThemeProvider from '../ThemeProvider';
 import useThemeVariants from './useThemeVariants';
diff --git a/packages/mui-styles/src/withStyles/withStyles.test.js b/packages/mui-styles/src/withStyles/withStyles.test.js
index f739276ae56d0d..04976f540d0998 100644
--- a/packages/mui-styles/src/withStyles/withStyles.test.js
+++ b/packages/mui-styles/src/withStyles/withStyles.test.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { stub } from 'sinon';
 import { SheetsRegistry } from 'jss';
 import Input from '@mui/material/Input';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { isMuiElement } from '@mui/material/utils';
 import { createTheme } from '@mui/material/styles';
 import StylesProvider from '../StylesProvider';
diff --git a/packages/mui-styles/src/withTheme/withTheme.d.ts b/packages/mui-styles/src/withTheme/withTheme.d.ts
index e211c3e54086ae..82d1f8f1b473fc 100644
--- a/packages/mui-styles/src/withTheme/withTheme.d.ts
+++ b/packages/mui-styles/src/withTheme/withTheme.d.ts
@@ -25,7 +25,7 @@ export default function withTheme<
   component: C,
 ): React.JSXElementConstructor<
   DistributiveOmit<
-    JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>,
+    React.JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>,
     keyof WithTheme<Theme>
   > &
     Partial<WithTheme<Theme>> &
diff --git a/packages/mui-styles/src/withTheme/withTheme.test.js b/packages/mui-styles/src/withTheme/withTheme.test.js
index 44a200075daf2d..ca7c6cc0bb71fb 100644
--- a/packages/mui-styles/src/withTheme/withTheme.test.js
+++ b/packages/mui-styles/src/withTheme/withTheme.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Input from '@mui/material/Input';
 import { isMuiElement } from '@mui/material/utils';
 import PropTypes from 'prop-types';
diff --git a/packages/mui-styles/test/styles.spec.tsx b/packages/mui-styles/test/styles.spec.tsx
index 2b68e4278ccf56..8ed6a1d215f263 100644
--- a/packages/mui-styles/test/styles.spec.tsx
+++ b/packages/mui-styles/test/styles.spec.tsx
@@ -215,7 +215,7 @@ withStyles((theme) =>
     });
 
   interface ListItemContentProps extends WithStyles<typeof styles> {
-    children?: React.ReactElement;
+    children?: React.ReactElement<any>;
     inset?: boolean;
     row?: boolean;
   }
diff --git a/packages/mui-styles/test/theme-scoping.test.tsx b/packages/mui-styles/test/theme-scoping.test.tsx
index d5c862dacccdf0..2820deb0f12229 100644
--- a/packages/mui-styles/test/theme-scoping.test.tsx
+++ b/packages/mui-styles/test/theme-scoping.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import * as material from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
index b849eed3501a0b..9496c1bd99135c 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.8",
+  "version": "6.0.0-alpha.9",
   "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.",
@@ -39,7 +39,7 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/private-theming": "workspace:^",
     "@mui/styled-engine": "workspace:^",
     "@mui/types": "workspace:^",
@@ -51,18 +51,18 @@
   "devDependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/internal-babel-macros": "workspace:^",
     "@mui/system": "workspace:*",
     "@types/chai": "^4.3.16",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.2.55",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
-    "sinon": "^15.2.0",
+    "sinon": "^16.1.3",
     "styled-components": "^6.1.11"
   },
   "peerDependencies": {
diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js
index 07874d991f1df8..227b6c6955e737 100644
--- a/packages/mui-system/src/Box/Box.test.js
+++ b/packages/mui-system/src/Box/Box.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable material-ui/no-empty-box */
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Box, ThemeProvider, boxClasses as classes } from '@mui/system';
 import createTheme from '@mui/system/createTheme';
 import describeConformance from '../../test/describeConformance';
diff --git a/packages/mui-system/src/Container/Container.test.js b/packages/mui-system/src/Container/Container.test.js
index 50c6909983142c..65330142857a8f 100644
--- a/packages/mui-system/src/Container/Container.test.js
+++ b/packages/mui-system/src/Container/Container.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { Container, containerClasses as classes } from '@mui/system';
 import describeConformance from '../../test/describeConformance';
 
diff --git a/packages/mui-system/src/GlobalStyles/GlobalStyles.test.tsx b/packages/mui-system/src/GlobalStyles/GlobalStyles.test.tsx
index 17178436fcdee9..fe6ddf9a043bad 100644
--- a/packages/mui-system/src/GlobalStyles/GlobalStyles.test.tsx
+++ b/packages/mui-system/src/GlobalStyles/GlobalStyles.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { GlobalStyles } from '@mui/system';
 
 describe('<GlobalStyles />', () => {
diff --git a/packages/mui-system/src/Stack/Stack.test.js b/packages/mui-system/src/Stack/Stack.test.js
index 85649885796bb0..c4e8453b8db6c7 100644
--- a/packages/mui-system/src/Stack/Stack.test.js
+++ b/packages/mui-system/src/Stack/Stack.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import Stack from '@mui/system/Stack';
 import createTheme from '@mui/system/createTheme';
 import { style } from './createStack';
diff --git a/packages/mui-system/src/Stack/createStack.tsx b/packages/mui-system/src/Stack/createStack.tsx
index 840163c4e20799..0f1f9659ebb952 100644
--- a/packages/mui-system/src/Stack/createStack.tsx
+++ b/packages/mui-system/src/Stack/createStack.tsx
@@ -50,7 +50,7 @@ function useThemePropsDefault<T extends {}>(props: T) {
  * > joinChildren([1,2,3], 0)
  * [1,0,2,0,3]
  */
-function joinChildren(children: React.ReactNode, separator: React.ReactElement) {
+function joinChildren(children: React.ReactNode, separator: React.ReactElement<any>) {
   const childrenArray = React.Children.toArray(children).filter(Boolean);
 
   return childrenArray.reduce<React.ReactNode[]>((output, child, index) => {
@@ -209,7 +209,7 @@ export default function createStack(
         className={clsx(classes.root, className)}
         {...other}
       >
-        {divider ? joinChildren(children, divider as React.ReactElement) : children}
+        {divider ? joinChildren(children, divider as React.ReactElement<any>) : children}
       </StackRoot>
     );
   }) as OverridableComponent<StackTypeMap>;
diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js
index f6eccf9e8dd104..1a94ed307073e5 100644
--- a/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js
+++ b/packages/mui-system/src/ThemeProvider/ThemeProvider.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { useTheme as usePrivateTheme } from '@mui/private-theming';
 import { ThemeContext } from '@mui/styled-engine';
 import { ThemeProvider } from '@mui/system';
diff --git a/packages/mui-system/src/Unstable_Grid/Grid.test.js b/packages/mui-system/src/Unstable_Grid/Grid.test.js
index 7657b793721842..15b3a6b8855258 100644
--- a/packages/mui-system/src/Unstable_Grid/Grid.test.js
+++ b/packages/mui-system/src/Unstable_Grid/Grid.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/system';
 import createTheme from '@mui/system/createTheme';
 import Grid, { gridClasses as classes } from '@mui/system/Unstable_Grid';
diff --git a/packages/mui-system/src/Unstable_Grid/createGrid.tsx b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
index 092185ae30fcb1..e0984a90dd7f23 100644
--- a/packages/mui-system/src/Unstable_Grid/createGrid.tsx
+++ b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
@@ -166,7 +166,7 @@ export default function createGrid(
         {React.Children.map(children, (child) => {
           if (React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
             return React.cloneElement(child, {
-              unstable_level: child.props.unstable_level ?? level + 1,
+              unstable_level: (child.props as any).unstable_level ?? level + 1,
             } as GridProps);
           }
           return child;
diff --git a/packages/mui-system/src/createBox/createBox.test.js b/packages/mui-system/src/createBox/createBox.test.js
index 12449e27112b5a..3fd42652173215 100644
--- a/packages/mui-system/src/createBox/createBox.test.js
+++ b/packages/mui-system/src/createBox/createBox.test.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { createBox, ThemeProvider } from '@mui/system';
 
 describe('createBox', () => {
diff --git a/packages/mui-system/src/createStyled/createStyled.js b/packages/mui-system/src/createStyled/createStyled.js
index 3c01934e020172..5e7a5f6f1adf5d 100644
--- a/packages/mui-system/src/createStyled/createStyled.js
+++ b/packages/mui-system/src/createStyled/createStyled.js
@@ -56,6 +56,8 @@ function processStyleArg(callableStyle, { ownerState, ...props }) {
     );
   }
 
+  const mergedState = { ...props, ...ownerState, ownerState };
+
   if (
     !!resolvedStylesArg &&
     typeof resolvedStylesArg === 'object' &&
@@ -66,7 +68,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) {
     variants.forEach((variant) => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props({ ownerState, ...props, ...ownerState });
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach((key) => {
           if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -79,9 +81,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) {
           result = [result];
         }
         result.push(
-          typeof variant.style === 'function'
-            ? variant.style({ ownerState, ...props, ...ownerState })
-            : variant.style,
+          typeof variant.style === 'function' ? variant.style(mergedState) : variant.style,
         );
       }
     });
diff --git a/packages/mui-system/src/createTheme/applyStyles.ts b/packages/mui-system/src/createTheme/applyStyles.ts
index d0278951b7a822..b24b674bc25590 100644
--- a/packages/mui-system/src/createTheme/applyStyles.ts
+++ b/packages/mui-system/src/createTheme/applyStyles.ts
@@ -8,7 +8,7 @@ export interface ApplyStyles<K extends string> {
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.
diff --git a/packages/mui-system/src/createTheme/createTheme.test.js b/packages/mui-system/src/createTheme/createTheme.test.js
index 934e3ee1f87eb9..f61d382625f914 100644
--- a/packages/mui-system/src/createTheme/createTheme.test.js
+++ b/packages/mui-system/src/createTheme/createTheme.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { styled, ThemeProvider } from '@mui/system';
 
 import createTheme from '@mui/system/createTheme';
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
index b8dc3ff9a2d703..2e8e398d6dadb8 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -90,7 +90,7 @@ export interface CreateCssVarsProviderResult<
         disableStyleSheetGeneration?: boolean;
       }
     >,
-  ) => React.ReactElement;
+  ) => React.ReactElement<any>;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
index f359e2a93e3bb4..e86df5cebb9198 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, screen, fireEvent } from '@mui-internal/test-utils';
+import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import createCssVarsTheme from './createCssVarsTheme';
 import createCssVarsProvider, { DISABLE_CSS_TRANSITION } from './createCssVarsProvider';
 import { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js b/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
index 9bc4c50d8c306f..f886c21dae8a9a 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
+++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-eval */
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import getInitColorSchemeScript, {
   DEFAULT_ATTRIBUTE,
   DEFAULT_MODE_STORAGE_KEY,
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
index 0c0fedd5f7e6ed..f9237da7338962 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer, fireEvent, act, screen } from '@mui-internal/test-utils';
+import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
 import {
   DEFAULT_MODE_STORAGE_KEY,
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
diff --git a/packages/mui-system/src/styled/styled.test.js b/packages/mui-system/src/styled/styled.test.js
index 31a8b178dfc52f..6168428e7fb755 100644
--- a/packages/mui-system/src/styled/styled.test.js
+++ b/packages/mui-system/src/styled/styled.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { styled, ThemeProvider } from '@mui/system';
 
 import createTheme from '@mui/system/createTheme';
diff --git a/packages/mui-system/test/describeConformance.ts b/packages/mui-system/test/describeConformance.ts
index 85ce541f937df4..f642f1973c18cb 100644
--- a/packages/mui-system/test/describeConformance.ts
+++ b/packages/mui-system/test/describeConformance.ts
@@ -1,11 +1,11 @@
 import {
   describeConformance as baseDescribeConformance,
   ConformanceOptions,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/system';
 
 export default function describeConformance(
-  minimalElement: React.ReactElement,
+  minimalElement: React.ReactElement<any>,
   getOptions: () => ConformanceOptions,
 ) {
   function getOptionsWithDefaults() {
diff --git a/packages/mui-types/OverridableComponentAugmentation.ts b/packages/mui-types/OverridableComponentAugmentation.ts
index aa50ed447020f4..4c735e21896bbb 100644
--- a/packages/mui-types/OverridableComponentAugmentation.ts
+++ b/packages/mui-types/OverridableComponentAugmentation.ts
@@ -15,8 +15,8 @@ declare module '@mui/types' {
          */
         component: C;
       } & OverridePropsVer2<M, C>,
-    ): JSX.Element;
-    (props: DefaultComponentPropsVer2<M>): JSX.Element;
+    ): React.JSX.Element;
+    (props: DefaultComponentPropsVer2<M>): React.JSX.Element;
     propTypes?: any;
   }
 
diff --git a/packages/mui-types/index.d.ts b/packages/mui-types/index.d.ts
index 64daa8cb6bb7bc..7988996932d6be 100644
--- a/packages/mui-types/index.d.ts
+++ b/packages/mui-types/index.d.ts
@@ -27,7 +27,10 @@ export type PropInjector<InjectedProps, AdditionalProps = {}> = <
 >(
   component: C,
 ) => React.JSXElementConstructor<
-  DistributiveOmit<JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>, keyof InjectedProps> &
+  DistributiveOmit<
+    React.JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>,
+    keyof InjectedProps
+  > &
     AdditionalProps
 >;
 
@@ -101,8 +104,8 @@ export interface OverridableComponent<M extends OverridableTypeMap> {
        */
       component: C;
     } & OverrideProps<M, C>,
-  ): JSX.Element | null;
-  (props: DefaultComponentProps<M>): JSX.Element | null;
+  ): React.JSX.Element | null;
+  (props: DefaultComponentProps<M>): React.JSX.Element | null;
   propTypes?: any;
 }
 
diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json
index 9330b0604095ec..327add1b96f9c0 100644
--- a/packages/mui-utils/package.json
+++ b/packages/mui-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-alpha.9",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
@@ -38,13 +38,13 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@types/prop-types": "^15.7.12",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/internal-babel-macros": "workspace:^",
     "@mui/types": "workspace:^",
     "@types/chai": "^4.3.16",
@@ -53,11 +53,11 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
diff --git a/packages/mui-utils/src/deepmerge/deepmerge.test.ts b/packages/mui-utils/src/deepmerge/deepmerge.test.ts
index db39f72df32499..9cb09790761553 100644
--- a/packages/mui-utils/src/deepmerge/deepmerge.test.ts
+++ b/packages/mui-utils/src/deepmerge/deepmerge.test.ts
@@ -4,11 +4,59 @@ import deepmerge from './deepmerge';
 
 describe('deepmerge', () => {
   // https://snyk.io/blog/after-three-years-of-silence-a-new-jquery-prototype-pollution-vulnerability-emerges-once-again/
-  it('should not be subject to prototype pollution', () => {
-    deepmerge({}, JSON.parse('{ "myProperty": "a", "__proto__" : { "isAdmin" : true } }'), {
-      clone: false,
-    });
+  it('should not be subject to prototype pollution via __proto__', () => {
+    const result = deepmerge(
+      {},
+      JSON.parse('{ "myProperty": "a", "__proto__" : { "isAdmin" : true } }'),
+      {
+        clone: false,
+      },
+    );
+
+    // @ts-expect-error __proto__ is not on this object type
+    // eslint-disable-next-line no-proto
+    expect(result.__proto__).to.have.property('isAdmin');
+    expect({}).not.to.have.property('isAdmin');
+  });
+
+  // https://cwe.mitre.org/data/definitions/915.html
+  it('should not be subject to prototype pollution via constructor', () => {
+    const result = deepmerge(
+      {},
+      JSON.parse('{ "myProperty": "a", "constructor" : { "prototype": { "isAdmin" : true } } }'),
+      {
+        clone: true,
+      },
+    );
+
+    expect(result.constructor.prototype).to.have.property('isAdmin');
+    expect({}).not.to.have.property('isAdmin');
+  });
+
+  // https://cwe.mitre.org/data/definitions/915.html
+  it('should not be subject to prototype pollution via prototype', () => {
+    const result = deepmerge(
+      {},
+      JSON.parse('{ "myProperty": "a", "prototype": { "isAdmin" : true } }'),
+      {
+        clone: false,
+      },
+    );
+
+    // @ts-expect-error prototype is not on this object type
+    expect(result.prototype).to.have.property('isAdmin');
+    expect({}).not.to.have.property('isAdmin');
+  });
+
+  it('should appropriately copy the fields without prototype pollution', () => {
+    const result = deepmerge(
+      {},
+      JSON.parse('{ "myProperty": "a", "__proto__" : { "isAdmin" : true } }'),
+    );
 
+    // @ts-expect-error __proto__ is not on this object type
+    // eslint-disable-next-line no-proto
+    expect(result.__proto__).to.have.property('isAdmin');
     expect({}).not.to.have.property('isAdmin');
   });
 
diff --git a/packages/mui-utils/src/deepmerge/deepmerge.ts b/packages/mui-utils/src/deepmerge/deepmerge.ts
index a8035a0c470177..e04e90a7851d7e 100644
--- a/packages/mui-utils/src/deepmerge/deepmerge.ts
+++ b/packages/mui-utils/src/deepmerge/deepmerge.ts
@@ -41,12 +41,12 @@ export default function deepmerge<T>(
 
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach((key) => {
-      // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+      if (
+        isPlainObject(source[key]) &&
+        // Avoid prototype pollution
+        Object.prototype.hasOwnProperty.call(target, key) &&
+        isPlainObject(target[key])
+      ) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
         (output as Record<keyof any, unknown>)[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {
diff --git a/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts b/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts
index 6a2d5912347563..ea1132e5fc32ba 100644
--- a/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts
+++ b/packages/mui-utils/src/getValidReactChildren/getValidReactChildren.ts
@@ -9,5 +9,5 @@ import * as React from 'react';
 export default function getValidReactChildren(children: React.ReactNode) {
   return React.Children.toArray(children).filter((child) =>
     React.isValidElement(child),
-  ) as React.ReactElement[];
+  ) as React.ReactElement<any>[];
 }
diff --git a/packages/mui-utils/src/useControlled/useControlled.test.js b/packages/mui-utils/src/useControlled/useControlled.test.js
index 7319349f7343bb..2763d011779826 100644
--- a/packages/mui-utils/src/useControlled/useControlled.test.js
+++ b/packages/mui-utils/src/useControlled/useControlled.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer } from '@mui-internal/test-utils';
+import { act, createRenderer } from '@mui/internal-test-utils';
 import useControlled from './useControlled';
 
 const TestComponent = ({ value: valueProp, defaultValue, children }) => {
diff --git a/packages/mui-utils/src/useForkRef/useForkRef.test.js b/packages/mui-utils/src/useForkRef/useForkRef.test.js
index 57a7290a635b48..a3228602508fae 100644
--- a/packages/mui-utils/src/useForkRef/useForkRef.test.js
+++ b/packages/mui-utils/src/useForkRef/useForkRef.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import useForkRef from './useForkRef';
 
 describe('useForkRef', () => {
diff --git a/packages/mui-utils/src/useId/useId.test.js b/packages/mui-utils/src/useId/useId.test.js
index 2d74f5eb00008a..7a545ac2d5fac7 100644
--- a/packages/mui-utils/src/useId/useId.test.js
+++ b/packages/mui-utils/src/useId/useId.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen } from '@mui-internal/test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import useId from './useId';
 
 describe('useId', () => {
diff --git a/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js b/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js
index 1fa1f8ec7d60ca..d0c9350a1e0ad8 100644
--- a/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js
+++ b/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js
@@ -7,7 +7,7 @@ import {
   focusVisible,
   simulatePointerDevice,
   programmaticFocusTriggersFocusVisible,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import useIsFocusVisible, { teardown as teardownFocusVisible } from './useIsFocusVisible';
 import useForkRef from '../useForkRef';
 
diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md
index 463f9d5c5ab6d9..6ba0e05680e4f7 100644
--- a/packages/pigment-css-react/README.md
+++ b/packages/pigment-css-react/README.md
@@ -1,3 +1,3 @@
 # Pigment CSS
 
-The package has moved [here](https://github.com/mui/pigment-css).
+The package has moved to [mui/pigment-css](https://github.com/mui/pigment-css).
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
deleted file mode 100644
index 913446e25397bd..00000000000000
--- a/packages/test-utils/package.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "name": "@mui-internal/test-utils",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "typescript": "tsc -p tsconfig.json"
-  },
-  "main": "src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./init": "./src/init.js",
-    "./initMatchers": "./src/initMatchers.ts",
-    "./initPlaywrightMatchers": "./src/initPlaywrightMatchers.ts",
-    "./KarmaReporterReactProfiler": "./src/KarmaReporterReactProfiler.js",
-    "./setupBabel": "./src/setupBabel.js",
-    "./setupBabelPlaywright": "./src/setupBabelPlaywright.js",
-    "./setupJSDOM": "./src/setupJSDOM.js",
-    "./setupKarma": "./src/setupKarma.js"
-  },
-  "dependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/register": "^7.23.7",
-    "@babel/runtime": "^7.24.5",
-    "@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.3.1",
-    "chai": "^4.4.1",
-    "chai-dom": "^1.12.0",
-    "dom-accessibility-api": "^0.6.3",
-    "enzyme": "^3.11.0",
-    "format-util": "^1.0.5",
-    "fs-extra": "^11.2.0",
-    "jsdom": "^24.0.0",
-    "lodash": "^4.17.21",
-    "mocha": "^10.4.0",
-    "playwright": "^1.44.0",
-    "prop-types": "^15.8.1",
-    "react-test-renderer": "^18.2.0",
-    "sinon": "^15.2.0"
-  },
-  "devDependencies": {
-    "@types/chai": "^4.3.16",
-    "@types/chai-dom": "^1.11.3",
-    "@types/enzyme": "^3.10.18",
-    "@types/format-util": "^1.0.4",
-    "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-test-renderer": "^18.3.0",
-    "@types/sinon": "^10.0.20",
-    "typescript": "^5.4.5"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
-}
diff --git a/packages/test-utils/tsconfig.json b/packages/test-utils/tsconfig.json
deleted file mode 100644
index 9a0c365b532095..00000000000000
--- a/packages/test-utils/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "noEmit": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules"]
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94cc158703ec82..9671cb6b2de620 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,14 +5,14 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  '@babel/core': ^7.24.5
-  '@babel/code-frame': ^7.24.2
-  '@babel/plugin-transform-runtime': ^7.24.3
-  '@babel/preset-env': ^7.24.5
-  '@babel/preset-react': ^7.24.1
-  '@babel/preset-typescript': ^7.24.1
-  '@babel/runtime': ^7.24.5
-  '@babel/types': ^7.24.5
+  '@babel/core': ^7.24.6
+  '@babel/code-frame': ^7.24.6
+  '@babel/plugin-transform-runtime': ^7.24.6
+  '@babel/preset-env': ^7.24.6
+  '@babel/preset-react': ^7.24.6
+  '@babel/preset-typescript': ^7.24.6
+  '@babel/runtime': ^7.24.6
+  '@babel/types': ^7.24.6
   '@definitelytyped/header-parser': ^0.2.9
   '@definitelytyped/typescript-versions': ^0.1.1
   '@definitelytyped/utils': ^0.1.6
@@ -26,8 +26,8 @@ importers:
   .:
     dependencies:
       '@googleapis/sheets':
-        specifier: ^5.0.5
-        version: 5.0.5
+        specifier: ^7.0.0
+        version: 7.0.0
       '@netlify/functions':
         specifier: ^2.7.0
         version: 2.7.0(@opentelemetry/api@1.8.0)
@@ -45,32 +45,32 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0
       '@babel/cli':
-        specifier: ^7.24.5
-        version: 7.24.5(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/core':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/node':
-        specifier: ^7.23.9
-        version: 7.23.9(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/plugin-transform-react-constant-elements':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/plugin-transform-runtime':
-        specifier: ^7.24.3
-        version: 7.24.3(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/preset-env':
-        specifier: ^7.24.5
-        version: 7.24.5(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/preset-react':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/register':
-        specifier: ^7.23.7
-        version: 7.23.7(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@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)
@@ -80,15 +80,15 @@ importers:
       '@mui-internal/api-docs-builder-core':
         specifier: workspace:^
         version: link:packages/api-docs-builder-core
-      '@mui-internal/test-utils':
-        specifier: workspace:^
-        version: link:packages/test-utils
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:packages-internal/docs-utils
       '@mui/internal-scripts':
         specifier: workspace:^
         version: link:packages-internal/scripts
+      '@mui/internal-test-utils':
+        specifier: workspace:^
+        version: link:packages-internal/test-utils
       '@mui/joy':
         specifier: workspace:*
         version: link:packages/mui-joy/build
@@ -108,8 +108,8 @@ importers:
         specifier: ^0.0.10
         version: 0.0.10(@types/react@18.2.55)(react@18.2.0)
       '@playwright/test':
-        specifier: 1.44.0
-        version: 1.44.0
+        specifier: 1.44.1
+        version: 1.44.1
       '@types/enzyme':
         specifier: ^3.10.18
         version: 3.10.18
@@ -125,9 +125,6 @@ importers:
       '@types/node':
         specifier: ^18.19.33
         version: 18.19.33
-      '@types/prettier':
-        specifier: ^2.7.3
-        version: 2.7.3
       '@types/react':
         specifier: 18.2.55
         version: 18.2.55
@@ -142,7 +139,7 @@ importers:
         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.5)(webpack@5.91.0)
+        version: 9.1.3(@babel/core@7.24.6)(webpack@5.91.0)
       babel-plugin-istanbul:
         specifier: ^6.1.1
         version: 6.1.1
@@ -177,8 +174,8 @@ importers:
         specifier: ^7.0.3
         version: 7.0.3
       danger:
-        specifier: ^11.3.1
-        version: 11.3.1
+        specifier: ^12.3.0
+        version: 12.3.0
       enzyme:
         specifier: ^3.11.0
         version: 3.11.0
@@ -192,8 +189,8 @@ importers:
         specifier: ^15.0.0
         version: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0)
       eslint-config-airbnb-typescript:
-        specifier: ^17.1.0
-        version: 17.1.0(@typescript-eslint/eslint-plugin@6.21.0)(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
+        specifier: ^18.0.0
+        version: 18.0.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)
@@ -276,8 +273,8 @@ importers:
         specifier: ^15.1.0
         version: 15.1.0
       piscina:
-        specifier: ^4.4.0
-        version: 4.4.0
+        specifier: ^4.5.1
+        version: 4.5.1
       postcss-styled-syntax:
         specifier: ^0.6.4
         version: 0.6.4(postcss@8.4.38)
@@ -309,8 +306,8 @@ importers:
         specifier: ^5.3.10
         version: 5.3.10(webpack@5.91.0)
       tsx:
-        specifier: ^4.10.5
-        version: 4.10.5
+        specifier: ^4.11.0
+        version: 4.11.0
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -367,7 +364,7 @@ importers:
         version: link:../local-ui-lib
       next:
         specifier: latest
-        version: 14.2.3(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 14.2.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.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
@@ -440,11 +437,11 @@ importers:
         version: 6.23.1(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@babel/preset-react':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@pigment-css/vite-plugin':
         specifier: ^0.0.9
         version: 0.0.9(@types/react@18.2.55)(react@18.2.0)(vite@5.2.11)
@@ -455,8 +452,8 @@ importers:
         specifier: 18.3.0
         version: 18.3.0
       '@vitejs/plugin-react':
-        specifier: ^4.2.1
-        version: 4.2.1(vite@5.2.11)
+        specifier: ^4.3.0
+        version: 4.3.0(vite@5.2.11)
       postcss:
         specifier: ^8.4.38
         version: 8.4.38
@@ -512,8 +509,8 @@ importers:
         specifier: ^10.10.0
         version: 10.10.0
       playwright:
-        specifier: ^1.44.0
-        version: 1.44.0
+        specifier: ^1.44.1
+        version: 1.44.1
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -554,14 +551,14 @@ importers:
   docs:
     dependencies:
       '@babel/core':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/runtime-corejs2':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@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)
@@ -584,8 +581,8 @@ importers:
         specifier: ^6.5.2
         version: 6.5.2
       '@fortawesome/react-fontawesome':
-        specifier: ^0.2.1
-        version: 0.2.1(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.2.0)
+        specifier: ^0.2.2
+        version: 0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.2.0)
       '@mui/base':
         specifier: workspace:*
         version: link:../packages/mui-base/build
@@ -626,32 +623,32 @@ importers:
         specifier: workspace:^
         version: link:../packages/mui-utils/build
       '@mui/x-charts':
-        specifier: 7.4.0
-        version: 7.4.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)
+        specifier: 7.5.1
+        version: 7.5.1(@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':
-        specifier: 7.4.0
-        version: 7.4.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)
+        specifier: 7.5.1
+        version: 7.5.1(@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.4.0
-        version: 7.4.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)
+        specifier: 7.5.1
+        version: 7.5.1(@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.4.0
-        version: 7.4.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)
+        specifier: 7.5.1
+        version: 7.5.1(@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.4.0
-        version: 7.4.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)
+        specifier: 7.5.1
+        version: 7.5.1(@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: 7.4.0
-        version: 7.4.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+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: 7.5.1
+        version: 7.5.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-date-pickers-pro':
-        specifier: 7.4.0
-        version: 7.4.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+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: 7.5.1
+        version: 7.5.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
       '@mui/x-license':
-        specifier: 7.2.0
-        version: 7.2.0(@types/react@18.2.55)(react@18.2.0)
+        specifier: 7.2.1
+        version: 7.2.1(@types/react@18.2.55)(react@18.2.0)
       '@mui/x-tree-view':
-        specifier: 7.4.0
-        version: 7.4.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)
+        specifier: 7.5.1
+        version: 7.5.1(@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)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -700,6 +697,9 @@ importers:
       date-fns-jalali:
         specifier: ^2.21.3-1
         version: 2.21.3-1
+      dayjs:
+        specifier: ^1.11.10
+        version: 1.11.10
       feed:
         specifier: ^4.2.2
         version: 4.2.2
@@ -737,11 +737,11 @@ importers:
         specifier: ^7.4.7
         version: 7.4.7(react@18.2.0)
       material-ui-popup-state:
-        specifier: ^5.1.1
-        version: 5.1.1(@mui/material@packages+mui-material+build)(react@18.2.0)
+        specifier: ^5.1.2
+        version: 5.1.2(@mui/material@packages+mui-material+build)(react@18.2.0)
       next:
         specifier: ^13.5.1
-        version: 13.5.1(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 13.5.1(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(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)
@@ -770,8 +770,8 @@ importers:
         specifier: ^6.5.9
         version: 6.5.9(final-form@4.20.10)(react@18.2.0)
       react-imask:
-        specifier: ^7.6.0
-        version: 7.6.0(react@18.2.0)
+        specifier: ^7.6.1
+        version: 7.6.1(react@18.2.0)
       react-intersection-observer:
         specifier: ^9.10.2
         version: 9.10.2(react-dom@18.2.0)(react@18.2.0)
@@ -796,15 +796,12 @@ importers:
       react-swipeable-views:
         specifier: ^0.14.0
         version: 0.14.0(react@18.2.0)
-      react-swipeable-views-utils:
-        specifier: ^0.14.0
-        version: 0.14.0(react@18.2.0)
       react-transition-group:
         specifier: ^4.4.5
         version: 4.4.5(react-dom@18.2.0)(react@18.2.0)
       react-virtuoso:
-        specifier: ^4.7.10
-        version: 4.7.10(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^4.7.11
+        version: 4.7.11(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)
@@ -828,20 +825,20 @@ importers:
         version: 4.10.2
     devDependencies:
       '@babel/plugin-transform-react-constant-elements':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
-      '@mui-internal/test-utils':
-        specifier: workspace:^
-        version: link:../packages/test-utils
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:../packages-internal/docs-utils
       '@mui/internal-scripts':
         specifier: workspace:^
         version: link:../packages-internal/scripts
+      '@mui/internal-test-utils':
+        specifier: workspace:^
+        version: link:../packages-internal/test-utils
       '@types/autosuggest-highlight':
         specifier: ^3.2.3
         version: 3.2.3
@@ -869,9 +866,6 @@ importers:
       '@types/react-swipeable-views':
         specifier: ^0.13.5
         version: 0.13.5
-      '@types/react-swipeable-views-utils':
-        specifier: ^0.13.7
-        version: 0.13.7
       '@types/react-transition-group':
         specifier: ^4.4.10
         version: 4.4.10
@@ -894,8 +888,8 @@ importers:
         specifier: ^5.1.2
         version: 5.1.2
       playwright:
-        specifier: ^1.44.0
-        version: 1.44.0
+        specifier: ^1.44.1
+        version: 1.44.1
       prettier:
         specifier: ^3.2.5
         version: 3.2.5
@@ -918,20 +912,20 @@ importers:
   packages-internal/scripts:
     dependencies:
       '@babel/core':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/plugin-syntax-class-properties':
         specifier: ^7.12.13
-        version: 7.12.13(@babel/core@7.24.5)
+        version: 7.12.13(@babel/core@7.24.6)
       '@babel/plugin-syntax-jsx':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/plugin-syntax-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/types':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:../docs-utils
@@ -949,8 +943,8 @@ importers:
         version: 9.0.1
     devDependencies:
       '@babel/register':
-        specifier: ^7.23.7
-        version: 7.23.7(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@types/babel__core':
         specifier: ^7.20.5
         version: 7.20.5
@@ -966,9 +960,6 @@ importers:
       '@types/node':
         specifier: ^18.19.33
         version: 18.19.33
-      '@types/prettier':
-        specifier: ^2.7.3
-        version: 2.7.3
       '@types/react':
         specifier: 18.2.55
         version: 18.2.55
@@ -988,17 +979,123 @@ importers:
         specifier: ^5.0.7
         version: 5.0.7
 
+  packages-internal/test-utils:
+    dependencies:
+      '@babel/plugin-transform-modules-commonjs':
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
+      '@babel/preset-typescript':
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
+      '@babel/register':
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
+      '@babel/runtime':
+        specifier: ^7.24.6
+        version: 7.24.6
+      '@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: ^10.1.0
+        version: 10.1.0
+      '@testing-library/react':
+        specifier: ^15.0.7
+        version: 15.0.7(@types/react@18.2.55)(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.4.0
+        version: 10.4.0
+      playwright:
+        specifier: ^1.44.1
+        version: 1.44.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: ^16.1.3
+        version: 16.1.3
+    devDependencies:
+      '@types/chai':
+        specifier: ^4.3.16
+        version: 4.3.16
+      '@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.12
+        version: 15.7.12
+      '@types/react':
+        specifier: 18.2.55
+        version: 18.2.55
+      '@types/react-dom':
+        specifier: 18.3.0
+        version: 18.3.0
+      '@types/react-test-renderer':
+        specifier: ^18.3.0
+        version: 18.3.0
+      '@types/sinon':
+        specifier: ^17.0.3
+        version: 17.0.3
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+
   packages/api-docs-builder:
     dependencies:
       '@babel/core':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
+        specifier: ^7.24.6
+        version: 7.24.6(@babel/core@7.24.6)
       '@babel/traverse':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@mui/internal-docs-utils':
         specifier: workspace:^
         version: link:../../packages-internal/docs-utils
@@ -1043,8 +1140,8 @@ importers:
         specifier: ^7.20.5
         version: 7.20.5
       '@types/babel__traverse':
-        specifier: ^7.20.5
-        version: 7.20.5
+        specifier: ^7.20.6
+        version: 7.20.6
       '@types/chai':
         specifier: ^4.3.16
         version: 4.3.16
@@ -1064,14 +1161,14 @@ importers:
         specifier: workspace:*
         version: link:../react-docgen-types
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
 
   packages/api-docs-builder-core:
     dependencies:
@@ -1098,14 +1195,14 @@ importers:
         specifier: ^18.19.33
         version: 18.19.33
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -1136,8 +1233,8 @@ importers:
         version: 9.0.1
     optionalDependencies:
       aws-sdk:
-        specifier: ^2.1623.0
-        version: 2.1623.0
+        specifier: ^2.1628.0
+        version: 2.1628.0
     devDependencies:
       claudia:
         specifier: ^5.14.1
@@ -1146,8 +1243,8 @@ importers:
   packages/markdown:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -1168,11 +1265,11 @@ importers:
   packages/mui-babel-macros:
     dependencies:
       '@babel/helper-module-imports':
-        specifier: ^7.24.3
-        version: 7.24.3
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@mui/utils':
         specifier: ^5.0.0
         version: 5.15.14(@types/react@18.2.55)(react@18.2.0)
@@ -1197,7 +1294,7 @@ importers:
         version: 18.19.33
       babel-plugin-tester:
         specifier: ^11.0.4
-        version: 11.0.4(@babel/core@7.24.5)
+        version: 11.0.4(@babel/core@7.24.6)
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1205,11 +1302,11 @@ importers:
   packages/mui-base:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@floating-ui/react-dom':
-        specifier: ^2.0.8
-        version: 2.0.8(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^2.1.0
+        version: 2.1.0(react-dom@18.2.0)(react@18.2.0)
       '@mui/types':
         specifier: workspace:^
         version: link:../mui-types/build
@@ -1226,18 +1323,18 @@ importers:
         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
+      '@mui/internal-test-utils':
+        specifier: workspace:^
+        version: link:../../packages-internal/test-utils
       '@testing-library/react':
-        specifier: ^14.3.1
-        version: 14.3.1(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^15.0.7
+        version: 15.0.7(@types/react@18.2.55)(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)
+        version: 14.5.2(@testing-library/dom@10.1.0)
       '@types/chai':
         specifier: ^4.3.16
         version: 4.3.16
@@ -1251,8 +1348,8 @@ importers:
         specifier: 18.3.0
         version: 18.3.0
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1269,24 +1366,24 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
     publishDirectory: build
 
   packages/mui-codemod:
     dependencies:
       '@babel/core':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@babel/traverse':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       jscodeshift:
         specifier: ^0.15.2
-        version: 0.15.2(@babel/preset-env@7.24.5)
+        version: 0.15.2(@babel/preset-env@7.24.6)
       jscodeshift-add-imports:
         specifier: ^1.0.10
         version: 1.0.10(jscodeshift@0.15.2)
@@ -1317,8 +1414,8 @@ importers:
   packages/mui-docs:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@mui/base':
         specifier: '*'
         version: link:../mui-base/build
@@ -1358,7 +1455,7 @@ importers:
         version: 18.2.55
       next:
         specifier: ^13.5.1
-        version: 13.5.1(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 13.5.1(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1411,8 +1508,8 @@ importers:
   packages/mui-icons-material:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
     devDependencies:
       '@mui/icons-material':
         specifier: workspace:*
@@ -1470,8 +1567,8 @@ importers:
   packages/mui-joy:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@emotion/react':
         specifier: ^11.5.0
         version: 11.11.4(@types/react@18.2.55)(react@18.2.0)
@@ -1500,9 +1597,9 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
     devDependencies:
-      '@mui-internal/test-utils':
+      '@mui/internal-test-utils':
         specifier: workspace:^
-        version: link:../test-utils
+        version: link:../../packages-internal/test-utils
       '@mui/material':
         specifier: workspace:^
         version: link:../mui-material/build
@@ -1519,8 +1616,8 @@ importers:
         specifier: 18.3.0
         version: 18.3.0
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1532,7 +1629,7 @@ importers:
         version: 4.17.21
       next:
         specifier: ^13.4.19
-        version: 13.5.1(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 13.5.1(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1540,15 +1637,15 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
     publishDirectory: build
 
   packages/mui-lab:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@emotion/react':
         specifier: ^11.5.0
         version: 11.11.4(@types/react@18.2.55)(react@18.2.0)
@@ -1574,9 +1671,9 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
     devDependencies:
-      '@mui-internal/test-utils':
+      '@mui/internal-test-utils':
         specifier: workspace:^
-        version: link:../test-utils
+        version: link:../../packages-internal/test-utils
       '@mui/material':
         specifier: workspace:*
         version: link:../mui-material/build
@@ -1593,8 +1690,8 @@ importers:
         specifier: 18.3.0
         version: 18.3.0
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1605,15 +1702,15 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
     publishDirectory: build
 
   packages/mui-material:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@emotion/react':
         specifier: ^11.5.0
         version: 11.11.4(@types/react@18.2.55)(react@18.2.0)
@@ -1654,21 +1751,21 @@ importers:
         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
+      '@mui/internal-test-utils':
+        specifier: workspace:^
+        version: link:../../packages-internal/test-utils
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
       '@testing-library/dom':
-        specifier: ^9.3.4
-        version: 9.3.4
+        specifier: ^10.1.0
+        version: 10.1.0
       '@testing-library/user-event':
         specifier: ^14.5.2
-        version: 14.5.2(@testing-library/dom@9.3.4)
+        version: 14.5.2(@testing-library/dom@10.1.0)
       '@types/chai':
         specifier: ^4.3.16
         version: 4.3.16
@@ -1682,8 +1779,8 @@ importers:
         specifier: 18.3.0
         version: 18.3.0
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1700,8 +1797,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       playwright:
-        specifier: ^1.44.0
-        version: 1.44.0
+        specifier: ^1.44.1
+        version: 1.44.1
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1712,15 +1809,15 @@ importers:
         specifier: ^6.23.1
         version: 6.23.1(react-dom@18.2.0)(react@18.2.0)
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
     publishDirectory: build
 
   packages/mui-material-nextjs:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@mui/material':
         specifier: workspace:^
         version: link:../mui-material/build
@@ -1739,7 +1836,7 @@ importers:
         version: 18.2.55
       next:
         specifier: 13.5.1
-        version: 13.5.1(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 13.5.1(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1748,8 +1845,8 @@ importers:
   packages/mui-private-theming:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@mui/utils':
         specifier: workspace:^
         version: link:../mui-utils/build
@@ -1757,9 +1854,9 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
     devDependencies:
-      '@mui-internal/test-utils':
+      '@mui/internal-test-utils':
         specifier: workspace:^
-        version: link:../test-utils
+        version: link:../../packages-internal/test-utils
       '@mui/types':
         specifier: workspace:^
         version: link:../mui-types/build
@@ -1780,8 +1877,8 @@ importers:
   packages/mui-styled-engine:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@emotion/cache':
         specifier: ^11.11.0
         version: 11.11.0
@@ -1798,9 +1895,9 @@ importers:
       '@emotion/styled':
         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':
+      '@mui/internal-test-utils':
         specifier: workspace:^
-        version: link:../test-utils
+        version: link:../../packages-internal/test-utils
       '@mui/styled-engine':
         specifier: workspace:*
         version: link:build
@@ -1821,8 +1918,8 @@ importers:
   packages/mui-styled-engine-sc:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
@@ -1833,9 +1930,9 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
     devDependencies:
-      '@mui-internal/test-utils':
+      '@mui/internal-test-utils':
         specifier: workspace:^
-        version: link:../test-utils
+        version: link:../../packages-internal/test-utils
       '@mui/styled-engine-sc':
         specifier: workspace:*
         version: link:build
@@ -1862,8 +1959,8 @@ importers:
   packages/mui-styles:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@emotion/hash':
         specifier: ^0.9.1
         version: 0.9.1
@@ -1913,9 +2010,9 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
     devDependencies:
-      '@mui-internal/test-utils':
+      '@mui/internal-test-utils':
         specifier: workspace:^
-        version: link:../test-utils
+        version: link:../../packages-internal/test-utils
       '@mui/material':
         specifier: workspace:^
         version: link:../mui-material/build
@@ -1929,8 +2026,8 @@ importers:
         specifier: 18.3.0
         version: 18.3.0
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1941,15 +2038,15 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
     publishDirectory: build
 
   packages/mui-system:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@mui/private-theming':
         specifier: workspace:^
         version: link:../mui-private-theming/build
@@ -1978,12 +2075,12 @@ importers:
       '@emotion/styled':
         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
       '@mui/internal-babel-macros':
         specifier: workspace:^
         version: link:../mui-babel-macros
+      '@mui/internal-test-utils':
+        specifier: workspace:^
+        version: link:../../packages-internal/test-utils
       '@mui/system':
         specifier: workspace:*
         version: link:build
@@ -1997,8 +2094,8 @@ importers:
         specifier: 18.2.55
         version: 18.2.55
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -2012,8 +2109,8 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
       styled-components:
         specifier: ^6.1.11
         version: 6.1.11(react-dom@18.2.0)(react@18.2.0)
@@ -2032,8 +2129,8 @@ importers:
   packages/mui-utils:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@types/prop-types':
         specifier: ^15.7.12
         version: 15.7.12
@@ -2044,12 +2141,12 @@ importers:
         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/internal-test-utils':
+        specifier: workspace:^
+        version: link:../../packages-internal/test-utils
       '@mui/types':
         specifier: workspace:^
         version: link:../mui-types/build
@@ -2072,8 +2169,8 @@ importers:
         specifier: ^18.3.0
         version: 18.3.0
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -2084,8 +2181,8 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
     publishDirectory: build
 
   packages/netlify-plugin-cache-docs:
@@ -2116,134 +2213,28 @@ importers:
         specifier: ^18.19.33
         version: 18.19.33
 
-  packages/test-utils:
-    dependencies:
-      '@babel/plugin-transform-modules-commonjs':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
-      '@babel/preset-typescript':
-        specifier: ^7.24.1
-        version: 7.24.1(@babel/core@7.24.5)
-      '@babel/register':
-        specifier: ^7.23.7
-        version: 7.23.7(@babel/core@7.24.5)
-      '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
-      '@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.3.1
-        version: 14.3.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.4.0
-        version: 10.4.0
-      playwright:
-        specifier: ^1.44.0
-        version: 1.44.0
-      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.16
-        version: 4.3.16
-      '@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.12
-        version: 15.7.12
-      '@types/react':
-        specifier: 18.2.55
-        version: 18.2.55
-      '@types/react-dom':
-        specifier: 18.3.0
-        version: 18.3.0
-      '@types/react-test-renderer':
-        specifier: ^18.3.0
-        version: 18.3.0
-      '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
-      typescript:
-        specifier: ^5.4.5
-        version: 5.4.5
-
   packages/waterfall: {}
 
   test:
     devDependencies:
       '@babel/runtime':
-        specifier: ^7.24.5
-        version: 7.24.5
+        specifier: ^7.24.6
+        version: 7.24.6
       '@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)
-      '@mui-internal/test-utils':
-        specifier: workspace:^
-        version: link:../packages/test-utils
       '@mui/base':
         specifier: workspace:*
         version: link:../packages/mui-base/build
       '@mui/icons-material':
         specifier: workspace:^
         version: link:../packages/mui-icons-material/build
+      '@mui/internal-test-utils':
+        specifier: workspace:^
+        version: link:../packages-internal/test-utils
       '@mui/joy':
         specifier: workspace:*
         version: link:../packages/mui-joy/build
@@ -2260,8 +2251,8 @@ importers:
         specifier: workspace:^
         version: link:../packages/mui-utils/build
       '@playwright/test':
-        specifier: 1.44.0
-        version: 1.44.0
+        specifier: 1.44.1
+        version: 1.44.1
       '@testing-library/dom':
         specifier: ^9.3.4
         version: 9.3.4
@@ -2275,8 +2266,8 @@ importers:
         specifier: ^18.3.0
         version: 18.3.0
       '@types/sinon':
-        specifier: ^10.0.20
-        version: 10.0.20
+        specifier: ^17.0.3
+        version: 17.0.3
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -2296,8 +2287,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       playwright:
-        specifier: ^1.44.0
-        version: 1.44.0
+        specifier: ^1.44.1
+        version: 1.44.1
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -2314,8 +2305,8 @@ importers:
         specifier: ^6.23.1
         version: 6.23.1(react-dom@18.2.0)(react@18.2.0)
       sinon:
-        specifier: ^15.2.0
-        version: 15.2.0
+        specifier: ^16.1.3
+        version: 16.1.3
       styled-components:
         specifier: ^6.1.11
         version: 6.1.11(react-dom@18.2.0)(react@18.2.0)
@@ -2546,16 +2537,16 @@ packages:
     engines: {node: '>=18.0.0'}
     dev: true
 
-  /@babel/cli@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-2qg1mYtJRsOOWF6IUwLP5jI42P8Cc0hQ5TmnjLrik/4DKouO8dFJN80HEz81VmVeUs97yuuf3vQ/9j7Elrcjlg==}
+  /@babel/cli@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-Sm/YhG/0REw9SKByFHDf4hkk7PYsjcsOyZgHGz1nvab4tUTQ9N4XVv+ykK0Y+VCJ3OshA/7EDyxnwCd8NEP/mQ==}
     engines: {node: '>=6.9.0'}
     hasBin: true
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       '@jridgewell/trace-mapping': 0.3.25
-      commander: 4.1.1
+      commander: 6.2.1
       convert-source-map: 2.0.0
       fs-readdir-recursive: 1.1.0
       glob: 7.2.3
@@ -2566,31 +2557,31 @@ packages:
       chokidar: 3.6.0
     dev: true
 
-  /@babel/code-frame@7.24.2:
-    resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==}
+  /@babel/code-frame@7.24.6:
+    resolution: {integrity: sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/highlight': 7.24.2
+      '@babel/highlight': 7.24.6
       picocolors: 1.0.0
 
-  /@babel/compat-data@7.24.4:
-    resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==}
+  /@babel/compat-data@7.24.6:
+    resolution: {integrity: sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/core@7.24.5:
-    resolution: {integrity: sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==}
+  /@babel/core@7.24.6:
+    resolution: {integrity: sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.2
-      '@babel/generator': 7.24.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
-      '@babel/helpers': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/code-frame': 7.24.6
+      '@babel/generator': 7.24.6
+      '@babel/helper-compilation-targets': 7.24.6
+      '@babel/helper-module-transforms': 7.24.6(@babel/core@7.24.6)
+      '@babel/helpers': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/template': 7.24.6
+      '@babel/traverse': 7.24.6
+      '@babel/types': 7.24.6
       convert-source-map: 2.0.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -2599,1312 +2590,1309 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/generator@7.24.5:
-    resolution: {integrity: sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==}
+  /@babel/generator@7.24.6:
+    resolution: {integrity: sha512-S7m4eNa6YAPJRHmKsLHIDJhNAGNKoWNiWefz1MBbpnt8g9lvMDl1hir4P9bo/57bQEmuwEhnRU/AMWsD0G/Fbg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 2.5.2
 
-  /@babel/helper-annotate-as-pure@7.22.5:
-    resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
+  /@babel/helper-annotate-as-pure@7.24.6:
+    resolution: {integrity: sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-builder-binary-assignment-operator-visitor@7.22.15:
-    resolution: {integrity: sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==}
+  /@babel/helper-builder-binary-assignment-operator-visitor@7.24.6:
+    resolution: {integrity: sha512-+wnfqc5uHiMYtvRX7qu80Toef8BXeh4HHR1SPeonGb1SKPniNEd4a/nlaJJMv/OIEYvIVavvo0yR7u10Gqz0Iw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-compilation-targets@7.23.6:
-    resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
+  /@babel/helper-compilation-targets@7.24.6:
+    resolution: {integrity: sha512-VZQ57UsDGlX/5fFA7GkVPplZhHsVc+vuErWgdOiysI9Ksnw0Pbbd6pnPiR/mmJyKHgyIW0c7KT32gmhiF+cirg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/helper-validator-option': 7.23.5
+      '@babel/compat-data': 7.24.6
+      '@babel/helper-validator-option': 7.24.6
       browserslist: 4.23.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  /@babel/helper-create-class-features-plugin@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-uRc4Cv8UQWnE4NXlYTIIdM7wfFkOqlFztcC/gVXDKohKoVB3OyonfelUBaJzSwpBntZ2KYGF/9S7asCHsXwW6g==}
+  /@babel/helper-create-class-features-plugin@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-djsosdPJVZE6Vsw3kk7IPRWethP94WHGOhQTc67SNXE0ZzMhHgALw8iGmYS0TD1bbMM0VDROy43od7/hN6WYcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
-    dependencies:
-      '@babel/core': 7.24.5
-      '@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.24.5
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.24.5
+      '@babel/core': ^7.24.6
+    dependencies:
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-function-name': 7.24.6
+      '@babel/helper-member-expression-to-functions': 7.24.6
+      '@babel/helper-optimise-call-expression': 7.24.6
+      '@babel/helper-replace-supers': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
+      '@babel/helper-split-export-declaration': 7.24.6
       semver: 6.3.1
 
-  /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.5):
-    resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==}
+  /@babel/helper-create-regexp-features-plugin@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-C875lFBIWWwyv6MHZUG9HmRrlTDgOsLWZfYR0nW69gaKJNe0/Mpxx5r0EID2ZdHQkdUmQo2t0uNckTL08/1BgA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
       regexpu-core: 5.3.2
       semver: 6.3.1
 
-  /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.5):
+  /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-compilation-targets': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
       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==}
+  /@babel/helper-environment-visitor@7.24.6:
+    resolution: {integrity: sha512-Y50Cg3k0LKLMjxdPjIl40SdJgMB85iXn27Vk/qbHZCFx/o5XO3PSnpi675h1KEmmDb6OFArfd5SCQEQ5Q4H88g==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-function-name@7.23.0:
-    resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
+  /@babel/helper-function-name@7.24.6:
+    resolution: {integrity: sha512-xpeLqeeRkbxhnYimfr2PC+iA0Q7ljX/d1eZ9/inYbmfG2jpl8Lu3DyXvpOAnrS5kxkfOWJjioIMQsaMBXFI05w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.24.0
-      '@babel/types': 7.24.5
+      '@babel/template': 7.24.6
+      '@babel/types': 7.24.6
 
-  /@babel/helper-hoist-variables@7.22.5:
-    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
+  /@babel/helper-hoist-variables@7.24.6:
+    resolution: {integrity: sha512-SF/EMrC3OD7dSta1bLJIlrsVxwtd0UpjRJqLno6125epQMJ/kyFmpTT4pbvPbdQHzCHg+biQ7Syo8lnDtbR+uA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-member-expression-to-functions@7.24.5:
-    resolution: {integrity: sha512-4owRteeihKWKamtqg4JmWSsEZU445xpFRXPEwp44HbgbxdWlUV1b4Agg4lkA806Lil5XM/e+FJyS0vj5T6vmcA==}
+  /@babel/helper-member-expression-to-functions@7.24.6:
+    resolution: {integrity: sha512-OTsCufZTxDUsv2/eDXanw/mUZHWOxSbEmC3pP8cgjcy5rgeVPWWMStnv274DV60JtHxTk0adT0QrCzC4M9NWGg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-module-imports@7.24.3:
-    resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==}
+  /@babel/helper-module-imports@7.24.6:
+    resolution: {integrity: sha512-a26dmxFJBF62rRO9mmpgrfTLsAuyHk4e1hKTUkD/fcMfynt8gvEKwQPQDVxWhca8dHoDck+55DFt42zV0QMw5g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-module-transforms@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==}
+  /@babel/helper-module-transforms@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-Y/YMPm83mV2HJTbX1Qh2sjgjqcacvOlhbzdCCsSlblOKjSYmQqEbO6rUniWQyRo9ncyfjT8hnUjlG06RXDEmcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-simple-access': 7.24.5
-      '@babel/helper-split-export-declaration': 7.24.5
-      '@babel/helper-validator-identifier': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/helper-simple-access': 7.24.6
+      '@babel/helper-split-export-declaration': 7.24.6
+      '@babel/helper-validator-identifier': 7.24.6
 
-  /@babel/helper-optimise-call-expression@7.22.5:
-    resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
+  /@babel/helper-optimise-call-expression@7.24.6:
+    resolution: {integrity: sha512-3SFDJRbx7KuPRl8XDUr8O7GAEB8iGyWPjLKJh/ywP/Iy9WOmEfMrsWbaZpvBu2HSYn4KQygIsz0O7m8y10ncMA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-plugin-utils@7.24.5:
-    resolution: {integrity: sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==}
+  /@babel/helper-plugin-utils@7.24.6:
+    resolution: {integrity: sha512-MZG/JcWfxybKwsA9N9PmtF2lOSFSEMVCpIRrbxccZFLJPrJciJdG/UhSh5W96GEteJI2ARqm5UAHxISwRDLSNg==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.5):
-    resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
+  /@babel/helper-remap-async-to-generator@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-1Qursq9ArRZPAMOZf/nuzVW8HgJLkTB9y9LfP4lW2MVp4e9WkLJDovfKBxoDcCk6VuzIxyqWHyBoaCtSRP10yg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-wrap-function': 7.22.20
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-wrap-function': 7.24.6
 
-  /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==}
+  /@babel/helper-replace-supers@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-mRhfPwDqDpba8o1F8ESxsEkJMQkUF8ZIWrAc0FtWhxnjfextxMWxr22RtFizxxSYLjVHDeMgVsRq8BBZR2ikJQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.24.5
-      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/core': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-member-expression-to-functions': 7.24.6
+      '@babel/helper-optimise-call-expression': 7.24.6
 
-  /@babel/helper-simple-access@7.24.5:
-    resolution: {integrity: sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==}
+  /@babel/helper-simple-access@7.24.6:
+    resolution: {integrity: sha512-nZzcMMD4ZhmB35MOOzQuiGO5RzL6tJbsT37Zx8M5L/i9KSrukGXWTjLe1knIbb/RmxoJE9GON9soq0c0VEMM5g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
-    resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
+  /@babel/helper-skip-transparent-expression-wrappers@7.24.6:
+    resolution: {integrity: sha512-jhbbkK3IUKc4T43WadP96a27oYti9gEf1LdyGSP2rHGH77kwLwfhO7TgwnWvxxQVmke0ImmCSS47vcuxEMGD3Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-split-export-declaration@7.24.5:
-    resolution: {integrity: sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==}
+  /@babel/helper-split-export-declaration@7.24.6:
+    resolution: {integrity: sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/helper-string-parser@7.24.1:
-    resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
+  /@babel/helper-string-parser@7.24.6:
+    resolution: {integrity: sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-validator-identifier@7.24.5:
-    resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==}
+  /@babel/helper-validator-identifier@7.24.6:
+    resolution: {integrity: sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-validator-option@7.23.5:
-    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
+  /@babel/helper-validator-option@7.24.6:
+    resolution: {integrity: sha512-Jktc8KkF3zIkePb48QO+IapbXlSapOW9S+ogZZkcO6bABgYAxtZcjZ/O005111YLf+j4M84uEgwYoidDkXbCkQ==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-wrap-function@7.22.20:
-    resolution: {integrity: sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==}
+  /@babel/helper-wrap-function@7.24.6:
+    resolution: {integrity: sha512-f1JLrlw/jbiNfxvdrfBgio/gRBk3yTAEJWirpAkiJG2Hb22E7cEYKHWo0dFPTv/niPovzIdPdEDetrv6tC6gPQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-function-name': 7.23.0
-      '@babel/template': 7.24.0
-      '@babel/types': 7.24.5
+      '@babel/helper-function-name': 7.24.6
+      '@babel/template': 7.24.6
+      '@babel/types': 7.24.6
 
-  /@babel/helpers@7.24.5:
-    resolution: {integrity: sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==}
+  /@babel/helpers@7.24.6:
+    resolution: {integrity: sha512-V2PI+NqnyFu1i0GyTd/O/cTpxzQCYioSkUIRmgo7gFEHKKCg5w46+r/A6WeUR1+P3TeQ49dspGPNd/E3n9AnnA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.5
-      '@babel/types': 7.24.5
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/template': 7.24.6
+      '@babel/types': 7.24.6
 
-  /@babel/highlight@7.24.2:
-    resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==}
+  /@babel/highlight@7.24.6:
+    resolution: {integrity: sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.24.5
+      '@babel/helper-validator-identifier': 7.24.6
       chalk: 2.4.2
       js-tokens: 4.0.0
       picocolors: 1.0.0
 
-  /@babel/node@7.23.9(@babel/core@7.24.5):
-    resolution: {integrity: sha512-/d4ju/POwlGIJlZ+NqWH1qu61wt6ZlTZZZutrK2MOSdaH1JCh726nLw/GSvAjG+LTY6CO9SsB8uWcttnFKm6yg==}
+  /@babel/node@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-63bD/Kbh1Vl6HapTZLSsyaGlQhhpF1/GpyS1oJotroJKoamOgKKEEKk3iHZAkicjcr+n4V4zdB0V+8siv6AZ5Q==}
     engines: {node: '>=6.9.0'}
     hasBin: true
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/register': 7.23.7(@babel/core@7.24.5)
-      commander: 4.1.1
+      '@babel/core': 7.24.6
+      '@babel/register': 7.24.6(@babel/core@7.24.6)
+      commander: 6.2.1
       core-js: 3.32.1
       node-environment-flags: 1.0.6
       regenerator-runtime: 0.14.0
       v8flags: 3.2.0
     dev: true
 
-  /@babel/parser@7.24.5:
-    resolution: {integrity: sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==}
+  /@babel/parser@7.24.6:
+    resolution: {integrity: sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
 
-  /@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-LdXRi1wEMTrHVR4Zc9F8OewC3vdm5h4QB6L71zy6StmYeqGi1b3ttIO8UC+BfZKcH9jdr4aI249rBkm+3+YvHw==}
+  /@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-bYndrJ6Ph6Ar+GaB5VAc0JPoP80bQCm4qon6JEzXfRl5QZyQ8Ur1K6k7htxWmPA5z+k7JQvaMUrtXlqclWYzKw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==}
+  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-iVuhb6poq5ikqRq2XWU6OQ+R5o9wF+r/or9CeUyovgptz0UlnK4/seOQ1Istu/XybYjAhQv1FRSSfHHufIku5Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==}
+  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-c8TER5xMDYzzFcGqOEp9l4hvB7dcbhcGjcLVwxWfe4P5DOafdwjsBJZKsmv+o3aXh7NhopvayQIovHrh2zSRUQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-transform-optional-chaining': 7.24.5(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
+      '@babel/plugin-transform-optional-chaining': 7.24.6(@babel/core@7.24.6)
 
-  /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==}
+  /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-z8zEjYmwBUHN/pCF3NuWBhHQjJCrd33qAi8MgANfMrAvn72k2cImT8VjK9LJFu4ysOLJqhfkYYb3MvwANRUNZQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.5):
+  /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.5)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-remap-async-to-generator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.5):
+  /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
     dev: false
 
-  /@babel/plugin-proposal-export-default-from@7.24.1(@babel/core@7.24.5):
+  /@babel/plugin-proposal-export-default-from@7.24.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-+0hrgGGV3xyYIjOrD/bUZk/iUwOIGuoANfRfVg1cPhYBxF+TIXSEcc42DqzBICmWsnAQ+SfKedY0bj8QD+LuMg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.5):
+  /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.5):
+  /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.5):
+  /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.24.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-transform-parameters': 7.24.5(@babel/core@7.24.5)
+      '@babel/compat-data': 7.24.6
+      '@babel/core': 7.24.6
+      '@babel/helper-compilation-targets': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-transform-parameters': 7.24.6(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.5):
+  /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.5):
+  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.5):
+  /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.6):
     resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
 
-  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.5):
+  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.6):
     resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.5):
+  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.6):
     resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.5):
+  /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.6):
     resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.5):
+  /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.6):
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-export-default-from@7.24.1(@babel/core@7.24.5):
+  /@babel/plugin-syntax-export-default-from@7.24.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-cNXSxv9eTkGUtd0PsNMK8Yx5xeScxfpWOUAxE+ZPAXXEcAMOC3fk7LRdXq5fvpra2pLx2p1YtkAhpUbB2SwaRA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
     dev: false
 
-  /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.5):
+  /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.6):
     resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.5):
+  /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
     dev: false
 
-  /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==}
+  /@babel/plugin-syntax-import-assertions@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-BE6o2BogJKJImTmGpkmOic4V0hlRRxVtzqxiSPa8TIFxyhi4EFjHm08nq1M4STK4RytuLMgnSz0/wfflvGFNOg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==}
+  /@babel/plugin-syntax-import-attributes@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-D+CfsVZousPXIdudSII7RGy52+dYRtbyKAZcvtQKq/NpsivyMVduepzcLqG5pMBugtMdedxdC8Ramdpcne9ZWQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.5):
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.6):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.5):
+  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.6):
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==}
+  /@babel/plugin-syntax-jsx@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-lWfvAIFNWMlCsU0DRUun2GpFwZdGTukLaHJqRh1JRb80NdAP5Sb1HDHB5X9P9OtgZHQl089UzQkpYlBq2VTPRw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.5):
+  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.6):
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.5):
+  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.6):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.5):
+  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.6):
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.5):
+  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.6):
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.5):
+  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.6):
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.5):
+  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.6):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.5):
+  /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.6):
     resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.5):
+  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.6):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==}
+  /@babel/plugin-syntax-typescript@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-TzCtxGgVTEJWWwcYwQhCIQ6WaKlo80/B+Onsk4RRCcYqpYGFcG9etPW94VToGte5AAcxRrhjPUFvUS3Y2qKi4A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.5):
+  /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.6):
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-regexp-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==}
+  /@babel/plugin-transform-arrow-functions@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-jSSSDt4ZidNMggcLx8SaKsbGNEfIl0PHx/4mFEulorE7bpYLbN0d3pDW3eJ7Y5Z3yPhy3L3NaPCYyTUY7TuugQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.5):
-    resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==}
+  /@babel/plugin-transform-async-generator-functions@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-VEP2o4iR2DqQU6KPgizTW2mnMx6BG5b5O9iQdrW9HesLkv8GIA8x2daXBQxw1MrsIkFQGA/iJ204CKoQ8UcnAA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.5)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-remap-async-to-generator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==}
+  /@babel/plugin-transform-async-to-generator@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-NTBA2SioI3OsHeIn6sQmhvXleSl9T70YY/hostQLveWs0ic+qvbA3fa0kwAwQ0OA/XGaAerNZRQGJyRfhbJK4g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-remap-async-to-generator': 7.24.6(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==}
+  /@babel/plugin-transform-block-scoped-functions@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-XNW7jolYHW9CwORrZgA/97tL/k05qe/HL0z/qqJq1mdWhwwCM6D4BJBV7wAz9HgFziN5dTOG31znkVIzwxv+vw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-block-scoping@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-sMfBc3OxghjC95BkYrYocHL3NaOplrcaunblzwXhGmlPwpmfsxr4vK+mBBt49r+S240vahmv+kUxkeKgs+haCw==}
+  /@babel/plugin-transform-block-scoping@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-S/t1Xh4ehW7sGA7c1j/hiOBLnEYCp/c2sEG4ZkL8kI1xX9tW2pqJTCHKtdhe/jHKt8nG0pFCrDHUXd4DvjHS9w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==}
+  /@babel/plugin-transform-class-properties@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-j6dZ0Z2Z2slWLR3kt9aOmSIrBvnntWjMDN/TVcMPxhXMLmJVqX605CBRlcGI4b32GMbfifTEsdEjGjiE+j/c3A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-class-static-block@7.24.4(@babel/core@7.24.5):
-    resolution: {integrity: sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==}
+  /@babel/plugin-transform-class-static-block@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-1QSRfoPI9RoLRa8Mnakc6v3e0gJxiZQTYrMfLn+mD0sz5+ndSzwymp2hDcYJTyT0MOn0yuWzj8phlIvO72gTHA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-classes@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-gWkLP25DFj2dwe9Ck8uwMOpko4YsqyfZJrOmqqcegeDYEbp7rmn4U6UQZNj08UF6MaX39XenSpKRCvpDRBtZ7Q==}
+  /@babel/plugin-transform-classes@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-+fN+NO2gh8JtRmDSOB6gaCVo36ha8kfCW1nMq2Gc0DABln0VcHN4PrALDvF5/diLzIRKptC7z/d7Lp64zk92Fg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@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.5
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
-      '@babel/helper-split-export-declaration': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
+      '@babel/helper-compilation-targets': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-function-name': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-replace-supers': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-split-export-declaration': 7.24.6
       globals: 11.12.0
 
-  /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==}
+  /@babel/plugin-transform-computed-properties@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-cRzPobcfRP0ZtuIEkA8QzghoUpSB3X3qSH5W2+FzG+VjWbJXExtx0nbRqwumdBN1x/ot2SlTNQLfBCnPdzp6kg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/template': 7.24.0
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/template': 7.24.6
 
-  /@babel/plugin-transform-destructuring@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-SZuuLyfxvsm+Ah57I/i1HVjveBENYK9ue8MJ7qkc7ndoNjqquJiElzA7f5yaAXjyW2hKojosOTAQQRX50bPSVg==}
+  /@babel/plugin-transform-destructuring@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-YLW6AE5LQpk5npNXL7i/O+U9CE4XsBCuRPgyjl1EICZYKmcitV+ayuuUGMJm2lC1WWjXYszeTnIxF/dq/GhIZQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==}
+  /@babel/plugin-transform-dotall-regex@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-rCXPnSEKvkm/EjzOtLoGvKseK+dS4kZwx1HexO3BtRtgL0fQ34awHn34aeSHuXtZY2F8a1X8xqBBPRtOxDVmcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-regexp-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==}
+  /@babel/plugin-transform-duplicate-keys@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-/8Odwp/aVkZwPFJMllSbawhDAO3UJi65foB00HYnK/uXvvCPm0TAXSByjz1mpRmp0q6oX2SIxpkUOpPFHk7FLA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==}
+  /@babel/plugin-transform-dynamic-import@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-vpq8SSLRTBLOHUZHSnBqVo0AKX3PBaoPs2vVzYVWslXDTDIpwAcCDtfhUcHSQQoYoUvcFPTdC8TZYXu9ZnLT/w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==}
+  /@babel/plugin-transform-exponentiation-operator@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-EemYpHtmz0lHE7hxxxYEuTYOOBZ43WkDgZ4arQ4r+VX9QHuNZC+WH3wUWmRNvR8ECpTRne29aZV6XO22qpOtdA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==}
+  /@babel/plugin-transform-export-namespace-from@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-inXaTM1SVrIxCkIJ5gqWiozHfFMStuGbGJAxZFBoHcRRdDP0ySLb3jH6JOwmfiinPwyMZqMBX+7NBDCO4z0NSA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.5):
+  /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.6)
     dev: false
 
-  /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==}
+  /@babel/plugin-transform-for-of@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-n3Sf72TnqK4nw/jziSqEl1qaWPbCRw2CziHH+jdRYvw4J6yeCzsj4jdw8hIntOEeDGTmHVe2w4MVL44PN0GMzg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
 
-  /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==}
+  /@babel/plugin-transform-function-name@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-sOajCu6V0P1KPljWHKiDq6ymgqB+vfo3isUS4McqW1DZtvSVU2v/wuMhmRmkg3sFoq6GMaUUf8W4WtoSLkOV/Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-compilation-targets': 7.24.6
+      '@babel/helper-function-name': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==}
+  /@babel/plugin-transform-json-strings@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-Uvgd9p2gUnzYJxVdBLcU0KurF8aVhkmVyMKW4MIY1/BByvs3EBpv45q01o7pRTVmTvtQq5zDlytP3dcUgm7v9w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==}
+  /@babel/plugin-transform-literals@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-f2wHfR2HF6yMj+y+/y07+SLqnOSwRp8KYLpQKOzS58XLVlULhXbiYcygfXQxJlMbhII9+yXDwOUFLf60/TL5tw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==}
+  /@babel/plugin-transform-logical-assignment-operators@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-EKaWvnezBCMkRIHxMJSIIylzhqK09YpiJtDbr2wsXTwnO0TxyjMUkaw4RlFIZMIS0iDj0KyIg7H7XCguHu/YDA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==}
+  /@babel/plugin-transform-member-expression-literals@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-9g8iV146szUo5GWgXpRbq/GALTnY+WnNuRTuRHWWFfWGbP9ukRL0aO/jpu9dmOPikclkxnNsjY8/gsWl6bmZJQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==}
+  /@babel/plugin-transform-modules-amd@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-eAGogjZgcwqAxhyFgqghvoHRr+EYRQPFjUXrTYKBRb5qPnAVxOOglaxc4/byHqjvq/bqO2F3/CGwTHsgKJYHhQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-module-transforms': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==}
+  /@babel/plugin-transform-modules-commonjs@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-JEV8l3MHdmmdb7S7Cmx6rbNEjRCgTQMZxllveHO0mx6uiclB0NflCawlQQ6+o5ZrwjUBYPzHm2XoK4wqGVUFuw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-simple-access': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-module-transforms': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-simple-access': 7.24.6
 
-  /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==}
+  /@babel/plugin-transform-modules-systemjs@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-xg1Z0J5JVYxtpX954XqaaAT6NpAY6LtZXvYFCJmGFJWwtlz2EmJoR8LycFRGNE8dBKizGWkGQZGegtkV8y8s+w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-validator-identifier': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-hoist-variables': 7.24.6
+      '@babel/helper-module-transforms': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-validator-identifier': 7.24.6
 
-  /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==}
+  /@babel/plugin-transform-modules-umd@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-esRCC/KsSEUvrSjv5rFYnjZI6qv4R1e/iHQrqwbZIoRJqk7xCvEUiN7L1XrmW5QSmQe3n1XD88wbgDTWLbVSyg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-module-transforms': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==}
+  /@babel/plugin-transform-named-capturing-groups-regex@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-6DneiCiu91wm3YiNIGDWZsl6GfTTbspuj/toTEqLh9d4cx50UIzSdg+T96p8DuT7aJOBRhFyaE9ZvTHkXrXr6Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-regexp-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==}
+  /@babel/plugin-transform-new-target@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-f8liz9JG2Va8A4J5ZBuaSdwfPqN6axfWRK+y66fjKYbwf9VBLuq4WxtinhJhvp1w6lamKUwLG0slK2RxqFgvHA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==}
+  /@babel/plugin-transform-nullish-coalescing-operator@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-+QlAiZBMsBK5NqrBWFXCYeXyiU1y7BQ/OYaiPAcQJMomn5Tyg+r5WuVtyEuvTbpV7L25ZSLfE+2E9ywj4FD48A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==}
+  /@babel/plugin-transform-numeric-separator@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-6voawq8T25Jvvnc4/rXcWZQKKxUNZcKMS8ZNrjxQqoRFernJJKjE3s18Qo6VFaatG5aiX5JV1oPD7DbJhn0a4Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-object-rest-spread@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-7EauQHszLGM3ay7a161tTQH7fj+3vVM/gThlz5HpFtnygTxjrlvoeq7MPVA1Vy9Q555OB8SnAOsMkLShNkkrHA==}
+  /@babel/plugin-transform-object-rest-spread@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-OKmi5wiMoRW5Smttne7BwHM8s/fb5JFs+bVGNSeHWzwZkWXWValR1M30jyXo1s/RaqgwwhEC62u4rFH/FBcBPg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-transform-parameters': 7.24.5(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-compilation-targets': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-transform-parameters': 7.24.6(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==}
+  /@babel/plugin-transform-object-super@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-N/C76ihFKlZgKfdkEYKtaRUtXZAgK7sOY4h2qrbVbVTXPrKGIi8aww5WGe/+Wmg8onn8sr2ut6FXlsbu/j6JHg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-replace-supers': 7.24.6(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==}
+  /@babel/plugin-transform-optional-catch-binding@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-L5pZ+b3O1mSzJ71HmxSCmTVd03VOT2GXOigug6vDYJzE5awLI7P1g0wFcdmGuwSDSrQ0L2rDOe/hHws8J1rv3w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-optional-chaining@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-xWCkmwKT+ihmA6l7SSTpk8e4qQl/274iNbSKRRS8mpqFR32ksy36+a+LWY8OXCCEefF8WFlnOHVsaDI2231wBg==}
+  /@babel/plugin-transform-optional-chaining@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-cHbqF6l1QP11OkYTYQ+hhVx1E017O5ZcSPXk9oODpqhcAD1htsWG2NpHrrhthEO2qZomLK0FXS+u7NfrkF5aOQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-parameters@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-9Co00MqZ2aoky+4j2jhofErthm6QVLKbpQrvz20c3CH9KQCLHyNB+t2ya4/UrRpQGR+Wrwjg9foopoeSdnHOkA==}
+  /@babel/plugin-transform-parameters@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-ST7guE8vLV+vI70wmAxuZpIKzVjvFX9Qs8bl5w6tN/6gOypPWUmMQL2p7LJz5E63vEGrDhAiYetniJFyBH1RkA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==}
+  /@babel/plugin-transform-private-methods@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-T9LtDI0BgwXOzyXrvgLTT8DFjCC/XgWLjflczTLXyvxbnSR/gpv0hbmzlHE/kmh9nOvlygbamLKRo6Op4yB6aw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-private-property-in-object@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-JM4MHZqnWR04jPMujQDTBVRnqxpLLpx2tkn7iPn+Hmsc0Gnb79yvRWOkvqFOx3Z7P7VxiRIR22c4eGSNj87OBQ==}
+  /@babel/plugin-transform-private-property-in-object@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-Qu/ypFxCY5NkAnEhCF86Mvg3NSabKsh/TPpBVswEdkGl7+FbsYHy1ziRqJpwGH4thBdQHh8zx+z7vMYmcJ7iaQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
+      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==}
+  /@babel/plugin-transform-property-literals@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-oARaglxhRsN18OYsnPTpb8TcKQWDYNsPNmTnx5++WOAsUJ0cSC/FZVlIJCKvPbU4yn/UXsS0551CFKJhN0CaMw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-react-constant-elements@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==}
+  /@babel/plugin-transform-react-constant-elements@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-vQfyXRtG/kNIcTYRd/49uJnwvMig9X3R4XsTVXRml2RFupZFY+2RDuK+/ymb+MfX2WuIHAgUZc2xEvQrnI7QCg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
     dev: true
 
-  /@babel/plugin-transform-react-display-name@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==}
+  /@babel/plugin-transform-react-display-name@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-/3iiEEHDsJuj9QU09gbyWGSUxDboFcD7Nj6dnHIlboWSodxXAoaY/zlNMHeYAC0WsERMqgO9a7UaM77CsYgWcg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==}
+  /@babel/plugin-transform-react-jsx-development@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-F7EsNp5StNDouSSdYyDSxh4J+xvj/JqG+Cb6s2fA+jCyHOzigG5vTwgH8tU2U8Voyiu5zCG9bAK49wTr/wPH0w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/plugin-transform-react-jsx': 7.24.6(@babel/core@7.24.6)
     dev: true
 
-  /@babel/plugin-transform-react-jsx-self@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==}
+  /@babel/plugin-transform-react-jsx-self@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-FfZfHXtQ5jYPQsCRyLpOv2GeLIIJhs8aydpNh39vRDjhD411XcfWDni5i7OjP/Rs8GAtTn7sWFFELJSHqkIxYg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.5):
+  /@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.5):
-    resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==}
+  /@babel/plugin-transform-react-jsx@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-pCtPHhpRZHfwdA5G1Gpk5mIzMA99hv0R8S/Ket50Rw+S+8hkt3wBWqdqHaPw0CuUYxdshUgsPiLQ5fAs4ASMhw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.5)
-      '@babel/types': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-jsx': 7.24.6(@babel/core@7.24.6)
+      '@babel/types': 7.24.6
 
-  /@babel/plugin-transform-react-pure-annotations@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==}
+  /@babel/plugin-transform-react-pure-annotations@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-0HoDQlFJJkXRyV2N+xOpUETbKHcouSwijRQbKWVtxsPoq5bbB30qZag9/pSc5xcWVYjTHlLsBsY+hZDnzQTPNw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
     dev: true
 
-  /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==}
+  /@babel/plugin-transform-regenerator@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-SMDxO95I8WXRtXhTAc8t/NFQUT7VYbIWwJCJgEli9ml4MhqUMh4S6hxgH6SmAC3eAQNWCDJFxcFeEt9w2sDdXg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
       regenerator-transform: 0.15.2
 
-  /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==}
+  /@babel/plugin-transform-reserved-words@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-DcrgFXRRlK64dGE0ZFBPD5egM2uM8mgfrvTMOSB2yKzOtjpGegVYkzh3s1zZg1bBck3nkXiaOamJUqK3Syk+4A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-runtime@7.24.3(@babel/core@7.24.5):
-    resolution: {integrity: sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==}
+  /@babel/plugin-transform-runtime@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-W3gQydMb0SY99y/2lV0Okx2xg/8KzmZLQsLaiCmwNRl1kKomz14VurEm+2TossUb+sRvBCnGe+wx8KtIgDtBbQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.5
-      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.5)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.5)
-      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.6)
+      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.6)
+      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.6)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==}
+  /@babel/plugin-transform-shorthand-properties@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-xnEUvHSMr9eOWS5Al2YPfc32ten7CXdH7Zwyyk7IqITg4nX61oHj+GxpNvl+y5JHjfN3KXE2IV55wAWowBYMVw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==}
+  /@babel/plugin-transform-spread@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-h/2j7oIUDjS+ULsIrNZ6/TKG97FgmEk1PXryk/HQq6op4XUUUwif2f69fJrzK0wza2zjCS1xhXmouACaWV5uPA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.6
 
-  /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==}
+  /@babel/plugin-transform-sticky-regex@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-fN8OcTLfGmYv7FnDrsjodYBo1DhPL3Pze/9mIIE2MGCT1KgADYIOD7rEglpLHZj8PZlC/JFX5WcD+85FLAQusw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==}
+  /@babel/plugin-transform-template-literals@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-BJbEqJIcKwrqUP+KfUIkxz3q8VzXe2R8Wv8TaNgO1cx+nNavxn/2+H8kp9tgFSOL6wYPPEgFvU6IKS4qoGqhmg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-typeof-symbol@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-UTGnhYVZtTAjdwOTzT+sCyXmTn8AhaxOS/MjG9REclZ6ULHWF9KoCZur0HSGU7hk8PdBFKKbYe6+gqdXWz84Jg==}
+  /@babel/plugin-transform-typeof-symbol@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-IshCXQ+G9JIFJI7bUpxTE/oA2lgVLAIK8q1KdJNoPXOpvRaNjMySGuvLfBw/Xi2/1lLo953uE8hyYSDW3TSYig==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-typescript@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==}
+  /@babel/plugin-transform-typescript@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-H0i+hDLmaYYSt6KU9cZE0gb3Cbssa/oxWis7PX4ofQzbvsfix9Lbh8SRk7LCPDlLWJHUiFeHU0qRRpF/4Zv7mQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-annotate-as-pure': 7.24.6
+      '@babel/helper-create-class-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/plugin-syntax-typescript': 7.24.6(@babel/core@7.24.6)
 
-  /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==}
+  /@babel/plugin-transform-unicode-escapes@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-bKl3xxcPbkQQo5eX9LjjDpU2xYHeEeNQbOhj0iPvetSzA+Tu9q/o5lujF4Sek60CM6MgYvOS/DJuwGbiEYAnLw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==}
+  /@babel/plugin-transform-unicode-property-regex@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-8EIgImzVUxy15cZiPii9GvLZwsy7Vxc+8meSlR3cXFmBIl5W5Tn9LGBf7CDKkHj4uVfNXCJB8RsVfnmY61iedA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-regexp-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==}
+  /@babel/plugin-transform-unicode-regex@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-pssN6ExsvxaKU638qcWb81RrvvgZom3jDgU/r5xFZ7TONkZGFf4MhI2ltMb8OcQWhHyxgIavEU+hgqtbKOmsPA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-regexp-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==}
+  /@babel/plugin-transform-unicode-sets-regex@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-quiMsb28oXWIDK0gXLALOJRXLgICLiulqdZGOaPPd0vRT7fQp74NtdADAVu+D8s00C+0Xs0MxVP0VKF/sZEUgw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-create-regexp-features-plugin': 7.24.6(@babel/core@7.24.6)
+      '@babel/helper-plugin-utils': 7.24.6
 
-  /@babel/preset-env@7.24.5(@babel/core@7.24.5):
-    resolution: {integrity: sha512-UGK2ifKtcC8i5AI4cH+sbLLuLc2ktYSFJgBAXorKAsHUZmrQ1q6aQ6i3BvU24wWs2AAKqQB6kq3N9V9Gw1HiMQ==}
+  /@babel/preset-env@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-CrxEAvN7VxfjOG8JNF2Y/eMqMJbZPZ185amwGUBp8D9USK90xQmv7dLdFSa+VbD7fdIqcy/Mfv7WtzG8+/qxKg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
-    dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.24.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.5)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.5)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.5)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.5)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.5)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.5)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.5)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.5)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.5)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.5)
-      '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.24.5)
-      '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-block-scoping': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.24.5)
-      '@babel/plugin-transform-classes': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-destructuring': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-object-rest-spread': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-optional-chaining': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-parameters': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-private-property-in-object': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-typeof-symbol': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.24.5)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.5)
-      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.5)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.5)
-      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.5)
+      '@babel/core': ^7.24.6
+    dependencies:
+      '@babel/compat-data': 7.24.6
+      '@babel/core': 7.24.6
+      '@babel/helper-compilation-targets': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-validator-option': 7.24.6
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.6)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.6)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.6)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.6)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-import-assertions': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-syntax-import-attributes': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.6)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.6)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.6)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.6)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.6)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-arrow-functions': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-async-generator-functions': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-async-to-generator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-block-scoped-functions': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-block-scoping': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-class-properties': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-class-static-block': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-classes': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-computed-properties': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-destructuring': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-dotall-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-duplicate-keys': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-dynamic-import': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-exponentiation-operator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-export-namespace-from': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-for-of': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-function-name': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-json-strings': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-literals': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-logical-assignment-operators': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-member-expression-literals': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-amd': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-commonjs': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-systemjs': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-umd': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-new-target': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-numeric-separator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-object-rest-spread': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-object-super': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-optional-catch-binding': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-optional-chaining': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-parameters': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-private-methods': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-private-property-in-object': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-property-literals': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-regenerator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-reserved-words': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-shorthand-properties': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-spread': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-sticky-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-template-literals': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-typeof-symbol': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-unicode-escapes': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-unicode-property-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-unicode-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-unicode-sets-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.6)
+      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.6)
+      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.6)
+      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.6)
       core-js-compat: 3.36.1
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/preset-flow@7.24.1(@babel/core@7.24.5):
+  /@babel/preset-flow@7.24.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-sWCV2G9pcqZf+JHyv/RyqEIpFypxdCSxWIxQjpdaQxenNog7cN1pr76hg8u0Fz8Qgg0H4ETkGcJnXL8d4j0PPA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-validator-option': 7.24.6
+      '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.6)
     dev: false
 
-  /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.5):
+  /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.6):
     resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/types': 7.24.6
       esutils: 2.0.3
 
-  /@babel/preset-react@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==}
+  /@babel/preset-react@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-8mpzh1bWvmINmwM3xpz6ahu57mNaWavMm+wBNjQ4AFu1nghKBiIRET7l/Wmj4drXany/BBGjJZngICcD98F1iw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-pure-annotations': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-validator-option': 7.24.6
+      '@babel/plugin-transform-react-display-name': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-jsx': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-jsx-development': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-pure-annotations': 7.24.6(@babel/core@7.24.6)
     dev: true
 
-  /@babel/preset-typescript@7.24.1(@babel/core@7.24.5):
-    resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==}
+  /@babel/preset-typescript@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-U10aHPDnokCFRXgyT/MaIRTivUu2K/mu0vJlwRS9LxJmJet+PFQNKpggPyFCUtC6zWSBPjvxjnpNkAn3Uw2m5w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/helper-validator-option': 7.24.6
+      '@babel/plugin-syntax-jsx': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-commonjs': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-typescript': 7.24.6(@babel/core@7.24.6)
 
-  /@babel/register@7.23.7(@babel/core@7.24.5):
-    resolution: {integrity: sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==}
+  /@babel/register@7.24.6(@babel/core@7.24.6):
+    resolution: {integrity: sha512-WSuFCc2wCqMeXkz/i3yfAAsxwWflEgbVkZzivgAmXl/MxrXeoYFZOOPllbC8R8WTF7u61wSRQtDVZ1879cdu6w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       clone-deep: 4.0.1
       find-cache-dir: 2.1.0
       make-dir: 2.1.0
@@ -3914,8 +3902,8 @@ packages:
   /@babel/regjsgen@0.8.0:
     resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
 
-  /@babel/runtime-corejs2@7.24.5:
-    resolution: {integrity: sha512-cC9jiO6s/IN+xwCHYy1AGrcFJ4bwgIwb8HX1KaoEpRsznLlO4x9eBP6AX7RIeMSWlQqEj2WHox637OS8cDq6Ew==}
+  /@babel/runtime-corejs2@7.24.6:
+    resolution: {integrity: sha512-5UK2PnfpmiCftYGBeJ+SpFIMNaoMPU/eQt1P5ISx0TB7nGGzEMLT4/3PapNZEfGZh+nGxGOGj2t59prGFBhunQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       core-js: 2.6.12
@@ -3930,43 +3918,43 @@ packages:
       regenerator-runtime: 0.14.0
     dev: false
 
-  /@babel/runtime@7.24.5:
-    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
+  /@babel/runtime@7.24.6:
+    resolution: {integrity: sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.0
 
-  /@babel/template@7.24.0:
-    resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
+  /@babel/template@7.24.6:
+    resolution: {integrity: sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/code-frame': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/types': 7.24.6
 
-  /@babel/traverse@7.24.5:
-    resolution: {integrity: sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==}
+  /@babel/traverse@7.24.6:
+    resolution: {integrity: sha512-OsNjaJwT9Zn8ozxcfoBc+RaHdj3gFmCmYoQLUII1o6ZrUwku0BMg80FoOTPx+Gi6XhcQxAYE4xyjPTo4SxEQqw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/generator': 7.24.5
-      '@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.24.5
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/code-frame': 7.24.6
+      '@babel/generator': 7.24.6
+      '@babel/helper-environment-visitor': 7.24.6
+      '@babel/helper-function-name': 7.24.6
+      '@babel/helper-hoist-variables': 7.24.6
+      '@babel/helper-split-export-declaration': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/types': 7.24.6
       debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/types@7.24.5:
-    resolution: {integrity: sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==}
+  /@babel/types@7.24.6:
+    resolution: {integrity: sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.24.1
-      '@babel/helper-validator-identifier': 7.24.5
+      '@babel/helper-string-parser': 7.24.6
+      '@babel/helper-validator-identifier': 7.24.6
       to-fast-properties: 2.0.0
 
   /@bcoe/v8-coverage@0.2.3:
@@ -4165,8 +4153,8 @@ packages:
   /@emotion/babel-plugin@11.11.0:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/runtime': 7.24.5
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/runtime': 7.24.6
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.4
@@ -4239,7 +4227,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
       '@emotion/serialize': 1.1.4
@@ -4285,7 +4273,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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)
@@ -4591,8 +4579,8 @@ packages:
       '@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==}
+  /@floating-ui/react-dom@2.1.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -4628,8 +4616,8 @@ packages:
       '@fortawesome/fontawesome-common-types': 6.5.2
     dev: false
 
-  /@fortawesome/react-fontawesome@0.2.1(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.2.0):
-    resolution: {integrity: sha512-ldr5QO2MneAX5W5WBCYB2pZp/PiHDD1hy9YEBLcXUyJb0qnO86oP8RU+CgmYVSH/R4Dbe2ernhcWOrcgaKD9NQ==}
+  /@fortawesome/react-fontawesome@0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.2.0):
+    resolution: {integrity: sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==}
     peerDependencies:
       '@fortawesome/fontawesome-svg-core': ~1 || ~6
       react: '>=16.3'
@@ -4639,41 +4627,33 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@gitbeaker/core@35.8.1:
-    resolution: {integrity: sha512-KBrDykVKSmU9Q9Gly8KeHOgdc0lZSa435srECxuO0FGqqBcUQ82hPqUc13YFkkdOI9T1JRA3qSFajg8ds0mZKA==}
-    engines: {node: '>=14.2.0'}
+  /@gitbeaker/core@38.12.1:
+    resolution: {integrity: sha512-8XMVcBIdVAAoxn7JtqmZ2Ee8f+AZLcCPmqEmPFOXY2jPS84y/DERISg/+sbhhb18iRy+ZsZhpWgQ/r3CkYNJOQ==}
+    engines: {node: '>=18.0.0'}
     dependencies:
-      '@gitbeaker/requester-utils': 35.8.1
-      form-data: 4.0.0
-      li: 1.3.0
-      mime: 3.0.0
-      query-string: 7.1.3
+      '@gitbeaker/requester-utils': 38.12.1
+      qs: 6.12.0
       xcase: 2.0.1
     dev: true
 
-  /@gitbeaker/node@35.8.1:
-    resolution: {integrity: sha512-g6rX853y61qNhzq9cWtxIEoe2KDeFBtXAeWMGWJnc3nz3WRump2pIICvJqw/yobLZqmTNt+ea6w3/n92Mnbn3g==}
-    engines: {node: '>=14.2.0'}
-    deprecated: Please use its successor @gitbeaker/rest
+  /@gitbeaker/requester-utils@38.12.1:
+    resolution: {integrity: sha512-Rc/DgngS0YPN+AY1s9UnexKSy4Lh0bkQVAq9p7PRbRpXb33SlTeCg8eg/8+A/mrMcHgYmP0XhH8lkizyA5tBUQ==}
+    engines: {node: '>=18.0.0'}
     dependencies:
-      '@gitbeaker/core': 35.8.1
-      '@gitbeaker/requester-utils': 35.8.1
-      delay: 5.0.0
-      got: 11.8.5
+      qs: 6.12.0
       xcase: 2.0.1
     dev: true
 
-  /@gitbeaker/requester-utils@35.8.1:
-    resolution: {integrity: sha512-MFzdH+Z6eJaCZA5ruWsyvm6SXRyrQHjYVR6aY8POFraIy7ceIHOprWCs1R+0ydDZ8KtBnd8OTHjlJ0sLtSFJCg==}
-    engines: {node: '>=14.2.0'}
+  /@gitbeaker/rest@38.12.1:
+    resolution: {integrity: sha512-9KMSDtJ/sIov+5pcH+CAfiJXSiuYgN0KLKQFg0HHWR2DwcjGYkcbmhoZcWsaOWOqq4kihN1l7wX91UoRxxKKTQ==}
+    engines: {node: '>=18.0.0'}
     dependencies:
-      form-data: 4.0.0
-      qs: 6.12.0
-      xcase: 2.0.1
+      '@gitbeaker/core': 38.12.1
+      '@gitbeaker/requester-utils': 38.12.1
     dev: true
 
-  /@googleapis/sheets@5.0.5:
-    resolution: {integrity: sha512-XMoONmgAJm2jYeTYHX4054VcEkElxlgqmnHvt0wAurzEHoGJLdUHhTAJXGPLgSs4WVMPtgU8HLrmk7/U+Qlw7A==}
+  /@googleapis/sheets@7.0.0:
+    resolution: {integrity: sha512-hzlIg/Jco+EdujvP05MznE+thVJ2tXt+4TumHw8xgEhGUfKysVhRuDndmvrJ2hkh5Eloc9BurwXdgw5EQ8p4mQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
       googleapis-common: 7.0.0
@@ -5102,12 +5082,6 @@ packages:
       - supports-color
     dev: true
 
-  /@material-ui/types@4.1.1:
-    resolution: {integrity: sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==}
-    dependencies:
-      '@types/react': 18.2.55
-    dev: true
-
   /@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:
@@ -5140,8 +5114,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
-      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
+      '@babel/runtime': 7.24.6
+      '@floating-ui/react-dom': 2.1.0(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)
       '@popperjs/core': 2.11.8
@@ -5163,8 +5137,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
-      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
+      '@babel/runtime': 7.24.6
+      '@floating-ui/react-dom': 2.1.0(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)
       '@popperjs/core': 2.11.8
@@ -5186,8 +5160,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
-      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
+      '@babel/runtime': 7.24.6
+      '@floating-ui/react-dom': 2.1.0(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)
       '@popperjs/core': 2.11.8
@@ -5219,7 +5193,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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)
@@ -5251,7 +5225,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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)
@@ -5280,7 +5254,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0)
       '@types/react': 18.2.55
       prop-types: 15.8.1
@@ -5297,7 +5271,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@mui/utils': 6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0)
       '@types/react': 18.2.55
       prop-types: 15.8.1
@@ -5316,7 +5290,7 @@ packages:
       '@emotion/styled':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@emotion/cache': 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)
@@ -5338,7 +5312,7 @@ packages:
       '@emotion/styled':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@emotion/cache': 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)
@@ -5362,7 +5336,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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)
@@ -5392,7 +5366,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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': 6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0)
@@ -5425,7 +5399,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@types/prop-types': 15.7.12
       '@types/react': 18.2.55
       prop-types: 15.8.1
@@ -5443,15 +5417,15 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@types/prop-types': 15.7.12
       '@types/react': 18.2.55
       prop-types: 15.8.1
       react: 18.2.0
       react-is: 18.2.0
 
-  /@mui/x-charts@7.4.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-W6A0ZJmfXLeAtuml0Yi7gvjxS6aW/2h6uO9PQNuE/rpV0iIEMU5bVfcJZGMVlh0WY+43FEicI1/8n6FzMcfZdg==}
+  /@mui/x-charts@7.5.1(@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-8vMQyJL13cGXMbp+gm2QdABzFuOpP4hxEa/o6nL3ZpVNp7hja6h9F5bc0FNGR8h/eRN+4+swDnrEebnR0w4cbA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
@@ -5465,7 +5439,7 @@ packages:
       '@emotion/styled':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
@@ -5487,19 +5461,19 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-data-grid-generator@7.4.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-E5kQmjZx/9DXNMvC0BNrzjE5tCkmiIIs2EEedcXAzI6vM4oQv2CxcekNNVcYSL+lI+X7Y+tZ3MwnqviYKk9WDg==}
+  /@mui/x-data-grid-generator@7.5.1(@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-3x3wLwHeq0vBrnrD3Zh6hPCIuOQrjIL2JJ9lhEp6YFAvH69JkzlIfMnV5Q3pAbUVFY8mE4SBaUG6abH/OGZQGQ==}
     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.5
+      '@babel/runtime': 7.24.6
       '@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.4.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-premium': 7.5.1(@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.1
       lru-cache: 7.18.3
@@ -5511,21 +5485,21 @@ packages:
       - react-dom
     dev: false
 
-  /@mui/x-data-grid-premium@7.4.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-BnzkY9T17sNeftnkCU7LSkArUhir7dXN1Xd+prPrqcdEOJcSqFJ1pyQaGmb8IKdj6y86tLlvJZ8N19k/wHzNSw==}
+  /@mui/x-data-grid-premium@7.5.1(@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-aNM4doFIM/0xuAvYs0uoi+JnJsyfGtpB60+KHBxUCGR5vL7/NYlZAhVhzA8r9mfGBqnUUKhVogN5mmqaifa4Wg==}
     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.5
+      '@babel/runtime': 7.24.6
       '@mui/material': link:packages/mui-material/build
       '@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.4.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.4.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)
+      '@mui/x-data-grid': 7.5.1(@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.5.1(@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.1(@types/react@18.2.55)(react@18.2.0)
       '@types/format-util': 1.0.4
       clsx: 2.1.1
       exceljs: 4.4.0
@@ -5539,20 +5513,20 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-data-grid-pro@7.4.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-ORg7zm4oGL7E/hw9hJCk9PYwj31doLCCq52DLtZQr4mZgtx1jptVoq0jSoMRXy3nS2+khkcojALqlkLM6lYdiQ==}
+  /@mui/x-data-grid-pro@7.5.1(@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-ye2NXr5+Tgu1hLBWnIvudrOWeD91/QTmlCRSkTquZImdL+2Q2p3/IyfV9J36i7aZGiYXu+FVaKwqOQmuLKYmWQ==}
     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.5
+      '@babel/runtime': 7.24.6
       '@mui/material': link:packages/mui-material/build
       '@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.4.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)
+      '@mui/x-data-grid': 7.5.1(@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.1(@types/react@18.2.55)(react@18.2.0)
       '@types/format-util': 1.0.4
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -5565,15 +5539,15 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-data-grid@7.4.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-ILu0AVqqHQf4wN/nblsJ/k7PkvlB115vQ/FEiYk7neZlc/kOJOUyst3MWMVClAecZ8+JEs476q40xd4r1CtMfw==}
+  /@mui/x-data-grid@7.5.1(@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-5GuHg95UcphQ3O4LftUEFkNPP00YKUDZoSxmsNJ2+o6pwhHH4f8XIuuXEZJCyEMUiVYQk6/iYZwxJL6CpvbNCw==}
     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.5
+      '@babel/runtime': 7.24.6
       '@mui/material': link:packages/mui-material/build
       '@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)
@@ -5588,8 +5562,8 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-date-pickers-pro@7.4.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+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-9U5BBQIRq+hl3/SVhmYJcAnB8EEBQEyqeKCyAks57tMaICiZhW8Adt/P+v3QmMRoQfEys8VEFUL/L/x3Mdu5rA==}
+  /@mui/x-date-pickers-pro@7.5.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aTBPoPE2CnTNMnE80wKJcypM39n7g6hYrvhOF+u8uVy0/W61w07AZVMNfVklBxi7QehZn+tfgF9NAfJLcwSL7g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
@@ -5624,18 +5598,19 @@ packages:
       moment-jalaali:
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
       '@mui/material': link:packages/mui-material/build
       '@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-date-pickers': 7.4.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+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': 7.2.0(@types/react@18.2.55)(react@18.2.0)
+      '@mui/x-date-pickers': 7.5.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/x-license': 7.2.1(@types/react@18.2.55)(react@18.2.0)
       clsx: 2.1.1
       date-fns: 2.30.0
       date-fns-jalali: 2.21.3-1
+      dayjs: 1.11.10
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -5644,8 +5619,8 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-date-pickers@7.4.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+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-Xh0LD/PCYIWWSchvtnEHdUfIsnANA0QOppUkCJ+4b8mN7z+TMEBA/LHmzA2+edxo7eanyfJ7L52znxwPP4vX8Q==}
+  /@mui/x-date-pickers@7.5.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-O3K2pewxk5u9mK8PG0+xgIOAn+GSBRWHtU0ZbzaqCjS8ZbxNT2OhkI0aXqp/W2ECVwxYaGjwtjl3ypQIdqRvjw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
@@ -5680,7 +5655,7 @@ packages:
       moment-jalaali:
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
@@ -5691,6 +5666,7 @@ packages:
       clsx: 2.1.1
       date-fns: 2.30.0
       date-fns-jalali: 2.21.3-1
+      dayjs: 1.11.10
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -5699,21 +5675,21 @@ packages:
       - '@types/react'
     dev: false
 
-  /@mui/x-license@7.2.0(@types/react@18.2.55)(react@18.2.0):
-    resolution: {integrity: sha512-z9mqsfNPVFqjfxcPgz15o29Vb3FupSImwpMd5CFjZqNasJu3ptLpKxbIUnTtJMUicRdhsVfm3d93Z5XQkq1JuQ==}
+  /@mui/x-license@7.2.1(@types/react@18.2.55)(react@18.2.0):
+    resolution: {integrity: sha512-v0ObZw6wWu5GGre/AhASXay3Rw+aKWO0ID8yhjzmQliUfE1AYrNUw5KsiK/gNVE2YPRTYZKhIqCivtkNU+rIGA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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@7.4.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-gUAZ21wUbc4cpk5sAsUjZNtdryxIVgVYRYiZsz8OTzDk82JUlGmULF6Tpex93NYI+tykkrz1+/4/Tg9MIIAKUg==}
+  /@mui/x-tree-view@7.5.1(@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-b4Lfclg1Lpa+kSs305snl/xFG5yOxq3/oVZEyPIseg8oOfl0r79UKqCIdO2iQqQydjUsUMbLtnR9TFypxlwCbQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
@@ -5722,7 +5698,7 @@ packages:
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@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.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
@@ -6626,7 +6602,7 @@ packages:
       next: ^12.0.0 || ^13.0.0 || ^14.0.0
     dependencies:
       '@pigment-css/unplugin': 0.0.10(@types/react@18.2.55)(react@18.2.0)
-      next: 14.2.3(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+      next: 14.2.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
       - '@types/react'
       - react
@@ -6638,11 +6614,11 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/types': 7.24.6
       '@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)
@@ -6669,11 +6645,11 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/helper-plugin-utils': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/types': 7.24.6
       '@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)
@@ -6698,7 +6674,7 @@ packages:
   /@pigment-css/unplugin@0.0.10(@types/react@18.2.55)(react@18.2.0):
     resolution: {integrity: sha512-ypzpEZPIYRDP/BInXWEH6cjVMnHdiCuC1k5qaLaJMIRemWDtWpMt5bpgtIigLsP8BFXdYxoH23RRbzUXuuqc1Q==}
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       '@pigment-css/react': 0.0.10(@types/react@18.2.55)(react@18.2.0)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
@@ -6715,8 +6691,8 @@ packages:
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/preset-typescript': 7.24.6(@babel/core@7.24.6)
       '@pigment-css/react': 0.0.9(@types/react@18.2.55)(react@18.2.0)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
@@ -6734,12 +6710,12 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@playwright/test@1.44.0:
-    resolution: {integrity: sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==}
+  /@playwright/test@1.44.1:
+    resolution: {integrity: sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      playwright: 1.44.0
+      playwright: 1.44.1
 
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
@@ -6919,95 +6895,95 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.24.5):
+  /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.24.6):
     resolution: {integrity: sha512-XzRd8MJGo4Zc5KsphDHBYJzS1ryOHg8I2gOZDAUCGcwLFhdyGu1zBNDJYH2GFyDrInn9TzAbRIf3d4O+eltXQQ==}
     engines: {node: '>=18'}
     dependencies:
-      '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.5)
+      '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.6)
     transitivePeerDependencies:
       - '@babel/preset-env'
       - supports-color
     dev: false
 
-  /@react-native/babel-preset@0.73.21(@babel/core@7.24.5)(@babel/preset-env@7.24.5):
+  /@react-native/babel-preset@0.73.21(@babel/core@7.24.6)(@babel/preset-env@7.24.6):
     resolution: {integrity: sha512-WlFttNnySKQMeujN09fRmrdWqh46QyJluM5jdtDNrkl/2Hx6N4XeDUGhABvConeK95OidVO7sFFf7sNebVXogA==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@babel/core': ^7.24.5
-    dependencies:
-      '@babel/core': 7.24.5
-      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.5)
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.5)
-      '@babel/plugin-proposal-export-default-from': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.5)
-      '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.5)
-      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.5)
-      '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.5)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.5)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.5)
-      '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-block-scoping': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-classes': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-destructuring': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-parameters': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-private-property-in-object': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-runtime': 7.24.3(@babel/core@7.24.5)
-      '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.5)
-      '@babel/template': 7.24.0
-      '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.24.5)
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.5)
-      react-refresh: 0.14.0
+      '@babel/core': ^7.24.6
+    dependencies:
+      '@babel/core': 7.24.6
+      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.6)
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.6)
+      '@babel/plugin-proposal-export-default-from': 7.24.1(@babel/core@7.24.6)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.6)
+      '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.6)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.6)
+      '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.6)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.6)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.6)
+      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.6)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.6)
+      '@babel/plugin-transform-arrow-functions': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-async-to-generator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-block-scoping': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-classes': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-computed-properties': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-destructuring': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.6)
+      '@babel/plugin-transform-function-name': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-literals': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-commonjs': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-parameters': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-private-methods': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-private-property-in-object': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-display-name': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-jsx': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-jsx-self': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.6)
+      '@babel/plugin-transform-runtime': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-shorthand-properties': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-spread': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-sticky-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-typescript': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-unicode-regex': 7.24.6(@babel/core@7.24.6)
+      '@babel/template': 7.24.6
+      '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.24.6)
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.6)
+      react-refresh: 0.14.2
     transitivePeerDependencies:
       - '@babel/preset-env'
       - supports-color
     dev: false
 
-  /@react-native/codegen@0.73.3(@babel/preset-env@7.24.5):
+  /@react-native/codegen@0.73.3(@babel/preset-env@7.24.6):
     resolution: {integrity: sha512-sxslCAAb8kM06vGy9Jyh4TtvjhcP36k/rvj2QE2Jdhdm61KvfafCATSIsOfc0QvnduWFcpXUPvAVyYwuv7PYDg==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@babel/preset-env': ^7.24.5
+      '@babel/preset-env': ^7.24.6
     dependencies:
-      '@babel/parser': 7.24.5
-      '@babel/preset-env': 7.24.5(@babel/core@7.24.5)
+      '@babel/parser': 7.24.6
+      '@babel/preset-env': 7.24.6(@babel/core@7.24.6)
       flow-parser: 0.206.0
       glob: 7.2.3
       invariant: 2.2.4
-      jscodeshift: 0.14.0(@babel/preset-env@7.24.5)
+      jscodeshift: 0.14.0(@babel/preset-env@7.24.6)
       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.5)(@babel/preset-env@7.24.5):
+  /@react-native/community-cli-plugin@0.73.17(@babel/core@7.24.6)(@babel/preset-env@7.24.6):
     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.5)(@babel/preset-env@7.24.5)
+      '@react-native/metro-babel-transformer': 0.73.15(@babel/core@7.24.6)(@babel/preset-env@7.24.6)
       chalk: 4.1.2
       execa: 5.1.1
       metro: 0.80.7
@@ -7061,14 +7037,14 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /@react-native/metro-babel-transformer@0.73.15(@babel/core@7.24.5)(@babel/preset-env@7.24.5):
+  /@react-native/metro-babel-transformer@0.73.15(@babel/core@7.24.6)(@babel/preset-env@7.24.6):
     resolution: {integrity: sha512-LlkSGaXCz+xdxc9819plmpsl4P4gZndoFtpjN3GMBIu6f7TBV0GVbyJAU4GE8fuAWPVSVL5ArOcdkWKSbI1klw==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@react-native/babel-preset': 0.73.21(@babel/core@7.24.5)(@babel/preset-env@7.24.5)
+      '@babel/core': 7.24.6
+      '@react-native/babel-preset': 0.73.21(@babel/core@7.24.6)(@babel/preset-env@7.24.6)
       hermes-parser: 0.15.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
@@ -7088,7 +7064,7 @@ packages:
     dependencies:
       invariant: 2.2.4
       nullthrows: 1.1.1
-      react-native: 0.73.6(@babel/core@7.24.5)(@babel/preset-env@7.24.5)(react@18.2.0)
+      react-native: 0.73.6(@babel/core@7.24.6)(@babel/preset-env@7.24.6)(react@18.2.0)
     dev: false
 
   /@react-spring/animated@9.7.3(react@18.2.0):
@@ -7139,7 +7115,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.5)(@babel/preset-env@7.24.5)(react@18.2.0)
+      react-native: 0.73.6(@babel/core@7.24.6)(@babel/preset-env@7.24.6)(react@18.2.0)
     dev: false
 
   /@react-spring/rafz@9.7.3:
@@ -7232,7 +7208,7 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@types/react-reconciler': 0.26.7
       '@types/webxr': 0.5.14
       base64-js: 1.5.1
@@ -7240,7 +7216,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.5)(@babel/preset-env@7.24.5)(react@18.2.0)
+      react-native: 0.73.6(@babel/core@7.24.6)(@babel/preset-env@7.24.6)(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
@@ -7424,11 +7400,6 @@ packages:
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
-  /@sindresorhus/is@4.6.0:
-    resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
-    engines: {node: '>=10'}
-    dev: true
-
   /@sindresorhus/merge-streams@2.2.1:
     resolution: {integrity: sha512-255V7MMIKw6aQ43Wbqp9HZ+VHn6acddERTLiiLnlcPLU9PdTq9Aijl12oklAgUEblLWye+vHLzmqBx6f2TGcZw==}
     engines: {node: '>=18'}
@@ -7660,46 +7631,58 @@ packages:
       '@swc/counter': 0.1.3
       tslib: 2.6.2
 
-  /@szmarczak/http-timer@4.0.6:
-    resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
-    engines: {node: '>=10'}
+  /@testing-library/dom@10.1.0:
+    resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==}
+    engines: {node: '>=18'}
     dependencies:
-      defer-to-connect: 2.0.1
-    dev: true
+      '@babel/code-frame': 7.24.6
+      '@babel/runtime': 7.24.6
+      '@types/aria-query': 5.0.1
+      aria-query: 5.3.0
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      pretty-format: 27.5.1
 
   /@testing-library/dom@9.3.4:
     resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
     engines: {node: '>=14'}
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/runtime': 7.24.5
+      '@babel/code-frame': 7.24.6
+      '@babel/runtime': 7.24.6
       '@types/aria-query': 5.0.1
       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
+    dev: true
 
-  /@testing-library/react@14.3.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==}
-    engines: {node: '>=14'}
+  /@testing-library/react@15.0.7(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==}
+    engines: {node: '>=18'}
     peerDependencies:
+      '@types/react': 18.2.55
       react: ^18.0.0
       react-dom: ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
-      '@testing-library/dom': 9.3.4
+      '@babel/runtime': 7.24.6
+      '@testing-library/dom': 10.1.0
+      '@types/react': 18.2.55
       '@types/react-dom': 18.3.0
       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):
+  /@testing-library/user-event@14.5.2(@testing-library/dom@10.1.0):
     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
+      '@testing-library/dom': 10.1.0
     dev: true
 
   /@theme-ui/color-modes@0.16.2(@emotion/react@11.11.4)(react@18.2.0):
@@ -7831,30 +7814,30 @@ packages:
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/parser': 7.24.6
+      '@babel/types': 7.24.6
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
-      '@types/babel__traverse': 7.20.5
+      '@types/babel__traverse': 7.20.6
     dev: true
 
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
     dev: true
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/parser': 7.24.6
+      '@babel/types': 7.24.6
     dev: true
 
-  /@types/babel__traverse@7.20.5:
-    resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==}
+  /@types/babel__traverse@7.20.6:
+    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
     dependencies:
-      '@babel/types': 7.24.5
+      '@babel/types': 7.24.6
     dev: true
 
   /@types/body-parser@1.19.2:
@@ -7864,15 +7847,6 @@ packages:
       '@types/node': 18.19.33
     dev: false
 
-  /@types/cacheable-request@6.0.2:
-    resolution: {integrity: sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA==}
-    dependencies:
-      '@types/http-cache-semantics': 4.0.1
-      '@types/keyv': 3.1.4
-      '@types/node': 18.19.33
-      '@types/responselike': 1.0.0
-    dev: true
-
   /@types/chai-dom@1.11.3:
     resolution: {integrity: sha512-EUEZI7uID4ewzxnU7DJXtyvykhQuwe+etJ1wwOiJyQRTH/ifMWKX+ghiXkxCUvNJ6IQDodf0JXhuP6zZcy2qXQ==}
     dependencies:
@@ -7977,10 +7951,6 @@ packages:
     resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==}
     dev: true
 
-  /@types/http-cache-semantics@4.0.1:
-    resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
-    dev: true
-
   /@types/http-errors@2.0.1:
     resolution: {integrity: sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==}
     dev: false
@@ -8037,12 +8007,6 @@ packages:
       '@types/node': 18.19.33
     dev: false
 
-  /@types/keyv@3.1.4:
-    resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
-    dependencies:
-      '@types/node': 18.19.33
-    dev: true
-
   /@types/lodash.mergewith@4.6.7:
     resolution: {integrity: sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A==}
     dependencies:
@@ -8104,10 +8068,6 @@ packages:
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
 
-  /@types/prettier@2.7.3:
-    resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==}
-    dev: true
-
   /@types/promise.allsettled@1.0.3:
     resolution: {integrity: sha512-b/IFHHTkYkTqu41IH9UtpICwqrpKj2oNlb4KHPzFQDMiz+h1BgAeATeO0/XTph4+UkH9W2U0E4B4j64KWOovag==}
     dev: false
@@ -8146,14 +8106,6 @@ packages:
       '@types/react': 18.2.55
     dev: false
 
-  /@types/react-swipeable-views-utils@0.13.7:
-    resolution: {integrity: sha512-ED8pf8dq3S79uWtP8EnSdrg7dUCrxyL9Uapq1dSA2mz+H83SjS8vsqmlFWmmBQoTuEHsQp5Ru9fxxsofQ+bI9Q==}
-    dependencies:
-      '@material-ui/types': 4.1.1
-      '@types/react': 18.2.55
-      '@types/react-swipeable-views': 0.13.5
-    dev: true
-
   /@types/react-swipeable-views@0.13.5:
     resolution: {integrity: sha512-ni6WjO7gBq2xB2Y/ZiRdQOgjGOxIik5ow2s7xKieDq8DxsXTdV46jJslSBVK2yoIJHf6mG3uqNTwxwgzbXRRzg==}
     dependencies:
@@ -8184,12 +8136,6 @@ packages:
       '@types/scheduler': 0.16.8
       csstype: 3.1.3
 
-  /@types/responselike@1.0.0:
-    resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
-    dependencies:
-      '@types/node': 18.19.33
-    dev: true
-
   /@types/retry@0.12.0:
     resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
     dev: false
@@ -8216,8 +8162,8 @@ packages:
       '@types/node': 18.19.33
     dev: false
 
-  /@types/sinon@10.0.20:
-    resolution: {integrity: sha512-2APKKruFNCAZgx3daAyACGzWuJ028VVCUDk6o2rw/Z4PXT0ogwdV4KUegW0MwVs0Zu59auPXbbuBJHF12Sx1Eg==}
+  /@types/sinon@17.0.3:
+    resolution: {integrity: sha512-j3uovdn8ewky9kRBG19bOwaZbexJu/XjtkHyjvUgt4xfPFz18dcORIMqnYh66Fx3Powhcr85NT5+er3+oViapw==}
     dependencies:
       '@types/sinonjs__fake-timers': 8.1.2
     dev: true
@@ -8418,17 +8364,17 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-react@4.2.1(vite@5.2.11):
-    resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==}
+  /@vitejs/plugin-react@4.3.0(vite@5.2.11):
+    resolution: {integrity: sha512-KcEbMsn4Dpk+LIbHMj7gDPRKaTMStxxWRkRmxsg/jVdFdJCZWt1SchZcf0M4t8lIKdwwMsEyzhrcOXRrDPtOBw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/plugin-transform-react-jsx-self': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.6)
       '@types/babel__core': 7.20.5
-      react-refresh: 0.14.0
+      react-refresh: 0.14.2
       vite: 5.2.11(@types/node@18.19.33)
     transitivePeerDependencies:
       - supports-color
@@ -8563,7 +8509,7 @@ packages:
     resolution: {integrity: sha512-DATsRHLqq8cWYkTD8iwEmvWzG2UvmsFN6Poru4NJ1RwjxtcEdnNKCKZBaBdlH5XyhL7jRTcURUMyee3lqGljhg==}
     engines: {node: '>=16.0.0'}
     dependencies:
-      '@babel/generator': 7.24.5
+      '@babel/generator': 7.24.6
       '@wyw-in-js/shared': 0.5.3
     transitivePeerDependencies:
       - supports-color
@@ -8582,16 +8528,16 @@ packages:
     resolution: {integrity: sha512-Bt1Ey8MN88FzYJekvZBYFT69157UmwURj2N7Dy8yauErcxtpuNe/1P0Jxd56tdFz0f6uooat5ntzvWgej/iBZg==}
     engines: {node: '>=16.0.0'}
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/generator': 7.24.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
-      '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/generator': 7.24.6
+      '@babel/helper-module-imports': 7.24.6
+      '@babel/plugin-transform-modules-commonjs': 7.24.6(@babel/core@7.24.6)
+      '@babel/template': 7.24.6
+      '@babel/traverse': 7.24.6
+      '@babel/types': 7.24.6
       '@wyw-in-js/processor-utils': 0.5.3
       '@wyw-in-js/shared': 0.5.3
-      babel-merge: 3.0.0(@babel/core@7.24.5)
+      babel-merge: 3.0.0(@babel/core@7.24.6)
       cosmiconfig: 8.2.0
       happy-dom: 12.10.3
       source-map: 0.7.4
@@ -8737,6 +8683,7 @@ packages:
 
   /airbnb-prop-types@2.16.0(react@18.2.0):
     resolution: {integrity: sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==}
+    deprecated: This package has been renamed to 'prop-types-tools'
     peerDependencies:
       react: ^0.14 || ^15.0.0 || ^16.0.0-alpha
     dependencies:
@@ -8958,6 +8905,7 @@ packages:
   /are-we-there-yet@3.0.1:
     resolution: {integrity: sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
     dependencies:
       delegates: 1.0.0
       readable-stream: 3.6.0
@@ -8979,12 +8927,12 @@ packages:
     resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
     dependencies:
       deep-equal: 2.2.3
+    dev: true
 
   /aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
@@ -9259,8 +9207,8 @@ packages:
     dependencies:
       possible-typed-array-names: 1.0.0
 
-  /aws-sdk@2.1623.0:
-    resolution: {integrity: sha512-SFPc+QJqoghsE0nn6YSmrDDDPpWc3m4rcDQYg6W3GQek+f1v6kycxM5+N58pMZ2iWhRSOTf9NQRcZj0ZU3PklQ==}
+  /aws-sdk@2.1628.0:
+    resolution: {integrity: sha512-mUjvITHmV46JbCTQR8TovWzJEHZtbC9cTRySXyuIuuYQNjA2RrbfqLXXKR/xru+vPFKnfTLw+QQ/BC2l1/Ln5g==}
     engines: {node: '>= 10.0.0'}
     requiresBuild: true
     dependencies:
@@ -9295,34 +9243,34 @@ packages:
       dequal: 2.0.3
     dev: true
 
-  /babel-core@7.0.0-bridge.0(@babel/core@7.24.5):
+  /babel-core@7.0.0-bridge.0(@babel/core@7.24.6):
     resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
     dev: false
 
-  /babel-loader@9.1.3(@babel/core@7.24.5)(webpack@5.91.0):
+  /babel-loader@9.1.3(@babel/core@7.24.6)(webpack@5.91.0):
     resolution: {integrity: sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
       webpack: '>=5'
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       find-cache-dir: 4.0.0
       schema-utils: 4.2.0
       webpack: 5.91.0(webpack-cli@5.1.4)
     dev: true
 
-  /babel-merge@3.0.0(@babel/core@7.24.5):
+  /babel-merge@3.0.0(@babel/core@7.24.6):
     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.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       deepmerge: 2.2.1
       object.omit: 3.0.0
 
@@ -9335,7 +9283,7 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.6
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.0
@@ -9348,7 +9296,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       cosmiconfig: 7.0.1
       resolve: 1.22.8
 
@@ -9364,56 +9312,56 @@ packages:
   /babel-plugin-optimize-clsx@2.6.2:
     resolution: {integrity: sha512-TxgyjdVb7trTAsg/J5ByqJdbBPTYR8yaWLGQGpSxwygw8IFST5gEc1J9QktCGCHCb+69t04DWg9KOE0y2hN30w==}
     dependencies:
-      '@babel/generator': 7.24.5
-      '@babel/template': 7.24.0
-      '@babel/types': 7.24.5
+      '@babel/generator': 7.24.6
+      '@babel/template': 7.24.6
+      '@babel/types': 7.24.6
       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.5):
+  /babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.24.6):
     resolution: {integrity: sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.24.5
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.5)
+      '@babel/compat-data': 7.24.6
+      '@babel/core': 7.24.6
+      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.6)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.5):
+  /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.6):
     resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.6)
       core-js-compat: 3.36.1
     transitivePeerDependencies:
       - supports-color
 
-  /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.5):
+  /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.6):
     resolution: {integrity: sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.6)
     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.5):
+  /babel-plugin-tester@11.0.4(@babel/core@7.24.6):
     resolution: {integrity: sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==}
     engines: {node: ^14.20.0 || ^16.16.0 || >=18.5.0}
     peerDependencies:
-      '@babel/core': ^7.24.5
+      '@babel/core': ^7.24.6
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       core-js: 3.32.1
       debug: 4.3.4(supports-color@8.1.1)
       lodash.mergewith: 4.6.2
@@ -9423,10 +9371,10 @@ packages:
       - supports-color
     dev: true
 
-  /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.5):
+  /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.6):
     resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==}
     dependencies:
-      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.6)
     transitivePeerDependencies:
       - '@babel/core'
     dev: false
@@ -9721,24 +9669,6 @@ packages:
       unique-filename: 3.0.0
     dev: true
 
-  /cacheable-lookup@5.0.4:
-    resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==}
-    engines: {node: '>=10.6.0'}
-    dev: true
-
-  /cacheable-request@7.0.2:
-    resolution: {integrity: sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==}
-    engines: {node: '>=8'}
-    dependencies:
-      clone-response: 1.0.3
-      get-stream: 5.2.0
-      http-cache-semantics: 4.1.1
-      keyv: 4.5.4
-      lowercase-keys: 2.0.0
-      normalize-url: 6.1.0
-      responselike: 2.0.1
-    dev: true
-
   /caching-transform@4.0.0:
     resolution: {integrity: sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==}
     engines: {node: '>=8'}
@@ -10036,7 +9966,7 @@ packages:
     hasBin: true
     dependencies:
       archiver: 3.1.1
-      aws-sdk: 2.1623.0
+      aws-sdk: 2.1628.0
       fs-extra: 6.0.1
       glob: 7.2.3
       gunzip-maybe: 1.4.2
@@ -10141,12 +10071,6 @@ packages:
       kind-of: 6.0.3
       shallow-clone: 3.0.1
 
-  /clone-response@1.0.3:
-    resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
-    dependencies:
-      mimic-response: 1.0.1
-    dev: true
-
   /clone@1.0.4:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
@@ -10251,6 +10175,11 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  /commander@6.2.1:
+    resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -10668,7 +10597,7 @@ packages:
   /css-jss@10.10.0:
     resolution: {integrity: sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       jss-preset-default: 10.10.0
     dev: false
@@ -10721,7 +10650,7 @@ packages:
   /css-vendor@2.0.8:
     resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       is-in-browser: 1.1.3
     dev: false
 
@@ -10849,13 +10778,12 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
-  /danger@11.3.1:
-    resolution: {integrity: sha512-+slkGnbf0czY7g4LSuYpYkKJgFrb9YIXFJvV5JAuLLF39CXLlUw0iebgeL3ASK1t6RDb8xe+Rk2F5ilh2Hdv2w==}
-    engines: {node: '>=14.13.1'}
+  /danger@12.3.0:
+    resolution: {integrity: sha512-S5vGNCjWfO5VkHnguq+LFfzJWSJdGuzhGxWAv1TtRmJKxNnL2dW/zWM96wPSJ7ZU6ggtHIbR+F8PD3c4NHzuzA==}
+    engines: {node: '>=18'}
     hasBin: true
     dependencies:
-      '@gitbeaker/core': 35.8.1
-      '@gitbeaker/node': 35.8.1
+      '@gitbeaker/rest': 38.12.1
       '@octokit/rest': 18.12.0
       async-retry: 1.2.3
       chalk: 2.4.2
@@ -10919,7 +10847,7 @@ packages:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
 
   /date-format@4.0.13:
     resolution: {integrity: sha512-bnYCwf8Emc3pTD8pXnre+wfnjGtfi5ncMDKy7+cWZXbmRAsdWkOQHrfC1yz/KiwP5thDp2kCHWYWKBX4HP1hoQ==}
@@ -10995,18 +10923,6 @@ packages:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
     dev: false
 
-  /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==}
-    engines: {node: '>=10'}
-    dependencies:
-      mimic-response: 3.1.0
-    dev: true
-
   /dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
     dev: true
@@ -11039,6 +10955,7 @@ packages:
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.1
       which-typed-array: 1.1.14
+    dev: true
 
   /deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
@@ -11070,11 +10987,6 @@ packages:
     dependencies:
       clone: 1.0.4
 
-  /defer-to-connect@2.0.1:
-    resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
-    engines: {node: '>=10'}
-    dev: true
-
   /define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -11102,11 +11014,6 @@ packages:
       robust-predicates: 3.0.2
     dev: false
 
-  /delay@5.0.0:
-    resolution: {integrity: sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==}
-    engines: {node: '>=10'}
-    dev: true
-
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -11149,7 +11056,6 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: true
 
   /destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
@@ -11228,7 +11134,7 @@ packages:
   /dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       csstype: 3.1.3
     dev: false
 
@@ -11724,19 +11630,19 @@ packages:
       semver: 6.3.1
     dev: true
 
-  /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==}
+  /eslint-config-airbnb-typescript@18.0.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-oc+Lxzgzsu8FQyFVa4QFaVKiitTYiiW3frB9KYW5OWdPrqFc7FzxgB20hP4cHMlr+MBzGcLl3jnCOVOydL9mIg==}
     peerDependencies:
-      '@typescript-eslint/eslint-plugin': ^5.13.0 || ^6.0.0
-      '@typescript-eslint/parser': ^5.0.0 || ^6.0.0
-      eslint: ^7.32.0 || ^8.2.0
-      eslint-plugin-import: ^2.25.3
+      '@typescript-eslint/eslint-plugin': ^7.0.0
+      '@typescript-eslint/parser': ^7.0.0
+      eslint: ^8.56.0
     dependencies:
       '@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.21.0)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0)
+    transitivePeerDependencies:
+      - eslint-plugin-import
     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.2)(eslint-plugin-react@7.34.1)(eslint@8.57.0):
@@ -11895,7 +11801,7 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       aria-query: 5.3.0
       array-includes: 3.1.7
       array.prototype.flatmap: 1.3.2
@@ -12095,8 +12001,8 @@ packages:
     resolution: {integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==}
     engines: {node: '>=8.3.0'}
     dependencies:
-      '@babel/traverse': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/traverse': 7.24.6
+      '@babel/types': 7.24.6
       c8: 7.12.0
     transitivePeerDependencies:
       - supports-color
@@ -12384,16 +12290,11 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
-  /filter-obj@1.1.0:
-    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /final-form@4.20.10:
     resolution: {integrity: sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
     dev: false
 
   /finalhandler@1.1.2:
@@ -12686,6 +12587,7 @@ packages:
   /fstream@1.0.12:
     resolution: {integrity: sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==}
     engines: {node: '>=0.6'}
+    deprecated: This package is no longer supported.
     dependencies:
       graceful-fs: 4.2.11
       inherits: 2.0.4
@@ -12711,6 +12613,7 @@ packages:
   /gauge@4.0.4:
     resolution: {integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
     dependencies:
       aproba: 2.0.0
       color-support: 1.1.3
@@ -12798,13 +12701,6 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /get-stream@5.2.0:
-    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
-    engines: {node: '>=8'}
-    dependencies:
-      pump: 3.0.0
-    dev: true
-
   /get-stream@6.0.0:
     resolution: {integrity: sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==}
     engines: {node: '>=10'}
@@ -12917,6 +12813,7 @@ packages:
 
   /glob@7.1.6:
     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -12927,6 +12824,7 @@ packages:
 
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -12938,6 +12836,7 @@ packages:
   /glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -13080,23 +12979,6 @@ packages:
     dependencies:
       get-intrinsic: 1.2.4
 
-  /got@11.8.5:
-    resolution: {integrity: sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==}
-    engines: {node: '>=10.19.0'}
-    dependencies:
-      '@sindresorhus/is': 4.6.0
-      '@szmarczak/http-timer': 4.0.6
-      '@types/cacheable-request': 6.0.2
-      '@types/responselike': 1.0.0
-      cacheable-lookup: 5.0.4
-      cacheable-request: 7.0.2
-      decompress-response: 6.0.0
-      http2-wrapper: 1.0.3
-      lowercase-keys: 2.0.0
-      p-cancelable: 2.1.1
-      responselike: 2.0.1
-    dev: true
-
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -13422,14 +13304,6 @@ packages:
       - debug
     dev: true
 
-  /http2-wrapper@1.0.3:
-    resolution: {integrity: sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==}
-    engines: {node: '>=10.19.0'}
-    dependencies:
-      quick-lru: 5.1.1
-      resolve-alpn: 1.2.1
-    dev: true
-
   /https-proxy-agent@2.2.4:
     resolution: {integrity: sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==}
     engines: {node: '>= 4.5.0'}
@@ -13529,8 +13403,8 @@ packages:
       queue: 6.0.2
     dev: false
 
-  /imask@7.6.0:
-    resolution: {integrity: sha512-6EHsq1q7v5+M4Vas2MGrs2oRpxPRWPwPDiL0HmG1ikBI/0hOwvkxRhVRFQnWIlZcTG7R8iw0az5V+z868qnQ9A==}
+  /imask@7.6.1:
+    resolution: {integrity: sha512-sJlIFM7eathUEMChTh9Mrfw/IgiWgJqBKq2VNbyXvBZ7ev/IlO6/KQTKlV/Fm+viQMLrFLG/zCuudrLIwgK2dg==}
     engines: {npm: '>=4.0.0'}
     dependencies:
       '@babel/runtime-corejs3': 7.24.4
@@ -13584,6 +13458,7 @@ packages:
 
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
@@ -13975,6 +13850,7 @@ packages:
 
   /is-weakmap@2.0.1:
     resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
+    dev: true
 
   /is-weakref@1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
@@ -13986,6 +13862,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
+    dev: true
 
   /is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
@@ -14049,7 +13926,7 @@ packages:
     resolution: {integrity: sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -14061,8 +13938,8 @@ packages:
     resolution: {integrity: sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/parser': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/parser': 7.24.6
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -14200,7 +14077,7 @@ packages:
     resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.24.6
       '@jest/types': 29.6.3
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
@@ -14311,8 +14188,8 @@ packages:
     peerDependencies:
       jscodeshift: ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0
     dependencies:
-      '@babel/traverse': 7.24.5
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.5)
+      '@babel/traverse': 7.24.6
+      jscodeshift: 0.15.2(@babel/preset-env@7.24.6)
       jscodeshift-find-imports: 2.0.4(jscodeshift@0.15.2)
     transitivePeerDependencies:
       - supports-color
@@ -14323,26 +14200,26 @@ packages:
     peerDependencies:
       jscodeshift: ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0
     dependencies:
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.5)
+      jscodeshift: 0.15.2(@babel/preset-env@7.24.6)
     dev: false
 
-  /jscodeshift@0.14.0(@babel/preset-env@7.24.5):
+  /jscodeshift@0.14.0(@babel/preset-env@7.24.6):
     resolution: {integrity: sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==}
     hasBin: true
     peerDependencies:
-      '@babel/preset-env': ^7.24.5
-    dependencies:
-      '@babel/core': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.5)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.5)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
-      '@babel/preset-env': 7.24.5(@babel/core@7.24.5)
-      '@babel/preset-flow': 7.24.1(@babel/core@7.24.5)
-      '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5)
-      '@babel/register': 7.23.7(@babel/core@7.24.5)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.24.5)
+      '@babel/preset-env': ^7.24.6
+    dependencies:
+      '@babel/core': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.6)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.6)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-commonjs': 7.24.6(@babel/core@7.24.6)
+      '@babel/preset-env': 7.24.6(@babel/core@7.24.6)
+      '@babel/preset-flow': 7.24.1(@babel/core@7.24.6)
+      '@babel/preset-typescript': 7.24.6(@babel/core@7.24.6)
+      '@babel/register': 7.24.6(@babel/core@7.24.6)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.24.6)
       chalk: 4.1.2
       flow-parser: 0.206.0
       graceful-fs: 4.2.11
@@ -14356,27 +14233,27 @@ packages:
       - supports-color
     dev: false
 
-  /jscodeshift@0.15.2(@babel/preset-env@7.24.5):
+  /jscodeshift@0.15.2(@babel/preset-env@7.24.6):
     resolution: {integrity: sha512-FquR7Okgmc4Sd0aEDwqho3rEiKR3BdvuG9jfdHjLJ6JQoWSMpavug3AoIfnfWhxFlf+5pzQh8qjqz0DWFrNQzA==}
     hasBin: true
     peerDependencies:
-      '@babel/preset-env': ^7.24.5
+      '@babel/preset-env': ^7.24.6
     peerDependenciesMeta:
       '@babel/preset-env':
         optional: true
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.5)
-      '@babel/plugin-transform-optional-chaining': 7.24.5(@babel/core@7.24.5)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.5)
-      '@babel/preset-env': 7.24.5(@babel/core@7.24.5)
-      '@babel/preset-flow': 7.24.1(@babel/core@7.24.5)
-      '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5)
-      '@babel/register': 7.23.7(@babel/core@7.24.5)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.24.5)
+      '@babel/core': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/plugin-transform-class-properties': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-modules-commonjs': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-optional-chaining': 7.24.6(@babel/core@7.24.6)
+      '@babel/plugin-transform-private-methods': 7.24.6(@babel/core@7.24.6)
+      '@babel/preset-env': 7.24.6(@babel/core@7.24.6)
+      '@babel/preset-flow': 7.24.1(@babel/core@7.24.6)
+      '@babel/preset-typescript': 7.24.6(@babel/core@7.24.6)
+      '@babel/register': 7.24.6(@babel/core@7.24.6)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.24.6)
       chalk: 4.1.2
       flow-parser: 0.206.0
       graceful-fs: 4.2.11
@@ -14531,7 +14408,7 @@ packages:
   /jss-plugin-camel-case@10.10.0:
     resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       hyphenate-style-name: 1.0.4
       jss: 10.10.0
     dev: false
@@ -14539,7 +14416,7 @@ packages:
   /jss-plugin-compose@10.10.0:
     resolution: {integrity: sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -14547,21 +14424,21 @@ packages:
   /jss-plugin-default-unit@10.10.0:
     resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
     dev: false
 
   /jss-plugin-expand@10.10.0:
     resolution: {integrity: sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
     dev: false
 
   /jss-plugin-extend@10.10.0:
     resolution: {integrity: sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -14569,14 +14446,14 @@ packages:
   /jss-plugin-global@10.10.0:
     resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
     dev: false
 
   /jss-plugin-nested@10.10.0:
     resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -14584,14 +14461,14 @@ packages:
   /jss-plugin-props-sort@10.10.0:
     resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       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.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -14599,7 +14476,7 @@ packages:
   /jss-plugin-rule-value-observable@10.10.0:
     resolution: {integrity: sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       symbol-observable: 1.2.0
     dev: false
@@ -14607,7 +14484,7 @@ packages:
   /jss-plugin-template@10.10.0:
     resolution: {integrity: sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       tiny-warning: 1.0.3
     dev: false
@@ -14615,7 +14492,7 @@ packages:
   /jss-plugin-vendor-prefixer@10.10.0:
     resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       css-vendor: 2.0.8
       jss: 10.10.0
     dev: false
@@ -14623,7 +14500,7 @@ packages:
   /jss-preset-default@10.10.0:
     resolution: {integrity: sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       jss: 10.10.0
       jss-plugin-camel-case: 10.10.0
       jss-plugin-compose: 10.10.0
@@ -14651,7 +14528,7 @@ packages:
   /jss@10.10.0:
     resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       csstype: 3.1.3
       is-in-browser: 1.1.3
       tiny-warning: 1.0.3
@@ -14952,10 +14829,6 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /li@1.3.0:
-    resolution: {integrity: sha512-z34TU6GlMram52Tss5mt1m//ifRIpKH5Dqm7yUVOdHI+BQCs9qGPHFaCUTIzsWX7edN30aa2WrPwR7IO10FHaw==}
-    dev: true
-
   /libnpmaccess@7.0.2:
     resolution: {integrity: sha512-vHBVMw1JFMTgEk15zRsJuSAg7QtGGHpUSEfnbcRL1/gTBag9iEfJbyjpDmdJmwMhvpoLoNBtdAUCdGnaP32hhw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -15262,11 +15135,6 @@ packages:
       tslib: 2.6.2
     dev: true
 
-  /lowercase-keys@2.0.0:
-    resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
-    engines: {node: '>=8'}
-    dev: true
-
   /lru-cache@10.1.0:
     resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
     engines: {node: 14 || >=16.14}
@@ -15443,14 +15311,14 @@ packages:
     resolution: {integrity: sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==}
     dev: false
 
-  /material-ui-popup-state@5.1.1(@mui/material@packages+mui-material+build)(react@18.2.0):
-    resolution: {integrity: sha512-6HbWnQ8hEcx8SVTRd0E29YLBIK0n8/ECBxPtkyYFF7+vG7ACSW/fvCr13JmsTTPdCDLKaY3U7b7cvh08cwISZw==}
+  /material-ui-popup-state@5.1.2(@mui/material@packages+mui-material+build)(react@18.2.0):
+    resolution: {integrity: sha512-+MPpydg2a/NqSbF4vNKbsHeEktiH6j0OPtNud0ZbhElKRc915XdyNH3Z7N+lL/l1erHcsCHB85izHC+zc6GgmQ==}
     engines: {node: '>=16'}
     peerDependencies:
       '@mui/material': ^5.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@mui/material': link:packages/mui-material/build
       '@types/prop-types': 15.7.12
       '@types/react': 18.2.55
@@ -15582,7 +15450,7 @@ packages:
     resolution: {integrity: sha512-b773yA16DsDQiM4OOzCsr1gwEd+iio9au98o3bj7F/bxVyoz1LuYox06BIdsiLL1o4kV5VtzTu3UXSJ2X0ZGXg==}
     engines: {node: '>=18'}
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       hermes-parser: 0.20.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
@@ -15664,15 +15532,15 @@ packages:
     resolution: {integrity: sha512-gWqzfm9YQw9I08L23hcLmY7XNx48W0c0vLEkVEF5P7ZNIOSfX9CkEv0JvTTJWshRYkbgIqsdtpMAHq13LJJ6iA==}
     engines: {node: '>=18'}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
     dev: false
 
   /metro-source-map@0.80.7:
     resolution: {integrity: sha512-6a1m/51ekkAl+ISNBcKQUXTU+AldbbPUHDE3DDDU17Y0HNoovkQR23DB/uH/SzUHQszYxK1fnwUTSxpzOjx+pw==}
     engines: {node: '>=18'}
     dependencies:
-      '@babel/traverse': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/traverse': 7.24.6
+      '@babel/types': 7.24.6
       invariant: 2.2.4
       metro-symbolicate: 0.80.7
       nullthrows: 1.1.1
@@ -15702,10 +15570,10 @@ packages:
     resolution: {integrity: sha512-ENGvQF7wZCtn2rO6jwsYy3XRSPrlm0G/1TgDC8AXdvz0yjfAe1ODSCYWxP8S3JXfjKL5m3b6j9RsV8sQIxsUjQ==}
     engines: {node: '>=18'}
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/generator': 7.24.5
-      '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/generator': 7.24.6
+      '@babel/template': 7.24.6
+      '@babel/traverse': 7.24.6
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - supports-color
@@ -15715,10 +15583,10 @@ packages:
     resolution: {integrity: sha512-QcgKpx3WZo71jTtXMEeeFuGpA+nG8YuWjxPTIsIYTjgDxcArS8zDDRzS18mmYkP65yyzH4dT94B1FJH9+flRag==}
     engines: {node: '>=18'}
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/generator': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/generator': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/types': 7.24.6
       metro: 0.80.7
       metro-babel-transformer: 0.80.7
       metro-cache: 0.80.7
@@ -15739,13 +15607,13 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/core': 7.24.5
-      '@babel/generator': 7.24.5
-      '@babel/parser': 7.24.5
-      '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.5
-      '@babel/types': 7.24.5
+      '@babel/code-frame': 7.24.6
+      '@babel/core': 7.24.6
+      '@babel/generator': 7.24.6
+      '@babel/parser': 7.24.6
+      '@babel/template': 7.24.6
+      '@babel/traverse': 7.24.6
+      '@babel/types': 7.24.6
       accepts: 1.3.8
       chalk: 4.1.2
       ci-info: 2.0.0
@@ -15836,12 +15704,6 @@ packages:
     engines: {node: '>=4.0.0'}
     hasBin: true
 
-  /mime@3.0.0:
-    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
-    engines: {node: '>=10.0.0'}
-    hasBin: true
-    dev: true
-
   /mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -15851,16 +15713,6 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /mimic-response@1.0.1:
-    resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /mimic-response@3.1.0:
-    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
-    engines: {node: '>=10'}
-    dev: true
-
   /min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -16140,7 +15992,7 @@ packages:
     resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==}
     dev: true
 
-  /next@13.5.1(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
+  /next@13.5.1(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(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
@@ -16163,7 +16015,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.5)(babel-plugin-macros@3.1.0)(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.24.6)(babel-plugin-macros@3.1.0)(react@18.2.0)
       watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
@@ -16180,7 +16032,7 @@ packages:
       - '@babel/core'
       - babel-plugin-macros
 
-  /next@14.2.3(@babel/core@7.24.5)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.0)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
+  /next@14.2.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==}
     engines: {node: '>=18.17.0'}
     hasBin: true
@@ -16200,7 +16052,7 @@ packages:
     dependencies:
       '@next/env': 14.2.3
       '@opentelemetry/api': 1.8.0
-      '@playwright/test': 1.44.0
+      '@playwright/test': 1.44.1
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
       caniuse-lite: 1.0.30001599
@@ -16208,7 +16060,7 @@ packages:
       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.5)(babel-plugin-macros@3.1.0)(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.24.6)(babel-plugin-macros@3.1.0)(react@18.2.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.2.3
       '@next/swc-darwin-x64': 14.2.3
@@ -16410,11 +16262,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /normalize-url@6.1.0:
-    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
-    engines: {node: '>=10'}
-    dev: true
-
   /notistack@3.0.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==}
     engines: {node: '>=12.0.0', npm: '>=6.0.0'}
@@ -16562,6 +16409,7 @@ packages:
   /npmlog@6.0.2:
     resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
     dependencies:
       are-we-there-yet: 3.0.1
       console-control-strings: 1.1.0
@@ -16904,11 +16752,6 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /p-cancelable@2.1.1:
-    resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
-    engines: {node: '>=8'}
-    dev: true
-
   /p-event@5.0.1:
     resolution: {integrity: sha512-dd589iCQ7m1L0bmC5NLlVYfy3TbBEsMUfWx9PyAgPeIcFZ/E2yaTZ4Rz4MiBmmJShviiftHVXOqfnfzJ6kyMrQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -17178,7 +17021,7 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.24.6
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -17365,8 +17208,8 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
-  /piscina@4.4.0:
-    resolution: {integrity: sha512-+AQduEJefrOApE4bV7KRmp3N2JnnyErlVqq4P/jmko4FPz9Z877BCccl/iB3FdrWSUkvbGV9Kan/KllJgat3Vg==}
+  /piscina@4.5.1:
+    resolution: {integrity: sha512-DVhySLPfqAW+uRH9dF0bjA2xEWr5ANLAzkYXx5adSLMFnwssSIVJYhg0FlvgYsnT/khILQJ3WkjqbAlBvt+maw==}
     optionalDependencies:
       nice-napi: 1.0.2
     dev: true
@@ -17408,17 +17251,17 @@ packages:
     resolution: {integrity: sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==}
     dev: false
 
-  /playwright-core@1.44.0:
-    resolution: {integrity: sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==}
+  /playwright-core@1.44.1:
+    resolution: {integrity: sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==}
     engines: {node: '>=16'}
     hasBin: true
 
-  /playwright@1.44.0:
-    resolution: {integrity: sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==}
+  /playwright@1.44.1:
+    resolution: {integrity: sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      playwright-core: 1.44.0
+      playwright-core: 1.44.1
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -17865,16 +17708,6 @@ packages:
     dependencies:
       side-channel: 1.0.6
 
-  /query-string@7.1.3:
-    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
-    engines: {node: '>=6'}
-    dependencies:
-      decode-uri-component: 0.2.2
-      filter-obj: 1.1.0
-      split-on-first: 1.1.0
-      strict-uri-encode: 2.0.0
-    dev: true
-
   /querystring@0.2.0:
     resolution: {integrity: sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==}
     engines: {node: '>=0.4.x'}
@@ -17974,9 +17807,9 @@ packages:
     engines: {node: '>=8.10.0'}
     hasBin: true
     dependencies:
-      '@babel/core': 7.24.5
-      '@babel/generator': 7.24.5
-      '@babel/runtime': 7.24.5
+      '@babel/core': 7.24.6
+      '@babel/generator': 7.24.6
+      '@babel/runtime': 7.24.6
       ast-types: 0.14.2
       commander: 2.20.3
       doctrine: 3.0.0
@@ -18014,7 +17847,7 @@ packages:
     peerDependencies:
       react: '>=16.13.1'
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       react: 18.2.0
     dev: false
 
@@ -18023,7 +17856,7 @@ packages:
     peerDependencies:
       react: ^16.3.0
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       prop-types: 15.8.1
       react: 18.2.0
       warning: 4.0.3
@@ -18039,18 +17872,18 @@ packages:
       final-form: ^4.20.4
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       final-form: 4.20.10
       react: 18.2.0
     dev: false
 
-  /react-imask@7.6.0(react@18.2.0):
-    resolution: {integrity: sha512-SilPct67Xw4TN+dqn3SM4BVpy+FwNSeT0wblA/DXQ3El2KPBEWwrn4x3gQ39ZohFAphp7yG7w6gSKq5SeR/6Kg==}
+  /react-imask@7.6.1(react@18.2.0):
+    resolution: {integrity: sha512-vLNfzcCz62Yzx/GRGh5tiCph9Gbh2cZu+Tz8OiO5it2eNuuhpA0DWhhSlOtVtSJ80+Bx+vFK5De8eQ9AmbkXzA==}
     engines: {npm: '>=4.0.0'}
     peerDependencies:
       react: '>=0.14.0'
     dependencies:
-      imask: 7.6.0
+      imask: 7.6.1
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
@@ -18082,7 +17915,7 @@ packages:
     peerDependencies:
       react: '>=16.8.6'
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@emotion/is-prop-valid': 0.7.3
       css-jss: 10.10.0
       hoist-non-react-statics: 3.3.2
@@ -18112,7 +17945,7 @@ packages:
       scheduler: 0.23.0
     dev: false
 
-  /react-native@0.73.6(@babel/core@7.24.5)(@babel/preset-env@7.24.5)(react@18.2.0):
+  /react-native@0.73.6(@babel/core@7.24.6)(@babel/preset-env@7.24.6)(react@18.2.0):
     resolution: {integrity: sha512-oqmZe8D2/VolIzSPZw+oUd6j/bEmeRHwsLn1xLA5wllEYsZ5zNuMsDus235ONOnCRwexqof/J3aztyQswSmiaA==}
     engines: {node: '>=18'}
     hasBin: true
@@ -18124,8 +17957,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.5)
-      '@react-native/community-cli-plugin': 0.73.17(@babel/core@7.24.5)(@babel/preset-env@7.24.5)
+      '@react-native/codegen': 0.73.3(@babel/preset-env@7.24.6)
+      '@react-native/community-cli-plugin': 0.73.17(@babel/core@7.24.6)(@babel/preset-env@7.24.6)
       '@react-native/gradle-plugin': 0.73.4
       '@react-native/js-polyfills': 0.73.1
       '@react-native/normalize-colors': 0.73.2
@@ -18150,7 +17983,7 @@ packages:
       promise: 8.3.0
       react: 18.2.0
       react-devtools-core: 4.28.5
-      react-refresh: 0.14.0
+      react-refresh: 0.14.2
       react-shallow-renderer: 16.15.0(react@18.2.0)
       regenerator-runtime: 0.13.11
       scheduler: 0.24.0-canary-efb381bbf-20230505
@@ -18220,7 +18053,7 @@ packages:
       redux:
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       '@types/hoist-non-react-statics': 3.3.5
       '@types/react': 18.2.55
       '@types/use-sync-external-store': 0.0.3
@@ -18232,8 +18065,8 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  /react-refresh@0.14.0:
-    resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
+  /react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
   /react-router-dom@6.23.1(react-dom@18.2.0)(react@18.2.0):
@@ -18315,7 +18148,7 @@ packages:
     resolution: {integrity: sha512-0W/e9uPweNEOSPjmYtuKSC/SvKKg1sfo+WtPdnxeLF3t2L82h7jjszuOHz9C23fzkvLfdgkaOmcbAxE9w2GEjA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       warning: 4.0.3
     dev: false
 
@@ -18323,7 +18156,7 @@ packages:
     resolution: {integrity: sha512-W+fXBOsDqgFK1/g7MzRMVcDurp3LqO3ksC8UgInh2P/tKgb5DusuuB1geKHFc6o1wKl+4oyER4Zh3Lxmr8xbXA==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       keycode: 2.2.1
       prop-types: 15.8.1
       react-event-listener: 0.6.6(react@18.2.0)
@@ -18339,7 +18172,7 @@ packages:
     peerDependencies:
       react: ^15.3.0 || ^16.0.0 || ^17.0.0
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       prop-types: 15.8.1
       react: 18.2.0
       react-swipeable-views-core: 0.14.0
@@ -18363,7 +18196,7 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -18382,8 +18215,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /react-virtuoso@4.7.10(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-l+fnBf/G1Fp6pHCnhFq2Ra4lkZtT6c5XrS9rCS0OA6de7WGLZviCo0y61CUZZG79TeAw3L7O4czeNPiqh9CIrg==}
+  /react-virtuoso@4.7.11(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Kdn9qEtQI2ulEuBMzW2BTkDsfijB05QUd6lpZ1K36oyA3k65Cz4lG4EKrh2pCfUafX4C2uMSZOwzMOhbrMOTFA==}
     engines: {node: '>=10'}
     peerDependencies:
       react: '>=16 || >=17 || >= 18'
@@ -18400,7 +18233,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.5
+      '@babel/runtime': 7.24.6
       memoize-one: 5.2.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -18441,6 +18274,7 @@ packages:
   /read-package-json@6.0.4:
     resolution: {integrity: sha512-AEtWXYfopBj2z5N5PbkAOeNHRPUg5q+Nen7QLxV8M2zJq1ym6/lCz3fYNTCXe19puu2d06jfHhrP7v/S2PtMMw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    deprecated: This package is no longer supported. Please use @npmcli/package-json instead.
     dependencies:
       glob: 10.3.10
       json-parse-even-better-errors: 3.0.0
@@ -18451,6 +18285,7 @@ packages:
   /read-package-json@7.0.0:
     resolution: {integrity: sha512-uL4Z10OKV4p6vbdvIXB+OzhInYtIozl/VxUBPgNkBuUi2DeRonnuspmaVAMcrkmfjKGNmRndyQAbE7/AmzGwFg==}
     engines: {node: ^16.14.0 || >=18.0.0}
+    deprecated: This package is no longer supported. Please use @npmcli/package-json instead.
     dependencies:
       glob: 10.3.10
       json-parse-even-better-errors: 3.0.0
@@ -18632,7 +18467,7 @@ packages:
   /redux@4.2.1:
     resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
     dev: false
 
   /reflect.getprototypeof@1.0.4:
@@ -18668,7 +18503,7 @@ packages:
   /regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
 
   /regexp.prototype.flags@1.5.2:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
@@ -18787,10 +18622,6 @@ packages:
     resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
     dev: false
 
-  /resolve-alpn@1.2.1:
-    resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
-    dev: true
-
   /resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
@@ -18831,12 +18662,6 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
 
-  /responselike@2.0.1:
-    resolution: {integrity: sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==}
-    dependencies:
-      lowercase-keys: 2.0.0
-    dev: true
-
   /restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -18868,6 +18693,7 @@ packages:
 
   /rimraf@2.5.4:
     resolution: {integrity: sha512-Lw7SHMjssciQb/rRz7JyPIy9+bbUshEucPoLRvWqy09vC5zQixl8Uet+Zl+SROBB/JMWHJRdCk1qdxNWHNMvlQ==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
     dependencies:
       glob: 7.2.3
@@ -18875,6 +18701,7 @@ packages:
 
   /rimraf@2.6.3:
     resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
     dependencies:
       glob: 7.2.3
@@ -18882,12 +18709,14 @@ packages:
 
   /rimraf@2.7.1:
     resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
     dependencies:
       glob: 7.2.3
 
   /rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
     dependencies:
       glob: 7.2.3
@@ -18947,7 +18776,7 @@ packages:
   /rtl-css-js@1.16.0:
     resolution: {integrity: sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==}
     dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.24.6
     dev: false
 
   /run-async@2.4.1:
@@ -19315,9 +19144,8 @@ packages:
       is-arrayish: 0.3.2
     dev: true
 
-  /sinon@15.2.0:
-    resolution: {integrity: sha512-nPS85arNqwBXaIsFCkolHjGIkFo+Oxu9vbgmBJizLAhqe6P2o3Qmj3KCUoRkfhHtvgDhZdWD3risLHAUJ8npjw==}
-    deprecated: 16.1.1
+  /sinon@16.1.3:
+    resolution: {integrity: sha512-mjnWWeyxcAf9nC0bXcPmiDut+oE8HYridTNzBbF98AYVLmWwGRp2ISEpyhYflG1ifILT+eNn3BmKUJPxjXUPlA==}
     dependencies:
       '@sinonjs/commons': 3.0.0
       '@sinonjs/fake-timers': 10.3.0
@@ -19515,11 +19343,6 @@ packages:
     resolution: {integrity: sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA==}
     dev: true
 
-  /split-on-first@1.1.0:
-    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
-    engines: {node: '>=6'}
-    dev: true
-
   /split2@3.2.2:
     resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
     dependencies:
@@ -19612,11 +19435,6 @@ packages:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
-  /strict-uri-encode@2.0.0:
-    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
-    engines: {node: '>=4'}
-    dev: true
-
   /string-convert@0.2.1:
     resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
     dev: false
@@ -19784,7 +19602,7 @@ packages:
       stylis: 4.3.2
       tslib: 2.6.2
 
-  /styled-jsx@5.1.1(@babel/core@7.24.5)(babel-plugin-macros@3.1.0)(react@18.2.0):
+  /styled-jsx@5.1.1(@babel/core@7.24.6)(babel-plugin-macros@3.1.0)(react@18.2.0):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -19797,7 +19615,7 @@ packages:
       babel-plugin-macros:
         optional: true
     dependencies:
-      '@babel/core': 7.24.5
+      '@babel/core': 7.24.6
       babel-plugin-macros: 3.1.0
       client-only: 0.0.1
       react: 18.2.0
@@ -19842,8 +19660,8 @@ packages:
   /stylelint-processor-styled-components@1.10.0:
     resolution: {integrity: sha512-g4HpN9rm0JD0LoHuIOcd/FIjTZCJ0ErQ+dC3VTxp+dSvnkV+MklKCCmCQEdz5K5WxF4vPuzfVgdbSDuPYGZhoA==}
     dependencies:
-      '@babel/parser': 7.24.5
-      '@babel/traverse': 7.24.5
+      '@babel/parser': 7.24.6
+      '@babel/traverse': 7.24.6
       micromatch: 4.0.5
       postcss: 7.0.39
     transitivePeerDependencies:
@@ -20375,8 +20193,8 @@ packages:
     engines: {node: '>=0.6.x'}
     dev: false
 
-  /tsx@4.10.5:
-    resolution: {integrity: sha512-twDSbf7Gtea4I2copqovUiNTEDrT8XNFXsuHpfGbdpW/z9ZW4fTghzzhAG0WfrCuJmJiOEY1nLIjq4u3oujRWQ==}
+  /tsx@4.11.0:
+    resolution: {integrity: sha512-vzGGELOgAupsNVssAmZjbUDfdm/pWP4R+Kg8TVdsonxbXk0bEpE1qh0yV6/QxUVXaVlNemgcPajGdJJ82n3stg==}
     engines: {node: '>=18.0.0'}
     hasBin: true
     dependencies:
@@ -21148,6 +20966,7 @@ packages:
       is-set: 2.0.2
       is-weakmap: 2.0.1
       is-weakset: 2.0.2
+    dev: true
 
   /which-module@2.0.0:
     resolution: {integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==}
diff --git a/renovate.json b/renovate.json
index b5d4f9f892d666..7f4dc05e847aad 100644
--- a/renovate.json
+++ b/renovate.json
@@ -25,10 +25,6 @@
       "groupName": "Emotion",
       "matchPackagePatterns": "@emotion/*"
     },
-    {
-      "groupName": "WyW-in-JS",
-      "matchPackagePatterns": ["@wyw-in-js/*"]
-    },
     {
       "groupName": "Font awesome SVG icons",
       "matchPackagePatterns": "@fortawesome/*"
@@ -110,6 +106,10 @@
       "groupName": "@definitelytyped tools",
       "matchPackagePatterns": ["@definitelytyped/*"]
     },
+    {
+      "groupName": "Testing libraries",
+      "matchPackagePatterns": ["@testing-library/*"]
+    },
     {
       "groupName": "envinfo tests",
       "matchPaths": ["packages/mui-envinfo/test/package.json"],
diff --git a/scripts/releaseChangelog.mjs b/scripts/releaseChangelog.mjs
index 2c6b15abcf84ee..fe8be8dac86a76 100644
--- a/scripts/releaseChangelog.mjs
+++ b/scripts/releaseChangelog.mjs
@@ -111,7 +111,18 @@ async function main(argv) {
       return chalk.red("TODO INSERT AUTHOR'S USERNAME");
     }
 
-    return commit.author?.login;
+    const authorLogin = commit.author.login;
+
+    if (authorLogin === 'github-actions[bot]') {
+      const authorFromMessage = /\(@(?<author>[a-zA-Z0-9-_]+)\) \(#[\d]+\)/.exec(
+        commit.commit.message.split('\n')[0],
+      );
+      if (authorFromMessage.groups?.author) {
+        return authorFromMessage.groups.author;
+      }
+    }
+
+    return authorLogin;
   };
 
   const authors = Array.from(
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
new file mode 100644
index 00000000000000..4f1a9dc8f793ea
--- /dev/null
+++ b/stylelint.config.mjs
@@ -0,0 +1,18 @@
+export default {
+  extends: 'stylelint-config-standard',
+  rules: {
+    'alpha-value-notation': null,
+    'custom-property-pattern': null,
+    'media-feature-range-notation': null,
+    'no-empty-source': null,
+    'selector-class-pattern': null,
+    'string-no-newline': null, // not compatible with prettier
+    'value-keyword-case': null,
+  },
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.cjs', '**/*.mjs', '**/*.ts', '**/*.tsx'],
+      customSyntax: 'postcss-styled-syntax',
+    },
+  ],
+};
diff --git a/test/README.md b/test/README.md
index e25729d4971ee1..a2b90eb92f500b 100644
--- a/test/README.md
+++ b/test/README.md
@@ -22,7 +22,7 @@ Thanks for writing tests! Here's a quick run-down on our current setup.
 
 ## Writing tests
 
-For all unit tests, please use the return value from `@mui-internal/test-utils/createRenderer`.
+For all unit tests, please use the return value from `@mui/internal-test-utils/createRenderer`.
 It prepares the test suite and returns a function with the same interface as
 [`render` from `@testing-library/react`](https://testing-library.com/docs/react-testing-library/api#render).
 
diff --git a/test/bundling/fixtures/create-react-app/package.json b/test/bundling/fixtures/create-react-app/package.json
index e66e5c3773fbd1..9040d465638b8f 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.44.0",
+    "playwright": "1.44.1",
     "serve": "14.0.1"
   },
   "browserslist": {
diff --git a/test/bundling/fixtures/esbuild/package.json b/test/bundling/fixtures/esbuild/package.json
index 468d7e72ce9d16..5a93e15f3a9560 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.44.0",
+    "playwright": "1.44.1",
     "serve": "14.0.1"
   }
 }
diff --git a/test/bundling/fixtures/gatsby/package.json b/test/bundling/fixtures/gatsby/package.json
index 5ab5318d7a4a89..030fdbe8db17ff 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.44.0"
+    "playwright": "1.44.1"
   }
 }
diff --git a/test/bundling/fixtures/next-webpack4/package.json b/test/bundling/fixtures/next-webpack4/package.json
index 6a2f610a110823..732e705528735e 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.44.0"
+    "playwright": "1.44.1"
   }
 }
diff --git a/test/bundling/fixtures/next-webpack5/package.json b/test/bundling/fixtures/next-webpack5/package.json
index 0b977043f706d9..7394519b9ec4d3 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.44.0"
+    "playwright": "1.44.1"
   }
 }
diff --git a/test/bundling/fixtures/snowpack/package.json b/test/bundling/fixtures/snowpack/package.json
index c885c569d1d7be..075c7060af5275 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.44.0",
+    "playwright": "1.44.1",
     "serve": "14.0.1"
   }
 }
diff --git a/test/bundling/fixtures/vite/package.json b/test/bundling/fixtures/vite/package.json
index 9e14e61291b1fe..d2b98ee3b33b59 100644
--- a/test/bundling/fixtures/vite/package.json
+++ b/test/bundling/fixtures/vite/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "concurrently": "7.4.0",
-    "playwright": "1.44.0",
+    "playwright": "1.44.1",
     "serve": "14.0.1"
   }
 }
diff --git a/test/e2e/.mocharc.js b/test/e2e/.mocharc.js
index 92386403490464..95bb343e11c769 100644
--- a/test/e2e/.mocharc.js
+++ b/test/e2e/.mocharc.js
@@ -4,5 +4,5 @@ module.exports = {
   slow: 500,
   timeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: ['@mui-internal/test-utils/setupBabelPlaywright'],
+  require: ['@mui/internal-test-utils/setupBabelPlaywright'],
 };
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index 1d9602a987da4e..0fbc91ff92629d 100644
--- a/test/e2e/index.test.ts
+++ b/test/e2e/index.test.ts
@@ -7,8 +7,8 @@ import type {
   MatcherOptions,
   SelectorMatcherOptions,
 } from '@testing-library/dom';
-import '@mui-internal/test-utils/initMatchers';
-import '@mui-internal/test-utils/initPlaywrightMatchers';
+import '@mui/internal-test-utils/initMatchers';
+import '@mui/internal-test-utils/initPlaywrightMatchers';
 
 function sleep(duration: number): Promise<void> {
   return new Promise<void>((resolve) => {
diff --git a/test/integration/mui-styles/theme-scoping.test.tsx b/test/integration/mui-styles/theme-scoping.test.tsx
index 93028bb3366058..97c5c7d69db0cf 100644
--- a/test/integration/mui-styles/theme-scoping.test.tsx
+++ b/test/integration/mui-styles/theme-scoping.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import * as material from '@mui/material/styles';
 import * as joy from '@mui/joy/styles';
 import { makeStyles } from '@mui/styles';
diff --git a/test/integration/mui-system/createStyled.test.js b/test/integration/mui-system/createStyled.test.js
index 5301c6a56f8cc0..50d68bab53983b 100644
--- a/test/integration/mui-system/createStyled.test.js
+++ b/test/integration/mui-system/createStyled.test.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import createStyled from '@mui/system/createStyled';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 
 describe('createStyled', () => {
   const { render } = createRenderer();
@@ -729,5 +729,37 @@ describe('createStyled', () => {
       expect(getByTestId('outlined')).toHaveComputedStyle({ borderTopColor: 'rgb(0, 0, 255)' });
       expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 255)' });
     });
+
+    it('should not consume values from nested ownerState', () => {
+      const styled = createStyled({ defaultTheme: { colors: { blue: 'rgb(0, 0, 255)' } } });
+
+      const Test = styled('div')(({ theme }) => ({
+        variants: [
+          {
+            props: ({ ownerState }) => ownerState.color === 'blue',
+            style: {
+              backgroundColor: theme.colors.blue,
+            },
+          },
+        ],
+      }));
+
+      const ownerState = { color: 'blue' };
+
+      const { getByTestId } = render(
+        <React.Fragment>
+          <Test data-testid="blue" ownerState={ownerState}>
+            Blue
+          </Test>
+          <Test data-testid="nested" ownerState={{ ownerState }}>
+            Nested ownerState
+          </Test>
+        </React.Fragment>,
+      );
+      expect(getByTestId('blue')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
+      expect(getByTestId('nested')).not.toHaveComputedStyle({
+        backgroundColor: 'rgb(0, 0, 255)',
+      });
+    });
   });
 });
diff --git a/test/integration/mui-system/theme-scoping.test.tsx b/test/integration/mui-system/theme-scoping.test.tsx
index c75f9005c15e97..83e409d7288fe2 100644
--- a/test/integration/mui-system/theme-scoping.test.tsx
+++ b/test/integration/mui-system/theme-scoping.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeContext } from '@mui/styled-engine';
 import * as material from '@mui/material';
 import * as joy from '@mui/joy';
diff --git a/test/karma.conf.profile.js b/test/karma.conf.profile.js
index 0aa2c91dcce356..4482e12b7983dc 100644
--- a/test/karma.conf.profile.js
+++ b/test/karma.conf.profile.js
@@ -39,7 +39,7 @@ module.exports = function setKarmaConfig(config) {
       'karma-chrome-launcher',
       'karma-sourcemap-loader',
       'karma-webpack',
-      '@mui-internal/test-utils/KarmaReporterReactProfiler',
+      '@mui/internal-test-utils/KarmaReporterReactProfiler',
     ],
     /**
      * possible values:
diff --git a/test/karma.tests.js b/test/karma.tests.js
index 9fdd41a634bc63..217996190342f8 100644
--- a/test/karma.tests.js
+++ b/test/karma.tests.js
@@ -1,5 +1,5 @@
-import '@mui-internal/test-utils/init';
-import '@mui-internal/test-utils/setupKarma';
+import '@mui/internal-test-utils/init';
+import '@mui/internal-test-utils/setupKarma';
 
 const materialIntegrationContext = require.context(
   '../packages/mui-material/test/integration',
diff --git a/test/package.json b/test/package.json
index d5d81a9989191e..42c131312e50c3 100644
--- a/test/package.json
+++ b/test/package.json
@@ -6,36 +6,36 @@
     "typescript": "tsc -p tsconfig.json"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
-    "@mui-internal/test-utils": "workspace:^",
     "@mui/base": "workspace:*",
     "@mui/icons-material": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/system": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@playwright/test": "1.44.0",
+    "@playwright/test": "1.44.1",
     "@testing-library/dom": "^9.3.4",
     "@types/chai": "^4.3.16",
     "@types/react": "^18.2.55",
     "@types/react-is": "^18.3.0",
-    "@types/sinon": "^10.0.20",
+    "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
     "docs": "workspace:^",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "html-webpack-plugin": "^5.6.0",
     "lodash": "^4.17.21",
-    "playwright": "^1.44.0",
+    "playwright": "^1.44.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-router-dom": "^6.23.1",
-    "sinon": "^15.2.0",
+    "sinon": "^16.1.3",
     "styled-components": "^6.1.11",
     "stylis": "4.2.0",
     "stylis-plugin-rtl": "^2.1.1",
diff --git a/test/regressions/.mocharc.js b/test/regressions/.mocharc.js
index 66b9e6bc4905df..5f79b51262cb72 100644
--- a/test/regressions/.mocharc.js
+++ b/test/regressions/.mocharc.js
@@ -3,5 +3,5 @@ module.exports = {
   slow: 500,
   timeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: ['@mui-internal/test-utils/setupBabelPlaywright'],
+  require: ['@mui/internal-test-utils/setupBabelPlaywright'],
 };
diff --git a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js
index 56e5b874851d5c..b3499bbb778fd0 100644
--- a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js
+++ b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
+import { CssVarsProvider } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 
diff --git a/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js
index 00aed3b0ec229d..091edca632f6bf 100644
--- a/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js
+++ b/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-  createTheme,
-} from '@mui/material/styles';
+import { CssVarsProvider, extendTheme, createTheme } from '@mui/material/styles';
 import { cyan } from '@mui/material/colors';
 import Box from '@mui/material/Box';
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
diff --git a/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDark.js b/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDark.js
index c8b6477f284bb9..4c88391e43a56f 100644
--- a/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDark.js
+++ b/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDark.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
+import { CssVarsProvider } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
diff --git a/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDarkToLight.js b/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDarkToLight.js
index 5a881a2bac0bf5..48e4f603314c4b 100644
--- a/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDarkToLight.js
+++ b/test/regressions/fixtures/CssVarsProvider/MaterialUIDefaultDarkToLight.js
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  useColorScheme,
-} from '@mui/material/styles';
+import { CssVarsProvider, useColorScheme } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 2d6fe49c0dad6e..55e2bee3072859 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -27,6 +27,10 @@ importRegressionFixtures.keys().forEach((path) => {
 }, []);
 
 const blacklist = [
+  'docs-getting-started-templates-dashboard-internals-components/CustomIcons.png', // No public components
+  'docs-getting-started-templates-dashboard-components/SideNav.png', // No public components
+  'docs-getting-started-templates-dashboard-components/PageViewsBarChart.png', // No public components
+  'docs-getting-started-templates-dashboard-components/StatCard.png', // No public components
   'docs-getting-started-templates-sign-in-side/CustomIcons.png', // Theme file
   'docs-getting-started-templates-sign-in/CustomIcons.png', // Theme file
   'docs-getting-started-templates-sign-up/CustomIcons.png', // Theme file
diff --git a/tsconfig.json b/tsconfig.json
index e0d1b0c02e34a7..27eb7038042f52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -45,7 +45,9 @@
       "@mui/internal-docs-utils": ["./packages-internal/docs-utils/src"],
       "@mui/internal-scripts/typescript-to-proptypes": [
         "./packages-internal/scripts/typescript-to-proptypes/src"
-      ]
+      ],
+      "@mui/internal-test-utils": ["./packages-internal/test-utils/src"],
+      "@mui/internal-test-utils/*": ["./packages-internal/test-utils/src/*"]
     },
     // Otherwise we get react-native typings which conflict with dom.lib.
     "types": ["node", "react"]
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 2bbaf1863cc74f..5ad9c19c200a1e 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -28,6 +28,7 @@ module.exports = {
         __dirname,
         './packages-internal/scripts/typescript-to-proptypes/src',
       ),
+      '@mui/internal-test-utils': path.resolve(__dirname, './packages-internal/test-utils/src'),
       docs: path.resolve(__dirname, './docs'),
     },
     extensions: ['.js', '.ts', '.tsx', '.d.ts'],