@mui/system 6.0.0-alpha.11 → 6.0.0-alpha.13

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.13
+
+<!-- generated comparing v6.0.0-alpha.12..next -->
+
+_Jun 27, 2024_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added layout components for Pigment CSS integration (#42693) @siriwatknp
+
+### `@mui/material@6.0.0-alpha.13`
+
+- [Autocomplete] Fix more React 18.3 key spread warnings in demos (#42639) @wbt
+- [Container][Grid][Stack][Hidden] Export Pigment CSS layout components (#42693) @siriwatknp
+- [Text Field] when click password visibility button, text caret position change to very front. (#42595) @appleSimple
+- [Modal] migrate useSlotProps to useSLot (#42150) @sai6855
+
+### `@mui/styles@6.0.0-alpha.13`
+
+- [withStyles] Expect React defaultProps warning in test (#42752) @aarongarciah
+
+### Docs
+
+- Fix link in CONTRIBUTING.md (#42755) @Janpot
+- Add documentation on migrating JSS's alternative, array-based syntax to syntax supported by Emotion (#42053) @cjl750
+- Fix type error in virtualized table demo (#42757) @aarongarciah
+- Add first batch of v6 migration (#42242) @siriwatknp
+- Fix quotes on font-family dedeclaration in the Landing Page template theme (#42748) @joetats
+
+### Core
+
+- [code-infra] Refactor eslint `import/no-cycle` rule (#42705) @LukasTy
+- [core] Target direct version for prerelease (#42768) @siriwatknp
+- [test] Remove enzyme (#42706) @aarongarciah
+- [test] Remove createMount test util (#42703) @aarongarciah
+- [website] Add Ale to team (#42764) @alelthomas
+
+All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @appleSimple, @cjl750, @Janpot, @joetats, @LukasTy, @sai6855, @siriwatknp, @wbt
+
+## v6.0.0-alpha.12
+
+<!-- generated comparing v6.0.0-alpha.11..next -->
+
+_Jun 24, 2024_
+
+A big thanks to the 17 contributors who made this release possible.
+
+### `@mui/material@6.0.0-alpha.12`
+
+- Add `InitColorSchemeScript` for Next.js App Router (#42247) @siriwatknp
+- [Autocomplete] Fix renderOption props type (#42689) @DiegoAndai
+- [Autocomplete] Fix React 18.3 key spread warnings in Autocomplete demos (#42691) @aarongarciah
+- Support Pigment CSS for `CssBaseline`, `ScopedCssBaseline` and `Popper` (#42640) @siriwatknp
+- Add `DefaultPropsProvider` for Pigment CSS integration (#42638) @siriwatknp
+- [Stepper] Generate class for nonLinear prop (#42620) @alexismo
+- [Tab] Fix failing test (#42686) @aarongarciah
+- [Tab] Deprecate iconWrapper class for icon class (#42647) @sai6855
+- [TableSortLabel] Deprecate composed classes (#42281) @sai6855
+- [usePagination] Update pagination `siblingsEnd` calculation logic (#42667) @Mini-ghost
+
+### `@mui/codemod@6.0.0-alpha.12`
+
+- Support dynamic props styled transformation (#42683) @siriwatknp
+
+### `@mui/system@6.0.0-alpha.12`
+
+- Fix issues reported by react compiler in `mui-system` package (#42637) @sai6855
+- [useMediaQuery] Remove deprecated types (#42560) @aarongarciah
+
+### `@mui/joy@5.0.0-beta.45`
+
+- Fix issues reported by the React Compiler (#42671) @anuujj
+- [Autocomplete] Fix React spread key warning (#42741) @aarongarciah
+
+### `@mui/lab@6.0.0-alpha.12`
+
+- [LoadingButton] Apply wrapping element to prevent React crash on Google page translation (#35198) @BartJanvanAssen
+
+### Docs
+
+- Fix git diff format in migration to v6 (#42711) @oliviertassinari
+- Use new email for sponsoring @oliviertassinari
+- Fix 301 links (#42697) @alexfauquette
+- Normalize the capitalization of Design Kit @oliviertassinari
+- Recommend setting HTML attribute instead of DOM property for RTL (#42599) @aarongarciah
+- [material-ui][Select] Fix the `SelectAutoWidth` demo menu item value (#42648) @Danielkhakbaz
+
+### Core
+
+- [code-infra] Try disabling animations when taking screenshots (#42537) @Janpot
+- [code-infra] Fix benchmark package (#42553) @Janpot
+- [core] Replace enzyme in describeConformance (#42447) @DiegoAndai
+- [docs-infra] Fix layout shift demo toolbar (#42743) @oliviertassinari
+- [docs-infra] Fix visual look of in-house ad (#42735) @oliviertassinari
+- [docs-infra] Add stray design polish (#42646) @danilo-leal
+- [docs-infra] Fix wrong migration (#42675) @siriwatknp
+- [docs-infra] Fine tune markdown elements design (#42643) @danilo-leal
+- [docs-infra] Revamp the product switcher design (#42603) @danilo-leal
+- [docs-infra] Allow Link component to receive the `role` attribute (#42629) @danilo-leal
+- [infra] Add support donation button (#42499) @oliviertassinari
+- [infra] Raise `tsconfig`/`tsc` target to `es2022` (#42645) @LukasTy
+- [test] Fix tests on CI (#42670) @michaldudak
+- [test] Fix issues reported by react-compiler in test packages (#42626) @sai6855
+- [website] Add Armin to the team members (#42679) @arminmeh
+- [website] Open Staff Engineer role for Pigment CSS (#42531) @mnajdova
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @alexismo, @anuujj, @arminmeh, @BartJanvanAssen, @Danielkhakbaz, @danilo-leal, @DiegoAndai, @Janpot, @LukasTy, @michaldudak, @Mini-ghost, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp
+
 ## v6.0.0-alpha.11
 
 <!-- generated comparing v6.0.0-alpha.10..next -->

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,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/DefaultPropsProvider/index.d.ts

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

package/DefaultPropsProvider/index.js

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

package/DefaultPropsProvider/package.json

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

package/{cssVars/getInitColorSchemeScript.d.ts → InitColorSchemeScript/InitColorSchemeScript.d.ts}

@@ -1,8 +1,11 @@
+/**
+ * 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 GetInitColorSchemeScriptOptions {
+export interface InitColorSchemeScriptProps {
     /**
      * The mode to be used for the first visit
      * @default 'light'
@@ -38,5 +41,9 @@ export interface GetInitColorSchemeScriptOptions {
      * @default 'data-color-scheme'
      */
     attribute?: string;
+    /**
+     * Nonce string to pass to the inline script for CSP headers
+     */
+    nonce?: string | undefined;
 }
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): React.JSX.Element;
+export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;

package/{cssVars/getInitColorSchemeScript.js → InitColorSchemeScript/InitColorSchemeScript.js}

@@ -1,9 +1,12 @@
+/**
+ * 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 getInitColorSchemeScript(options) {
+export default function InitColorSchemeScript(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
@@ -11,10 +14,14 @@ export default function getInitColorSchemeScript(options) {
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
-    colorSchemeNode = 'document.documentElement'
+    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 {

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 @@
+export { default } from './InitColorSchemeScript';

package/InitColorSchemeScript/package.json

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

package/ThemeProvider/ThemeProvider.js

@@ -7,6 +7,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) {
@@ -64,7 +65,10 @@ function ThemeProvider(props) {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+          value: engineTheme?.components,
+          children: children
+        })
       })
     })
   });

package/Unstable_Grid/gridGenerator.d.ts

@@ -11,12 +11,7 @@ interface Props {
 }
 export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
 export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-    '--Grid-columns'?: undefined;
-} | {
-    '--Grid-columns': number;
-};
+export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => Record<string, string | number | undefined>;
 export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
     [x: string]: string;
 };

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<any>;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  getInitColorSchemeScript: typeof getInitColorSchemeScript;
+  getInitColorSchemeScript: typeof InitColorSchemeScript;
 }
 
 export default function createCssVarsProvider<

package/cssVars/createCssVarsProvider.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 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, jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -299,7 +299,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({
+  const getInitColorSchemeScript = params => InitColorSchemeScript({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/cssVars/index.d.ts

@@ -1,6 +1,5 @@
 export { default } from './createCssVarsProvider';
 export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as prepareTypographyVars } from './prepareTypographyVars';
 export type { ExtractTypographyTokens } from './prepareTypographyVars';

package/cssVars/index.js

@@ -1,7 +1,6 @@
 'use client';
 
 export { default } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as prepareTypographyVars } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/cssVars/useCurrentColorScheme.js

@@ -1,7 +1,7 @@
 'use client';
 
 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 v6.0.0-alpha.11
+ * @mui/system v6.0.0-alpha.13
  *
  * @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/{cssVars/getInitColorSchemeScript.js → InitColorSchemeScript/InitColorSchemeScript.js}

@@ -1,9 +1,12 @@
+/**
+ * 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 getInitColorSchemeScript(options) {
+export default function InitColorSchemeScript(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
@@ -11,10 +14,14 @@ export default function getInitColorSchemeScript(options) {
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
-    colorSchemeNode = 'document.documentElement'
+    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 {

package/modern/InitColorSchemeScript/index.js

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

package/modern/ThemeProvider/ThemeProvider.js

@@ -7,6 +7,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) {
@@ -64,7 +65,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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 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, jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -299,7 +299,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({
+  const getInitColorSchemeScript = params => InitColorSchemeScript({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/modern/cssVars/index.js

@@ -1,7 +1,6 @@
 'use client';
 
 export { default } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as prepareTypographyVars } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

package/modern/cssVars/useCurrentColorScheme.js

@@ -1,7 +1,7 @@
 'use client';
 
 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 v6.0.0-alpha.11
+ * @mui/system v6.0.0-alpha.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useMediaQuery/useMediaQuery.js

@@ -4,19 +4,6 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getThemeProps } from '../useThemeProps';
 import useTheme from '../useThemeWithoutDefault';
-
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {

package/node/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 && {}.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/node/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 && {}.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/node/{cssVars/getInitColorSchemeScript.js → InitColorSchemeScript/InitColorSchemeScript.js}

@@ -4,15 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
-exports.default = getInitColorSchemeScript;
+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 && {}.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 getInitColorSchemeScript(options) {
+function InitColorSchemeScript(options) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
@@ -20,10 +24,14 @@ function getInitColorSchemeScript(options) {
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
-    colorSchemeNode = 'document.documentElement'
+    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 {

package/node/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/node/ThemeProvider/ThemeProvider.js

@@ -13,6 +13,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 && {}.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; }
@@ -72,7 +73,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/node/cssVars/createCssVarsProvider.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 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");
 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); }
@@ -28,9 +28,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,
@@ -310,7 +310,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)({
+  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,

package/node/cssVars/index.js

@@ -17,12 +17,6 @@ Object.defineProperty(exports, "default", {
     return _createCssVarsProvider.default;
   }
 });
-Object.defineProperty(exports, "getInitColorSchemeScript", {
-  enumerable: true,
-  get: function () {
-    return _getInitColorSchemeScript.default;
-  }
-});
 Object.defineProperty(exports, "prepareCssVars", {
   enumerable: true,
   get: function () {
@@ -36,7 +30,6 @@ Object.defineProperty(exports, "prepareTypographyVars", {
   }
 });
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
-var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
 var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
 var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));

package/node/cssVars/useCurrentColorScheme.js

@@ -8,7 +8,7 @@ exports.default = useCurrentColorScheme;
 exports.getColorScheme = getColorScheme;
 exports.getSystemMode = getSystemMode;
 var React = _interopRequireWildcard(require("react"));
-var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
 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 && {}.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; }
 function getSystemMode(mode) {
@@ -63,8 +63,8 @@ function useCurrentColorScheme(options) {
     defaultLightColorScheme,
     defaultDarkColorScheme,
     supportedColorSchemes = [],
-    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.11
+ * @mui/system v6.0.0-alpha.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/useMediaQuery/useMediaQuery.js

@@ -12,18 +12,6 @@ var _useThemeProps = require("../useThemeProps");
 var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
 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 && {}.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; }
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.13",
   "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.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.0.0-alpha.11",
-    "@mui/styled-engine": "^6.0.0-alpha.11",
-    "@mui/utils": "^6.0.0-alpha.11",
-    "@mui/types": "^7.2.14"
+    "@mui/private-theming": "6.0.0-alpha.13",
+    "@mui/styled-engine": "6.0.0-alpha.13",
+    "@mui/types": "^7.2.14",
+    "@mui/utils": "6.0.0-alpha.13"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/useMediaQuery/useMediaQuery.d.ts

@@ -1,21 +1,3 @@
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryListEvent {
-    matches: boolean;
-}
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryList {
-    matches: boolean;
-    addListener: (listener: MuiMediaQueryListListener) => void;
-    removeListener: (listener: MuiMediaQueryListListener) => void;
-}
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-export type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;
 export interface UseMediaQueryOptions {
     /**
      * As `window.matchMedia()` is unavailable on the server,

package/useMediaQuery/useMediaQuery.js

@@ -4,19 +4,6 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getThemeProps } from '../useThemeProps';
 import useTheme from '../useThemeWithoutDefault';
-
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {