diff --git a/.eslintrc.js b/.eslintrc.js
index 670e229c62378b..c716674a2f2128 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -120,6 +120,10 @@ module.exports = /** @type {Config} */ ({
         variables: true,
       },
     ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: true, argsIgnorePattern: '^_' },
+    ],
     'no-use-before-define': 'off',
 
     // disabled type-aware linting due to performance considerations
diff --git a/CHANGELOG.md b/CHANGELOG.md
index efd4e605d28d27..328ebcc7f12e4e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,53 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.1.9
+
+<!-- generated comparing v6.1.8..master -->
+
+_Nov 27, 2024_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/material@6.1.9`
+
+- [Select] Omit `placeholder` from props (#44502) @Juneezee
+- [Grid2] Add container class to `Grid2Classes` (#44562) @sai6855
+
+### `@mui/system@6.1.9`
+
+- Add ThemeProvider `noSsr` to prevent double rendering (#44451) @siriwatknp
+
+### `@mui/codemod@6.1.9`
+
+- [codemod] Fix handling of computed `paragraph` props (#44195) @joshkel
+
+### `@mui/material-pigment-css@6.1.9`
+
+- Make @pigment-css/react as peer dependency (#44498) @brijeshb42
+
+### Docs
+
+- [material-ui] Add missing required dependencies in dashboard template README (#44476) @mesqueeb
+- [material-ui] Add missing Roboto import to Next.js integration docs (#44462) @StaceyD22
+- [material-ui][Dialog] Fix padding in SimpleDialog demo (#44467) @oliviertassinari
+- Fix template page issues (#44466) @oliviertassinari
+- [examples] Add dark mode example for Material UI + Pigment CSS (#44480) @mnajdova
+
+### Core
+
+- Remove TODO line in the changelog (#44484) @mnajdova
+- Polish image display (418e888) @oliviertassinari
+- [core-infra] Add no-relative-packages (#44489) @oliviertassinari
+- [docs-infra] Support CSS variables API info (#44559) @mnajdova
+- [docs-infra] Fix display when ad-block triggers (#44567) @oliviertassinari
+- [docs-infra] Improve locator finding using visible option (#44541) @siriwatknp
+- [docs-infra] Correctly flatten the pages tree (#44514) @oliviertassinari
+- [docs-infra] Fix Sponsor design regression (#44515) @oliviertassinari
+- [test] Remove React.ReactElement<any> from describeConformance.tsx (#44318) @sai6855
+- [test] Do not enforce the presence of `ownerState.className` in `describeConformance` (#44479) @flaviendelangle
+
+All contributors of this release in alphabetical order: @brijeshb42, @flaviendelangle, @joshkel, @Juneezee, @mesqueeb, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @StaceyD22
+
 ## v6.1.8
 
 <!-- generated comparing v6.1.7..master -->
diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
index b1d55ca4408a14..6fde1fc9fd9be3 100644
--- a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
+++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
@@ -9,7 +9,8 @@ import { navigationCustomizations } from './customizations/navigation';
 import { surfacesCustomizations } from './customizations/surfaces';
 import { colorSchemes, typography, shadows, shape } from './themePrimitives';
 
-function AppTheme({ children, disableCustomTheme, themeComponents }) {
+function AppTheme(props) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}
diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
index 1fe35d6faeef48..a4a512c30aef59 100644
--- a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
+++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
@@ -17,11 +17,8 @@ interface AppThemeProps {
   themeComponents?: ThemeOptions['components'];
 }
 
-export default function AppTheme({
-  children,
-  disableCustomTheme,
-  themeComponents,
-}: AppThemeProps) {
+export default function AppTheme(props: AppThemeProps) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}
diff --git a/docs/notifications.json b/docs/notifications.json
index 01ee0a5b7ea6da..dda8c22916f9a9 100644
--- a/docs/notifications.json
+++ b/docs/notifications.json
@@ -13,5 +13,10 @@
     "id": 83,
     "title": "Material UI v6 is out now",
     "text": "This major release includes CSS variables support, experimental opt-in CSS extraction, and many more improvements. Check out the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"material-ui-v6\" href=\"https://mui.com/blog/material-ui-v6-is-out/\">announcement blog post</a>."
+  },
+  {
+    "id": 84,
+    "title": "Black Friday is here!",
+    "text": "Don&#39;t miss out on the best deals of the year—Mega Bundles with up to 90% off. Available for a limited time. <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"black-friday\" href=\"https://mui.com/store/bundles/\">Check the offers</a>!"
   }
 ]
diff --git a/docs/pages/joy-ui/api/stack.json b/docs/pages/joy-ui/api/stack.json
index 008afff7737bbc..8826d1eebc8a85 100644
--- a/docs/pages/joy-ui/api/stack.json
+++ b/docs/pages/joy-ui/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/joy/Stack';", "import { Stack } from '@mui/joy';"],
diff --git a/docs/pages/material-ui/api/container.json b/docs/pages/material-ui/api/container.json
index 29b78f807d6157..0f60f58e920597 100644
--- a/docs/pages/material-ui/api/container.json
+++ b/docs/pages/material-ui/api/container.json
@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {
diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
index c4b4b854151cfd..7f74fa6b051eef 100644
--- a/docs/pages/material-ui/api/grid-2.json
+++ b/docs/pages/material-ui/api/grid-2.json
@@ -5,7 +5,8 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
@@ -13,12 +14,13 @@
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid2",
diff --git a/docs/pages/material-ui/api/stack.json b/docs/pages/material-ui/api/stack.json
index ae424d7b57eea6..65e1dc1c8a28d2 100644
--- a/docs/pages/material-ui/api/stack.json
+++ b/docs/pages/material-ui/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/material/Stack';", "import { Stack } from '@mui/material';"],
diff --git a/docs/pages/system/api/container.json b/docs/pages/system/api/container.json
index 3f094034d61076..ae5bd4660c2576 100644
--- a/docs/pages/system/api/container.json
+++ b/docs/pages/system/api/container.json
@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {
diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json
index 3a3c9d23850287..4cd038309b7d7b 100644
--- a/docs/pages/system/api/grid.json
+++ b/docs/pages/system/api/grid.json
@@ -5,7 +5,8 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
@@ -13,12 +14,13 @@
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid",
diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json
index a5d69b0c81f265..2c838e2175b73d 100644
--- a/docs/pages/system/api/stack.json
+++ b/docs/pages/system/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"],
diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
index e8e90d92895765..90baa060d7f2b2 100644
--- a/docs/src/components/banner/AppFrameBanner.tsx
+++ b/docs/src/components/banner/AppFrameBanner.tsx
@@ -14,7 +14,11 @@ export default function AppFrameBanner() {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- FEATURE_TOGGLE never changes
   const pageContext = React.useContext(PageContext);
   const productName = convertProductIdToName(pageContext) || 'MUI';
-  const message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
+  const surveyMessage = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
+  const blackFridayMessage = `Black Friday is here! Don't miss out on the best offers of the year.`;
+
+  const showSurveyMessage = false;
+  const message = showSurveyMessage ? surveyMessage : blackFridayMessage;
 
   if (process.env.NODE_ENV !== 'production') {
     if (message.length > 100) {
@@ -26,7 +30,11 @@ export default function AppFrameBanner() {
 
   return (
     <Link
-      href="https://tally.so/r/3Ex4PN?source=docs-banner"
+      href={
+        showSurveyMessage
+          ? 'https://tally.so/r/3Ex4PN?source=website'
+          : 'https://mui.com/store/bundles/?deal=black-friday&from=docs'
+      }
       target="_blank"
       variant="caption"
       sx={[
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
index 54a28c6732bffb..69e0ce67160627 100644
--- a/docs/src/featureToggle.js
+++ b/docs/src/featureToggle.js
@@ -2,6 +2,6 @@
 module.exports = {
   enable_website_banner: false,
   enable_toc_banner: true,
-  enable_docsnav_banner: false,
+  enable_docsnav_banner: true,
   enable_job_banner: false,
 };
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
index 6f0feae3ffa79e..67753753411c4b 100644
--- a/docs/src/modules/components/JoyThemeBuilder.tsx
+++ b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -1268,7 +1268,15 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') {
   return tokens;
 }
 
-function TemplatesDialog({ children, data }: { children: React.ReactElement<any>; data: any }) {
+function TemplatesDialog({
+  children,
+  data,
+}: {
+  children: React.ReactElement<{
+    onClick?: React.MouseEventHandler;
+  }>;
+  data: any;
+}) {
   const [open, setOpen] = React.useState(false);
   const { map: templateMap } = sourceJoyTemplates();
   const renderItem = (name: string, item: TemplateData) => {
@@ -1339,9 +1347,9 @@ function TemplatesDialog({ children, data }: { children: React.ReactElement<any>
   return (
     <React.Fragment>
       {React.cloneElement(children, {
-        onClick: () => {
+        onClick: (event: React.MouseEvent) => {
           setOpen(true);
-          children.props.onClick?.();
+          children.props.onClick?.(event);
         },
       })}
       <Modal open={open} onClose={() => setOpen(false)}>
diff --git a/examples/material-ui-nextjs-pages-router-ts/README.md b/examples/material-ui-nextjs-pages-router-ts/README.md
index 25e32aa803cfd2..37b40bcf662263 100644
--- a/examples/material-ui-nextjs-pages-router-ts/README.md
+++ b/examples/material-ui-nextjs-pages-router-ts/README.md
@@ -41,6 +41,11 @@ If you prefer, you can [use styled-components instead](https://mui.com/material-
 The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI.
 More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
 
+## Upgrading to Next.js 15
+
+This example uses Next.js 14.
+To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.
+
 ## What's next?
 
 <!-- #default-branch-switch -->
diff --git a/examples/material-ui-nextjs-pages-router-ts/package.json b/examples/material-ui-nextjs-pages-router-ts/package.json
index a8e8c86ca0508b..11d9ab9a44fddf 100644
--- a/examples/material-ui-nextjs-pages-router-ts/package.json
+++ b/examples/material-ui-nextjs-pages-router-ts/package.json
@@ -18,15 +18,15 @@
     "@mui/material": "latest",
     "@mui/material-nextjs": "latest",
     "clsx": "latest",
-    "next": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/node": "latest",
     "@types/react": "latest",
     "eslint": "latest",
-    "eslint-config-next": "latest",
+    "eslint-config-next": "^14.0.0",
     "typescript": "latest"
   }
 }
diff --git a/examples/material-ui-nextjs-pages-router/README.md b/examples/material-ui-nextjs-pages-router/README.md
index 50453acf21f548..80e1b7d32a2ed9 100644
--- a/examples/material-ui-nextjs-pages-router/README.md
+++ b/examples/material-ui-nextjs-pages-router/README.md
@@ -41,6 +41,11 @@ If you prefer, you can [use styled-components instead](https://mui.com/material-
 The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI.
 More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
 
+## Upgrading to Next.js 15
+
+This example uses Next.js 14.
+To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.
+
 ## What's next?
 
 <!-- #default-branch-switch -->
diff --git a/examples/material-ui-nextjs-pages-router/package.json b/examples/material-ui-nextjs-pages-router/package.json
index 55b0d43a77d553..11a24ea893d60c 100644
--- a/examples/material-ui-nextjs-pages-router/package.json
+++ b/examples/material-ui-nextjs-pages-router/package.json
@@ -18,13 +18,13 @@
     "@mui/material": "latest",
     "@mui/material-nextjs": "latest",
     "clsx": "latest",
-    "next": "latest",
+    "next": "^14.0.0",
     "prop-types": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "eslint": "latest",
-    "eslint-config-next": "latest"
+    "eslint-config-next": "^14.0.0"
   }
 }
diff --git a/examples/material-ui-nextjs-ts/README.md b/examples/material-ui-nextjs-ts/README.md
index df5d86c065a2a4..13f386515d7cb7 100644
--- a/examples/material-ui-nextjs-ts/README.md
+++ b/examples/material-ui-nextjs-ts/README.md
@@ -30,6 +30,11 @@ or:
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts)
 
+## Upgrading to Next.js 15
+
+This example uses Next.js 14.
+To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.
+
 ## Learn more
 
 To learn more about this example:
diff --git a/examples/material-ui-nextjs-ts/package.json b/examples/material-ui-nextjs-ts/package.json
index 429d960765034e..55181969226f21 100644
--- a/examples/material-ui-nextjs-ts/package.json
+++ b/examples/material-ui-nextjs-ts/package.json
@@ -16,16 +16,16 @@
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
     "@mui/material-nextjs": "latest",
-    "next": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/node": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "eslint": "latest",
-    "eslint-config-next": "latest",
+    "eslint-config-next": "^14.0.0",
     "typescript": "latest"
   }
 }
diff --git a/examples/material-ui-nextjs/README.md b/examples/material-ui-nextjs/README.md
index 98ea0fabe4fc94..0d7600e101a3f6 100644
--- a/examples/material-ui-nextjs/README.md
+++ b/examples/material-ui-nextjs/README.md
@@ -30,6 +30,11 @@ or:
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs)
 
+## Upgrading to Next.js 15
+
+This example uses Next.js 14.
+To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.
+
 ## Learn more
 
 To learn more about this example:
diff --git a/examples/material-ui-nextjs/package.json b/examples/material-ui-nextjs/package.json
index af1228ce229f01..5e931b115a9c6a 100644
--- a/examples/material-ui-nextjs/package.json
+++ b/examples/material-ui-nextjs/package.json
@@ -16,9 +16,9 @@
     "@mui/material": "latest",
     "@mui/material-nextjs": "latest",
     "eslint": "latest",
-    "eslint-config-next": "latest",
-    "next": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "eslint-config-next": "^14.0.0",
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }
diff --git a/package.json b/package.json
index 3620d3e86924d6..501bc81f3ba739 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/monorepo",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json
index 011478722a9fa7..afe2157543788e 100644
--- a/packages-internal/docs-utils/package.json
+++ b/packages-internal/docs-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-utils",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "author": "MUI Team",
   "description": "Utilities for MUI docs. This is an internal package not meant for general use.",
   "main": "./build/index.js",
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
index e8afbee6237bde..23663b10ae302c 100644
--- a/packages-internal/scripts/package.json
+++ b/packages-internal/scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-scripts",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "author": "MUI Team",
   "description": "Utilities supporting MUI libraries build and docs generation. This is an internal package not meant for general use.",
   "main": "build/index.js",
diff --git a/packages-internal/test-utils/package.json b/packages-internal/test-utils/package.json
index 8e627a770b98ba..b0d1253aa5791b 100644
--- a/packages-internal/test-utils/package.json
+++ b/packages-internal/test-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-test-utils",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "author": "MUI Team",
   "description": "Utilities for MUI tests. This is an internal package not meant for general use.",
   "main": "./build/index.js",
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 9d223108cd4d7f..02a81285bb3ddb 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -29,8 +29,10 @@ import {
   AdditionalPropsInfo,
   ComponentApiContent,
   ComponentReactApi,
+  ParsedProperty,
 } from '../types/ApiBuilder.types';
 import { Slot, ComponentInfo } from '../types/utils.types';
+import extractInfoFromType from '../utils/extractInfoFromType';
 
 const cssComponents = ['Box', 'Grid', 'Typography', 'Stack'];
 
@@ -321,6 +323,7 @@ const generateApiPage = async (
     name: reactApi.name,
     imports: reactApi.imports,
     ...(reactApi.slots?.length > 0 && { slots: reactApi.slots }),
+    ...(Object.keys(reactApi.cssVariables).length > 0 && { cssVariables: reactApi.cssVariables }),
     classes: reactApi.classes,
     spread: reactApi.spread,
     themeDefaultProps: reactApi.themeDefaultProps,
@@ -460,6 +463,20 @@ const attachTranslations = (
     delete reactApi.classes[index].deprecationInfo; // store deprecation info in translations only
   });
 
+  /**
+   * CSS variables descriptions.
+   */
+  if (Object.keys(reactApi.cssVariables).length > 0) {
+    translations.cssVariablesDescriptions = {};
+    [...Object.keys(reactApi.cssVariables)]
+      .sort() // Sort to ensure consistency of object key order
+      .forEach((cssVariableName: string) => {
+        const cssVariable = reactApi.cssVariables[cssVariableName];
+        const { description } = cssVariable;
+        translations.cssVariablesDescriptions![cssVariableName] = renderMarkdown(description);
+      });
+  }
+
   reactApi.translations = translations;
 };
 
@@ -607,6 +624,58 @@ const defaultGetComponentImports = (name: string, filename: string) => {
   return [subpathImport, rootImport];
 };
 
+const attachCssVariables = (reactApi: ComponentReactApi, params: ParsedProperty[]) => {
+  const cssVarsErrors: Array<[propName: string, error: Error]> = [];
+  const cssVariables: ComponentReactApi['cssVariables'] = params
+    .map((p) => {
+      const { name: propName, ...propDescriptor } = p;
+      let prop: Omit<ParsedProperty, 'name'> | null;
+      try {
+        prop = propDescriptor;
+      } catch (error) {
+        cssVarsErrors.push([propName, error as Error]);
+        prop = null;
+      }
+      if (prop === null) {
+        // have to delete `componentProps.undefined` later
+        return [] as any;
+      }
+
+      const deprecationTag = propDescriptor.tags?.deprecated;
+      const deprecation = deprecationTag?.text?.[0]?.text;
+
+      const typeTag = propDescriptor.tags?.type;
+      const type = typeTag?.text?.[0]?.text ?? 'string';
+
+      return {
+        name: `--${kebabCase(propName)}`,
+        description: propDescriptor.description,
+        type,
+        deprecated: !!deprecation || undefined,
+        deprecationInfo: renderMarkdown(deprecation || '').trim() || undefined,
+      };
+    })
+    .reduce((acc, cssVarDefinition) => {
+      const { name, ...rest } = cssVarDefinition;
+      return {
+        ...acc,
+        [name]: rest,
+      };
+    }, {});
+
+  if (cssVarsErrors.length > 0) {
+    throw new Error(
+      `There were errors creating CSS variable descriptions:\n${cssVarsErrors
+        .map(([cssVarName, error]) => {
+          return `  - ${cssVarName}: ${error}`;
+        })
+        .join('\n')}`,
+    );
+  }
+
+  reactApi.cssVariables = cssVariables;
+};
+
 /**
  * - Build react component (specified filename) api by lookup at its definition (.d.ts or ts)
  *   and then generate the API page + json data
@@ -628,13 +697,26 @@ export default async function generateComponentApi(
   const filename = componentInfo.filename;
   let reactApi: ComponentReactApi;
 
-  if (componentInfo.isSystemComponent || componentInfo.name === 'Grid2') {
-    try {
+  try {
+    reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+      filename,
+    });
+  } catch (error) {
+    // fallback to default logic if there is no `create*` definition.
+    if ((error as Error).message === 'No suitable component definition found.') {
       reactApi = docgenParse(
         src,
         (ast) => {
           let node;
+          // TODO migrate to react-docgen v6, using Babel AST now
           astTypes.visit(ast, {
+            visitFunctionDeclaration: (functionPath) => {
+              // @ts-ignore
+              if (functionPath.node.params[0].name === 'props') {
+                node = functionPath;
+              }
+              return false;
+            },
             visitVariableDeclaration: (variablePath) => {
               const definitions: any[] = [];
               if (variablePath.node.declarations) {
@@ -642,7 +724,6 @@ export default async function generateComponentApi(
                   .get('declarations')
                   .each((declarator: any) => definitions.push(declarator.get('init')));
               }
-
               definitions.forEach((definition) => {
                 // definition.value.expression is defined when the source is in TypeScript.
                 const expression = definition.value?.expression
@@ -650,36 +731,25 @@ export default async function generateComponentApi(
                   : definition;
                 if (expression.value?.callee) {
                   const definitionName = expression.value.callee.name;
-
                   if (definitionName === `create${componentInfo.name}`) {
                     node = expression;
                   }
                 }
               });
-
               return false;
             },
           });
 
           return node;
         },
-        defaultHandlers,
-        { filename },
-      );
-    } catch (error) {
-      // fallback to default logic if there is no `create*` definition.
-      if ((error as Error).message === 'No suitable component definition found.') {
-        reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+        defaultHandlers.concat(muiDefaultPropsHandler),
+        {
           filename,
-        });
-      } else {
-        throw error;
-      }
+        },
+      );
+    } else {
+      throw error;
     }
-  } else {
-    reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
-      filename,
-    });
   }
 
   if (!reactApi.props) {
@@ -750,7 +820,10 @@ export default async function generateComponentApi(
 
   reactApi.deprecated = !!deprecation || undefined;
 
+  const cssVars = await extractInfoFromType(`${componentInfo.name}CssVars`, project);
+
   attachPropsTable(reactApi, projectSettings.propsSettings);
+  attachCssVariables(reactApi, cssVars);
   attachTranslations(reactApi, deprecationInfo, projectSettings.propsSettings);
 
   // eslint-disable-next-line no-console
diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
index d3290e92dee8e0..e57edd26502925 100644
--- a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
@@ -1,6 +1,5 @@
 import { readFileSync, writeFileSync } from 'fs';
 import path from 'path';
-import { Symbol, isPropertySignature } from 'typescript';
 import * as astTypes from 'ast-types';
 import * as _ from 'lodash';
 import * as babel from '@babel/core';
@@ -12,28 +11,12 @@ import { parse as parseDoctrine, Annotation } from 'doctrine';
 import { escapeEntities, renderMarkdown } from '../buildApi';
 import { ProjectSettings } from '../ProjectSettings';
 import { computeApiDescription } from './ComponentApiBuilder';
-import {
-  getSymbolDescription,
-  getSymbolJSDocTags,
-  stringifySymbol,
-  toGitHubPath,
-  writePrettifiedFile,
-} from '../buildApiUtils';
+import { toGitHubPath, writePrettifiedFile } from '../buildApiUtils';
 import { TypeScriptProject } from '../utils/createTypeScriptProject';
 import generateApiTranslations from '../utils/generateApiTranslation';
 import { HookApiContent, HookReactApi, ParsedProperty } from '../types/ApiBuilder.types';
 import { HookInfo } from '../types/utils.types';
-
-const parseProperty = async (
-  propertySymbol: Symbol,
-  project: TypeScriptProject,
-): Promise<ParsedProperty> => ({
-  name: propertySymbol.name,
-  description: getSymbolDescription(propertySymbol, project),
-  tags: getSymbolJSDocTags(propertySymbol),
-  required: !propertySymbol.declarations?.find(isPropertySignature)?.questionToken,
-  typeStr: await stringifySymbol(propertySymbol, project),
-});
+import extractInfoFromType from '../utils/extractInfoFromType';
 
 /**
  * Add demos & API comment block to type definitions, e.g.:
@@ -386,43 +369,6 @@ const generateApiJson = async (outputDirectory: string, reactApi: HookReactApi)
   );
 };
 
-const extractInfoFromType = async (
-  typeName: string,
-  project: TypeScriptProject,
-): Promise<ParsedProperty[]> => {
-  // Generate the params
-  let result: ParsedProperty[] = [];
-
-  try {
-    const exportedSymbol = project.exports[typeName];
-    const type = project.checker.getDeclaredTypeOfSymbol(exportedSymbol);
-    // @ts-ignore
-    const typeDeclaration = type?.symbol?.declarations?.[0];
-    if (!typeDeclaration) {
-      return [];
-    }
-
-    const properties: Record<string, ParsedProperty> = {};
-    // @ts-ignore
-    const propertiesOnProject = type.getProperties();
-
-    // @ts-ignore
-    await Promise.all(
-      propertiesOnProject.map(async (propertySymbol) => {
-        properties[propertySymbol.name] = await parseProperty(propertySymbol, project);
-      }),
-    );
-
-    result = Object.values(properties)
-      .filter((property) => !property.tags.ignore)
-      .sort((a, b) => a.name.localeCompare(b.name));
-  } catch {
-    console.error(`No declaration for ${typeName}`);
-  }
-
-  return result;
-};
-
 /**
  * Helper to get the import options
  * @param name The name of the hook
diff --git a/packages/api-docs-builder/types/ApiBuilder.types.ts b/packages/api-docs-builder/types/ApiBuilder.types.ts
index c80847ec6b093f..7b7f692c40e851 100644
--- a/packages/api-docs-builder/types/ApiBuilder.types.ts
+++ b/packages/api-docs-builder/types/ApiBuilder.types.ts
@@ -1,6 +1,6 @@
 import { ReactDocgenApi } from 'react-docgen';
 import { JSDocTagInfo } from 'typescript';
-import { ComponentInfo, Slot, HookInfo, SeeMore } from './utils.types';
+import { ComponentInfo, Slot, HookInfo, SeeMore, CssVariable } from './utils.types';
 
 export type AdditionalPropsInfo = {
   cssApi?: boolean;
@@ -56,6 +56,7 @@ export interface PropsTranslations {
     [key: string]: ClassDescription;
   };
   slotDescriptions?: { [key: string]: string };
+  cssVariablesDescriptions?: { [key: string]: string };
 }
 
 interface PropDescription {
@@ -91,6 +92,7 @@ export interface ComponentReactApi extends CommonReactApi {
   themeDefaultProps: boolean | undefined | null;
   classes: ComponentClassDefinition[];
   slots: Slot[];
+  cssVariables: { [key: string]: CssVariable };
   propsTable: _.Dictionary<PropsTableItem>;
   translations: PropsTranslations;
 }
@@ -100,6 +102,7 @@ export interface ComponentApiContent {
   name: string;
   imports: string[];
   slots?: Slot[];
+  cssVariables?: { [key: string]: CssVariable };
   classes: ComponentClassDefinition[];
   spread: boolean | undefined;
   themeDefaultProps: boolean | null | undefined;
diff --git a/packages/api-docs-builder/types/utils.types.ts b/packages/api-docs-builder/types/utils.types.ts
index 5af05c3cb52752..f0d1b30d39a97e 100644
--- a/packages/api-docs-builder/types/utils.types.ts
+++ b/packages/api-docs-builder/types/utils.types.ts
@@ -7,6 +7,11 @@ export interface Slot {
   default?: string;
 }
 
+export interface CssVariable {
+  name: string;
+  description: string;
+}
+
 export type ComponentInfo = {
   /**
    * Full path to the source file.
diff --git a/packages/api-docs-builder/utils/defaultPropsHandler.ts b/packages/api-docs-builder/utils/defaultPropsHandler.ts
index 9b49c019f1af88..6836e85cb677ec 100644
--- a/packages/api-docs-builder/utils/defaultPropsHandler.ts
+++ b/packages/api-docs-builder/utils/defaultPropsHandler.ts
@@ -131,6 +131,11 @@ function getExplicitPropsDeclaration(
 ): NodePath | undefined {
   const functionNode = getRenderBody(componentDefinition, importer);
 
+  // No function body available to inspect.
+  if (!functionNode.value) {
+    return undefined;
+  }
+
   let propsPath: NodePath | undefined;
   // visitVariableDeclarator, can't use visit body.node since it looses scope information
   functionNode
diff --git a/packages/api-docs-builder/utils/extractInfoFromType.ts b/packages/api-docs-builder/utils/extractInfoFromType.ts
new file mode 100644
index 00000000000000..8979579d5a77b8
--- /dev/null
+++ b/packages/api-docs-builder/utils/extractInfoFromType.ts
@@ -0,0 +1,54 @@
+import { Symbol, isPropertySignature } from 'typescript';
+import { TypeScriptProject } from './createTypeScriptProject';
+import { ParsedProperty } from '../types/ApiBuilder.types';
+import { getSymbolDescription, getSymbolJSDocTags, stringifySymbol } from '../buildApiUtils';
+
+const parseProperty = async (
+  propertySymbol: Symbol,
+  project: TypeScriptProject,
+): Promise<ParsedProperty> => ({
+  name: propertySymbol.name,
+  description: getSymbolDescription(propertySymbol, project),
+  tags: getSymbolJSDocTags(propertySymbol),
+  required: !propertySymbol.declarations?.find(isPropertySignature)?.questionToken,
+  typeStr: await stringifySymbol(propertySymbol, project),
+});
+
+const extractInfoFromType = async (
+  typeName: string,
+  project: TypeScriptProject,
+): Promise<ParsedProperty[]> => {
+  // Generate the params
+  let result: ParsedProperty[] = [];
+
+  try {
+    const exportedSymbol = project.exports[typeName];
+    const type = project.checker.getDeclaredTypeOfSymbol(exportedSymbol);
+    // @ts-ignore
+    const typeDeclaration = type?.symbol?.declarations?.[0];
+    if (!typeDeclaration) {
+      return [];
+    }
+
+    const properties: Record<string, ParsedProperty> = {};
+    // @ts-ignore
+    const propertiesOnProject = type.getProperties();
+
+    // @ts-ignore
+    await Promise.all(
+      propertiesOnProject.map(async (propertySymbol) => {
+        properties[propertySymbol.name] = await parseProperty(propertySymbol, project);
+      }),
+    );
+
+    result = Object.values(properties)
+      .filter((property) => !property.tags.ignore)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  } catch {
+    console.error(`No declaration for ${typeName}`);
+  }
+
+  return result;
+};
+
+export default extractInfoFromType;
diff --git a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
index d6af8aa4274a41..f3e1c63e3d4eb6 100644
--- a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
+++ b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
@@ -51,6 +51,7 @@ function isStyledFunction(node: ts.VariableDeclaration): boolean {
   );
 }
 
+// TODO update to reflect https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
 function getJSXLikeReturnValueFromFunction(type: ts.Type, project: TypeScriptProject) {
   return type
     .getCallSignatures()
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index 055a86d4e543ce..e8b5c599cd8bf6 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-markdown",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "author": "MUI Team",
   "description": "MUI markdown parser. This is an internal package not meant for general use.",
   "main": "./index.js",
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index 6c4dc35bb84ea1..8cf03b4055ac09 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/base",
-  "version": "5.0.0-beta.62",
+  "version": "5.0.0-beta.63",
   "private": false,
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
index e84ca9b1382b42..5f8f4da604c046 100644
--- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
+++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
@@ -209,7 +209,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
     return undefined;
   }, [handleClickAway, mouseEvent]);
 
-  return <React.Fragment>{React.cloneElement(children, childrenProps)}</React.Fragment>;
+  return React.cloneElement(children, childrenProps);
 }
 
 ClickAwayListener.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-base/src/NoSsr/NoSsr.tsx b/packages/mui-base/src/NoSsr/NoSsr.tsx
index c637df94e70b61..8468d401c64a86 100644
--- a/packages/mui-base/src/NoSsr/NoSsr.tsx
+++ b/packages/mui-base/src/NoSsr/NoSsr.tsx
@@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element {
     }
   }, [defer]);
 
-  // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
-  return <React.Fragment>{mountedState ? children : fallback}</React.Fragment>;
+  // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
+  return (mountedState ? children : fallback) as React.JSX.Element;
 }
 
 NoSsr.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx
index 830b229d8eb175..af607b51532adc 100644
--- a/packages/mui-base/src/Portal/Portal.tsx
+++ b/packages/mui-base/src/Portal/Portal.tsx
@@ -64,14 +64,10 @@ const Portal = React.forwardRef(function Portal(
       };
       return React.cloneElement(children, newProps);
     }
-    return <React.Fragment>{children}</React.Fragment>;
+    return children;
   }
 
-  return (
-    <React.Fragment>
-      {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
-    </React.Fragment>
-  );
+  return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
 }) as React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<Element>>;
 
 Portal.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index 78c163e2a86e70..ac2870093ccb27 100644
--- a/packages/mui-codemod/package.json
+++ b/packages/mui-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json
index 749791a31cdba0..293889c1b41248 100644
--- a/packages/mui-core-downloads-tracker/package.json
+++ b/packages/mui-core-downloads-tracker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/core-downloads-tracker",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "Internal package to track number of downloads of our design system libraries",
diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
index ed326d49422011..4fac5a94c011d2 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
diff --git a/packages/mui-docs/src/Ad/Ad.tsx b/packages/mui-docs/src/Ad/Ad.tsx
index 9b47adcc8d6ed6..53e04e73840bbb 100644
--- a/packages/mui-docs/src/Ad/Ad.tsx
+++ b/packages/mui-docs/src/Ad/Ad.tsx
@@ -232,7 +232,6 @@ export function Ad() {
       data-ga-event-category="ad"
       data-ga-event-action="click"
       data-ga-event-label={eventLabel}
-      className="Ad-root"
     >
       <AdErrorBoundary eventLabel={eventLabel}>{children}</AdErrorBoundary>
     </Box>
diff --git a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
index f432a3214c3588..aab2e456104af2 100644
--- a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
+++ b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
@@ -13,8 +13,9 @@ import W3CIcon from '../svgIcons/W3CIcon';
 import MaterialDesignIcon from '../svgIcons/MaterialDesignIcon';
 import { useTranslate } from '../i18n';
 
-const Root = styled('ul')({
+const Root = styled('ul')(({ theme }) => ({
   margin: 0,
+  marginTop: theme.spacing(2),
   padding: 0,
   listStyle: 'none',
   display: 'flex',
@@ -30,7 +31,7 @@ const Root = styled('ul')({
       fontSize: 14,
     },
   },
-});
+}));
 
 const defaultPackageNames: Record<string, string | undefined> = {
   'material-ui': '@mui/material',
diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
index a561b6641bba72..fb25e65d73515e 100644
--- a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
+++ b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -137,7 +137,7 @@ const Root = styled('div')(
       // Allows to remove link arrows for images
       display: 'none',
     },
-    '& .Ad-root a::after': {
+    '& .ad.description a::after': {
       // Remove link arrow for ads
       display: 'none',
     },
diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json
index 11f59f166e0d78..379d7e21327aed 100644
--- a/packages/mui-envinfo/package.json
+++ b/packages/mui-envinfo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/envinfo",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "private": false,
   "author": "MUI Team",
   "description": "Logs infos about the environment relevant to @mui/*",
diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
index 697afb451fee5b..51abd61d6d85db 100644
--- a/packages/mui-icons-material/package.json
+++ b/packages/mui-icons-material/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/icons-material",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "Material Design icons distributed as SVG React components.",
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index e3d81d2165dd3d..7093948ce97b3f 100644
--- a/packages/mui-lab/package.json
+++ b/packages/mui-lab/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/lab",
-  "version": "6.0.0-beta.16",
+  "version": "6.0.0-beta.17",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index 491e8ff57a407e..991087f1fc5706 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
index 7d2fd6cd52485b..02f0a546b65c57 100644
--- a/packages/mui-material-pigment-css/package.json
+++ b/packages/mui-material-pigment-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-pigment-css",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "author": "MUI Team",
   "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.",
   "main": "./src/index.ts",
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 079cf21a0b1611..093a1ec57a0331 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
index 50157ee01ef149..fbf36c82d5fa3a 100644
--- a/packages/mui-material/src/Avatar/Avatar.js
+++ b/packages/mui-material/src/Avatar/Avatar.js
@@ -163,17 +163,23 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
 
   let children = null;
 
-  // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded({ ...imgProps, src, srcSet });
-  const hasImg = src || srcSet;
-  const hasImgNotFailing = hasImg && loaded !== 'error';
-
   const ownerState = {
     ...props,
-    colorDefault: !hasImgNotFailing,
     component,
     variant,
   };
+
+  // Use a hook instead of onError on the img element to support server-side rendering.
+  const loaded = useLoaded({
+    ...imgProps,
+    ...(typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img),
+    src,
+    srcSet,
+  });
+  const hasImg = src || srcSet;
+  const hasImgNotFailing = hasImg && loaded !== 'error';
+
+  ownerState.colorDefault = !hasImgNotFailing;
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
 
diff --git a/packages/mui-material/src/Avatar/Avatar.test.js b/packages/mui-material/src/Avatar/Avatar.test.js
index 5f3fb5796106ee..7feddbbd36731a 100644
--- a/packages/mui-material/src/Avatar/Avatar.test.js
+++ b/packages/mui-material/src/Avatar/Avatar.test.js
@@ -62,6 +62,20 @@ describe('<Avatar />', () => {
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);
     });
+
+    it('should pass slots.img to `useLoaded` hook', () => {
+      const originalImage = global.Image;
+      const image = {};
+      global.Image = function Image() {
+        return image;
+      };
+
+      render(<Avatar src="/fake.png" slotProps={{ img: { crossOrigin: 'anonymous' } }} />);
+
+      expect(image.crossOrigin).to.equal('anonymous');
+
+      global.Image = originalImage;
+    });
   });
 
   describe('image avatar with unrendered children', () => {
diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
index 6a695e84f78352..5987a8f04dc1c8 100644
--- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
+++ b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
@@ -210,7 +210,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
     return undefined;
   }, [handleClickAway, mouseEvent]);
 
-  return <React.Fragment>{React.cloneElement(children, childrenProps)}</React.Fragment>;
+  return React.cloneElement(children, childrenProps);
 }
 
 ClickAwayListener.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
index 7e0d90740b1309..fcb381ce103ef4 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -316,7 +316,7 @@ const FilledInput = React.forwardRef(function FilledInput(inProps, ref) {
   return (
     <InputBase
       slots={{ root: RootSlot, input: InputSlot }}
-      componentsProps={componentsProps}
+      slotProps={componentsProps}
       fullWidth={fullWidth}
       inputComponent={inputComponent}
       multiline={multiline}
diff --git a/packages/mui-material/src/Hidden/HiddenJs.js b/packages/mui-material/src/Hidden/HiddenJs.js
index b591452cef6299..a9ab0d0a965ee2 100644
--- a/packages/mui-material/src/Hidden/HiddenJs.js
+++ b/packages/mui-material/src/Hidden/HiddenJs.js
@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import exactProp from '@mui/utils/exactProp';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
@@ -50,7 +49,7 @@ function HiddenJs(props) {
     return null;
   }
 
-  return <React.Fragment>{children}</React.Fragment>;
+  return children;
 }
 
 HiddenJs.propTypes = {
diff --git a/packages/mui-material/src/Modal/useModal.ts b/packages/mui-material/src/Modal/useModal.ts
index 4cb2b992beae60..6a14ec7b7eb9c7 100644
--- a/packages/mui-material/src/Modal/useModal.ts
+++ b/packages/mui-material/src/Modal/useModal.ts
@@ -24,6 +24,8 @@ function getHasTransition(children: UseModalParameters['children']) {
   return children ? children.props.hasOwnProperty('in') : false;
 }
 
+const noop = () => {};
+
 // A modal manager used to track and manage the state of open Modals.
 // Modals don't open on the server so this won't conflict with concurrent requests.
 const manager = new ModalManager();
@@ -227,8 +229,8 @@ function useModal(parameters: UseModalParameters): UseModalReturnValue {
     };
 
     return {
-      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
-      onExited: createChainedFunction(handleExited, children?.props.onExited),
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter ?? noop),
+      onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop),
     };
   };
 
diff --git a/packages/mui-material/src/Modal/useModal.types.ts b/packages/mui-material/src/Modal/useModal.types.ts
index a67b240a9c5708..9b384f7688f70f 100644
--- a/packages/mui-material/src/Modal/useModal.types.ts
+++ b/packages/mui-material/src/Modal/useModal.types.ts
@@ -22,7 +22,14 @@ export type UseModalParameters = {
   /**
    * A single child content element.
    */
-  children: React.ReactElement<any> | undefined | null;
+  children:
+    | React.ReactElement<{
+        in?: boolean;
+        onEnter?: (this: unknown) => void;
+        onExited?: (this: unknown) => void;
+      }>
+    | undefined
+    | null;
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false
diff --git a/packages/mui-material/src/NoSsr/NoSsr.tsx b/packages/mui-material/src/NoSsr/NoSsr.tsx
index c7e2dfbc191a6e..0b18a597a751ae 100644
--- a/packages/mui-material/src/NoSsr/NoSsr.tsx
+++ b/packages/mui-material/src/NoSsr/NoSsr.tsx
@@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element {
     }
   }, [defer]);
 
-  // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
-  return <React.Fragment>{mountedState ? children : fallback}</React.Fragment>;
+  // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
+  return (mountedState ? children : fallback) as React.JSX.Element;
 }
 
 NoSsr.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Portal/Portal.tsx b/packages/mui-material/src/Portal/Portal.tsx
index 8bd141d8a5f858..a028eb856836e0 100644
--- a/packages/mui-material/src/Portal/Portal.tsx
+++ b/packages/mui-material/src/Portal/Portal.tsx
@@ -64,14 +64,10 @@ const Portal = React.forwardRef(function Portal(
       };
       return React.cloneElement(children, newProps);
     }
-    return <React.Fragment>{children}</React.Fragment>;
+    return children;
   }
 
-  return (
-    <React.Fragment>
-      {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
-    </React.Fragment>
-  );
+  return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
 }) as React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<Element>>;
 
 Portal.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Slider/SliderValueLabel.types.ts b/packages/mui-material/src/Slider/SliderValueLabel.types.ts
index 8fac93f872dcb8..378930f97e345e 100644
--- a/packages/mui-material/src/Slider/SliderValueLabel.types.ts
+++ b/packages/mui-material/src/Slider/SliderValueLabel.types.ts
@@ -1,5 +1,5 @@
 export interface SliderValueLabelProps {
-  children?: React.ReactElement<any>;
+  children?: React.ReactElement<{ className?: string; children?: React.ReactNode }>;
   className?: string;
   style?: React.CSSProperties;
   /**
diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.js b/packages/mui-material/src/Tabs/ScrollbarSize.js
index da7ec73c0c741b..4f5676cc428d13 100644
--- a/packages/mui-material/src/Tabs/ScrollbarSize.js
+++ b/packages/mui-material/src/Tabs/ScrollbarSize.js
@@ -49,7 +49,7 @@ export default function ScrollbarSize(props) {
     onChange(scrollbarHeight.current);
   }, [onChange]);
 
-  return <div style={styles} ref={nodeRef} {...other} />;
+  return <div style={styles} {...other} ref={nodeRef} />;
 }
 
 ScrollbarSize.propTypes = {
diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx
index 0f6085f5b9f1d9..398a7b37421019 100644
--- a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx
+++ b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx
@@ -324,7 +324,7 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element {
     };
   }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
 
-  const onFocus = (event: FocusEvent) => {
+  const onFocus = (event: React.FocusEvent<Element, Element>) => {
     if (nodeToRestore.current === null) {
       nodeToRestore.current = event.relatedTarget;
     }
diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts
index 462100ec696479..399ddd84ea210a 100644
--- a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts
+++ b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts
@@ -24,7 +24,10 @@ export interface FocusTrapProps {
   /**
    * A single child content element.
    */
-  children: React.ReactElement<any>;
+  children: React.ReactElement<{
+    onFocus?: React.FocusEventHandler;
+    ref?: React.RefCallback<any> | null;
+  }>;
   /**
    * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.
diff --git a/packages/mui-material/src/styles/ThemeProviderWithVars.test.js b/packages/mui-material/src/styles/ThemeProviderWithVars.test.js
index 57cc558313c691..e06a6d304d63dd 100644
--- a/packages/mui-material/src/styles/ThemeProviderWithVars.test.js
+++ b/packages/mui-material/src/styles/ThemeProviderWithVars.test.js
@@ -408,4 +408,35 @@ describe('[Material UI] ThemeProviderWithVars', () => {
       fireEvent.click(screen.getByText('Dark'));
     }).not.toErrorDev();
   });
+
+  it('theme should remain the same when ThemeProvider rerenders', () => {
+    const theme = createTheme({ cssVariables: true });
+
+    function Inner() {
+      const upperTheme = useTheme();
+      const themeRef = React.useRef(upperTheme);
+      const [changed, setChanged] = React.useState(false);
+      React.useEffect(() => {
+        if (themeRef.current !== upperTheme) {
+          setChanged(true);
+        }
+      }, [upperTheme]);
+      return changed ? <div data-testid="theme-changed" /> : null;
+    }
+    function App() {
+      const [, setState] = React.useState({});
+      const rerender = () => setState({});
+      return (
+        <ThemeProvider theme={theme}>
+          <button onClick={() => rerender()}>rerender</button>
+          <Inner />
+        </ThemeProvider>
+      );
+    }
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(screen.queryByTestId('theme-changed')).to.equal(null);
+  });
 });
diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js
index 26df7f1fdf6398..e4351045dffa8f 100644
--- a/packages/mui-material/src/styles/createTheme.test.js
+++ b/packages/mui-material/src/styles/createTheme.test.js
@@ -221,6 +221,22 @@ describe('createTheme', () => {
       expect(theme.colorSchemes.dark).to.not.equal(undefined);
     });
 
+    it('should be able to customize tonal offset', () => {
+      const theme = createTheme({
+        cssVariables: true,
+        palette: {
+          primary: {
+            main: green[500],
+          },
+          tonalOffset: {
+            light: 0.1,
+            dark: 0.9,
+          },
+        },
+      });
+      expect(theme.palette.primary.main).to.equal('#4caf50');
+    });
+
     describe('spacing', () => {
       it('should provide the default spacing', () => {
         const theme = createTheme({ cssVariables: true });
diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js
index 9e1fd9f76707e9..fde30948676edf 100644
--- a/packages/mui-material/src/styles/createThemeWithVars.js
+++ b/packages/mui-material/src/styles/createThemeWithVars.js
@@ -40,7 +40,7 @@ function setColor(obj, key, defaultValue) {
 }
 
 function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
     return color;
   }
   return hslToRgb(color);
@@ -421,7 +421,7 @@ export default function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json
index 441b722ecb1428..4430a900e37a24 100644
--- a/packages/mui-private-theming/package.json
+++ b/packages/mui-private-theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/private-theming",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.",
diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json
index 8876d448de50ae..e38255cd226c96 100644
--- a/packages/mui-styled-engine-sc/package.json
+++ b/packages/mui-styled-engine-sc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine-sc",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for styled-components.",
diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json
index 6359c9d8f456b6..2e4c0b5c78ac9a 100644
--- a/packages/mui-styled-engine/package.json
+++ b/packages/mui-styled-engine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/styled-engine",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "styled() API wrapper package for emotion.",
diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json
index d7b96f80ba43ac..bb56a1cae5210f 100644
--- a/packages/mui-styles/package.json
+++ b/packages/mui-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/styles",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.",
diff --git a/packages/mui-styles/test/styles.spec.tsx b/packages/mui-styles/test/styles.spec.tsx
index 8ed6a1d215f263..34ab5cac0f3711 100644
--- a/packages/mui-styles/test/styles.spec.tsx
+++ b/packages/mui-styles/test/styles.spec.tsx
@@ -215,7 +215,7 @@ withStyles((theme) =>
     });
 
   interface ListItemContentProps extends WithStyles<typeof styles> {
-    children?: React.ReactElement<any>;
+    children?: React.ReactElement<unknown>;
     inset?: boolean;
     row?: boolean;
   }
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
index 78ea48b612d18d..d9987558eb33d2 100644
--- a/packages/mui-system/package.json
+++ b/packages/mui-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index e7a2a21febb207..64ed9f9fc4037d 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -48,6 +48,9 @@ export default function createCssVarsProvider(options) {
 
   const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
 
+  const defaultColorSchemes = {};
+  const defaultComponents = {};
+
   function CssVarsProvider(props) {
     const {
       children,
@@ -75,12 +78,12 @@ export default function createCssVarsProvider(options) {
       return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
     }, [themeProp]);
     const scopedTheme = initialTheme[themeId];
+    const restThemeProp = scopedTheme || initialTheme;
     const {
-      colorSchemes = {},
-      components = {},
+      colorSchemes = defaultColorSchemes,
+      components = defaultComponents,
       cssVarPrefix,
-      ...restThemeProp
-    } = scopedTheme || initialTheme;
+    } = restThemeProp;
     const joinedColorSchemes = Object.keys(colorSchemes)
       .filter((k) => !!colorSchemes[k])
       .join(',');
@@ -126,42 +129,46 @@ export default function createCssVarsProvider(options) {
       colorScheme = ctx.colorScheme;
     }
 
-    // `colorScheme` is undefined on the server and hydration phase
-    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+    const memoTheme = React.useMemo(() => {
+      // `colorScheme` is undefined on the server and hydration phase
+      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
 
-    // 2. get the `vars` object that refers to the CSS custom properties
-    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
+      // 2. get the `vars` object that refers to the CSS custom properties
+      const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
-    // 3. Start composing the theme object
-    const theme = {
-      ...restThemeProp,
-      components,
-      colorSchemes,
-      cssVarPrefix,
-      vars: themeVars,
-    };
-    if (typeof theme.generateSpacing === 'function') {
-      theme.spacing = theme.generateSpacing();
-    }
+      // 3. Start composing the theme object
+      const theme = {
+        ...restThemeProp,
+        components,
+        colorSchemes,
+        cssVarPrefix,
+        vars: themeVars,
+      };
+      if (typeof theme.generateSpacing === 'function') {
+        theme.spacing = theme.generateSpacing();
+      }
 
-    // 4. Resolve the color scheme and merge it to the theme
-    if (calculatedColorScheme) {
-      const scheme = colorSchemes[calculatedColorScheme];
-      if (scheme && typeof scheme === 'object') {
-        // 4.1 Merge the selected color scheme to the theme
-        Object.keys(scheme).forEach((schemeKey) => {
-          if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
-            // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = {
-              ...theme[schemeKey],
-              ...scheme[schemeKey],
-            };
-          } else {
-            theme[schemeKey] = scheme[schemeKey];
-          }
-        });
+      // 4. Resolve the color scheme and merge it to the theme
+      if (calculatedColorScheme) {
+        const scheme = colorSchemes[calculatedColorScheme];
+        if (scheme && typeof scheme === 'object') {
+          // 4.1 Merge the selected color scheme to the theme
+          Object.keys(scheme).forEach((schemeKey) => {
+            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+              // shallow merge the 1st level structure of the theme.
+              theme[schemeKey] = {
+                ...theme[schemeKey],
+                ...scheme[schemeKey],
+              };
+            } else {
+              theme[schemeKey] = scheme[schemeKey];
+            }
+          });
+        }
       }
-    }
+
+      return resolveTheme ? resolveTheme(theme) : theme;
+    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -248,7 +255,7 @@ export default function createCssVarsProvider(options) {
           process.env.NODE_ENV === 'production'
             ? setMode
             : (newMode) => {
-                if (theme.colorSchemeSelector === 'media') {
+                if (memoTheme.colorSchemeSelector === 'media') {
                   console.error(
                     [
                       'MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).',
@@ -270,7 +277,7 @@ export default function createCssVarsProvider(options) {
         setColorScheme,
         setMode,
         systemMode,
-        theme.colorSchemeSelector,
+        memoTheme.colorSchemeSelector,
       ],
     );
 
@@ -285,13 +292,12 @@ export default function createCssVarsProvider(options) {
 
     const element = (
       <React.Fragment>
-        <ThemeProvider
-          themeId={scopedTheme ? themeId : undefined}
-          theme={resolveTheme ? resolveTheme(theme) : theme}
-        >
+        <ThemeProvider themeId={scopedTheme ? themeId : undefined} theme={memoTheme}>
           {children}
         </ThemeProvider>
-        {shouldGenerateStyleSheet && <GlobalStyles styles={theme.generateStyleSheets?.() || []} />}
+        {shouldGenerateStyleSheet && (
+          <GlobalStyles styles={memoTheme.generateStyleSheets?.() || []} />
+        )}
       </React.Fragment>
     );
 
diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json
index 22cdbcf5dc0ad2..65c4dd2cce9027 100644
--- a/packages/mui-utils/package.json
+++ b/packages/mui-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c4f657c25b335..9a59298eee5d1e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -663,7 +663,7 @@ importers:
         version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@toolpad/core':
         specifier: ^0.10.0
-        version: 0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))
+        version: 0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
@@ -1413,13 +1413,13 @@ importers:
         version: 7.26.0
       '@mui/base':
         specifier: '*'
-        version: 5.0.0-beta.62(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.0.0-beta.63(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/internal-markdown':
         specifier: workspace:^
         version: link:../markdown
       '@mui/system':
         specifier: ^5.0.0 || ^6.0.0
-        version: 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+        version: 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       chai:
         specifier: ^4.4.1
         version: 4.5.0
@@ -3971,6 +3971,17 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/base@5.0.0-beta.63':
+    resolution: {integrity: sha512-W6aIqKP9X8VUX0KhSnYWo2+5C7MnKV1IhYVd517L/apvfkVq5KaTdlnxSBVwnaWt46whayVgQ/9KXwUVCXp6+w==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^18.3.12
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/core-downloads-tracker@5.15.14':
     resolution: {integrity: sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==}
 
@@ -4012,9 +4023,11 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/material-pigment-css@6.1.8':
-    resolution: {integrity: sha512-lbgFlImFQqP8caX+pzH04V4/vXpe1JIJpPssPWisQbZg3f3wg0CvYUdaRha4aiqrYhaAVqCXQbTHVF7jXP8nBQ==}
+  '@mui/material-pigment-css@6.1.9':
+    resolution: {integrity: sha512-/Il4h5jbfXYlCxP6vuLQoCdy+MoHNJXoUIzv2zaGgR2GZW6fhlHpvV1uY0+DfDSoL07UKRnKnpQCklIkzII+qw==}
     engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@pigment-css/react': 0.0.27
 
   '@mui/material@5.15.4':
     resolution: {integrity: sha512-T/LGRAC+M0c+D3+y67eHwIN5bSje0TxbcJCWR0esNvU11T0QwrX3jedXItPNBwMupF2F5VWCDHBVLlFnN3+ABA==}
@@ -4043,8 +4056,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/private-theming@6.1.8':
-    resolution: {integrity: sha512-TuKl7msynCNCVvhX3c0ef1sF0Qb3VHcPs8XOGB/8bdOGBr/ynmIG1yTMjZeiFQXk8yN9fzK/FDEKMFxILNn3wg==}
+  '@mui/private-theming@6.1.9':
+    resolution: {integrity: sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^18.3.12
@@ -4066,8 +4079,8 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/styled-engine@6.1.8':
-    resolution: {integrity: sha512-ZvEoT0U2nPLSLI+B4by4cVjaZnPT2f20f4JUPkyHdwLv65ZzuoHiTlwyhqX1Ch63p8bcJzKTHQVGisEoMK6PGA==}
+  '@mui/styled-engine@6.1.9':
+    resolution: {integrity: sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
@@ -4095,8 +4108,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/system@6.1.8':
-    resolution: {integrity: sha512-i1kLfQoWxzFpXTBQIuPoA3xKnAnP3en4I2T8xIolovSolGQX5k8vGjw1JaydQS40td++cFsgCdEU458HDNTGUA==}
+  '@mui/system@6.1.9':
+    resolution: {integrity: sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -4139,6 +4152,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/utils@6.1.9':
+    resolution: {integrity: sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^18.3.12
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/x-charts-vendor@7.20.0':
     resolution: {integrity: sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==}
 
@@ -15007,7 +15030,21 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
+      '@popperjs/core': 2.11.8
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+
+  '@mui/base@5.0.0-beta.63(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/types': 7.2.19(@types/react@18.3.12)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -15035,14 +15072,14 @@ snapshots:
       '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@types/react': 18.3.12
 
-  '@mui/lab@6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/lab@6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@mui/base': 5.0.0-beta.62(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material': link:packages/mui-material/build
-      '@mui/system': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/system': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -15050,20 +15087,19 @@ snapshots:
     optionalDependencies:
       '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1)
       '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/material-pigment-css': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/material-pigment-css': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@types/react': 18.3.12
 
-  '@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
+  '@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/system': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/system': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@pigment-css/react': 0.0.27(@types/react@18.3.12)(react@18.3.1)
     transitivePeerDependencies:
       - '@emotion/react'
       - '@emotion/styled'
       - '@types/react'
       - react
-      - supports-color
     optional: true
 
   '@mui/material@5.15.4(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -15096,10 +15132,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
-  '@mui/private-theming@6.1.8(@types/react@18.3.12)(react@18.3.1)':
+  '@mui/private-theming@6.1.9(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       prop-types: 15.8.1
       react: 18.3.1
     optionalDependencies:
@@ -15116,7 +15152,7 @@ snapshots:
       '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1)
       '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
 
-  '@mui/styled-engine@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)':
+  '@mui/styled-engine@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@emotion/cache': 11.13.5
@@ -15145,13 +15181,13 @@ snapshots:
       '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@types/react': 18.3.12
 
-  '@mui/system@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
+  '@mui/system@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/private-theming': 6.1.8(@types/react@18.3.12)(react@18.3.1)
-      '@mui/styled-engine': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
+      '@mui/private-theming': 6.1.9(@types/react@18.3.12)(react@18.3.1)
+      '@mui/styled-engine': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
       '@mui/types': 7.2.19(@types/react@18.3.12)
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -15189,6 +15225,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/utils@6.1.9(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/types': 7.2.19(@types/react@18.3.12)
+      '@types/prop-types': 15.7.13
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/x-charts-vendor@7.20.0':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -15212,7 +15260,7 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/material': link:packages/mui-material/build
       '@mui/system': link:packages/mui-system/build
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-charts-vendor': 7.20.0
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       '@react-spring/rafz': 9.7.5
@@ -15250,7 +15298,7 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/material': link:packages/mui-material/build
       '@mui/system': link:packages/mui-system/build
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-data-grid': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/x-data-grid-pro': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
@@ -15273,7 +15321,7 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/material': link:packages/mui-material/build
       '@mui/system': link:packages/mui-system/build
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-data-grid': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-license': 7.21.0(@types/react@18.3.12)(react@18.3.1)
@@ -15294,7 +15342,7 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/material': link:packages/mui-material/build
       '@mui/system': link:packages/mui-system/build
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -15312,7 +15360,7 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/material': link:packages/mui-material/build
       '@mui/system': link:packages/mui-system/build
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-date-pickers': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(date-fns@2.30.0)(dayjs@1.11.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-license': 7.21.0(@types/react@18.3.12)(react@18.3.1)
@@ -15334,7 +15382,7 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/material': link:packages/mui-material/build
       '@mui/system': link:packages/mui-system/build
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       '@types/react-transition-group': 4.4.11
       clsx: 2.1.1
@@ -15353,7 +15401,7 @@ snapshots:
   '@mui/x-internals@7.21.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       react: 18.3.1
     transitivePeerDependencies:
       - '@types/react'
@@ -15361,7 +15409,7 @@ snapshots:
   '@mui/x-license@7.21.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       react: 18.3.1
     transitivePeerDependencies:
       - '@types/react'
@@ -15371,7 +15419,7 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@mui/material': link:packages/mui-material/build
       '@mui/system': link:packages/mui-system/build
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1)
       '@types/react-transition-group': 4.4.11
       clsx: 2.1.1
@@ -15983,8 +16031,8 @@ snapshots:
       '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1)
       '@emotion/serialize': 1.3.3
       '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/system': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
-      '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
+      '@mui/system': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
+      '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1)
       '@wyw-in-js/processor-utils': 0.5.5
       '@wyw-in-js/shared': 0.5.5
       '@wyw-in-js/transform': 0.5.5
@@ -16739,11 +16787,11 @@ snapshots:
       '@theme-ui/css': 0.17.1(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))
       react: 18.3.1
 
-  '@toolpad/core@0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))':
+  '@toolpad/core@0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))':
     dependencies:
       '@babel/runtime': 7.26.0
       '@mui/icons-material': link:packages/mui-icons-material/build
-      '@mui/lab': 6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/lab': 6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material': link:packages/mui-material/build
       '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1)
       '@toolpad/utils': 0.10.0(react@18.3.1)