@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/BottomNavigationAction/BottomNavigationAction.js

@@ -6,21 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
 var _bottomNavigationActionClasses = _interopRequireWildcard(require("./bottomNavigationActionClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBottomNavigationAction');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,7 +40,7 @@ const BottomNavigationActionRoot = (0, _zeroStyled.styled)(_ButtonBase.default,
     } = props;
     return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   transition: theme.transitions.create(['color', 'padding-top'], {
@@ -75,12 +73,12 @@ const BottomNavigationActionRoot = (0, _zeroStyled.styled)(_ButtonBase.default,
       paddingTop: 0
     }
   }]
-}));
+})));
 const BottomNavigationActionLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiBottomNavigationAction',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   fontFamily: theme.typography.fontFamily,
@@ -101,24 +99,24 @@ const BottomNavigationActionLabel = (0, _zeroStyled.styled)('span', {
       transitionDelay: '0s'
     }
   }]
-}));
+})));
 const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBottomNavigationAction'
   });
   const {
-      className,
-      icon,
-      label,
-      onChange,
-      onClick
-      // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
-      ,
-
-      value
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    className,
+    icon,
+    label,
+    onChange,
+    onClick,
+    // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
+    selected,
+    showLabel,
+    value,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleChange = event => {
@@ -129,19 +127,19 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomNavigationActionRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BottomNavigationActionRoot, {
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     focusRipple: true,
     onClick: handleChange,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomNavigationActionLabel, {
       className: classes.label,
       ownerState: ownerState,
       children: label
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -6,46 +6,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _MoreHoriz = _interopRequireDefault(require("../internal/svg-icons/MoreHoriz"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps"];
 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 BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
+const BreadcrumbCollapsedButton = (0, _zeroStyled.styled)(_ButtonBase.default)((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   display: 'flex',
   marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
-  marginRight: `calc(${theme.spacing(1)} * 0.5)`
-}, theme.palette.mode === 'light' ? {
-  backgroundColor: theme.palette.grey[100],
-  color: theme.palette.grey[700]
-} : {
-  backgroundColor: theme.palette.grey[700],
-  color: theme.palette.grey[100]
-}, {
-  borderRadius: 2,
-  '&:hover, &:focus': (0, _extends2.default)({}, theme.palette.mode === 'light' ? {
-    backgroundColor: theme.palette.grey[200]
+  marginRight: `calc(${theme.spacing(1)} * 0.5)`,
+  ...(theme.palette.mode === 'light' ? {
+    backgroundColor: theme.palette.grey[100],
+    color: theme.palette.grey[700]
   } : {
-    backgroundColor: theme.palette.grey[600]
+    backgroundColor: theme.palette.grey[700],
+    color: theme.palette.grey[100]
   }),
-  '&:active': (0, _extends2.default)({
-    boxShadow: theme.shadows[0]
-  }, theme.palette.mode === 'light' ? {
-    backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[200], 0.12)
-  } : {
-    backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[600], 0.12)
-  })
-}));
-const BreadcrumbCollapsedIcon = (0, _styled.default)(_MoreHoriz.default)({
+  borderRadius: 2,
+  '&:hover, &:focus': {
+    ...(theme.palette.mode === 'light' ? {
+      backgroundColor: theme.palette.grey[200]
+    } : {
+      backgroundColor: theme.palette.grey[600]
+    })
+  },
+  '&:active': {
+    boxShadow: theme.shadows[0],
+    ...(theme.palette.mode === 'light' ? {
+      backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[200], 0.12)
+    } : {
+      backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[600], 0.12)
+    })
+  }
+})));
+const BreadcrumbCollapsedIcon = (0, _zeroStyled.styled)(_MoreHoriz.default)({
   width: 24,
   height: 16
 });
@@ -55,21 +56,22 @@ const BreadcrumbCollapsedIcon = (0, _styled.default)(_MoreHoriz.default)({
  */
 function BreadcrumbCollapsed(props) {
   const {
-      slots = {},
-      slotProps = {}
-    } = props,
-    otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    slots = {},
+    slotProps = {},
+    ...otherProps
+  } = props;
   const ownerState = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedButton, (0, _extends2.default)({
-      focusRipple: true
-    }, otherProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedButton, {
+      focusRipple: true,
+      ...otherProps,
       ownerState: ownerState,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedIcon, (0, _extends2.default)({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedIcon, {
         as: slots.CollapsedIcon,
-        ownerState: ownerState
-      }, slotProps.collapsedIcon))
-    }))
+        ownerState: ownerState,
+        ...slotProps.collapsedIcon
+      })
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {

package/node/Breadcrumbs/Breadcrumbs.js

@@ -6,24 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
-var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _BreadcrumbCollapsed = _interopRequireDefault(require("./BreadcrumbCollapsed"));
 var _breadcrumbsClasses = _interopRequireWildcard(require("./breadcrumbsClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBreadcrumbs');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -83,25 +80,26 @@ function insertSeparators(items, className, separator, ownerState) {
   }, []);
 }
 const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBreadcrumbs'
   });
   const {
-      children,
-      className,
-      component = 'nav',
-      slots = {},
-      slotProps = {},
-      expandText = 'Show path',
-      itemsAfterCollapse = 1,
-      itemsBeforeCollapse = 1,
-      maxItems = 8,
-      separator = '/'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    className,
+    component = 'nav',
+    slots = {},
+    slotProps = {},
+    expandText = 'Show path',
+    itemsAfterCollapse = 1,
+    itemsBeforeCollapse = 1,
+    maxItems = 8,
+    separator = '/',
+    ...other
+  } = props;
   const [expanded, setExpanded] = React.useState(false);
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     component,
     expanded,
     expandText,
@@ -109,9 +107,9 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     itemsBeforeCollapse,
     maxItems,
     separator
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const collapsedIconSlotProps = (0, _utils.useSlotProps)({
+  const collapsedIconSlotProps = (0, _useSlotProps.default)({
     elementType: slots.CollapsedIcon,
     externalSlotProps: slotProps.collapsedIcon,
     ownerState
@@ -161,20 +159,20 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     className: classes.li,
     children: child
   }, `child-${index}`));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsRoot, {
     ref: ref,
     component: component,
-    color: "text.secondary",
+    color: "textSecondary",
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsOl, {
       className: classes.ol,
       ref: listRef,
       ownerState: ownerState,
       children: insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator, ownerState)
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/Button/Button.js

@@ -6,26 +6,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
 var _ButtonGroupContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupContext"));
 var _ButtonGroupButtonContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupButtonContext"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiButton');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -42,7 +40,11 @@ const useUtilityClasses = ownerState => {
     endIcon: ['icon', 'endIcon', `iconSize${(0, _capitalize.default)(size)}`]
   };
   const composedClasses = (0, _composeClasses.default)(slots, _buttonClasses.getButtonUtilityClass, classes);
-  return (0, _extends2.default)({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
 };
 const commonIconStyles = [{
   props: {
@@ -73,7 +75,7 @@ const commonIconStyles = [{
   }
 }];
 const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -82,13 +84,13 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     } = props;
     return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${(0, _capitalize.default)(ownerState.color)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`], styles[`${ownerState.variant}Size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => {
-  var _theme$palette$getCon, _theme$palette;
   const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
   const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
-  return (0, _extends2.default)({}, theme.typography.button, {
+  return {
+    ...theme.typography.button,
     minWidth: 64,
     padding: '6px 16px',
     border: 0,
@@ -152,7 +154,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main && palette.dark && palette.contrastText).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText).map(([color]) => ({
       props: {
         color
       },
@@ -178,7 +180,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       style: {
         '--variant-containedColor': theme.vars ?
         // this is safe because grey does not change between default light/dark mode
-        theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, inheritContainedBackgroundColor),
+        theme.vars.palette.text.primary : theme.palette.getContrastText?.(inheritContainedBackgroundColor),
         '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
         '@media (hover: hover)': {
           '&:hover': {
@@ -269,8 +271,8 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         width: '100%'
       }
     }]
-  });
-});
+  };
+}));
 const ButtonStartIcon = (0, _zeroStyled.styled)('span', {
   name: 'MuiButton',
   slot: 'StartIcon',
@@ -280,7 +282,7 @@ const ButtonStartIcon = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.startIcon, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})(() => ({
+})({
   display: 'inherit',
   marginRight: 8,
   marginLeft: -4,
@@ -292,7 +294,7 @@ const ButtonStartIcon = (0, _zeroStyled.styled)('span', {
       marginLeft: -2
     }
   }, ...commonIconStyles]
-}));
+});
 const ButtonEndIcon = (0, _zeroStyled.styled)('span', {
   name: 'MuiButton',
   slot: 'EndIcon',
@@ -302,7 +304,7 @@ const ButtonEndIcon = (0, _zeroStyled.styled)('span', {
     } = props;
     return [styles.endIcon, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})(() => ({
+})({
   display: 'inherit',
   marginRight: -4,
   marginLeft: 8,
@@ -314,34 +316,35 @@ const ButtonEndIcon = (0, _zeroStyled.styled)('span', {
       marginRight: -2
     }
   }, ...commonIconStyles]
-}));
+});
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const contextProps = React.useContext(_ButtonGroupContext.default);
   const buttonGroupButtonContextPositionClassName = React.useContext(_ButtonGroupButtonContext.default);
   const resolvedProps = (0, _resolveProps.default)(contextProps, inProps);
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: resolvedProps,
     name: 'MuiButton'
   });
   const {
-      children,
-      color = 'primary',
-      component = 'button',
-      className,
-      disabled = false,
-      disableElevation = false,
-      disableFocusRipple = false,
-      endIcon: endIconProp,
-      focusVisibleClassName,
-      fullWidth = false,
-      size = 'medium',
-      startIcon: startIconProp,
-      type,
-      variant = 'text'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    children,
+    color = 'primary',
+    component = 'button',
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    endIcon: endIconProp,
+    focusVisibleClassName,
+    fullWidth = false,
+    size = 'medium',
+    startIcon: startIconProp,
+    type,
+    variant = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -351,7 +354,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     size,
     type,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonStartIcon, {
     className: classes.startIcon,
@@ -364,7 +367,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     children: endIconProp
   });
   const positionClassName = buttonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, {
     ownerState: ownerState,
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
     component: component,
@@ -372,11 +375,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes,
     children: [startIcon, children, endIcon]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐