@mui/system 6.0.0-beta.5 → 6.0.0-beta.6

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.6
+
+<!-- generated comparing v6.0.0-beta.5..next -->
+
+_Aug 16, 2024_
+
+A big thanks to the 18 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.6`
+
+- [Autocomplete] Improve the `options` prop description (#41591) @pluvio72
+- [Autocomplete] Remove autocomplete warning regarding value not equal to option (#43314) @ZeeshanTamboli
+- [Divider] Add aria-orientation (#43241) @aarongarciah
+- [IconButton] Fix hover background color behavior (#43271) @mnajdova
+- [TypeScript] Refactor types so they're compatible with upcoming React 19 (#43276) @DiegoAndai
+- [Typography] Replace dot notation color value to work with Pigment CSS (#43288) @siriwatknp
+- [pigment-css] Fix `getSelector` prefers-color-scheme to be object (#43237) @siriwatknp
+- Remove `display="block"` usage to work with Pigment CSS (#43307) @siriwatknp
+
+### `@mui/codemod@6.0.0-beta.6`
+
+- [codemod] Skip sx spread transformation (#43291) @siriwatknp
+
+### `@mui/styles@6.0.0-beta.6`
+
+- [styles] Fix issues reported by eslint-plugin-react-compiler (#43118) @jlewins
+
+### Docs
+
+- [material-ui] Audit and copyedit the v6 migration doc (#43073) @samuelsycamore
+- [material-ui] Fix Material Icon search lag and other improvements (#41330) @anle9650
+- [material-ui][Popover] Fix description and title of hover interaction section (#43290) @ZeeshanTamboli
+- [material-ui] Refine and unify custom template themes (#43220) @zanivan
+- [joy-ui] Fix data grid redirection (#43247) @sai6855
+- [mui-system] Add import statement in docs (#43223) @sai6855
+- Update babel config (#43286) @romgrk
+- Fix outdated references to Materal UI version (#43321) @oliviertassinari
+- Polish migration git diff experience @oliviertassinari
+- Update LTS to match format (#43212) @oliviertassinari
+- Fix Pigment CSS migration content (#43217) @siriwatknp
+
+### Core
+
+- [code-infra] Remove `userEvent` export from `@mui/internal-test-utils` (#43313) @LukasTy
+- [code-infra] Remove unnecessary alias (#43320) @Janpot
+- [code-infra] Fix utils bundle size entrypoint (#43304) @Janpot
+- [core] missing and incorrect scripts (#43209) @Jay-Karia
+- [core] Set Node 14 as minimum version in all browserslist envs (#43326) @aarongarciah
+- [core] Add React 19 as peer dependency (#43216) @aarongarciah
+- [core] Pin `eslint-plugin-jsx-a11y` version to 6.7.1 (#43292) @Janpot
+- [core] Update supported Node.js version to 14 (#43315) @Janpot
+- [core] Use fs instead of fs-extra in script utils (#43234) @DiegoAndai
+- [core] Refactor system theme props (#43120) @romgrk
+- [docs-infra] Fix some TS issues for X docs (#43285) @Janpot
+- [docs-infra] Move API pages to TS (#43199) @alexfauquette
+- [docs-infra] Fix broken sandboxes with relative module imports (#42767) @bharatkashyap
+- [docs-infra] Simplify API sections typing (#43128) @alexfauquette
+- [examples] Fix import (#43316) @aarongarciah
+- [examples] Add material-ui-pigment-css for Next.js and Vite (#43065) @siriwatknp
+- [examples] Replace wrong import with `@mui/material/styles` (#43236) @siriwatknp
+- [useMediaQuery] Adapt test implementation for React 19 (#43269) @aarongarciah
+- [test] Update `matchMedia` mocks (#43240) @cherniavskii
+- [test] Remove unnecessary ref param (#43282) @aarongarciah
+- [website] Update showcase to include Toolpad Core (#43226) @bharatkashyap
+- [website] Replace React.MutableRefObject with React.RefObject (#43284) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @anle9650, @bharatkashyap, @cherniavskii, @DiegoAndai, @Janpot, @Jay-Karia, @jlewins, @mnajdova, @oliviertassinari, @pluvio72, @renovate[bot], @romgrk, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 6.0.0-beta.5
 
 <!-- generated comparing v6.0.0-beta.4..next -->
@@ -1842,6 +1910,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - [core] Fix TypeScript spelling in changelog @oliviertassinari
 - [core] Fix small detail in the autocomplete demo @oliviertassinari
 - [core] Increase node memory limit on Netlify build (#41111) @michaldudak
+- [core] Fix Netlify build cache issue (#43281) @LukasTy
 - [core][Tooltip] Remove incorrect code comment (#41179) @ZeeshanTamboli
 - [core] Fix missing context display names (#41168) @oliviertassinari
 - [core][base-ui] Remove `@mui/base` dev dependency from Base UI workspace (#41216) @ZeeshanTamboli

package/Grid/createGrid.js

@@ -119,7 +119,7 @@ export default function createGrid(options = {}) {
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: child.props.unstable_level ?? level + 1
+            unstable_level: child.props?.unstable_level ?? level + 1
           });
         }
         return child;

package/cssVars/prepareCssVars.js

@@ -49,7 +49,7 @@ function prepareCssVars(theme, parserConfig = {}) {
       vars
     };
   }
-  function defaultGetSelector(colorScheme) {
+  function defaultGetSelector(colorScheme, cssObject) {
     let rule = selector;
     if (selector === 'class') {
       rule = '.%s';
@@ -67,7 +67,11 @@ function prepareCssVars(theme, parserConfig = {}) {
           return ':root';
         }
         const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
-        return `@media (prefers-color-scheme: ${mode}) { :root`;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
       }
       if (rule) {
         if (theme.defaultColorScheme === colorScheme) {

package/index.js

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

package/modern/Grid/createGrid.js

@@ -119,7 +119,7 @@ export default function createGrid(options = {}) {
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: child.props.unstable_level ?? level + 1
+            unstable_level: child.props?.unstable_level ?? level + 1
           });
         }
         return child;

package/modern/cssVars/prepareCssVars.js

@@ -49,7 +49,7 @@ function prepareCssVars(theme, parserConfig = {}) {
       vars
     };
   }
-  function defaultGetSelector(colorScheme) {
+  function defaultGetSelector(colorScheme, cssObject) {
     let rule = selector;
     if (selector === 'class') {
       rule = '.%s';
@@ -67,7 +67,11 @@ function prepareCssVars(theme, parserConfig = {}) {
           return ':root';
         }
         const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
-        return `@media (prefers-color-scheme: ${mode}) { :root`;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
       }
       if (rule) {
         if (theme.defaultColorScheme === colorScheme) {

package/modern/index.js

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

package/modern/useThemeProps/useThemeProps.js

@@ -12,10 +12,9 @@ export default function useThemeProps({
   if (themeId) {
     theme = theme[themeId] || theme;
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
     name,
     props
   });
-  return mergedProps;
 }

package/modern/version/index.js

@@ -1,7 +1,7 @@
-export const version = "6.0.0-beta.5";
+export const version = "6.0.0-beta.6";
 export const major = Number("6");
 export const minor = Number("0");
 export const patch = Number("0");
 export const preReleaseLabel = "beta" || null;
-export const preReleaseNumber = Number("5") || null;
+export const preReleaseNumber = Number("6") || null;
 export default version;

package/node/Grid/createGrid.js

@@ -80,7 +80,6 @@ function createGrid(options = {}) {
   }
   const GridRoot = createStyledComponent(_gridGenerator.generateGridColumnsStyles, _gridGenerator.generateGridColumnSpacingStyles, _gridGenerator.generateGridRowSpacingStyles, _gridGenerator.generateGridSizeStyles, _gridGenerator.generateGridDirectionStyles, _gridGenerator.generateGridStyles, _gridGenerator.generateGridOffsetStyles);
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-    var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin;
     const theme = (0, _useTheme.default)();
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
@@ -102,10 +101,10 @@ function createGrid(options = {}) {
     } = props;
     const size = parseResponsiveProp(sizeProp, theme.breakpoints, val => val !== false);
     const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
-    const columns = (_inProps$columns = inProps.columns) != null ? _inProps$columns : level ? undefined : columnsProp;
-    const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
-    const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : level ? undefined : rowSpacingProp;
-    const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : level ? undefined : columnSpacingProp;
+    const columns = inProps.columns ?? (level ? undefined : columnsProp);
+    const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
+    const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
+    const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
     const ownerState = {
       ...props,
       level,
@@ -128,9 +127,8 @@ function createGrid(options = {}) {
       ...other,
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
-          var _unstable_level;
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: (_unstable_level = child.props.unstable_level) != null ? _unstable_level : level + 1
+            unstable_level: child.props?.unstable_level ?? level + 1
           });
         }
         return child;

package/node/Grid/gridGenerator.js

@@ -126,9 +126,8 @@ const generateGridRowSpacingStyles = ({
     [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
   } : {};
   (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
-    var _theme$spacing;
     appendStyle(styles, {
-      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;
@@ -148,9 +147,8 @@ const generateGridColumnSpacingStyles = ({
     [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
   } : {};
   (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
-    var _theme$spacing2;
     appendStyle(styles, {
-      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
     });
   });
   return styles;

package/node/RtlProvider/index.js

@@ -16,7 +16,7 @@ function RtlProvider({
   ...props
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
-    value: value != null ? value : true,
+    value: value ?? true,
     ...props
   });
 }
@@ -26,7 +26,7 @@ process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
 } : void 0;
 const useRtl = () => {
   const value = React.useContext(RtlContext);
-  return value != null ? value : false;
+  return value ?? false;
 };
 exports.useRtl = useRtl;
 var _default = exports.default = RtlProvider;

package/node/ThemeProvider/ThemeProvider.js

@@ -74,7 +74,7 @@ function ThemeProvider(props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
         value: rtlValue,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
-          value: engineTheme == null ? void 0 : engineTheme.components,
+          value: engineTheme?.components,
           children: children
         })
       })

package/node/breakpoints/breakpoints.js

@@ -109,8 +109,7 @@ function breakpoints(styleFunction) {
   return newStyleFunction;
 }
 function createEmptyBreakpointObject(breakpointsInput = {}) {
-  var _breakpointsInput$key;
-  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;

package/node/createStyled/createStyled.js

@@ -85,7 +85,7 @@ function processStyleArg(callableStyle, {
         isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
+          if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
             isMatch = false;
           }
         });
@@ -121,7 +121,7 @@ function createStyled(input = {}) {
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
-    (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
+    (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !style?.__mui_systemSx));
     const {
       name: componentName,
       slot: componentSlot,
@@ -208,13 +208,12 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          var _theme$components;
           const theme = resolveTheme({
             ...props,
             defaultTheme,
             themeId
           });
-          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+          const themeVariants = theme?.components?.[componentName]?.variants;
           return processStyleArg({
             variants: themeVariants
           }, {

package/node/createTheme/applyStyles.js

@@ -66,8 +66,7 @@ function applyStyles(key, styles) {
   // @ts-expect-error this is 'any' type
   const theme = this;
   if (theme.vars) {
-    var _theme$colorSchemes;
-    if (!((_theme$colorSchemes = theme.colorSchemes) != null && _theme$colorSchemes[key]) || typeof theme.getColorSchemeSelector !== 'function') {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
       return {};
     }
     // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'

package/node/createTheme/createTheme.js

@@ -43,7 +43,7 @@ function createTheme(options = {}, ...args) {
   muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = {
     ..._defaultSxConfig.default,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
+    ...other?.unstable_sxConfig
   };
   muiTheme.unstable_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({

package/node/cssContainerQueries/cssContainerQueries.js

@@ -20,9 +20,8 @@ function sortContainerQueries(theme, css) {
     return css;
   }
   const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    var _a$match, _b$match;
     const regex = /min-width:\s*([0-9.]+)/;
-    return +(((_a$match = a.match(regex)) == null ? void 0 : _a$match[1]) || 0) - +(((_b$match = b.match(regex)) == null ? void 0 : _b$match[1]) || 0);
+    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
   });
   if (!sorted.length) {
     return css;

package/node/cssVars/createCssVarsProvider.js

@@ -49,7 +49,6 @@ function createCssVarsProvider(options) {
   }
   const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
   function CssVarsProvider(props) {
-    var _colorSchemes$restThe, _restThemeProp$palett, _restThemeProp$genera, _theme$generateStyleS;
     const {
       children,
       theme: themeProp,
@@ -83,7 +82,7 @@ function createCssVarsProvider(options) {
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : ((_colorSchemes$restThe = colorSchemes[restThemeProp.defaultColorScheme]) == null || (_colorSchemes$restThe = _colorSchemes$restThe.palette) == null ? void 0 : _colorSchemes$restThe.mode) || ((_restThemeProp$palett = restThemeProp.palette) == null ? void 0 : _restThemeProp$palett.mode);
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
@@ -114,7 +113,7 @@ function createCssVarsProvider(options) {
     const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
 
     // 2. get the `vars` object that refers to the CSS custom properties
-    const themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
+    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
     // 3. Start composing the theme object
     const theme = {
@@ -160,7 +159,7 @@ function createCssVarsProvider(options) {
         if (selector === 'data') {
           rule = `[data-%s]`;
         }
-        if (selector != null && selector.startsWith('data-') && !selector.includes('%s')) {
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
           // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
           rule = `[${selector}="%s"]`;
         }
@@ -222,12 +221,12 @@ function createCssVarsProvider(options) {
       systemMode
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
     }
     const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-        children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
           styles: styles
         }, index))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {

package/node/cssVars/prepareCssVars.js

@@ -56,7 +56,7 @@ function prepareCssVars(theme, parserConfig = {}) {
       vars
     };
   }
-  function defaultGetSelector(colorScheme) {
+  function defaultGetSelector(colorScheme, cssObject) {
     let rule = selector;
     if (selector === 'class') {
       rule = '.%s';
@@ -64,18 +64,21 @@ function prepareCssVars(theme, parserConfig = {}) {
     if (selector === 'data') {
       rule = '[data-%s]';
     }
-    if (selector != null && selector.startsWith('data-') && !selector.includes('%s')) {
+    if (selector?.startsWith('data-') && !selector.includes('%s')) {
       // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
       rule = `[${selector}="%s"]`;
     }
     if (colorScheme) {
       if (rule === 'media') {
-        var _colorSchemes;
         if (theme.defaultColorScheme === colorScheme) {
           return ':root';
         }
-        const mode = ((_colorSchemes = colorSchemes[colorScheme]) == null || (_colorSchemes = _colorSchemes.palette) == null ? void 0 : _colorSchemes.mode) || colorScheme;
-        return `@media (prefers-color-scheme: ${mode}) { :root`;
+        const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
       }
       if (rule) {
         if (theme.defaultColorScheme === colorScheme) {
@@ -117,12 +120,11 @@ function prepareCssVars(theme, parserConfig = {}) {
       ...other
     } = colorSchemesMap;
     if (defaultSchemeVal) {
-      var _colorSchemes$colorSc;
       // default color scheme has to come before other color schemes
       const {
         css
       } = defaultSchemeVal;
-      const cssColorSheme = (_colorSchemes$colorSc = colorSchemes[colorScheme]) == null || (_colorSchemes$colorSc = _colorSchemes$colorSc.palette) == null ? void 0 : _colorSchemes$colorSc.mode;
+      const cssColorSheme = colorSchemes[colorScheme]?.palette?.mode;
       const finalCss = !disableCssColorScheme && cssColorSheme ? {
         colorScheme: cssColorSheme,
         ...css
@@ -136,8 +138,7 @@ function prepareCssVars(theme, parserConfig = {}) {
     Object.entries(other).forEach(([key, {
       css
     }]) => {
-      var _colorSchemes$key;
-      const cssColorSheme = (_colorSchemes$key = colorSchemes[key]) == null || (_colorSchemes$key = _colorSchemes$key.palette) == null ? void 0 : _colorSchemes$key.mode;
+      const cssColorSheme = colorSchemes[key]?.palette?.mode;
       const finalCss = !disableCssColorScheme && cssColorSheme ? {
         colorScheme: cssColorSheme,
         ...css

package/node/cssVars/useCurrentColorScheme.js

@@ -96,7 +96,7 @@ function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = mode != null ? mode : defaultMode;
+      const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -186,7 +186,7 @@ function useCurrentColorScheme(options) {
   const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
       setState(currentState => {
-        const systemMode = event != null && event.matches ? 'dark' : 'light';
+        const systemMode = event?.matches ? 'dark' : 'light';
 
         // Early exit, nothing changed.
         if (currentState.systemMode === systemMode) {

package/node/index.js

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

package/node/sizing/sizing.js

@@ -20,14 +20,13 @@ const width = exports.width = (0, _style.default)({
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
-      var _props$theme, _props$theme2;
-      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || _breakpoints.values[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || _breakpoints.values[propValue];
       if (!breakpoint) {
         return {
           maxWidth: sizingTransform(propValue)
         };
       }
-      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+      if (props.theme?.breakpoints?.unit !== 'px') {
         return {
           maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
         };

package/node/spacing/spacing.js

@@ -58,8 +58,7 @@ const marginKeys = exports.marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'
 const paddingKeys = exports.paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var _getPath;
-  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey, true)) != null ? _getPath : defaultValue;
+  const themeSpacing = (0, _style.getPath)(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
     return val => {
       if (typeof val === 'string') {

package/node/styleFunctionSx/extendSxProp.js

@@ -8,12 +8,11 @@ exports.default = extendSxProp;
 var _deepmerge = require("@mui/utils/deepmerge");
 var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 const splitProps = props => {
-  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : _defaultSxConfig.default;
+  const config = props?.theme?.unstable_sxConfig ?? _defaultSxConfig.default;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];

package/node/styleFunctionSx/styleFunctionSx.js

@@ -70,7 +70,6 @@ function unstable_createStyleFunctionSx() {
     return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
-    var _theme$unstable_sxCon;
     const {
       sx,
       theme = {}
@@ -78,7 +77,7 @@ function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : _defaultSxConfig.default;
+    const config = theme.unstable_sxConfig ?? _defaultSxConfig.default;
 
     /*
      * Receive `sxInput` as object or callback

package/node/useThemeProps/useThemeProps.js

@@ -18,10 +18,9 @@ function useThemeProps({
   if (themeId) {
     theme = theme[themeId] || theme;
   }
-  const mergedProps = (0, _getThemeProps.default)({
+  return (0, _getThemeProps.default)({
     theme,
     name,
     props
   });
-  return mergedProps;
 }

package/node/version/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.0.0-beta.5";
+const version = exports.version = "6.0.0-beta.6";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("0");
 const patch = exports.patch = Number("0");
 const preReleaseLabel = exports.preReleaseLabel = "beta" || null;
-const preReleaseNumber = exports.preReleaseNumber = Number("5") || null;
+const preReleaseNumber = exports.preReleaseNumber = Number("6") || null;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-beta.5",
+  "version": "6.0.0-beta.6",
   "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,16 +30,16 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "6.0.0-beta.5",
-    "@mui/utils": "6.0.0-beta.5",
-    "@mui/styled-engine": "6.0.0-beta.5",
-    "@mui/types": "^7.2.14"
+    "@mui/private-theming": "6.0.0-beta.6",
+    "@mui/types": "^7.2.15",
+    "@mui/styled-engine": "6.0.0-beta.6",
+    "@mui/utils": "6.0.0-beta.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/useThemeProps/useThemeProps.js

@@ -12,10 +12,9 @@ export default function useThemeProps({
   if (themeId) {
     theme = theme[themeId] || theme;
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
     name,
     props
   });
-  return mergedProps;
 }

package/version/index.js

@@ -1,7 +1,7 @@
-export const version = "6.0.0-beta.5";
+export const version = "6.0.0-beta.6";
 export const major = Number("6");
 export const minor = Number("0");
 export const patch = Number("0");
 export const preReleaseLabel = "beta" || null;
-export const preReleaseNumber = Number("5") || null;
+export const preReleaseNumber = Number("6") || null;
 export default version;