@mui/material 5.0.4 → 5.1.1

package/node/Button/Button.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _system = require("@mui/system");
 
@@ -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); }
 
@@ -54,7 +56,7 @@ const useUtilityClasses = ownerState => {
     startIcon: ['startIcon', `iconSize${(0, _capitalize.default)(size)}`],
     endIcon: ['endIcon', `iconSize${(0, _capitalize.default)(size)}`]
   };
-  const composedClasses = (0, _core.unstable_composeClasses)(slots, _buttonClasses.getButtonUtilityClass, classes);
+  const composedClasses = (0, _base.unstable_composeClasses)(slots, _buttonClasses.getButtonUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 
@@ -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.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/Button/buttonClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getButtonUtilityClass = getButtonUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getButtonUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiButton', slot);
+  return (0, _base.generateUtilityClass)('MuiButton', slot);
 }
 
-const buttonClasses = (0, _core.generateUtilityClasses)('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = (0, _base.generateUtilityClasses)('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 var _default = buttonClasses;
 exports.default = _default;

package/node/ButtonBase/ButtonBase.js

@@ -19,7 +19,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
-var _composeClasses = _interopRequireDefault(require("@mui/core/composeClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -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.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/ButtonBase/buttonBaseClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getButtonBaseUtilityClass = getButtonBaseUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getButtonBaseUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiButtonBase', slot);
+  return (0, _base.generateUtilityClass)('MuiButtonBase', slot);
 }
 
-const buttonBaseClasses = (0, _core.generateUtilityClasses)('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
+const buttonBaseClasses = (0, _base.generateUtilityClasses)('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var _default = buttonBaseClasses;
 exports.default = _default;

package/node/ButtonBase/touchRippleClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getTouchRippleUtilityClass = getTouchRippleUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getTouchRippleUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiTouchRipple', slot);
+  return (0, _base.generateUtilityClass)('MuiTouchRipple', slot);
 }
 
-const touchRippleClasses = (0, _core.generateUtilityClasses)('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
+const touchRippleClasses = (0, _base.generateUtilityClasses)('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var _default = touchRippleClasses;
 exports.default = _default;

package/node/ButtonGroup/ButtonGroup.js

@@ -13,13 +13,11 @@ 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"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _system = require("@mui/system");
 
@@ -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"];
@@ -70,7 +70,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
     grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(color)}`, disabled && 'disabled']
   };
-  return (0, _core.unstable_composeClasses)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
 };
 
 const ButtonGroupRoot = (0, _styled.default)('div', {
@@ -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.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/ButtonGroup/buttonGroupClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getButtonGroupUtilityClass = getButtonGroupUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getButtonGroupUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiButtonGroup', slot);
+  return (0, _base.generateUtilityClass)('MuiButtonGroup', slot);
 }
 
-const buttonGroupClasses = (0, _core.generateUtilityClasses)('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
+const buttonGroupClasses = (0, _base.generateUtilityClasses)('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
 var _default = buttonGroupClasses;
 exports.default = _default;

package/node/Card/Card.js

@@ -19,7 +19,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -44,7 +44,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _core.unstable_composeClasses)(slots, _cardClasses.getCardUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _cardClasses.getCardUtilityClass, classes);
 };
 
 const CardRoot = (0, _styled.default)(_Paper.default, {
@@ -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.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/Card/cardClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getCardUtilityClass = getCardUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getCardUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiCard', slot);
+  return (0, _base.generateUtilityClass)('MuiCard', slot);
 }
 
-const cardClasses = (0, _core.generateUtilityClasses)('MuiCard', ['root']);
+const cardClasses = (0, _base.generateUtilityClasses)('MuiCard', ['root']);
 var _default = cardClasses;
 exports.default = _default;

package/node/CardActionArea/CardActionArea.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
@@ -43,7 +43,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     focusHighlight: ['focusHighlight']
   };
-  return (0, _core.unstable_composeClasses)(slots, _cardActionAreaClasses.getCardActionAreaUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _cardActionAreaClasses.getCardActionAreaUtilityClass, classes);
 };
 
 const CardActionAreaRoot = (0, _styled.default)(_ButtonBase.default, {
@@ -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.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/CardActionArea/cardActionAreaClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getCardActionAreaUtilityClass = getCardActionAreaUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getCardActionAreaUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiCardActionArea', slot);
+  return (0, _base.generateUtilityClass)('MuiCardActionArea', slot);
 }
 
-const cardActionAreaClasses = (0, _core.generateUtilityClasses)('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
+const cardActionAreaClasses = (0, _base.generateUtilityClasses)('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
 var _default = cardActionAreaClasses;
 exports.default = _default;

package/node/CardActions/CardActions.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -41,7 +41,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', !disableSpacing && 'spacing']
   };
-  return (0, _core.unstable_composeClasses)(slots, _cardActionsClasses.getCardActionsUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _cardActionsClasses.getCardActionsUtilityClass, classes);
 };
 
 const CardActionsRoot = (0, _styled.default)('div', {
@@ -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.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/CardActions/cardActionsClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getCardActionsUtilityClass = getCardActionsUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getCardActionsUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiCardActions', slot);
+  return (0, _base.generateUtilityClass)('MuiCardActions', slot);
 }
 
-const cardActionsClasses = (0, _core.generateUtilityClasses)('MuiCardActions', ['root', 'spacing']);
+const cardActionsClasses = (0, _base.generateUtilityClasses)('MuiCardActions', ['root', 'spacing']);
 var _default = cardActionsClasses;
 exports.default = _default;

package/node/CardContent/CardContent.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _core.unstable_composeClasses)(slots, _cardContentClasses.getCardContentUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _cardContentClasses.getCardContentUtilityClass, classes);
 };
 
 const CardContentRoot = (0, _styled.default)('div', {
@@ -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.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/CardContent/cardContentClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getCardContentUtilityClass = getCardContentUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getCardContentUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiCardContent', slot);
+  return (0, _base.generateUtilityClass)('MuiCardContent', slot);
 }
 
-const cardContentClasses = (0, _core.generateUtilityClasses)('MuiCardContent', ['root']);
+const cardContentClasses = (0, _base.generateUtilityClasses)('MuiCardContent', ['root']);
 var _default = cardContentClasses;
 exports.default = _default;

package/node/CardHeader/CardHeader.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
@@ -47,7 +47,7 @@ const useUtilityClasses = ownerState => {
     title: ['title'],
     subheader: ['subheader']
   };
-  return (0, _core.unstable_composeClasses)(slots, _cardHeaderClasses.getCardHeaderUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _cardHeaderClasses.getCardHeaderUtilityClass, classes);
 };
 
 const CardHeaderRoot = (0, _styled.default)('div', {
@@ -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.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/CardHeader/cardHeaderClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getCardHeaderUtilityClass = getCardHeaderUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getCardHeaderUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiCardHeader', slot);
+  return (0, _base.generateUtilityClass)('MuiCardHeader', slot);
 }
 
-const cardHeaderClasses = (0, _core.generateUtilityClasses)('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
+const cardHeaderClasses = (0, _base.generateUtilityClasses)('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
 var _default = cardHeaderClasses;
 exports.default = _default;

package/node/CardMedia/CardMedia.js

@@ -19,7 +19,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
@@ -44,7 +44,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', isMediaComponent && 'media', isImageComponent && 'img']
   };
-  return (0, _core.unstable_composeClasses)(slots, _cardMediaClasses.getCardMediaUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _cardMediaClasses.getCardMediaUtilityClass, classes);
 };
 
 const CardMediaRoot = (0, _styled.default)('div', {
@@ -102,7 +102,7 @@ const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref)
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMediaRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     as: component,
-    role: !isMediaComponent && image ? 'image' : undefined,
+    role: !isMediaComponent && image ? 'img' : undefined,
     ref: ref,
     style: composedStyle,
     ownerState: ownerState,
@@ -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.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/CardMedia/cardMediaClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getCardMediaUtilityClass = getCardMediaUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getCardMediaUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiCardMedia', slot);
+  return (0, _base.generateUtilityClass)('MuiCardMedia', slot);
 }
 
-const cardMediaClasses = (0, _core.generateUtilityClasses)('MuiCardMedia', ['root', 'media', 'img']);
+const cardMediaClasses = (0, _base.generateUtilityClasses)('MuiCardMedia', ['root', 'media', 'img']);
 var _default = cardMediaClasses;
 exports.default = _default;

package/node/Checkbox/Checkbox.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/utils");
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _system = require("@mui/system");
 
@@ -54,7 +54,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', indeterminate && 'indeterminate', `color${(0, _capitalize.default)(color)}`]
   };
-  const composedClasses = (0, _core.unstable_composeClasses)(slots, _checkboxClasses.getCheckboxUtilityClass, classes);
+  const composedClasses = (0, _base.unstable_composeClasses)(slots, _checkboxClasses.getCheckboxUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 
@@ -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.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.