@mui/material 5.0.5 → 5.2.0

package/node/Divider/dividerClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getDividerUtilityClass = getDividerUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getDividerUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiDivider', slot);
+  return (0, _base.generateUtilityClass)('MuiDivider', slot);
 }
 
-const dividerClasses = (0, _core.generateUtilityClasses)('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
+const dividerClasses = (0, _base.generateUtilityClasses)('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 var _default = dividerClasses;
 exports.default = _default;

package/node/Drawer/Drawer.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 _Modal = _interopRequireDefault(require("../Modal"));
 
@@ -69,7 +69,7 @@ const useUtilityClasses = ownerState => {
     modal: ['modal'],
     paper: ['paper', `paperAnchor${(0, _capitalize.default)(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${(0, _capitalize.default)(anchor)}`]
   };
-  return (0, _core.unstable_composeClasses)(slots, _drawerClasses.getDrawerUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _drawerClasses.getDrawerUtilityClass, classes);
 };
 
 const DrawerRoot = (0, _styled.default)(_Modal.default, {
@@ -343,7 +343,7 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The duration for the transition, in milliseconds.

package/node/Drawer/drawerClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getDrawerUtilityClass = getDrawerUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getDrawerUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiDrawer', slot);
+  return (0, _base.generateUtilityClass)('MuiDrawer', slot);
 }
 
-const drawerClasses = (0, _core.generateUtilityClasses)('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+const drawerClasses = (0, _base.generateUtilityClasses)('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
 var _default = drawerClasses;
 exports.default = _default;

package/node/Fab/Fab.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 _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
@@ -47,7 +47,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `size${(0, _capitalize.default)(size)}`, color === 'inherit' && 'colorInherit', color === 'primary' && 'primary', color === 'secondary' && 'secondary']
   };
-  return (0, _core.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
 };
 
 const FabRoot = (0, _styled.default)(_ButtonBase.default, {
@@ -260,7 +260,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The variant to use.

package/node/Fab/fabClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getFabUtilityClass = getFabUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getFabUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiFab', slot);
+  return (0, _base.generateUtilityClass)('MuiFab', slot);
 }
 
-const fabClasses = (0, _core.generateUtilityClasses)('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const fabClasses = (0, _base.generateUtilityClasses)('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 var _default = fabClasses;
 exports.default = _default;

package/node/FilledInput/FilledInput.js

@@ -17,7 +17,7 @@ var _utils = require("@mui/utils");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _InputBase = _interopRequireDefault(require("../InputBase"));
 
@@ -46,7 +46,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', !disableUnderline && 'underline'],
     input: ['input']
   };
-  const composedClasses = (0, _core.unstable_composeClasses)(slots, _filledInputClasses.getFilledInputUtilityClass, classes);
+  const composedClasses = (0, _base.unstable_composeClasses)(slots, _filledInputClasses.getFilledInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 
@@ -411,7 +411,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * 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/node/FilledInput/filledInputClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getFilledInputUtilityClass = getFilledInputUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getFilledInputUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiFilledInput', slot);
+  return (0, _base.generateUtilityClass)('MuiFilledInput', slot);
 }
 
-const filledInputClasses = (0, _core.generateUtilityClasses)('MuiFilledInput', ['root', 'colorSecondary', 'underline', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputHiddenLabel', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
+const filledInputClasses = (0, _base.generateUtilityClasses)('MuiFilledInput', ['root', 'colorSecondary', 'underline', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputHiddenLabel', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
 var _default = filledInputClasses;
 exports.default = _default;

package/node/FormControl/FormControl.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"));
 
@@ -50,7 +50,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', margin !== 'none' && `margin${(0, _capitalize.default)(margin)}`, fullWidth && 'fullWidth']
   };
-  return (0, _core.unstable_composeClasses)(slots, _formControlClasses.getFormControlUtilityClasses, classes);
+  return (0, _base.unstable_composeClasses)(slots, _formControlClasses.getFormControlUtilityClasses, classes);
 };
 
 const FormControlRoot = (0, _styled.default)('div', {
@@ -338,7 +338,7 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The variant to use.

package/node/FormControl/formControlClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getFormControlUtilityClasses = getFormControlUtilityClasses;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getFormControlUtilityClasses(slot) {
-  return (0, _core.generateUtilityClass)('MuiFormControl', slot);
+  return (0, _base.generateUtilityClass)('MuiFormControl', slot);
 }
 
-const formControlClasses = (0, _core.generateUtilityClasses)('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
+const formControlClasses = (0, _base.generateUtilityClasses)('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 var _default = formControlClasses;
 exports.default = _default;

package/node/FormControlLabel/FormControlLabel.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 _FormControl = require("../FormControl");
 
@@ -51,7 +51,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`],
     label: ['label', disabled && 'disabled']
   };
-  return (0, _core.unstable_composeClasses)(slots, _formControlLabelClasses.getFormControlLabelUtilityClasses, classes);
+  return (0, _base.unstable_composeClasses)(slots, _formControlLabelClasses.getFormControlLabelUtilityClasses, classes);
 };
 
 const FormControlLabelRoot = (0, _styled.default)('label', {
@@ -208,9 +208,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   inputRef: _utils.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.default.node,
+  label: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.number, _propTypes.default.string]).isRequired,
 
   /**
    * The position of the label.
@@ -234,7 +234,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The value of the component.

package/node/FormControlLabel/formControlLabelClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getFormControlLabelUtilityClasses = getFormControlLabelUtilityClasses;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getFormControlLabelUtilityClasses(slot) {
-  return (0, _core.generateUtilityClass)('MuiFormControlLabel', slot);
+  return (0, _base.generateUtilityClass)('MuiFormControlLabel', slot);
 }
 
-const formControlLabelClasses = (0, _core.generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
+const formControlLabelClasses = (0, _base.generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
 var _default = formControlLabelClasses;
 exports.default = _default;

package/node/FormGroup/FormGroup.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', row && 'row']
   };
-  return (0, _core.unstable_composeClasses)(slots, _formGroupClasses.getFormGroupUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _formGroupClasses.getFormGroupUtilityClass, classes);
 };
 
 const FormGroupRoot = (0, _styled.default)('div', {
@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? FormGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = FormGroup;
 exports.default = _default;

package/node/FormGroup/formGroupClasses.js

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

package/node/FormHelperText/FormHelperText.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 _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 
@@ -53,7 +53,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', disabled && 'disabled', error && 'error', size && `size${(0, _capitalize.default)(size)}`, contained && 'contained', focused && 'focused', filled && 'filled', required && 'required']
   };
-  return (0, _core.unstable_composeClasses)(slots, _formHelperTextClasses.getFormHelperTextUtilityClasses, classes);
+  return (0, _base.unstable_composeClasses)(slots, _formHelperTextClasses.getFormHelperTextUtilityClasses, classes);
 };
 
 const FormHelperTextRoot = (0, _styled.default)('p', {
@@ -200,7 +200,7 @@ process.env.NODE_ENV !== "production" ? FormHelperText.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The variant to use.

package/node/FormHelperText/formHelperTextClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getFormHelperTextUtilityClasses = getFormHelperTextUtilityClasses;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getFormHelperTextUtilityClasses(slot) {
-  return (0, _core.generateUtilityClass)('MuiFormHelperText', slot);
+  return (0, _base.generateUtilityClass)('MuiFormHelperText', slot);
 }
 
-const formHelperTextClasses = (0, _core.generateUtilityClasses)('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
+const formHelperTextClasses = (0, _base.generateUtilityClasses)('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 var _default = formHelperTextClasses;
 exports.default = _default;

package/node/FormLabel/FormLabel.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 _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 
@@ -53,7 +53,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', `color${(0, _capitalize.default)(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
     asterisk: ['asterisk', error && 'error']
   };
-  return (0, _core.unstable_composeClasses)(slots, _formLabelClasses.getFormLabelUtilityClasses, classes);
+  return (0, _base.unstable_composeClasses)(slots, _formLabelClasses.getFormLabelUtilityClasses, classes);
 };
 
 const FormLabelRoot = (0, _styled.default)('label', {
@@ -200,7 +200,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = FormLabel;
 exports.default = _default;

package/node/FormLabel/formLabelClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getFormLabelUtilityClasses = getFormLabelUtilityClasses;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getFormLabelUtilityClasses(slot) {
-  return (0, _core.generateUtilityClass)('MuiFormLabel', slot);
+  return (0, _base.generateUtilityClass)('MuiFormLabel', slot);
 }
 
-const formLabelClasses = (0, _core.generateUtilityClasses)('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
+const formLabelClasses = (0, _base.generateUtilityClasses)('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var _default = formLabelClasses;
 exports.default = _default;

package/node/Grid/Grid.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.generateColumnGap = generateColumnGap;
+exports.generateDirection = generateDirection;
 exports.generateRowGap = generateRowGap;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -21,7 +22,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _system = require("@mui/system");
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _requirePropFactory = _interopRequireDefault(require("../utils/requirePropFactory"));
 
@@ -73,10 +74,11 @@ function generateGrid(globalStyles, theme, breakpoint, ownerState) {
   } else {
     const columnsBreakpointValues = (0, _system.unstable_resolveBreakpointValues)({
       values: ownerState.columns,
-      base: theme.breakpoints.values
-    }); // Keep 7 significant numbers.
+      breakpoints: theme.breakpoints.values
+    });
+    const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
 
-    const width = `${Math.round(size / columnsBreakpointValues[breakpoint] * 10e7) / 10e5}%`;
+    const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
     let more = {};
 
     if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
@@ -112,9 +114,13 @@ function generateDirection({
   theme,
   ownerState
 }) {
+  const directionValues = (0, _system.unstable_resolveBreakpointValues)({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  });
   return (0, _system.handleBreakpoints)({
     theme
-  }, ownerState.direction, propValue => {
+  }, directionValues, propValue => {
     const output = {
       flexDirection: propValue
     };
@@ -140,9 +146,13 @@ function generateRowGap({
   let styles = {};
 
   if (container && rowSpacing !== 0) {
+    const rowSpacingValues = (0, _system.unstable_resolveBreakpointValues)({
+      values: rowSpacing,
+      breakpoints: theme.breakpoints.values
+    });
     styles = (0, _system.handleBreakpoints)({
       theme
-    }, rowSpacing, propValue => {
+    }, rowSpacingValues, propValue => {
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -172,9 +182,13 @@ function generateColumnGap({
   let styles = {};
 
   if (container && columnSpacing !== 0) {
+    const columnSpacingValues = (0, _system.unstable_resolveBreakpointValues)({
+      values: columnSpacing,
+      breakpoints: theme.breakpoints.values
+    });
     styles = (0, _system.handleBreakpoints)({
       theme
-    }, columnSpacing, propValue => {
+    }, columnSpacingValues, propValue => {
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -263,7 +277,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', container && spacing !== 0 && `spacing-xs-${String(spacing)}`, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
   };
-  return (0, _core.unstable_composeClasses)(slots, _gridClasses.getGridUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _gridClasses.getGridUtilityClass, classes);
 };
 
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
@@ -389,18 +403,26 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   item: _propTypes.default.bool,
 
   /**
-   * Defines the number of grids the component is going to use.
-   * It's applied for the `lg` breakpoint and wider screens if not overridden.
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
    * @default false
    */
-  lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.bool]),
+  lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
 
   /**
-   * Defines the number of grids the component is going to use.
-   * It's applied for the `md` breakpoint and wider screens if not overridden.
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
    * @default false
    */
-  md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.bool]),
+  md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
 
   /**
    * Defines the vertical space between the type `item` components.
@@ -409,11 +431,15 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   rowSpacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
 
   /**
-   * Defines the number of grids the component is going to use.
-   * It's applied for the `sm` breakpoint and wider screens if not overridden.
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
    * @default false
    */
-  sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.bool]),
+  sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
 
   /**
    * Defines the space between the type `item` components.
@@ -425,7 +451,7 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Defines the `flex-wrap` style property.
@@ -435,18 +461,26 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
   wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
 
   /**
-   * Defines the number of grids the component is going to use.
-   * It's applied for the `xl` breakpoint and wider screens.
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
    * @default false
    */
-  xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.bool]),
+  xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
 
   /**
-   * Defines the number of grids the component is going to use.
-   * It's applied for all the screen sizes with the lowest priority.
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for all the screen sizes with the lowest priority.
    * @default false
    */
-  xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), _propTypes.default.bool]),
+  xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
 
   /**
    * If `true`, it sets `min-width: 0` on the item.

package/node/Grid/gridClasses.js

@@ -6,17 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getGridUtilityClass = getGridUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getGridUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('MuiGrid', slot);
+  return (0, _base.generateUtilityClass)('MuiGrid', slot);
 }
 
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const gridClasses = (0, _core.generateUtilityClasses)('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth', // spacings
+const gridClasses = (0, _base.generateUtilityClasses)('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth', // spacings
 ...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
 ...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
 ...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints

package/node/Hidden/HiddenCss.js

@@ -17,7 +17,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
@@ -48,7 +48,7 @@ const useUtilityClasses = ownerState => {
       return dir === 'only' ? `${dir}${(0, _capitalize.default)(breakpoint)}` : `${breakpoint}${(0, _capitalize.default)(dir)}`;
     })]
   };
-  return (0, _core.unstable_composeClasses)(slots, _hiddenCssClasses.getHiddenCssUtilityClass, classes);
+  return (0, _base.unstable_composeClasses)(slots, _hiddenCssClasses.getHiddenCssUtilityClass, classes);
 };
 
 const HiddenCssRoot = (0, _styled.default)('div', {

package/node/Hidden/hiddenCssClasses.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getHiddenCssUtilityClass = getHiddenCssUtilityClass;
 
-var _core = require("@mui/core");
+var _base = require("@mui/base");
 
 function getHiddenCssUtilityClass(slot) {
-  return (0, _core.generateUtilityClass)('PrivateHiddenCss', slot);
+  return (0, _base.generateUtilityClass)('PrivateHiddenCss', slot);
 }
 
-const hiddenCssClasses = (0, _core.generateUtilityClasses)('PrivateHiddenCss', ['root', 'xlDown', 'xlUp', 'onlyXl', 'lgDown', 'lgUp', 'onlyLg', 'mdDown', 'mdUp', 'onlyMd', 'smDown', 'smUp', 'onlySm', 'xsDown', 'xsUp', 'onlyXs']);
+const hiddenCssClasses = (0, _base.generateUtilityClasses)('PrivateHiddenCss', ['root', 'xlDown', 'xlUp', 'onlyXl', 'lgDown', 'lgUp', 'onlyLg', 'mdDown', 'mdUp', 'onlyMd', 'smDown', 'smUp', 'onlySm', 'xsDown', 'xsUp', 'onlyXs']);
 var _default = hiddenCssClasses;
 exports.default = _default;