@mui/material 5.0.4 → 5.1.1

package/modern/CardActions/cardActionsClasses.js

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

package/modern/CardContent/CardContent.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "component"];
 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 { getCardContentUtilityClass } from './cardContentClasses';
@@ -88,6 +88,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/modern/CardContent/cardContentClasses.js

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

package/modern/CardHeader/CardHeader.js

@@ -4,7 +4,7 @@ const _excluded = ["action", "avatar", "className", "component", "disableTypogra
 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 Typography from '../Typography';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
@@ -203,7 +203,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/modern/CardHeader/cardHeaderClasses.js

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

package/modern/CardMedia/CardMedia.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 useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import { getCardMediaUtilityClass } from './cardMediaClasses';
@@ -82,7 +82,7 @@ const 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,
@@ -148,6 +148,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/modern/CardMedia/cardMediaClasses.js

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

package/modern/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indetermina
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
 import SwitchBase from '../internal/SwitchBase';
 import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
@@ -219,7 +219,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/modern/Checkbox/checkboxClasses.js

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

package/modern/Chip/Chip.js

@@ -4,7 +4,7 @@ const _excluded = ["avatar", "className", "clickable", "color", "component", "de
 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 CancelIcon from '../internal/svg-icons/Cancel';
 import useForkRef from '../utils/useForkRef';
@@ -515,7 +515,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/modern/Chip/chipClasses.js

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

package/modern/CircularProgress/CircularProgress.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 { keyframes, css } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
@@ -241,7 +241,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/modern/CircularProgress/circularProgressClasses.js

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

package/modern/ClickAwayListener/index.js

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

package/modern/Collapse/Collapse.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementTypeAcceptingRef } 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 { duration } from '../styles/createTransitions';
@@ -400,7 +400,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/modern/Collapse/collapseClasses.js

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

package/modern/Container/Container.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidt
 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 { getContainerUtilityClass } from './containerClasses';
@@ -161,6 +161,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;

package/modern/Container/containerClasses.js

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

package/modern/CssBaseline/CssBaseline.js

@@ -1,14 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-var _GlobalStyles;
-
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
 import GlobalStyles from '../GlobalStyles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const html = {
+export const html = (theme, enableColorScheme) => _extends({
   WebkitFontSmoothing: 'antialiased',
   // Antialiasing.
   MozOsxFontSmoothing: 'grayscale',
@@ -18,7 +15,9 @@ export const html = {
   boxSizing: 'border-box',
   // Fix font resize problem in iOS
   WebkitTextSizeAdjust: '100%'
-};
+}, enableColorScheme && {
+  colorScheme: theme.palette.mode
+});
 export const body = theme => _extends({
   color: theme.palette.text.primary
 }, theme.typography.body1, {
@@ -28,9 +27,9 @@ export const body = theme => _extends({
     backgroundColor: theme.palette.common.white
   }
 });
-export const styles = theme => {
+export const styles = (theme, enableColorScheme = false) => {
   let defaultStyles = {
-    html,
+    html: html(theme, enableColorScheme),
     '*, *::before, *::after': {
       boxSizing: 'inherit'
     },
@@ -65,12 +64,13 @@ function CssBaseline(inProps) {
     name: 'MuiCssBaseline'
   });
   const {
-    children
+    children,
+    enableColorScheme = false
   } = props;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
-      styles: styles
-    })), children]
+    children: [/*#__PURE__*/_jsx(GlobalStyles, {
+      styles: theme => styles(theme, enableColorScheme)
+    }), children]
   });
 }
 
@@ -85,6 +85,14 @@ process.env.NODE_ENV !== "production" ? CssBaseline.propTypes
   /**
    * You can wrap a node.
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /**
+   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * For browser support, check out https://caniuse.com/?search=color-scheme
+   * @default false
+   */
+  enableColorScheme: PropTypes.bool
 } : void 0;
 export default CssBaseline;

package/modern/Dialog/Dialog.js

@@ -4,7 +4,7 @@ const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "
 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 { unstable_useId as useId } from '@mui/utils';
 import capitalize from '../utils/capitalize';
 import Modal from '../Modal';
@@ -387,7 +387,7 @@ process.env.NODE_ENV !== "production" ? Dialog.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 component used for the transition.

package/modern/Dialog/dialogClasses.js

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

package/modern/DialogActions/DialogActions.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "disableSpacing"];
 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 { getDialogActionsUtilityClass } from './dialogActionsClasses';
@@ -98,6 +98,6 @@ process.env.NODE_ENV !== "production" ? DialogActions.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 DialogActions;

package/modern/DialogActions/dialogActionsClasses.js

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

package/modern/DialogContent/DialogContent.js

@@ -4,10 +4,11 @@ const _excluded = ["className", "dividers"];
 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 { getDialogContentUtilityClass } from './dialogContentClasses';
+import dialogTitleClasses from '../DialogTitle/dialogTitleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -44,7 +45,7 @@ const DialogContentRoot = styled('div', {
   borderTop: `1px solid ${theme.palette.divider}`,
   borderBottom: `1px solid ${theme.palette.divider}`
 } : {
-  '.MuiDialogTitle-root + &': {
+  [`.${dialogTitleClasses.root} + &`]: {
     paddingTop: 0
   }
 }));
@@ -103,6 +104,6 @@ process.env.NODE_ENV !== "production" ? DialogContent.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 DialogContent;

package/modern/DialogContent/dialogContentClasses.js

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

package/modern/DialogContentText/DialogContentText.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Typography from '../Typography';
@@ -67,6 +67,6 @@ process.env.NODE_ENV !== "production" ? DialogContentText.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 DialogContentText;

package/modern/DialogContentText/dialogContentTextClasses.js

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

package/modern/DialogTitle/DialogTitle.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "id"];
 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 Typography from '../Typography';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -87,6 +87,6 @@ process.env.NODE_ENV !== "production" ? DialogTitle.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 DialogTitle;

package/modern/DialogTitle/dialogTitleClasses.js

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

package/modern/Divider/Divider.js

@@ -4,7 +4,7 @@ const _excluded = ["absolute", "children", "className", "component", "flexItem",
 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 from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -131,11 +131,11 @@ const DividerWrapper = styled('span', {
   ownerState
 }) => _extends({
   display: 'inline-block',
-  paddingLeft: theme.spacing(1.2),
-  paddingRight: theme.spacing(1.2)
+  paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingRight: `calc(${theme.spacing(1)} * 1.2)`
 }, ownerState.orientation === 'vertical' && {
-  paddingTop: theme.spacing(1.2),
-  paddingBottom: theme.spacing(1.2)
+  paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+  paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
 }));
 const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
   const props = useThemeProps({
@@ -247,7 +247,7 @@ process.env.NODE_ENV !== "production" ? Divider.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 text alignment.

package/modern/Divider/dividerClasses.js

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

package/modern/Drawer/Drawer.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 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 Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
@@ -313,7 +313,7 @@ process.env.NODE_ENV !== "production" ? Drawer.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/Drawer/drawerClasses.js

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

package/modern/Fab/Fab.js

@@ -4,7 +4,7 @@ const _excluded = ["children", "className", "color", "component", "disabled", "d
 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 ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
@@ -238,7 +238,7 @@ process.env.NODE_ENV !== "production" ? Fab.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/Fab/fabClasses.js

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

package/modern/FilledInput/FilledInput.js

@@ -4,7 +4,7 @@ const _excluded = ["disableUnderline", "components", "componentsProps", "fullWid
 import * as React from 'react';
 import { refType, deepmerge } from '@mui/utils';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import InputBase from '../InputBase';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -389,7 +389,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.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]),
 
   /**
    * 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/FilledInput/filledInputClasses.js

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

package/modern/FormControl/FormControl.js

@@ -4,7 +4,7 @@ const _excluded = ["children", "className", "color", "component", "disabled", "e
 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 { isFilled, isAdornedStart } from '../InputBase/utils';
@@ -314,7 +314,7 @@ process.env.NODE_ENV !== "production" ? FormControl.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/FormControl/formControlClasses.js

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

package/modern/FormControlLabel/FormControlLabel.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { useFormControl } from '../FormControl';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
@@ -185,9 +185,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   inputRef: refType,
 
   /**
-   * The text to be used in an enclosing label element.
+   * A text or an element to be used in an enclosing label element.
    */
-  label: PropTypes.node,
+  label: PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]).isRequired,
 
   /**
    * The position of the label.
@@ -211,7 +211,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.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.

package/modern/FormControlLabel/formControlLabelClasses.js

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