@mui/system 9.0.0-alpha.3 → 9.0.0-beta.0

package/breakpoints/breakpoints.mjs

@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types';
+import isObjectEmpty from '@mui/utils/isObjectEmpty';
+import fastDeepAssign from '@mui/utils/fastDeepAssign';
 import deepmerge from '@mui/utils/deepmerge';
 import merge from "../merge/index.mjs";
 import { isCqShorthand, getContainerQuery } from "../cssContainerQueries/index.mjs";
+import createBreakpoints from "../createBreakpoints/createBreakpoints.mjs";
+const EMPTY_THEME = {};
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
@@ -16,12 +20,9 @@ export const values = {
   // desktop
   xl: 1536 // large screen
 };
-const defaultBreakpoints = {
-  // Sorted ASC by size. That's important.
-  // It can't be configured as it's used statically for propTypes.
-  keys: ['xs', 'sm', 'md', 'lg', 'xl'],
-  up: key => `@media (min-width:${values[key]}px)`
-};
+export const DEFAULT_BREAKPOINTS = createBreakpoints({
+  values
+});
 const defaultContainerQueries = {
   containerQueries: containerName => ({
     up: key => {
@@ -34,44 +35,59 @@ const defaultContainerQueries = {
   })
 };
 export function handleBreakpoints(props, propValue, styleFromPropValue) {
-  const theme = props.theme || {};
+  const result = {};
+  return iterateBreakpoints(result, props.theme, propValue, (mediaKey, value, initialKey) => {
+    const finalValue = styleFromPropValue(value, initialKey);
+    if (mediaKey) {
+      result[mediaKey] = finalValue;
+    } else {
+      fastDeepAssign(result, finalValue);
+    }
+  });
+}
+export function iterateBreakpoints(target, theme, propValue, callback) {
+  theme ??= EMPTY_THEME;
   if (Array.isArray(propValue)) {
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-    return propValue.reduce((acc, item, index) => {
-      acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
-      return acc;
-    }, {});
+    const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+    for (let i = 0; i < propValue.length; i += 1) {
+      buildBreakpoint(target, breakpoints.up(breakpoints.keys[i]), propValue[i], undefined, callback);
+    }
+    return target;
   }
   if (typeof propValue === 'object') {
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-    return Object.keys(propValue).reduce((acc, breakpoint) => {
-      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
-        const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
+    const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+    const breakpointValues = breakpoints.values ?? values;
+    for (const key in propValue) {
+      if (isCqShorthand(breakpoints.keys, key)) {
+        const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, key);
         if (containerKey) {
-          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+          buildBreakpoint(target, containerKey, propValue[key], key, callback);
         }
       }
-      // key is breakpoint
-      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
-        const mediaKey = themeBreakpoints.up(breakpoint);
-        acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+      // key is key
+      else if (key in breakpointValues) {
+        const mediaKey = breakpoints.up(key);
+        buildBreakpoint(target, mediaKey, propValue[key], key, callback);
       } else {
-        const cssKey = breakpoint;
-        acc[cssKey] = propValue[cssKey];
+        const cssKey = key;
+        target[cssKey] = propValue[cssKey];
       }
-      return acc;
-    }, {});
+    }
+    return target;
   }
-  const output = styleFromPropValue(propValue);
-  return output;
+  callback(undefined, propValue);
+  return target;
+}
+function buildBreakpoint(target, mediaKey, value, initialKey, callback) {
+  target[mediaKey] ??= {};
+  callback(mediaKey, value, initialKey);
 }
-function breakpoints(styleFunction) {
-  // false positive
+function setupBreakpoints(styleFunction) {
   // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
     const theme = props.theme || {};
     const base = styleFunction(props);
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
+    const themeBreakpoints = theme.breakpoints || DEFAULT_BREAKPOINTS;
     const extended = themeBreakpoints.keys.reduce((acc, key) => {
       if (props[key]) {
         acc = acc || {};
@@ -95,28 +111,30 @@ function breakpoints(styleFunction) {
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
   return newStyleFunction;
 }
-export function createEmptyBreakpointObject(breakpointsInput = {}) {
-  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
-    const breakpointStyleKey = breakpointsInput.up(key);
-    acc[breakpointStyleKey] = {};
-    return acc;
-  }, {});
-  return breakpointsInOrder || {};
+export function createEmptyBreakpointObject(breakpoints = DEFAULT_BREAKPOINTS) {
+  const {
+    internal_mediaKeys: mediaKeys
+  } = breakpoints;
+  const result = {};
+  for (let i = 0; i < mediaKeys.length; i += 1) {
+    result[mediaKeys[i]] = {};
+  }
+  return result;
 }
-export function removeUnusedBreakpoints(breakpointKeys, style) {
-  return breakpointKeys.reduce((acc, key) => {
-    const breakpointOutput = acc[key];
-    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-    if (isBreakpointUnused) {
-      delete acc[key];
+export function removeUnusedBreakpoints(breakpoints, style) {
+  const breakpointKeys = breakpoints.internal_mediaKeys;
+  for (let i = 0; i < breakpointKeys.length; i += 1) {
+    const key = breakpointKeys[i];
+    if (isObjectEmpty(style[key])) {
+      delete style[key];
     }
-    return acc;
-  }, style);
+  }
+  return style;
 }
-export function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
-  const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
+export function mergeBreakpointsInOrder(breakpoints, ...styles) {
+  const emptyBreakpoints = createEmptyBreakpointObject(breakpoints);
   const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
-  return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
+  return removeUnusedBreakpoints(breakpoints, mergedOutput);
 }
 
 // compute base for responsive values; e.g.,
@@ -168,4 +186,23 @@ export function resolveBreakpointValues({
     return acc;
   }, {});
 }
-export default breakpoints;
+export function hasBreakpoint(breakpoints, value) {
+  if (Array.isArray(value)) {
+    return true;
+  }
+  if (typeof value === 'object' && value !== null) {
+    for (let i = 0; i < breakpoints.keys.length; i += 1) {
+      if (breakpoints.keys[i] in value) {
+        return true;
+      }
+    }
+    const valueKeys = Object.keys(value);
+    for (let i = 0; i < valueKeys.length; i += 1) {
+      if (isCqShorthand(breakpoints.keys, valueKeys[i])) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+export default setupBreakpoints;

package/compose/compose.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _merge = _interopRequireDefault(require("../merge"));
+var _fastDeepAssign = _interopRequireDefault(require("@mui/utils/fastDeepAssign"));
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {
@@ -14,15 +14,15 @@ function compose(...styles) {
     return acc;
   }, {});
 
-  // false positive
   // eslint-disable-next-line react/function-component-definition
   const fn = props => {
-    return Object.keys(props).reduce((acc, prop) => {
+    const result = {};
+    for (const prop in props) {
       if (handlers[prop]) {
-        return (0, _merge.default)(acc, handlers[prop](props));
+        (0, _fastDeepAssign.default)(result, handlers[prop](props));
       }
-      return acc;
-    }, {});
+    }
+    return result;
   };
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);

package/compose/compose.mjs

@@ -1,4 +1,4 @@
-import merge from "../merge/index.mjs";
+import fastDeepAssign from '@mui/utils/fastDeepAssign';
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {
@@ -7,15 +7,15 @@ function compose(...styles) {
     return acc;
   }, {});
 
-  // false positive
   // eslint-disable-next-line react/function-component-definition
   const fn = props => {
-    return Object.keys(props).reduce((acc, prop) => {
+    const result = {};
+    for (const prop in props) {
       if (handlers[prop]) {
-        return merge(acc, handlers[prop](props));
+        fastDeepAssign(result, handlers[prop](props));
       }
-      return acc;
-    }, {});
+    }
+    return result;
   };
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);

package/createBox/createBox.js

@@ -10,7 +10,7 @@ exports.default = createBox;
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styledEngine = _interopRequireDefault(require("@mui/styled-engine"));
-var _styleFunctionSx = _interopRequireWildcard(require("../styleFunctionSx"));
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function createBox(options = {}) {
@@ -29,7 +29,7 @@ function createBox(options = {}) {
       className,
       component = 'div',
       ...other
-    } = (0, _styleFunctionSx.extendSxProp)(inProps);
+    } = inProps;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, {
       as: component,
       ref: ref,

package/createBox/createBox.mjs

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.mjs";
+import styleFunctionSx from "../styleFunctionSx/index.mjs";
 import useTheme from "../useTheme/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
@@ -22,7 +22,7 @@ export default function createBox(options = {}) {
       className,
       component = 'div',
       ...other
-    } = extendSxProp(inProps);
+    } = inProps;
     return /*#__PURE__*/_jsx(BoxRoot, {
       as: component,
       ref: ref,

package/createBreakpoints/createBreakpoints.d.mts

@@ -61,6 +61,11 @@ export interface Breakpoints {
    * @default 'px'
    */
   unit?: string | undefined;
+  /**
+   * Media query keys
+   * @ignore - Do not document.
+   */
+  internal_mediaKeys: string[];
 }
 export interface BreakpointsOptions extends Partial<Breakpoints> {
   /**

package/createBreakpoints/createBreakpoints.d.ts

@@ -61,6 +61,11 @@ export interface Breakpoints {
    * @default 'px'
    */
   unit?: string | undefined;
+  /**
+   * Media query keys
+   * @ignore - Do not document.
+   */
+  internal_mediaKeys: string[];
 }
 export interface BreakpointsOptions extends Partial<Breakpoints> {
   /**

package/createBreakpoints/createBreakpoints.js

@@ -74,6 +74,10 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
+  const mediaKeys = [];
+  for (let i = 0; i < keys.length; i += 1) {
+    mediaKeys.push(up(keys[i]));
+  }
   return {
     keys,
     values: sortedValues,
@@ -83,6 +87,7 @@ function createBreakpoints(breakpoints) {
     only,
     not,
     unit,
+    internal_mediaKeys: mediaKeys,
     ...other
   };
 }

package/createBreakpoints/createBreakpoints.mjs

@@ -67,6 +67,10 @@ export default function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
+  const mediaKeys = [];
+  for (let i = 0; i < keys.length; i += 1) {
+    mediaKeys.push(up(keys[i]));
+  }
   return {
     keys,
     values: sortedValues,
@@ -76,6 +80,7 @@ export default function createBreakpoints(breakpoints) {
     only,
     not,
     unit,
+    internal_mediaKeys: mediaKeys,
     ...other
   };
 }

package/createStyled/createStyled.js

@@ -9,6 +9,7 @@ exports.default = createStyled;
 exports.shouldForwardProp = shouldForwardProp;
 exports.systemDefaultTheme = void 0;
 var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
+var _isObjectEmpty = _interopRequireDefault(require("@mui/utils/isObjectEmpty"));
 var _deepmerge = require("@mui/utils/deepmerge");
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
@@ -39,7 +40,7 @@ function defaultOverridesResolver(slot) {
   return (_props, styles) => styles[slot];
 }
 function attachTheme(props, themeId, defaultTheme) {
-  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
+  props.theme = (0, _isObjectEmpty.default)(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
 }
 function processStyle(props, style, layerName) {
   /*
@@ -274,13 +275,6 @@ function generateStyledLabel(componentName, componentSlot) {
   }
   return label;
 }
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
 
 // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
 function isStringTag(tag) {

package/createStyled/createStyled.mjs

@@ -1,4 +1,5 @@
 import styledEngineStyled, { internal_mutateStyles as mutateStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
+import isObjectEmpty from '@mui/utils/isObjectEmpty';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -265,13 +266,6 @@ function generateStyledLabel(componentName, componentSlot) {
   }
   return label;
 }
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
 
 // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
 function isStringTag(tag) {

package/createTheme/createTheme.js

@@ -51,6 +51,7 @@ function createTheme(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.internal_cache = {};
   return muiTheme;
 }
 var _default = exports.default = createTheme;

package/createTheme/createTheme.mjs

@@ -44,6 +44,7 @@ function createTheme(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.internal_cache = {};
   return muiTheme;
 }
 export default createTheme;

package/cssContainerQueries/cssContainerQueries.d.mts

@@ -10,6 +10,7 @@ export interface CssContainerQueries {
   containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
 }
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }

package/cssContainerQueries/cssContainerQueries.d.ts

@@ -10,6 +10,7 @@ export interface CssContainerQueries {
   containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
 }
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }

package/cssContainerQueries/cssContainerQueries.js

@@ -7,31 +7,44 @@ exports.default = cssContainerQueries;
 exports.getContainerQuery = getContainerQuery;
 exports.isCqShorthand = isCqShorthand;
 exports.sortContainerQueries = sortContainerQueries;
+const MIN_WIDTH_PATTERN = /min-width:\s*([0-9.]+)/;
+
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
  *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 even though 40rem > 300px
  */
 function sortContainerQueries(theme, css) {
-  if (!theme.containerQueries) {
+  if (!theme.containerQueries || !hasContainerQuery(css)) {
     return css;
   }
-  const regex = /min-width:\s*([0-9.]+)/;
-  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css;
+  const keys = [];
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      keys.push(key);
+    }
   }
-  return sorted.reduce((acc, key) => {
-    const value = css[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css
+  keys.sort((a, b) => {
+    return +(a.match(MIN_WIDTH_PATTERN)?.[1] || 0) - +(b.match(MIN_WIDTH_PATTERN)?.[1] || 0);
   });
+  const result = css;
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    const value = result[key];
+    delete result[key];
+    result[key] = value;
+  }
+  return result;
+}
+function hasContainerQuery(css) {
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      return true;
+    }
+  }
+  return false;
 }
 function isCqShorthand(breakpointKeys, value) {
   return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));

package/cssContainerQueries/cssContainerQueries.mjs

@@ -1,28 +1,41 @@
+const MIN_WIDTH_PATTERN = /min-width:\s*([0-9.]+)/;
+
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
  *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 even though 40rem > 300px
  */
 export function sortContainerQueries(theme, css) {
-  if (!theme.containerQueries) {
+  if (!theme.containerQueries || !hasContainerQuery(css)) {
     return css;
   }
-  const regex = /min-width:\s*([0-9.]+)/;
-  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css;
+  const keys = [];
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      keys.push(key);
+    }
   }
-  return sorted.reduce((acc, key) => {
-    const value = css[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css
+  keys.sort((a, b) => {
+    return +(a.match(MIN_WIDTH_PATTERN)?.[1] || 0) - +(b.match(MIN_WIDTH_PATTERN)?.[1] || 0);
   });
+  const result = css;
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    const value = result[key];
+    delete result[key];
+    result[key] = value;
+  }
+  return result;
+}
+function hasContainerQuery(css) {
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      return true;
+    }
+  }
+  return false;
 }
 export function isCqShorthand(breakpointKeys, value) {
   return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));

package/cssVars/createCssVarsTheme.js

@@ -23,6 +23,7 @@ function createCssVarsTheme({
   output.generateStyleSheets = result.generateStyleSheets;
   output.colorSchemeSelector = colorSchemeSelector;
   output.getColorSchemeSelector = (0, _getColorSchemeSelector.createGetColorSchemeSelector)(colorSchemeSelector);
+  output.internal_cache = {};
   return output;
 }
 var _default = exports.default = createCssVarsTheme;

package/cssVars/createCssVarsTheme.mjs

@@ -16,6 +16,7 @@ function createCssVarsTheme({
   output.generateStyleSheets = result.generateStyleSheets;
   output.colorSchemeSelector = colorSchemeSelector;
   output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
+  output.internal_cache = {};
   return output;
 }
 export default createCssVarsTheme;

package/index.js

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

package/index.mjs

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

package/merge/merge.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+const options = {
+  clone: false
+};
 function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return (0, _deepmerge.default)(acc, item, {
-    clone: false // No need to clone deep, it's way faster.
-  });
+  return (0, _deepmerge.default)(acc, item, options);
 }
 var _default = exports.default = merge;

package/merge/merge.mjs

@@ -1,10 +1,11 @@
 import deepmerge from '@mui/utils/deepmerge';
+const options = {
+  clone: false
+};
 function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return deepmerge(acc, item, {
-    clone: false // No need to clone deep, it's way faster.
-  });
+  return deepmerge(acc, item, options);
 }
 export default merge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "9.0.0-alpha.3",
+  "version": "9.0.0-beta.0",
   "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.",
   "keywords": [
@@ -24,14 +24,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.29.2",
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "9.0.0-alpha.3",
-    "@mui/styled-engine": "9.0.0-alpha.3",
-    "@mui/types": "^9.0.0-alpha.3",
-    "@mui/utils": "9.0.0-alpha.3"
+    "@mui/private-theming": "9.0.0-beta.0",
+    "@mui/styled-engine": "9.0.0-beta.0",
+    "@mui/types": "^9.0.0-beta.0",
+    "@mui/utils": "9.0.0-beta.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",