From f3fcb12b64bd0f29b17d5764c19cff284d37dce6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 8 Dec 2023 18:58:43 +0530
Subject: [PATCH 01/11] Bump vite from 4.4.11 to 4.4.12 (#40115)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 20dadc0d2dfe54..94d199257ca112 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5064,9 +5064,9 @@ aws-sign2@~0.7.0:
   integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
 
 aws4@^1.8.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
-  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
+  integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
 axe-core@^4.6.2:
   version "4.6.3"
@@ -15772,9 +15772,9 @@ sprintf-js@~1.0.2:
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
 sshpk@^1.7.0:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
-  integrity sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
+  integrity sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
@@ -17286,9 +17286,9 @@ victory-vendor@^36.6.8:
     d3-timer "^3.0.1"
 
 vite@^4.4.11:
-  version "4.4.11"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.11.tgz#babdb055b08c69cfc4c468072a2e6c9ca62102b0"
-  integrity sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==
+  version "4.4.12"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.12.tgz#e9c355d5a0d8a47afa46cb4bad10820da333da5c"
+  integrity sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"

From 802f042d287180dc0edf2ee7edcb3bf4628284ad Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 8 Dec 2023 19:00:18 +0530
Subject: [PATCH 02/11] Bump vite from 4.4.11 to 4.4.12 in
 /apps/zero-runtime-vite-app (#40122)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apps/zero-runtime-vite-app/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/zero-runtime-vite-app/package.json b/apps/zero-runtime-vite-app/package.json
index a598fe20f00c58..d2d0fc517e6197 100644
--- a/apps/zero-runtime-vite-app/package.json
+++ b/apps/zero-runtime-vite-app/package.json
@@ -27,7 +27,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "local-library": "file:../local-library",
-    "vite": "4.4.11",
+    "vite": "4.4.12",
     "vitest": "^0.34.6",
     "typescript": "5.3.2"
   },

From aa9e615b8e5ab7e5e08b04b50c67c5709b335723 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Mon, 11 Dec 2023 17:29:32 +0700
Subject: [PATCH 03/11] [material-ui] Add new Next.js integration package
 (#39947)

---
 .codesandbox/ci.json                          |   2 +
 docs/babel.config.js                          |   1 +
 .../next-js-app-router/next-js-app-router.md  | 227 ------------------
 docs/data/material/guides/nextjs/nextjs.md    | 142 +++++++++++
 docs/data/material/pages.ts                   |   5 +-
 docs/next.config.js                           |   1 +
 docs/pages/_document.js                       | 110 ++++-----
 .../{next-js-app-router.js => nextjs.js}      |   2 +-
 docs/public/_redirects                        |   1 +
 docs/src/modules/sandbox/Dependencies.ts      |   1 +
 docs/translations/translations.json           |   2 +-
 package.json                                  |   2 +-
 packages/mui-material-nextjs/README.md        |   3 +
 packages/mui-material-nextjs/package.json     |  66 +++++
 .../src/v13-appRouter/appRouterV13.tsx        | 102 ++++++++
 .../src/v13-appRouter/index.ts                |   3 +
 .../src/v13-pagesRouter/index.ts              |   1 +
 .../src/v13-pagesRouter/pagesRouterV13.tsx    | 143 +++++++++++
 .../src/v14-appRouter/index.ts                |   2 +
 .../src/v14-pagesRouter/index.ts              |   1 +
 .../mui-material-nextjs/tsconfig.build.json   |  15 ++
 packages/mui-material-nextjs/tsconfig.json    |   7 +
 scripts/sizeSnapshot/webpack.config.js        |   1 +
 test/karma.conf.js                            |   1 +
 tsconfig.json                                 |   2 +
 webpackBaseConfig.js                          |   1 +
 26 files changed, 545 insertions(+), 299 deletions(-)
 delete mode 100644 docs/data/material/guides/next-js-app-router/next-js-app-router.md
 create mode 100644 docs/data/material/guides/nextjs/nextjs.md
 rename docs/pages/material-ui/guides/{next-js-app-router.js => nextjs.js} (61%)
 create mode 100644 packages/mui-material-nextjs/README.md
 create mode 100644 packages/mui-material-nextjs/package.json
 create mode 100644 packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx
 create mode 100644 packages/mui-material-nextjs/src/v13-appRouter/index.ts
 create mode 100644 packages/mui-material-nextjs/src/v13-pagesRouter/index.ts
 create mode 100644 packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13.tsx
 create mode 100644 packages/mui-material-nextjs/src/v14-appRouter/index.ts
 create mode 100644 packages/mui-material-nextjs/src/v14-pagesRouter/index.ts
 create mode 100644 packages/mui-material-nextjs/tsconfig.build.json
 create mode 100644 packages/mui-material-nextjs/tsconfig.json

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 5c7949333fbc54..d3e8fff59c28fc 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -16,6 +16,7 @@
     "packages/mui-styled-engine",
     "packages/mui-styled-engine-sc",
     "packages/mui-material-next",
+    "packages/mui-material-nextjs",
     "packages/mui-joy"
   ],
   "publishDirectory": {
@@ -32,6 +33,7 @@
     "@mui/utils": "packages/mui-utils/build",
     "@mui/base": "packages/mui-base/build",
     "@mui/material-next": "packages/mui-material-next/build",
+    "@mui/material-nextjs": "packages/mui-material-nextjs/build",
     "@mui/joy": "packages/mui-joy/build"
   },
   "sandboxes": [
diff --git a/docs/babel.config.js b/docs/babel.config.js
index 2ac385186d98eb..8ae8c464ae54e7 100644
--- a/docs/babel.config.js
+++ b/docs/babel.config.js
@@ -18,6 +18,7 @@ const alias = {
   '@mui/utils': '../packages/mui-utils/src',
   '@mui/base': '../packages/mui-base/src',
   '@mui/material-next': '../packages/mui-material-next/src',
+  '@mui/material-nextjs': '../packages/mui-material-nextjs/src',
   '@mui/joy': '../packages/mui-joy/src',
   docs: './',
   modules: '../modules',
diff --git a/docs/data/material/guides/next-js-app-router/next-js-app-router.md b/docs/data/material/guides/next-js-app-router/next-js-app-router.md
deleted file mode 100644
index 1688d35df2197b..00000000000000
--- a/docs/data/material/guides/next-js-app-router/next-js-app-router.md
+++ /dev/null
@@ -1,227 +0,0 @@
-# Next.js App Router
-
-<p class="description">Learn how to use Material UI with the Next.js App Router.</p>
-
-## Example
-
-Starting fresh on a new App Router-based project?
-
-Jump right into the code with [this example: Material UI - Next.js App Router in TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts).
-
-## Next.js and React Server Components
-
-The Next.js App Router implements React Server Components, [an upcoming feature for React](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md).
-
-To support the App Router, the components and hooks from Material UI that need access to browser APIs are exported with the `"use client"` directive.
-
-:::warning
-React Server Components is not the same concept as server-side rendering (SSR).
-So-called Client Components are still server-rendered to HTML.
-
-For more details, see [this explanation](https://github.com/reactwg/server-components/discussions/4) of Client Components and SSR from the React Working Group.
-:::
-
-## Using Material UI with the default theme
-
-If you're using the default theme, you can add Material UI components to Next.js routing files such as `layout.js` or `page.js` (which are Server Components by default) without any additional configuration, as shown below:
-
-<!-- TODO: investigate whether it still needs an explicit <head/> to prevent FOUC https://github.com/mui/material-ui/issues/34905#issuecomment-1332040656 -->
-
-```jsx
-// app/layout.js - no directives needed
-export default function RootLayout(props) {
-  const { children } = props;
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
-
-// app/page.js - no directives needed
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-
-export default function Home() {
-  return (
-    <main>
-      <Container>
-        <Box>
-          <Card>
-            <Typography variant="h2">Hello World ~</Typography>
-          </Card>
-        </Box>
-      </Container>
-    </main>
-  );
-}
-```
-
-## Using Material UI with a custom theme
-
-### Theme Registry
-
-To set up the theme context, create a custom `ThemeRegistry` component that combines the Emotion `CacheProvider`, the Material UI `ThemeProvider`, and the `useServerInsertedHTML` hook from `next/navigation` as follows:
-
-```tsx
-// app/ThemeRegistry.tsx
-'use client';
-import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
-import { CacheProvider } from '@emotion/react';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import theme from '/path/to/your/theme';
-
-// This implementation is from emotion-js
-// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
-export default function ThemeRegistry(props) {
-  const { options, children } = props;
-
-  const [{ cache, flush }] = React.useState(() => {
-    const cache = createCache(options);
-    cache.compat = true;
-    const prevInsert = cache.insert;
-    let inserted: string[] = [];
-    cache.insert = (...args) => {
-      const serialized = args[1];
-      if (cache.inserted[serialized.name] === undefined) {
-        inserted.push(serialized.name);
-      }
-      return prevInsert(...args);
-    };
-    const flush = () => {
-      const prevInserted = inserted;
-      inserted = [];
-      return prevInserted;
-    };
-    return { cache, flush };
-  });
-
-  useServerInsertedHTML(() => {
-    const names = flush();
-    if (names.length === 0) {
-      return null;
-    }
-    let styles = '';
-    for (const name of names) {
-      styles += cache.inserted[name];
-    }
-    return (
-      <style
-        key={cache.key}
-        data-emotion={`${cache.key} ${names.join(' ')}`}
-        dangerouslySetInnerHTML={{
-          __html: styles,
-        }}
-      />
-    );
-  });
-
-  return (
-    <CacheProvider value={cache}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        {children}
-      </ThemeProvider>
-    </CacheProvider>
-  );
-}
-
-// app/layout.js
-export default function RootLayout(props) {
-  const { children } = props;
-  return (
-    <html lang="en">
-      <body>
-        <ThemeRegistry options={{ key: 'mui' }}>{children}</ThemeRegistry>
-      </body>
-    </html>
-  );
-}
-```
-
-### CSS injection order
-
-<!-- https://github.com/emotion-js/emotion/issues/3059 -->
-
-By default, Emotion injects Material UI styles at the bottom of the HTML `<head>`, which gives them precedence over custom styles—for example if you are customizing Material UI with CSS modules, Tailwind CSS, or even plain CSS.
-
-Emotion provides the `prepend: true` option for `createCache` to reverse the injection order, so custom styles can override Material UI styles without using `!important`.
-
-Currently, `prepend` does not work reliably with the App Router, but you can work around it by wrapping Emotion styles in a CSS `@layer` with a modification to the snippet above:
-
-```diff
- useServerInsertedHTML(() => {
-   const names = flush();
-   if (names.length === 0) {
-     return null;
-   }
-   let styles = '';
-   for (const name of names) {
-     styles += cache.inserted[name];
-   }
-   return (
-     <style
-       key={cache.key}
-       data-emotion={`${cache.key} ${names.join(' ')}`}
-       dangerouslySetInnerHTML={{
--        __html: styles,
-+        __html: options.prepend ? `@layer emotion {${styles}}` : styles,
-       }}
-     />
-   );
- });
-```
-
-## Props serialization
-
-Props passed from Server Components—for example `page.js` or other routing files—must be [serializable](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#passing-props-from-server-to-client-components-serialization).
-
-:::success
-This works without any additional directives:
-
-```tsx
-// app/page.tsx
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-
-export default function Page() {
-  return (
-    <Container>
-      <Typography variant="h2">Hello World</Typography>
-    </Container>
-  );
-}
-```
-
-:::
-
-:::error
-This _doesn't work_ because the Button's click handler is **non-serializable**:
-
-```tsx
-// app/page.tsx
-import Container from '@mui/material/Container';
-import Button from '@mui/material/Button';
-
-export default function Page() {
-  return (
-    <Container>
-      {/* Next.js won't render this button without 'use-client' */}
-      <Button
-        onClick={() => {
-          console.log('handle click');
-        }}
-      >
-        Submit
-      </Button>
-    </Container>
-  );
-}
-```
-
-Instead, the Next.js team recommend moving components like these ["down the tree"](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree) to avoid this issue and improve overall performance.
-:::
diff --git a/docs/data/material/guides/nextjs/nextjs.md b/docs/data/material/guides/nextjs/nextjs.md
new file mode 100644
index 00000000000000..cab017f80cdc89
--- /dev/null
+++ b/docs/data/material/guides/nextjs/nextjs.md
@@ -0,0 +1,142 @@
+# Next.js Integration
+
+<p class="description">Learn how to use Material UI with Next.js</p>
+
+## App Router
+
+This section walks through the Material UI integration with the Next.js [App Router](https://nextjs.org/docs/app), an evolution of the [Pages Router](#pages-router), and, currently, the recommended way of building new Next.js applications starting from version 13.
+
+### Intalling the dependencies
+
+Start by ensuring that you already have `@mui/material` and `next` installed.
+Then, run one of the following commands to install the dependencies:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @mui/material-nextjs @emotion/cache
+```
+
+```bash yarn
+yarn add @mui/material-nextjs @emotion/cache
+```
+
+```bash pnpm
+pnpm add @mui/material-nextjs @emotion/cache
+```
+
+</codeblock>
+
+### Configuration
+
+Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elements under the `<body>` with it:
+
+```diff
+ // app/layout.tsx
++ import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14
+
+ export default function RootLayout(props) {
+   const { children } = props;
+   return (
+     <html lang="en">
+       <body>
++        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
+       </body>
+     </html>
+   );
+ }
+```
+
+### Using other styling solutions
+
+If you are using a styling solution other than Emotion to customize Material UI components, set `enableCssLayer: true` in the `options` prop:
+
+```js
+<AppRouterCacheProvider options={{ enableCssLayer: true }}>
+```
+
+This option ensures that the styles generated by Material UI will be wrapped in a CSS `@layer mui` rule, which is overridden by anonymous layer styles when using Material UI with CSS modules, Tailwind CSS, or even plain CSS without using `@layer`.
+
+To learn more about it, see [the MDN CSS layer documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer).
+
+## Pages Router
+
+This section walks through the Material UI integration with the Next.js [Pages Router](https://nextjs.org/docs/pages/building-your-application), for both [Server Side Rendering](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering) (SSR) and [Static Site Generation](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation) (SSG).
+
+### Intalling the dependencies
+
+Start by ensuring that you already have `@mui/material` and `next` installed.
+Then, run one of the following commands to install the dependencies:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @mui/material-nextjs @emotion/cache @emotion/server
+```
+
+```bash yarn
+yarn add @mui/material-nextjs @emotion/cache @emotion/server
+```
+
+```bash pnpm
+pnpm add @mui/material-nextjs @emotion/cache @emotion/server
+```
+
+</codeblock>
+
+### Configuration
+
+Inside the `pages/_document.tsx` file:
+
+- Import `documentGetInitialProps` and use it as the Document's `getInitialProps`.
+- Import `DocumentHeadTags` and render it inside the `<Head>`.
+
+```diff
++ import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pagesRouter` if you are using Next.js v14
+
+ export default function MyDocument(props) {
+   return (
+     <Html lang="en">
+       <Head>
++        <DocumentHeadTags {...props} />
+         ...
+       </Head>
+       <body>
+         <Main />
+         <NextScript />
+       </body>
+     </Html>
+   );
+ }
+
++ MyDocument.getInitialProps = documentGetInitialProps;
+```
+
+Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and render it as the root element:
+
+```diff
++ import { AppCacheProvider } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pages` if you are using Next.js v14
+
+ export default function MyApp(props) {
+   return (
++    <AppCacheProvider {...props}>
+       <Head>
+         ...
+       </Head>
+       ...
++    </AppCacheProvider>
+   );
+ }
+```
+
+### TypeScript
+
+If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props interface:
+
+```diff
++ import type { DocumentHeadTagsProps } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pagesRouter` if you are using Next.js v14
+
++ export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) {
+   ...
+ }
+```
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 8bbfa25ba0e2d4..29428fc8b20e4e 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -205,8 +205,9 @@ const pages: MuiPage[] = [
       { pathname: '/material-ui/guides/right-to-left', title: 'Right-to-left' },
       { pathname: '/material-ui/guides/shadow-dom', title: 'Shadow DOM' },
       {
-        pathname: '/material-ui/guides/next-js-app-router',
-        title: 'Next.js App Router',
+        pathname: '/material-ui/guides/nextjs',
+        title: 'Next.js Integration',
+        newFeature: true,
       },
     ],
   },
diff --git a/docs/next.config.js b/docs/next.config.js
index b47ed81266a0b3..ec73e6ba66bb9c 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -144,6 +144,7 @@ module.exports = withDocsInfra({
                         '@mui/utils': '../packages/mui-utils/src',
                         '@mui/base': '../packages/mui-base/src',
                         '@mui/material-next': '../packages/mui-material-next/src',
+                        '@mui/material-nextjs': '../packages/mui-material-nextjs/src',
                         '@mui/joy': '../packages/mui-joy/src',
                       },
                       // transformFunctions: ['require'],
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 9d74dc2a55b3b5..599e5e0fd99be5 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Script from 'next/script';
+import { documentGetInitialProps } from '@mui/material-nextjs/v13-pagesRouter';
 import { ServerStyleSheets as JSSServerStyleSheets } from '@mui/styles';
 import { ServerStyleSheet } from 'styled-components';
-import createEmotionServer from '@emotion/server/create-instance';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles';
@@ -205,66 +205,51 @@ gtag('config', '${GOOGLE_ANALYTICS_ID_V4}', {
   }
 }
 
-// `getInitialProps` belongs to `_document` (instead of `_app`),
-// it's compatible with static-site generation (SSG).
 MyDocument.getInitialProps = async (ctx) => {
-  // Resolution order
-  //
-  // On the server:
-  // 1. app.getInitialProps
-  // 2. page.getInitialProps
-  // 3. document.getInitialProps
-  // 4. app.render
-  // 5. page.render
-  // 6. document.render
-  //
-  // On the server with error:
-  // 1. document.getInitialProps
-  // 2. app.render
-  // 3. page.render
-  // 4. document.render
-  //
-  // On the client
-  // 1. app.getInitialProps
-  // 2. page.getInitialProps
-  // 3. app.render
-  // 4. page.render
-
-  // Render app and page and get the context of the page with collected side effects.
   const jssSheets = new JSSServerStyleSheets();
   const styledComponentsSheet = new ServerStyleSheet();
-  const originalRenderPage = ctx.renderPage;
-
-  const cache = createEmotionCache();
-  const { extractCriticalToChunks } = createEmotionServer(cache);
 
   try {
-    ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: (App) => (props) =>
-          styledComponentsSheet.collectStyles(
-            jssSheets.collect(<App emotionCache={cache} {...props} />),
-          ),
-      });
-
-    const initialProps = await Document.getInitialProps(ctx);
-    const emotionStyles = extractCriticalToChunks(initialProps.html);
-    const emotionStyleTags = emotionStyles.styles.map((style) => (
-      <style
-        data-emotion={`${style.key} ${style.ids.join(' ')}`}
-        key={style.key}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: style.css }}
-      />
-    ));
+    const finalProps = await documentGetInitialProps(ctx, {
+      emotionCache: createEmotionCache(),
+      plugins: [
+        {
+          // styled-components
+          enhanceApp: (App) => (props) => styledComponentsSheet.collectStyles(<App {...props} />),
+          resolveProps: async (initialProps) => ({
+            ...initialProps,
+            styles: [styledComponentsSheet.getStyleElement(), ...initialProps.styles],
+          }),
+        },
+        {
+          // JSS
+          enhanceApp: (App) => (props) => jssSheets.collect(<App {...props} />),
+          resolveProps: async (initialProps) => {
+            let css = jssSheets.toString();
+            // It might be undefined, e.g. after an error.
+            if (css && process.env.NODE_ENV === 'production') {
+              const result1 = await prefixer.process(css, { from: undefined });
+              css = result1.css;
+              css = cleanCSS.minify(css).styles;
+            }
 
-    let css = jssSheets.toString();
-    // It might be undefined, e.g. after an error.
-    if (css && process.env.NODE_ENV === 'production') {
-      const result1 = await prefixer.process(css, { from: undefined });
-      css = result1.css;
-      css = cleanCSS.minify(css).styles;
-    }
+            return {
+              ...initialProps,
+              styles: [
+                ...initialProps.styles,
+                <style
+                  id="jss-server-side"
+                  key="jss-server-side"
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: css }}
+                />,
+                <style id="insertion-point-jss" key="insertion-point-jss" />,
+              ],
+            };
+          },
+        },
+      ],
+    });
 
     // All the URLs should have a leading /.
     // This is missing in the Next.js static export.
@@ -274,25 +259,16 @@ MyDocument.getInitialProps = async (ctx) => {
     }
 
     return {
-      ...initialProps,
+      ...finalProps,
       canonicalAsServer: pathnameToLanguage(url).canonicalAsServer,
       userLanguage: ctx.query.userLanguage || 'en',
-      // Styles fragment is rendered after the app and page rendering finish.
       styles: [
         <style id="material-icon-font" key="material-icon-font" />,
         <style id="font-awesome-css" key="font-awesome-css" />,
-        styledComponentsSheet.getStyleElement(),
-        ...emotionStyleTags,
-        <style
-          id="jss-server-side"
-          key="jss-server-side"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: css }}
-        />,
+        ...finalProps.emotionStyleTags,
         <style id="app-search" key="app-search" />,
         <style id="prismjs" key="prismjs" />,
-        <style id="insertion-point-jss" key="insertion-point-jss" />,
-        ...React.Children.toArray(initialProps.styles),
+        ...React.Children.toArray(finalProps.styles),
       ],
     };
   } finally {
diff --git a/docs/pages/material-ui/guides/next-js-app-router.js b/docs/pages/material-ui/guides/nextjs.js
similarity index 61%
rename from docs/pages/material-ui/guides/next-js-app-router.js
rename to docs/pages/material-ui/guides/nextjs.js
index 0781075119120f..f5ee3c9d122d3f 100644
--- a/docs/pages/material-ui/guides/next-js-app-router.js
+++ b/docs/pages/material-ui/guides/nextjs.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/material/guides/next-js-app-router/next-js-app-router.md?@mui/markdown';
+import * as pageProps from 'docs/data/material/guides/nextjs/nextjs.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} />;
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 6984e2bfcca730..ee77a5b4d135e8 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -495,6 +495,7 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
 /material-ui/api/tree-item/ /x/api/tree-view/tree-item/ 301
 /material-ui/guides/styled-engine/ /material-ui/guides/styled-components/ 301
 /material-ui/guides/themeable-component/ /material-ui/guides/creating-themed-components/ 301
+/material-ui/guides/next-js-app-router/ /material-ui/guides/nextjs/ 301
 
 # Proxies
 
diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
index c4c618a7f3f081..d1afaa28804840 100644
--- a/docs/src/modules/sandbox/Dependencies.ts
+++ b/docs/src/modules/sandbox/Dependencies.ts
@@ -106,6 +106,7 @@ export default function SandboxDependencies(
       '@mui/base': getMuiPackageVersion('base'),
       '@mui/utils': getMuiPackageVersion('utils'),
       '@mui/material-next': getMuiPackageVersion('material-next'),
+      '@mui/material-nextjs': getMuiPackageVersion('material-nextjs'),
       '@mui/joy': getMuiPackageVersion('joy'),
     };
 
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 17ac2269ccbd2a..e33fb02ce134f6 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -447,7 +447,7 @@
     "/material-ui/guides/content-security-policy": "Content Security Policy",
     "/material-ui/guides/right-to-left": "Right-to-left",
     "/material-ui/guides/shadow-dom": "Shadow DOM",
-    "/material-ui/guides/next-js-app-router": "Next.js App Router",
+    "/material-ui/guides/nextjs": "Next.js Integration",
     "/material-ui/experimental-api": "Experimental APIs",
     "/material-ui/experimental-api/classname-generator": "ClassName generator",
     "CSS theme variables": "CSS theme variables",
diff --git a/package.json b/package.json
index 1369093b41a03a..925b17865dc702 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "test:argos": "node ./scripts/pushArgos.mjs",
     "typescript": "lerna run --no-bail --parallel typescript",
     "typescript:ci": "lerna run --concurrency 5 --no-bail --no-sort typescript",
-    "validate-declarations": "ts-node --esm scripts/validateTypescriptDeclarations.mts",
+    "validate-declarations": "node --no-warnings=ExperimentalWarning --loader ts-node/esm scripts/validateTypescriptDeclarations.mts",
     "generate-codeowners": "node scripts/generateCodeowners.mjs"
   },
   "devDependencies": {
diff --git a/packages/mui-material-nextjs/README.md b/packages/mui-material-nextjs/README.md
new file mode 100644
index 00000000000000..ee45a2d4e62360
--- /dev/null
+++ b/packages/mui-material-nextjs/README.md
@@ -0,0 +1,3 @@
+# @mui/material-nextjs
+
+The official integration of Material-UI with Next.js. For full documentation, visit [Next.js Integration](material-ui/guides/nextjs/) page.
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
new file mode 100644
index 00000000000000..94c40f4e6876f3
--- /dev/null
+++ b/packages/mui-material-nextjs/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@mui/material-nextjs",
+  "version": "5.14.20",
+  "private": false,
+  "author": "MUI Team",
+  "description": "Collection of utilities for integration between Material UI and Next.js.",
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "utils"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-material-nextjs"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "homepage": "private package",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files",
+    "build:legacy": "node ../../scripts/build.mjs legacy",
+    "build:modern": "node ../../scripts/build.mjs modern",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:types": "node ../../scripts/buildTypes.mjs",
+    "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
+    "release": "yarn build && npm publish build",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.{js,ts,tsx}'",
+    "typescript": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@emotion/server": "^11.11.0",
+    "@emotion/cache": "^11.11.0",
+    "@mui/material": "^5.0.0",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "next": "^13.0.0 || ^14.0.0",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@emotion/cache": {
+      "optional": true
+    },
+    "@emotion/server": {
+      "optional": true
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx b/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx
new file mode 100644
index 00000000000000..5286dd4f44d7b1
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx
@@ -0,0 +1,102 @@
+'use client';
+import * as React from 'react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
+
+export type AppRouterCacheProviderProps = {
+  /** These are the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+  options?: Partial<OptionsOfCreateCache> & {
+    /**
+     * If `true`, the generated styles are wrapped within `@layer mui`.
+     * This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind, plain CSS etc.
+     */
+    enableCssLayer?: boolean;
+  };
+  /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+  CacheProvider?: (props: {
+    value: EmotionCache;
+    children: React.ReactNode;
+  }) => React.JSX.Element | null;
+  children: React.ReactNode;
+};
+
+export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps) {
+  const { options, CacheProvider = DefaultCacheProvider, children } = props;
+
+  const [registry] = React.useState(() => {
+    const cache = createCache({ ...options, key: options?.key ?? 'mui' });
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: { name: string; isGlobal: boolean }[] = [];
+    cache.insert = (...args) => {
+      if (options?.enableCssLayer) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      const [selector, serialized] = args;
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push({
+          name: serialized.name,
+          isGlobal: !selector,
+        });
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const inserted = registry.flush();
+    if (inserted.length === 0) {
+      return null;
+    }
+    let styles = '';
+    let dataEmotionAttribute = registry.cache.key;
+
+    const globals: {
+      name: string;
+      style: string;
+    }[] = [];
+
+    inserted.forEach(({ name, isGlobal }) => {
+      const style = registry.cache.inserted[name];
+
+      if (typeof style !== 'boolean') {
+        if (isGlobal) {
+          globals.push({ name, style });
+        } else {
+          styles += style;
+          dataEmotionAttribute += ` ${name}`;
+        }
+      }
+    });
+
+    return (
+      <React.Fragment>
+        {globals.map(({ name, style }) => (
+          <style
+            key={name}
+            data-emotion={`${registry.cache.key}-global ${name}`}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: style }}
+          />
+        ))}
+        {styles && (
+          <style
+            data-emotion={dataEmotionAttribute}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: styles }}
+          />
+        )}
+      </React.Fragment>
+    );
+  });
+
+  return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
+}
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/index.ts b/packages/mui-material-nextjs/src/v13-appRouter/index.ts
new file mode 100644
index 00000000000000..3b153dde004ec4
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-appRouter/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export { default as AppRouterCacheProvider } from './appRouterV13';
+export * from './appRouterV13';
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts b/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts
new file mode 100644
index 00000000000000..d9e2732ece44e4
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts
@@ -0,0 +1 @@
+export * from './pagesRouterV13';
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13.tsx
new file mode 100644
index 00000000000000..30f039bf32f14f
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13.tsx
@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { AppType } from 'next/app';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import createCache from '@emotion/cache';
+import createEmotionServer from '@emotion/server/create-instance';
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
+
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui', insertionPoint });
+}
+
+interface EmotionCacheProviderProps {
+  emotionCache?: EmotionCache;
+}
+
+const defaultEmotionCache = createEmotionCache();
+
+export function AppCacheProvider({
+  emotionCache = defaultEmotionCache,
+  children,
+}: React.PropsWithChildren<EmotionCacheProviderProps>) {
+  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
+}
+
+interface Plugin {
+  enhanceApp: (
+    App: React.ComponentType<React.ComponentProps<AppType>>,
+  ) => (props: any) => JSX.Element;
+  resolveProps: (initialProps: DocumentInitialProps) => Promise<DocumentInitialProps>;
+}
+
+/**
+ * A utility to compose multiple `getInitialProps` functions.
+ */
+export function createGetInitialProps(plugins: Plugin[]) {
+  return async function getInitialProps(ctx: DocumentContext) {
+    const originalRenderPage = ctx.renderPage;
+
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => plugins.reduce((result, plugin) => plugin.enhanceApp(result), App),
+      });
+
+    const initialProps = await Document.getInitialProps(ctx);
+
+    const finalProps = await plugins.reduce(
+      async (result, plugin) => plugin.resolveProps(await result),
+      Promise.resolve(initialProps),
+    );
+
+    return finalProps;
+  };
+}
+
+export interface DocumentHeadTagsProps {
+  emotionStyleTags: React.JSX.Element[];
+}
+
+export function DocumentHeadTags({ emotionStyleTags }: DocumentHeadTagsProps) {
+  return (
+    <React.Fragment>
+      <meta name="emotion-insertion-point" content="" />
+      {emotionStyleTags}
+    </React.Fragment>
+  );
+}
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+export async function documentGetInitialProps(
+  ctx: DocumentContext,
+  options?: {
+    emotionCache?: EmotionCache;
+    plugins?: Plugin[];
+  },
+) {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = options?.emotionCache ?? createEmotionCache();
+
+  return createGetInitialProps([
+    {
+      enhanceApp: (
+        App: React.ComponentType<React.ComponentProps<AppType> & EmotionCacheProviderProps>,
+      ) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
+      resolveProps: async (initialProps) => {
+        const { extractCriticalToChunks } = createEmotionServer(cache);
+        const { styles } = extractCriticalToChunks(initialProps.html);
+        return {
+          ...initialProps,
+          emotionStyleTags: styles.map((style) => (
+            <style
+              data-emotion={`${style.key} ${style.ids.join(' ')}`}
+              key={style.key}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: style.css }}
+            />
+          )),
+        };
+      },
+    },
+    ...(options?.plugins ?? []),
+  ])(ctx) as Promise<DocumentInitialProps & DocumentHeadTagsProps>;
+}
diff --git a/packages/mui-material-nextjs/src/v14-appRouter/index.ts b/packages/mui-material-nextjs/src/v14-appRouter/index.ts
new file mode 100644
index 00000000000000..ccb6eb560bc79a
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v14-appRouter/index.ts
@@ -0,0 +1,2 @@
+'use client';
+export * from '../v13-appRouter';
diff --git a/packages/mui-material-nextjs/src/v14-pagesRouter/index.ts b/packages/mui-material-nextjs/src/v14-pagesRouter/index.ts
new file mode 100644
index 00000000000000..695035caa34c5c
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v14-pagesRouter/index.ts
@@ -0,0 +1 @@
+export * from '../v13-pagesRouter';
diff --git a/packages/mui-material-nextjs/tsconfig.build.json b/packages/mui-material-nextjs/tsconfig.build.json
new file mode 100644
index 00000000000000..405e223d9a9bad
--- /dev/null
+++ b/packages/mui-material-nextjs/tsconfig.build.json
@@ -0,0 +1,15 @@
+{
+  // This config is for emitting declarations (.d.ts) only
+  // Actual .ts source files are transpiled via babel
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "build",
+    "rootDir": "./src"
+  },
+  "include": ["./src/**/*.ts*"],
+  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+}
diff --git a/packages/mui-material-nextjs/tsconfig.json b/packages/mui-material-nextjs/tsconfig.json
new file mode 100644
index 00000000000000..88c4875ab6e81e
--- /dev/null
+++ b/packages/mui-material-nextjs/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["react", "mocha", "node"]
+  },
+  "include": ["src/**/*"]
+}
diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js
index fe935fd850052a..e0b7c581aa8fb8 100644
--- a/scripts/sizeSnapshot/webpack.config.js
+++ b/scripts/sizeSnapshot/webpack.config.js
@@ -219,6 +219,7 @@ function createWebpackConfig(entry, environment) {
         '@mui/utils': path.join(workspaceRoot, 'packages/mui-utils/build'),
         '@mui/base': path.join(workspaceRoot, 'packages/mui-base/build'),
         '@mui/material-next': path.join(workspaceRoot, 'packages/mui-material-next/build'),
+        '@mui/material-nextjs': path.join(workspaceRoot, 'packages/mui-material-nextjs/build'),
         '@mui/joy': path.join(workspaceRoot, 'packages/mui-joy/build'),
       },
     },
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 2f975fb47822bc..05aa6a3c43d546 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -161,6 +161,7 @@ module.exports = function setKarmaConfig(config) {
                         '@mui/utils': './packages/mui-utils/src',
                         '@mui/base': './packages/mui-base/src',
                         '@mui/material-next': './packages/mui-material-next/src',
+                        '@mui/material-nextjs': './packages/mui-material-nextjs/src',
                         '@mui/joy': './packages/mui-joy/src',
                       },
                       transformFunctions: ['require'],
diff --git a/tsconfig.json b/tsconfig.json
index 2c5723bbbe1591..aa9706d2f55d7f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -39,6 +39,8 @@
       "@mui/docs/*": ["./packages/mui-docs/src/*"],
       "@mui/material-next": ["./packages/mui-material-next/src"],
       "@mui/material-next/*": ["./packages/mui-material-next/src/*"],
+      "@mui/material-nextjs": ["./packages/mui-material-nextjs/src"],
+      "@mui/material-nextjs/*": ["./packages/mui-material-nextjs/src/*"],
       "@mui/joy": ["./packages/mui-joy/src"],
       "@mui/joy/*": ["./packages/mui-joy/src/*"],
       "@mui/zero-runtime/*": ["./packages/zero-runtime/src/*"],
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 0b9c59bdf248fb..7d350d051c7452 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -22,6 +22,7 @@ module.exports = {
       '@mui/base': path.resolve(__dirname, './packages/mui-base/src'),
       '@mui/utils': path.resolve(__dirname, './packages/mui-utils/src'),
       '@mui/material-next': path.resolve(__dirname, './packages/mui-material-next/src'),
+      '@mui/material-nextjs': path.resolve(__dirname, './packages/mui-material-nextjs/src'),
       '@mui/joy': path.resolve(__dirname, './packages/mui-joy/src'),
       'typescript-to-proptypes': path.resolve(__dirname, './packages/typescript-to-proptypes/src'),
       docs: path.resolve(__dirname, './docs'),

From 2b081284637107cc30b29fcaa78d236711a42b6f Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Mon, 11 Dec 2023 21:50:19 +0800
Subject: [PATCH 04/11] Revert "[Select][material-ui] Add name to hidden input
 element" (#40174)

---
 packages/mui-material/src/InputLabel/InputLabel.js | 5 -----
 packages/mui-material/src/Select/SelectInput.js    | 4 +---
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js
index ab9831fd3e4af5..f28ce9b43c832e 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.js
@@ -119,11 +119,6 @@ const InputLabelRoot = styled(FormLabel, {
       transform: 'translate(14px, -9px) scale(0.75)',
     }),
   }),
-  ...(ownerState.variant === 'standard' && {
-    '&:not(label) + div': {
-      marginTop: 16,
-    },
-  }),
 }));
 
 const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 75cd39dd118c3b..9c36c98f142ef0 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -489,8 +489,6 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
 
   const listboxId = useId();
 
-  const hiddenInputId = useId();
-
   return (
     <React.Fragment>
       <SelectSelect
@@ -525,7 +523,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       <SelectNativeInput
         aria-invalid={error}
         value={Array.isArray(value) ? value.join(',') : value}
-        name={name ?? hiddenInputId}
+        name={name}
         ref={inputRef}
         aria-hidden
         onChange={handleChange}

From bb0814710654e3a530e9d6bdc1f830f9dc7c6338 Mon Sep 17 00:00:00 2001
From: Andy Le <andy.le@ucdenver.edu>
Date: Mon, 11 Dec 2023 13:12:36 -0700
Subject: [PATCH 05/11] [docs-infra] Update CodeSandbox links (#39992)

---
 CHANGELOG.md                                   |  4 ++--
 CHANGELOG.old.md                               |  2 +-
 .../working-with-tailwind-css.md               |  2 +-
 .../interoperability/interoperability.md       | 10 +++++-----
 .../migration-v4/v5-component-changes.md       |  4 ++--
 docs/pages/blog/2020-q3-update.md              |  2 +-
 docs/pages/blog/2021-q2-update.md              |  2 +-
 docs/pages/blog/first-look-at-joy.md           |  6 +++---
 .../blog/making-customizable-components.md     |  2 +-
 docs/pages/blog/mui-core-v5.md                 | 18 +++++++++---------
 docs/pages/blog/v6-beta-pickers.md             |  2 +-
 docs/pages/experiments/blog/blog.md            |  2 +-
 docs/public/_redirects                         |  6 +++---
 examples/base-ui-cra-ts/README.md              |  2 +-
 examples/base-ui-cra/README.md                 |  2 +-
 examples/base-ui-nextjs-tailwind-ts/README.md  |  2 +-
 examples/base-ui-vite-tailwind-ts/README.md    |  2 +-
 examples/base-ui-vite-tailwind/README.md       |  2 +-
 examples/joy-ui-cra-ts/README.md               |  2 +-
 examples/joy-ui-nextjs-ts/README.md            |  2 +-
 examples/joy-ui-vite-ts/README.md              |  2 +-
 .../README.md                                  |  4 ++--
 .../README.md                                  |  4 ++--
 examples/material-ui-cra-ts/README.md          |  2 +-
 examples/material-ui-cra/README.md             |  2 +-
 examples/material-ui-express-ssr/README.md     |  2 +-
 .../README.md                                  |  2 +-
 .../material-ui-nextjs-pages-router/README.md  |  2 +-
 .../README.md                                  |  2 +-
 examples/material-ui-nextjs-ts/README.md       |  2 +-
 examples/material-ui-nextjs/README.md          |  2 +-
 examples/material-ui-remix-ts/README.md        |  2 +-
 examples/material-ui-vite-ts/README.md         |  2 +-
 examples/material-ui-vite/README.md            |  2 +-
 packages/mui-base/src/useButton/useButton.ts   |  2 +-
 packages/mui-base/src/useSlider/useSlider.ts   |  2 +-
 .../actual-from-material-ui-core-styles.js     |  4 ++--
 .../actual-typescript.tsx                      |  4 ++--
 .../expected-from-material-ui-core-styles.js   |  4 ++--
 .../expected-typescript.tsx                    |  4 ++--
 .../mui-material/src/ButtonBase/ButtonBase.js  |  2 +-
 .../SwipeableDrawer/SwipeableDrawer.test.js    |  2 +-
 .../src/useTouchRipple/useTouchRipple.ts       |  2 +-
 43 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f4edb3fabc357..1b4d1e8fbdfbae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11056,7 +11056,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
   <Typography variant="poster">poster</Typography>;
   ```
 
-  [A full demo](https://codesandbox.io/s/fontsizetheme-material-demo-forked-l9u05?file=/demo.tsx:725-773)
+  [A full demo](https://codesandbox.io/p/sandbox/fontsizetheme-material-demo-forked-l9u05?file=/demo.tsx:725-773)
 
 - 📚 Add a shortcut to open the Algolia search (#23959) @hmaddisb.
 - And many more 🐛 bug fixes and 📚 improvements.
@@ -12250,7 +12250,7 @@ Here are some highlights ✨:
 
   You can find a [new version](https://mui.com/components/slider-styled/) of the slider in the lab powered by [emotion](https://emotion.sh/).
 
-  In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check [this CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) for a demo. It relies on aliases to prevent any bundle size overhead.
+  In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check [this CodeSandbox](https://codesandbox.io/p/sandbox/sliderstyled-with-styled-components-forked-olc27?file=/package.json) for a demo. It relies on aliases to prevent any bundle size overhead.
 
   The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.
 
diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
index f3a94d878bf234..9a57a99389e663 100644
--- a/CHANGELOG.old.md
+++ b/CHANGELOG.old.md
@@ -5790,7 +5790,7 @@ This new package is a significant step forward. Some of the key features:
 - Replace the usage of the old React APIs with the new ones.
 - 15.0 kB gzipped.
 
-Here is an example: https://codesandbox.io/s/vjzn5z4k77.
+Here is an example: https://codesandbox.io/p/sandbox/vjzn5z4k77.
 
 ```jsx
 import Button from '@material-ui/core/Button';
diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
index a63fbc4736b4e4..6c228ffbb222d3 100644
--- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
+++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
@@ -518,4 +518,4 @@ These are the things we covered in this guide:
 We used the `component` prop to pass them into the parent component.\
 ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `slotProps` prop.
 
-Get all the code used in this guide in the [Base UI with Tailwind CSS](https://codesandbox.io/s/working-with-tailwind-css-dhmf8w) example project.
+Get all the code used in this guide in the [Base UI with Tailwind CSS](https://codesandbox.io/p/sandbox/working-with-tailwind-css-dhmf8w) example project.
diff --git a/docs/data/material/guides/interoperability/interoperability.md b/docs/data/material/guides/interoperability/interoperability.md
index d23fcfca874a55..205b303590d51c 100644
--- a/docs/data/material/guides/interoperability/interoperability.md
+++ b/docs/data/material/guides/interoperability/interoperability.md
@@ -20,7 +20,7 @@ Nothing fancy, just plain CSS.
 
 {{"demo": "StyledComponents.js", "hideToolbar": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-fdue7)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/plain-css-fdue7)
 
 **PlainCssSlider.css**
 
@@ -178,7 +178,7 @@ export default function PlainCssSliderDeep2() {
 Explicitly providing the class names to the component is too much effort?
 [You can target the class names generated by Material UI](/system/styles/advanced/).
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-classnames-dho8k)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/global-classnames-dho8k)
 
 **GlobalCssSlider.css**
 
@@ -304,7 +304,7 @@ from `@mui/material/styles` and have direct access to the theme.
 
 {{"demo": "StyledComponents.js", "hideToolbar": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/styled-components-interoperability-w9z9d)
 
 ```jsx
 import * as React from 'react';
@@ -429,7 +429,7 @@ bundling solution people are using.
 
 {{"demo": "StyledComponents.js", "hideToolbar": true}}
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-nuyg8)
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/css-modules-nuyg8)
 
 **CssModulesSlider.module.css**
 
@@ -800,7 +800,7 @@ export default function SliderThumbOverrides() {
 ## ~~JSS~~ TSS
 
 [JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
-if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/s/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
+if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/p/sandbox/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
 
 [TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
 TypeScript support than JSS.
diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md
index 1f36a8887b1298..c0bc30957d279a 100644
--- a/docs/data/material/migration/migration-v4/v5-component-changes.md
+++ b/docs/data/material/migration/migration-v4/v5-component-changes.md
@@ -323,7 +323,7 @@ This makes the button closer to the Material Design guidelines and simplifies th
 ```
 
 :::info
-If you prefer to use the `default` color in v4, take a look at this [CodeSandbox demo](https://codesandbox.io/s/mimic-v4-button-default-color-bklx8?file=/src/Demo.tsx) to see how to make it work in v5.
+If you prefer to use the `default` color in v4, take a look at this [CodeSandbox demo](https://codesandbox.io/p/sandbox/mimic-v4-button-default-color-bklx8?file=/src/Demo.tsx) to see how to make it work in v5.
 :::
 
 ### Remove span and label
@@ -573,7 +573,7 @@ In v4, using `orientation="vertical"` and `variant="middle"` was adding a left a
 In the v5, to avoid fixed spacing on the component, this margin was removed.
 
 :::info
-If you want to use the previous margin values, this change can be made in your theme with the following code. See the example on [CodeSandbox demo](https://codesandbox.io/s/v5-migration-vertical-alignment-middle-divider-45vepj?file=/src/index.tsx).
+If you want to use the previous margin values, this change can be made in your theme with the following code. See the example on [CodeSandbox demo](https://codesandbox.io/p/sandbox/v5-migration-vertical-alignment-middle-divider-45vepj?file=/src/index.tsx).
 :::
 
 ```diff
diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md
index 621b69c597bbb4..08dd3d58d45178 100644
--- a/docs/pages/blog/2020-q3-update.md
+++ b/docs/pages/blog/2020-q3-update.md
@@ -105,7 +105,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
 
 - 👩‍🎨 We have completed the first iteration of the new styling solution of v5.<br />
   You can find a [new version](/material-ui/react-slider/) of the slider in the lab powered by [Emotion](https://emotion.sh/docs/introduction).<br />
-  If you are already using styled-components in your application, you can swap Emotion for styled-components 💅. Check this [CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) or [CRA](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-cra-styled-components/) for a demo. It relies on aliases to prevent any bundle size overhead.<br />
+  If you are already using styled-components in your application, you can swap Emotion for styled-components 💅. Check this [CodeSandbox](https://codesandbox.io/p/sandbox/sliderstyled-with-styled-components-forked-olc27?file=/package.json) or [CRA](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-cra-styled-components/) for a demo. It relies on aliases to prevent any bundle size overhead.<br />
   The new styling solution saves 2kB+ gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using styled-components or Emotion.<br />
   Last but not least, this change allows us to take advantage of dynamic style props. We will use them for dynamic color props, variant props, and new style props available in the core components.
 
diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md
index a05495c650d2db..f24f2392a66512 100644
--- a/docs/pages/blog/2021-q2-update.md
+++ b/docs/pages/blog/2021-q2-update.md
@@ -120,7 +120,7 @@ The date picker is at the border between the core component and advanced compone
 
   <img loading="lazy" src="/static/blog/2021-q2-update/single-select.png" alt="" style="width: 481px; margin-bottom: 16px;" />
 
-  <p class="blog-description">the <a href="https://codesandbox.io/s/material-demo-forked-iuyo5?file=/demo.js">codesandbox</a></p>
+  <p class="blog-description">the <a href="https://codesandbox.io/p/sandbox/material-demo-forked-iuyo5?file=/demo.js">codesandbox</a></p>
 
   and the **boolean** column type.
 
diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md
index 55d94f58b8e67d..e760c8ed007ae1 100644
--- a/docs/pages/blog/first-look-at-joy.md
+++ b/docs/pages/blog/first-look-at-joy.md
@@ -139,21 +139,21 @@ They are also available in the docs [Templates page](/joy-ui/getting-started/tem
 <a href="/joy-ui/getting-started/templates/email/"><img src="/static/blog/first-look-at-joy/email.png" style="width: 692px; margin-top: 8px; margin-bottom: 16px;" loading="lazy" alt="Screenshot of an email application mockup built with Joy UI" /></a>
 
 - [Live demo](/joy-ui/getting-started/templates/email/)
-- [CodeSandbox](https://codesandbox.io/s/8gtttr?file=/App.tsx)
+- [CodeSandbox](https://codesandbox.io/p/sandbox/8gtttr?file=/App.tsx)
 
 ### File management
 
 <a href="/joy-ui/getting-started/templates/files/"><img src="/static/blog/first-look-at-joy/files.png" style="width: 692px; margin-top: 8px; margin-bottom: 16px;" loading="lazy" alt="Screenshot of file management application mockup built with Joy UI" /></a>
 
 - [Live demo](/joy-ui/getting-started/templates/files/)
-- [CodeSandbox](https://codesandbox.io/s/ro2b1t?file=/App.tsx)
+- [CodeSandbox](https://codesandbox.io/p/sandbox/ro2b1t?file=/App.tsx)
 
 ### Team management
 
 <a href="/joy-ui/getting-started/templates/team/"><img src="/static/blog/first-look-at-joy/people.png" style="width: 692px; margin-top: 8px; margin-bottom: 16px;" loading="lazy" alt="Screenshot of a team management application mockup built with Joy UI" /></a>
 
 - [Live demo](/joy-ui/getting-started/templates/team/)
-- [CodeSandbox](https://codesandbox.io/s/dclgbp?file=/App.tsx)
+- [CodeSandbox](https://codesandbox.io/p/sandbox/dclgbp?file=/App.tsx)
 
 Joy UI is just getting started and we hope you're as excited as we are－stay tuned for more news in the near future!
 
diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md
index 3d9238c915bc92..54a0e0f853ba41 100644
--- a/docs/pages/blog/making-customizable-components.md
+++ b/docs/pages/blog/making-customizable-components.md
@@ -35,7 +35,7 @@ For each of them, we assign a specific CSS class:
 Notice that each element is styled using only one CSS class—the thumb style, for example, is applied with the `css-jsexje-MuiSwitch-thumb` class, so any CSS selector that includes more than one class will override its style.
 
 I'm not a designer, so I made an ugly switch example using only CSS—
-you can play around with it in [CodeSandbox](https://codesandbox.io/s/fast-http-kv85p5?file=/src/App.js):
+you can play around with it in [CodeSandbox](https://codesandbox.io/p/sandbox/fast-http-kv85p5?file=/src/App.js):
 
 <img src="/static/blog/making-customizable-components/uglySwitches.png" style="width: 692px; aspect-ratio: 173/80; margin-top: 16px; margin-bottom: 8px;" loading="lazy" alt="Switch customized with CSS" />
 
diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md
index 27676c0da833e7..1a443b544e2cd0 100644
--- a/docs/pages/blog/mui-core-v5.md
+++ b/docs/pages/blog/mui-core-v5.md
@@ -103,13 +103,13 @@ const StyledDiv = styled.div`
 `;
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/elastic-yonath-uedfv?file=/src/App.js">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/elastic-yonath-uedfv?file=/src/App.js">CodeSandbox</a></p>
 
 You can find it in [styled-components](https://styled-components.com/), [emotion](https://emotion.sh/docs/styled), [goober](https://goober.js.org/), [stitches](https://stitches.dev/docs/api#styled), or [linaria](https://linaria.dev/).
 While MUI is compatible with any styling solution (as long as the styles have more specificity, for example, Tailwind CSS), many developers still felt the need to learn something new: the [`makeStyles`](https://mui.com/system/styles/basics/#hook-api) API.
 
 2. Our React integration with JSS (`@mui/styles`) is **too slow** to unlock the next layer of customization DX we aim for.
-   The static CSS generation using v4 was fast enough, even [faster](https://codesandbox.io/s/nb05w?file=/src/App.js) than emotion,
+   The static CSS generation using v4 was fast enough, even [faster](https://codesandbox.io/p/sandbox/nb05w?file=/src/App.js) than emotion,
    however, the dynamic style generation was too slow to be used in production. We would have needed to reimplement it.
 3. Many developers were advocating for MUI to [migrate to styled-components](https://github.com/mui/material-ui/issues/6115),
    which would allow us to drop the custom React JSS wrapper we maintain.
@@ -130,7 +130,7 @@ After [exploring](https://github.com/mui/material-ui/issues/22342) many differen
 
 3. For the last couple of months, we have been [sponsoring](https://opencollective.com/emotion) Emotion with a $100/month grant. We are now increasing this amount to $1,000/month. It's in our best interest to help ensure the library keeps pushing the envelope, leading the state of the art in a competitive space.
 
-The first immediate benefit of the move to Emotion was **performance**. The `<Box>` component is [x5-x10 more performant](https://codesandbox.io/s/zlh5w?file=/src/App.js) in v5, compared to v4.
+The first immediate benefit of the move to Emotion was **performance**. The `<Box>` component is [x5-x10 more performant](https://codesandbox.io/p/sandbox/zlh5w?file=/src/App.js) in v5, compared to v4.
 
 We would like to thank all the community contributors that made the migration of the components and documentation possible in [#24405](https://github.com/mui/material-ui/issues/24405) and [#16947](https://github.com/mui/material-ui/issues/16947): [@natac13](https://github.com/natac13), [@vicasas](https://github.com/vicasas), [@mngu](https://github.com/mngu), [@kodai3](https://github.com/kodai3), [@xs9627](https://github.com/xs9627), [@povilass](https://github.com/povilass), [@duganbrett](https://github.com/duganbrett), [@queengooborg](https://github.com/queengooborg), and more.
 It was a major undertaking!
@@ -163,7 +163,7 @@ For instance, you can add one unit of vertical margin with:
 <Slider sx={{ my: 1 }} />
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/nostalgic-williams-zmo5r?file=/src/App.js">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/nostalgic-williams-zmo5r?file=/src/App.js">CodeSandbox</a></p>
 
 Developers already seem to [love it](https://twitter.com/AnsonLowZF/status/1397034690771443715).
 You can find a [side-by-side comparison](https://mui.com/system/getting-started/usage/#why-use-mui-system) of `styled()` vs. `sx` in the documentation to determine when you should use the prop.
@@ -179,7 +179,7 @@ They expose a subset of the `sx` prop as flat props, for instance:
 <Typography sx={{ color: 'grey.600' }}>
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/keen-worker-zo2r3?file=/src/App.tsx">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/keen-worker-zo2r3?file=/src/App.tsx">CodeSandbox</a></p>
 
 See the [API tradeoff](https://mui.com/system/getting-started/usage/#api-tradeoff) section of the documentation for why not all the components accept these flat props.
 
@@ -234,7 +234,7 @@ declare module '@mui/material/Button' {
 <Button color="neutral"  />
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/stupefied-mclaren-ho4zs?file=/src/App.tsx">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/stupefied-mclaren-ho4zs?file=/src/App.tsx">CodeSandbox</a></p>
 
 **Second**, you can add [custom variants](/material-ui/customization/theme-components/#creating-new-component-variants) to the theme, overriding the CSS for specific component prop combinations.
 
@@ -271,7 +271,7 @@ declare module '@mui/material/Button' {
 </Button>
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/sharp-sky-xwz3d?file=/src/App.tsx">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/sharp-sky-xwz3d?file=/src/App.tsx">CodeSandbox</a></p>
 
 ### Global class names
 
@@ -318,7 +318,7 @@ const CustomizedTextField3 = styled((props) => (
 }) as typeof TextField;
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/zealous-dawn-0yr4g?file=/src/App.tsx">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/zealous-dawn-0yr4g?file=/src/App.tsx">CodeSandbox</a></p>
 
 Option 1 is the simplest but if you want more type safety and do not use a magic string (`MuiOutlinedInput-notchedOutline`), you can use Option 2.
 
@@ -374,7 +374,7 @@ const CustomButton = React.forwardRef(function CustomButton(
 });
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/7lc1r?file=/demo.tsx">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/7lc1r?file=/demo.tsx">CodeSandbox</a></p>
 
 We discuss the effort in [#6218](https://github.com/mui/material-ui/issues/6218).
 You can use [#27170](https://github.com/mui/material-ui/issues/27170) to follow our progress.
diff --git a/docs/pages/blog/v6-beta-pickers.md b/docs/pages/blog/v6-beta-pickers.md
index d21e76877014d0..5f721809eb4f86 100644
--- a/docs/pages/blog/v6-beta-pickers.md
+++ b/docs/pages/blog/v6-beta-pickers.md
@@ -111,7 +111,7 @@ Now that you've seen what's fundamentally changed with the Pickers, let's briefl
   You don't need to provide the usual `TextField` on `renderInput` anymore unless you need it customized.
   In which case you can do it by:
 
-  1. Customizing through props via `field` and `input` slots ([codebox example](https://codesandbox.io/s/customizing-fields-with-props-o66r1c?file=/demo.tsx)).
+  1. Customizing through props via `field` and `input` slots ([codebox example](https://codesandbox.io/p/sandbox/customizing-fields-with-props-o66r1c?file=/demo.tsx)).
   2. Build a new field component using the Field's headless API (documentation coming soon).
   3. Use an entirely [custom text field](https://next.mui.com/x/react-date-pickers/date-picker/#custom-input-component) to suit your use case.
 
diff --git a/docs/pages/experiments/blog/blog.md b/docs/pages/experiments/blog/blog.md
index 09c041c7df713e..99b0dfbedd97dc 100644
--- a/docs/pages/experiments/blog/blog.md
+++ b/docs/pages/experiments/blog/blog.md
@@ -24,6 +24,6 @@ More text below.
 <Slider sx={{ my: 1 }} />
 ```
 
-<p class="blog-description"><a href="https://codesandbox.io/s/nostalgic-williams-zmo5r?file=/src/App.js">CodeSandbox</a></p>
+<p class="blog-description"><a href="https://codesandbox.io/p/sandbox/nostalgic-williams-zmo5r?file=/src/App.js">CodeSandbox</a></p>
 
 More text below.
diff --git a/docs/public/_redirects b/docs/public/_redirects
index ee77a5b4d135e8..3ca365eceebdb8 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -16,9 +16,9 @@
 /r/pseudo-classes-guide /material-ui/customization/how-to-customize/#state-classes 302
 /r/state-classes-guide /material-ui/customization/how-to-customize/#state-classes 302
 /r/input-component-ref-interface /material-ui/react-text-field/#integration-with-3rd-party-input-libraries 302
-/r/issue-template https://codesandbox.io/s/material-ui-issue-latest-s2dsx 302
-/r/issue-template-next https://codesandbox.io/s/material-ui-issue-next-o7xkt 302
-/r/issue-template-latest https://codesandbox.io/s/material-ui-issue-latest-s2dsx 302
+/r/issue-template https://codesandbox.io/p/sandbox/material-ui-issue-latest-s2dsx 302
+/r/issue-template-next https://codesandbox.io/p/sandbox/material-ui-issue-next-o7xkt 302
+/r/issue-template-latest https://codesandbox.io/p/sandbox/material-ui-issue-latest-s2dsx 302
 /r/ts-issue-template https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEHOCcQyGFijBkAGzJ06BOaPzAIouABEsICAAoAlKzsXDwAmvJQQhAqWBpAA 302
 /r/custom-component-variants /material-ui/customization/how-to-customize/#adding-new-component-variants 302
 /r/migration-v4 /material-ui/migration/migration-v4/ 302
diff --git a/examples/base-ui-cra-ts/README.md b/examples/base-ui-cra-ts/README.md
index d8e73bef37736e..23e5afef8fbc45 100644
--- a/examples/base-ui-cra-ts/README.md
+++ b/examples/base-ui-cra-ts/README.md
@@ -28,4 +28,4 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-cra-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-cra-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-cra-ts)
diff --git a/examples/base-ui-cra/README.md b/examples/base-ui-cra/README.md
index 070caa8cd46b1b..24317d6b5a56f8 100644
--- a/examples/base-ui-cra/README.md
+++ b/examples/base-ui-cra/README.md
@@ -28,4 +28,4 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-cra)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-cra)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-cra)
diff --git a/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md
index d874cc6012cbed..85e178dda2f918 100644
--- a/examples/base-ui-nextjs-tailwind-ts/README.md
+++ b/examples/base-ui-nextjs-tailwind-ts/README.md
@@ -26,7 +26,7 @@ or
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts)
 
 ## Learn more
 
diff --git a/examples/base-ui-vite-tailwind-ts/README.md b/examples/base-ui-vite-tailwind-ts/README.md
index 65d8efe3feb3ff..398c8dc8b680b2 100644
--- a/examples/base-ui-vite-tailwind-ts/README.md
+++ b/examples/base-ui-vite-tailwind-ts/README.md
@@ -28,4 +28,4 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts)
diff --git a/examples/base-ui-vite-tailwind/README.md b/examples/base-ui-vite-tailwind/README.md
index 04a40095b7b28b..a78da6c9a191bf 100644
--- a/examples/base-ui-vite-tailwind/README.md
+++ b/examples/base-ui-vite-tailwind/README.md
@@ -28,4 +28,4 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind)
diff --git a/examples/joy-ui-cra-ts/README.md b/examples/joy-ui-cra-ts/README.md
index 9ba47d544a98c0..55d8c02e5bd8cf 100644
--- a/examples/joy-ui-cra-ts/README.md
+++ b/examples/joy-ui-cra-ts/README.md
@@ -26,7 +26,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts)
 
 ## What's next?
 
diff --git a/examples/joy-ui-nextjs-ts/README.md b/examples/joy-ui-nextjs-ts/README.md
index bdc58b0416c06b..881e6eb2b3c187 100644
--- a/examples/joy-ui-nextjs-ts/README.md
+++ b/examples/joy-ui-nextjs-ts/README.md
@@ -28,7 +28,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts)
 
 ## Learn more
 
diff --git a/examples/joy-ui-vite-ts/README.md b/examples/joy-ui-vite-ts/README.md
index a46bd11cb85a16..a06f4ef1961e16 100644
--- a/examples/joy-ui-vite-ts/README.md
+++ b/examples/joy-ui-vite-ts/README.md
@@ -26,7 +26,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-cra-styled-components-ts/README.md b/examples/material-ui-cra-styled-components-ts/README.md
index 0db84ea0644e49..9c0612d071bd15 100644
--- a/examples/material-ui-cra-styled-components-ts/README.md
+++ b/examples/material-ui-cra-styled-components-ts/README.md
@@ -38,11 +38,11 @@ npm start
 
 <!-- #default-branch-switch -->
 
-Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts).
+Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts).
 
 The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`.
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/styled-components-interoperability-w9z9d)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-cra-styled-components/README.md b/examples/material-ui-cra-styled-components/README.md
index 338bd5226b679f..79f78a1ec8fd84 100644
--- a/examples/material-ui-cra-styled-components/README.md
+++ b/examples/material-ui-cra-styled-components/README.md
@@ -22,11 +22,11 @@ npm start
 
 <!-- #default-branch-switch -->
 
-Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components).
+Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components).
 
 The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`.
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/styled-components-interoperability-w9z9d)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-cra-ts/README.md b/examples/material-ui-cra-ts/README.md
index f9e09dd63ef914..577adbea405392 100644
--- a/examples/material-ui-cra-ts/README.md
+++ b/examples/material-ui-cra-ts/README.md
@@ -22,7 +22,7 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-ts)
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra-ts)
 
diff --git a/examples/material-ui-cra/README.md b/examples/material-ui-cra/README.md
index e10d3a8b3a0dc1..defa3f413985df 100644
--- a/examples/material-ui-cra/README.md
+++ b/examples/material-ui-cra/README.md
@@ -22,7 +22,7 @@ or:
 
 <!-- #default-branch-switch -->
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra)
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra)
 
diff --git a/examples/material-ui-express-ssr/README.md b/examples/material-ui-express-ssr/README.md
index 7dcdcb85998dc6..3b6a03bfa72209 100644
--- a/examples/material-ui-express-ssr/README.md
+++ b/examples/material-ui-express-ssr/README.md
@@ -24,7 +24,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-express-ssr)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-express-ssr)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-express-ssr)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-nextjs-pages-router-ts/README.md b/examples/material-ui-nextjs-pages-router-ts/README.md
index 1171328c19a9ef..26e31cc5db4faf 100644
--- a/examples/material-ui-nextjs-pages-router-ts/README.md
+++ b/examples/material-ui-nextjs-pages-router-ts/README.md
@@ -24,7 +24,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-nextjs-pages-router/README.md b/examples/material-ui-nextjs-pages-router/README.md
index b1ed6ab52e4f10..190b474fa73b03 100644
--- a/examples/material-ui-nextjs-pages-router/README.md
+++ b/examples/material-ui-nextjs-pages-router/README.md
@@ -24,7 +24,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md
index 48b2a10202b51e..0780e4c7b57ffe 100644
--- a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md
+++ b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md
@@ -24,7 +24,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-nextjs-ts/README.md b/examples/material-ui-nextjs-ts/README.md
index a0f9e85dc8e076..970535f6b25441 100644
--- a/examples/material-ui-nextjs-ts/README.md
+++ b/examples/material-ui-nextjs-ts/README.md
@@ -28,7 +28,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts)
 
 ## Learn more
 
diff --git a/examples/material-ui-nextjs/README.md b/examples/material-ui-nextjs/README.md
index f2684b1883538d..e6f9ef14d967ba 100644
--- a/examples/material-ui-nextjs/README.md
+++ b/examples/material-ui-nextjs/README.md
@@ -28,7 +28,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-nextjs)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs)
 
 ## Learn more
 
diff --git a/examples/material-ui-remix-ts/README.md b/examples/material-ui-remix-ts/README.md
index 8e09743a57ab1e..b86ea55611d715 100644
--- a/examples/material-ui-remix-ts/README.md
+++ b/examples/material-ui-remix-ts/README.md
@@ -24,7 +24,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-remix-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-remix-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-remix-ts)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-vite-ts/README.md b/examples/material-ui-vite-ts/README.md
index feb2b85a793930..fa75e163c264a1 100644
--- a/examples/material-ui-vite-ts/README.md
+++ b/examples/material-ui-vite-ts/README.md
@@ -24,7 +24,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite-ts)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-vite-ts)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite-ts)
 
 ## The idea behind the example
 
diff --git a/examples/material-ui-vite/README.md b/examples/material-ui-vite/README.md
index 485eed72c6f3db..1bf7e18a459499 100644
--- a/examples/material-ui-vite/README.md
+++ b/examples/material-ui-vite/README.md
@@ -24,7 +24,7 @@ or:
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-vite)
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-vite)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-vite)
 
 ## The idea behind the example
 
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index 7c82671e099c47..626f60815a083a 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -151,7 +151,7 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn
   const createHandleKeyUp =
     (otherHandlers: EventHandlers) => (event: React.KeyboardEvent & MuiCancellableEvent) => {
       // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-      // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+      // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
 
       if (event.target === event.currentTarget) {
         setActive(false);
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
index 219d18666c51df..7c5d5416064607 100644
--- a/packages/mui-base/src/useSlider/useSlider.ts
+++ b/packages/mui-base/src/useSlider/useSlider.ts
@@ -305,7 +305,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     if (disabled && sliderRef.current!.contains(document.activeElement)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
-      // https://codesandbox.io/s/mui-pr-22247-forked-h151h?file=/src/App.js
+      // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
       // @ts-ignore
       document.activeElement?.blur();
     }
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core-styles.js b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core-styles.js
index 8a9501fee8f1ea..634a224c49e12e 100644
--- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core-styles.js
+++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-from-material-ui-core-styles.js
@@ -3,8 +3,8 @@ import { makeStyles } from "@material-ui/core/styles";
 
 /*
 Sandboxes for verifying correct behavior:
-JSS - https://codesandbox.io/s/case1-jss-dedp2f?file=/src/App.js
-TSS - https://codesandbox.io/s/case1-tss-s0z7tx?file=/src/App.js
+JSS - https://codesandbox.io/p/sandbox/case1-jss-dedp2f?file=/src/App.js
+TSS - https://codesandbox.io/p/sandbox/case1-tss-s0z7tx?file=/src/App.js
  */
 
 const useStyles = makeStyles({
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-typescript.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-typescript.tsx
index 1748cd6b6d419f..59403b643b82b9 100644
--- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-typescript.tsx
+++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/actual-typescript.tsx
@@ -3,8 +3,8 @@ import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
 
 /*
 Sandboxes for verifying correct behavior:
-JSS - https://codesandbox.io/s/typescript-case-bt065c?file=/demo.tsx
-TSS - https://codesandbox.io/s/typescript-case-7jwpms?file=/demo.tsx
+JSS - https://codesandbox.io/p/sandbox/typescript-case-bt065c?file=/demo.tsx
+TSS - https://codesandbox.io/p/sandbox/typescript-case-7jwpms?file=/demo.tsx
  */
 
 const useStyles = makeStyles((theme: Theme) =>
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core-styles.js b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core-styles.js
index 3dde6ce7518223..e10eaf7673ecf2 100644
--- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core-styles.js
+++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-from-material-ui-core-styles.js
@@ -3,8 +3,8 @@ import { makeStyles } from 'tss-react/mui';
 
 /*
 Sandboxes for verifying correct behavior:
-JSS - https://codesandbox.io/s/case1-jss-dedp2f?file=/src/App.js
-TSS - https://codesandbox.io/s/case1-tss-s0z7tx?file=/src/App.js
+JSS - https://codesandbox.io/p/sandbox/case1-jss-dedp2f?file=/src/App.js
+TSS - https://codesandbox.io/p/sandbox/case1-tss-s0z7tx?file=/src/App.js
  */
 
 const useStyles = makeStyles({ name: "TestName" })({
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript.tsx
index bd296d2afac08c..bc6a2acb4d8cef 100644
--- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript.tsx
+++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript.tsx
@@ -4,8 +4,8 @@ import { Theme } from '@material-ui/core/styles';
 
 /*
 Sandboxes for verifying correct behavior:
-JSS - https://codesandbox.io/s/typescript-case-bt065c?file=/demo.tsx
-TSS - https://codesandbox.io/s/typescript-case-7jwpms?file=/demo.tsx
+JSS - https://codesandbox.io/p/sandbox/typescript-case-bt065c?file=/demo.tsx
+TSS - https://codesandbox.io/p/sandbox/typescript-case-7jwpms?file=/demo.tsx
  */
 
 const useStyles = makeStyles<void, 'test2'>()((theme: Theme, _params, classes) => ({
diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
index 49366647405411..28f380679c31db 100644
--- a/packages/mui-material/src/ButtonBase/ButtonBase.js
+++ b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -260,7 +260,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
 
   const handleKeyUp = useEventCallback((event) => {
     // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
     if (
       focusRipple &&
       event.key === ' ' &&
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index 0fe3afcd6e7def..e54de434b53d26 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -772,7 +772,7 @@ describe('<SwipeableDrawer />', () => {
         </div>,
       );
 
-      // Event order recorded with https://codesandbox.io/s/single-swipearea-lock-ksyss
+      // Event order recorded with https://codesandbox.io/p/sandbox/single-swipearea-lock-ksyss
       const topMostSwipeArea = screen.getAllByTestId('swipearea').slice(-1)[0];
       fireEvent.touchStart(topMostSwipeArea, {
         touches: [new Touch({ identifier: 0, target: topMostSwipeArea, pageX: 0, clientY: 0 })],
diff --git a/packages/mui-material/src/useTouchRipple/useTouchRipple.ts b/packages/mui-material/src/useTouchRipple/useTouchRipple.ts
index 8cfcfd3589edcf..8773c5d227a5c2 100644
--- a/packages/mui-material/src/useTouchRipple/useTouchRipple.ts
+++ b/packages/mui-material/src/useTouchRipple/useTouchRipple.ts
@@ -73,7 +73,7 @@ const useTouchRipple = (props: UseTouchRippleProps) => {
 
   const handleKeyUp = useEventCallback((event: React.KeyboardEvent) => {
     // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
     if (
       !disableFocusRipple &&
       event.key === ' ' &&

From 303d2b626e77b846aa1649e7bd5178dc24a64519 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Tue, 12 Dec 2023 01:46:56 +0530
Subject: [PATCH 06/11] [joy-ui][Radio][Input] Fix inheritance of disabled prop
 (#39934)

---
 packages/mui-joy/src/Input/Input.test.tsx     | 25 ++++++++++++++++++-
 packages/mui-joy/src/Input/Input.tsx          |  2 +-
 .../mui-joy/src/Input/useForwardedInput.ts    |  3 ++-
 packages/mui-joy/src/Radio/Radio.test.tsx     | 25 ++++++++++++++++++-
 packages/mui-joy/src/Radio/Radio.tsx          |  2 +-
 5 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/packages/mui-joy/src/Input/Input.test.tsx b/packages/mui-joy/src/Input/Input.test.tsx
index 0cf5aaccba0c4f..c13f3fe3915441 100644
--- a/packages/mui-joy/src/Input/Input.test.tsx
+++ b/packages/mui-joy/src/Input/Input.test.tsx
@@ -9,7 +9,8 @@ import {
   fireEvent,
 } from '@mui-internal/test-utils';
 import Input, { inputClasses as classes } from '@mui/joy/Input';
-import { ThemeProvider } from '@mui/joy/styles';
+import { ThemeProvider, extendTheme } from '@mui/joy/styles';
+import FormControl from '@mui/joy/FormControl';
 
 describe('Joy <Input />', () => {
   const { render } = createRenderer();
@@ -86,6 +87,28 @@ describe('Joy <Input />', () => {
       // check if focus not initiated again
       expect(handleFocus.callCount).to.equal(1);
     });
+
+    it('disabled prop from FormControl should take precedence over disabled prop from theme', () => {
+      const { getByRole } = render(
+        <ThemeProvider
+          theme={extendTheme({
+            components: {
+              JoyInput: {
+                defaultProps: {
+                  disabled: false,
+                },
+              },
+            },
+          })}
+        >
+          <FormControl disabled>
+            <Input />
+          </FormControl>
+        </ThemeProvider>,
+      );
+
+      expect(getByRole('textbox')).to.have.attribute('disabled');
+    });
   });
 
   describe('slotProps: input', () => {
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index fc4113f9b7df84..0ffcf272d2f09e 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -266,7 +266,7 @@ const Input = React.forwardRef(function Input(inProps, ref) {
     slots = {},
     slotProps = {},
     ...other
-  } = useForwardedInput<InputProps>(props, inputClasses);
+  } = useForwardedInput<InputProps>({ ...props, disabledInProp: inProps.disabled }, inputClasses);
 
   if (process.env.NODE_ENV !== 'production') {
     const registerEffect = formControl?.registerEffect;
diff --git a/packages/mui-joy/src/Input/useForwardedInput.ts b/packages/mui-joy/src/Input/useForwardedInput.ts
index e7b095522be9c0..d4efefc9c77a71 100644
--- a/packages/mui-joy/src/Input/useForwardedInput.ts
+++ b/packages/mui-joy/src/Input/useForwardedInput.ts
@@ -17,6 +17,7 @@ export default function useForwardedInput<Output>(
     className,
     defaultValue,
     disabled: disabledProp,
+    disabledInProp,
     error: errorProp,
     id,
     name,
@@ -35,7 +36,7 @@ export default function useForwardedInput<Output>(
   } = props;
 
   const { getRootProps, getInputProps, focused, error, disabled } = useInput({
-    disabled: disabledProp ?? formControl?.disabled,
+    disabled: disabledInProp ?? formControl?.disabled ?? disabledProp,
     defaultValue,
     error: errorProp,
     onBlur,
diff --git a/packages/mui-joy/src/Radio/Radio.test.tsx b/packages/mui-joy/src/Radio/Radio.test.tsx
index cd475f782c6c5f..e75c93f5d21914 100644
--- a/packages/mui-joy/src/Radio/Radio.test.tsx
+++ b/packages/mui-joy/src/Radio/Radio.test.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils';
 import Radio, { radioClasses as classes } from '@mui/joy/Radio';
-import { ThemeProvider } from '@mui/joy/styles';
+import { ThemeProvider, extendTheme } from '@mui/joy/styles';
+import FormControl from '@mui/joy/FormControl';
 
 describe('<Radio />', () => {
   const { render } = createRenderer();
@@ -73,6 +74,28 @@ describe('<Radio />', () => {
     expect(getByRole('radio')).to.have.property('disabled', true);
   });
 
+  it('disabled prop from FormControl should take precedence over disabled prop from theme', () => {
+    const { getByRole } = render(
+      <ThemeProvider
+        theme={extendTheme({
+          components: {
+            JoyRadio: {
+              defaultProps: {
+                disabled: false,
+              },
+            },
+          },
+        })}
+      >
+        <FormControl disabled>
+          <Radio value="outlined" label="Outlined" />
+        </FormControl>
+      </ThemeProvider>,
+    );
+
+    expect(getByRole('radio')).to.have.property('disabled', true);
+  });
+
   it('the Checked state changes after change events', () => {
     const { getByRole } = render(<Radio defaultChecked />);
 
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index c3a3954b138f66..4c675dd8eac878 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -310,7 +310,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
   const useRadioProps = {
     checked: radioChecked,
     defaultChecked,
-    disabled: disabledProp ?? formControl?.disabled,
+    disabled: inProps.disabled || formControl?.disabled || disabledProp,
     onBlur,
     onChange,
     onFocus,

From 363a9a6888f2565bc610ab6d505985cee5a3182a Mon Sep 17 00:00:00 2001
From: Blake Netzeband <blake.netzeband@gmail.com>
Date: Mon, 11 Dec 2023 13:18:34 -0700
Subject: [PATCH 07/11] [material-ui] Refactor ComponentsVariants type into a
 generic (#39623)

---
 .../mui-material/src/styles/components.d.ts   | 230 +++++++++---------
 .../mui-material/src/styles/variants.d.ts     |   3 +-
 2 files changed, 116 insertions(+), 117 deletions(-)

diff --git a/packages/mui-material/src/styles/components.d.ts b/packages/mui-material/src/styles/components.d.ts
index 6f4d3654e53449..39570e05b6d3ed 100644
--- a/packages/mui-material/src/styles/components.d.ts
+++ b/packages/mui-material/src/styles/components.d.ts
@@ -6,377 +6,377 @@ export interface Components<Theme = unknown> {
   MuiAlert?: {
     defaultProps?: ComponentsProps['MuiAlert'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAlert'];
-    variants?: ComponentsVariants['MuiAlert'];
+    variants?: ComponentsVariants<Theme>['MuiAlert'];
   };
   MuiAlertTitle?: {
     defaultProps?: ComponentsProps['MuiAlertTitle'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAlertTitle'];
-    variants?: ComponentsVariants['MuiAlertTitle'];
+    variants?: ComponentsVariants<Theme>['MuiAlertTitle'];
   };
   MuiAppBar?: {
     defaultProps?: ComponentsProps['MuiAppBar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAppBar'];
-    variants?: ComponentsVariants['MuiAppBar'];
+    variants?: ComponentsVariants<Theme>['MuiAppBar'];
   };
   MuiAutocomplete?: {
     defaultProps?: ComponentsProps['MuiAutocomplete'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAutocomplete'];
-    variants?: ComponentsVariants['MuiAutocomplete'];
+    variants?: ComponentsVariants<Theme>['MuiAutocomplete'];
   };
   MuiAvatar?: {
     defaultProps?: ComponentsProps['MuiAvatar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAvatar'];
-    variants?: ComponentsVariants['MuiAvatar'];
+    variants?: ComponentsVariants<Theme>['MuiAvatar'];
   };
   MuiAvatarGroup?: {
     defaultProps?: ComponentsProps['MuiAvatarGroup'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAvatarGroup'];
-    variants?: ComponentsVariants['MuiAvatarGroup'];
+    variants?: ComponentsVariants<Theme>['MuiAvatarGroup'];
   };
   MuiBackdrop?: {
     defaultProps?: ComponentsProps['MuiBackdrop'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiBackdrop'];
-    variants?: ComponentsVariants['MuiBackdrop'];
+    variants?: ComponentsVariants<Theme>['MuiBackdrop'];
   };
   MuiBadge?: {
     defaultProps?: ComponentsProps['MuiBadge'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiBadge'];
-    variants?: ComponentsVariants['MuiBadge'];
+    variants?: ComponentsVariants<Theme>['MuiBadge'];
   };
   MuiBottomNavigation?: {
     defaultProps?: ComponentsProps['MuiBottomNavigation'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiBottomNavigation'];
-    variants?: ComponentsVariants['MuiBottomNavigation'];
+    variants?: ComponentsVariants<Theme>['MuiBottomNavigation'];
   };
   MuiBottomNavigationAction?: {
     defaultProps?: ComponentsProps['MuiBottomNavigationAction'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiBottomNavigationAction'];
-    variants?: ComponentsVariants['MuiBottomNavigationAction'];
+    variants?: ComponentsVariants<Theme>['MuiBottomNavigationAction'];
   };
   MuiBreadcrumbs?: {
     defaultProps?: ComponentsProps['MuiBreadcrumbs'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiBreadcrumbs'];
-    variants?: ComponentsVariants['MuiBreadcrumbs'];
+    variants?: ComponentsVariants<Theme>['MuiBreadcrumbs'];
   };
   MuiButton?: {
     defaultProps?: ComponentsProps['MuiButton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiButton'];
-    variants?: ComponentsVariants['MuiButton'];
+    variants?: ComponentsVariants<Theme>['MuiButton'];
   };
   MuiButtonBase?: {
     defaultProps?: ComponentsProps['MuiButtonBase'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiButtonBase'];
-    variants?: ComponentsVariants['MuiButtonBase'];
+    variants?: ComponentsVariants<Theme>['MuiButtonBase'];
   };
   MuiButtonGroup?: {
     defaultProps?: ComponentsProps['MuiButtonGroup'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiButtonGroup'];
-    variants?: ComponentsVariants['MuiButtonGroup'];
+    variants?: ComponentsVariants<Theme>['MuiButtonGroup'];
   };
   MuiCard?: {
     defaultProps?: ComponentsProps['MuiCard'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCard'];
-    variants?: ComponentsVariants['MuiCard'];
+    variants?: ComponentsVariants<Theme>['MuiCard'];
   };
   MuiCardActionArea?: {
     defaultProps?: ComponentsProps['MuiCardActionArea'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCardActionArea'];
-    variants?: ComponentsVariants['MuiCardActionArea'];
+    variants?: ComponentsVariants<Theme>['MuiCardActionArea'];
   };
   MuiCardActions?: {
     defaultProps?: ComponentsProps['MuiCardActions'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCardActions'];
-    variants?: ComponentsVariants['MuiCardActions'];
+    variants?: ComponentsVariants<Theme>['MuiCardActions'];
   };
   MuiCardContent?: {
     defaultProps?: ComponentsProps['MuiCardContent'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCardContent'];
-    variants?: ComponentsVariants['MuiCardContent'];
+    variants?: ComponentsVariants<Theme>['MuiCardContent'];
   };
   MuiCardHeader?: {
     defaultProps?: ComponentsProps['MuiCardHeader'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCardHeader'];
-    variants?: ComponentsVariants['MuiCardHeader'];
+    variants?: ComponentsVariants<Theme>['MuiCardHeader'];
   };
   MuiCardMedia?: {
     defaultProps?: ComponentsProps['MuiCardMedia'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCardMedia'];
-    variants?: ComponentsVariants['MuiCardMedia'];
+    variants?: ComponentsVariants<Theme>['MuiCardMedia'];
   };
   MuiCheckbox?: {
     defaultProps?: ComponentsProps['MuiCheckbox'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCheckbox'];
-    variants?: ComponentsVariants['MuiCheckbox'];
+    variants?: ComponentsVariants<Theme>['MuiCheckbox'];
   };
   MuiChip?: {
     defaultProps?: ComponentsProps['MuiChip'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiChip'];
-    variants?: ComponentsVariants['MuiChip'];
+    variants?: ComponentsVariants<Theme>['MuiChip'];
   };
   MuiCircularProgress?: {
     defaultProps?: ComponentsProps['MuiCircularProgress'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCircularProgress'];
-    variants?: ComponentsVariants['MuiCircularProgress'];
+    variants?: ComponentsVariants<Theme>['MuiCircularProgress'];
   };
   MuiCollapse?: {
     defaultProps?: ComponentsProps['MuiCollapse'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCollapse'];
-    variants?: ComponentsVariants['MuiCollapse'];
+    variants?: ComponentsVariants<Theme>['MuiCollapse'];
   };
   MuiContainer?: {
     defaultProps?: ComponentsProps['MuiContainer'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiContainer'];
-    variants?: ComponentsVariants['MuiContainer'];
+    variants?: ComponentsVariants<Theme>['MuiContainer'];
   };
   MuiCssBaseline?: {
     defaultProps?: ComponentsProps['MuiCssBaseline'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiCssBaseline'];
-    variants?: ComponentsVariants['MuiCssBaseline'];
+    variants?: ComponentsVariants<Theme>['MuiCssBaseline'];
   };
   MuiDialog?: {
     defaultProps?: ComponentsProps['MuiDialog'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDialog'];
-    variants?: ComponentsVariants['MuiDialog'];
+    variants?: ComponentsVariants<Theme>['MuiDialog'];
   };
   MuiDialogActions?: {
     defaultProps?: ComponentsProps['MuiDialogActions'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDialogActions'];
-    variants?: ComponentsVariants['MuiDialogActions'];
+    variants?: ComponentsVariants<Theme>['MuiDialogActions'];
   };
   MuiDialogContent?: {
     defaultProps?: ComponentsProps['MuiDialogContent'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDialogContent'];
-    variants?: ComponentsVariants['MuiDialogContent'];
+    variants?: ComponentsVariants<Theme>['MuiDialogContent'];
   };
   MuiDialogContentText?: {
     defaultProps?: ComponentsProps['MuiDialogContentText'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDialogContentText'];
-    variants?: ComponentsVariants['MuiDialogContentText'];
+    variants?: ComponentsVariants<Theme>['MuiDialogContentText'];
   };
   MuiDialogTitle?: {
     defaultProps?: ComponentsProps['MuiDialogTitle'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDialogTitle'];
-    variants?: ComponentsVariants['MuiDialogTitle'];
+    variants?: ComponentsVariants<Theme>['MuiDialogTitle'];
   };
   MuiDivider?: {
     defaultProps?: ComponentsProps['MuiDivider'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDivider'];
-    variants?: ComponentsVariants['MuiDivider'];
+    variants?: ComponentsVariants<Theme>['MuiDivider'];
   };
   MuiDrawer?: {
     defaultProps?: ComponentsProps['MuiDrawer'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiDrawer'];
-    variants?: ComponentsVariants['MuiDrawer'];
+    variants?: ComponentsVariants<Theme>['MuiDrawer'];
   };
   MuiAccordion?: {
     defaultProps?: ComponentsProps['MuiAccordion'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAccordion'];
-    variants?: ComponentsVariants['MuiAccordion'];
+    variants?: ComponentsVariants<Theme>['MuiAccordion'];
   };
   MuiAccordionActions?: {
     defaultProps?: ComponentsProps['MuiAccordionActions'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAccordionActions'];
-    variants?: ComponentsVariants['MuiAccordionActions'];
+    variants?: ComponentsVariants<Theme>['MuiAccordionActions'];
   };
   MuiAccordionDetails?: {
     defaultProps?: ComponentsProps['MuiAccordionDetails'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAccordionDetails'];
-    variants?: ComponentsVariants['MuiAccordionDetails'];
+    variants?: ComponentsVariants<Theme>['MuiAccordionDetails'];
   };
   MuiAccordionSummary?: {
     defaultProps?: ComponentsProps['MuiAccordionSummary'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAccordionSummary'];
-    variants?: ComponentsVariants['MuiAccordionSummary'];
+    variants?: ComponentsVariants<Theme>['MuiAccordionSummary'];
   };
   MuiFab?: {
     defaultProps?: ComponentsProps['MuiFab'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiFab'];
-    variants?: ComponentsVariants['MuiFab'];
+    variants?: ComponentsVariants<Theme>['MuiFab'];
   };
   MuiFilledInput?: {
     defaultProps?: ComponentsProps['MuiFilledInput'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiFilledInput'];
-    variants?: ComponentsVariants['MuiFilledInput'];
+    variants?: ComponentsVariants<Theme>['MuiFilledInput'];
   };
   MuiFormControl?: {
     defaultProps?: ComponentsProps['MuiFormControl'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiFormControl'];
-    variants?: ComponentsVariants['MuiFormControl'];
+    variants?: ComponentsVariants<Theme>['MuiFormControl'];
   };
   MuiFormControlLabel?: {
     defaultProps?: ComponentsProps['MuiFormControlLabel'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiFormControlLabel'];
-    variants?: ComponentsVariants['MuiFormControlLabel'];
+    variants?: ComponentsVariants<Theme>['MuiFormControlLabel'];
   };
   MuiFormGroup?: {
     defaultProps?: ComponentsProps['MuiFormGroup'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiFormGroup'];
-    variants?: ComponentsVariants['MuiFormGroup'];
+    variants?: ComponentsVariants<Theme>['MuiFormGroup'];
   };
   MuiFormHelperText?: {
     defaultProps?: ComponentsProps['MuiFormHelperText'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiFormHelperText'];
-    variants?: ComponentsVariants['MuiFormHelperText'];
+    variants?: ComponentsVariants<Theme>['MuiFormHelperText'];
   };
   MuiFormLabel?: {
     defaultProps?: ComponentsProps['MuiFormLabel'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
-    variants?: ComponentsVariants['MuiFormLabel'];
+    variants?: ComponentsVariants<Theme>['MuiFormLabel'];
   };
   MuiGrid?: {
     defaultProps?: ComponentsProps['MuiGrid'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiGrid'];
-    variants?: ComponentsVariants['MuiGrid'];
+    variants?: ComponentsVariants<Theme>['MuiGrid'];
   };
   MuiGrid2?: {
     defaultProps?: ComponentsProps['MuiGrid2'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiGrid2'];
-    variants?: ComponentsVariants['MuiGrid2'];
+    variants?: ComponentsVariants<Theme>['MuiGrid2'];
   };
   MuiImageList?: {
     defaultProps?: ComponentsProps['MuiImageList'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiImageList'];
-    variants?: ComponentsVariants['MuiImageList'];
+    variants?: ComponentsVariants<Theme>['MuiImageList'];
   };
   MuiImageListItem?: {
     defaultProps?: ComponentsProps['MuiImageListItem'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiImageListItem'];
-    variants?: ComponentsVariants['MuiImageListItem'];
+    variants?: ComponentsVariants<Theme>['MuiImageListItem'];
   };
   MuiImageListItemBar?: {
     defaultProps?: ComponentsProps['MuiImageListItemBar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiImageListItemBar'];
-    variants?: ComponentsVariants['MuiImageListItemBar'];
+    variants?: ComponentsVariants<Theme>['MuiImageListItemBar'];
   };
   MuiIcon?: {
     defaultProps?: ComponentsProps['MuiIcon'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiIcon'];
-    variants?: ComponentsVariants['MuiIcon'];
+    variants?: ComponentsVariants<Theme>['MuiIcon'];
   };
   MuiIconButton?: {
     defaultProps?: ComponentsProps['MuiIconButton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiIconButton'];
-    variants?: ComponentsVariants['MuiIconButton'];
+    variants?: ComponentsVariants<Theme>['MuiIconButton'];
   };
   MuiInput?: {
     defaultProps?: ComponentsProps['MuiInput'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiInput'];
-    variants?: ComponentsVariants['MuiInput'];
+    variants?: ComponentsVariants<Theme>['MuiInput'];
   };
   MuiInputAdornment?: {
     defaultProps?: ComponentsProps['MuiInputAdornment'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiInputAdornment'];
-    variants?: ComponentsVariants['MuiInputAdornment'];
+    variants?: ComponentsVariants<Theme>['MuiInputAdornment'];
   };
   MuiInputBase?: {
     defaultProps?: ComponentsProps['MuiInputBase'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiInputBase'];
-    variants?: ComponentsVariants['MuiInputBase'];
+    variants?: ComponentsVariants<Theme>['MuiInputBase'];
   };
   MuiInputLabel?: {
     defaultProps?: ComponentsProps['MuiInputLabel'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiInputLabel'];
-    variants?: ComponentsVariants['MuiInputLabel'];
+    variants?: ComponentsVariants<Theme>['MuiInputLabel'];
   };
   MuiLinearProgress?: {
     defaultProps?: ComponentsProps['MuiLinearProgress'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiLinearProgress'];
-    variants?: ComponentsVariants['MuiLinearProgress'];
+    variants?: ComponentsVariants<Theme>['MuiLinearProgress'];
   };
   MuiLink?: {
     defaultProps?: ComponentsProps['MuiLink'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiLink'];
-    variants?: ComponentsVariants['MuiLink'];
+    variants?: ComponentsVariants<Theme>['MuiLink'];
   };
   MuiList?: {
     defaultProps?: ComponentsProps['MuiList'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiList'];
-    variants?: ComponentsVariants['MuiList'];
+    variants?: ComponentsVariants<Theme>['MuiList'];
   };
   MuiListItem?: {
     defaultProps?: ComponentsProps['MuiListItem'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiListItem'];
-    variants?: ComponentsVariants['MuiListItem'];
+    variants?: ComponentsVariants<Theme>['MuiListItem'];
   };
   MuiListItemButton?: {
     defaultProps?: ComponentsProps['MuiListItemButton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiListItemButton'];
-    variants?: ComponentsVariants['MuiListItemButton'];
+    variants?: ComponentsVariants<Theme>['MuiListItemButton'];
   };
   MuiListItemAvatar?: {
     defaultProps?: ComponentsProps['MuiListItemAvatar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiListItemAvatar'];
-    variants?: ComponentsVariants['MuiListItemAvatar'];
+    variants?: ComponentsVariants<Theme>['MuiListItemAvatar'];
   };
   MuiListItemIcon?: {
     defaultProps?: ComponentsProps['MuiListItemIcon'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiListItemIcon'];
-    variants?: ComponentsVariants['MuiListItemIcon'];
+    variants?: ComponentsVariants<Theme>['MuiListItemIcon'];
   };
   MuiListItemSecondaryAction?: {
     defaultProps?: ComponentsProps['MuiListItemSecondaryAction'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiListItemSecondaryAction'];
-    variants?: ComponentsVariants['MuiListItemSecondaryAction'];
+    variants?: ComponentsVariants<Theme>['MuiListItemSecondaryAction'];
   };
   MuiListItemText?: {
     defaultProps?: ComponentsProps['MuiListItemText'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiListItemText'];
-    variants?: ComponentsVariants['MuiListItemText'];
+    variants?: ComponentsVariants<Theme>['MuiListItemText'];
   };
   MuiListSubheader?: {
     defaultProps?: ComponentsProps['MuiListSubheader'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiListSubheader'];
-    variants?: ComponentsVariants['MuiListSubheader'];
+    variants?: ComponentsVariants<Theme>['MuiListSubheader'];
   };
   MuiMenu?: {
     defaultProps?: ComponentsProps['MuiMenu'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiMenu'];
-    variants?: ComponentsVariants['MuiMenu'];
+    variants?: ComponentsVariants<Theme>['MuiMenu'];
   };
   MuiMenuItem?: {
     defaultProps?: ComponentsProps['MuiMenuItem'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiMenuItem'];
-    variants?: ComponentsVariants['MuiMenuItem'];
+    variants?: ComponentsVariants<Theme>['MuiMenuItem'];
   };
   MuiMenuList?: {
     defaultProps?: ComponentsProps['MuiMenuList'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiMenuList'];
-    variants?: ComponentsVariants['MuiMenuList'];
+    variants?: ComponentsVariants<Theme>['MuiMenuList'];
   };
   MuiMobileStepper?: {
     defaultProps?: ComponentsProps['MuiMobileStepper'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiMobileStepper'];
-    variants?: ComponentsVariants['MuiMobileStepper'];
+    variants?: ComponentsVariants<Theme>['MuiMobileStepper'];
   };
   MuiModal?: {
     defaultProps?: ComponentsProps['MuiModal'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiModal'];
-    variants?: ComponentsVariants['MuiModal'];
+    variants?: ComponentsVariants<Theme>['MuiModal'];
   };
   MuiNativeSelect?: {
     defaultProps?: ComponentsProps['MuiNativeSelect'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiNativeSelect'];
-    variants?: ComponentsVariants['MuiNativeSelect'];
+    variants?: ComponentsVariants<Theme>['MuiNativeSelect'];
   };
   MuiOutlinedInput?: {
     defaultProps?: ComponentsProps['MuiOutlinedInput'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiOutlinedInput'];
-    variants?: ComponentsVariants['MuiOutlinedInput'];
+    variants?: ComponentsVariants<Theme>['MuiOutlinedInput'];
   };
   MuiPagination?: {
     defaultProps?: ComponentsProps['MuiPagination'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiPagination'];
-    variants?: ComponentsVariants['MuiPagination'];
+    variants?: ComponentsVariants<Theme>['MuiPagination'];
   };
   MuiPaginationItem?: {
     defaultProps?: ComponentsProps['MuiPaginationItem'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiPaginationItem'];
-    variants?: ComponentsVariants['MuiPaginationItem'];
+    variants?: ComponentsVariants<Theme>['MuiPaginationItem'];
   };
   MuiPaper?: {
     defaultProps?: ComponentsProps['MuiPaper'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiPaper'];
-    variants?: ComponentsVariants['MuiPaper'];
+    variants?: ComponentsVariants<Theme>['MuiPaper'];
   };
   MuiPopper?: {
     defaultProps?: ComponentsProps['MuiPopper'];
@@ -385,107 +385,107 @@ export interface Components<Theme = unknown> {
   MuiPopover?: {
     defaultProps?: ComponentsProps['MuiPopover'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiPopover'];
-    variants?: ComponentsVariants['MuiPopover'];
+    variants?: ComponentsVariants<Theme>['MuiPopover'];
   };
   MuiRadio?: {
     defaultProps?: ComponentsProps['MuiRadio'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiRadio'];
-    variants?: ComponentsVariants['MuiRadio'];
+    variants?: ComponentsVariants<Theme>['MuiRadio'];
   };
   MuiRating?: {
     defaultProps?: ComponentsProps['MuiRating'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiRating'];
-    variants?: ComponentsVariants['MuiRating'];
+    variants?: ComponentsVariants<Theme>['MuiRating'];
   };
   MuiScopedCssBaseline?: {
     defaultProps?: ComponentsProps['MuiScopedCssBaseline'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiScopedCssBaseline'];
-    variants?: ComponentsVariants['MuiScopedCssBaseline'];
+    variants?: ComponentsVariants<Theme>['MuiScopedCssBaseline'];
   };
   MuiSelect?: {
     defaultProps?: ComponentsProps['MuiSelect'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSelect'];
-    variants?: ComponentsVariants['MuiSelect'];
+    variants?: ComponentsVariants<Theme>['MuiSelect'];
   };
   MuiSkeleton?: {
     defaultProps?: ComponentsProps['MuiSkeleton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSkeleton'];
-    variants?: ComponentsVariants['MuiSkeleton'];
+    variants?: ComponentsVariants<Theme>['MuiSkeleton'];
   };
   MuiSlider?: {
     defaultProps?: ComponentsProps['MuiSlider'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSlider'];
-    variants?: ComponentsVariants['MuiSlider'];
+    variants?: ComponentsVariants<Theme>['MuiSlider'];
   };
   MuiSnackbar?: {
     defaultProps?: ComponentsProps['MuiSnackbar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSnackbar'];
-    variants?: ComponentsVariants['MuiSnackbar'];
+    variants?: ComponentsVariants<Theme>['MuiSnackbar'];
   };
   MuiSnackbarContent?: {
     defaultProps?: ComponentsProps['MuiSnackbarContent'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSnackbarContent'];
-    variants?: ComponentsVariants['MuiSnackbarContent'];
+    variants?: ComponentsVariants<Theme>['MuiSnackbarContent'];
   };
   MuiSpeedDial?: {
     defaultProps?: ComponentsProps['MuiSpeedDial'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSpeedDial'];
-    variants?: ComponentsVariants['MuiSpeedDial'];
+    variants?: ComponentsVariants<Theme>['MuiSpeedDial'];
   };
   MuiSpeedDialAction?: {
     defaultProps?: ComponentsProps['MuiSpeedDialAction'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSpeedDialAction'];
-    variants?: ComponentsVariants['MuiSpeedDialAction'];
+    variants?: ComponentsVariants<Theme>['MuiSpeedDialAction'];
   };
   MuiSpeedDialIcon?: {
     defaultProps?: ComponentsProps['MuiSpeedDialIcon'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSpeedDialIcon'];
-    variants?: ComponentsVariants['MuiSpeedDialIcon'];
+    variants?: ComponentsVariants<Theme>['MuiSpeedDialIcon'];
   };
   MuiStack?: {
     defaultProps?: ComponentsProps['MuiStack'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStack'];
-    variants?: ComponentsVariants['MuiStack'];
+    variants?: ComponentsVariants<Theme>['MuiStack'];
   };
   MuiStep?: {
     defaultProps?: ComponentsProps['MuiStep'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStep'];
-    variants?: ComponentsVariants['MuiStep'];
+    variants?: ComponentsVariants<Theme>['MuiStep'];
   };
   MuiStepButton?: {
     defaultProps?: ComponentsProps['MuiStepButton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStepButton'];
-    variants?: ComponentsVariants['MuiStepButton'];
+    variants?: ComponentsVariants<Theme>['MuiStepButton'];
   };
   MuiStepConnector?: {
     defaultProps?: ComponentsProps['MuiStepConnector'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStepConnector'];
-    variants?: ComponentsVariants['MuiStepConnector'];
+    variants?: ComponentsVariants<Theme>['MuiStepConnector'];
   };
   MuiStepContent?: {
     defaultProps?: ComponentsProps['MuiStepContent'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStepContent'];
-    variants?: ComponentsVariants['MuiStepContent'];
+    variants?: ComponentsVariants<Theme>['MuiStepContent'];
   };
   MuiStepIcon?: {
     defaultProps?: ComponentsProps['MuiStepIcon'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStepIcon'];
-    variants?: ComponentsVariants['MuiStepIcon'];
+    variants?: ComponentsVariants<Theme>['MuiStepIcon'];
   };
   MuiStepLabel?: {
     defaultProps?: ComponentsProps['MuiStepLabel'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStepLabel'];
-    variants?: ComponentsVariants['MuiStepLabel'];
+    variants?: ComponentsVariants<Theme>['MuiStepLabel'];
   };
   MuiStepper?: {
     defaultProps?: ComponentsProps['MuiStepper'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiStepper'];
-    variants?: ComponentsVariants['MuiStepper'];
+    variants?: ComponentsVariants<Theme>['MuiStepper'];
   };
   MuiSvgIcon?: {
     defaultProps?: ComponentsProps['MuiSvgIcon'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSvgIcon'];
-    variants?: ComponentsVariants['MuiSvgIcon'];
+    variants?: ComponentsVariants<Theme>['MuiSvgIcon'];
   };
   MuiSwipeableDrawer?: {
     defaultProps?: ComponentsProps['MuiSwipeableDrawer'];
@@ -493,97 +493,97 @@ export interface Components<Theme = unknown> {
   MuiSwitch?: {
     defaultProps?: ComponentsProps['MuiSwitch'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSwitch'];
-    variants?: ComponentsVariants['MuiSwitch'];
+    variants?: ComponentsVariants<Theme>['MuiSwitch'];
   };
   MuiTab?: {
     defaultProps?: ComponentsProps['MuiTab'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTab'];
-    variants?: ComponentsVariants['MuiTab'];
+    variants?: ComponentsVariants<Theme>['MuiTab'];
   };
   MuiTable?: {
     defaultProps?: ComponentsProps['MuiTable'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTable'];
-    variants?: ComponentsVariants['MuiTable'];
+    variants?: ComponentsVariants<Theme>['MuiTable'];
   };
   MuiTableBody?: {
     defaultProps?: ComponentsProps['MuiTableBody'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTableBody'];
-    variants?: ComponentsVariants['MuiTableBody'];
+    variants?: ComponentsVariants<Theme>['MuiTableBody'];
   };
   MuiTableCell?: {
     defaultProps?: ComponentsProps['MuiTableCell'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTableCell'];
-    variants?: ComponentsVariants['MuiTableCell'];
+    variants?: ComponentsVariants<Theme>['MuiTableCell'];
   };
   MuiTableContainer?: {
     defaultProps?: ComponentsProps['MuiTableContainer'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTableContainer'];
-    variants?: ComponentsVariants['MuiTableContainer'];
+    variants?: ComponentsVariants<Theme>['MuiTableContainer'];
   };
   MuiTableFooter?: {
     defaultProps?: ComponentsProps['MuiTableFooter'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTableFooter'];
-    variants?: ComponentsVariants['MuiTableFooter'];
+    variants?: ComponentsVariants<Theme>['MuiTableFooter'];
   };
   MuiTableHead?: {
     defaultProps?: ComponentsProps['MuiTableHead'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTableHead'];
-    variants?: ComponentsVariants['MuiTableHead'];
+    variants?: ComponentsVariants<Theme>['MuiTableHead'];
   };
   MuiTablePagination?: {
     defaultProps?: ComponentsProps['MuiTablePagination'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTablePagination'];
-    variants?: ComponentsVariants['MuiTablePagination'];
+    variants?: ComponentsVariants<Theme>['MuiTablePagination'];
   };
   MuiTableRow?: {
     defaultProps?: ComponentsProps['MuiTableRow'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTableRow'];
-    variants?: ComponentsVariants['MuiTableRow'];
+    variants?: ComponentsVariants<Theme>['MuiTableRow'];
   };
   MuiTableSortLabel?: {
     defaultProps?: ComponentsProps['MuiTableSortLabel'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTableSortLabel'];
-    variants?: ComponentsVariants['MuiTableSortLabel'];
+    variants?: ComponentsVariants<Theme>['MuiTableSortLabel'];
   };
   MuiTabs?: {
     defaultProps?: ComponentsProps['MuiTabs'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTabs'];
-    variants?: ComponentsVariants['MuiTabs'];
+    variants?: ComponentsVariants<Theme>['MuiTabs'];
   };
   MuiTextField?: {
     defaultProps?: ComponentsProps['MuiTextField'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTextField'];
-    variants?: ComponentsVariants['MuiTextField'];
+    variants?: ComponentsVariants<Theme>['MuiTextField'];
   };
   MuiToggleButton?: {
     defaultProps?: ComponentsProps['MuiToggleButton'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButton'];
-    variants?: ComponentsVariants['MuiToggleButton'];
+    variants?: ComponentsVariants<Theme>['MuiToggleButton'];
   };
   MuiToggleButtonGroup?: {
     defaultProps?: ComponentsProps['MuiToggleButtonGroup'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButtonGroup'];
-    variants?: ComponentsVariants['MuiToggleButtonGroup'];
+    variants?: ComponentsVariants<Theme>['MuiToggleButtonGroup'];
   };
   MuiToolbar?: {
     defaultProps?: ComponentsProps['MuiToolbar'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiToolbar'];
-    variants?: ComponentsVariants['MuiToolbar'];
+    variants?: ComponentsVariants<Theme>['MuiToolbar'];
   };
   MuiTooltip?: {
     defaultProps?: ComponentsProps['MuiTooltip'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTooltip'];
-    variants?: ComponentsVariants['MuiTooltip'];
+    variants?: ComponentsVariants<Theme>['MuiTooltip'];
   };
   MuiTouchRipple?: {
     defaultProps?: ComponentsProps['MuiTouchRipple'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTouchRipple'];
-    variants?: ComponentsVariants['MuiTouchRipple'];
+    variants?: ComponentsVariants<Theme>['MuiTouchRipple'];
   };
   MuiTypography?: {
     defaultProps?: ComponentsProps['MuiTypography'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTypography'];
-    variants?: ComponentsVariants['MuiTypography'];
+    variants?: ComponentsVariants<Theme>['MuiTypography'];
   };
   MuiUseMediaQuery?: {
     defaultProps?: ComponentsProps['MuiUseMediaQuery'];
diff --git a/packages/mui-material/src/styles/variants.d.ts b/packages/mui-material/src/styles/variants.d.ts
index 759fb768560abb..8373d35b145fb1 100644
--- a/packages/mui-material/src/styles/variants.d.ts
+++ b/packages/mui-material/src/styles/variants.d.ts
@@ -1,8 +1,7 @@
 import { Interpolation } from '@mui/system';
-import { Theme } from './createTheme';
 import { ComponentsPropsList } from './props';
 
-export type ComponentsVariants = {
+export type ComponentsVariants<Theme = unknown> = {
   [Name in keyof ComponentsPropsList]?: Array<{
     props: Partial<ComponentsPropsList[Name]>;
     style: Interpolation<{ theme: Theme }>;

From 73f536e5c30c8cb43b49f4ad012dd3bdfb49084a Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 11 Dec 2023 20:30:19 +0000
Subject: [PATCH 08/11] [docs] Fix reference to non-existent checkmark in
 supported-components.md (#40056)

Signed-off-by: Matt <github@nospam.33m.co>
---
 .../supported-components/supported-components.md                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/getting-started/supported-components/supported-components.md b/docs/data/material/getting-started/supported-components/supported-components.md
index 37d1ba7b170fdc..14ebd7bb7ce3a8 100644
--- a/docs/data/material/getting-started/supported-components/supported-components.md
+++ b/docs/data/material/getting-started/supported-components/supported-components.md
@@ -1,6 +1,6 @@
 # Supported components
 
-<p class="description">The following is a list of Material Design components & features. Those currently supported by Material UI are highlighted ✓.</p>
+<p class="description">The following is a list of Material Design components & features.</p>
 
 While we strive to follow the Material Design guidelines where practical (applying
 common sense where guidelines contradict - a more common occurrence than

From 7f27b54691bfe8f0c9036af3a186c01d69a54f38 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Tue, 12 Dec 2023 02:13:46 +0530
Subject: [PATCH 09/11] [material-ui][docs][Popper] Update Positioned Popper
 demo styles (#40170)

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
---
 docs/data/material/components/popper/PositionedPopper.js | 9 ++++++++-
 .../data/material/components/popper/PositionedPopper.tsx | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/components/popper/PositionedPopper.js b/docs/data/material/components/popper/PositionedPopper.js
index b36ca446c2abcb..18f99a18d20747 100644
--- a/docs/data/material/components/popper/PositionedPopper.js
+++ b/docs/data/material/components/popper/PositionedPopper.js
@@ -20,7 +20,14 @@ export default function PositionedPopper() {
 
   return (
     <Box sx={{ width: 500 }}>
-      <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
+      <Popper
+        // Note: The following zIndex style is specifically for documentation purposes and may not be necessary in your application.
+        sx={{ zIndex: 1200 }}
+        open={open}
+        anchorEl={anchorEl}
+        placement={placement}
+        transition
+      >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
             <Paper>
diff --git a/docs/data/material/components/popper/PositionedPopper.tsx b/docs/data/material/components/popper/PositionedPopper.tsx
index 07deb61a13c635..65d4e9adbf44c2 100644
--- a/docs/data/material/components/popper/PositionedPopper.tsx
+++ b/docs/data/material/components/popper/PositionedPopper.tsx
@@ -22,7 +22,14 @@ export default function PositionedPopper() {
 
   return (
     <Box sx={{ width: 500 }}>
-      <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
+      <Popper
+        // Note: The following zIndex style is specifically for documentation purposes and may not be necessary in your application.
+        sx={{ zIndex: 1200 }}
+        open={open}
+        anchorEl={anchorEl}
+        placement={placement}
+        transition
+      >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
             <Paper>

From d7eee3e7e8631be7cfda13249e97e65032907864 Mon Sep 17 00:00:00 2001
From: abreel <64946264+abreel@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:42:41 +0100
Subject: [PATCH 10/11] [icons] Add X logo (#38811)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>
---
 packages/mui-icons-material/custom/X.js  |  8 ++++++++
 packages/mui-icons-material/lib/X.js     | 17 +++++++++++++++++
 packages/mui-icons-material/lib/esm/X.js |  8 ++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 packages/mui-icons-material/custom/X.js
 create mode 100644 packages/mui-icons-material/lib/X.js
 create mode 100644 packages/mui-icons-material/lib/esm/X.js

diff --git a/packages/mui-icons-material/custom/X.js b/packages/mui-icons-material/custom/X.js
new file mode 100644
index 00000000000000..64072f7c38af71
--- /dev/null
+++ b/packages/mui-icons-material/custom/X.js
@@ -0,0 +1,8 @@
+'use client';
+import * as React from 'react';
+import createSvgIcon from './utils/createSvgIcon';
+
+export default createSvgIcon(
+  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />,
+  'Twitter',
+);
diff --git a/packages/mui-icons-material/lib/X.js b/packages/mui-icons-material/lib/X.js
new file mode 100644
index 00000000000000..6932a1baee16e4
--- /dev/null
+++ b/packages/mui-icons-material/lib/X.js
@@ -0,0 +1,17 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+}), 'Twitter');
+exports.default = _default;
\ No newline at end of file
diff --git a/packages/mui-icons-material/lib/esm/X.js b/packages/mui-icons-material/lib/esm/X.js
new file mode 100644
index 00000000000000..288ee641278501
--- /dev/null
+++ b/packages/mui-icons-material/lib/esm/X.js
@@ -0,0 +1,8 @@
+'use client';
+
+import * as React from 'react';
+import createSvgIcon from './utils/createSvgIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+}), 'Twitter');
\ No newline at end of file

From b6f2e488d639e42d4e2d0518a0fecc4df5167c18 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 12 Dec 2023 13:09:39 +0100
Subject: [PATCH 11/11] Bump aws-sdk to ^2.1516.0 (#40157)

---
 packages/feedback/package.json | 2 +-
 yarn.lock                      | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 4fcc0ea02b8ae1..02f1bbf8e84d94 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -25,6 +25,6 @@
     "claudia": "^5.14.1"
   },
   "optionalDependencies": {
-    "aws-sdk": "^2.1513.0"
+    "aws-sdk": "^2.1516.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 94d199257ca112..e9d64dd5568bac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5042,10 +5042,10 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-aws-sdk@^2.1009.0, aws-sdk@^2.1513.0:
-  version "2.1513.0"
-  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1513.0.tgz#d85d0fd120a849608053082299fbf921da0656fa"
-  integrity sha512-prgLj06P0Tiqlohz9mV916JZlZjnGhCftKNPOSZvTmKRyCUfbIIJnnBp/6HpkIe7ig7UGpWCXX72OPqVBrICpA==
+aws-sdk@^2.1009.0, aws-sdk@^2.1516.0:
+  version "2.1516.0"
+  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1516.0.tgz#66c427bd800dbc3e502b946500d312cafec95611"
+  integrity sha512-RgTRRQR77NDYjnpCwA8/fv9bKTrbcugP6PaLduYtlMZa78fws/vROTe6bL6K+BRZ/lrWz6kW6xJJdN9KkkrOMw==
   dependencies:
     buffer "4.9.2"
     events "1.1.1"