@mui/system 5.10.13 → 5.10.14

package/Unstable_Grid/createGrid.js

@@ -1,52 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createGrid;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _utils = require("@mui/utils");
-
 var _styled = _interopRequireDefault(require("../styled"));
-
 var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
-
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-
 var _styleFunctionSx = require("../styleFunctionSx");
-
 var _createTheme = _interopRequireDefault(require("../createTheme"));
-
 var _gridGenerator = require("./gridGenerator");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 const _excluded = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
-
 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; }
+const defaultTheme = (0, _createTheme.default)();
 
-const defaultTheme = (0, _createTheme.default)(); // widening Theme to any so that the consumer can own the theme structure.
-
+// widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = (0, _styled.default)('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 });
-
 function useThemePropsDefault(props) {
   return (0, _useThemeProps.default)({
     props,
@@ -54,7 +36,6 @@ function useThemePropsDefault(props) {
     defaultTheme
   });
 }
-
 function createGrid(options = {}) {
   const {
     // This will allow adding custom styled fn (for example for custom sx style function)
@@ -64,7 +45,6 @@ function createGrid(options = {}) {
   } = options;
   const NestedContext = /*#__PURE__*/React.createContext(false);
   const OverflowContext = /*#__PURE__*/React.createContext(undefined);
-
   const useUtilityClasses = (ownerState, theme) => {
     const {
       container,
@@ -78,38 +58,33 @@ function createGrid(options = {}) {
     };
     return (0, _utils.unstable_composeClasses)(slots, slot => (0, _utils.unstable_generateUtilityClass)(componentName, slot), {});
   };
-
   const GridRoot = createStyledComponent(_gridGenerator.generateGridColumnsStyles, _gridGenerator.generateGridColumnSpacingStyles, _gridGenerator.generateGridRowSpacingStyles, _gridGenerator.generateGridSizeStyles, _gridGenerator.generateGridDirectionStyles, _gridGenerator.generateGridStyles, _gridGenerator.generateGridOffsetStyles);
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
-
     const theme = (0, _useTheme.default)();
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
-
     const nested = React.useContext(NestedContext);
     const overflow = React.useContext(OverflowContext);
     const {
-      className,
-      columns: columnsProp = 12,
-      container = false,
-      component = 'div',
-      direction = 'row',
-      wrap = 'wrap',
-      spacing: spacingProp = 0,
-      rowSpacing: rowSpacingProp = spacingProp,
-      columnSpacing: columnSpacingProp = spacingProp,
-      disableEqualOverflow: themeDisableEqualOverflow
-    } = props,
-          rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
-
+        className,
+        columns: columnsProp = 12,
+        container = false,
+        component = 'div',
+        direction = 'row',
+        wrap = 'wrap',
+        spacing: spacingProp = 0,
+        rowSpacing: rowSpacingProp = spacingProp,
+        columnSpacing: columnSpacingProp = spacingProp,
+        disableEqualOverflow: themeDisableEqualOverflow
+      } = props,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     let disableEqualOverflow = themeDisableEqualOverflow;
-
     if (nested && themeDisableEqualOverflow !== undefined) {
       disableEqualOverflow = inProps.disableEqualOverflow;
-    } // collect breakpoints related props because they can be customized from the theme.
-
-
+    }
+    // collect breakpoints related props because they can be customized from the theme.
     const gridSize = {};
     const gridOffset = {};
     const other = {};
@@ -140,8 +115,8 @@ function createGrid(options = {}) {
       disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
       // use context value if exists.
       parentDisableEqualOverflow: overflow // for nested grid
-
     });
+
     const classes = useUtilityClasses(ownerState, theme);
     let result = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, (0, _extends2.default)({
       ref: ref,
@@ -149,14 +124,12 @@ function createGrid(options = {}) {
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className)
     }, other));
-
     if (!nested) {
       result = /*#__PURE__*/(0, _jsxRuntime.jsx)(NestedContext.Provider, {
         value: true,
         children: result
       });
     }
-
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
       // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.
@@ -166,12 +139,9 @@ function createGrid(options = {}) {
         children: result
       });
     }
-
     return result;
   });
-  process.env.NODE_ENV !== "production" ? Grid.propTypes
-  /* remove-proptypes */
-  = {
+  process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
     children: _propTypes.default.node,
     className: _propTypes.default.string,
     columns: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),

package/Unstable_Grid/gridClasses.d.ts

@@ -1,20 +1,20 @@
-export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
-}
-export declare type GridClassKey = keyof GridClasses;
-export declare function getGridUtilityClass(slot: string): string;
-declare const gridClasses: GridClasses;
-export default gridClasses;
+export interface GridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `container={true}`. */
+    container: string;
+    /** Styles applied to the root element if `direction="column"`. */
+    'direction-xs-column': string;
+    /** Styles applied to the root element if `direction="column-reverse"`. */
+    'direction-xs-column-reverse': string;
+    /** Styles applied to the root element if `direction="row-reverse"`. */
+    'direction-xs-row-reverse': string;
+    /** Styles applied to the root element if `wrap="nowrap"`. */
+    'wrap-xs-nowrap': string;
+    /** Styles applied to the root element if `wrap="reverse"`. */
+    'wrap-xs-wrap-reverse': string;
+}
+export declare type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;

package/Unstable_Grid/gridClasses.js

@@ -5,21 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getGridUtilityClass = getGridUtilityClass;
-
 var _utils = require("@mui/utils");
-
 function getGridUtilityClass(slot) {
   return (0, _utils.unstable_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, _utils.unstable_generateUtilityClasses)('MuiGrid', ['root', 'container', 'item', // 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',
+// 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/Unstable_Grid/gridGenerator.d.ts

@@ -1,28 +1,29 @@
-import { Breakpoints } from '../createTheme/createBreakpoints';
-import { Spacing } from '../createTheme/createSpacing';
-import { ResponsiveStyleValue } from '../styleFunctionSx';
-import { GridDirection, GridOwnerState } from './GridProps';
-interface Props {
-    theme: {
-        breakpoints: Breakpoints;
-        spacing?: Spacing;
-    };
-    ownerState: GridOwnerState & {
-        parentDisableEqualOverflow?: boolean;
-    };
-}
-interface Iterator<T> {
-    (appendStyle: (responsizeStyles: Record<string, any>, style: object) => void, value: T): void;
-}
-export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsize: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
-export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridStyles: ({ ownerState }: Props) => {};
-export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
-export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
-export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
-export {};
+import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Spacing } from '../createTheme/createSpacing';
+import { ResponsiveStyleValue } from '../styleFunctionSx';
+import { GridDirection, GridOwnerState } from './GridProps';
+interface Props {
+    theme: {
+        breakpoints: Breakpoints;
+        spacing?: Spacing;
+    };
+    ownerState: GridOwnerState & {
+        parentDisableEqualOverflow?: boolean;
+    };
+}
+interface Iterator<T> {
+    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
+export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridStyles: ({ ownerState }: Props) => {};
+export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
+export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
+export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
+export {};

package/Unstable_Grid/gridGenerator.js

@@ -1,58 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traverseBreakpoints = exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = void 0;
-
+exports.traverseBreakpoints = exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = exports.filterBreakpointKeys = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-const traverseBreakpoints = (breakpoints, responsize, iterator) => {
+const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+exports.filterBreakpointKeys = filterBreakpointKeys;
+const traverseBreakpoints = (breakpoints, responsive, iterator) => {
   const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
 
-  if (Array.isArray(responsize)) {
-    responsize.forEach((breakpointValue, index) => {
-      iterator((responsizeStyles, style) => {
+  if (Array.isArray(responsive)) {
+    responsive.forEach((breakpointValue, index) => {
+      iterator((responsiveStyles, style) => {
         if (index <= breakpoints.keys.length - 1) {
           if (index === 0) {
-            Object.assign(responsizeStyles, style);
+            Object.assign(responsiveStyles, style);
           } else {
-            responsizeStyles[breakpoints.up(breakpoints.keys[index])] = style;
+            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
           }
         }
       }, breakpointValue);
     });
-  } else if (responsize && typeof responsize === 'object') {
+  } else if (responsive && typeof responsive === 'object') {
     // prevent null
-    // responsize could be a very big object, pick the smallest responsive values
-    const keys = Object.keys(responsize).length > breakpoints.keys.length ? breakpoints.keys : Object.keys(responsize);
+    // responsive could be a very big object, pick the smallest responsive values
+
+    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
     keys.forEach(key => {
       if (breakpoints.keys.indexOf(key) !== -1) {
-        // @ts-ignore already checked that responsize is an object
-        const breakpointValue = responsize[key];
-
+        // @ts-ignore already checked that responsive is an object
+        const breakpointValue = responsive[key];
         if (breakpointValue !== undefined) {
-          iterator((responsizeStyles, style) => {
+          iterator((responsiveStyles, style) => {
             if (smallestBreakpoint === key) {
-              Object.assign(responsizeStyles, style);
+              Object.assign(responsiveStyles, style);
             } else {
-              responsizeStyles[breakpoints.up(key)] = style;
+              responsiveStyles[breakpoints.up(key)] = style;
             }
           }, breakpointValue);
         }
       }
     });
-  } else if (typeof responsize === 'number' || typeof responsize === 'string') {
-    iterator((responsizeStyles, style) => {
-      Object.assign(responsizeStyles, style);
-    }, responsize);
+  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
+    iterator((responsiveStyles, style) => {
+      Object.assign(responsiveStyles, style);
+    }, responsive);
   }
 };
-
 exports.traverseBreakpoints = traverseBreakpoints;
-
 const generateGridSizeStyles = ({
   theme,
   ownerState
@@ -60,7 +57,6 @@ const generateGridSizeStyles = ({
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
     let style = {};
-
     if (value === true) {
       style = {
         flexBasis: 0,
@@ -68,7 +64,6 @@ const generateGridSizeStyles = ({
         maxWidth: '100%'
       };
     }
-
     if (value === 'auto') {
       style = {
         flexBasis: 'auto',
@@ -78,7 +73,6 @@ const generateGridSizeStyles = ({
         width: 'auto'
       };
     }
-
     if (typeof value === 'number') {
       style = {
         flexGrow: 0,
@@ -86,14 +80,11 @@ const generateGridSizeStyles = ({
         width: `calc(100% * ${value} / var(--Grid-columns)${ownerState.nested && ownerState.container ? ` + var(--Grid-columnSpacing)` : ''})`
       };
     }
-
     appendStyle(styles, style);
   });
   return styles;
 };
-
 exports.generateGridSizeStyles = generateGridSizeStyles;
-
 const generateGridOffsetStyles = ({
   theme,
   ownerState
@@ -101,26 +92,21 @@ const generateGridOffsetStyles = ({
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
     let style = {};
-
     if (value === 'auto') {
       style = {
         marginLeft: 'auto'
       };
     }
-
     if (typeof value === 'number') {
       style = {
         marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
       };
     }
-
     appendStyle(styles, style);
   });
   return styles;
 };
-
 exports.generateGridOffsetStyles = generateGridOffsetStyles;
-
 const generateGridColumnsStyles = ({
   theme,
   ownerState
@@ -128,7 +114,6 @@ const generateGridColumnsStyles = ({
   if (!ownerState.container) {
     return {};
   }
-
   const styles = {
     '--Grid-columns': 12
   };
@@ -139,9 +124,7 @@ const generateGridColumnsStyles = ({
   });
   return styles;
 };
-
 exports.generateGridColumnsStyles = generateGridColumnsStyles;
-
 const generateGridRowSpacingStyles = ({
   theme,
   ownerState
@@ -149,20 +132,16 @@ const generateGridRowSpacingStyles = ({
   if (!ownerState.container) {
     return {};
   }
-
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
     var _theme$spacing;
-
     appendStyle(styles, {
       '--Grid-rowSpacing': typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
     });
   });
   return styles;
 };
-
 exports.generateGridRowSpacingStyles = generateGridRowSpacingStyles;
-
 const generateGridColumnSpacingStyles = ({
   theme,
   ownerState
@@ -170,20 +149,16 @@ const generateGridColumnSpacingStyles = ({
   if (!ownerState.container) {
     return {};
   }
-
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
     var _theme$spacing2;
-
     appendStyle(styles, {
       '--Grid-columnSpacing': typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
     });
   });
   return styles;
 };
-
 exports.generateGridColumnSpacingStyles = generateGridColumnSpacingStyles;
-
 const generateGridDirectionStyles = ({
   theme,
   ownerState
@@ -191,7 +166,6 @@ const generateGridDirectionStyles = ({
   if (!ownerState.container) {
     return {};
   }
-
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
     appendStyle(styles, {
@@ -200,9 +174,7 @@ const generateGridDirectionStyles = ({
   });
   return styles;
 };
-
 exports.generateGridDirectionStyles = generateGridDirectionStyles;
-
 const generateGridStyles = ({
   ownerState
 }) => {
@@ -231,9 +203,7 @@ const generateGridStyles = ({
     padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
   }));
 };
-
 exports.generateGridStyles = generateGridStyles;
-
 const generateSizeClassNames = gridSize => {
   const classNames = [];
   Object.entries(gridSize).forEach(([key, value]) => {
@@ -243,22 +213,17 @@ const generateSizeClassNames = gridSize => {
   });
   return classNames;
 };
-
 exports.generateSizeClassNames = generateSizeClassNames;
-
 const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
   function isValidSpacing(val) {
     if (val === undefined) {
       return false;
     }
-
     return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
   }
-
   if (isValidSpacing(spacing)) {
     return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
   }
-
   if (typeof spacing === 'object' && !Array.isArray(spacing)) {
     const classNames = [];
     Object.entries(spacing).forEach(([key, value]) => {
@@ -268,22 +233,16 @@ const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
     });
     return classNames;
   }
-
   return [];
 };
-
 exports.generateSpacingClassNames = generateSpacingClassNames;
-
 const generateDirectionClasses = direction => {
   if (direction === undefined) {
     return [];
   }
-
   if (typeof direction === 'object') {
     return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
   }
-
   return [`direction-xs-${String(direction)}`];
 };
-
 exports.generateDirectionClasses = generateDirectionClasses;

package/Unstable_Grid/index.d.ts

@@ -1,5 +1,5 @@
-export { default } from './Grid';
-export { default as createGrid } from './createGrid';
-export * from './GridProps';
-export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
+export { default } from './Grid';
+export { default as createGrid } from './createGrid';
+export * from './GridProps';
+export { default as gridClasses } from './gridClasses';
+export * from './gridClasses';

package/Unstable_Grid/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,13 +26,9 @@ Object.defineProperty(exports, "gridClasses", {
     return _gridClasses.default;
   }
 });
-
 var _Grid = _interopRequireDefault(require("./Grid"));
-
 var _createGrid = _interopRequireDefault(require("./createGrid"));
-
 var _GridProps = require("./GridProps");
-
 Object.keys(_GridProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -45,9 +40,7 @@ Object.keys(_GridProps).forEach(function (key) {
     }
   });
 });
-
 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;
@@ -59,7 +52,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; }