@mui/material 5.12.3 → 5.13.1

package/modern/styles/createTheme.js

@@ -1,7 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 import { deepmerge } from '@mui/utils';
 import { createTheme as systemCreateTheme, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
 import generateUtilityClass from '../generateUtilityClass';
@@ -13,12 +10,15 @@ import createTransitions from './createTransitions';
 import zIndex from './zIndex';
 function createTheme(options = {}, ...args) {
   const {
-      mixins: mixinsInput = {},
-      palette: paletteInput = {},
-      transitions: transitionsInput = {},
-      typography: typographyInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    breakpoints: breakpointsInput,
+    mixins: mixinsInput = {},
+    spacing: spacingInput,
+    palette: paletteInput = {},
+    transitions: transitionsInput = {},
+    typography: typographyInput = {},
+    shape: shapeInput,
+    ...other
+  } = options;
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : _formatMuiErrorMessage(18));
@@ -32,7 +32,9 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends({}, zIndex)
+    zIndex: {
+      ...zIndex
+    }
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -66,7 +68,10 @@ Please use another name.` : _formatMuiErrorMessage(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/modern/styles/createTransitions.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 export const easing = {
@@ -43,15 +40,21 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 export default function createTransitions(inputTransitions) {
-  const mergedEasing = _extends({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends({}, duration, inputTransitions.duration);
+  const mergedEasing = {
+    ...easing,
+    ...inputTransitions.easing
+  };
+  const mergedDuration = {
+    ...duration,
+    ...inputTransitions.duration
+  };
   const create = (props = ['all'], options = {}) => {
     const {
-        duration: durationOption = mergedDuration.standard,
-        easing: easingOption = mergedEasing.easeInOut,
-        delay = 0
-      } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded);
+      duration: durationOption = mergedDuration.standard,
+      easing: easingOption = mergedEasing.easeInOut,
+      delay = 0,
+      ...other
+    } = options;
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -75,11 +78,11 @@ export default function createTransitions(inputTransitions) {
     }
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return _extends({
+  return {
     getAutoHeightDuration,
-    create
-  }, inputTransitions, {
+    create,
+    ...inputTransitions,
     easing: mergedEasing,
     duration: mergedDuration
-  });
+  };
 }

package/modern/styles/createTypography.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 import { deepmerge } from '@mui/utils';
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -15,24 +12,23 @@ const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 export default function createTypography(palette, typography) {
-  const _ref = typeof typography === 'function' ? typography(palette) : typography,
-    {
-      fontFamily = defaultFontFamily,
-      // The default font size of the Material Specification.
-      fontSize = 14,
-      // px
-      fontWeightLight = 300,
-      fontWeightRegular = 400,
-      fontWeightMedium = 500,
-      fontWeightBold = 700,
-      // Tell MUI what's the font-size on the html element.
-      // 16px is the default font-size used by browsers.
-      htmlFontSize = 16,
-      // Apply the CSS properties to all the variants.
-      allVariants,
-      pxToRem: pxToRem2
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    fontFamily = defaultFontFamily,
+    // The default font size of the Material Specification.
+    fontSize = 14,
+    // px
+    fontWeightLight = 300,
+    fontWeightRegular = 400,
+    fontWeightMedium = 500,
+    fontWeightBold = 700,
+    // Tell MUI what's the font-size on the html element.
+    // 16px is the default font-size used by browsers.
+    htmlFontSize = 16,
+    // Apply the CSS properties to all the variants.
+    allVariants,
+    pxToRem: pxToRem2,
+    ...other
+  } = typeof typography === 'function' ? typography(palette) : typography;
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -43,15 +39,20 @@ export default function createTypography(palette, typography) {
   }
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight
-  }, fontFamily === defaultFontFamily ? {
-    letterSpacing: `${round(letterSpacing / size)}em`
-  } : {}, casing, allVariants);
+    lineHeight,
+    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
+    // across font-families can cause issues with the kerning.
+    ...(fontFamily === defaultFontFamily ? {
+      letterSpacing: `${round(letterSpacing / size)}em`
+    } : {}),
+    ...casing,
+    ...allVariants
+  });
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -74,7 +75,7 @@ export default function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends({
+  return deepmerge({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -82,8 +83,9 @@ export default function createTypography(palette, typography) {
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,
-    fontWeightBold
-  }, variants), other, {
+    fontWeightBold,
+    ...variants
+  }, other, {
     clone: false // No need to clone deep
   });
 }

package/modern/styles/experimental_extendTheme.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
-  _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx, unstable_prepareCssVars as prepareCssVars } from '@mui/system';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
@@ -44,52 +40,61 @@ const silent = fn => {
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   const {
-      colorSchemes: colorSchemesInput = {},
-      cssVarPrefix = 'mui',
-      shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar
-    } = options,
-    input = _objectWithoutPropertiesLoose(options, _excluded);
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui',
+    shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+    ...input
+  } = options;
   const getCssVar = createGetCssVar(cssVarPrefix);
-  const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+  const {
+    palette: lightPalette,
+    ...muiTheme
+  } = createThemeWithoutVars({
+    ...input,
+    ...(colorSchemesInput.light && {
       palette: colorSchemesInput.light?.palette
-    })),
-    {
-      palette: lightPalette
-    } = _createThemeWithoutVa,
-    muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+    })
+  });
   const {
     palette: darkPalette
   } = createThemeWithoutVars({
-    palette: _extends({
-      mode: 'dark'
-    }, colorSchemesInput.dark?.palette)
+    palette: {
+      mode: 'dark',
+      ...colorSchemesInput.dark?.palette
+    }
   });
-  let theme = _extends({}, muiTheme, {
+  let theme = {
+    ...muiTheme,
     cssVarPrefix,
     getCssVar,
-    colorSchemes: _extends({}, colorSchemesInput, {
-      light: _extends({}, colorSchemesInput.light, {
+    colorSchemes: {
+      ...colorSchemesInput,
+      light: {
+        ...colorSchemesInput.light,
         palette: lightPalette,
-        opacity: _extends({
+        opacity: {
           inputPlaceholder: 0.42,
           inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
-          switchTrack: 0.38
-        }, colorSchemesInput.light?.opacity),
+          switchTrack: 0.38,
+          ...colorSchemesInput.light?.opacity
+        },
         overlays: colorSchemesInput.light?.overlays || []
-      }),
-      dark: _extends({}, colorSchemesInput.dark, {
+      },
+      dark: {
+        ...colorSchemesInput.dark,
         palette: darkPalette,
-        opacity: _extends({
+        opacity: {
           inputPlaceholder: 0.5,
           inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
-          switchTrack: 0.3
-        }, colorSchemesInput.dark?.opacity),
+          switchTrack: 0.3,
+          ...colorSchemesInput.dark?.opacity
+        },
         overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
-      })
-    })
-  });
+      }
+    }
+  };
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
     const setCssVarColor = cssVar => {
@@ -287,7 +292,10 @@ export default function extendTheme(options = {}, ...args) {
   theme.vars = themeVars;
   theme.generateCssVars = generateCssVars;
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = _extends({}, defaultSxConfig, input?.unstable_sxConfig);
+  theme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...input?.unstable_sxConfig
+  };
   theme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/modern/styles/responsiveFontSizes.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
 export default function responsiveFontSizes(themeInput, options = {}) {
@@ -8,8 +7,12 @@ export default function responsiveFontSizes(themeInput, options = {}) {
     factor = 2,
     variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
   } = options;
-  const theme = _extends({}, themeInput);
-  theme.typography = _extends({}, theme.typography);
+  const theme = {
+    ...themeInput
+  };
+  theme.typography = {
+    ...theme.typography
+  };
   const typography = theme.typography;
 
   // Convert between CSS lengths e.g. em->px or px->rem
@@ -46,14 +49,17 @@ Use unitless line heights instead.` : _formatMuiErrorMessage(6));
         })
       });
     }
-    typography[variant] = _extends({}, style, responsiveProperty({
-      cssProperty: 'fontSize',
-      min: minFontSize,
-      max: maxFontSize,
-      unit: 'rem',
-      breakpoints: breakpointValues,
-      transform
-    }));
+    typography[variant] = {
+      ...style,
+      ...responsiveProperty({
+        cssProperty: 'fontSize',
+        min: minFontSize,
+        max: maxFontSize,
+        unit: 'rem',
+        breakpoints: breakpointValues,
+        transform
+      })
+    };
   });
   return theme;
 }

package/modern/usePagination/usePagination.js

@@ -1,24 +1,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
 import { unstable_useControlled as useControlled } from '@mui/utils';
 export default function usePagination(props = {}) {
   // keep default values in sync with @default tags in Pagination.propTypes
   const {
-      boundaryCount = 1,
-      componentName = 'usePagination',
-      count = 1,
-      defaultPage = 1,
-      disabled = false,
-      hideNextButton = false,
-      hidePrevButton = false,
-      onChange: handleChange,
-      page: pageProp,
-      showFirstButton = false,
-      showLastButton = false,
-      siblingCount = 1
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    boundaryCount = 1,
+    componentName = 'usePagination',
+    count = 1,
+    defaultPage = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    page: pageProp,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    ...other
+  } = props;
   const [page, setPageState] = useControlled({
     controlled: pageProp,
     default: defaultPage,
@@ -107,7 +104,8 @@ export default function usePagination(props = {}) {
       disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
     };
   });
-  return _extends({
-    items
-  }, other);
+  return {
+    items,
+    ...other
+  };
 }

package/modern/useScrollTrigger/useScrollTrigger.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getTrigger", "target"];
 import * as React from 'react';
 function defaultTrigger(store, options) {
   const {
@@ -23,17 +20,18 @@ function defaultTrigger(store, options) {
 const defaultTarget = typeof window !== 'undefined' ? window : null;
 export default function useScrollTrigger(options = {}) {
   const {
-      getTrigger = defaultTrigger,
-      target = defaultTarget
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    getTrigger = defaultTrigger,
+    target = defaultTarget,
+    ...other
+  } = options;
   const store = React.useRef();
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
     const handleScroll = () => {
-      setTrigger(getTrigger(store, _extends({
-        target
-      }, other)));
+      setTrigger(getTrigger(store, {
+        target,
+        ...other
+      }));
     };
     handleScroll(); // Re-evaluate trigger when dependencies change
     target.addEventListener('scroll', handleScroll, {

package/modern/utils/createSvgIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import SvgIcon from '../SvgIcon';
 
@@ -8,12 +7,12 @@ import SvgIcon from '../SvgIcon';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/_jsx(SvgIcon, _extends({
+    return /*#__PURE__*/_jsx(SvgIcon, {
       "data-testid": `${displayName}Icon`,
-      ref: ref
-    }, props, {
+      ref: ref,
+      ...props,
       children: path
-    }));
+    });
   }
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.

package/node/Accordion/Accordion.js

@@ -5,8 +5,6 @@ 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 _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -21,7 +19,6 @@ var _AccordionContext = _interopRequireDefault(require("./AccordionContext"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _accordionClasses = _interopRequireWildcard(require("./accordionClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -99,25 +96,28 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
 }, ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, !ownerState.square && {
-  borderRadius: 0,
-  '&:first-of-type': {
-    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
-  },
-  '&:last-of-type': {
-    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-    // Fix a rendering issue on Edge
-    '@supports (-ms-ime-align: auto)': {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
+}) => ({
+  ...(!ownerState.square && {
+    borderRadius: 0,
+    '&:first-of-type': {
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
+    },
+    '&:last-of-type': {
+      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+      // Fix a rendering issue on Edge
+      '@supports (-ms-ime-align: auto)': {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      }
     }
-  }
-}, !ownerState.disableGutters && {
-  [`&.${_accordionClasses.default.expanded}`]: {
-    margin: '16px 0'
-  }
+  }),
+  ...(!ownerState.disableGutters && {
+    [`&.${_accordionClasses.default.expanded}`]: {
+      margin: '16px 0'
+    }
+  })
 }));
 const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   const props = (0, _useThemeProps.default)({
@@ -125,18 +125,18 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     name: 'MuiAccordion'
   });
   const {
-      children: childrenProp,
-      className,
-      defaultExpanded = false,
-      disabled = false,
-      disableGutters = false,
-      expanded: expandedProp,
-      onChange,
-      square = false,
-      TransitionComponent = _Collapse.default,
-      TransitionProps
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children: childrenProp,
+    className,
+    defaultExpanded = false,
+    disabled = false,
+    disableGutters = false,
+    expanded: expandedProp,
+    onChange,
+    square = false,
+    TransitionComponent = _Collapse.default,
+    TransitionProps,
+    ...other
+  } = props;
   const [expanded, setExpandedState] = (0, _useControlled.default)({
     controlled: expandedProp,
     default: defaultExpanded,
@@ -156,26 +156,27 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     disableGutters,
     toggle: handleChange
   }), [expanded, disabled, disableGutters, handleChange]);
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     square,
     disabled,
     disableGutters,
     expanded
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState,
-    square: square
-  }, other, {
+    square: square,
+    ...other,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AccordionContext.default.Provider, {
       value: contextValue,
       children: summary
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
       in: expanded,
-      timeout: "auto"
-    }, TransitionProps, {
+      timeout: "auto",
+      ...TransitionProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         "aria-labelledby": summary.props.id,
         id: summary.props['aria-controls'],
@@ -183,8 +184,8 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
         className: classes.region,
         children: children
       })
-    }))]
-  }));
+    })]
+  });
 });
 process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------