@mui/material 5.0.6 → 5.1.0

package/modern/TableRow/TableRow.js

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

package/modern/TableSortLabel/TableSortLabel.js

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

package/modern/Tabs/Tabs.js

@@ -807,7 +807,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Props applied to the tab indicator element.

package/modern/TextField/TextField.js

@@ -409,7 +409,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).

package/modern/ToggleButton/ToggleButton.js

@@ -226,7 +226,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value to associate with the button when selected in a

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

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

package/modern/Toolbar/Toolbar.js

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

package/modern/Tooltip/Tooltip.js

@@ -608,7 +608,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       id: id,
       transition: true
     }, interactiveWrapperListeners, popperProps, {
-      className: clsx(classes.popper, componentsProps.popper?.className),
+      className: clsx(classes.popper, PopperProps?.className, componentsProps.popper?.className),
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
@@ -669,6 +669,8 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
 
   /**
    * The props used for each slot inside the Tooltip.
+   * Note that `componentsProps.popper` prop values win over `PopperProps`
+   * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
    * @default {}
    */
   componentsProps: PropTypes.object,
@@ -789,7 +791,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Tooltip title. Zero-length titles string are never displayed.

package/modern/Typography/Typography.js

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

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.6
+/** @license MUI v5.1.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/styles/createPalette.js

@@ -182,7 +182,7 @@ function getDefaultWarning(mode = 'light') {
   }
 
   return {
-    main: '#ED6C02',
+    main: '#ed6c02',
     // closest to orange[800] that pass 3:1.
     light: orange[500],
     dark: orange[900]

package/node/Accordion/Accordion.js

@@ -285,7 +285,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The component used for the transition.

package/node/AccordionActions/AccordionActions.js

@@ -117,7 +117,7 @@ process.env.NODE_ENV !== "production" ? AccordionActions.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AccordionActions;
 exports.default = _default;

package/node/AccordionDetails/AccordionDetails.js

@@ -95,7 +95,7 @@ process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AccordionDetails;
 exports.default = _default;

package/node/AccordionSummary/AccordionSummary.js

@@ -225,7 +225,7 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AccordionSummary;
 exports.default = _default;

package/node/Alert/Alert.js

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

package/node/AlertTitle/AlertTitle.js

@@ -102,7 +102,7 @@ process.env.NODE_ENV !== "production" ? AlertTitle.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AlertTitle;
 exports.default = _default;

package/node/AppBar/AppBar.js

@@ -190,7 +190,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = AppBar;
 exports.default = _default;

package/node/Autocomplete/Autocomplete.js

@@ -217,6 +217,9 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       padding: '2.5px 4px'
     }
   },
+  [`& .${_inputBaseClasses.default.hiddenLabel}`]: {
+    paddingTop: 8
+  },
   [`& .${_autocompleteClasses.default.input}`]: (0, _extends2.default)({
     flexGrow: 1,
     textOverflow: 'ellipsis',
@@ -1080,7 +1083,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The value of the autocomplete.

package/node/Avatar/Avatar.js

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

package/node/AvatarGroup/AvatarGroup.js

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

package/node/Backdrop/Backdrop.js

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

package/node/Badge/Badge.js

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

package/node/BottomNavigation/BottomNavigation.js

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

package/node/BottomNavigationAction/BottomNavigationAction.js

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

package/node/Box/Box.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _system = require("@mui/system");
 
+var _utils = require("../utils");
+
 var _styles = require("../styles");
 
 const defaultTheme = (0, _styles.createTheme)();
@@ -15,7 +17,9 @@ const defaultTheme = (0, _styles.createTheme)();
  */
 
 const Box = (0, _system.createBox)({
-  defaultTheme
+  defaultTheme,
+  defaultClassName: 'MuiBox-root',
+  generateClassName: _utils.unstable_ClassNameGenerator.generate
 });
 var _default = Box;
 exports.default = _default;

package/node/Breadcrumbs/Breadcrumbs.js

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

package/node/Button/Button.js

@@ -31,9 +31,11 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
 
+var _ButtonGroupContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupContext"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
 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); }
 
@@ -242,22 +244,44 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     props: inProps,
     name: 'MuiButton'
   });
+  const {
+    className: classNameContext,
+    color: colorContext,
+    disabled: disabledContext,
+    disableElevation: disableElevationContext,
+    disableFocusRipple: disableFocusRippleContext,
+    disableRipple: disableRippleContext,
+    fullWidth: fullWidthContext,
+    size: sizeContext,
+    variant: variantContext
+  } = React.useContext(_ButtonGroupContext.default);
   const {
     children,
-    color = 'primary',
+    className,
+    color: colorProp,
     component = 'button',
-    disabled = false,
-    disableElevation = false,
-    disableFocusRipple = false,
+    disabled: disabledProp,
+    disableElevation: disableElevationProp,
+    disableFocusRipple: disableFocusRippleProp,
+    disableRipple: disableRippleProp,
     endIcon: endIconProp,
     focusVisibleClassName,
-    fullWidth = false,
-    size = 'medium',
+    fullWidth: fullWidthProp,
+    size: sizeProp,
     startIcon: startIconProp,
     type,
-    variant = 'text'
+    variant: variantProp
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const 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.
+
+  const disabled = disabledProp || disabledContext || false;
+  const disableElevation = disableElevationProp || disableElevationContext || false;
+  const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
+  const fullWidth = fullWidthProp || fullWidthContext || false;
+  const size = sizeProp || sizeContext || 'medium';
+  const variant = variantProp || variantContext || 'text';
+  const disableRipple = disableRippleProp || disableRippleContext || false;
   const ownerState = (0, _extends2.default)({}, props, {
     color,
     component,
@@ -282,8 +306,10 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, (0, _extends2.default)({
     ownerState: ownerState,
+    className: (0, _clsx.default)(className, classNameContext),
     component: component,
     disabled: disabled,
+    disableRipple: disableRipple,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     ref: ref,
@@ -311,6 +337,11 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'
@@ -391,7 +422,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * @ignore

package/node/ButtonBase/ButtonBase.js

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

package/node/ButtonGroup/ButtonGroup.js

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _reactIs = require("react-is");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -31,6 +29,8 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _buttonGroupClasses = _interopRequireWildcard(require("./buttonGroupClasses"));
 
+var _ButtonGroupContext = _interopRequireDefault(require("./ButtonGroupContext"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
@@ -133,10 +133,14 @@ const ButtonGroupRoot = (0, _styled.default)('div', {
       }
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
       borderColor: theme.palette[ownerState.color].dark
+    }, {
+      '&:hover': (0, _extends2.default)({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+        borderRightColor: 'currentColor'
+      }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+        borderBottomColor: 'currentColor'
+      })
     }),
-    '&:hover': (0, _extends2.default)({}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      borderColor: theme.palette[ownerState.color].main
-    }, ownerState.variant === 'contained' && {
+    '&:hover': (0, _extends2.default)({}, ownerState.variant === 'contained' && {
       boxShadow: 'none'
     })
   }, ownerState.variant === 'contained' && {
@@ -176,6 +180,17 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const context = React.useMemo(() => ({
+    className: classes.grouped,
+    color,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    disableRipple,
+    fullWidth,
+    size,
+    variant
+  }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonGroupRoot, (0, _extends2.default)({
     as: component,
     role: "group",
@@ -183,28 +198,9 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: React.Children.map(children, child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-
-      if (process.env.NODE_ENV !== 'production') {
-        if ((0, _reactIs.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: (0, _clsx.default)(classes.grouped, child.props.className),
-        color: child.props.color || color,
-        disabled: child.props.disabled || disabled,
-        disableElevation: child.props.disableElevation || disableElevation,
-        disableFocusRipple,
-        disableRipple,
-        fullWidth,
-        size: child.props.size || size,
-        variant: child.props.variant || variant
-      });
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupContext.default.Provider, {
+      value: context,
+      children: children
     })
   }));
 });
@@ -293,7 +289,7 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The variant to use.

package/node/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupContext = /*#__PURE__*/React.createContext({});
+
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
+
+var _default = ButtonGroupContext;
+exports.default = _default;

package/node/Card/Card.js

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

package/node/CardActionArea/CardActionArea.js

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

package/node/CardActions/CardActions.js

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

package/node/CardContent/CardContent.js

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

package/node/CardHeader/CardHeader.js

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

package/node/CardMedia/CardMedia.js

@@ -168,7 +168,7 @@ process.env.NODE_ENV !== "production" ? CardMedia.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = CardMedia;
 exports.default = _default;

package/node/Checkbox/Checkbox.js

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

package/node/Chip/Chip.js

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

package/node/CircularProgress/CircularProgress.js

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