@mui/material 5.0.4 → 5.1.1

package/modern/Autocomplete/Autocomplete.js

@@ -8,13 +8,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes, integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses, useAutocomplete, createFilterOptions } from '@mui/core';
+import { unstable_composeClasses as composeClasses, useAutocomplete, createFilterOptions } from '@mui/base';
 import { alpha } from '@mui/system';
 import Popper from '../Popper';
 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';
@@ -118,18 +122,18 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30
     }
   },
-  '& .MuiInput-root': {
+  [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px'
     }
   },
-  '& .MuiInput-root.MuiInputBase-sizeSmall': {
-    '& .MuiInput-input': {
+  [`& .${inputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
+    [`& .${inputClasses.input}`]: {
       padding: '2px 4px 3px 0'
     }
   },
-  '& .MuiOutlinedInput-root': {
+  [`& .${outlinedInputClasses.root}`]: {
     padding: 9,
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 26 + 4 + 9
@@ -144,13 +148,13 @@ const AutocompleteRoot = styled('div', {
       right: 9
     }
   },
-  '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+  [`& .${outlinedInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
     padding: 6,
     [`& .${autocompleteClasses.input}`]: {
       padding: '2.5px 4px 2.5px 6px'
     }
   },
-  '& .MuiFilledInput-root': {
+  [`& .${filledInputClasses.root}`]: {
     paddingTop: 19,
     paddingLeft: 8,
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -159,19 +163,22 @@ const AutocompleteRoot = styled('div', {
     [`.${autocompleteClasses.hasPopupIcon}.${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 52 + 4 + 9
     },
-    '& .MuiFilledInput-input': {
+    [`& .${filledInputClasses.input}`]: {
       padding: '7px 4px'
     },
     [`& .${autocompleteClasses.endAdornment}`]: {
       right: 9
     }
   },
-  '& .MuiFilledInput-root.MuiInputBase-sizeSmall': {
+  [`& .${filledInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
     paddingBottom: 1,
-    '& .MuiFilledInput-input': {
+    [`& .${filledInputClasses.input}`]: {
       padding: '2.5px 4px'
     }
   },
+  [`& .${inputBaseClasses.hiddenLabel}`]: {
+    paddingTop: 8
+  },
   [`& .${autocompleteClasses.input}`]: _extends({
     flexGrow: 1,
     textOverflow: 'ellipsis',
@@ -1033,7 +1040,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/modern/Autocomplete/autocompleteClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getAutocompleteUtilityClass(slot) {
   return generateUtilityClass('MuiAutocomplete', slot);
 }

package/modern/Avatar/Avatar.js

@@ -4,7 +4,7 @@ const _excluded = ["alt", "children", "className", "component", "imgProps", "siz
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Person from '../internal/svg-icons/Person';
@@ -255,7 +255,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/modern/Avatar/avatarClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getAvatarUtilityClass(slot) {
   return generateUtilityClass('MuiAvatar', slot);
 }

package/modern/AvatarGroup/AvatarGroup.js

@@ -6,10 +6,10 @@ import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 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";
 const SPACINGS = {
@@ -37,7 +37,7 @@ const AvatarGroupRoot = styled('div', {
 })(({
   theme
 }) => ({
-  [`& .MuiAvatar-root`]: {
+  [`& .${avatarClasses.root}`]: {
     border: `2px solid ${theme.palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
@@ -165,7 +165,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/modern/AvatarGroup/avatarGroupClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getAvatarGroupUtilityClass(slot) {
   return generateUtilityClass('MuiAvatarGroup', slot);
 }

package/modern/Backdrop/Backdrop.js

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isHostComponent } from '@mui/core';
-import BackdropUnstyled, { backdropUnstyledClasses } from '@mui/core/BackdropUnstyled';
+import { isHostComponent } from '@mui/base';
+import BackdropUnstyled, { backdropUnstyledClasses } from '@mui/base/BackdropUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';
@@ -141,7 +141,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/modern/Badge/Badge.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses, isHostComponent } from '@mui/core';
-import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/core/BadgeUnstyled';
+import { generateUtilityClasses, isHostComponent } from '@mui/base';
+import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
@@ -296,7 +296,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/modern/BottomNavigation/BottomNavigation.js

@@ -5,7 +5,7 @@ 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';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
@@ -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/modern/BottomNavigation/bottomNavigationClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getBottomNavigationUtilityClass(slot) {
   return generateUtilityClass('MuiBottomNavigation', slot);
 }

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "icon", "label", "onChange", "onClick", "selecte
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';
@@ -176,7 +176,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/modern/BottomNavigationAction/bottomNavigationActionClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getBottomNavigationActionUtilityClass(slot) {
   return generateUtilityClass('MuiBottomNavigationAction', slot);
 }

package/modern/Box/Box.js

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

package/modern/Breadcrumbs/BreadcrumbCollapsed.js

@@ -12,8 +12,8 @@ const BreadcrumbCollapsedButton = styled(ButtonBase, {
   theme
 }) => _extends({
   display: 'flex',
-  marginLeft: theme.spacing(0.5),
-  marginRight: theme.spacing(0.5)
+  marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
+  marginRight: `calc(${theme.spacing(1)} * 0.5)`
 }, theme.palette.mode === 'light' ? {
   backgroundColor: theme.palette.grey[100],
   color: theme.palette.grey[700]

package/modern/Breadcrumbs/Breadcrumbs.js

@@ -6,7 +6,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Typography from '../Typography';
@@ -232,6 +232,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/modern/Breadcrumbs/breadcrumbsClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getBreadcrumbsUtilityClass(slot) {
   return generateUtilityClass('MuiBreadcrumbs', slot);
 }

package/modern/Button/Button.js

@@ -1,16 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 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,24 +218,47 @@ 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);
 
   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 = _objectWithoutPropertiesLoose(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 = _extends({}, props, {
     color,
     component,
@@ -263,8 +287,10 @@ const 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,
@@ -292,6 +318,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'
@@ -372,7 +403,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/modern/Button/buttonClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }

package/modern/ButtonBase/ButtonBase.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementTypeAcceptingRef, refType } from '@mui/utils';
-import composeClasses from '@mui/core/composeClasses';
+import composeClasses from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useForkRef from '../utils/useForkRef';
@@ -514,7 +514,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/modern/ButtonBase/buttonBaseClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass('MuiButtonBase', slot);
 }

package/modern/ButtonBase/touchRippleClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getTouchRippleUtilityClass(slot) {
   return generateUtilityClass('MuiTouchRipple', slot);
 }

package/modern/ButtonGroup/ButtonGroup.js

@@ -2,15 +2,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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 { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
 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";
 
 const overridesResolver = (props, styles) => {
@@ -107,10 +107,14 @@ const ButtonGroupRoot = styled('div', {
       }
     }, 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' && {
@@ -153,6 +157,17 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
   });
 
   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__*/_jsx(ButtonGroupRoot, _extends({
     as: component,
     role: "group",
@@ -160,28 +175,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 (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,
-        disableRipple,
-        fullWidth,
-        size: child.props.size || size,
-        variant: child.props.variant || variant
-      });
+    children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
+      value: context,
+      children: children
     })
   }));
 });
@@ -270,7 +266,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/modern/ButtonGroup/ButtonGroupContext.js

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

package/modern/ButtonGroup/buttonGroupClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }

package/modern/Card/Card.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Paper from '../Paper';
@@ -93,6 +93,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/modern/Card/cardClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getCardUtilityClass(slot) {
   return generateUtilityClass('MuiCard', slot);
 }

package/modern/CardActionArea/CardActionArea.js

@@ -4,7 +4,7 @@ const _excluded = ["children", "className", "focusVisibleClassName"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
@@ -122,6 +122,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/modern/CardActionArea/cardActionAreaClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getCardActionAreaUtilityClass(slot) {
   return generateUtilityClass('MuiCardActionArea', slot);
 }

package/modern/CardActions/CardActions.js

@@ -4,7 +4,7 @@ const _excluded = ["disableSpacing", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
@@ -96,6 +96,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;