@mui/material 5.13.0 → 5.13.1

package/modern/ButtonGroup/ButtonGroup.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-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';
@@ -51,78 +48,102 @@ const ButtonGroupRoot = styled('div', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.variant === 'contained' && {
-  boxShadow: (theme.vars || theme).shadows[2]
-}, ownerState.disableElevation && {
-  boxShadow: 'none'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, {
-  [`& .${buttonGroupClasses.grouped}`]: _extends({
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  ...(ownerState.variant === 'contained' && {
+    boxShadow: (theme.vars || theme).shadows[2]
+  }),
+  ...(ownerState.disableElevation && {
+    boxShadow: 'none'
+  }),
+  ...(ownerState.fullWidth && {
+    width: '100%'
+  }),
+  ...(ownerState.orientation === 'vertical' && {
+    flexDirection: 'column'
+  }),
+  [`& .${buttonGroupClasses.grouped}`]: {
     minWidth: 40,
-    '&:not(:first-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderTopRightRadius: 0,
-      borderTopLeftRadius: 0
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      marginLeft: -1
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      marginTop: -1
-    }),
-    '&:not(:last-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-      borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'transparent'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'transparent'
-    }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    '&:not(:first-of-type)': {
+      ...(ownerState.orientation === 'horizontal' && {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }),
+      ...(ownerState.orientation === 'vertical' && {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      }),
+      ...(ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+        marginLeft: -1
+      }),
+      ...(ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+        marginTop: -1
+      })
+    },
+    '&:not(:last-of-type)': {
+      ...(ownerState.orientation === 'horizontal' && {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      }),
+      ...(ownerState.orientation === 'vertical' && {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      }),
+      ...(ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
+        borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }),
+      ...(ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
+        borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }),
+      ...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
+      }),
+      ...(ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+        borderRightColor: 'transparent'
+      }),
+      ...(ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+        borderBottomColor: 'transparent'
+      }),
+      ...(ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
+        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }),
+      ...(ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }),
+      ...(ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+        borderColor: (theme.vars || theme).palette[ownerState.color].dark
+      }),
+      '&:hover': {
+        ...(ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+          borderRightColor: 'currentColor'
+        }),
+        ...(ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+          borderBottomColor: 'currentColor'
+        })
       }
-    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: (theme.vars || theme).palette[ownerState.color].dark
-    }, {
-      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-        borderRightColor: 'currentColor'
-      }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-        borderBottomColor: 'currentColor'
+    },
+    '&:hover': {
+      ...(ownerState.variant === 'contained' && {
+        boxShadow: 'none'
       })
-    }),
-    '&:hover': _extends({}, ownerState.variant === 'contained' && {
+    },
+    ...(ownerState.variant === 'contained' && {
       boxShadow: 'none'
     })
-  }, ownerState.variant === 'contained' && {
-    boxShadow: 'none'
-  })
+  }
 }));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
   const props = useThemeProps({
@@ -130,21 +151,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,
@@ -155,7 +177,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     orientation,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const context = React.useMemo(() => ({
     className: classes.grouped,
@@ -168,18 +190,18 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     size,
     variant
   }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
-  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: children
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/Card/Card.js

@@ -1,6 +1,3 @@
-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/modern/CardActionArea/CardActionArea.js

@@ -1,6 +1,3 @@
-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';
@@ -70,24 +67,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/modern/CardActions/CardActions.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableSpacing", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -30,14 +27,15 @@ const CardActionsRoot = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   display: 'flex',
   alignItems: 'center',
-  padding: 8
-}, !ownerState.disableSpacing && {
-  '& > :not(:first-of-type)': {
-    marginLeft: 8
-  }
+  padding: 8,
+  ...(!ownerState.disableSpacing && {
+    '& > :not(:first-of-type)': {
+      marginLeft: 8
+    }
+  })
 }));
 const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
   const props = useThemeProps({
@@ -45,19 +43,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/modern/CardContent/CardContent.js

@@ -1,6 +1,3 @@
-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/modern/CardHeader/CardHeader.js

@@ -1,6 +1,3 @@
-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';
@@ -28,10 +25,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',
@@ -70,51 +68,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,
@@ -128,7 +127,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/modern/CardMedia/CardMedia.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "image", "src", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,16 +33,18 @@ const CardMediaRoot = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   display: 'block',
   backgroundSize: 'cover',
   backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center'
-}, ownerState.isMediaComponent && {
-  width: '100%'
-}, ownerState.isImageComponent && {
-  // ⚠️ object-fit is not supported by IE11.
-  objectFit: 'cover'
+  backgroundPosition: 'center',
+  ...(ownerState.isMediaComponent && {
+    width: '100%'
+  }),
+  ...(ownerState.isImageComponent && {
+    // ⚠️ object-fit is not supported by IE11.
+    objectFit: 'cover'
+  })
 }));
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 const IMAGE_COMPONENTS = ['picture', 'img'];
@@ -55,35 +54,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 --------------------------------