@mui/system 5.1.0 → 5.2.2

package/legacy/createBox.js

@@ -52,7 +52,7 @@ export default function createBox() {
     /**
      * @ignore
      */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
   } : void 0;
   return Box;
 }

package/legacy/cssVars/createCssVarsProvider.js

@@ -13,12 +13,17 @@ import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY }
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
   var _options$theme = options.theme,
       baseTheme = _options$theme === void 0 ? {} : _options$theme,
       _options$defaultMode = options.defaultMode,
       desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       designSystemColorScheme = options.defaultColorScheme,
+      _options$disableTrans = options.disableTransitionOnChange,
+      disableTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
+      _options$enableColorS = options.enableColorScheme,
+      enableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
       _options$prefix = options.prefix,
       designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
       shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
@@ -62,7 +67,13 @@ export default function createCssVarsProvider(options) {
         colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
         restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes"]);
 
-    var mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    var hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+
+    var _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+        _deepmerge$components = _deepmerge.components,
+        components = _deepmerge$components === void 0 ? {} : _deepmerge$components,
+        mergedTheme = _objectWithoutProperties(_deepmerge, ["components"]);
+
     var colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -77,6 +88,7 @@ export default function createCssVarsProvider(options) {
     }),
         mode = _useCurrentColorSchem.mode,
         setMode = _useCurrentColorSchem.setMode,
+        systemMode = _useCurrentColorSchem.systemMode,
         lightColorScheme = _useCurrentColorSchem.lightColorScheme,
         darkColorScheme = _useCurrentColorSchem.darkColorScheme,
         colorScheme = _useCurrentColorSchem.colorScheme,
@@ -105,6 +117,8 @@ export default function createCssVarsProvider(options) {
         rootVars = _cssVarsParser.vars;
 
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      components: components,
+      colorSchemes: colorSchemes,
       vars: rootVars
     });
     var styleSheet = {};
@@ -121,9 +135,7 @@ export default function createCssVarsProvider(options) {
           css = _cssVarsParser2.css,
           vars = _cssVarsParser2.vars;
 
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
-      }
+      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
       var resolvedDefaultColorScheme = function () {
         if (typeof defaultColorScheme === 'string') {
@@ -148,6 +160,48 @@ export default function createCssVarsProvider(options) {
         document.body.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
+    React.useEffect(function () {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      var priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return function () {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(function () {
+      var timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        var css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (function () {
+          return window.getComputedStyle(document.body);
+        })();
+
+        timer = setTimeout(function () {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return function () {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(function () {
+      hasMounted.current = true;
+    }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode: mode,
@@ -178,7 +232,7 @@ export default function createCssVarsProvider(options) {
     attribute: PropTypes.string,
 
     /**
-     * Your component tree.
+     * The component tree.
      */
     children: PropTypes.node,
 
@@ -198,7 +252,7 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
     prefix: PropTypes.string,
 

package/legacy/cssVars/cssVarsParser.js

@@ -75,7 +75,7 @@ var getCssValue = function getCssValue(keys, value) {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
       return keys.includes(prop);
     })) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
     }
 

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -5,8 +5,7 @@ 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,
+      enableSystem = _ref.enableSystem,
       _ref$defaultLightColo = _ref.defaultLightColorScheme,
       defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
       _ref$defaultDarkColor = _ref.defaultDarkColorScheme,
@@ -21,7 +20,7 @@ export default function getInitColorSchemeScript(options) {
   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) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\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(defaultDarkColorScheme, "';\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\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/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.0
+/** @license MUI v5.2.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,6 +27,7 @@ export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
+export { default as experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';
 export { default as createBox } from './createBox';

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -54,27 +54,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(function (styleKey) {
       var value = callIfFn(sxObject[styleKey], theme);
 
-      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);
-          });
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
+      if (value !== null && value !== undefined) {
+        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);

package/legacy/sx/index.js

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

package/legacy/sx/sx.js

@@ -0,0 +1,13 @@
+import styleFunctionSx from '../styleFunctionSx';
+
+function sx(styles) {
+  return function (_ref) {
+    var theme = _ref.theme;
+    return styleFunctionSx({
+      sx: styles,
+      theme: theme
+    });
+  };
+}
+
+export default sx;

package/modern/breakpoints.js

@@ -93,7 +93,7 @@ export function createEmptyBreakpointObject(breakpointsInput = {}) {
 export function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
-    const isBreakpointUnused = Object.keys(breakpointOutput).length === 0;
+    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
 
     if (isBreakpointUnused) {
       delete acc[key];

package/modern/createBox.js

@@ -54,7 +54,7 @@ export default function createBox(options = {}) {
     /**
      * @ignore
      */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
   } : void 0;
   return Box;
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"];
+      _excluded2 = ["colorSchemes"],
+      _excluded3 = ["components"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
@@ -13,11 +14,14 @@ import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY }
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
   const {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
+    disableTransitionOnChange = false,
+    enableColorScheme = true,
     prefix: designSystemPrefix = '',
     shouldSkipGeneratingVar
   } = options;
@@ -57,7 +61,14 @@ export default function createCssVarsProvider(options) {
     } = themeProp,
           restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
 
-    let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+
+    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+        {
+      components = {}
+    } = _deepmerge,
+        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
+
     const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -65,6 +76,7 @@ export default function createCssVarsProvider(options) {
     const {
       mode,
       setMode,
+      systemMode,
       lightColorScheme,
       darkColorScheme,
       colorScheme,
@@ -100,6 +112,8 @@ export default function createCssVarsProvider(options) {
       shouldSkipGeneratingVar
     });
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      components,
+      colorSchemes,
       vars: rootVars
     });
     const styleSheet = {};
@@ -112,10 +126,7 @@ export default function createCssVarsProvider(options) {
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
-      }
+      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
 
       const resolvedDefaultColorScheme = (() => {
         if (typeof defaultColorScheme === 'string') {
@@ -140,6 +151,46 @@ export default function createCssVarsProvider(options) {
         document.body.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
+    React.useEffect(() => {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return () => {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(() => {
+      let timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        const css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (() => window.getComputedStyle(document.body))();
+
+        timer = setTimeout(() => {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(() => {
+      hasMounted.current = true;
+    }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode,
@@ -170,7 +221,7 @@ export default function createCssVarsProvider(options) {
     attribute: PropTypes.string,
 
     /**
-     * Your component tree.
+     * The component tree.
      */
     children: PropTypes.node,
 
@@ -190,7 +241,7 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
     prefix: PropTypes.string,
 

package/modern/cssVars/cssVarsParser.js

@@ -64,7 +64,7 @@ export const walkObjectDeep = (obj, callback) => {
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
     }
 

package/modern/cssVars/getInitColorSchemeScript.js

@@ -5,7 +5,7 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
-    defaultMode = 'light',
+    enableSystem,
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
@@ -18,20 +18,20 @@ export default function getInitColorSchemeScript(options) {
       __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
         var colorScheme = '';
-        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+        if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
         if (mode === 'light') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
         }
         if (mode === 'dark') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
           document.body.setAttribute('${attribute}', colorScheme);

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.1.0
+/** @license MUI v5.2.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,6 +27,7 @@ export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
+export { default as experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';
 export { default as createBox } from './createBox';

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -44,27 +44,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(styleKey => {
       const value = callIfFn(sxObject[styleKey], theme);
 
-      if (typeof value === 'object') {
-        if (propToStyleFunction[styleKey]) {
-          css = merge(css, getThemeValue(styleKey, value, theme));
-        } else {
-          const breakpointsValues = handleBreakpoints({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object') {
+          if (propToStyleFunction[styleKey]) {
+            css = merge(css, getThemeValue(styleKey, value, theme));
           } else {
-            css = merge(css, breakpointsValues);
+            const breakpointsValues = handleBreakpoints({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                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);

package/modern/sx/index.js

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

package/modern/sx/sx.js

@@ -0,0 +1,12 @@
+import styleFunctionSx from '../styleFunctionSx';
+
+function sx(styles) {
+  return ({
+    theme
+  }) => styleFunctionSx({
+    sx: styles,
+    theme
+  });
+}
+
+export default sx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.1.0",
+  "version": "5.2.2",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -43,13 +43,13 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.0",
-    "@mui/private-theming": "^5.1.0",
-    "@mui/styled-engine": "^5.1.0",
+    "@babel/runtime": "^7.16.3",
+    "@mui/private-theming": "^5.2.2",
+    "@mui/styled-engine": "^5.2.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.1.0",
+    "@mui/utils": "^5.2.2",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.9",
+    "csstype": "^3.0.10",
     "prop-types": "^15.7.2"
   },
   "sideEffects": false,

package/styleFunctionSx/styleFunctionSx.js

@@ -59,27 +59,29 @@ function styleFunctionSx(props) {
     Object.keys(sxObject).forEach(styleKey => {
       const value = callIfFn(sxObject[styleKey], theme);
 
-      if (typeof value === 'object') {
-        if (_getThemeValue.propToStyleFunction[styleKey]) {
-          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
-        } else {
-          const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
-            theme
-          }, value, x => ({
-            [styleKey]: x
-          }));
-
-          if (objectsHaveSameKeys(breakpointsValues, value)) {
-            css[styleKey] = styleFunctionSx({
-              sx: value,
-              theme
-            });
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object') {
+          if (_getThemeValue.propToStyleFunction[styleKey]) {
+            css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
           } else {
-            css = (0, _merge.default)(css, breakpointsValues);
+            const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+              theme
+            }, value, x => ({
+              [styleKey]: x
+            }));
+
+            if (objectsHaveSameKeys(breakpointsValues, value)) {
+              css[styleKey] = styleFunctionSx({
+                sx: value,
+                theme
+              });
+            } else {
+              css = (0, _merge.default)(css, breakpointsValues);
+            }
           }
+        } else {
+          css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
         }
-      } else {
-        css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
       }
     });
     return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);

package/styleFunctionSx/styleFunctionSx.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/sx/index.d.ts

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

package/sx/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 _sx.default;
+  }
+});
+
+var _sx = _interopRequireDefault(require("./sx"));

package/sx/package.json

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

package/sx/sx.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from '@mui/styled-engine';
+import { SxProps } from '../styleFunctionSx';
+
+export default function sx<T extends object = {}>(styles: SxProps<T>): CSSObject;