@mui/system 5.15.15 → 5.16.0

package/CHANGELOG.md

@@ -1,5 +1,251 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.16.0
+
+<!-- generated comparing v5.15.21..master -->
+
+_Jul 5, 2024_
+
+A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added `InitColorSchemeScript` for Next.js App Router (#42829) @siriwatknp
+
+### `@mui/material@5.16.0`
+
+- [Alert] Add ability to override slot props (@alexey-kozlenkov) (#42808) @alexey-kozlenkov
+- Add `InitColorSchemeScript` for Next.js App Router (#42829) @siriwatknp
+- Add `DefaultPropsProvider` (#42820) @siriwatknp
+- Support `CssVarsTheme` in `responsiveFontSizes` return type (@jxdp) (#42806) @jxdp
+- Remove warning from `getInitColorSchemeScript` (#42838) @siriwatknp
+
+### Docs
+
+- [docs] Fix 301 MDN redirections @oliviertassinari
+
+### Core
+
+- [mui-utils][test] Remove usages of deprecated react-dom APIs (@aarongarciah) (#42813) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexey-kozlenkov, @jxdp, @oliviertassinari, @siriwatknp
+
+## v5.15.21
+
+<!-- generated comparing v5.15.20..master -->
+
+_Jun 28, 2024_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@5.15.21`
+
+- [Autocomplete] Fix renderOption props type (@DiegoAndai) (#42709) @DiegoAndai
+- [Stepper] Generate class for `nonLinear` prop (@alexismo) (#42677) @alexismo
+
+### Docs
+
+- Use new email for sponsoring @oliviertassinari
+- Fix 301 links (@alexfauquette) (#42700) @alexfauquette
+- [material-ui][Select] Fix the `SelectAutoWidth` demo menu item value (@Danielkhakbaz) (#42696) @Danielkhakbaz
+- [material-ui][Autocomplete] Fix more React 18.3 key spread warnings in demos (#42766) @wbt
+- [material-ui] Fix sign in side image (#42708) @zanivan
+- [website] Add Ale to team (#42769) @alelthomas
+
+### Core
+
+- [core] Cherry pick pnpm updates (#42763) @DiegoAndai
+- [website] Add Armin to the team members (@arminmeh) (#42681) @arminmeh
+- [website] Open Staff Engineer role for Pigment CSS (@mnajdova) (#42669) @mnajdova
+
+All contributors of this release in alphabetical order: @alexfauquette, @alexismo, @arminmeh, @Danielkhakbaz, @DiegoAndai, @mnajdova, @oliviertassinari
+
+## v5.15.20
+
+<!-- generated comparing v5.15.19..master -->
+
+_Jun 12, 2024_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@5.15.20`
+
+- &#8203;<!-- 17 -->[Autocomplete] Shouldn't resize when hovering (@ZeeshanTamboli) (#42535) @ZeeshanTamboli
+- &#8203;<!-- 07 -->[Tab] Fix applying `iconWrapper` styles from theme and update its description (@sai6855) (#42570) @sai6855
+
+### `@mui/utils@5.15.15`
+
+- &#8203;<!-- 06 -->Allow passing `NaN` as `defaultValue` to `useControlled` (@iammminzzy) (#42571) @iammminzzy
+- &#8203;<!-- 17 -->Fix GitHub-reported prototype pollution vulnerability in `deepmerge` (#41652) (#42608) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 16 -->[docs] Add Pigment CSS and Base UI logos SVGs (#42513) @danilo-leal
+- &#8203;<!-- 15 -->[docs] Update twitter.com to x.com @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Simplify Example projects page @oliviertassinari
+- &#8203;<!-- 13 -->[material-ui] Add docs for complementary stepper components (@anle9650) (#42613) @anle9650
+- &#8203;<!-- 12 -->[docs] Add changelog section to the design kits page (@danilo-leal) (#42463) @danilo-leal
+- &#8203;<!-- 11 -->[material-ui] Fix sentence in the All components page (@danilo-leal) (#42462) @danilo-leal
+- &#8203;<!-- 10 -->[material-ui] Update Figma design kit doc redirect link (@danilo-leal) (#42456) @danilo-leal
+- &#8203;<!-- 09 -->[system] Add "dynamic values" section to sx prop page (@aarongarciah) (#42453) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 18 -->[website] Move the `React Engineer - X` role to future roles (#42532) @DanailH
+- &#8203;<!-- 08 -->[examples] Remove Pigment CSS examples (#42538) @sai6855
+- &#8203;<!-- 05 -->[website] Close Developer Advocate / Content Engineer role @oliviertassinari
+- &#8203;<!-- 04 -->[website] Update DoiT description and link in Sponsors section (@erezstmn-doit) (#42511) @erezstmn-doit
+- &#8203;<!-- 03 -->[website] Clean up the docs-infra job ad (@danilo-leal) (#42509) @danilo-leal
+- &#8203;<!-- 02 -->[website] Open the Docs-infra engineer role (@danilo-leal) (#42496) @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix locationCountry in about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @anle9650, @DanailH, @danilo-leal, @erezstmn-doit, @iammminzzy, @oliviertassinari, @sai6855, @ZeeshanTamboli
+
+## v5.15.19
+
+<!-- generated comparing v5.15.18..master -->
+
+_May 29, 2024_
+
+A big thanks to the 12 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.19`
+
+- &#8203;<!-- 19 -->[AlertTitle] Enable extending Typography props (@lucasgmelo) (#42334) @github-actions[bot]
+- &#8203;<!-- 06 -->[responsiveFontSizes] Handled undefined variants (@brijeshb42) (#42419) @github-actions[bot]
+- &#8203;<!-- 05 -->[Slider] Fix wrong CSS value (@mnajdova) (#42373) @github-actions[bot]
+
+### Docs
+
+- &#8203;<!-- 13 -->Link to pnpm installation docs (#42420) @aarongarciah
+- &#8203;<!-- 12 -->Remove LocalMonero (@oliviertassinari) (#42315) @github-actions[bot]
+- &#8203;<!-- 10 -->[material-ui] Fix typo in style interoperability with Tailwind CSS docs (@ZeeshanTamboli) (#42312) @github-actions[bot]
+- &#8203;<!-- 09 -->[material-ui][Pagination] Clarify pagination `page` prop API (@Mandar-Pandya) (#42265) @github-actions[bot]
+- &#8203;<!-- 08 -->[material-ui][Tabs] Improve the Basic Tabs demo (@MatheusEli) (#42426) @github-actions[bot]
+- &#8203;<!-- 07 -->[pigment-css] Fix duplication of content (#42410) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 18 -->[blog] Add the "Product" tag to the Pigment CSS post (@danilo-leal) (#42366) @github-actions[bot]
+- &#8203;<!-- 17 -->[blog] Update blog post OG image (@danilo-leal) (#42306) @github-actions[bot]
+- &#8203;<!-- 16 -->[blog] Update Pigment CSS post (@danilo-leal) (#42267) @github-actions[bot]
+- &#8203;<!-- 15 -->[core] Fix React 18.3 warnings about spreading keys in the Material UI `Autocomplete` component (#42099) (#42241) @DiegoAndai
+- &#8203;<!-- 14 -->[core] Fix a few more key spread issues (@oliviertassinari) (#42318) @github-actions[bot]
+- &#8203;<!-- 11 -->[docs-infra] Allow JSDoc tags (#42327) @aarongarciah
+- &#8203;<!-- 04 -->[website] Add Nikita to the about page (@nikitaa24) (#42421) @github-actions[bot]
+- &#8203;<!-- 03 -->[website] Fix hero spacing changes applying at the wrong breakpoint (@KenanYusuf) (#42357) @github-actions[bot]
+- &#8203;<!-- 02 -->[website] Adds Kenan Yusuf to about page (@KenanYusuf) (#42330) @github-actions[bot]
+- &#8203;<!-- 01 -->[website] Improve about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @brijeshb42, @danilo-leal, @DiegoAndai, @KenanYusuf, @lucasgmelo, @Mandar-Pandya, @MatheusEli, @mnajdova, @nikitaa24, @oliviertassinari, @ZeeshanTamboli
+
+## v5.15.18
+
+<!-- generated comparing v5.15.17..master -->
+
+_May 14, 2024_
+
+A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@5.15.18`
+
+- &#8203;<!-- 6 -->[Autocomplete] Improve design when there's a start adornment for small autocomplete (@TahaRhidouani) (#42176) @github-actions[bot]
+- &#8203;<!-- 3 -->[ToggleButtonGroup] Add missing `selected` class in ToggleButtonGroupClasses type (@tarunrajput) (#42250) @github-actions[bot]
+
+### Docs
+
+- &#8203;<!-- 4 -->[docs] Fix 301 to Figma @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 5 -->[blog] Introducing Pigment CSS blog post (#42198) (#42255) @samuelsycamore
+- &#8203;<!-- 2 -->[website] Add redirection for talk @oliviertassinari
+- &#8203;<!-- 1 -->[website] Adds Arthur Balduini team info (@arthurbalduini) (#42226) @github-actions[bot]
+
+All contributors of this release in alphabetical order: @arthurbalduini, @oliviertassinari, @samuelsycamore, @TahaRhidouani, @tarunrajput
+
+## v5.15.17
+
+<!-- generated comparing v5.15.16..master -->
+
+_May 8, 2024_
+
+A big thanks to the 4 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.17`
+
+- [Slider] Move palette styles to the bottom (#41676) @siriwatknp
+
+### Docs
+
+- Fix SEO redirection issues @oliviertassinari
+- [material-ui] Fix broken link (@aarongarciah) (#42143) @github-actions[bot]
+- [material-ui] Fix link on the Sync page (@danilo-leal) (#42089) @github-actions[bot]
+
+### Core
+
+- [blog] Shorten title to fit @oliviertassinari
+- [blog] Update Sync post OG image (@danilo-leal) (#42117) @github-actions[bot]
+- [blog] A few tweaks in introducing-sync-plugin (@oliviertassinari) (#42094) @github-actions[bot]
+- [docs-infra] Fix code block layout shift (#41917) @oliviertassinari
+- [website] Fix home page slider's track position (@aarongarciah) (#42144) @github-actions[bot]
+- [website] Closing the survey @oliviertassinari
+- [website] Remove Survey banner from website and Core docs (#42104) @joserodolfofreitas
+
+All contributors of this release in alphabetical order: @github-actions[bot], @joserodolfofreitas, @oliviertassinari, @siriwatknp
+
+## v5.15.16
+
+<!-- generated comparing v5.15.15..master -->
+
+_May 1, 2024_
+
+A big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.16`
+
+- [material-ui][Dialog] Prevent onClick on the root element from being overwritten (@ryanburr) (#41914) @github-actions[bot]
+- [material-ui][Select] Fix `muiName` property TypeScript error (@EyaOuenniche) (#41786) @github-actions[bot]
+- —>[material-ui][l10n] Fix typo in is-IS locale (@magnimarels) (#41815) @github-actions[bot]
+
+### Docs
+
+- Fix small SEO issues @oliviertassinari
+- Fix 301 Toolpad links @oliviertassinari
+- Fix 301 Toolpad links @oliviertassinari
+- Fix 301 image redirections @oliviertassinari
+- Fix small SEO issues @oliviertassinari
+- Fix 301 redirection @oliviertassinari
+- Fix format git diff regression (#41882) @oliviertassinari
+- Fix 301 links @oliviertassinari
+- [material-ui] Fix import statement in migration guide (@sai6855) (#41864) @github-actions[bot]
+- [material-ui] Update Figma plugin name (@danilo-leal) (#42057) @github-actions[bot]
+- [material-ui] Fix minor spelling error in the "About the lab" page (@ryanhartwig) (#42075) @github-actions[bot]
+- [material-ui] Add missing backticks to HTML tag in the installation page (@Miguelrom) (#42009) @github-actions[bot]
+- [material-ui] Add Connect-related content (@danilo-leal) (#41924) @DiegoAndai
+- [material-ui] Fix Material 3 message typo (@aarongarciah) (#41822) @github-actions[bot]
+- [material-ui] Remove Data Grid v7 beta callout (@cherniavskii) (#41842) @github-actions[bot]
+- [material-ui][templates] Fix input props attributes in Landing Page template (@5-tom) (#42034) @github-actions[bot]
+- [system] Update typo on the sx prop page (@bricker) (#42078) @github-actions[bot]
+
+### Core
+
+- [blog] Add post to introduce the Connect plugin (@danilo-leal) (#41929) @DiegoAndai
+- [core] Automate cherry-pick of PRs from `next` -> `master` (#41742) @aarongarciah
+- [docs-infra] Improve Twitter OG:image (#41860) @oliviertassinari
+- [docs-infra] Use edge function for card generation (#41188) @alexfauquette
+- [docs-infra] Fix drawer performances (#41807) (#41820) @alexfauquette
+- [docs-infra] Fix analytics about inline ads (#41474) @alexfauquette
+- [website] Sync career roles (@oliviertassinari) (#42059) @github-actions[bot]
+- [website] Add content about the Sync plugin in the Material UI page (@danilo-leal) (#42074) @github-actions[bot]
+- [website] Add Nadja on the about page (#42054) @mnajdova
+- [website] Close the `Design Engineer - X` role (#42014) @DanailH
+- [website] Remove customer support agent role from website (@rluzists1) (#41996) @github-actions[bot]
+- [website] Add Jose to About Us (#41759) @JCQuintas
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @DanailH, @DiegoAndai, @github-actions[bot], @JCQuintas, @mnajdova, @oliviertassinari
+
 ## v5.15.15
 
 <!-- generated comparing v5.15.14..master -->
@@ -7962,7 +8208,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
 
   <a href="https://mui.com/components/tables/#unstyled-table"><img width="800" alt="unstyled table" src="https://user-images.githubusercontent.com/4512430/144862194-584356ef-7d9d-462c-a631-186a7e716193.png"></a>
 
-  You can follow our progress with unstyled components at https://github.com/mui/material-ui/issues/27170.
+  You can follow our progress with unstyled components at https://github.com/mui/base-ui/issues/10.
 
 - 🎉 We have added an example of how to use MUI with [Remix](https://remix.run/) (#29952) @mnajdova
 
@@ -8229,7 +8475,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 
 - &#8203;<!-- 27 -->[core] Rename mui/core to mui/base (#29585) @michaldudak
 
-  Based on the results of the [poll](https://twitter.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
+  Based on the results of the [poll](https://x.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
 
   The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a **base** to build on.
 
@@ -9432,7 +9678,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 
   <a href="https://mui.com/components/switches/#unstyled"><img width="832" alt="switch" src="https://user-images.githubusercontent.com/3165635/125192249-236f8a80-e247-11eb-9df9-17d476379a32.png"></a>
 
-  You can follow our progress at https://github.com/mui/material-ui/issues/27170.
+  You can follow our progress at https://github.com/mui/base-ui/issues/10.
 
 - 💄 We have updated the default `info` `success` `warning` color to be more accessible (#26817) @siriwatknp.
   You can find the new [default values](https://mui.com/material-ui/customization/palette/#default-values) in the documentation.
@@ -12646,7 +12892,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
   ```
 
 - [Autocomplete] Remove `debug` in favor of `open` and dev tools (#23377) @eps1lon
-  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://twitter.com/sulco/status/1305841873945272321), or React devtools props.
+  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://x.com/sulco/status/1305841873945272321), or React devtools props.
 
 #### Changes
 

package/DefaultPropsProvider/DefaultPropsProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare function DefaultPropsProvider({ value, children, }: React.PropsWithChildren<{
+    value: Record<string, any> | undefined;
+}>): React.JSX.Element;
+declare namespace DefaultPropsProvider {
+    var propTypes: any;
+}
+export declare function useDefaultProps<Props>({ props, name }: {
+    props: Props;
+    name: string;
+}): Props;
+export default DefaultPropsProvider;

package/DefaultPropsProvider/DefaultPropsProvider.js

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useDefaultProps = useDefaultProps;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PropsContext = /*#__PURE__*/React.createContext(undefined);
+function DefaultPropsProvider({
+  value,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PropsContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+  /**
+   * @ignore
+   */
+  value: _propTypes.default.object
+} : void 0;
+function getThemeProps(params) {
+  const {
+    theme,
+    name,
+    props
+  } = params;
+  if (!theme || !theme.components || !theme.components[name]) {
+    return props;
+  }
+  const config = theme.components[name];
+  if (config.defaultProps) {
+    // compatible with v5 signature
+    return (0, _resolveProps.default)(config.defaultProps, props);
+  }
+  if (!config.styleOverrides && !config.variants) {
+    // v6 signature, no property 'defaultProps'
+    return (0, _resolveProps.default)(config, props);
+  }
+  return props;
+}
+function useDefaultProps({
+  props,
+  name
+}) {
+  const ctx = React.useContext(PropsContext);
+  return getThemeProps({
+    props,
+    name,
+    theme: {
+      components: ctx
+    }
+  });
+}
+var _default = exports.default = DefaultPropsProvider;

package/DefaultPropsProvider/index.d.ts

@@ -0,0 +1 @@
+export { default, useDefaultProps } from './DefaultPropsProvider';

package/DefaultPropsProvider/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DefaultPropsProvider.default;
+  }
+});
+Object.defineProperty(exports, "useDefaultProps", {
+  enumerable: true,
+  get: function () {
+    return _DefaultPropsProvider.useDefaultProps;
+  }
+});
+var _DefaultPropsProvider = _interopRequireWildcard(require("./DefaultPropsProvider"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/DefaultPropsProvider/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/DefaultPropsProvider/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Split this component for RSC import
+ */
+import * as React from 'react';
+export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
+export interface InitColorSchemeScriptProps {
+    /**
+     * The mode to be used for the first visit
+     * @default 'light'
+     */
+    defaultMode?: 'light' | 'dark' | 'system';
+    /**
+     * The default color scheme to be used on the light mode
+     * @default 'light'
+     */
+    defaultLightColorScheme?: string;
+    /**
+     * The default color scheme to be used on the dark mode
+     * * @default 'dark'
+     */
+    defaultDarkColorScheme?: string;
+    /**
+     * The node (provided as string) used to attach the color-scheme attribute
+     * @default 'document.documentElement'
+     */
+    colorSchemeNode?: string;
+    /**
+     * localStorage key used to store `mode`
+     * @default 'mode'
+     */
+    modeStorageKey?: string;
+    /**
+     * localStorage key used to store `colorScheme`
+     * @default 'color-scheme'
+     */
+    colorSchemeStorageKey?: string;
+    /**
+     * DOM attribute for applying color scheme
+     * @default 'data-color-scheme'
+     */
+    attribute?: string;
+    /**
+     * Nonce string to pass to the inline script for CSP headers
+     */
+    nonce?: string | undefined;
+}
+export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;

package/InitColorSchemeScript/InitColorSchemeScript.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
+exports.default = InitColorSchemeScript;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Split this component for RSC import
+ */
+
+const DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
+function InitColorSchemeScript(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme = 'light',
+    defaultDarkColorScheme = 'dark',
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE,
+    colorSchemeNode = 'document.documentElement',
+    nonce
+  } = options || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+    suppressHydrationWarning: true,
+    nonce: typeof window === 'undefined' ? nonce : ''
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: `(function() {
+try {
+  var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
+  var colorScheme = '';
+  if (mode === 'system') {
+    // handle system mode
+    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+    } else {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+    }
+  }
+  if (mode === 'light') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+  }
+  if (mode === 'dark') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+  }
+  if (colorScheme) {
+    ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
+  }
+} catch(e){}})();`
+    }
+  }, "mui-color-scheme-init");
+}

package/InitColorSchemeScript/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './InitColorSchemeScript';
+export type { InitColorSchemeScriptProps } from './InitColorSchemeScript';

package/InitColorSchemeScript/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _InitColorSchemeScript.default;
+  }
+});
+var _InitColorSchemeScript = _interopRequireDefault(require("./InitColorSchemeScript"));

package/InitColorSchemeScript/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/InitColorSchemeScript/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ThemeProvider/ThemeProvider.js

@@ -14,6 +14,7 @@ var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _styledEngine = require("@mui/styled-engine");
 var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
 var _RtlProvider = _interopRequireDefault(require("../RtlProvider"));
+var _DefaultPropsProvider = _interopRequireDefault(require("../DefaultPropsProvider"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -68,7 +69,10 @@ function ThemeProvider(props) {
       value: engineTheme,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
+          value: engineTheme == null ? void 0 : engineTheme.components,
+          children: children
+        })
       })
     })
   });

package/cssVars/createCssVarsProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import getInitColorSchemeScript from './getInitColorSchemeScript';
+import InitColorSchemeScript from '../InitColorSchemeScript';
 import { Mode, Result } from './useCurrentColorScheme';
 
 export interface ColorSchemeContextValue<SupportedColorScheme extends string>
@@ -92,7 +92,7 @@ export interface CreateCssVarsProviderResult<
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  getInitColorSchemeScript: typeof getInitColorSchemeScript;
+  getInitColorSchemeScript: typeof InitColorSchemeScript;
 }
 
 export default function createCssVarsProvider<

package/cssVars/createCssVarsProvider.js

@@ -15,7 +15,7 @@ var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
+var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
@@ -32,9 +32,9 @@ function createCssVarsProvider(options) {
      * It should also ideally have a vars object created using `prepareCssVars`.
      */
     theme: defaultTheme = {},
-    attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
-    modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute: defaultAttribute = _InitColorSchemeScript.DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: designSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -339,7 +339,7 @@ function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
+  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)((0, _extends2.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,42 +1,3 @@
 import * as React from 'react';
-export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
-export interface GetInitColorSchemeScriptOptions {
-    /**
-     * The mode to be used for the first visit
-     * @default 'light'
-     */
-    defaultMode?: 'light' | 'dark' | 'system';
-    /**
-     * The default color scheme to be used on the light mode
-     * @default 'light'
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode
-     * * @default 'dark'
-     */
-    defaultDarkColorScheme?: string;
-    /**
-     * The node (provided as string) used to attach the color-scheme attribute
-     * @default 'document.documentElement'
-     */
-    colorSchemeNode?: string;
-    /**
-     * localStorage key used to store `mode`
-     * @default 'mode'
-     */
-    modeStorageKey?: string;
-    /**
-     * localStorage key used to store `colorScheme`
-     * @default 'color-scheme'
-     */
-    colorSchemeStorageKey?: string;
-    /**
-     * DOM attribute for applying color scheme
-     * @default 'data-color-scheme'
-     */
-    attribute?: string;
-}
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): React.JSX.Element;
+import { InitColorSchemeScriptProps } from '../InitColorSchemeScript';
+export default function getInitColorSchemeScript(params?: InitColorSchemeScriptProps): React.JSX.Element;