@mui/system 5.0.3 → 5.1.0

package/legacy/cssVars/cssVarsParser.js

@@ -0,0 +1,153 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
+  var temp = obj;
+  keys.forEach(function (k, index) {
+    if (index === keys.length - 1) {
+      if (temp && _typeof(temp) === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && _typeof(temp) === 'object') {
+      if (!temp[k]) {
+        temp[k] = {};
+      }
+
+      temp = temp[k];
+    }
+  });
+};
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+
+export var walkObjectDeep = function walkObjectDeep(obj, callback) {
+  function recurse(object) {
+    var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    Object.entries(object).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+
+      if (value !== undefined && value !== null) {
+        if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
+          recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+        } else {
+          callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+        }
+      }
+    });
+  }
+
+  recurse(obj);
+};
+
+var getCssValue = function getCssValue(keys, value) {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
+      return keys.includes(prop);
+    })) {
+      // css property that are unitless
+      return value;
+    }
+
+    return "".concat(value, "px");
+  }
+
+  return value;
+};
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+
+
+export default function cssVarsParser(theme, options) {
+  var clonedTheme = _extends({}, theme);
+
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
+  var _ref3 = options || {},
+      prefix = _ref3.prefix,
+      _ref3$basePrefix = _ref3.basePrefix,
+      basePrefix = _ref3$basePrefix === void 0 ? '' : _ref3$basePrefix,
+      shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
+
+  var css = {};
+  var vars = {};
+  walkObjectDeep(clonedTheme, function (keys, val, scope) {
+    if (typeof val === 'string' || typeof val === 'number') {
+      var _value = val;
+
+      if (typeof _value === 'string' && _value.startsWith('var')) {
+        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+        _value = prefix ? _value.replace(basePrefix, prefix) : _value.replace("".concat(basePrefix, "-"), ''); // scope is the deepest object in the tree, keys is the theme path keys
+
+        scope[keys.slice(-1)[0]] = _value;
+      }
+
+      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, _value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
+
+        _extends(css, _defineProperty({}, cssVar, getCssValue(keys, _value)));
+
+        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
+      }
+    }
+  });
+  return {
+    css: css,
+    vars: vars
+  };
+}

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
+export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
+export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export default function getInitColorSchemeScript(options) {
+  var _ref = options || {},
+      _ref$defaultMode = _ref.defaultMode,
+      defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
+      _ref$defaultLightColo = _ref.defaultLightColorScheme,
+      defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
+      _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
+      defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
+      _ref$modeStorageKey = _ref.modeStorageKey,
+      modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+      _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
+      colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
+      _ref$attribute = _ref.attribute,
+      attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute;
+
+  return /*#__PURE__*/_jsx("script", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && ").concat(defaultMode, " === 'system')) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || ").concat(defaultLightColorScheme, ";\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || ").concat(defaultDarkColorScheme, ";\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || ").concat(defaultLightColorScheme, ";\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || ").concat(defaultDarkColorScheme, ";\n        }\n        if (colorScheme) {\n          document.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+    }
+  });
+}

package/legacy/cssVars/index.js

@@ -0,0 +1 @@
+export { default } from './createCssVarsProvider';

package/legacy/cssVars/useCurrentColorScheme.js

@@ -0,0 +1,231 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
+export function getSystemMode(mode) {
+  if (typeof window !== 'undefined' && mode === 'system') {
+    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+    if (mql.matches) {
+      return 'dark';
+    }
+
+    return 'light';
+  }
+
+  return undefined;
+}
+
+function processState(state, callback) {
+  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
+    return callback('light');
+  }
+
+  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
+    return callback('dark');
+  }
+
+  return undefined;
+}
+
+export function getColorScheme(state) {
+  return processState(state, function (mode) {
+    if (mode === 'light') {
+      return state.lightColorScheme;
+    }
+
+    if (mode === 'dark') {
+      return state.darkColorScheme;
+    }
+
+    return undefined;
+  });
+}
+
+function resolveValue(key, defaultValue) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  var value;
+
+  try {
+    value = localStorage.getItem(key) || undefined;
+  } catch (e) {// Unsupported
+  }
+
+  return value || defaultValue;
+}
+
+export default function useCurrentColorScheme(options) {
+  var _options$defaultMode = options.defaultMode,
+      defaultMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
+      defaultLightColorScheme = options.defaultLightColorScheme,
+      defaultDarkColorScheme = options.defaultDarkColorScheme,
+      _options$supportedCol = options.supportedColorSchemes,
+      supportedColorSchemes = _options$supportedCol === void 0 ? [] : _options$supportedCol,
+      _options$modeStorageK = options.modeStorageKey,
+      modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
+      _options$colorSchemeS = options.colorSchemeStorageKey,
+      colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS;
+  var joinedColorSchemes = supportedColorSchemes.join(',');
+
+  var _React$useState = React.useState(function () {
+    var initialMode = resolveValue(modeStorageKey, defaultMode);
+    return {
+      mode: initialMode,
+      systemMode: getSystemMode(initialMode),
+      lightColorScheme: resolveValue("".concat(colorSchemeStorageKey, "-light")) || defaultLightColorScheme,
+      darkColorScheme: resolveValue("".concat(colorSchemeStorageKey, "-dark")) || defaultDarkColorScheme
+    };
+  }),
+      state = _React$useState[0],
+      setState = _React$useState[1];
+
+  var colorScheme = getColorScheme(state);
+  var setMode = React.useCallback(function (mode) {
+    setState(function (currentState) {
+      var newMode = !mode ? defaultMode : mode;
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(modeStorageKey, newMode);
+      }
+
+      return _extends({}, currentState, {
+        mode: newMode,
+        systemMode: getSystemMode(newMode)
+      });
+    });
+  }, [modeStorageKey, defaultMode]);
+  var setColorScheme = React.useCallback(function (value) {
+    if (!value || typeof value === 'string') {
+      if (value && !supportedColorSchemes.includes(value)) {
+        console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
+      } else {
+        setState(function (currentState) {
+          var newState = _extends({}, currentState);
+
+          if (!value) {
+            // reset to default color scheme
+            newState.lightColorScheme = defaultLightColorScheme;
+            newState.darkColorScheme = defaultDarkColorScheme;
+            return newState;
+          }
+
+          processState(currentState, function (mode) {
+            localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
+
+            if (mode === 'light') {
+              newState.lightColorScheme = value;
+            }
+
+            if (mode === 'dark') {
+              newState.darkColorScheme = value;
+            }
+          });
+          return newState;
+        });
+      }
+    } else if (value.light && !supportedColorSchemes.includes(value.light) || value.dark && !supportedColorSchemes.includes(value.dark)) {
+      console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
+    } else {
+      setState(function (currentState) {
+        var newState = _extends({}, currentState);
+
+        if (value.light || value.light === null) {
+          newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        }
+
+        if (value.dark || value.dark === null) {
+          newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        }
+
+        return newState;
+      });
+
+      if (value.light) {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), value.light);
+      }
+
+      if (value.dark) {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), value.dark);
+      }
+    }
+  }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+  var handleMediaQuery = React.useCallback(function (e) {
+    if (state.mode === 'system') {
+      setState(function (currentState) {
+        return _extends({}, currentState, {
+          systemMode: e.matches ? 'dark' : 'light'
+        });
+      });
+    }
+  }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
+
+  var mediaListener = React.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  React.useEffect(function () {
+    var handler = function handler() {
+      return mediaListener.current.apply(mediaListener, arguments);
+    }; // Always listen to System preference
+
+
+    var media = window.matchMedia('(prefers-color-scheme: dark)'); // Intentionally use deprecated listener methods to support iOS & old browsers
+
+    media.addListener(handler);
+    handler(media);
+    return function () {
+      return media.removeListener(handler);
+    };
+  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
+
+  React.useEffect(function () {
+    if (state.mode) {
+      localStorage.setItem(modeStorageKey, state.mode);
+    }
+
+    processState(state, function (mode) {
+      if (mode === 'light') {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), state.lightColorScheme);
+      }
+
+      if (mode === 'dark') {
+        localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), state.darkColorScheme);
+      }
+    });
+  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+
+  React.useEffect(function () {
+    var handleStorage = function handleStorage(event) {
+      var value = event.newValue;
+
+      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+        // If the key is deleted, value will be null then reset color scheme to the default one.
+        if (event.key.endsWith('light')) {
+          setColorScheme({
+            light: value
+          });
+        }
+
+        if (event.key.endsWith('dark')) {
+          setColorScheme({
+            dark: value
+          });
+        }
+      }
+
+      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+        setMode(value || defaultMode);
+      }
+    };
+
+    window.addEventListener('storage', handleStorage);
+    return function () {
+      return window.removeEventListener('storage', handleStorage);
+    };
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+  return _extends({}, state, {
+    colorScheme: colorScheme,
+    setMode: setMode,
+    setColorScheme: setColorScheme
+  });
+}

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.3
+/** @license MUI v5.1.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,4 +41,5 @@ export { default as useThemeProps, getThemeProps } from './useThemeProps';
 export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
-export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';

package/legacy/styleFunctionSx/extendSxProp.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { isPlainObject } from '@mui/utils';
 import { propToStyleFunction } from '../getThemeValue';
 
 var splitProps = function splitProps(props) {
@@ -25,7 +27,25 @@ export default function extendSxProp(props) {
       systemProps = _splitProps.systemProps,
       otherProps = _splitProps.otherProps;
 
+  var finalSx;
+
+  if (Array.isArray(inSx)) {
+    finalSx = [systemProps].concat(_toConsumableArray(inSx));
+  } else if (typeof inSx === 'function') {
+    finalSx = function finalSx() {
+      var result = inSx.apply(void 0, arguments);
+
+      if (!isPlainObject(result)) {
+        return systemProps;
+      }
+
+      return _extends({}, systemProps, result);
+    };
+  } else {
+    finalSx = _extends({}, systemProps, inSx);
+  }
+
   return _extends({}, otherProps, {
-    sx: _extends({}, systemProps, inSx)
+    sx: finalSx
   });
 }

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -24,53 +24,63 @@ function callIfFn(maybeFn, arg) {
 
 function styleFunctionSx(props) {
   var _ref = props || {},
-      styles = _ref.sx,
+      sx = _ref.sx,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? {} : _ref$theme;
 
-  if (!styles) {
-    return null;
+  if (!sx) {
+    return null; // emotion & styled-components will neglect null
   }
+  /*
+   * Receive `sxInput` as object or callback
+   * and then recursively check keys & values to create media query object styles.
+   * (the result will be used in `styled`)
+   */
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
 
-  if (_typeof(styles) !== 'object') {
-    // value
-    return styles;
-  }
+  function traverse(sxInput) {
+    var sxObject = sxInput;
 
-  var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-  var breakpointsKeys = Object.keys(emptyBreakpoints);
-  var css = emptyBreakpoints;
-  Object.keys(styles).forEach(function (styleKey) {
-    var value = callIfFn(styles[styleKey], theme);
+    if (typeof sxInput === 'function') {
+      sxObject = sxInput(theme);
+    } else if (_typeof(sxInput) !== 'object') {
+      // value
+      return sxInput;
+    }
 
-    if (_typeof(value) === 'object') {
-      if (propToStyleFunction[styleKey]) {
-        css = merge(css, getThemeValue(styleKey, value, theme));
-      } else {
-        var breakpointsValues = handleBreakpoints({
-          theme: theme
-        }, value, function (x) {
-          return _defineProperty({}, styleKey, x);
-        });
+    var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+    var breakpointsKeys = Object.keys(emptyBreakpoints);
+    var css = emptyBreakpoints;
+    Object.keys(sxObject).forEach(function (styleKey) {
+      var value = callIfFn(sxObject[styleKey], theme);
 
-        if (objectsHaveSameKeys(breakpointsValues, value)) {
-          css[styleKey] = styleFunctionSx({
-            sx: value,
+      if (_typeof(value) === 'object') {
+        if (propToStyleFunction[styleKey]) {
+          css = merge(css, getThemeValue(styleKey, value, theme));
+        } else {
+          var breakpointsValues = handleBreakpoints({
             theme: theme
+          }, value, function (x) {
+            return _defineProperty({}, styleKey, x);
           });
-        } else {
-          css = merge(css, breakpointsValues);
+
+          if (objectsHaveSameKeys(breakpointsValues, value)) {
+            css[styleKey] = styleFunctionSx({
+              sx: value,
+              theme: theme
+            });
+          } else {
+            css = merge(css, breakpointsValues);
+          }
         }
+      } else {
+        css = merge(css, getThemeValue(styleKey, value, theme));
       }
-    } else {
-      css = merge(css, getThemeValue(styleKey, value, theme));
-    }
-  });
-  return removeUnusedBreakpoints(breakpointsKeys, css);
+    });
+    return removeUnusedBreakpoints(breakpointsKeys, css);
+  }
+
+  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
 }
 
 styleFunctionSx.filterProps = ['sx'];

package/modern/breakpoints.js

@@ -8,12 +8,12 @@ export const values = {
   xs: 0,
   // phone
   sm: 600,
-  // tablets
+  // tablet
   md: 900,
   // small laptop
   lg: 1200,
   // desktop
-  xl: 1536 // large screens
+  xl: 1536 // large screen
 
 };
 const defaultBreakpoints = {
@@ -106,11 +106,41 @@ export function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
   const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
   const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
   return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
+} // compute base for responsive values; e.g.,
+// [1,2,3] => {xs: true, sm: true, md: true}
+// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+
+export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+  // fixed value
+  if (typeof breakpointValues !== 'object') {
+    return {};
+  }
+
+  const base = {};
+  const breakpointsKeys = Object.keys(themeBreakpoints);
+
+  if (Array.isArray(breakpointValues)) {
+    breakpointsKeys.forEach((breakpoint, i) => {
+      if (i < breakpointValues.length) {
+        base[breakpoint] = true;
+      }
+    });
+  } else {
+    breakpointsKeys.forEach(breakpoint => {
+      if (breakpointValues[breakpoint] != null) {
+        base[breakpoint] = true;
+      }
+    });
+  }
+
+  return base;
 }
 export function resolveBreakpointValues({
   values: breakpointValues,
-  base
+  breakpoints: themeBreakpoints,
+  base: customBase
 }) {
+  const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
   const keys = Object.keys(base);
 
   if (keys.length === 0) {
@@ -118,14 +148,15 @@ export function resolveBreakpointValues({
   }
 
   let previous;
-  return keys.reduce((acc, breakpoint) => {
-    if (typeof breakpointValues === 'object') {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+  return keys.reduce((acc, breakpoint, i) => {
+    if (Array.isArray(breakpointValues)) {
+      acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+      previous = i;
     } else {
-      acc[breakpoint] = breakpointValues;
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+      previous = breakpoint;
     }
 
-    previous = breakpoint;
     return acc;
   }, {});
 }

package/modern/createBox.js

@@ -10,7 +10,9 @@ import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {
-    defaultTheme
+    defaultTheme,
+    defaultClassName = 'MuiBox-root',
+    generateClassName
   } = options;
   const BoxRoot = styled('div')(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
@@ -26,7 +28,7 @@ export default function createBox(options = {}) {
     return /*#__PURE__*/_jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
-      className: clsx(className, 'MuiBox-root'),
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
       theme: theme
     }, other));
   });
@@ -52,7 +54,7 @@ export default function createBox(options = {}) {
     /**
      * @ignore
      */
-    sx: PropTypes.object
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
   } : void 0;
   return Box;
 }

package/modern/createStyled.js

@@ -113,7 +113,11 @@ export default function createStyled(input = {}) {
 
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-        return typeof stylesArg === 'function' ? _ref => {
+        // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        // component stays as a function. This condition makes sure that we do not interpolate functions
+        // which are basically components used as a selectors.
+        // eslint-disable-next-line no-underscore-dangle
+        return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
           let {
             theme: themeInput
           } = _ref,