@mui/system 5.0.4 → 5.1.1

package/cssVars/cssVarsParser.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assignNestedKeys = void 0;
+exports.default = cssVarsParser;
+exports.walkObjectDeep = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+/**
+ * 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)' } }
+ */
+const assignNestedKeys = (obj, keys, value) => {
+  let temp = obj;
+  keys.forEach((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'
+ */
+
+
+exports.assignNestedKeys = assignNestedKeys;
+
+const walkObjectDeep = (obj, callback) => {
+  function recurse(object, parentKeys = []) {
+    Object.entries(object).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        if (typeof value === 'object' && Object.keys(value).length > 0) {
+          recurse(value, [...parentKeys, key]);
+        } else {
+          callback([...parentKeys, key], value, object);
+        }
+      }
+    });
+  }
+
+  recurse(obj);
+};
+
+exports.walkObjectDeep = walkObjectDeep;
+
+const getCssValue = (keys, value) => {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+      // css property that are unitless
+      return value;
+    }
+
+    return `${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)' } } }
+ */
+
+
+function cssVarsParser(theme, options) {
+  const clonedTheme = (0, _extends2.default)({}, theme);
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
+  const {
+    prefix,
+    basePrefix = '',
+    shouldSkipGeneratingVar
+  } = options || {};
+  const css = {};
+  const vars = {};
+  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+    if (typeof val === 'string' || typeof val === 'number') {
+      let 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(`${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
+        const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+        Object.assign(css, {
+          [cssVar]: getCssValue(keys, value)
+        });
+        assignNestedKeys(vars, keys, `var(${cssVar})`);
+      }
+    }
+  });
+  return {
+    css,
+    vars
+  };
+}

package/cssVars/getInitColorSchemeScript.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
+export default function getInitColorSchemeScript(options?: {
+    defaultMode?: 'light' | 'dark' | 'system';
+    defaultLightColorScheme?: string;
+    defaultDarkColorScheme?: string;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    attribute?: string;
+}): JSX.Element;

package/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
+exports.default = getInitColorSchemeScript;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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 DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
+exports.DEFAULT_MODE_STORAGE_KEY = DEFAULT_MODE_STORAGE_KEY;
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
+exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = DEFAULT_COLOR_SCHEME_STORAGE_KEY;
+const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
+
+function getInitColorSchemeScript(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme = 'light',
+    defaultDarkColorScheme = 'dark',
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE
+  } = options || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: `(function() { try {
+        var mode = localStorage.getItem('${modeStorageKey}');
+        var colorScheme = '';
+        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+          // handle system mode
+          var mql = window.matchMedia('(prefers-color-scheme: dark)');
+          if (mql.matches) {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+          } else {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+          }
+        }
+        if (mode === 'light') {
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
+        }
+        if (mode === 'dark') {
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
+        }
+        if (colorScheme) {
+          document.body.setAttribute('${attribute}', colorScheme);
+        }
+      } catch (e) {} })();`
+    }
+  });
+}

package/cssVars/index.d.ts

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

package/cssVars/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _createCssVarsProvider.default;
+  }
+});
+
+var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));

package/cssVars/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/cssVars/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/cssVars/useCurrentColorScheme.d.ts

@@ -0,0 +1,50 @@
+export declare type Mode = 'light' | 'dark' | 'system';
+export declare type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+    /**
+     * User selected mode.
+     * Note: on the server, mode is always undefined
+     */
+    mode: Mode | undefined;
+    /**
+     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+     */
+    systemMode: SystemMode | undefined;
+    /**
+     * The color scheme for the light mode.
+     */
+    lightColorScheme: SupportedColorScheme;
+    /**
+     * The color scheme for the dark mode.
+     */
+    darkColorScheme: SupportedColorScheme;
+}
+export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+    /**
+     * The current application color scheme. It is always `undefined` on the server.
+     */
+    colorScheme: SupportedColorScheme | undefined;
+    /**
+     * `mode` is saved to internal state and localStorage
+     * If `mode` is null, it will be reset to the defaultMode
+     */
+    setMode: (mode: Mode | null) => void;
+    /**
+     * `colorScheme` is saved to internal state and localStorage
+     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+     */
+    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+        light: SupportedColorScheme | null;
+        dark: SupportedColorScheme | null;
+    }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+}): Result<SupportedColorScheme>;

package/cssVars/useCurrentColorScheme.js

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useCurrentColorScheme;
+exports.getColorScheme = getColorScheme;
+exports.getSystemMode = getSystemMode;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
+
+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 getSystemMode(mode) {
+  if (typeof window !== 'undefined' && mode === 'system') {
+    const 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;
+}
+
+function getColorScheme(state) {
+  return processState(state, 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;
+  }
+
+  let value;
+
+  try {
+    value = localStorage.getItem(key) || undefined;
+  } catch (e) {// Unsupported
+  }
+
+  return value || defaultValue;
+}
+
+function useCurrentColorScheme(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    supportedColorSchemes = [],
+    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY
+  } = options;
+  const joinedColorSchemes = supportedColorSchemes.join(',');
+  const [state, setState] = React.useState(() => {
+    const initialMode = resolveValue(modeStorageKey, defaultMode);
+    return {
+      mode: initialMode,
+      systemMode: getSystemMode(initialMode),
+      lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
+      darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+    };
+  });
+  const colorScheme = getColorScheme(state);
+  const setMode = React.useCallback(mode => {
+    setState(currentState => {
+      const newMode = !mode ? defaultMode : mode;
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(modeStorageKey, newMode);
+      }
+
+      return (0, _extends2.default)({}, currentState, {
+        mode: newMode,
+        systemMode: getSystemMode(newMode)
+      });
+    });
+  }, [modeStorageKey, defaultMode]);
+  const setColorScheme = React.useCallback(value => {
+    if (!value || typeof value === 'string') {
+      if (value && !supportedColorSchemes.includes(value)) {
+        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setState(currentState => {
+          const newState = (0, _extends2.default)({}, currentState);
+
+          if (!value) {
+            // reset to default color scheme
+            newState.lightColorScheme = defaultLightColorScheme;
+            newState.darkColorScheme = defaultDarkColorScheme;
+            return newState;
+          }
+
+          processState(currentState, mode => {
+            localStorage.setItem(`${colorSchemeStorageKey}-${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(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+    } else {
+      setState(currentState => {
+        const newState = (0, _extends2.default)({}, 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(`${colorSchemeStorageKey}-light`, value.light);
+      }
+
+      if (value.dark) {
+        localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
+      }
+    }
+  }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+  const handleMediaQuery = React.useCallback(e => {
+    if (state.mode === 'system') {
+      setState(currentState => (0, _extends2.default)({}, currentState, {
+        systemMode: e.matches ? 'dark' : 'light'
+      }));
+    }
+  }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
+
+  const mediaListener = React.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  React.useEffect(() => {
+    const handler = (...args) => mediaListener.current(...args); // Always listen to System preference
+
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)'); // Intentionally use deprecated listener methods to support iOS & old browsers
+
+    media.addListener(handler);
+    handler(media);
+    return () => media.removeListener(handler);
+  }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
+
+  React.useEffect(() => {
+    if (state.mode) {
+      localStorage.setItem(modeStorageKey, state.mode);
+    }
+
+    processState(state, mode => {
+      if (mode === 'light') {
+        localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
+      }
+
+      if (mode === 'dark') {
+        localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
+      }
+    });
+  }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+
+  React.useEffect(() => {
+    const handleStorage = event => {
+      const 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 () => window.removeEventListener('storage', handleStorage);
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+  return (0, _extends2.default)({}, state, {
+    colorScheme,
+    setMode,
+    setColorScheme
+  });
+}

package/esm/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 = {
@@ -108,11 +108,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) {
@@ -120,14 +150,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/esm/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/esm/createStyled.js

@@ -115,7 +115,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,

package/esm/createTheme/createBreakpoints.js

@@ -13,12 +13,12 @@ export default function createBreakpoints(breakpoints) {
       xs: 0,
       // phone
       sm: 600,
-      // tablets
+      // tablet
       md: 900,
       // small laptop
       lg: 1200,
       // desktop
-      xl: 1536 // large screens
+      xl: 1536 // large screen
 
     },
     unit = 'px',