@mui/material 5.0.4 → 5.1.1

package/node/Alert/Alert.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");
 
@@ -66,7 +66,7 @@ const useUtilityClasses = ownerState => {
     message: ['message'],
     action: ['action']
   };
-  return (0, _core.unstable_composeClasses)(slots, _alertClasses.getAlertUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _alertClasses.getAlertUtilityClass, classes);
 };
 
 const AlertRoot = (0, _styled.default)(_Paper.default, {
@@ -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.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/Alert/alertClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getAlertUtilityClass = getAlertUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getAlertUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiAlert', slot);
+  return (0, _base.generateUtilityClass)('MuiAlert', slot);
 }
 
-const alertClasses = (0, _core.generateUtilityClasses)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+const alertClasses = (0, _base.generateUtilityClasses)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 var _default = alertClasses;
 exports.default = _default;

package/node/AlertTitle/AlertTitle.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"));
 
@@ -42,7 +42,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _core.unstable_composeClasses)(slots, _alertTitleClasses.getAlertTitleUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _alertTitleClasses.getAlertTitleUtilityClass, classes);
 };
 
 const AlertTitleRoot = (0, _styled.default)(_Typography.default, {
@@ -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.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/AlertTitle/alertTitleClasses.js

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

package/node/AppBar/AppBar.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"));
 
@@ -46,7 +46,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${(0, _capitalize.default)(color)}`, `position${(0, _capitalize.default)(position)}`]
   };
-  return (0, _core.unstable_composeClasses)(slots, _appBarClasses.getAppBarUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _appBarClasses.getAppBarUtilityClass, classes);
 };
 
 const AppBarRoot = (0, _styled.default)(_Paper.default, {
@@ -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.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/AppBar/appBarClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getAppBarUtilityClass = getAppBarUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getAppBarUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiAppBar', slot);
+  return (0, _base.generateUtilityClass)('MuiAppBar', slot);
 }
 
-const appBarClasses = (0, _core.generateUtilityClasses)('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+const appBarClasses = (0, _base.generateUtilityClasses)('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
 var _default = appBarClasses;
 exports.default = _default;

package/node/Autocomplete/Autocomplete.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "createFilterOptions", {
   enumerable: true,
   get: function () {
-    return _core.createFilterOptions;
+    return _base.createFilterOptions;
   }
 });
 exports.default = void 0;
@@ -25,7 +25,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _system = require("@mui/system");
 
@@ -39,6 +39,14 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _Chip = _interopRequireDefault(require("../Chip"));
 
+var _inputClasses = _interopRequireDefault(require("../Input/inputClasses"));
+
+var _inputBaseClasses = _interopRequireDefault(require("../InputBase/inputBaseClasses"));
+
+var _outlinedInputClasses = _interopRequireDefault(require("../OutlinedInput/outlinedInputClasses"));
+
+var _filledInputClasses = _interopRequireDefault(require("../FilledInput/filledInputClasses"));
+
 var _Close = _interopRequireDefault(require("../internal/svg-icons/Close"));
 
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
@@ -90,7 +98,7 @@ const useUtilityClasses = ownerState => {
     groupLabel: ['groupLabel'],
     groupUl: ['groupUl']
   };
-  return (0, _core.unstable_composeClasses)(slots, _autocompleteClasses.getAutocompleteUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _autocompleteClasses.getAutocompleteUtilityClass, classes);
 };
 
 const AutocompleteRoot = (0, _styled.default)('div', {
@@ -155,18 +163,18 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       minWidth: 30
     }
   },
-  '& .MuiInput-root': {
+  [`& .${_inputClasses.default.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px'
     }
   },
-  '& .MuiInput-root.MuiInputBase-sizeSmall': {
-    '& .MuiInput-input': {
+  [`& .${_inputClasses.default.root}.${_inputBaseClasses.default.sizeSmall}`]: {
+    [`& .${_inputClasses.default.input}`]: {
       padding: '2px 4px 3px 0'
     }
   },
-  '& .MuiOutlinedInput-root': {
+  [`& .${_outlinedInputClasses.default.root}`]: {
     padding: 9,
     [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 26 + 4 + 9
@@ -181,13 +189,13 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       right: 9
     }
   },
-  '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+  [`& .${_outlinedInputClasses.default.root}.${_inputBaseClasses.default.sizeSmall}`]: {
     padding: 6,
     [`& .${_autocompleteClasses.default.input}`]: {
       padding: '2.5px 4px 2.5px 6px'
     }
   },
-  '& .MuiFilledInput-root': {
+  [`& .${_filledInputClasses.default.root}`]: {
     paddingTop: 19,
     paddingLeft: 8,
     [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
@@ -196,19 +204,22 @@ const AutocompleteRoot = (0, _styled.default)('div', {
     [`.${_autocompleteClasses.default.hasPopupIcon}.${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 52 + 4 + 9
     },
-    '& .MuiFilledInput-input': {
+    [`& .${_filledInputClasses.default.input}`]: {
       padding: '7px 4px'
     },
     [`& .${_autocompleteClasses.default.endAdornment}`]: {
       right: 9
     }
   },
-  '& .MuiFilledInput-root.MuiInputBase-sizeSmall': {
+  [`& .${_filledInputClasses.default.root}.${_inputBaseClasses.default.sizeSmall}`]: {
     paddingBottom: 1,
-    '& .MuiFilledInput-input': {
+    [`& .${_filledInputClasses.default.input}`]: {
       padding: '2.5px 4px'
     }
   },
+  [`& .${_inputBaseClasses.default.hiddenLabel}`]: {
+    paddingTop: 8
+  },
   [`& .${_autocompleteClasses.default.input}`]: (0, _extends2.default)({
     flexGrow: 1,
     textOverflow: 'ellipsis',
@@ -462,7 +473,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     setAnchorEl,
     inputValue,
     groupedOptions
-  } = (0, _core.useAutocomplete)((0, _extends2.default)({}, props, {
+  } = (0, _base.useAutocomplete)((0, _extends2.default)({}, props, {
     componentName: 'Autocomplete'
   }));
   const hasClearIcon = !disableClearable && !disabled && dirty;
@@ -1072,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.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/Autocomplete/autocompleteClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getAutocompleteUtilityClass = getAutocompleteUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getAutocompleteUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiAutocomplete', slot);
+  return (0, _base.generateUtilityClass)('MuiAutocomplete', slot);
 }
 
-const autocompleteClasses = (0, _core.generateUtilityClasses)('MuiAutocomplete', ['root', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+const autocompleteClasses = (0, _base.generateUtilityClasses)('MuiAutocomplete', ['root', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
 var _default = autocompleteClasses;
 exports.default = _default;

package/node/Avatar/Avatar.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"));
 
@@ -46,7 +46,7 @@ const useUtilityClasses = ownerState => {
     img: ['img'],
     fallback: ['fallback']
   };
-  return (0, _core.unstable_composeClasses)(slots, _avatarClasses.getAvatarUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _avatarClasses.getAvatarUtilityClass, classes);
 };
 
 const AvatarRoot = (0, _styled.default)('div', {
@@ -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.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/Avatar/avatarClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getAvatarUtilityClass = getAvatarUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getAvatarUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiAvatar', slot);
+  return (0, _base.generateUtilityClass)('MuiAvatar', slot);
 }
 
-const avatarClasses = (0, _core.generateUtilityClasses)('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
+const avatarClasses = (0, _base.generateUtilityClasses)('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
 var _default = avatarClasses;
 exports.default = _default;

package/node/AvatarGroup/AvatarGroup.js

@@ -21,13 +21,13 @@ 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"));
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
-var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _Avatar = _interopRequireWildcard(require("../Avatar"));
 
 var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"));
 
@@ -52,7 +52,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     avatar: ['avatar']
   };
-  return (0, _core.unstable_composeClasses)(slots, _avatarGroupClasses.getAvatarGroupUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _avatarGroupClasses.getAvatarGroupUtilityClass, classes);
 };
 
 const AvatarGroupRoot = (0, _styled.default)('div', {
@@ -64,7 +64,7 @@ const AvatarGroupRoot = (0, _styled.default)('div', {
 })(({
   theme
 }) => ({
-  [`& .MuiAvatar-root`]: {
+  [`& .${_Avatar.avatarClasses.root}`]: {
     border: `2px solid ${theme.palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
@@ -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.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/AvatarGroup/avatarGroupClasses.js

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

package/node/Backdrop/Backdrop.js

@@ -15,9 +15,9 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
-var _BackdropUnstyled = _interopRequireWildcard(require("@mui/core/BackdropUnstyled"));
+var _BackdropUnstyled = _interopRequireWildcard(require("@mui/base/BackdropUnstyled"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -102,7 +102,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
         Root: BackdropRoot
       }, components),
       componentsProps: {
-        root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _core.isHostComponent)(components.Root)) && {
+        root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _base.isHostComponent)(components.Root)) && {
           ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
         })
       },
@@ -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.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

@@ -19,9 +19,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("@mui/utils");
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
-var _BadgeUnstyled = _interopRequireWildcard(require("@mui/core/BadgeUnstyled"));
+var _BadgeUnstyled = _interopRequireWildcard(require("@mui/base/BadgeUnstyled"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -37,7 +37,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const badgeClasses = (0, _extends2.default)({}, _BadgeUnstyled.badgeUnstyledClasses, (0, _core.generateUtilityClasses)('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning']));
+const badgeClasses = (0, _extends2.default)({}, _BadgeUnstyled.badgeUnstyledClasses, (0, _base.generateUtilityClasses)('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning']));
 exports.badgeClasses = badgeClasses;
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -221,12 +221,12 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Badge: BadgeBadge
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _core.isHostComponent)(components.Root)) && {
+      root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _base.isHostComponent)(components.Root)) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color
         })
       }),
-      badge: (0, _extends2.default)({}, componentsProps.badge, (!components.Thumb || !(0, _core.isHostComponent)(components.Thumb)) && {
+      badge: (0, _extends2.default)({}, componentsProps.badge, (!components.Thumb || !(0, _base.isHostComponent)(components.Thumb)) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
           color
         })
@@ -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.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

@@ -19,7 +19,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"));
 
@@ -42,7 +42,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root']
   };
-  return (0, _core.unstable_composeClasses)(slots, _bottomNavigationClasses.getBottomNavigationUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _bottomNavigationClasses.getBottomNavigationUtilityClass, classes);
 };
 
 const BottomNavigationRoot = (0, _styled.default)('div', {
@@ -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.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/BottomNavigation/bottomNavigationClasses.js

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

package/node/BottomNavigationAction/BottomNavigationAction.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"));
 
@@ -47,7 +47,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', !showLabel && !selected && 'iconOnly', selected && 'selected'],
     label: ['label', !showLabel && !selected && 'iconOnly', selected && 'selected']
   };
-  return (0, _core.unstable_composeClasses)(slots, _bottomNavigationActionClasses.getBottomNavigationActionUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _bottomNavigationActionClasses.getBottomNavigationActionUtilityClass, classes);
 };
 
 const BottomNavigationActionRoot = (0, _styled.default)(_ButtonBase.default, {
@@ -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.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/BottomNavigationAction/bottomNavigationActionClasses.js

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

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/BreadcrumbCollapsed.js

@@ -33,8 +33,8 @@ const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default, {
   theme
 }) => (0, _extends2.default)({
   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/node/Breadcrumbs/Breadcrumbs.js

@@ -21,7 +21,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"));
 
@@ -51,7 +51,7 @@ const useUtilityClasses = ownerState => {
     ol: ['ol'],
     separator: ['separator']
   };
-  return (0, _core.unstable_composeClasses)(slots, _breadcrumbsClasses.getBreadcrumbsUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _breadcrumbsClasses.getBreadcrumbsUtilityClass, classes);
 };
 
 const BreadcrumbsRoot = (0, _styled.default)(_Typography.default, {
@@ -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.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/Breadcrumbs/breadcrumbsClasses.js

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