@mui/system 5.15.20 → 5.16.1

package/esm/InitColorSchemeScript/InitColorSchemeScript.js

@@ -0,0 +1,51 @@
+/**
+ * Split this component for RSC import
+ */
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_MODE_STORAGE_KEY = 'mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
+export default 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__*/_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/esm/InitColorSchemeScript/index.js

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

package/esm/ThemeProvider/ThemeProvider.js

@@ -8,6 +8,7 @@ import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import RtlProvider from '../RtlProvider';
+import DefaultPropsProvider from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
@@ -60,7 +61,10 @@ function ThemeProvider(props) {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+          value: engineTheme == null ? void 0 : engineTheme.components,
+          children: children
+        })
       })
     })
   });

package/esm/cssVars/createCssVarsProvider.js

@@ -8,7 +8,7 @@ import deepmerge from '@mui/utils/deepmerge';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import InitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -330,7 +330,7 @@ export default function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+  const getInitColorSchemeScript = params => InitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/esm/cssVars/getInitColorSchemeScript.js

@@ -1,44 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// TODO: remove this file in v6
 import * as React from 'react';
+import InitColorSchemeScript from '../InitColorSchemeScript';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
-export default function getInitColorSchemeScript(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'
-  } = options || {};
-  return /*#__PURE__*/_jsx("script", {
-    // 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");
+export default function getInitColorSchemeScript(params) {
+  return /*#__PURE__*/_jsx(InitColorSchemeScript, _extends({}, params));
 }

package/esm/cssVars/index.js

@@ -1,6 +1,7 @@
 'use client';
 
 export { default } from './createCssVarsProvider';
+// TODO: remove this export in v6 in favor of InitColorSchemeScript
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/esm/cssVars/useCurrentColorScheme.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.20
+ * @mui/system v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/DefaultPropsProvider/DefaultPropsProvider.js

@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import resolveProps from '@mui/utils/resolveProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var PropsContext = /*#__PURE__*/React.createContext(undefined);
+function DefaultPropsProvider(_ref) {
+  var value = _ref.value,
+    children = _ref.children;
+  return /*#__PURE__*/_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.node,
+  /**
+   * @ignore
+   */
+  value: PropTypes.object
+} : void 0;
+function getThemeProps(params) {
+  var theme = params.theme,
+    name = params.name,
+    props = params.props;
+  if (!theme || !theme.components || !theme.components[name]) {
+    return props;
+  }
+  var config = theme.components[name];
+  if (config.defaultProps) {
+    // compatible with v5 signature
+    return resolveProps(config.defaultProps, props);
+  }
+  if (!config.styleOverrides && !config.variants) {
+    // v6 signature, no property 'defaultProps'
+    return resolveProps(config, props);
+  }
+  return props;
+}
+export function useDefaultProps(_ref2) {
+  var props = _ref2.props,
+    name = _ref2.name;
+  var ctx = React.useContext(PropsContext);
+  return getThemeProps({
+    props: props,
+    name: name,
+    theme: {
+      components: ctx
+    }
+  });
+}
+export default DefaultPropsProvider;

package/legacy/DefaultPropsProvider/index.js

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

package/legacy/InitColorSchemeScript/InitColorSchemeScript.js

@@ -0,0 +1,35 @@
+/**
+ * Split this component for RSC import
+ */
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DEFAULT_MODE_STORAGE_KEY = 'mode';
+export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
+export default function InitColorSchemeScript(options) {
+  var _ref = options || {},
+    _ref$defaultMode = _ref.defaultMode,
+    defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
+    _ref$defaultLightColo = _ref.defaultLightColorScheme,
+    defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
+    _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
+    defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
+    _ref$modeStorageKey = _ref.modeStorageKey,
+    modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+    _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
+    colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
+    _ref$attribute = _ref.attribute,
+    attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+    _ref$colorSchemeNode = _ref.colorSchemeNode,
+    colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode,
+    nonce = _ref.nonce;
+  return /*#__PURE__*/_jsx("script", {
+    suppressHydrationWarning: true,
+    nonce: typeof window === 'undefined' ? nonce : ''
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: "(function() {\ntry {\n  var mode = localStorage.getItem('".concat(modeStorageKey, "') || '").concat(defaultMode, "';\n  var colorScheme = '';\n  if (mode === 'system') {\n    // handle system mode\n    var mql = window.matchMedia('(prefers-color-scheme: dark)');\n    if (mql.matches) {\n      colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n    } else {\n      colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n    }\n  }\n  if (mode === 'light') {\n    colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n  }\n  if (mode === 'dark') {\n    colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n  }\n  if (colorScheme) {\n    ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n  }\n} catch(e){}})();")
+    }
+  }, "mui-color-scheme-init");
+}

package/legacy/InitColorSchemeScript/index.js

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

package/legacy/ThemeProvider/ThemeProvider.js

@@ -9,6 +9,7 @@ import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import RtlProvider from '../RtlProvider';
+import DefaultPropsProvider from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 var EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme) {
@@ -58,7 +59,10 @@ function ThemeProvider(props) {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+          value: engineTheme == null ? void 0 : engineTheme.components,
+          children: children
+        })
       })
     })
   });

package/legacy/cssVars/createCssVarsProvider.js

@@ -10,7 +10,7 @@ import deepmerge from '@mui/utils/deepmerge';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import InitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -347,7 +347,7 @@ export default function createCssVarsProvider(options) {
   var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
   var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
-    return systemGetInitColorSchemeScript(_extends({
+    return InitColorSchemeScript(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
       defaultMode: designSystemMode,

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -1,28 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// TODO: remove this file in v6
 import * as React from 'react';
+import InitColorSchemeScript from '../InitColorSchemeScript';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DEFAULT_MODE_STORAGE_KEY = 'mode';
-export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
-export default function getInitColorSchemeScript(options) {
-  var _ref = options || {},
-    _ref$defaultMode = _ref.defaultMode,
-    defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
-    _ref$defaultLightColo = _ref.defaultLightColorScheme,
-    defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
-    _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
-    defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
-    _ref$modeStorageKey = _ref.modeStorageKey,
-    modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
-    _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-    colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
-    _ref$attribute = _ref.attribute,
-    attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
-    _ref$colorSchemeNode = _ref.colorSchemeNode,
-    colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
-  return /*#__PURE__*/_jsx("script", {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: "(function() {\ntry {\n  var mode = localStorage.getItem('".concat(modeStorageKey, "') || '").concat(defaultMode, "';\n  var colorScheme = '';\n  if (mode === 'system') {\n    // handle system mode\n    var mql = window.matchMedia('(prefers-color-scheme: dark)');\n    if (mql.matches) {\n      colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n    } else {\n      colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n    }\n  }\n  if (mode === 'light') {\n    colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n  }\n  if (mode === 'dark') {\n    colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n  }\n  if (colorScheme) {\n    ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n  }\n} catch(e){}})();")
-    }
-  }, "mui-color-scheme-init");
+export default function getInitColorSchemeScript(params) {
+  return /*#__PURE__*/_jsx(InitColorSchemeScript, _extends({}, params));
 }

package/legacy/cssVars/index.js

@@ -1,6 +1,7 @@
 'use client';
 
 export { default } from './createCssVarsProvider';
+// TODO: remove this export in v6 in favor of InitColorSchemeScript
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/legacy/cssVars/useCurrentColorScheme.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && mode === 'system') {
     var mql = window.matchMedia('(prefers-color-scheme: dark)');

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.20
+ * @mui/system v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/DefaultPropsProvider/DefaultPropsProvider.js

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import resolveProps from '@mui/utils/resolveProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PropsContext = /*#__PURE__*/React.createContext(undefined);
+function DefaultPropsProvider({
+  value,
+  children
+}) {
+  return /*#__PURE__*/_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.node,
+  /**
+   * @ignore
+   */
+  value: PropTypes.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 resolveProps(config.defaultProps, props);
+  }
+  if (!config.styleOverrides && !config.variants) {
+    // v6 signature, no property 'defaultProps'
+    return resolveProps(config, props);
+  }
+  return props;
+}
+export function useDefaultProps({
+  props,
+  name
+}) {
+  const ctx = React.useContext(PropsContext);
+  return getThemeProps({
+    props,
+    name,
+    theme: {
+      components: ctx
+    }
+  });
+}
+export default DefaultPropsProvider;

package/modern/DefaultPropsProvider/index.js

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

package/modern/InitColorSchemeScript/InitColorSchemeScript.js

@@ -0,0 +1,51 @@
+/**
+ * Split this component for RSC import
+ */
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_MODE_STORAGE_KEY = 'mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
+export default 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__*/_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/modern/InitColorSchemeScript/index.js

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

package/modern/ThemeProvider/ThemeProvider.js

@@ -8,6 +8,7 @@ import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import RtlProvider from '../RtlProvider';
+import DefaultPropsProvider from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
@@ -60,7 +61,10 @@ function ThemeProvider(props) {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+          value: engineTheme?.components,
+          children: children
+        })
       })
     })
   });

package/modern/cssVars/createCssVarsProvider.js

@@ -8,7 +8,7 @@ import deepmerge from '@mui/utils/deepmerge';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import InitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -330,7 +330,7 @@ export default function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+  const getInitColorSchemeScript = params => InitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/modern/cssVars/getInitColorSchemeScript.js

@@ -1,44 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// TODO: remove this file in v6
 import * as React from 'react';
+import InitColorSchemeScript from '../InitColorSchemeScript';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
-export default function getInitColorSchemeScript(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'
-  } = options || {};
-  return /*#__PURE__*/_jsx("script", {
-    // 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");
+export default function getInitColorSchemeScript(params) {
+  return /*#__PURE__*/_jsx(InitColorSchemeScript, _extends({}, params));
 }

package/modern/cssVars/index.js

@@ -1,6 +1,7 @@
 'use client';
 
 export { default } from './createCssVarsProvider';
+// TODO: remove this export in v6 in favor of InitColorSchemeScript
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/modern/cssVars/useCurrentColorScheme.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.20
+ * @mui/system v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.15.20",
+  "version": "5.16.1",
   "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.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^5.15.20",
-    "@mui/types": "^7.2.14",
-    "@mui/styled-engine": "^5.15.14",
-    "@mui/utils": "^5.15.20"
+    "@mui/private-theming": "^5.16.1",
+    "@mui/styled-engine": "^5.16.1",
+    "@mui/types": "^7.2.15",
+    "@mui/utils": "^5.16.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",