@mui/styles - npm Package Compare versions

Comparing version 6.0.0-dev.240424162023-9968b4889d to 6.0.0-rc.0

createGenerateClassName/createGenerateClassName.js

@@ -41,3 +41,3 @@ import { unstable_nested as nested } from '@mui/private-theming/ThemeProvider';
     // Is a global static MUI style?
-    if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
+    if (name && name.startsWith('Mui') && !styleSheet.options.link && !disableGlobal) {
       // We can use a shorthand class name, we never use the keys to style the components.
@@ -44,0 +44,0 @@ if (stateClasses.indexOf(rule.key) !== -1) {

getStylesCreator/getStylesCreator.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { deepmerge } from '@mui/utils';
@@ -31,3 +30,5 @@ import propsToClassKey from '../propsToClassKey';
       const variants = theme.components[name].variants || [];
-      const stylesWithOverrides = _extends({}, styles);
+      const stylesWithOverrides = {
+        ...styles
+      };
       Object.keys(overrides).forEach(key => {
@@ -34,0 +35,0 @@ if (process.env.NODE_ENV !== 'production') {

getThemeProps/getThemeProps.js

@@ -1,3 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-/* eslint-disable no-restricted-syntax */
 export default function getThemeProps(params) {
@@ -12,3 +10,5 @@ const {
   }
-  const output = _extends({}, props);
+  const output = {
+    ...props
+  };
 
@@ -15,0 +15,0 @@ // Resolve default props, code borrow from React source.

index.js

 /**
- * @mui/styles v6.0.0-dev.240424162023-9968b4889d
+ * @mui/styles v6.0.0-rc.0
  *
@@ -4,0 +4,0 @@ * @license MIT

makeStyles/makeStyles.js

@@ -1,4 +0,1 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["name", "classNamePrefix", "Component", "defaultTheme"];
 import * as React from 'react';
@@ -70,6 +67,8 @@ import { getDynamicStyles } from 'jss';
   }
-  const options = _extends({}, stylesCreator.options, stylesOptions, {
+  const options = {
+    ...stylesCreator.options,
+    ...stylesOptions,
     theme,
     flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
-  });
+  };
   options.generateId = options.serverGenerateClassName || options.generateClassName;
@@ -84,5 +83,6 @@ const sheetsRegistry = stylesOptions.sheetsRegistry;
     if (!staticSheet) {
-      staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends({
-        link: false
-      }, options));
+      staticSheet = stylesOptions.jss.createStyleSheet(styles, {
+        link: false,
+        ...options
+      });
       staticSheet.attach();
@@ -100,5 +100,6 @@ if (stylesOptions.sheetsCache) {
   if (sheetManager.dynamicStyles) {
-    const dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({
-      link: true
-    }, options));
+    const dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, {
+      link: true,
+      ...options
+    });
     dynamicSheet.update(props);
@@ -157,2 +158,3 @@ dynamicSheet.attach();
   // Store "generation" key. Just returns a new object every time
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
   const currentKey = React.useMemo(() => ({}), values); // eslint-disable-line react-hooks/exhaustive-deps
@@ -174,10 +176,10 @@
   const {
-      // alias for classNamePrefix, if provided will listen to theme (required for theme.components[name].styleOverrides)
-      name,
-      // Help with debuggability.
-      classNamePrefix: classNamePrefixOption,
-      Component,
-      defaultTheme = noopTheme
-    } = options,
-    stylesOptions2 = _objectWithoutPropertiesLoose(options, _excluded);
+    // alias for classNamePrefix, if provided will listen to theme (required for theme.components[name].styleOverrides)
+    name,
+    // Help with debuggability.
+    classNamePrefix: classNamePrefixOption,
+    Component,
+    defaultTheme = noopTheme,
+    ...stylesOptions2
+  } = options;
   const stylesCreator = getStylesCreator(stylesOrCreator);
@@ -193,3 +195,6 @@ const classNamePrefix = name || classNamePrefixOption || 'makeStyles';
     const theme = useTheme() || defaultTheme;
-    const stylesOptions = _extends({}, React.useContext(StylesContext), stylesOptions2);
+    const stylesOptions = {
+      ...React.useContext(StylesContext),
+      ...stylesOptions2
+    };
     const instance = React.useRef();
@@ -220,3 +225,4 @@ const shouldUpdate = React.useRef();
     if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
       React.useDebugValue(classes);
@@ -223,0 +229,0 @@ }

mergeClasses/mergeClasses.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { getDisplayName } from '@mui/utils';
@@ -12,3 +11,5 @@ export default function mergeClasses(options = {}) {
   }
-  const nextClasses = _extends({}, baseClasses);
+  const nextClasses = {
+    ...baseClasses
+  };
   if (process.env.NODE_ENV !== 'production') {
@@ -15,0 +16,0 @@ if (typeof newClasses === 'string') {

modern/createGenerateClassName/createGenerateClassName.js

@@ -41,3 +41,3 @@ import { unstable_nested as nested } from '@mui/private-theming/ThemeProvider';
     // Is a global static MUI style?
-    if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
+    if (name && name.startsWith('Mui') && !styleSheet.options.link && !disableGlobal) {
       // We can use a shorthand class name, we never use the keys to style the components.
@@ -44,0 +44,0 @@ if (stateClasses.indexOf(rule.key) !== -1) {

modern/getStylesCreator/getStylesCreator.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { deepmerge } from '@mui/utils';
@@ -31,3 +30,5 @@ import propsToClassKey from '../propsToClassKey';
       const variants = theme.components[name].variants || [];
-      const stylesWithOverrides = _extends({}, styles);
+      const stylesWithOverrides = {
+        ...styles
+      };
       Object.keys(overrides).forEach(key => {
@@ -34,0 +35,0 @@ if (process.env.NODE_ENV !== 'production') {

modern/getThemeProps/getThemeProps.js

@@ -1,3 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-/* eslint-disable no-restricted-syntax */
 export default function getThemeProps(params) {
@@ -12,3 +10,5 @@ const {
   }
-  const output = _extends({}, props);
+  const output = {
+    ...props
+  };
 
@@ -15,0 +15,0 @@ // Resolve default props, code borrow from React source.

modern/index.js

 /**
- * @mui/styles v6.0.0-dev.240424162023-9968b4889d
+ * @mui/styles v6.0.0-rc.0
  *
@@ -4,0 +4,0 @@ * @license MIT

modern/makeStyles/makeStyles.js

@@ -1,4 +0,1 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["name", "classNamePrefix", "Component", "defaultTheme"];
 import * as React from 'react';
@@ -70,6 +67,8 @@ import { getDynamicStyles } from 'jss';
   }
-  const options = _extends({}, stylesCreator.options, stylesOptions, {
+  const options = {
+    ...stylesCreator.options,
+    ...stylesOptions,
     theme,
     flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
-  });
+  };
   options.generateId = options.serverGenerateClassName || options.generateClassName;
@@ -84,5 +83,6 @@ const sheetsRegistry = stylesOptions.sheetsRegistry;
     if (!staticSheet) {
-      staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends({
-        link: false
-      }, options));
+      staticSheet = stylesOptions.jss.createStyleSheet(styles, {
+        link: false,
+        ...options
+      });
       staticSheet.attach();
@@ -100,5 +100,6 @@ if (stylesOptions.sheetsCache) {
   if (sheetManager.dynamicStyles) {
-    const dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({
-      link: true
-    }, options));
+    const dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, {
+      link: true,
+      ...options
+    });
     dynamicSheet.update(props);
@@ -157,2 +158,3 @@ dynamicSheet.attach();
   // Store "generation" key. Just returns a new object every time
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
   const currentKey = React.useMemo(() => ({}), values); // eslint-disable-line react-hooks/exhaustive-deps
@@ -174,10 +176,10 @@
   const {
-      // alias for classNamePrefix, if provided will listen to theme (required for theme.components[name].styleOverrides)
-      name,
-      // Help with debuggability.
-      classNamePrefix: classNamePrefixOption,
-      Component,
-      defaultTheme = noopTheme
-    } = options,
-    stylesOptions2 = _objectWithoutPropertiesLoose(options, _excluded);
+    // alias for classNamePrefix, if provided will listen to theme (required for theme.components[name].styleOverrides)
+    name,
+    // Help with debuggability.
+    classNamePrefix: classNamePrefixOption,
+    Component,
+    defaultTheme = noopTheme,
+    ...stylesOptions2
+  } = options;
   const stylesCreator = getStylesCreator(stylesOrCreator);
@@ -193,3 +195,6 @@ const classNamePrefix = name || classNamePrefixOption || 'makeStyles';
     const theme = useTheme() || defaultTheme;
-    const stylesOptions = _extends({}, React.useContext(StylesContext), stylesOptions2);
+    const stylesOptions = {
+      ...React.useContext(StylesContext),
+      ...stylesOptions2
+    };
     const instance = React.useRef();
@@ -220,3 +225,4 @@ const shouldUpdate = React.useRef();
     if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
       React.useDebugValue(classes);
@@ -223,0 +229,0 @@ }

modern/mergeClasses/mergeClasses.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { getDisplayName } from '@mui/utils';
@@ -12,3 +11,5 @@ export default function mergeClasses(options = {}) {
   }
-  const nextClasses = _extends({}, baseClasses);
+  const nextClasses = {
+    ...baseClasses
+  };
   if (process.env.NODE_ENV !== 'production') {
@@ -15,0 +16,0 @@ if (typeof newClasses === 'string') {

modern/propsToClassKey/propsToClassKey.js

@@ -1,3 +0,1 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["variant"];
 import { unstable_capitalize as capitalize } from '@mui/utils';
@@ -15,5 +13,5 @@ function isEmpty(string) {
   const {
-      variant
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
@@ -20,0 +18,0 @@ Object.keys(other).sort().forEach(key => {

modern/ServerStyleSheets/ServerStyleSheets.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -18,9 +17,9 @@ import { SheetsRegistry } from 'jss';
     const generateClassName = createGenerateClassName();
-    return /*#__PURE__*/_jsx(StylesProvider, _extends({
+    return /*#__PURE__*/_jsx(StylesProvider, {
       sheetsManager: sheetsManager,
       serverGenerateClassName: generateClassName,
-      sheetsRegistry: this.sheetsRegistry
-    }, this.options, {
+      sheetsRegistry: this.sheetsRegistry,
+      ...this.options,
       children: children
-    }));
+    });
   }
@@ -31,3 +30,3 @@ toString() {
   getStyleElement(props) {
-    return /*#__PURE__*/React.createElement('style', _extends({
+    return /*#__PURE__*/React.createElement('style', {
       id: 'jss-server-side',
@@ -37,5 +36,6 @@ key: 'jss-server-side',
         __html: this.toString()
-      }
-    }, props));
+      },
+      ...props
+    });
   }
 }

modern/styled/styled.js

@@ -1,5 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["name"],
-  _excluded2 = ["children", "className", "clone", "component"];
 import * as React from 'react';
@@ -27,5 +23,5 @@ import clsx from 'clsx';
     const {
-        name
-      } = options,
-      stylesOptions = _objectWithoutPropertiesLoose(options, _excluded);
+      name,
+      ...stylesOptions
+    } = options;
     if (process.env.NODE_ENV !== 'production' && Component === undefined) {
@@ -45,13 +41,15 @@ throw new Error(['You are calling styled(Component)(style) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
     const stylesOrCreator = typeof style === 'function' ? theme => ({
-      root: props => style(_extends({
-        theme
-      }, props))
+      root: props => style({
+        theme,
+        ...props
+      })
     }) : {
       root: style
     };
-    const useStyles = makeStyles(stylesOrCreator, _extends({
+    const useStyles = makeStyles(stylesOrCreator, {
       Component,
       name: name || Component.displayName,
-      classNamePrefix
-    }, stylesOptions));
+      classNamePrefix,
+      ...stylesOptions
+    });
     let filterProps;
@@ -73,8 +71,8 @@ let propTypes = {};
       const {
-          children,
-          className: classNameProp,
-          clone,
-          component: ComponentProp
-        } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded2);
+        children,
+        className: classNameProp,
+        clone,
+        component: ComponentProp,
+        ...other
+      } = props;
       const classes = useStyles(props);
@@ -87,20 +85,22 @@ const className = clsx(classes.root, classNameProp);
       if (clone) {
-        return /*#__PURE__*/React.cloneElement(children, _extends({
-          className: clsx(children.props.className, className)
-        }, spread));
+        return /*#__PURE__*/React.cloneElement(children, {
+          className: clsx(children.props.className, className),
+          ...spread
+        });
       }
       if (typeof children === 'function') {
-        return children(_extends({
-          className
-        }, spread));
+        return children({
+          className,
+          ...spread
+        });
       }
       const FinalComponent = ComponentProp || Component;
-      return /*#__PURE__*/_jsx(FinalComponent, _extends({
+      return /*#__PURE__*/_jsx(FinalComponent, {
         ref: ref,
-        className: className
-      }, spread, {
+        className: className,
+        ...spread,
         children: children
-      }));
+      });
     });
-    process.env.NODE_ENV !== "production" ? StyledComponent.propTypes = _extends({
+    process.env.NODE_ENV !== "production" ? StyledComponent.propTypes = {
       /**
@@ -130,4 +130,5 @@ * A render function or node.
        */
-      component: PropTypes /* @typescript-to-proptypes-ignore */.elementType
-    }, propTypes) : void 0;
+      component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+      ...propTypes
+    } : void 0;
     if (process.env.NODE_ENV !== 'production') {
@@ -134,0 +135,0 @@ StyledComponent.displayName = `Styled(${classNamePrefix})`;

modern/StylesProvider/StylesProvider.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "injectFirst", "disableGeneration"];
 import * as React from 'react';
@@ -38,7 +35,7 @@ import PropTypes from 'prop-types';
   const {
-      children,
-      injectFirst = false,
-      disableGeneration = false
-    } = props,
-    localOptions = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    injectFirst = false,
+    disableGeneration = false,
+    ...localOptions
+  } = props;
   const outerOptions = React.useContext(StylesContext);
@@ -52,3 +49,6 @@ const {
     sheetsRegistry
-  } = _extends({}, outerOptions, localOptions);
+  } = {
+    ...outerOptions,
+    ...localOptions
+  };
   if (process.env.NODE_ENV !== 'production') {
@@ -82,2 +82,3 @@ if (injectFirst && localOptions.jss) {
         const head = document.head;
+        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- injectFirstNode is called inside callback
         injectFirstNode = document.createComment('mui-inject-first');
@@ -84,0 +85,0 @@ head.insertBefore(injectFirstNode, head.firstChild);

modern/withStyles/withStyles.js

@@ -1,5 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultTheme", "withTheme", "name"],
-  _excluded2 = ["classes"];
 import * as React from 'react';
@@ -19,7 +15,7 @@ import PropTypes from 'prop-types';
   const {
-      defaultTheme,
-      withTheme = false,
-      name
-    } = options,
-    stylesOptions = _objectWithoutPropertiesLoose(options, _excluded);
+    defaultTheme,
+    withTheme = false,
+    name,
+    ...stylesOptions
+  } = options;
   if (process.env.NODE_ENV !== 'production') {
@@ -40,14 +36,21 @@ if (Component === undefined) {
   }
-  const useStyles = makeStyles(stylesOrCreator, _extends({
+  const useStyles = makeStyles(stylesOrCreator, {
     defaultTheme,
     Component,
     name: name || Component.displayName,
-    classNamePrefix
-  }, stylesOptions));
+    classNamePrefix,
+    ...stylesOptions
+  });
   const WithStyles = /*#__PURE__*/React.forwardRef(function WithStyles(props, ref) {
-    const other = _objectWithoutPropertiesLoose(props, _excluded2);
+    const {
+      classes: classesProp,
+      ...other
+    } = props;
     // The wrapper receives only user supplied props, which could be a subset of
     // the actual props Component might receive due to merging with defaultProps.
     // So copying it here would give us the same result in the wrapper as well.
-    const classes = useStyles(_extends({}, Component.defaultProps, props));
+    const classes = useStyles({
+      ...Component.defaultProps,
+      ...props
+    });
     let theme;
@@ -57,2 +60,3 @@ let more = other;
       // name and withTheme are invariant in the outer scope
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -74,6 +78,7 @@ theme = useTheme() || defaultTheme;
     }
-    return /*#__PURE__*/_jsx(Component, _extends({
+    return /*#__PURE__*/_jsx(Component, {
       ref: ref,
-      classes: classes
-    }, more));
+      classes: classes,
+      ...more
+    });
   });
@@ -80,0 +85,0 @@ process.env.NODE_ENV !== "production" ? WithStyles.propTypes = {

modern/withTheme/withTheme.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -19,6 +18,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
       const theme = useTheme() || defaultTheme;
-      return /*#__PURE__*/_jsx(Component, _extends({
+      return /*#__PURE__*/_jsx(Component, {
         theme: theme,
-        ref: ref
-      }, props));
+        ref: ref,
+        ...props
+      });
     });
@@ -25,0 +25,0 @@ if (process.env.NODE_ENV !== 'production') {

node/createGenerateClassName/createGenerateClassName.js

@@ -46,3 +46,3 @@ "use strict";
     // Is a global static MUI style?
-    if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {
+    if (name && name.startsWith('Mui') && !styleSheet.options.link && !disableGlobal) {
       // We can use a shorthand class name, we never use the keys to style the components.
@@ -49,0 +49,0 @@ if (stateClasses.indexOf(rule.key) !== -1) {

node/getStylesCreator/getStylesCreator.js

@@ -8,3 +8,2 @@ "use strict";
 exports.default = getStylesCreator;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _utils = require("@mui/utils");
@@ -39,3 +38,5 @@ var _propsToClassKey = _interopRequireDefault(require("../propsToClassKey"));
       const variants = theme.components[name].variants || [];
-      const stylesWithOverrides = (0, _extends2.default)({}, styles);
+      const stylesWithOverrides = {
+        ...styles
+      };
       Object.keys(overrides).forEach(key => {
@@ -42,0 +43,0 @@ if (process.env.NODE_ENV !== 'production') {

node/getThemeProps/getThemeProps.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -8,4 +7,2 @@ value: true
 exports.default = getThemeProps;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-/* eslint-disable no-restricted-syntax */
 function getThemeProps(params) {
@@ -20,3 +17,5 @@ const {
   }
-  const output = (0, _extends2.default)({}, props);
+  const output = {
+    ...props
+  };
 
@@ -23,0 +22,0 @@ // Resolve default props, code borrow from React source.

node/index.js

 /**
- * @mui/styles v6.0.0-dev.240424162023-9968b4889d
+ * @mui/styles v6.0.0-rc.0
  *
@@ -4,0 +4,0 @@ * @license MIT

node/makeStyles/makeStyles.js

@@ -8,4 +8,2 @@ "use strict";
 exports.default = makeStyles;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -20,3 +18,2 @@ var _jss = require("jss");
 var _noopTheme = _interopRequireDefault(require("../getStylesCreator/noopTheme"));
-const _excluded = ["name", "classNamePrefix", "Component", "defaultTheme"];
 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); }
@@ -81,6 +78,8 @@ 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 options = (0, _extends2.default)({}, stylesCreator.options, stylesOptions, {
+  const options = {
+    ...stylesCreator.options,
+    ...stylesOptions,
     theme,
     flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
-  });
+  };
   options.generateId = options.serverGenerateClassName || options.generateClassName;
@@ -95,5 +94,6 @@ const sheetsRegistry = stylesOptions.sheetsRegistry;
     if (!staticSheet) {
-      staticSheet = stylesOptions.jss.createStyleSheet(styles, (0, _extends2.default)({
-        link: false
-      }, options));
+      staticSheet = stylesOptions.jss.createStyleSheet(styles, {
+        link: false,
+        ...options
+      });
       staticSheet.attach();
@@ -111,5 +111,6 @@ if (stylesOptions.sheetsCache) {
   if (sheetManager.dynamicStyles) {
-    const dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, (0, _extends2.default)({
-      link: true
-    }, options));
+    const dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, {
+      link: true,
+      ...options
+    });
     dynamicSheet.update(props);
@@ -168,2 +169,3 @@ dynamicSheet.attach();
   // Store "generation" key. Just returns a new object every time
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
   const currentKey = React.useMemo(() => ({}), values); // eslint-disable-line react-hooks/exhaustive-deps
@@ -185,10 +187,10 @@
   const {
-      // alias for classNamePrefix, if provided will listen to theme (required for theme.components[name].styleOverrides)
-      name,
-      // Help with debuggability.
-      classNamePrefix: classNamePrefixOption,
-      Component,
-      defaultTheme = _noopTheme.default
-    } = options,
-    stylesOptions2 = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    // alias for classNamePrefix, if provided will listen to theme (required for theme.components[name].styleOverrides)
+    name,
+    // Help with debuggability.
+    classNamePrefix: classNamePrefixOption,
+    Component,
+    defaultTheme = _noopTheme.default,
+    ...stylesOptions2
+  } = options;
   const stylesCreator = (0, _getStylesCreator.default)(stylesOrCreator);
@@ -204,3 +206,6 @@ const classNamePrefix = name || classNamePrefixOption || 'makeStyles';
     const theme = (0, _useTheme.default)() || defaultTheme;
-    const stylesOptions = (0, _extends2.default)({}, React.useContext(_StylesProvider.StylesContext), stylesOptions2);
+    const stylesOptions = {
+      ...React.useContext(_StylesProvider.StylesContext),
+      ...stylesOptions2
+    };
     const instance = React.useRef();
@@ -231,3 +236,4 @@ const shouldUpdate = React.useRef();
     if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
       React.useDebugValue(classes);
@@ -234,0 +240,0 @@ }

node/mergeClasses/mergeClasses.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +7,2 @@ value: true
 exports.default = mergeClasses;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _utils = require("@mui/utils");
@@ -20,3 +18,5 @@ function mergeClasses(options = {}) {
   }
-  const nextClasses = (0, _extends2.default)({}, baseClasses);
+  const nextClasses = {
+    ...baseClasses
+  };
   if (process.env.NODE_ENV !== 'production') {
@@ -23,0 +23,0 @@ if (typeof newClasses === 'string') {

node/propsToClassKey/propsToClassKey.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -8,5 +7,3 @@ value: true
 exports.default = propsToClassKey;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
-const _excluded = ["variant"];
 function isEmpty(string) {
@@ -23,5 +20,5 @@ return string.length === 0;
   const {
-      variant
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
@@ -28,0 +25,0 @@ Object.keys(other).sort().forEach(key => {

node/ServerStyleSheets/ServerStyleSheets.js

@@ -8,3 +8,2 @@ "use strict";
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -28,9 +27,9 @@ var _jss = require("jss");
     const generateClassName = (0, _createGenerateClassName.default)();
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StylesProvider.default, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StylesProvider.default, {
       sheetsManager: sheetsManager,
       serverGenerateClassName: generateClassName,
-      sheetsRegistry: this.sheetsRegistry
-    }, this.options, {
+      sheetsRegistry: this.sheetsRegistry,
+      ...this.options,
       children: children
-    }));
+    });
   }
@@ -41,3 +40,3 @@ toString() {
   getStyleElement(props) {
-    return /*#__PURE__*/React.createElement('style', (0, _extends2.default)({
+    return /*#__PURE__*/React.createElement('style', {
       id: 'jss-server-side',
@@ -47,6 +46,7 @@ key: 'jss-server-side',
         __html: this.toString()
-      }
-    }, props));
+      },
+      ...props
+    });
   }
 }
 exports.default = ServerStyleSheets;

node/styled/styled.js

@@ -8,4 +8,2 @@ "use strict";
 exports.default = styled;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,4 +16,2 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["name"],
-  _excluded2 = ["children", "className", "clone", "component"];
 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); }
@@ -38,5 +34,5 @@ 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 {
-        name
-      } = options,
-      stylesOptions = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+      name,
+      ...stylesOptions
+    } = options;
     if (process.env.NODE_ENV !== 'production' && Component === undefined) {
@@ -56,13 +52,15 @@ throw new Error(['You are calling styled(Component)(style) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
     const stylesOrCreator = typeof style === 'function' ? theme => ({
-      root: props => style((0, _extends2.default)({
-        theme
-      }, props))
+      root: props => style({
+        theme,
+        ...props
+      })
     }) : {
       root: style
     };
-    const useStyles = (0, _makeStyles.default)(stylesOrCreator, (0, _extends2.default)({
+    const useStyles = (0, _makeStyles.default)(stylesOrCreator, {
       Component,
       name: name || Component.displayName,
-      classNamePrefix
-    }, stylesOptions));
+      classNamePrefix,
+      ...stylesOptions
+    });
     let filterProps;
@@ -84,8 +82,8 @@ let propTypes = {};
       const {
-          children,
-          className: classNameProp,
-          clone,
-          component: ComponentProp
-        } = props,
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+        children,
+        className: classNameProp,
+        clone,
+        component: ComponentProp,
+        ...other
+      } = props;
       const classes = useStyles(props);
@@ -98,20 +96,22 @@ const className = (0, _clsx.default)(classes.root, classNameProp);
       if (clone) {
-        return /*#__PURE__*/React.cloneElement(children, (0, _extends2.default)({
-          className: (0, _clsx.default)(children.props.className, className)
-        }, spread));
+        return /*#__PURE__*/React.cloneElement(children, {
+          className: (0, _clsx.default)(children.props.className, className),
+          ...spread
+        });
       }
       if (typeof children === 'function') {
-        return children((0, _extends2.default)({
-          className
-        }, spread));
+        return children({
+          className,
+          ...spread
+        });
       }
       const FinalComponent = ComponentProp || Component;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FinalComponent, (0, _extends2.default)({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FinalComponent, {
         ref: ref,
-        className: className
-      }, spread, {
+        className: className,
+        ...spread,
         children: children
-      }));
+      });
     });
-    process.env.NODE_ENV !== "production" ? StyledComponent.propTypes = (0, _extends2.default)({
+    process.env.NODE_ENV !== "production" ? StyledComponent.propTypes = {
       /**
@@ -141,4 +141,5 @@ * A render function or node.
        */
-      component: _propTypes.default /* @typescript-to-proptypes-ignore */.elementType
-    }, propTypes) : void 0;
+      component: _propTypes.default /* @typescript-to-proptypes-ignore */.elementType,
+      ...propTypes
+    } : void 0;
     if (process.env.NODE_ENV !== 'production') {
@@ -145,0 +146,0 @@ StyledComponent.displayName = `Styled(${classNamePrefix})`;

node/StylesProvider/StylesProvider.js

@@ -10,4 +10,2 @@ "use strict";
 exports.sheetsManager = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -20,5 +18,5 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "injectFirst", "disableGeneration"]; // Default JSS instance.
 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; }
+// Default JSS instance.
 const defaultJSS = (0, _jss.create)((0, _jssPreset.default)());
@@ -49,7 +47,7 @@
   const {
-      children,
-      injectFirst = false,
-      disableGeneration = false
-    } = props,
-    localOptions = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    injectFirst = false,
+    disableGeneration = false,
+    ...localOptions
+  } = props;
   const outerOptions = React.useContext(StylesContext);
@@ -63,3 +61,6 @@ const {
     sheetsRegistry
-  } = (0, _extends2.default)({}, outerOptions, localOptions);
+  } = {
+    ...outerOptions,
+    ...localOptions
+  };
   if (process.env.NODE_ENV !== 'production') {
@@ -93,2 +94,3 @@ if (injectFirst && localOptions.jss) {
         const head = document.head;
+        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- injectFirstNode is called inside callback
         injectFirstNode = document.createComment('mui-inject-first');
@@ -95,0 +97,0 @@ head.insertBefore(injectFirstNode, head.firstChild);

node/useTheme/index.js

@@ -10,5 +10,4 @@ "use strict";
 function useTheme() {
-  var _privateTheme$$$mater;
   const privateTheme = (0, _useTheme.default)();
-  return (_privateTheme$$$mater = privateTheme == null ? void 0 : privateTheme.$$material) != null ? _privateTheme$$$mater : privateTheme;
+  return privateTheme?.$$material ?? privateTheme;
 }

node/withStyles/withStyles.js

@@ -8,4 +8,2 @@ "use strict";
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -19,15 +17,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["defaultTheme", "withTheme", "name"],
-  _excluded2 = ["classes"]; // Link a style sheet with a component.
+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; }
+// Link a style sheet with a component.
 // It does not modify the component passed to it;
 // instead, it returns a new component, with a `classes` property.
-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 withStyles = (stylesOrCreator, options = {}) => Component => {
   const {
-      defaultTheme,
-      withTheme = false,
-      name
-    } = options,
-    stylesOptions = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    defaultTheme,
+    withTheme = false,
+    name,
+    ...stylesOptions
+  } = options;
   if (process.env.NODE_ENV !== 'production') {
@@ -48,14 +45,21 @@ if (Component === undefined) {
   }
-  const useStyles = (0, _makeStyles.default)(stylesOrCreator, (0, _extends2.default)({
+  const useStyles = (0, _makeStyles.default)(stylesOrCreator, {
     defaultTheme,
     Component,
     name: name || Component.displayName,
-    classNamePrefix
-  }, stylesOptions));
+    classNamePrefix,
+    ...stylesOptions
+  });
   const WithStyles = /*#__PURE__*/React.forwardRef(function WithStyles(props, ref) {
-    const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    const {
+      classes: classesProp,
+      ...other
+    } = props;
     // The wrapper receives only user supplied props, which could be a subset of
     // the actual props Component might receive due to merging with defaultProps.
     // So copying it here would give us the same result in the wrapper as well.
-    const classes = useStyles((0, _extends2.default)({}, Component.defaultProps, props));
+    const classes = useStyles({
+      ...Component.defaultProps,
+      ...props
+    });
     let theme;
@@ -65,2 +69,3 @@ let more = other;
       // name and withTheme are invariant in the outer scope
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -82,6 +87,7 @@ theme = (0, _useTheme.default)() || defaultTheme;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
       ref: ref,
-      classes: classes
-    }, more));
+      classes: classes,
+      ...more
+    });
   });
@@ -88,0 +94,0 @@ process.env.NODE_ENV !== "production" ? WithStyles.propTypes = {

node/withTheme/withTheme.js

@@ -9,3 +9,2 @@ "use strict";
 exports.withThemeCreator = withThemeCreator;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -30,6 +29,7 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
       const theme = (0, _useTheme.default)() || defaultTheme;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
         theme: theme,
-        ref: ref
-      }, props));
+        ref: ref,
+        ...props
+      });
     });
@@ -36,0 +36,0 @@ if (process.env.NODE_ENV !== 'production') {

package.json

 {
   "name": "@mui/styles",
-  "version": "6.0.0-dev.240424162023-9968b4889d",
+  "version": "6.0.0-rc.0",
   "private": false,
@@ -29,5 +29,5 @@ "author": "MUI Team",
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
-    "@emotion/hash": "^0.9.1",
-    "clsx": "^2.1.0",
+    "@babel/runtime": "^7.25.0",
+    "@emotion/hash": "^0.9.2",
+    "clsx": "^2.1.1",
     "csstype": "^3.1.3",
@@ -44,9 +44,9 @@ "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.0.0-alpha.3",
-    "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.3"
+    "@mui/types": "^7.2.15",
+    "@mui/utils": "6.0.0-rc.0",
+    "@mui/private-theming": "6.0.0-rc.0"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -64,3 +64,3 @@ "peerDependenciesMeta": {
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
@@ -67,0 +67,0 @@ "module": "./index.js",

propsToClassKey/propsToClassKey.js

@@ -1,3 +0,1 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["variant"];
 import { unstable_capitalize as capitalize } from '@mui/utils';
@@ -15,5 +13,5 @@ function isEmpty(string) {
   const {
-      variant
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
@@ -20,0 +18,0 @@ Object.keys(other).sort().forEach(key => {

ServerStyleSheets/ServerStyleSheets.d.ts

@@ -8,5 +8,5 @@ import * as React from 'react';
   toString(): string;
-  getStyleElement(props?: object): React.ReactElement;
+  getStyleElement(props?: object): React.ReactElement<any>;
 }
 
 export default ServerStyleSheets;

ServerStyleSheets/ServerStyleSheets.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -18,9 +17,9 @@ import { SheetsRegistry } from 'jss';
     const generateClassName = createGenerateClassName();
-    return /*#__PURE__*/_jsx(StylesProvider, _extends({
+    return /*#__PURE__*/_jsx(StylesProvider, {
       sheetsManager: sheetsManager,
       serverGenerateClassName: generateClassName,
-      sheetsRegistry: this.sheetsRegistry
-    }, this.options, {
+      sheetsRegistry: this.sheetsRegistry,
+      ...this.options,
       children: children
-    }));
+    });
   }
@@ -31,3 +30,3 @@ toString() {
   getStyleElement(props) {
-    return /*#__PURE__*/React.createElement('style', _extends({
+    return /*#__PURE__*/React.createElement('style', {
       id: 'jss-server-side',
@@ -37,5 +36,6 @@ key: 'jss-server-side',
         __html: this.toString()
-      }
-    }, props));
+      },
+      ...props
+    });
   }
 }

styled/styled.d.ts

@@ -26,3 +26,3 @@ import { DistributiveOmit, Overwrite } from '@mui/types';
   DistributiveOmit<
-    JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
+    React.JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
     'classes' | 'className'
@@ -29,0 +29,0 @@ > &

styled/styled.js

@@ -1,5 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["name"],
-  _excluded2 = ["children", "className", "clone", "component"];
 import * as React from 'react';
@@ -27,5 +23,5 @@ import clsx from 'clsx';
     const {
-        name
-      } = options,
-      stylesOptions = _objectWithoutPropertiesLoose(options, _excluded);
+      name,
+      ...stylesOptions
+    } = options;
     if (process.env.NODE_ENV !== 'production' && Component === undefined) {
@@ -45,13 +41,15 @@ throw new Error(['You are calling styled(Component)(style) with an undefined component.', 'You may have forgotten to import it.'].join('\n'));
     const stylesOrCreator = typeof style === 'function' ? theme => ({
-      root: props => style(_extends({
-        theme
-      }, props))
+      root: props => style({
+        theme,
+        ...props
+      })
     }) : {
       root: style
     };
-    const useStyles = makeStyles(stylesOrCreator, _extends({
+    const useStyles = makeStyles(stylesOrCreator, {
       Component,
       name: name || Component.displayName,
-      classNamePrefix
-    }, stylesOptions));
+      classNamePrefix,
+      ...stylesOptions
+    });
     let filterProps;
@@ -73,8 +71,8 @@ let propTypes = {};
       const {
-          children,
-          className: classNameProp,
-          clone,
-          component: ComponentProp
-        } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded2);
+        children,
+        className: classNameProp,
+        clone,
+        component: ComponentProp,
+        ...other
+      } = props;
       const classes = useStyles(props);
@@ -87,20 +85,22 @@ const className = clsx(classes.root, classNameProp);
       if (clone) {
-        return /*#__PURE__*/React.cloneElement(children, _extends({
-          className: clsx(children.props.className, className)
-        }, spread));
+        return /*#__PURE__*/React.cloneElement(children, {
+          className: clsx(children.props.className, className),
+          ...spread
+        });
       }
       if (typeof children === 'function') {
-        return children(_extends({
-          className
-        }, spread));
+        return children({
+          className,
+          ...spread
+        });
       }
       const FinalComponent = ComponentProp || Component;
-      return /*#__PURE__*/_jsx(FinalComponent, _extends({
+      return /*#__PURE__*/_jsx(FinalComponent, {
         ref: ref,
-        className: className
-      }, spread, {
+        className: className,
+        ...spread,
         children: children
-      }));
+      });
     });
-    process.env.NODE_ENV !== "production" ? StyledComponent.propTypes = _extends({
+    process.env.NODE_ENV !== "production" ? StyledComponent.propTypes = {
       /**
@@ -130,4 +130,5 @@ * A render function or node.
        */
-      component: PropTypes /* @typescript-to-proptypes-ignore */.elementType
-    }, propTypes) : void 0;
+      component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+      ...propTypes
+    } : void 0;
     if (process.env.NODE_ENV !== 'production') {
@@ -134,0 +135,0 @@ StyledComponent.displayName = `Styled(${classNamePrefix})`;

StylesProvider/StylesProvider.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "injectFirst", "disableGeneration"];
 import * as React from 'react';
@@ -38,7 +35,7 @@ import PropTypes from 'prop-types';
   const {
-      children,
-      injectFirst = false,
-      disableGeneration = false
-    } = props,
-    localOptions = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    injectFirst = false,
+    disableGeneration = false,
+    ...localOptions
+  } = props;
   const outerOptions = React.useContext(StylesContext);
@@ -52,3 +49,6 @@ const {
     sheetsRegistry
-  } = _extends({}, outerOptions, localOptions);
+  } = {
+    ...outerOptions,
+    ...localOptions
+  };
   if (process.env.NODE_ENV !== 'production') {
@@ -82,2 +82,3 @@ if (injectFirst && localOptions.jss) {
         const head = document.head;
+        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- injectFirstNode is called inside callback
         injectFirstNode = document.createComment('mui-inject-first');
@@ -84,0 +85,0 @@ head.insertBefore(injectFirstNode, head.firstChild);

withStyles/withStyles.js

@@ -1,5 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultTheme", "withTheme", "name"],
-  _excluded2 = ["classes"];
 import * as React from 'react';
@@ -19,7 +15,7 @@ import PropTypes from 'prop-types';
   const {
-      defaultTheme,
-      withTheme = false,
-      name
-    } = options,
-    stylesOptions = _objectWithoutPropertiesLoose(options, _excluded);
+    defaultTheme,
+    withTheme = false,
+    name,
+    ...stylesOptions
+  } = options;
   if (process.env.NODE_ENV !== 'production') {
@@ -40,14 +36,21 @@ if (Component === undefined) {
   }
-  const useStyles = makeStyles(stylesOrCreator, _extends({
+  const useStyles = makeStyles(stylesOrCreator, {
     defaultTheme,
     Component,
     name: name || Component.displayName,
-    classNamePrefix
-  }, stylesOptions));
+    classNamePrefix,
+    ...stylesOptions
+  });
   const WithStyles = /*#__PURE__*/React.forwardRef(function WithStyles(props, ref) {
-    const other = _objectWithoutPropertiesLoose(props, _excluded2);
+    const {
+      classes: classesProp,
+      ...other
+    } = props;
     // The wrapper receives only user supplied props, which could be a subset of
     // the actual props Component might receive due to merging with defaultProps.
     // So copying it here would give us the same result in the wrapper as well.
-    const classes = useStyles(_extends({}, Component.defaultProps, props));
+    const classes = useStyles({
+      ...Component.defaultProps,
+      ...props
+    });
     let theme;
@@ -57,2 +60,3 @@ let more = other;
       // name and withTheme are invariant in the outer scope
+      // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -74,6 +78,7 @@ theme = useTheme() || defaultTheme;
     }
-    return /*#__PURE__*/_jsx(Component, _extends({
+    return /*#__PURE__*/_jsx(Component, {
       ref: ref,
-      classes: classes
-    }, more));
+      classes: classes,
+      ...more
+    });
   });
@@ -80,0 +85,0 @@ process.env.NODE_ENV !== "production" ? WithStyles.propTypes = {

withTheme/withTheme.d.ts

@@ -28,3 +28,3 @@ import * as React from 'react';
   DistributiveOmit<
-    JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>,
+    React.JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>,
     keyof WithTheme<Theme>
@@ -31,0 +31,0 @@ > &

withTheme/withTheme.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -19,6 +18,7 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
       const theme = useTheme() || defaultTheme;
-      return /*#__PURE__*/_jsx(Component, _extends({
+      return /*#__PURE__*/_jsx(Component, {
         theme: theme,
-        ref: ref
-      }, props));
+        ref: ref,
+        ...props
+      });
     });
@@ -25,0 +25,0 @@ if (process.env.NODE_ENV !== 'production') {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1013456

increased by6.06%

Lines of code

4093

increased by0.91%

Dependency changes

• + Added@mui/private-theming@6.0.0-rc.0(transitive)

• + Added@mui/utils@6.0.0-rc.0(transitive)

• + Addedreact@18.3.1(transitive)

• - Removed@mui/private-theming@6.1.0(transitive)

• - Removed@mui/utils@6.1.0(transitive)

• - Removedreact@17.0.2(transitive)

• Updated@babel/runtime@^7.25.0

• Updated@emotion/hash@^0.9.2

• Updated@mui/private-theming@6.0.0-rc.0

• Updated@mui/types@^7.2.15

• Updated@mui/utils@6.0.0-rc.0

• Updatedclsx@^2.1.1