@mui/material 5.10.13 → 5.10.15

package/Grid/Grid.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,46 +11,27 @@ exports.generateGrid = generateGrid;
 exports.generateRowGap = generateRowGap;
 exports.resolveSpacingClasses = resolveSpacingClasses;
 exports.resolveSpacingStyles = resolveSpacingStyles;
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _system = require("@mui/system");
-
 var _base = require("@mui/base");
-
 var _requirePropFactory = _interopRequireDefault(require("../utils/requirePropFactory"));
-
 var _styled = _interopRequireDefault(require("../styles/styled"));
-
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-
 var _GridContext = _interopRequireDefault(require("./GridContext"));
-
 var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
-
 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; }
-
 function getOffset(val) {
   const parse = parseFloat(val);
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 }
-
 function generateGrid({
   theme,
   ownerState
@@ -60,15 +40,12 @@ function generateGrid({
   return theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
     // Use side effect over immutability for better performance.
     let styles = {};
-
     if (ownerState[breakpoint]) {
       size = ownerState[breakpoint];
     }
-
     if (!size) {
       return globalStyles;
     }
-
     if (size === true) {
       // For the auto layouting
       styles = {
@@ -90,18 +67,14 @@ function generateGrid({
         breakpoints: theme.breakpoints.values
       });
       const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
-
       if (columnValue === undefined || columnValue === null) {
         return globalStyles;
-      } // Keep 7 significant numbers.
-
-
+      }
+      // Keep 7 significant numbers.
       const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
       let more = {};
-
       if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
         const themeSpacing = theme.spacing(ownerState.columnSpacing);
-
         if (themeSpacing !== '0px') {
           const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
           more = {
@@ -109,28 +82,26 @@ function generateGrid({
             maxWidth: fullWidth
           };
         }
-      } // Close to the bootstrap implementation:
-      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
-
+      }
 
+      // Close to the bootstrap implementation:
+      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
       styles = (0, _extends2.default)({
         flexBasis: width,
         flexGrow: 0,
         maxWidth: width
       }, more);
-    } // No need for a media query for the first size.
-
+    }
 
+    // No need for a media query for the first size.
     if (theme.breakpoints.values[breakpoint] === 0) {
       Object.assign(globalStyles, styles);
     } else {
       globalStyles[theme.breakpoints.up(breakpoint)] = styles;
     }
-
     return globalStyles;
   }, {});
 }
-
 function generateDirection({
   theme,
   ownerState
@@ -145,23 +116,20 @@ function generateDirection({
     const output = {
       flexDirection: propValue
     };
-
     if (propValue.indexOf('column') === 0) {
       output[`& > .${_gridClasses.default.item}`] = {
         maxWidth: 'none'
       };
     }
-
     return output;
   });
 }
+
 /**
  * Extracts zero value breakpoint keys before a non-zero value breakpoint key.
  * @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
  * @returns [xs, sm]
  */
-
-
 function extractZeroValueBreakpointKeys({
   breakpoints,
   values
@@ -171,7 +139,6 @@ function extractZeroValueBreakpointKeys({
     if (nonZeroKey !== '') {
       return;
     }
-
     if (values[key] !== 0) {
       nonZeroKey = key;
     }
@@ -181,7 +148,6 @@ function extractZeroValueBreakpointKeys({
   });
   return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
 }
-
 function generateRowGap({
   theme,
   ownerState
@@ -191,28 +157,23 @@ function generateRowGap({
     rowSpacing
   } = ownerState;
   let styles = {};
-
   if (container && rowSpacing !== 0) {
     const rowSpacingValues = (0, _system.unstable_resolveBreakpointValues)({
       values: rowSpacing,
       breakpoints: theme.breakpoints.values
     });
     let zeroValueBreakpointKeys;
-
     if (typeof rowSpacingValues === 'object') {
       zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
         breakpoints: theme.breakpoints.values,
         values: rowSpacingValues
       });
     }
-
     styles = (0, _system.handleBreakpoints)({
       theme
     }, rowSpacingValues, (propValue, breakpoint) => {
       var _zeroValueBreakpointK;
-
       const themeSpacing = theme.spacing(propValue);
-
       if (themeSpacing !== '0px') {
         return {
           marginTop: `-${getOffset(themeSpacing)}`,
@@ -221,11 +182,9 @@ function generateRowGap({
           }
         };
       }
-
       if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
         return {};
       }
-
       return {
         marginTop: 0,
         [`& > .${_gridClasses.default.item}`]: {
@@ -234,10 +193,8 @@ function generateRowGap({
       };
     });
   }
-
   return styles;
 }
-
 function generateColumnGap({
   theme,
   ownerState
@@ -247,28 +204,23 @@ function generateColumnGap({
     columnSpacing
   } = ownerState;
   let styles = {};
-
   if (container && columnSpacing !== 0) {
     const columnSpacingValues = (0, _system.unstable_resolveBreakpointValues)({
       values: columnSpacing,
       breakpoints: theme.breakpoints.values
     });
     let zeroValueBreakpointKeys;
-
     if (typeof columnSpacingValues === 'object') {
       zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
         breakpoints: theme.breakpoints.values,
         values: columnSpacingValues
       });
     }
-
     styles = (0, _system.handleBreakpoints)({
       theme
     }, columnSpacingValues, (propValue, breakpoint) => {
       var _zeroValueBreakpointK2;
-
       const themeSpacing = theme.spacing(propValue);
-
       if (themeSpacing !== '0px') {
         return {
           width: `calc(100% + ${getOffset(themeSpacing)})`,
@@ -278,11 +230,9 @@ function generateColumnGap({
           }
         };
       }
-
       if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
         return {};
       }
-
       return {
         width: '100%',
         marginLeft: 0,
@@ -292,39 +242,34 @@ function generateColumnGap({
       };
     });
   }
-
   return styles;
 }
-
 function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
   // undefined/null or `spacing` <= 0
   if (!spacing || spacing <= 0) {
     return [];
-  } // in case of string/number `spacing`
-
-
+  }
+  // in case of string/number `spacing`
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
     return [styles[`spacing-xs-${String(spacing)}`]];
-  } // in case of object `spacing`
-
-
+  }
+  // in case of object `spacing`
   const spacingStyles = [];
   breakpoints.forEach(breakpoint => {
     const value = spacing[breakpoint];
-
     if (Number(value) > 0) {
       spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
     }
   });
   return spacingStyles;
-} // Default CSS values
+}
+
+// Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
 // alignItems: 'flex-start',
 // flexWrap: 'nowrap',
 // justifyContent: 'flex-start',
-
-
 const GridRoot = (0, _styled.default)('div', {
   name: 'MuiGrid',
   slot: 'Root',
@@ -341,16 +286,15 @@ const GridRoot = (0, _styled.default)('div', {
       zeroMinWidth,
       breakpoints
     } = ownerState;
-    let spacingStyles = []; // in case of grid item
+    let spacingStyles = [];
 
+    // in case of grid item
     if (container) {
       spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
     }
-
     const breakpointsStyles = [];
     breakpoints.forEach(breakpoint => {
       const value = ownerState[breakpoint];
-
       if (value) {
         breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
       }
@@ -367,29 +311,24 @@ const GridRoot = (0, _styled.default)('div', {
   width: '100%'
 }, ownerState.item && {
   margin: 0 // For instance, it's useful when used with a `figure` element.
-
 }, ownerState.zeroMinWidth && {
   minWidth: 0
 }, ownerState.wrap !== 'wrap' && {
   flexWrap: ownerState.wrap
 }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
-
 function resolveSpacingClasses(spacing, breakpoints) {
   // undefined/null or `spacing` <= 0
   if (!spacing || spacing <= 0) {
     return [];
-  } // in case of string/number `spacing`
-
-
+  }
+  // in case of string/number `spacing`
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
     return [`spacing-xs-${String(spacing)}`];
-  } // in case of object `spacing`
-
-
+  }
+  // in case of object `spacing`
   const classes = [];
   breakpoints.forEach(breakpoint => {
     const value = spacing[breakpoint];
-
     if (Number(value) > 0) {
       const className = `spacing-${breakpoint}-${String(value)}`;
       classes.push(className);
@@ -397,7 +336,6 @@ function resolveSpacingClasses(spacing, breakpoints) {
   });
   return classes;
 }
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -409,16 +347,15 @@ const useUtilityClasses = ownerState => {
     zeroMinWidth,
     breakpoints
   } = ownerState;
-  let spacingClasses = []; // in case of grid item
+  let spacingClasses = [];
 
+  // in case of grid item
   if (container) {
     spacingClasses = resolveSpacingClasses(spacing, breakpoints);
   }
-
   const breakpointsClasses = [];
   breakpoints.forEach(breakpoint => {
     const value = ownerState[breakpoint];
-
     if (value) {
       breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
     }
@@ -428,7 +365,6 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _base.unstable_composeClasses)(slots, _gridClasses.getGridUtilityClass, classes);
 };
-
 const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   const themeProps = (0, _useThemeProps.default)({
     props: inProps,
@@ -439,23 +375,24 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   } = (0, _useTheme.default)();
   const props = (0, _system.unstable_extendSxProp)(themeProps);
   const {
-    className,
-    columns: columnsProp,
-    columnSpacing: columnSpacingProp,
-    component = 'div',
-    container = false,
-    direction = 'row',
-    item = false,
-    rowSpacing: rowSpacingProp,
-    spacing = 0,
-    wrap = 'wrap',
-    zeroMinWidth = false
-  } = props,
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      className,
+      columns: columnsProp,
+      columnSpacing: columnSpacingProp,
+      component = 'div',
+      container = false,
+      direction = 'row',
+      item = false,
+      rowSpacing: rowSpacingProp,
+      spacing = 0,
+      wrap = 'wrap',
+      zeroMinWidth = false
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
-  const columnsContext = React.useContext(_GridContext.default); // columns set with default breakpoint unit of 12
+  const columnsContext = React.useContext(_GridContext.default);
 
+  // columns set with default breakpoint unit of 12
   const columns = container ? columnsProp || 12 : columnsContext;
   const breakpointsValues = {};
   const otherFiltered = (0, _extends2.default)({}, other);
@@ -489,68 +426,56 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     }, otherFiltered))
   });
 });
-process.env.NODE_ENV !== "production" ? Grid.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Grid.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: _propTypes.default.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * The number of columns.
    * @default 12
    */
   columns: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
-
   /**
    * Defines the horizontal space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
   columnSpacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
   container: _propTypes.default.bool,
-
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'row'
    */
   direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
-
   /**
    * If `true`, the component will have the flex *item* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
   item: _propTypes.default.bool,
-
   /**
    * 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).
@@ -561,7 +486,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
-
   /**
    * 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).
@@ -572,13 +496,11 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
-
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
   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]),
-
   /**
    * 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).
@@ -589,26 +511,22 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
-
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
    * @default 0
    */
   spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
   wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
-
   /**
    * 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).
@@ -619,7 +537,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
-
   /**
    * 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).
@@ -630,7 +547,6 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    * @default false
    */
   xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number, _propTypes.default.bool]),
-
   /**
    * If `true`, it sets `min-width: 0` on the item.
    * Refer to the limitations section of the documentation to better understand the use case.
@@ -638,10 +554,9 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes
    */
   zeroMinWidth: _propTypes.default.bool
 } : void 0;
-
 if (process.env.NODE_ENV !== 'production') {
-  const requireProp = (0, _requirePropFactory.default)('Grid', Grid); // eslint-disable-next-line no-useless-concat
-
+  const requireProp = (0, _requirePropFactory.default)('Grid', Grid);
+  // eslint-disable-next-line no-useless-concat
   Grid['propTypes' + ''] = (0, _extends2.default)({}, Grid.propTypes, {
     direction: requireProp('container'),
     lg: requireProp('item'),
@@ -653,6 +568,5 @@ if (process.env.NODE_ENV !== 'production') {
     zeroMinWidth: requireProp('item')
   });
 }
-
 var _default = Grid;
 exports.default = _default;

package/Grid/GridContext.js

@@ -4,21 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * @ignore - internal component.
  */
 const GridContext = /*#__PURE__*/React.createContext();
-
 if (process.env.NODE_ENV !== 'production') {
   GridContext.displayName = 'GridContext';
 }
-
 var _default = GridContext;
 exports.default = _default;

package/Grid/gridClasses.js

@@ -1,29 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getGridUtilityClass = getGridUtilityClass;
-
 var _utils = require("@mui/utils");
-
 var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
-
 function getGridUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('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, _utils.unstable_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
+const gridClasses = (0, _utils.unstable_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
 ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
 var _default = gridClasses;
 exports.default = _default;

package/Grid/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -20,11 +19,8 @@ Object.defineProperty(exports, "gridClasses", {
     return _gridClasses.default;
   }
 });
-
 var _Grid = _interopRequireDefault(require("./Grid"));
-
 var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
-
 Object.keys(_gridClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -36,7 +32,5 @@ Object.keys(_gridClasses).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; }