@mui/system 9.0.0-alpha.4 → 9.0.0-beta.0

package/compose/compose.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _merge = _interopRequireDefault(require("../merge"));
+var _fastDeepAssign = _interopRequireDefault(require("@mui/utils/fastDeepAssign"));
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {
@@ -14,15 +14,15 @@ function compose(...styles) {
     return acc;
   }, {});
 
-  // false positive
   // eslint-disable-next-line react/function-component-definition
   const fn = props => {
-    return Object.keys(props).reduce((acc, prop) => {
+    const result = {};
+    for (const prop in props) {
       if (handlers[prop]) {
-        return (0, _merge.default)(acc, handlers[prop](props));
+        (0, _fastDeepAssign.default)(result, handlers[prop](props));
       }
-      return acc;
-    }, {});
+    }
+    return result;
   };
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);

package/compose/compose.mjs

@@ -1,4 +1,4 @@
-import merge from "../merge/index.mjs";
+import fastDeepAssign from '@mui/utils/fastDeepAssign';
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {
@@ -7,15 +7,15 @@ function compose(...styles) {
     return acc;
   }, {});
 
-  // false positive
   // eslint-disable-next-line react/function-component-definition
   const fn = props => {
-    return Object.keys(props).reduce((acc, prop) => {
+    const result = {};
+    for (const prop in props) {
       if (handlers[prop]) {
-        return merge(acc, handlers[prop](props));
+        fastDeepAssign(result, handlers[prop](props));
       }
-      return acc;
-    }, {});
+    }
+    return result;
   };
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);

package/createBox/createBox.js

@@ -10,7 +10,7 @@ exports.default = createBox;
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styledEngine = _interopRequireDefault(require("@mui/styled-engine"));
-var _styleFunctionSx = _interopRequireWildcard(require("../styleFunctionSx"));
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 function createBox(options = {}) {
@@ -29,7 +29,7 @@ function createBox(options = {}) {
       className,
       component = 'div',
       ...other
-    } = (0, _styleFunctionSx.extendSxProp)(inProps);
+    } = inProps;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, {
       as: component,
       ref: ref,

package/createBox/createBox.mjs

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.mjs";
+import styleFunctionSx from "../styleFunctionSx/index.mjs";
 import useTheme from "../useTheme/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
@@ -22,7 +22,7 @@ export default function createBox(options = {}) {
       className,
       component = 'div',
       ...other
-    } = extendSxProp(inProps);
+    } = inProps;
     return /*#__PURE__*/_jsx(BoxRoot, {
       as: component,
       ref: ref,

package/createBreakpoints/createBreakpoints.d.mts

@@ -61,6 +61,11 @@ export interface Breakpoints {
    * @default 'px'
    */
   unit?: string | undefined;
+  /**
+   * Media query keys
+   * @ignore - Do not document.
+   */
+  internal_mediaKeys: string[];
 }
 export interface BreakpointsOptions extends Partial<Breakpoints> {
   /**

package/createBreakpoints/createBreakpoints.d.ts

@@ -61,6 +61,11 @@ export interface Breakpoints {
    * @default 'px'
    */
   unit?: string | undefined;
+  /**
+   * Media query keys
+   * @ignore - Do not document.
+   */
+  internal_mediaKeys: string[];
 }
 export interface BreakpointsOptions extends Partial<Breakpoints> {
   /**

package/createBreakpoints/createBreakpoints.js

@@ -74,6 +74,10 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
+  const mediaKeys = [];
+  for (let i = 0; i < keys.length; i += 1) {
+    mediaKeys.push(up(keys[i]));
+  }
   return {
     keys,
     values: sortedValues,
@@ -83,6 +87,7 @@ function createBreakpoints(breakpoints) {
     only,
     not,
     unit,
+    internal_mediaKeys: mediaKeys,
     ...other
   };
 }

package/createBreakpoints/createBreakpoints.mjs

@@ -67,6 +67,10 @@ export default function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
+  const mediaKeys = [];
+  for (let i = 0; i < keys.length; i += 1) {
+    mediaKeys.push(up(keys[i]));
+  }
   return {
     keys,
     values: sortedValues,
@@ -76,6 +80,7 @@ export default function createBreakpoints(breakpoints) {
     only,
     not,
     unit,
+    internal_mediaKeys: mediaKeys,
     ...other
   };
 }

package/createStyled/createStyled.js

@@ -9,6 +9,7 @@ exports.default = createStyled;
 exports.shouldForwardProp = shouldForwardProp;
 exports.systemDefaultTheme = void 0;
 var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
+var _isObjectEmpty = _interopRequireDefault(require("@mui/utils/isObjectEmpty"));
 var _deepmerge = require("@mui/utils/deepmerge");
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
@@ -39,7 +40,7 @@ function defaultOverridesResolver(slot) {
   return (_props, styles) => styles[slot];
 }
 function attachTheme(props, themeId, defaultTheme) {
-  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
+  props.theme = (0, _isObjectEmpty.default)(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
 }
 function processStyle(props, style, layerName) {
   /*
@@ -274,13 +275,6 @@ function generateStyledLabel(componentName, componentSlot) {
   }
   return label;
 }
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
 
 // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
 function isStringTag(tag) {

package/createStyled/createStyled.mjs

@@ -1,4 +1,5 @@
 import styledEngineStyled, { internal_mutateStyles as mutateStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
+import isObjectEmpty from '@mui/utils/isObjectEmpty';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -265,13 +266,6 @@ function generateStyledLabel(componentName, componentSlot) {
   }
   return label;
 }
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
 
 // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
 function isStringTag(tag) {

package/createTheme/createTheme.js

@@ -51,6 +51,7 @@ function createTheme(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.internal_cache = {};
   return muiTheme;
 }
 var _default = exports.default = createTheme;

package/createTheme/createTheme.mjs

@@ -44,6 +44,7 @@ function createTheme(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.internal_cache = {};
   return muiTheme;
 }
 export default createTheme;

package/cssContainerQueries/cssContainerQueries.d.mts

@@ -10,6 +10,7 @@ export interface CssContainerQueries {
   containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
 }
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }

package/cssContainerQueries/cssContainerQueries.d.ts

@@ -10,6 +10,7 @@ export interface CssContainerQueries {
   containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
 }
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }

package/cssContainerQueries/cssContainerQueries.js

@@ -7,31 +7,44 @@ exports.default = cssContainerQueries;
 exports.getContainerQuery = getContainerQuery;
 exports.isCqShorthand = isCqShorthand;
 exports.sortContainerQueries = sortContainerQueries;
+const MIN_WIDTH_PATTERN = /min-width:\s*([0-9.]+)/;
+
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
  *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 even though 40rem > 300px
  */
 function sortContainerQueries(theme, css) {
-  if (!theme.containerQueries) {
+  if (!theme.containerQueries || !hasContainerQuery(css)) {
     return css;
   }
-  const regex = /min-width:\s*([0-9.]+)/;
-  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css;
+  const keys = [];
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      keys.push(key);
+    }
   }
-  return sorted.reduce((acc, key) => {
-    const value = css[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css
+  keys.sort((a, b) => {
+    return +(a.match(MIN_WIDTH_PATTERN)?.[1] || 0) - +(b.match(MIN_WIDTH_PATTERN)?.[1] || 0);
   });
+  const result = css;
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    const value = result[key];
+    delete result[key];
+    result[key] = value;
+  }
+  return result;
+}
+function hasContainerQuery(css) {
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      return true;
+    }
+  }
+  return false;
 }
 function isCqShorthand(breakpointKeys, value) {
   return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));

package/cssContainerQueries/cssContainerQueries.mjs

@@ -1,28 +1,41 @@
+const MIN_WIDTH_PATTERN = /min-width:\s*([0-9.]+)/;
+
 /**
+ * WARN: Mutably updates the `css` object.
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
  *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 even though 40rem > 300px
  */
 export function sortContainerQueries(theme, css) {
-  if (!theme.containerQueries) {
+  if (!theme.containerQueries || !hasContainerQuery(css)) {
     return css;
   }
-  const regex = /min-width:\s*([0-9.]+)/;
-  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css;
+  const keys = [];
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      keys.push(key);
+    }
   }
-  return sorted.reduce((acc, key) => {
-    const value = css[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css
+  keys.sort((a, b) => {
+    return +(a.match(MIN_WIDTH_PATTERN)?.[1] || 0) - +(b.match(MIN_WIDTH_PATTERN)?.[1] || 0);
   });
+  const result = css;
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    const value = result[key];
+    delete result[key];
+    result[key] = value;
+  }
+  return result;
+}
+function hasContainerQuery(css) {
+  for (const key in css) {
+    if (key.startsWith('@container')) {
+      return true;
+    }
+  }
+  return false;
 }
 export function isCqShorthand(breakpointKeys, value) {
   return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));

package/cssVars/createCssVarsTheme.js

@@ -23,6 +23,7 @@ function createCssVarsTheme({
   output.generateStyleSheets = result.generateStyleSheets;
   output.colorSchemeSelector = colorSchemeSelector;
   output.getColorSchemeSelector = (0, _getColorSchemeSelector.createGetColorSchemeSelector)(colorSchemeSelector);
+  output.internal_cache = {};
   return output;
 }
 var _default = exports.default = createCssVarsTheme;

package/cssVars/createCssVarsTheme.mjs

@@ -16,6 +16,7 @@ function createCssVarsTheme({
   output.generateStyleSheets = result.generateStyleSheets;
   output.colorSchemeSelector = colorSchemeSelector;
   output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
+  output.internal_cache = {};
   return output;
 }
 export default createCssVarsTheme;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.0.0-alpha.4
+ * @mui/system v9.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.0.0-alpha.4
+ * @mui/system v9.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/merge/merge.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+const options = {
+  clone: false
+};
 function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return (0, _deepmerge.default)(acc, item, {
-    clone: false // No need to clone deep, it's way faster.
-  });
+  return (0, _deepmerge.default)(acc, item, options);
 }
 var _default = exports.default = merge;

package/merge/merge.mjs

@@ -1,10 +1,11 @@
 import deepmerge from '@mui/utils/deepmerge';
+const options = {
+  clone: false
+};
 function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return deepmerge(acc, item, {
-    clone: false // No need to clone deep, it's way faster.
-  });
+  return deepmerge(acc, item, options);
 }
 export default merge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-beta.0",
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
   "keywords": [
@@ -24,14 +24,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.29.2",
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "9.0.0-alpha.4",
-    "@mui/utils": "9.0.0-alpha.4",
-    "@mui/types": "^9.0.0-alpha.3",
-    "@mui/styled-engine": "9.0.0-alpha.3"
+    "@mui/private-theming": "9.0.0-beta.0",
+    "@mui/styled-engine": "9.0.0-beta.0",
+    "@mui/types": "^9.0.0-beta.0",
+    "@mui/utils": "9.0.0-beta.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/spacing/spacing.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.createUnarySpacing = createUnarySpacing;
 exports.createUnaryUnit = createUnaryUnit;
 exports.default = void 0;
-exports.getStyleFromPropValue = getStyleFromPropValue;
 exports.getValue = getValue;
 exports.margin = margin;
 exports.marginKeys = void 0;
@@ -16,8 +15,11 @@ exports.paddingKeys = void 0;
 var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
 var _breakpoints = require("../breakpoints");
 var _style = require("../style");
-var _merge = _interopRequireDefault(require("../merge"));
-var _memoize = _interopRequireDefault(require("../memoize"));
+/* eslint-disable guard-for-in */
+
+const EMPTY_THEME = {
+  internal_cache: {}
+};
 const properties = {
   m: 'margin',
   p: 'padding'
@@ -36,27 +38,24 @@ const aliases = {
   paddingX: 'px',
   paddingY: 'py'
 };
-
-// memoize() impact:
-// From 300,000 ops/sec
-// To 350,000 ops/sec
-const getCssProperties = (0, _memoize.default)(prop => {
-  // It's not a shorthand notation.
-  if (prop.length > 2) {
-    if (aliases[prop]) {
-      prop = aliases[prop];
-    } else {
-      return [prop];
-    }
+const CSS_PROPERTIES = {};
+for (const key in properties) {
+  CSS_PROPERTIES[key] = [properties[key]];
+}
+for (const keyProperty in properties) {
+  for (const keyDirection in directions) {
+    const property = properties[keyProperty];
+    const direction = directions[keyDirection];
+    const value = Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
+    CSS_PROPERTIES[keyProperty + keyDirection] = value;
   }
-  const [a, b] = prop.split('');
-  const property = properties[a];
-  const direction = directions[b] || '';
-  return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
-});
-const marginKeys = exports.marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-const paddingKeys = exports.paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
-const spacingKeys = [...marginKeys, ...paddingKeys];
+}
+for (const key in aliases) {
+  CSS_PROPERTIES[key] = CSS_PROPERTIES[aliases[key]];
+}
+const marginKeys = exports.marginKeys = new Set(['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd']);
+const paddingKeys = exports.paddingKeys = new Set(['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd']);
+const spacingKeys = new Set([...marginKeys, ...paddingKeys]);
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   const themeSpacing = (0, _style.getPath)(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
@@ -124,31 +123,32 @@ function getValue(transformer, propValue) {
   }
   return transformer(propValue);
 }
-function getStyleFromPropValue(cssProperties, transformer) {
-  return propValue => cssProperties.reduce((acc, cssProperty) => {
-    acc[cssProperty] = getValue(transformer, propValue);
-    return acc;
-  }, {});
-}
-function resolveCssProperty(props, keys, prop, transformer) {
-  // Using a hash computation over an array iteration could be faster, but with only 28 items,
-  // it's doesn't worth the bundle size.
-  if (!keys.includes(prop)) {
-    return null;
-  }
-  const cssProperties = getCssProperties(prop);
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  const propValue = props[prop];
-  return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
-}
+
+// Avoid allocations
+const container = [''];
 function style(props, keys) {
-  const transformer = createUnarySpacing(props.theme);
-  return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(_merge.default, {});
+  const theme = props.theme ?? EMPTY_THEME;
+  const transformer = theme?.internal_cache?.unarySpacing ?? createUnarySpacing(theme);
+  const result = {};
+  for (const prop in props) {
+    if (!keys.has(prop)) {
+      continue;
+    }
+    const cssProperties = CSS_PROPERTIES[prop] ?? (container[0] = prop, container);
+    const propValue = props[prop];
+    (0, _breakpoints.iterateBreakpoints)(result, props.theme, propValue, (mediaKey, value) => {
+      const target = mediaKey ? result[mediaKey] : result;
+      for (let i = 0; i < cssProperties.length; i += 1) {
+        target[cssProperties[i]] = getValue(transformer, value);
+      }
+    });
+  }
+  return result;
 }
 function margin(props) {
   return style(props, marginKeys);
 }
-margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
+margin.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(marginKeys).reduce((obj, key) => {
   obj[key] = _responsivePropType.default;
   return obj;
 }, {}) : {};
@@ -156,7 +156,7 @@ margin.filterProps = marginKeys;
 function padding(props) {
   return style(props, paddingKeys);
 }
-padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
+padding.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(paddingKeys).reduce((obj, key) => {
   obj[key] = _responsivePropType.default;
   return obj;
 }, {}) : {};
@@ -164,7 +164,7 @@ padding.filterProps = paddingKeys;
 function spacing(props) {
   return style(props, spacingKeys);
 }
-spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
+spacing.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(spacingKeys).reduce((obj, key) => {
   obj[key] = _responsivePropType.default;
   return obj;
 }, {}) : {};