@mui/system 5.6.1 → 5.6.4

package/esm/style.js

@@ -4,9 +4,24 @@ import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
     return null;
+  } // Check if CSS variables are used
+
+
+  if (obj && obj.vars) {
+    const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+
+    if (val != null) {
+      return val;
+    }
   }
 
-  return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+  return path.split('.').reduce((acc, item) => {
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
+  }, obj);
 }
 
 function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {

package/index.d.ts

@@ -23,6 +23,10 @@ export const borderRight: SimpleStyleFunction<'borderRight'>;
 export const borderBottom: SimpleStyleFunction<'borderBottom'>;
 export const borderLeft: SimpleStyleFunction<'borderLeft'>;
 export const borderColor: SimpleStyleFunction<'borderColor'>;
+export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
+export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
+export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
+export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
 export const borderRadius: SimpleStyleFunction<'borderRadius'>;
 export type BordersProps = PropsFor<typeof borders>;
 

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.spec.d.ts

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

package/legacy/Box/Box.js

@@ -1,3 +1,28 @@
+import PropTypes from 'prop-types';
 import createBox from '../createBox';
 var Box = createBox();
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/legacy/ThemeProvider/ThemeProvider.js

@@ -37,7 +37,14 @@ function ThemeProvider(props) {
   });
 }
 
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
   /**
    * Your component tree.
    */
@@ -46,7 +53,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 } : void 0;
 
 if (process.env.NODE_ENV !== 'production') {

package/legacy/createBox.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
 import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
@@ -32,29 +31,5 @@ export default function createBox() {
       theme: theme
     }, other));
   });
-  process.env.NODE_ENV !== "production" ? Box.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    children: PropTypes.node,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * @ignore
-     */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-  } : void 0;
   return Box;
 }

package/legacy/createStyled.js

@@ -149,7 +149,9 @@ export default function createStyled() {
                   slotKey = _ref3[0],
                   slotStyle = _ref3[1];
 
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                theme: theme
+              })) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }

package/legacy/cssVars/createCssVarsProvider.js

@@ -5,10 +5,8 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import createSpacing from '../createTheme/createSpacing';
-import createBreakpoints from '../createTheme/createBreakpoints';
+import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -18,10 +16,8 @@ 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 _baseTheme$breakpoint;
-
   var _options$theme = options.theme,
-      baseTheme = _options$theme === void 0 ? {} : _options$theme,
+      defaultTheme = _options$theme === void 0 ? {} : _options$theme,
       _options$defaultMode = options.defaultMode,
       desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       designSystemColorScheme = options.defaultColorScheme,
@@ -33,10 +29,8 @@ export default function createCssVarsProvider(options) {
       designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
       shouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
       resolveTheme = options.resolveTheme;
-  var systemSpacing = createSpacing(baseTheme.spacing);
-  var systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
-  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
   }
 
@@ -55,7 +49,7 @@ export default function createCssVarsProvider(options) {
   function CssVarsProvider(_ref) {
     var children = _ref.children,
         _ref$theme = _ref.theme,
-        themeProp = _ref$theme === void 0 ? {} : _ref$theme,
+        themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
         _ref$prefix = _ref.prefix,
         prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
         _ref$modeStorageKey = _ref.modeStorageKey,
@@ -70,23 +64,14 @@ export default function createCssVarsProvider(options) {
         disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
         _ref$enableColorSchem = _ref.enableColorScheme,
         enableColorScheme = _ref$enableColorSchem === void 0 ? designSystemEnableColorScheme : _ref$enableColorSchem;
-
-    var _baseTheme$colorSchem = baseTheme.colorSchemes,
-        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
-        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
+    var hasMounted = React.useRef(false);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
-        colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
-        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes"]);
-
-    var hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
+        colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
+        _themeProp$components = themeProp.components,
+        components = _themeProp$components === void 0 ? {} : _themeProp$components,
+        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components"]);
 
-    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;
     var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -120,7 +105,9 @@ export default function createCssVarsProvider(options) {
       return colorScheme;
     }();
 
-    var _cssVarsParser = cssVarsParser(mergedTheme, {
+    var theme = restThemeProp;
+
+    var _cssVarsParser = cssVarsParser(theme, {
       prefix: prefix,
       basePrefix: designSystemPrefix,
       shouldSkipGeneratingVar: shouldSkipGeneratingVar
@@ -129,13 +116,11 @@ export default function createCssVarsProvider(options) {
         rootVars = _cssVarsParser.vars,
         parsedTheme = _cssVarsParser.parsedTheme;
 
-    mergedTheme = _extends({}, parsedTheme, {
+    theme = _extends({}, parsedTheme, {
       components: components,
       colorSchemes: colorSchemes,
       prefix: prefix,
       vars: rootVars,
-      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
       getCssVar: createGetCssVar(prefix)
     });
     var styleSheet = {};
@@ -153,10 +138,16 @@ export default function createCssVarsProvider(options) {
           vars = _cssVarsParser2.vars,
           parsedScheme = _cssVarsParser2.parsedTheme;
 
-      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+      theme.vars = deepmerge(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+        theme = _extends({}, theme, parsedScheme);
+
+        if (theme.palette) {
+          // assign runtime mode & colorScheme
+          theme.palette.mode = mode;
+          theme.palette.colorScheme = resolvedColorScheme;
+        }
       }
 
       var resolvedDefaultColorScheme = function () {
@@ -245,7 +236,7 @@ export default function createCssVarsProvider(options) {
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });

package/legacy/cssVars/cssVarsParser.js

@@ -22,15 +22,18 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
  * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
  */
 export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
+  var arrayKeys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   var temp = obj;
   keys.forEach(function (k, index) {
     if (index === keys.length - 1) {
-      if (temp && _typeof(temp) === 'object') {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && _typeof(temp) === 'object') {
         temp[k] = value;
       }
     } else if (temp && _typeof(temp) === 'object') {
       if (!temp[k]) {
-        temp[k] = {};
+        temp[k] = arrayKeys.includes(k) ? [] : {};
       }
 
       temp = temp[k];
@@ -52,6 +55,7 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
 export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
   function recurse(object) {
     var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     Object.entries(object).forEach(function (_ref) {
       var _ref2 = _slicedToArray(_ref, 2),
           key = _ref2[0],
@@ -60,9 +64,9 @@ export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPat
       if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
         if (value !== undefined && value !== null) {
           if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
-            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]), Array.isArray(value) ? [].concat(_toConsumableArray(arrayKeys), [key]) : arrayKeys);
           } else {
-            callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+            callback([].concat(_toConsumableArray(parentKeys), [key]), value, arrayKeys);
           }
         }
       }
@@ -132,7 +136,7 @@ export default function cssVarsParser(theme, options) {
   var css = {};
   var vars = {};
   var parsedTheme = {};
-  walkObjectDeep(theme, function (keys, value) {
+  walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
       if (typeof value === 'string' && value.match(/var\(\s*--/)) {
         // for CSS variable, apply prefix or remove basePrefix from the variable
@@ -150,11 +154,11 @@ export default function cssVarsParser(theme, options) {
 
         _extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
 
-        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
+        assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
       }
     }
 
-    assignNestedKeys(parsedTheme, keys, value);
+    assignNestedKeys(parsedTheme, keys, value, arrayKeys);
   }, function (keys) {
     return keys[0] === 'vars';
   } // skip 'vars/*' paths

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.1
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/spacing.js

@@ -50,7 +50,9 @@ var marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop'
 var paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 var spacingKeys = [].concat(marginKeys, paddingKeys);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var themeSpacing = getPath(theme, themeKey) || defaultValue;
+  var _getPath;
+
+  var themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
 
   if (typeof themeSpacing === 'number') {
     return function (abs) {

package/legacy/style.js

@@ -5,10 +5,25 @@ import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path) {
   if (!path || typeof path !== 'string') {
     return null;
+  } // Check if CSS variables are used
+
+
+  if (obj && obj.vars) {
+    var val = "vars.".concat(path).split('.').reduce(function (acc, item) {
+      return acc && acc[item] ? acc[item] : null;
+    }, obj);
+
+    if (val != null) {
+      return val;
+    }
   }
 
   return path.split('.').reduce(function (acc, item) {
-    return acc && acc[item] ? acc[item] : null;
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+
+    return null;
   }, obj);
 }
 

package/modern/Box/Box.js

@@ -1,3 +1,28 @@
+import PropTypes from 'prop-types';
 import createBox from '../createBox';
 const Box = createBox();
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/modern/ThemeProvider/ThemeProvider.js

@@ -38,7 +38,14 @@ function ThemeProvider(props) {
   });
 }
 
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
   /**
    * Your component tree.
    */
@@ -47,7 +54,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**
    * A theme object. You can provide a function to extend the outer theme.
    */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
 } : void 0;
 
 if (process.env.NODE_ENV !== 'production') {

package/modern/createBox.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "component"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
 import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
@@ -33,29 +32,5 @@ export default function createBox(options = {}) {
       theme: theme
     }, other));
   });
-  process.env.NODE_ENV !== "production" ? Box.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * @ignore
-     */
-    children: PropTypes.node,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * @ignore
-     */
-    sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-  } : void 0;
   return Box;
 }

package/modern/createStyled.js

@@ -140,7 +140,9 @@ export default function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                theme
+              })) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }

package/modern/cssVars/createCssVarsProvider.js

@@ -1,15 +1,11 @@
 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"],
-      _excluded3 = ["components"];
+const _excluded = ["colorSchemes", "components"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import createSpacing from '../createTheme/createSpacing';
-import createBreakpoints from '../createTheme/createBreakpoints';
+import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
@@ -20,7 +16,7 @@ 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 = {},
+    theme: defaultTheme = {},
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -29,10 +25,8 @@ export default function createCssVarsProvider(options) {
     shouldSkipGeneratingVar,
     resolveTheme
   } = options;
-  const systemSpacing = createSpacing(baseTheme.spacing);
-  const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
 
-  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
+  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
 
@@ -50,7 +44,7 @@ export default function createCssVarsProvider(options) {
 
   function CssVarsProvider({
     children,
-    theme: themeProp = {},
+    theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
@@ -59,25 +53,14 @@ export default function createCssVarsProvider(options) {
     disableTransitionOnChange = designSystemTransitionOnChange,
     enableColorScheme = designSystemEnableColorScheme
   }) {
-    const {
-      colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    const hasMounted = React.useRef(false);
 
     const {
-      colorSchemes: colorSchemesProp = {}
-    } = themeProp,
-          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
-
-    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
-
-    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-        {
+      colorSchemes = {},
       components = {}
-    } = _deepmerge,
-        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
+    } = themeProp,
+          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);
 
-    const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -111,22 +94,21 @@ export default function createCssVarsProvider(options) {
       return colorScheme;
     })();
 
+    let theme = restThemeProp;
     const {
       css: rootCss,
       vars: rootVars,
       parsedTheme
-    } = cssVarsParser(mergedTheme, {
+    } = cssVarsParser(theme, {
       prefix,
       basePrefix: designSystemPrefix,
       shouldSkipGeneratingVar
     });
-    mergedTheme = _extends({}, parsedTheme, {
+    theme = _extends({}, parsedTheme, {
       components,
       colorSchemes,
       prefix,
       vars: rootVars,
-      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
       getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
@@ -140,10 +122,16 @@ export default function createCssVarsProvider(options) {
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-      mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+      theme.vars = deepmerge(theme.vars, vars);
 
       if (key === resolvedColorScheme) {
-        mergedTheme = _extends({}, mergedTheme, parsedScheme);
+        theme = _extends({}, theme, parsedScheme);
+
+        if (theme.palette) {
+          // assign runtime mode & colorScheme
+          theme.palette.mode = mode;
+          theme.palette.colorScheme = resolvedColorScheme;
+        }
       }
 
       const resolvedDefaultColorScheme = (() => {
@@ -230,7 +218,7 @@ export default function createCssVarsProvider(options) {
       }), /*#__PURE__*/_jsx(GlobalStyles, {
         styles: styleSheet
       }), /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+        theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
       })]
     });