Merge branch 'master' into fix/template-dashboard-warn

.eslintrc.js

@@ -48,7 +48,7 @@ const NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED = [
 module.exports = /** @type {Config} */ ({
   root: true, // So parent files don't get applied
   env: {
-    es6: true,
+    es2020: true,
     browser: true,
     node: true,
   },

CHANGELOG.old.md

@@ -2449,7 +2449,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 ### Core
 
 - [changelog] Fix issues in highlight @oliviertassinari
-- [core] Remove redundant `@material-ui/` aliases from regression test Webpack config (#38574) @ZeeshanTamboli
+- [core] Remove redundant `@material-ui/` aliases from regression test webpack config (#38574) @ZeeshanTamboli
 - [core] Fix CI error @oliviertassinari
 - [core] Remove unnecessary Box (#38461) @oliviertassinari
 - [core] Set GitHub Action top level permission @oliviertassinari
@@ -5458,7 +5458,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 - [docs] Fix typo in `Grid` docs (#34475) @Dustin-Digitar
 - [docs] Fix typo in `Back to top` section in AppBar docs (#34479) @Dustin-Digitar
 - [docs] Standardize all "Installation" pages (#34168) @samuelsycamore
-- [docs] Fix Webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong
+- [docs] Fix webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong
 - [docs] Fix Select `onChange` call (#34408) @siriwatknp
 - [docs] Notification for pickers blog - v5 stable (#34400) @joserodolfofreitas
 - [docs] Improve social sharing of docs pages (#34346) @oliviertassinari
@@ -6103,7 +6103,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som
 - [docs] Update to React 18 (#33196) @mnajdova
 - [docs] Simplify "Upload button" demo (#33326) @baharalidurrani
 - [docs] Add "refine" demo to showcase (#33240) @omeraplak
-- [docs] Add Webpack alias for legacy utils package (#33376) @jgbae
+- [docs] Add webpack alias for legacy utils package (#33376) @jgbae
 - [docs] Improve external link icons synonyms (#33257) @davidgarciab
 - [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova
 - [examples] Add Base UI example (#33154) @siriwatknp
@@ -8762,7 +8762,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 - [core] Remove code handling JSS components (#28421) @eps1lon
 - [core] Remove unused dependencies (#28468) @eps1lon
 - [core] Ensure both docs bundles are analyzeable (#28410) @eps1lon
-- [core] Switch to Webpack 5 (#28248) @eps1lon
+- [core] Switch to webpack 5 (#28248) @eps1lon
 - [core] Batch small changes (#28177) @oliviertassinari
 - [core] Update publish tag to latest (#28382) @mnajdova
 - [framer] Update @mui/\* dependencies (#28469) @eps1lon
@@ -9483,7 +9483,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 - [docs] Sort the size in a more logical order (#27186) @oliviertassinari
 - [docs] Use actual link to paperbase (#27063) @eps1lon
 - [docs] Use custom markdown loader for landing page (#27065) @eps1lon
-- [docs] Use Webpack 5 (#27077) @eps1lon
+- [docs] Use webpack 5 (#27077) @eps1lon
 - [examples] Fix CDN warning (#27229) @oliviertassinari
 - [examples] Remove `StyledEngineProvider` as JSS is not used (#27133) @mnajdova
 - [examples] Remove forgotten StyledEngineProvider (#27163) @oliviertassinari
@@ -9612,7 +9612,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 - [docs] Fix /components/hidden merge conflict (#26997) @eps1lon
 - [docs] Fix 404 links (#26963) @oliviertassinari
 - [docs] Remove link that points to v4 blog post (#26960) @steveafrost
-- [docs] Use custom Webpack loader for markdown (#26774) @eps1lon
+- [docs] Use custom webpack loader for markdown (#26774) @eps1lon
 - [docs] Fix 301 links (#26942) @oliviertassinari
 - [docs] Add page for the `sx` prop (#26769) @mnajdova
 - [docs] pre-fill issue when a demo crashes (#27034) @eps1lon
@@ -15660,7 +15660,7 @@ A big thanks to the 25 contributors who made this release possible.
 - [docs] Improve a11y of the chip array example (#20294) @m4theushw
 - [docs] Refactor markdown parsing (#20549) @eps1lon
 - [docs] Remove old workarounds (#20587) @eps1lon
-- [docs] Remove unnecessary Webpack loaders (#20563) @eps1lon
+- [docs] Remove unnecessary webpack loaders (#20563) @eps1lon
 - [docs] Sync translations (#20498) @oliviertassinari
 - [docs] Use reactStrictMode over custom switch (#20522) @eps1lon
 
@@ -22224,7 +22224,7 @@ A big thanks to the 14 contributors who made this release possible.
 - [RaisedButton] Conditionally apply overlay backgroundColor (#9811) @walwoodr
 - [Snackbar] Static properties for reason string constants (#10300) @RavenHursT
 - [TextField] Fix caret position issue (#10214) @MaratFaskhiev
-- Add sideEffects: false for Webpack 4 (#11167) @matthoffner
+- Add sideEffects: false for webpack 4 (#11167) @matthoffner
 
 ### Docs
 
@@ -25082,7 +25082,7 @@ When `withStyles()` is used as a decorator and `strictNullChecks` is enabled, on
 - [types] Better component typing (#8304) @oliviertassinari
 - [styles] Add a new defensive warning (#8341) @oliviertassinari
 - [core] Upgrade the dependencies (#8284) @oliviertassinari
-- [core] Help Webpack doing dead code elimination (#8340) @oliviertassinari
+- [core] Help webpack doing dead code elimination (#8340) @oliviertassinari
 - [core] Add TypeScript in the CI (#8328) @oliviertassinari
 - [typescript] Fix typo in Tooltip (#8271) @Rid
 - [typescript] Fix definitions for BreakpointsOptions (#8285) @peterprice
@@ -25802,7 +25802,7 @@ We do, we have extended the support of React to the 16.0.0-alpha.13 release (aka
 - [docs] Fix typo in class name (#7192) @ossan-engineer
 - [docs] Add supported server section (#7231) @oliviertassinari
 - [docs] Detail the browser support (#7188) @oliviertassinari
-- [docs] Upgrade to Webpack v3 (#7210) @oliviertassinari
+- [docs] Upgrade to webpack v3 (#7210) @oliviertassinari
 - [docs] More documentation on the typography (#7248) @oliviertassinari
 
 ### Core
@@ -26381,7 +26381,7 @@ _Feb 26, 2017_
 
 ### Docs
 
-- [docs] Use Webpack 2 & dll bundle (#6160) @nathanmarks
+- [docs] Use webpack 2 & dll bundle (#6160) @nathanmarks
 - [docs] Improve the user experience on mobile (#6154) @oliviertassinari
 - [docs] Fix the Table examples on mobile (425d8ed47e0282b8c0409517c53e00ef61374b02) @oliviertassinari
 - [docs] Add an API section (#6239) @oliviertassinari
@@ -26391,7 +26391,7 @@ _Feb 26, 2017_
 
 - [core] Fix typos in styles/transitions pointed out in issue (#6175) @Shahrukh-Zindani
 - [core] Lightweight the build (#6152) @oliviertassinari
-- [core] Add exports to index.js for inclusion in Webpack bundle (#6144) @fkretzer
+- [core] Add exports to index.js for inclusion in webpack bundle (#6144) @fkretzer
 - [test] Integration of test suite to run on BrowserStack (#6236) @oliviertassinari
 - [test] Bump vrtest version for exit code fix (1831aa76fe72e9b22a0b82f2a360f860ca89fdce) @nathanmarks
 
@@ -26535,7 +26535,7 @@ You can preview a **very early** version of the `next` branch following [this li
 
 ### Core
 
-- [core] Add support for Webpack 2/Rollup tree shaking in `svg-icons` sub module (#5774)
+- [core] Add support for webpack 2/Rollup tree shaking in `svg-icons` sub module (#5774)
 
 ## 0.16.5
 
@@ -26595,7 +26595,7 @@ This release is intended to solve an [issue](https://github.com/mui/material-ui/
 
 - [ListItem] Fix hover on touch devices (#5566)
 - [core] include `react-tap-event-plugin@^2.0.0` for `react@^15.4.0` (#5572)
-- [core] Add support for Webpack 2/Rollup tree shaking (#5545)
+- [core] Add support for webpack 2/Rollup tree shaking (#5545)
 
 ### Docs
 

babel.config.js

@@ -43,6 +43,7 @@ module.exports = function getBabelConfig(api) {
     '@mui/utils': resolveAliasPath('./packages/mui-utils/src'),
     '@mui/joy': resolveAliasPath('./packages/mui-joy/src'),
     '@mui/internal-docs-utils': resolveAliasPath('./packages-internal/docs-utils/src'),
+    '@mui/internal-test-utils': resolveAliasPath('./packages-internal/test-utils/src'),
     docs: resolveAliasPath('./docs'),
     test: resolveAliasPath('./test'),
   };

benchmark/package.json

@@ -32,11 +32,11 @@
     "react-is": "^18.3.1",
     "react-jss": "^10.10.0",
     "react-redux": "^9.1.2",
-    "redux": "^4.2.1",
+    "redux": "^5.0.1",
     "serve-handler": "^6.1.6",
     "styled-components": "^6.1.13",
     "styled-system": "^5.1.5",
     "theme-ui": "^0.17.1",
-    "webpack": "^5.95.0"
+    "webpack": "^5.96.1"
   }
 }

docs/data/joy/customization/dark-mode/dark-mode.md

@@ -115,7 +115,7 @@ export default class MyDocument extends Document {
 
 ### Next.js App Router
 
-To use the Joy UI API with a Next.js project with the App Router, add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) file in order to prevent flickering:
+To use the Joy UI API with a Next.js project with the App Router, add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file in order to prevent flickering:
 
 ```jsx title="app/layout.js"
 import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';

docs/data/joy/integrations/icon-libraries/icon-libraries.md

@@ -47,7 +47,7 @@ npm install @mui/icons-material @mui/material
 
 Because `@mui/material` is a required dependency of `@mui/icons-material`, you have to update your bundler's config to add an alias.
 
-Here is an example of how you can do it, if you use [Webpack](https://webpack.js.org/):
+Here is an example of how you can do it, if you use [webpack](https://webpack.js.org/):
 
 **webpack.config.js**
 

docs/data/material/components/icons/icons.md

@@ -120,7 +120,7 @@ This component extends the native `<svg>` element:
 ### Component prop
 
 You can use the `SvgIcon` wrapper even if your icons are saved in the `.svg` format.
-[svgr](https://github.com/gregberge/svgr) has loaders to import SVG files and use them as React components. For example, with Webpack:
+[svgr](https://github.com/gregberge/svgr) has loaders to import SVG files and use them as React components. For example, with webpack:
 
 ```jsx
 // webpack.config.js

docs/data/material/customization/css-theme-variables/configuration.md

@@ -176,7 +176,7 @@ createTheme({
 
 ### Next.js App Router
 
-Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) file:
+Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file:
 
 ```jsx title="app/layout.js"
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

docs/data/material/discover-more/backers/backers.md

@@ -156,7 +156,7 @@ Your organization logo will be placed in:
 - the [README.md](https://github.com/mui/material-ui#sponsors) (80k+ unique visitors/month)
 - the [Gold sponsor list](#gold-sponsors)
 
-\*we accept donations, but we won't show unethical ads.
+\*for backlink sponsors, your logo won't be visible.
 
 ### Silver
 

docs/data/material/experimental-api/pigment-css/pigment-css.md

@@ -341,3 +341,35 @@ declare global {
   }
 }
 ```
+
+### Runtime theme
+
+:::info
+
+**Caveat**
+
+- Avoid using the runtime theme unless you have a compelling reason.
+- The runtime theme contains [**only serializable values**](https://developer.mozilla.org/en-US/docs/Glossary/Serializable_object) (some functions still exist in `breakpoints` and `transitions` for internal logic inside components but may be removed in the future).
+- The runtime theme will not change between modes (light and dark) because it is pre-compiled at build time. To render something based on the theme structure and its values, use `theme.vars.*` to refer to CSS variables instead.
+
+:::
+
+To access the runtime theme, use the `useTheme` hook:
+
+```js
+import { useTheme } from '@mui/material-pigment-css';
+
+function MyComponent() {
+  const theme = useTheme();
+
+  return (
+    <div>
+      {Object.entries(theme.vars.palette.primary).map(([key, value]) => (
+        <div key={key} style={{ width: 40, height: 40, background: value }}>
+          {key}: {value}
+        </div>
+      ))}
+    </div>
+  );
+}
+```

docs/data/material/getting-started/faq/faq.md

@@ -351,7 +351,7 @@ There are several common reasons for this to happen:
 
 - You have another `@mui/styles` library somewhere in your dependencies.
 - You have a monorepo structure for your project (for example, lerna or yarn workspaces) and `@mui/styles` module is a dependency in more than one package (this one is more or less the same as the previous one).
-- You have several applications that are using `@mui/styles` running on the same page (for example, several entry points in Webpack are loaded on the same page).
+- You have several applications that are using `@mui/styles` running on the same page (for example, several entry points in webpack are loaded on the same page).
 
 ### Duplicated module in node_modules
 
@@ -365,7 +365,7 @@ If you identified that duplication is the issue that you are encountering there
 If you are using npm you can try running `npm dedupe`.
 This command searches the local dependencies and tries to simplify the structure by moving common dependencies further up the tree.
 
-If you are using Webpack, you can change the way it will [resolve](https://webpack.js.org/configuration/resolve/#resolve-modules) the @mui/styles module. You can overwrite the default order in which Webpack will look for your dependencies and make your application node_modules more prioritized than default node module resolution order:
+If you are using webpack, you can change the way it will [resolve](https://webpack.js.org/configuration/resolve/#resolve-modules) the @mui/styles module. You can overwrite the default order in which webpack will look for your dependencies and make your application node_modules more prioritized than default node module resolution order:
 
 ```diff
  resolve: {
@@ -377,7 +377,7 @@ If you are using Webpack, you can change the way it will [resolve](https://webpa
 
 ### Running multiple applications on one page
 
-If you have several applications running on one page, consider using one @mui/styles module for all of them. If you are using Webpack, you can use [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) to create an explicit [vendor chunk](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk), that will contain the @mui/styles module:
+If you have several applications running on one page, consider using one @mui/styles module for all of them. If you are using webpack, you can use [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) to create an explicit [vendor chunk](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk), that will contain the @mui/styles module:
 
 ```diff
   module.exports = {
@@ -409,7 +409,7 @@ You could end up accidentally using two class name generators in a variety of sc
 - You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
 
 :::success
-If you are using Webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
+If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
 :::
 
 Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.

docs/data/material/getting-started/supported-platforms/supported-platforms.md

@@ -40,6 +40,6 @@ Have a look at the older [versions](https://mui.com/versions/) for backward comp
 Material UI requires a minimum version of TypeScript 4.7.
 This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old.
 
-## Webpack
+## webpack
 
-The minimium required version of webpack to bundle applications that use Material UI is v5. Webpack <= v4 can't bundle Material UI untranspiled as it uses features such as the [null coalscing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [optional chaining (`?.`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).
+The minimium required version of webpack to bundle applications that use Material UI is v5. webpack <= v4 can't bundle Material UI untranspiled as it uses features such as the [null coalscing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) and [optional chaining (`?.`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining).

docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js

@@ -68,7 +68,7 @@ export default function AppNavbar() {
               Dashboard
             </Typography>
           </Stack>
-          <ColorModeIconDropdown />
+          <ColorModeIconDropdown data-screenshot="" />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>

docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx

@@ -68,7 +68,7 @@ export default function AppNavbar() {
               Dashboard
             </Typography>
           </Stack>
-          <ColorModeIconDropdown />
+          <ColorModeIconDropdown data-screenshot="" />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -230,7 +230,7 @@ You are strongly discouraged to:
 
   :::
 
-A great way to use these bundles is to configure bundler aliases, for example with [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+A great way to use these bundles is to configure bundler aliases, for example with [webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
 
 ```js
 {

docs/data/material/integrations/interoperability/interoperability.md

@@ -424,7 +424,7 @@ bundling solution people are using.
 ```jsx title="CssModulesSlider.js"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
-// Webpack, Parcel or else will inject the CSS into the page
+// webpack, Parcel or else will inject the CSS into the page
 import styles from './CssModulesSlider.module.css';
 
 export default function CssModulesSlider() {
@@ -504,7 +504,7 @@ The following examples override the slider's `thumb` style in addition to the cu
 
 ```jsx title="CssModulesSliderDeep1.js"
 import * as React from 'react';
-// Webpack, Parcel or else will inject the CSS into the page
+// webpack, Parcel or else will inject the CSS into the page
 import styles from './CssModulesSliderDeep1.module.css';
 import Slider from '@mui/material/Slider';
 
@@ -536,7 +536,7 @@ The above demo relies on the [default `className` values](/system/styles/advance
 
 ```jsx title="CssModulesSliderDeep2.js"
 import * as React from 'react';
-// Webpack, Parcel or else will inject the CSS into the page
+// webpack, Parcel or else will inject the CSS into the page
 import styles from './CssModulesSliderDeep2.module.css';
 import Slider from '@mui/material/Slider';
 

docs/data/material/integrations/nextjs/nextjs.md

@@ -1,6 +1,6 @@
 # Next.js integration
 
-<p class="description">Learn how to use Material UI with Next.js</p>
+<p class="description">Learn how to use Material UI with Next.js.</p>
 
 ## App Router
 

docs/data/material/integrations/styled-components/styled-components.md

@@ -47,7 +47,7 @@ If you're using yarn, you can configure it using a package resolution:
 ### With npm
 
 Because package resolutions aren't available with npm, you must update your bundler's config to add this alias.
-The example below shows how to do this with Webpack:
+The example below shows how to do this with webpack:
 
 ```diff title="webpack.config.js"
  module.exports = {

docs/data/material/migration/migration-v4/troubleshooting.md

@@ -36,7 +36,7 @@ In this specific example, you would need to bump the version of `@mui/x-data-gri
 
 ## Storybook and Emotion
 
-If your project uses Storybook v6.x, you will need to update the `.storybook/main.js` Webpack config to use the most recent version of Emotion:
+If your project uses Storybook v6.x, you will need to update the `.storybook/main.js` webpack config to use the most recent version of Emotion:
 
 ```js
 // .storybook/main.js