@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.8

package/ButtonBase/ButtonBase.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -88,36 +85,37 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     name: 'MuiButtonBase'
   });
   const {
-      action,
-      centerRipple = false,
-      children,
-      className,
-      component = 'button',
-      disabled = false,
-      disableRipple = false,
-      disableTouchRipple = false,
-      focusRipple = false,
-      LinkComponent = 'a',
-      onBlur,
-      onClick,
-      onContextMenu,
-      onDragLeave,
-      onFocus,
-      onFocusVisible,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseLeave,
-      onMouseUp,
-      onTouchEnd,
-      onTouchMove,
-      onTouchStart,
-      tabIndex = 0,
-      TouchRippleProps,
-      touchRippleRef,
-      type
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    action,
+    centerRipple = false,
+    children,
+    className,
+    component = 'button',
+    disabled = false,
+    disableRipple = false,
+    disableTouchRipple = false,
+    focusRipple = false,
+    focusVisibleClassName,
+    LinkComponent = 'a',
+    onBlur,
+    onClick,
+    onContextMenu,
+    onDragLeave,
+    onFocus,
+    onFocusVisible,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onMouseUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    tabIndex = 0,
+    TouchRippleProps,
+    touchRippleRef,
+    type,
+    ...other
+  } = props;
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -274,7 +272,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       }
     }, [enableTouchRipple]);
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     centerRipple,
     component,
     disabled,
@@ -283,9 +282,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     focusRipple,
     tabIndex,
     focusVisible
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(ButtonBaseRoot, _extends({
+  return /*#__PURE__*/_jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -304,16 +303,18 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchStart: handleTouchStart,
     ref: handleRef,
     tabIndex: disabled ? -1 : tabIndex,
-    type: type
-  }, buttonProps, other, {
+    type: type,
+    ...buttonProps,
+    ...other,
     children: [children, enableTouchRipple ?
     /*#__PURE__*/
     /* TouchRipple is only needed client-side, x2 boost on the server. */
-    _jsx(TouchRipple, _extends({
+    _jsx(TouchRipple, {
       ref: handleRippleRef,
-      center: centerRipple
-    }, TouchRippleProps)) : null]
-  }));
+      center: centerRipple,
+      ...TouchRippleProps
+    }) : null]
+  });
 });
 process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ButtonBase/TouchRipple.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["center", "classes", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
@@ -132,11 +129,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     name: 'MuiTouchRipple'
   });
   const {
-      center: centerProp = false,
-      classes = {},
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    center: centerProp = false,
+    classes = {},
+    className,
+    ...other
+  } = props;
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -298,16 +295,16 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     start,
     stop
   }), [pulsate, start, stop]);
-  return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({
+  return /*#__PURE__*/_jsx(TouchRippleRoot, {
     className: clsx(touchRippleClasses.root, classes.root, className),
-    ref: container
-  }, other, {
+    ref: container,
+    ...other,
     children: /*#__PURE__*/_jsx(TransitionGroup, {
       component: null,
       exit: true,
       children: ripples
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? TouchRipple.propTypes /* remove-proptypes */ = {
   /**

package/ButtonGroup/ButtonGroup.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -142,7 +139,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).flatMap(([color]) => [{
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).flatMap(([color]) => [{
     props: {
       variant: 'text',
       color
@@ -210,7 +207,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
     props: {
       variant: 'contained',
       color
@@ -240,21 +237,22 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     name: 'MuiButtonGroup'
   });
   const {
-      children,
-      className,
-      color = 'primary',
-      component = 'div',
-      disabled = false,
-      disableElevation = false,
-      disableFocusRipple = false,
-      disableRipple = false,
-      fullWidth = false,
-      orientation = 'horizontal',
-      size = 'medium',
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'primary',
+    component = 'div',
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    disableRipple = false,
+    fullWidth = false,
+    orientation = 'horizontal',
+    size = 'medium',
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -265,7 +263,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     orientation,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const context = React.useMemo(() => ({
     className: classes.grouped,
@@ -294,13 +292,13 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     }
     return classes.middleButton;
   };
-  return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
+  return /*#__PURE__*/_jsx(ButtonGroupRoot, {
     as: component,
     role: "group",
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
       value: context,
       children: validChildren.map((child, index) => {
@@ -310,7 +308,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
         }, index);
       })
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.8
+
+<!-- generated comparing v6.0.0-alpha.7..next -->
+
+_May 21, 2024_
+
+A big thanks to the 7 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@6.0.0-alpha.7`
+
+- &#8203;<!-- 04 -->[material-ui] Filter only valid theme palette for generating styles (#42147) @siriwatknp
+- &#8203;<!-- 03 -->[material-ui] Remove UMD bundle (#42172) @ZeeshanTamboli
+- &#8203;<!-- 02 -->[material-ui][TextField] Deprecate `*Props` props (#42062) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 08 -->[docs] Remove Base UI from the README (#42307) @danilo-leal
+- &#8203;<!-- 07 -->[docs][material-ui] Fix typo in style interoperability with Tailwind CSS docs (#42279) @ZeeshanTamboli
+- &#8203;<!-- 06 -->[docs][material-ui] Add supported browsers section to migration guide (#42194) @DiegoAndai
+- &#8203;<!-- 05 -->[docs][material-ui][Pagination] Clarify pagination `page` prop API (#42220) @Mandar-Pandya
+
+### Core
+
+- &#8203;<!-- 12 -->[blog] Update blog post OG image (#42270) @danilo-leal
+- &#8203;<!-- 11 -->[blog] Update Pigment CSS post (#42266) @danilo-leal
+- &#8203;<!-- 10 -->[docs] Remove LocalMonero (#42224) @oliviertassinari
+- &#8203;<!-- 08 -->[docs-infra] Fix keyboard navigation on page tabs (#42152) @danilo-leal
+- &#8203;<!-- 10 -->[code-infra] Remove raw-loader (#42275) @Janpot
+- &#8203;<!-- 09 -->[core] Remove outdated Babel plugins (#42140) @ZeeshanTamboli
+- &#8203;<!-- 12 -->[core] Fix a few more key spread issues (#42168) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Avoid duplicate simple vs. rich (#42100) @oliviertassinari
+
+All contributors of this release in alphabetical order: @danilo-leal, @DiegoAndai, @Janpot, @Mandar-Pandya, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
+
 ## v6.0.0-alpha.7
 
 <!-- generated comparing v6.0.0-alpha.6..next -->
@@ -53,7 +88,7 @@ All contributors of this release in alphabetical order: @aarongarciah, @alexfauq
 
 _May 8, 2024_
 
-A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+A big thanks to the 10 contributors who made this release possible.
 
 ### `@mui/material@6.0.0-alpha.6`
 
@@ -101,7 +136,7 @@ All contributors of this release in alphabetical order: @aarongarciah, @danilo-l
 
 _May 1, 2024_
 
-A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+A big thanks to the 9 contributors who made this release possible.
 
 ### `@mui/material@6.0.0-alpha.5`
 

package/Card/Card.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "raised"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -35,20 +32,22 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
     name: 'MuiCard'
   });
   const {
-      className,
-      raised = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    raised = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     raised
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CardRoot, _extends({
+  return /*#__PURE__*/_jsx(CardRoot, {
     className: clsx(classes.root, className),
     elevation: raised ? 8 : undefined,
     ref: ref,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Card.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/CardActionArea/CardActionArea.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "focusVisibleClassName"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -71,24 +68,24 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     name: 'MuiCardActionArea'
   });
   const {
-      children,
-      className,
-      focusVisibleClassName
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    focusVisibleClassName,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(CardActionAreaRoot, _extends({
+  return /*#__PURE__*/_jsxs(CardActionAreaRoot, {
     className: clsx(classes.root, className),
     focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [children, /*#__PURE__*/_jsx(CardActionAreaFocusHighlight, {
       className: classes.focusHighlight,
       ownerState: ownerState
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? CardActionArea.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/CardActions/CardActions.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["disableSpacing", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -51,19 +48,21 @@ const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps,
     name: 'MuiCardActions'
   });
   const {
-      disableSpacing = false,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    disableSpacing = false,
+    className,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableSpacing
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CardActionsRoot, _extends({
+  return /*#__PURE__*/_jsx(CardActionsRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? CardActions.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/CardContent/CardContent.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,20 +33,22 @@ const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps,
     name: 'MuiCardContent'
   });
   const {
-      className,
-      component = 'div'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CardContentRoot, _extends({
+  return /*#__PURE__*/_jsx(CardContentRoot, {
     as: component,
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? CardContent.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/CardHeader/CardHeader.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -29,10 +26,11 @@ const useUtilityClasses = ownerState => {
 const CardHeaderRoot = styled('div', {
   name: 'MuiCardHeader',
   slot: 'Root',
-  overridesResolver: (props, styles) => _extends({
+  overridesResolver: (props, styles) => ({
     [`& .${cardHeaderClasses.title}`]: styles.title,
-    [`& .${cardHeaderClasses.subheader}`]: styles.subheader
-  }, styles.root)
+    [`& .${cardHeaderClasses.subheader}`]: styles.subheader,
+    ...styles.root
+  })
 })({
   display: 'flex',
   alignItems: 'center',
@@ -71,51 +69,52 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
     name: 'MuiCardHeader'
   });
   const {
-      action,
-      avatar,
-      className,
-      component = 'div',
-      disableTypography = false,
-      subheader: subheaderProp,
-      subheaderTypographyProps,
-      title: titleProp,
-      titleTypographyProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    action,
+    avatar,
+    className,
+    component = 'div',
+    disableTypography = false,
+    subheader: subheaderProp,
+    subheaderTypographyProps,
+    title: titleProp,
+    titleTypographyProps,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     disableTypography
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   let title = titleProp;
   if (title != null && title.type !== Typography && !disableTypography) {
-    title = /*#__PURE__*/_jsx(Typography, _extends({
+    title = /*#__PURE__*/_jsx(Typography, {
       variant: avatar ? 'body2' : 'h5',
       className: classes.title,
       component: "span",
-      display: "block"
-    }, titleTypographyProps, {
+      display: "block",
+      ...titleTypographyProps,
       children: title
-    }));
+    });
   }
   let subheader = subheaderProp;
   if (subheader != null && subheader.type !== Typography && !disableTypography) {
-    subheader = /*#__PURE__*/_jsx(Typography, _extends({
+    subheader = /*#__PURE__*/_jsx(Typography, {
       variant: avatar ? 'body2' : 'body1',
       className: classes.subheader,
       color: "text.secondary",
       component: "span",
-      display: "block"
-    }, subheaderTypographyProps, {
+      display: "block",
+      ...subheaderTypographyProps,
       children: subheader
-    }));
+    });
   }
-  return /*#__PURE__*/_jsxs(CardHeaderRoot, _extends({
+  return /*#__PURE__*/_jsxs(CardHeaderRoot, {
     className: clsx(classes.root, className),
     as: component,
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [avatar && /*#__PURE__*/_jsx(CardHeaderAvatar, {
       className: classes.avatar,
       ownerState: ownerState,
@@ -129,7 +128,7 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
       ownerState: ownerState,
       children: action
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/CardMedia/CardMedia.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "image", "src", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -65,35 +62,37 @@ const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref)
     name: 'MuiCardMedia'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      image,
-      src,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'div',
+    image,
+    src,
+    style,
+    ...other
+  } = props;
   const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
-  const composedStyle = !isMediaComponent && image ? _extends({
-    backgroundImage: `url("${image}")`
-  }, style) : style;
-  const ownerState = _extends({}, props, {
+  const composedStyle = !isMediaComponent && image ? {
+    backgroundImage: `url("${image}")`,
+    ...style
+  } : style;
+  const ownerState = {
+    ...props,
     component,
     isMediaComponent,
     isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(CardMediaRoot, _extends({
+  return /*#__PURE__*/_jsx(CardMediaRoot, {
     className: clsx(classes.root, className),
     as: component,
     role: !isMediaComponent && image ? 'img' : undefined,
     ref: ref,
     style: composedStyle,
     ownerState: ownerState,
-    src: isMediaComponent ? image || src : undefined
-  }, other, {
+    src: isMediaComponent ? image || src : undefined,
+    ...other,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? CardMedia.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐