@mui/system 5.10.13 → 5.10.15

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.13
+/** @license MUI v5.10.15
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -6,7 +6,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -31,6 +30,7 @@ var _exportNames = {
   spacing: true,
   style: true,
   getPath: true,
+  getStyleValue: true,
   typography: true,
   unstable_styleFunctionSx: true,
   unstable_createStyleFunctionSx: true,
@@ -52,6 +52,7 @@ var _exportNames = {
   ThemeProvider: true,
   unstable_createCssVarsProvider: true,
   unstable_createGetCssVar: true,
+  responsivePropType: true,
   createContainer: true,
   Container: true,
   Unstable_Grid: true,
@@ -183,6 +184,12 @@ Object.defineProperty(exports, "getPath", {
     return _style.getPath;
   }
 });
+Object.defineProperty(exports, "getStyleValue", {
+  enumerable: true,
+  get: function () {
+    return _style.getStyleValue;
+  }
+});
 Object.defineProperty(exports, "getThemeProps", {
   enumerable: true,
   get: function () {
@@ -225,6 +232,12 @@ Object.defineProperty(exports, "positions", {
     return _positions.default;
   }
 });
+Object.defineProperty(exports, "responsivePropType", {
+  enumerable: true,
+  get: function () {
+    return _responsivePropType.default;
+  }
+});
 Object.defineProperty(exports, "shadows", {
   enumerable: true,
   get: function () {
@@ -327,11 +340,8 @@ Object.defineProperty(exports, "useThemeWithoutDefault", {
     return _useThemeWithoutDefault.default;
   }
 });
-
 var _styledEngine = require("@mui/styled-engine");
-
 var _borders = _interopRequireWildcard(require("./borders"));
-
 Object.keys(_borders).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -343,15 +353,10 @@ Object.keys(_borders).forEach(function (key) {
     }
   });
 });
-
 var _breakpoints = _interopRequireWildcard(require("./breakpoints"));
-
 var _compose = _interopRequireDefault(require("./compose"));
-
 var _display = _interopRequireDefault(require("./display"));
-
 var _flexbox = _interopRequireWildcard(require("./flexbox"));
-
 Object.keys(_flexbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -363,9 +368,7 @@ Object.keys(_flexbox).forEach(function (key) {
     }
   });
 });
-
 var _cssGrid = _interopRequireWildcard(require("./cssGrid"));
-
 Object.keys(_cssGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -377,9 +380,7 @@ Object.keys(_cssGrid).forEach(function (key) {
     }
   });
 });
-
 var _palette = _interopRequireWildcard(require("./palette"));
-
 Object.keys(_palette).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -391,9 +392,7 @@ Object.keys(_palette).forEach(function (key) {
     }
   });
 });
-
 var _positions = _interopRequireWildcard(require("./positions"));
-
 Object.keys(_positions).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -405,11 +404,8 @@ Object.keys(_positions).forEach(function (key) {
     }
   });
 });
-
 var _shadows = _interopRequireDefault(require("./shadows"));
-
 var _sizing = _interopRequireWildcard(require("./sizing"));
-
 Object.keys(_sizing).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -421,9 +417,7 @@ Object.keys(_sizing).forEach(function (key) {
     }
   });
 });
-
 var _spacing = _interopRequireWildcard(require("./spacing"));
-
 Object.keys(_spacing).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -435,11 +429,8 @@ Object.keys(_spacing).forEach(function (key) {
     }
   });
 });
-
 var _style = _interopRequireWildcard(require("./style"));
-
 var _typography = _interopRequireWildcard(require("./typography"));
-
 Object.keys(_typography).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -451,19 +442,12 @@ Object.keys(_typography).forEach(function (key) {
     }
   });
 });
-
 var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
-
 var _sx = _interopRequireDefault(require("./sx"));
-
 var _getThemeValue = _interopRequireDefault(require("./getThemeValue"));
-
 var _Box = _interopRequireDefault(require("./Box"));
-
 var _createBox = _interopRequireDefault(require("./createBox"));
-
 var _createStyled = _interopRequireWildcard(require("./createStyled"));
-
 Object.keys(_createStyled).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -475,25 +459,15 @@ Object.keys(_createStyled).forEach(function (key) {
     }
   });
 });
-
 var _styled = _interopRequireDefault(require("./styled"));
-
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-
 var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints"));
-
 var _createSpacing = _interopRequireDefault(require("./createTheme/createSpacing"));
-
 var _shape = _interopRequireDefault(require("./createTheme/shape"));
-
 var _useThemeProps = _interopRequireWildcard(require("./useThemeProps"));
-
 var _useTheme = _interopRequireDefault(require("./useTheme"));
-
 var _useThemeWithoutDefault = _interopRequireDefault(require("./useThemeWithoutDefault"));
-
 var _colorManipulator = require("./colorManipulator");
-
 Object.keys(_colorManipulator).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -505,17 +479,12 @@ Object.keys(_colorManipulator).forEach(function (key) {
     }
   });
 });
-
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
-
 var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
-
 var _createGetCssVar = _interopRequireDefault(require("./cssVars/createGetCssVar"));
-
+var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _createContainer = _interopRequireDefault(require("./Container/createContainer"));
-
 var _Container = _interopRequireWildcard(require("./Container"));
-
 Object.keys(_Container).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -527,11 +496,8 @@ Object.keys(_Container).forEach(function (key) {
     }
   });
 });
-
 var _Grid = _interopRequireDefault(require("./Unstable_Grid/Grid"));
-
 var _Unstable_Grid = require("./Unstable_Grid");
-
 Object.keys(_Unstable_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -543,11 +509,8 @@ Object.keys(_Unstable_Grid).forEach(function (key) {
     }
   });
 });
-
 var _Stack = _interopRequireDefault(require("./Stack/Stack"));
-
 var _Stack2 = require("./Stack");
-
 Object.keys(_Stack2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -559,7 +522,5 @@ Object.keys(_Stack2).forEach(function (key) {
     }
   });
 });
-
 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; }

package/legacy/Box/Box.js

@@ -1,25 +1,20 @@
 import PropTypes from 'prop-types';
 import createBox from '../createBox';
 var Box = createBox();
-process.env.NODE_ENV !== "production" ? Box.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
   children: PropTypes.node,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Container/Container.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import createContainer from './createContainer';
+
 /**
  *
  * Demos:
@@ -11,38 +12,30 @@ import createContainer from './createContainer';
  *
  * - [Container API](https://mui.com/system/api/container/)
  */
-
 var Container = createContainer();
-process.env.NODE_ENV !== "production" ? Container.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
   disableGutters: PropTypes.bool,
-
   /**
    * Set the max-width to match the min-width of the current breakpoint.
    * This is useful if you'd prefer to design for a fixed set of sizes
@@ -51,17 +44,13 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
    * @default false
    */
   fixed: PropTypes.bool,
-
   /**
    * Determine the max-width of the container.
    * The container width grows with the size of the screen.
    * Set to `false` to disable `maxWidth`.
    * @default 'lg'
    */
-  maxWidth: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
-
+  maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Container/createContainer.js

@@ -18,7 +18,6 @@ var defaultCreateStyledComponent = systemStyled('div', {
     return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
   }
 });
-
 var useThemePropsDefault = function useThemePropsDefault(inProps) {
   return useThemePropsSystem({
     props: inProps,
@@ -26,33 +25,30 @@ var useThemePropsDefault = function useThemePropsDefault(inProps) {
     defaultTheme: defaultTheme
   });
 };
-
 var useUtilityClasses = function useUtilityClasses(ownerState, componentName) {
   var getContainerUtilityClass = function getContainerUtilityClass(slot) {
     return generateUtilityClass(componentName, slot);
   };
-
   var classes = ownerState.classes,
-      fixed = ownerState.fixed,
-      disableGutters = ownerState.disableGutters,
-      maxWidth = ownerState.maxWidth;
+    fixed = ownerState.fixed,
+    disableGutters = ownerState.disableGutters,
+    maxWidth = ownerState.maxWidth;
   var slots = {
     root: ['root', maxWidth && "maxWidth".concat(capitalize(String(maxWidth))), fixed && 'fixed', disableGutters && 'disableGutters']
   };
   return composeClasses(slots, getContainerUtilityClass, classes);
 };
-
 export default function createContainer() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _options$createStyled = options.createStyledComponent,
-      createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
-      _options$useThemeProp = options.useThemeProps,
-      useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
-      _options$componentNam = options.componentName,
-      componentName = _options$componentNam === void 0 ? 'MuiContainer' : _options$componentNam;
+    createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
+    _options$useThemeProp = options.useThemeProps,
+    useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
+    _options$componentNam = options.componentName,
+    componentName = _options$componentNam === void 0 ? 'MuiContainer' : _options$componentNam;
   var ContainerRoot = createStyledComponent(function (_ref) {
     var theme = _ref.theme,
-        ownerState = _ref.ownerState;
+      ownerState = _ref.ownerState;
     return _extends({
       width: '100%',
       marginLeft: 'auto',
@@ -68,27 +64,26 @@ export default function createContainer() {
     }));
   }, function (_ref3) {
     var theme = _ref3.theme,
-        ownerState = _ref3.ownerState;
+      ownerState = _ref3.ownerState;
     return ownerState.fixed && Object.keys(theme.breakpoints.values).reduce(function (acc, breakpointValueKey) {
       var breakpoint = breakpointValueKey;
       var value = theme.breakpoints.values[breakpoint];
-
       if (value !== 0) {
         // @ts-ignore
         acc[theme.breakpoints.up(breakpoint)] = {
           maxWidth: "".concat(value).concat(theme.breakpoints.unit)
         };
       }
-
       return acc;
     }, {});
   }, function (_ref4) {
     var theme = _ref4.theme,
-        ownerState = _ref4.ownerState;
+      ownerState = _ref4.ownerState;
     return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
       // @ts-ignore module augmentation fails if custom breakpoints are used
       maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }), ownerState.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
+    }), ownerState.maxWidth &&
+    // @ts-ignore module augmentation fails if custom breakpoints are used
     ownerState.maxWidth !== 'xs' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
       // @ts-ignore module augmentation fails if custom breakpoints are used
       maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
@@ -96,33 +91,32 @@ export default function createContainer() {
   });
   var Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
     var props = useThemeProps(inProps);
-
     var className = props.className,
-        _props$component = props.component,
-        component = _props$component === void 0 ? 'div' : _props$component,
-        _props$disableGutters = props.disableGutters,
-        disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
-        _props$fixed = props.fixed,
-        fixed = _props$fixed === void 0 ? false : _props$fixed,
-        _props$maxWidth = props.maxWidth,
-        maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
-        classesProp = props.classes,
-        other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
-
+      _props$component = props.component,
+      component = _props$component === void 0 ? 'div' : _props$component,
+      _props$disableGutters = props.disableGutters,
+      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
+      _props$fixed = props.fixed,
+      fixed = _props$fixed === void 0 ? false : _props$fixed,
+      _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
+      classesProp = props.classes,
+      other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
     var ownerState = _extends({}, props, {
       component: component,
       disableGutters: disableGutters,
       fixed: fixed,
       maxWidth: maxWidth
-    }); // @ts-ignore module augmentation fails if custom breakpoints are used
-
+    });
 
+    // @ts-ignore module augmentation fails if custom breakpoints are used
     var classes = useUtilityClasses(ownerState, componentName);
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
       _jsx(ContainerRoot, _extends({
-        as: component // @ts-ignore module augmentation fails if custom breakpoints are used
+        as: component
+        // @ts-ignore module augmentation fails if custom breakpoints are used
         ,
         ownerState: ownerState,
         className: clsx(classes.root, className),
@@ -130,18 +124,14 @@ export default function createContainer() {
       }, other))
     );
   });
-  process.env.NODE_ENV !== "production" ? Container.propTypes
-  /* remove-proptypes */
-  = {
+  process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
     children: PropTypes.node,
     classes: PropTypes.object,
     className: PropTypes.string,
     component: PropTypes.elementType,
     disableGutters: PropTypes.bool,
     fixed: PropTypes.bool,
-    maxWidth: PropTypes
-    /* @typescript-to-proptypes-ignore */
-    .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
+    maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
   } : void 0;
   return Container;

package/legacy/Stack/Stack.js

@@ -11,39 +11,31 @@ import createStack from './createStack';
  *
  * - [Stack API](https://mui.com/system/api/stack/)
  */
-
 var Stack = createStack();
-process.env.NODE_ENV !== "production" ? Stack.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'column'
    */
   direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-
   /**
    * Add an element between each child.
    */
   divider: PropTypes.node,
-
   /**
    * Defines the space between immediate children.
    * @default 0
    */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Stack/createStack.js

@@ -22,7 +22,6 @@ var defaultCreateStyledComponent = systemStyled('div', {
     return styles.root;
   }
 });
-
 function useThemePropsDefault(props) {
   return useThemePropsSystem({
     props: props,
@@ -30,6 +29,7 @@ function useThemePropsDefault(props) {
     defaultTheme: defaultTheme
   });
 }
+
 /**
  * Return an array with the separator React element interspersed between
  * each React node of the input children.
@@ -37,23 +37,18 @@ function useThemePropsDefault(props) {
  * > joinChildren([1,2,3], 0)
  * [1,0,2,0,3]
  */
-
-
 function joinChildren(children, separator) {
   var childrenArray = React.Children.toArray(children).filter(Boolean);
   return childrenArray.reduce(function (output, child, index) {
     output.push(child);
-
     if (index < childrenArray.length - 1) {
       output.push( /*#__PURE__*/React.cloneElement(separator, {
         key: "separator-".concat(index)
       }));
     }
-
     return output;
   }, []);
 }
-
 var getSideFromDirection = function getSideFromDirection(direction) {
   return {
     row: 'Left',
@@ -62,11 +57,9 @@ var getSideFromDirection = function getSideFromDirection(direction) {
     'column-reverse': 'Bottom'
   }[direction];
 };
-
 export var style = function style(_ref) {
   var ownerState = _ref.ownerState,
-      theme = _ref.theme;
-
+    theme = _ref.theme;
   var styles = _extends({
     display: 'flex',
     flexDirection: 'column'
@@ -80,14 +73,12 @@ export var style = function style(_ref) {
       flexDirection: propValue
     };
   }));
-
   if (ownerState.spacing) {
     var transformer = createUnarySpacing(theme);
     var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
       if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
         acc[breakpoint] = true;
       }
-
       return acc;
     }, {});
     var directionValues = resolveBreakpointValues({
@@ -98,18 +89,15 @@ export var style = function style(_ref) {
       values: ownerState.spacing,
       base: base
     });
-
     if (_typeof(directionValues) === 'object') {
       Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
         var directionValue = directionValues[breakpoint];
-
         if (!directionValue) {
           var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
           directionValues[breakpoint] = previousDirectionValue;
         }
       });
     }
-
     var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
       return {
         '& > :not(style) + :not(style)': _defineProperty({
@@ -117,24 +105,21 @@ export var style = function style(_ref) {
         }, "margin".concat(getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)), getValue(transformer, propValue))
       };
     };
-
     styles = deepmerge(styles, handleBreakpoints({
       theme: theme
     }, spacingValues, styleFromPropValue));
   }
-
   styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
   return styles;
 };
 export default function createStack() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _options$createStyled = options.createStyledComponent,
-      createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
-      _options$useThemeProp = options.useThemeProps,
-      useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
-      _options$componentNam = options.componentName,
-      componentName = _options$componentNam === void 0 ? 'MuiStack' : _options$componentNam;
-
+    createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
+    _options$useThemeProp = options.useThemeProps,
+    useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
+    _options$componentNam = options.componentName,
+    componentName = _options$componentNam === void 0 ? 'MuiStack' : _options$componentNam;
   var useUtilityClasses = function useUtilityClasses() {
     var slots = {
       root: ['root']
@@ -143,23 +128,20 @@ export default function createStack() {
       return generateUtilityClass(componentName, slot);
     }, {});
   };
-
   var StackRoot = createStyledComponent(style);
   var Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     var themeProps = useThemeProps(inProps);
     var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-
     var _props$component = props.component,
-        component = _props$component === void 0 ? 'div' : _props$component,
-        _props$direction = props.direction,
-        direction = _props$direction === void 0 ? 'column' : _props$direction,
-        _props$spacing = props.spacing,
-        spacing = _props$spacing === void 0 ? 0 : _props$spacing,
-        divider = props.divider,
-        children = props.children,
-        className = props.className,
-        other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children", "className"]);
-
+      component = _props$component === void 0 ? 'div' : _props$component,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'column' : _props$direction,
+      _props$spacing = props.spacing,
+      spacing = _props$spacing === void 0 ? 0 : _props$spacing,
+      divider = props.divider,
+      children = props.children,
+      className = props.className,
+      other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children", "className"]);
     var ownerState = {
       direction: direction,
       spacing: spacing
@@ -174,9 +156,7 @@ export default function createStack() {
       children: divider ? joinChildren(children, divider) : children
     }));
   });
-  process.env.NODE_ENV !== "production" ? Stack.propTypes
-  /* remove-proptypes */
-  = {
+  process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
     children: PropTypes.node,
     direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
     divider: PropTypes.node,