@mui/material 5.13.1 → 5.13.2

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { emphasize } from '@mui/system';
@@ -7,33 +10,30 @@ import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const BreadcrumbCollapsedButton = styled(ButtonBase)(({
   theme
-}) => ({
+}) => _extends({
   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]
+  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': _extends({}, theme.palette.mode === 'light' ? {
+    backgroundColor: theme.palette.grey[200]
   } : {
-    backgroundColor: theme.palette.grey[700],
-    color: theme.palette.grey[100]
+    backgroundColor: theme.palette.grey[600]
   }),
-  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: emphasize(theme.palette.grey[200], 0.12)
-    } : {
-      backgroundColor: emphasize(theme.palette.grey[600], 0.12)
-    })
-  }
+  '&:active': _extends({
+    boxShadow: theme.shadows[0]
+  }, theme.palette.mode === 'light' ? {
+    backgroundColor: emphasize(theme.palette.grey[200], 0.12)
+  } : {
+    backgroundColor: emphasize(theme.palette.grey[600], 0.12)
+  })
 }));
 const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
   width: 24,
@@ -45,22 +45,21 @@ const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
  */
 function BreadcrumbCollapsed(props) {
   const {
-    slots = {},
-    slotProps = {},
-    ...otherProps
-  } = props;
+      slots = {},
+      slotProps = {}
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   return /*#__PURE__*/_jsx("li", {
-    children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, {
-      focusRipple: true,
-      ...otherProps,
+    children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, _extends({
+      focusRipple: true
+    }, otherProps, {
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
+      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, _extends({
         as: slots.CollapsedIcon,
-        ownerState: ownerState,
-        ...slotProps.collapsedIcon
-      })
-    })
+        ownerState: ownerState
+      }, slotProps.collapsedIcon))
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {

package/Breadcrumbs/Breadcrumbs.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -74,21 +77,20 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     name: 'MuiBreadcrumbs'
   });
   const {
-    children,
-    className,
-    component = 'nav',
-    slots = {},
-    slotProps = {},
-    expandText = 'Show path',
-    itemsAfterCollapse = 1,
-    itemsBeforeCollapse = 1,
-    maxItems = 8,
-    separator = '/',
-    ...other
-  } = props;
+      children,
+      className,
+      component = 'nav',
+      slots = {},
+      slotProps = {},
+      expandText = 'Show path',
+      itemsAfterCollapse = 1,
+      itemsBeforeCollapse = 1,
+      maxItems = 8,
+      separator = '/'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [expanded, setExpanded] = React.useState(false);
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     component,
     expanded,
     expandText,
@@ -96,7 +98,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     itemsBeforeCollapse,
     maxItems,
     separator
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   const collapsedIconSlotProps = useSlotProps({
     elementType: slots.CollapsedIcon,
@@ -148,20 +150,20 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     className: classes.li,
     children: child
   }, `child-${index}`));
-  return /*#__PURE__*/_jsx(BreadcrumbsRoot, {
+  return /*#__PURE__*/_jsx(BreadcrumbsRoot, _extends({
     ref: ref,
     component: component,
     color: "text.secondary",
     className: clsx(classes.root, className),
-    ownerState: ownerState,
-    ...other,
+    ownerState: ownerState
+  }, other, {
     children: /*#__PURE__*/_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/Breadcrumbs/breadcrumbsClasses.d.ts

@@ -1,14 +1,14 @@
-export interface BreadcrumbsClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the ol element. */
-    ol: string;
-    /** Styles applied to the li element. */
-    li: string;
-    /** Styles applied to the separator element. */
-    separator: string;
-}
-export type BreadcrumbsClassKey = keyof BreadcrumbsClasses;
-export declare function getBreadcrumbsUtilityClass(slot: string): string;
-declare const breadcrumbsClasses: BreadcrumbsClasses;
-export default breadcrumbsClasses;
+export interface BreadcrumbsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the ol element. */
+    ol: string;
+    /** Styles applied to the li element. */
+    li: string;
+    /** Styles applied to the separator element. */
+    separator: string;
+}
+export type BreadcrumbsClassKey = keyof BreadcrumbsClasses;
+export declare function getBreadcrumbsUtilityClass(slot: string): string;
+declare const breadcrumbsClasses: BreadcrumbsClasses;
+export default breadcrumbsClasses;

package/Button/Button.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -28,28 +31,20 @@ const useUtilityClasses = ownerState => {
     endIcon: ['endIcon', `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-  return {
-    ...classes,
-    // forward the focused, disabled, etc. classes to the ButtonBase
-    ...composedClasses
-  };
+  return _extends({}, classes, composedClasses);
 };
-const commonIconStyles = ownerState => ({
-  ...(ownerState.size === 'small' && {
-    '& > *:nth-of-type(1)': {
-      fontSize: 18
-    }
-  }),
-  ...(ownerState.size === 'medium' && {
-    '& > *:nth-of-type(1)': {
-      fontSize: 20
-    }
-  }),
-  ...(ownerState.size === 'large' && {
-    '& > *:nth-of-type(1)': {
-      fontSize: 22
-    }
-  })
+const commonIconStyles = ownerState => _extends({}, ownerState.size === 'small' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 18
+  }
+}, ownerState.size === 'medium' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 20
+  }
+}, ownerState.size === 'large' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 22
+  }
 });
 const ButtonRoot = styled(ButtonBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -68,131 +63,106 @@ const ButtonRoot = styled(ButtonBase, {
   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 {
-    ...theme.typography.button,
+  return _extends({}, theme.typography.button, {
     minWidth: 64,
     padding: '6px 16px',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
-    '&:hover': {
+    '&:hover': _extends({
       textDecoration: 'none',
       backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
-      },
-      ...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }),
-      ...(ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-        border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }),
-      ...(ownerState.variant === 'contained' && {
-        backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-        boxShadow: (theme.vars || theme).shadows[4],
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          boxShadow: (theme.vars || theme).shadows[2],
-          backgroundColor: (theme.vars || theme).palette.grey[300]
-        }
-      }),
-      ...(ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-        }
-      })
-    },
-    '&:active': {
-      ...(ownerState.variant === 'contained' && {
-        boxShadow: (theme.vars || theme).shadows[8]
-      })
-    },
-    [`&.${buttonClasses.focusVisible}`]: {
-      ...(ownerState.variant === 'contained' && {
-        boxShadow: (theme.vars || theme).shadows[6]
-      })
-    },
-    [`&.${buttonClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled,
-      ...(ownerState.variant === 'outlined' && {
-        border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-      }),
-      ...(ownerState.variant === 'contained' && {
-        color: (theme.vars || theme).palette.action.disabled,
-        boxShadow: (theme.vars || theme).shadows[0],
-        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-      })
-    },
-    ...(ownerState.variant === 'text' && {
-      padding: '6px 8px'
-    }),
-    ...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].main
-    }),
-    ...(ownerState.variant === 'outlined' && {
-      padding: '5px 15px',
-      border: '1px solid currentColor'
-    }),
-    ...(ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].main,
-      border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
-    }),
-    ...(ownerState.variant === 'contained' && {
-      color: 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, theme.palette.grey[300]),
-      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
-      boxShadow: (theme.vars || theme).shadows[2]
-    }),
-    ...(ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      color: (theme.vars || theme).palette[ownerState.color].contrastText,
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-    }),
-    ...(ownerState.color === 'inherit' && {
-      color: 'inherit',
-      borderColor: 'currentColor'
-    }),
-    ...(ownerState.size === 'small' && ownerState.variant === 'text' && {
-      padding: '4px 5px',
-      fontSize: theme.typography.pxToRem(13)
-    }),
-    ...(ownerState.size === 'large' && ownerState.variant === 'text' && {
-      padding: '8px 11px',
-      fontSize: theme.typography.pxToRem(15)
-    }),
-    ...(ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-      padding: '3px 9px',
-      fontSize: theme.typography.pxToRem(13)
-    }),
-    ...(ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-      padding: '7px 21px',
-      fontSize: theme.typography.pxToRem(15)
+      }
+    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+      border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'contained' && {
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+      boxShadow: (theme.vars || theme).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: (theme.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      }
+    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      }
     }),
-    ...(ownerState.size === 'small' && ownerState.variant === 'contained' && {
-      padding: '4px 10px',
-      fontSize: theme.typography.pxToRem(13)
+    '&:active': _extends({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[8]
     }),
-    ...(ownerState.size === 'large' && ownerState.variant === 'contained' && {
-      padding: '8px 22px',
-      fontSize: theme.typography.pxToRem(15)
+    [`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[6]
     }),
-    ...(ownerState.fullWidth && {
-      width: '100%'
+    [`&.${buttonClasses.disabled}`]: _extends({
+      color: (theme.vars || theme).palette.action.disabled
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+    }, ownerState.variant === 'contained' && {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
     })
-  };
+  }, ownerState.variant === 'text' && {
+    padding: '6px 8px'
+  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.variant === 'outlined' && {
+    padding: '5px 15px',
+    border: '1px solid currentColor'
+  }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
+  }, ownerState.variant === 'contained' && {
+    color: 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, theme.palette.grey[300]),
+    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+    boxShadow: (theme.vars || theme).shadows[2]
+  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit',
+    borderColor: 'currentColor'
+  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+    padding: '4px 5px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+    padding: '8px 11px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    padding: '3px 9px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+    padding: '7px 21px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    padding: '4px 10px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+    padding: '8px 22px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.fullWidth && {
+    width: '100%'
+  });
 }, ({
   ownerState
 }) => ownerState.disableElevation && {
@@ -221,15 +191,13 @@ const ButtonStartIcon = styled('span', {
   }
 })(({
   ownerState
-}) => ({
+}) => _extends({
   display: 'inherit',
   marginRight: 8,
-  marginLeft: -4,
-  ...(ownerState.size === 'small' && {
-    marginLeft: -2
-  }),
-  ...commonIconStyles(ownerState)
-}));
+  marginLeft: -4
+}, ownerState.size === 'small' && {
+  marginLeft: -2
+}, commonIconStyles(ownerState)));
 const ButtonEndIcon = styled('span', {
   name: 'MuiButton',
   slot: 'EndIcon',
@@ -241,15 +209,13 @@ const ButtonEndIcon = styled('span', {
   }
 })(({
   ownerState
-}) => ({
+}) => _extends({
   display: 'inherit',
   marginRight: -4,
-  marginLeft: 8,
-  ...(ownerState.size === 'small' && {
-    marginRight: -2
-  }),
-  ...commonIconStyles(ownerState)
-}));
+  marginLeft: 8
+}, ownerState.size === 'small' && {
+  marginRight: -2
+}, commonIconStyles(ownerState)));
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const contextProps = React.useContext(ButtonGroupContext);
@@ -259,24 +225,23 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     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',
-    ...other
-  } = props;
-  const ownerState = {
-    ...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'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     color,
     component,
     disabled,
@@ -286,7 +251,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     size,
     type,
     variant
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
@@ -298,7 +263,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     ownerState: ownerState,
     children: endIconProp
   });
-  return /*#__PURE__*/_jsxs(ButtonRoot, {
+  return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className),
     component: component,
@@ -306,11 +271,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(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 --------------------------------