@mui/material 5.0.3 → 5.1.0

package/legacy/Autocomplete/Autocomplete.js

@@ -15,6 +15,10 @@ import ListSubheader from '../ListSubheader';
 import Paper from '../Paper';
 import IconButton from '../IconButton';
 import Chip from '../Chip';
+import inputClasses from '../Input/inputClasses';
+import inputBaseClasses from '../InputBase/inputBaseClasses';
+import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
+import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import useThemeProps from '../styles/useThemeProps';
@@ -67,7 +71,7 @@ var AutocompleteRoot = styled('div', {
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })(function (_ref6) {
-  var _extends2, _$concat, _MuiOutlinedInput, _MuiFilledInputRo, _extends3;
+  var _extends2, _$concat, _$concat2, _$concat3, _extends3;
 
   var ownerState = _ref6.ownerState;
   return _extends((_extends2 = {}, _defineProperty(_extends2, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
@@ -91,45 +95,44 @@ var AutocompleteRoot = styled('div', {
   }), _defineProperty(_$concat, "& .".concat(autocompleteClasses.input), {
     width: 0,
     minWidth: 30
-  }), _$concat)), _defineProperty(_extends3, '& .MuiInput-root', {
+  }), _$concat)), _defineProperty(_extends3, "& .".concat(inputClasses.root), {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px'
     }
-  }), _defineProperty(_extends3, '& .MuiInput-root.MuiInputBase-sizeSmall', {
-    '& .MuiInput-input': {
-      padding: '2px 4px 3px 0'
-    }
-  }), _defineProperty(_extends3, '& .MuiOutlinedInput-root', (_MuiOutlinedInput = {
+  }), _defineProperty(_extends3, "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
+    padding: '2px 4px 3px 0'
+  })), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root), (_$concat2 = {
     padding: 9
-  }, _defineProperty(_MuiOutlinedInput, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }, _defineProperty(_$concat2, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 26 + 4 + 9
-  }), _defineProperty(_MuiOutlinedInput, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }), _defineProperty(_$concat2, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4 + 9
-  }), _defineProperty(_MuiOutlinedInput, "& .".concat(autocompleteClasses.input), {
+  }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.input), {
     padding: '7.5px 4px 7.5px 6px'
-  }), _defineProperty(_MuiOutlinedInput, "& .".concat(autocompleteClasses.endAdornment), {
+  }), _defineProperty(_$concat2, "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
-  }), _MuiOutlinedInput)), _defineProperty(_extends3, '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall', _defineProperty({
+  }), _$concat2)), _defineProperty(_extends3, "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
     padding: 6
   }, "& .".concat(autocompleteClasses.input), {
     padding: '2.5px 4px 2.5px 6px'
-  })), _defineProperty(_extends3, '& .MuiFilledInput-root', (_MuiFilledInputRo = {
+  })), _defineProperty(_extends3, "& .".concat(filledInputClasses.root), (_$concat3 = {
     paddingTop: 19,
     paddingLeft: 8
-  }, _defineProperty(_MuiFilledInputRo, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }, _defineProperty(_$concat3, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 26 + 4 + 9
-  }), _defineProperty(_MuiFilledInputRo, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  }), _defineProperty(_$concat3, ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
     paddingRight: 52 + 4 + 9
-  }), _defineProperty(_MuiFilledInputRo, '& .MuiFilledInput-input', {
+  }), _defineProperty(_$concat3, "& .".concat(filledInputClasses.input), {
     padding: '7px 4px'
-  }), _defineProperty(_MuiFilledInputRo, "& .".concat(autocompleteClasses.endAdornment), {
+  }), _defineProperty(_$concat3, "& .".concat(autocompleteClasses.endAdornment), {
     right: 9
-  }), _MuiFilledInputRo)), _defineProperty(_extends3, '& .MuiFilledInput-root.MuiInputBase-sizeSmall', {
-    paddingBottom: 1,
-    '& .MuiFilledInput-input': {
-      padding: '2.5px 4px'
-    }
+  }), _$concat3)), _defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+    paddingBottom: 1
+  }, "& .".concat(filledInputClasses.input), {
+    padding: '2.5px 4px'
+  })), _defineProperty(_extends3, "& .".concat(inputBaseClasses.hiddenLabel), {
+    paddingTop: 8
   }), _defineProperty(_extends3, "& .".concat(autocompleteClasses.input), _extends({
     flexGrow: 1,
     textOverflow: 'ellipsis',
@@ -239,7 +242,7 @@ var AutocompleteListbox = styled('div', {
     return styles.listbox;
   }
 })(function (_ref14) {
-  var _ariaSelectedTru, _$concat2;
+  var _ariaSelectedTru, _$concat4;
 
   var theme = _ref14.theme;
   return _defineProperty({
@@ -248,7 +251,7 @@ var AutocompleteListbox = styled('div', {
     padding: '8px 0',
     maxHeight: '40vh',
     overflow: 'auto'
-  }, "& .".concat(autocompleteClasses.option), (_$concat2 = {
+  }, "& .".concat(autocompleteClasses.option), (_$concat4 = {
     minHeight: 48,
     display: 'flex',
     overflow: 'hidden',
@@ -262,20 +265,20 @@ var AutocompleteListbox = styled('div', {
     paddingBottom: 6,
     paddingLeft: 16,
     paddingRight: 16
-  }, _defineProperty(_$concat2, theme.breakpoints.up('sm'), {
+  }, _defineProperty(_$concat4, theme.breakpoints.up('sm'), {
     minHeight: 'auto'
-  }), _defineProperty(_$concat2, "&.".concat(autocompleteClasses.focused), {
+  }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focused), {
     backgroundColor: theme.palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }), _defineProperty(_$concat2, '&[aria-disabled="true"]', {
+  }), _defineProperty(_$concat4, '&[aria-disabled="true"]', {
     opacity: theme.palette.action.disabledOpacity,
     pointerEvents: 'none'
-  }), _defineProperty(_$concat2, "&.".concat(autocompleteClasses.focusVisible), {
+  }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focusVisible), {
     backgroundColor: theme.palette.action.focus
-  }), _defineProperty(_$concat2, '&[aria-selected="true"]', (_ariaSelectedTru = {
+  }), _defineProperty(_$concat4, '&[aria-selected="true"]', (_ariaSelectedTru = {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focused), {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
@@ -285,7 +288,7 @@ var AutocompleteListbox = styled('div', {
     }
   }), _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focusVisible), {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  }), _ariaSelectedTru)), _$concat2));
+  }), _ariaSelectedTru)), _$concat4));
 });
 var AutocompleteGroupLabel = styled(ListSubheader, {
   name: 'MuiAutocomplete',
@@ -1021,7 +1024,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Render the group.
    *
-   * @param {any} option The group to render.
+   * @param {AutocompleteRenderGroupParams} params The group to render.
    * @returns {ReactNode}
    */
   renderGroup: PropTypes.func,
@@ -1071,7 +1074,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the autocomplete.

package/legacy/Avatar/Avatar.js

@@ -258,7 +258,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The shape of the avatar.

package/legacy/AvatarGroup/AvatarGroup.js

@@ -9,7 +9,7 @@ import { chainPropTypes } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import Avatar from '../Avatar';
+import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SPACINGS = {
@@ -36,7 +36,7 @@ var AvatarGroupRoot = styled('div', {
   var _ref2;
 
   var theme = _ref.theme;
-  return _ref2 = {}, _defineProperty(_ref2, "& .MuiAvatar-root", {
+  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(avatarClasses.root), {
     border: "2px solid ".concat(theme.palette.background.default),
     boxSizing: 'content-box',
     marginLeft: -8,
@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/Backdrop/Backdrop.js

@@ -140,7 +140,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The duration for the transition, in milliseconds.

package/legacy/Badge/Badge.js

@@ -293,7 +293,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/BottomNavigation/BottomNavigation.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the currently selected `BottomNavigationAction`.

package/legacy/BottomNavigationAction/BottomNavigationAction.js

@@ -172,7 +172,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/legacy/Box/Box.js

@@ -1,4 +1,5 @@
 import { createBox } from '@mui/system';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '../utils';
 import { createTheme } from '../styles';
 var defaultTheme = createTheme();
 /**
@@ -6,6 +7,8 @@ var defaultTheme = createTheme();
  */
 
 var Box = createBox({
-  defaultTheme: defaultTheme
+  defaultTheme: defaultTheme,
+  defaultClassName: 'MuiBox-root',
+  generateClassName: ClassNameGenerator.generate
 });
 export default Box;

package/legacy/Breadcrumbs/Breadcrumbs.js

@@ -241,6 +241,6 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Breadcrumbs;

package/legacy/Button/Button.js

@@ -11,6 +11,7 @@ import useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
+import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -217,28 +218,44 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     name: 'MuiButton'
   });
 
+  var _React$useContext = React.useContext(ButtonGroupContext),
+      classNameContext = _React$useContext.className,
+      colorContext = _React$useContext.color,
+      disabledContext = _React$useContext.disabled,
+      disableElevationContext = _React$useContext.disableElevation,
+      disableFocusRippleContext = _React$useContext.disableFocusRipple,
+      disableRippleContext = _React$useContext.disableRipple,
+      fullWidthContext = _React$useContext.fullWidth,
+      sizeContext = _React$useContext.size,
+      variantContext = _React$useContext.variant;
+
   var children = props.children,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'primary' : _props$color,
+      className = props.className,
+      colorProp = props.color,
       _props$component = props.component,
       component = _props$component === void 0 ? 'button' : _props$component,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$disableElevati = props.disableElevation,
-      disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati,
-      _props$disableFocusRi = props.disableFocusRipple,
-      disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,
+      disabledProp = props.disabled,
+      disableElevationProp = props.disableElevation,
+      disableFocusRippleProp = props.disableFocusRipple,
+      disableRippleProp = props.disableRipple,
       endIconProp = props.endIcon,
       focusVisibleClassName = props.focusVisibleClassName,
-      _props$fullWidth = props.fullWidth,
-      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'medium' : _props$size,
+      fullWidthProp = props.fullWidth,
+      sizeProp = props.size,
       startIconProp = props.startIcon,
       type = props.type,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'text' : _props$variant,
-      other = _objectWithoutProperties(props, ["children", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);
+      variantProp = props.variant,
+      other = _objectWithoutProperties(props, ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);
+
+  var color = colorProp || colorContext || 'primary'; // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
+
+  var disabled = disabledProp || disabledContext || false;
+  var disableElevation = disableElevationProp || disableElevationContext || false;
+  var disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
+  var fullWidth = fullWidthProp || fullWidthContext || false;
+  var size = sizeProp || sizeContext || 'medium';
+  var variant = variantProp || variantContext || 'text';
+  var disableRipple = disableRippleProp || disableRippleContext || false;
 
   var ownerState = _extends({}, props, {
     color: color,
@@ -268,8 +285,10 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
 
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
+    className: clsx(className, classNameContext),
     component: component,
     disabled: disabled,
+    disableRipple: disableRipple,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
@@ -297,6 +316,11 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'
@@ -377,7 +401,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * @ignore

package/legacy/ButtonBase/ButtonBase.js

@@ -532,7 +532,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * @default 0

package/legacy/ButtonGroup/ButtonGroup.js

@@ -2,7 +2,6 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
-import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
@@ -11,6 +10,7 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
+import ButtonGroupContext from './ButtonGroupContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var overridesResolver = function overridesResolver(props, styles) {
@@ -90,10 +90,14 @@ var ButtonGroupRoot = styled('div', {
       borderBottom: "1px solid ".concat(theme.palette.action.disabled)
     }), ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
       borderColor: theme.palette[ownerState.color].dark
+    }, {
+      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+        borderRightColor: 'currentColor'
+      }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+        borderBottomColor: 'currentColor'
+      })
     }),
-    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      borderColor: theme.palette[ownerState.color].main
-    }, ownerState.variant === 'contained' && {
+    '&:hover': _extends({}, ownerState.variant === 'contained' && {
       boxShadow: 'none'
     })
   }, ownerState.variant === 'contained' && {
@@ -144,6 +148,19 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, re
   });
 
   var classes = useUtilityClasses(ownerState);
+  var context = React.useMemo(function () {
+    return {
+      className: classes.grouped,
+      color: color,
+      disabled: disabled,
+      disableElevation: disableElevation,
+      disableFocusRipple: disableFocusRipple,
+      disableRipple: disableRipple,
+      fullWidth: fullWidth,
+      size: size,
+      variant: variant
+    };
+  }, [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
   return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
     as: component,
     role: "group",
@@ -151,28 +168,9 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, re
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: React.Children.map(children, function (child) {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-
-      if (process.env.NODE_ENV !== 'production') {
-        if (isFragment(child)) {
-          console.error(["MUI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
-        }
-      }
-
-      return /*#__PURE__*/React.cloneElement(child, {
-        className: clsx(classes.grouped, child.props.className),
-        color: child.props.color || color,
-        disabled: child.props.disabled || disabled,
-        disableElevation: child.props.disableElevation || disableElevation,
-        disableFocusRipple: disableFocusRipple,
-        disableRipple: disableRipple,
-        fullWidth: fullWidth,
-        size: child.props.size || size,
-        variant: child.props.variant || variant
-      });
+    children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: children
     })
   }));
 });
@@ -261,7 +259,7 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+var ButtonGroupContext = /*#__PURE__*/React.createContext({});
+
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
+
+export default ButtonGroupContext;

package/legacy/Card/Card.js

@@ -91,6 +91,6 @@ process.env.NODE_ENV !== "production" ? Card.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Card;

package/legacy/CardActionArea/CardActionArea.js

@@ -124,6 +124,6 @@ process.env.NODE_ENV !== "production" ? CardActionArea.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardActionArea;

package/legacy/CardActions/CardActions.js

@@ -91,6 +91,6 @@ process.env.NODE_ENV !== "production" ? CardActions.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardActions;

package/legacy/CardContent/CardContent.js

@@ -86,6 +86,6 @@ process.env.NODE_ENV !== "production" ? CardContent.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardContent;

package/legacy/CardHeader/CardHeader.js

@@ -208,7 +208,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The content of the component.

package/legacy/CardMedia/CardMedia.js

@@ -75,7 +75,7 @@ var CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref) {
   return /*#__PURE__*/_jsx(CardMediaRoot, _extends({
     className: clsx(classes.root, className),
     as: component,
-    role: !isMediaComponent && image ? 'image' : undefined,
+    role: !isMediaComponent && image ? 'img' : undefined,
     ref: ref,
     style: composedStyle,
     ownerState: ownerState,
@@ -141,6 +141,6 @@ process.env.NODE_ENV !== "production" ? CardMedia.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default CardMedia;

package/legacy/Checkbox/Checkbox.js

@@ -223,7 +223,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the component. The DOM API casts this to a string.

package/legacy/Chip/Chip.js

@@ -305,11 +305,12 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-  var moreProps = component === ButtonBase ? {
+  var moreProps = component === ButtonBase ? _extends({
     component: ComponentProp || 'div',
-    focusVisibleClassName: classes.focusVisible,
-    disableRipple: Boolean(onDelete)
-  } : {};
+    focusVisibleClassName: classes.focusVisible
+  }, onDelete && {
+    disableRipple: true
+  }) : {};
   var deleteIcon = null;
 
   if (onDelete) {
@@ -468,7 +469,7 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/legacy/CircularProgress/CircularProgress.js

@@ -221,7 +221,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The thickness of the circle.

package/legacy/ClickAwayListener/index.js

@@ -1,2 +1,2 @@
-export { default } from './ClickAwayListener';
-export * from './ClickAwayListener';
+export { default } from '@mui/core/ClickAwayListener';
+export * from '@mui/core/ClickAwayListener';

package/legacy/Collapse/Collapse.js

@@ -407,7 +407,7 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The duration for the transition, in milliseconds.

package/legacy/Container/Container.js

@@ -157,6 +157,6 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Container;