@mui/system 5.15.12 → 5.15.14

package/cssVars/createCssVarsProvider.js

@@ -55,22 +55,23 @@ function createCssVarsProvider(options) {
     }
     return value;
   };
-  function CssVarsProvider({
-    children,
-    theme: themeProp = defaultTheme,
-    modeStorageKey = defaultModeStorageKey,
-    colorSchemeStorageKey = defaultColorSchemeStorageKey,
-    attribute = defaultAttribute,
-    defaultMode = designSystemMode,
-    defaultColorScheme = designSystemColorScheme,
-    disableTransitionOnChange = designSystemTransitionOnChange,
-    storageWindow = typeof window === 'undefined' ? undefined : window,
-    documentNode = typeof document === 'undefined' ? undefined : document,
-    colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root',
-    disableNestedContext = false,
-    disableStyleSheetGeneration = false
-  }) {
+  function CssVarsProvider(props) {
+    const {
+      children,
+      theme: themeProp = defaultTheme,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
+      defaultMode = designSystemMode,
+      defaultColorScheme = designSystemColorScheme,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      colorSchemeSelector = ':root',
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false
+    } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = (0, _privateTheming.useTheme)();
     const ctx = React.useContext(ColorSchemeContext);
@@ -237,14 +238,14 @@ function createCssVarsProvider(options) {
       };
     }, []);
     const contextValue = React.useMemo(() => ({
-      mode,
-      systemMode,
-      setMode,
-      lightColorScheme,
-      darkColorScheme,
+      allColorSchemes,
       colorScheme,
+      darkColorScheme,
+      lightColorScheme,
+      mode,
       setColorScheme,
-      allColorSchemes
+      setMode,
+      systemMode
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {

package/cssVars/useCurrentColorScheme.js

@@ -88,7 +88,7 @@ function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = !mode ? defaultMode : mode;
+      const newMode = mode != null ? mode : defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -169,11 +169,19 @@ function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(e => {
+  const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
-      setState(currentState => (0, _extends2.default)({}, currentState, {
-        systemMode: e != null && e.matches ? 'dark' : 'light'
-      }));
+      setState(currentState => {
+        const systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return (0, _extends2.default)({}, currentState, {
+          systemMode
+        });
+      });
     }
   }, [state.mode]);
 
@@ -189,34 +197,38 @@ function useCurrentColorScheme(options) {
     // Intentionally use deprecated listener methods to support iOS & old browsers
     media.addListener(handler);
     handler(media);
-    return () => media.removeListener(handler);
+    return () => {
+      media.removeListener(handler);
+    };
   }, []);
 
   // 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 (storageWindow) {
+      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.endsWith('dark')) {
-          setColorScheme({
-            dark: value
-          });
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
         }
-      }
-      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-        setMode(value || defaultMode);
-      }
-    };
-    if (storageWindow) {
+      };
       // For syncing color-scheme changes between iframes
       storageWindow.addEventListener('storage', handleStorage);
-      return () => storageWindow.removeEventListener('storage', handleStorage);
+      return () => {
+        storageWindow.removeEventListener('storage', handleStorage);
+      };
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);

package/esm/RtlProvider/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["value"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const RtlContext = /*#__PURE__*/React.createContext();
+function RtlProvider(_ref) {
+  let {
+      value
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
+    value: value != null ? value : true
+  }, props));
+}
+process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
+  children: PropTypes.node,
+  value: PropTypes.bool
+} : void 0;
+export const useRtl = () => {
+  const value = React.useContext(RtlContext);
+  return value != null ? value : false;
+};
+export default RtlProvider;

package/esm/ThemeProvider/ThemeProvider.js

@@ -7,6 +7,7 @@ import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '
 import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
+import RtlProvider from '../RtlProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
@@ -52,11 +53,15 @@ function ThemeProvider(props) {
   }
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  const rtlValue = engineTheme.direction === 'rtl';
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
-      children: children
+      children: /*#__PURE__*/_jsx(RtlProvider, {
+        value: rtlValue,
+        children: children
+      })
     })
   });
 }

package/esm/cssVars/createCssVarsProvider.js

@@ -46,22 +46,23 @@ export default function createCssVarsProvider(options) {
     }
     return value;
   };
-  function CssVarsProvider({
-    children,
-    theme: themeProp = defaultTheme,
-    modeStorageKey = defaultModeStorageKey,
-    colorSchemeStorageKey = defaultColorSchemeStorageKey,
-    attribute = defaultAttribute,
-    defaultMode = designSystemMode,
-    defaultColorScheme = designSystemColorScheme,
-    disableTransitionOnChange = designSystemTransitionOnChange,
-    storageWindow = typeof window === 'undefined' ? undefined : window,
-    documentNode = typeof document === 'undefined' ? undefined : document,
-    colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-    colorSchemeSelector = ':root',
-    disableNestedContext = false,
-    disableStyleSheetGeneration = false
-  }) {
+  function CssVarsProvider(props) {
+    const {
+      children,
+      theme: themeProp = defaultTheme,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
+      defaultMode = designSystemMode,
+      defaultColorScheme = designSystemColorScheme,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      colorSchemeSelector = ':root',
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false
+    } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = muiUseTheme();
     const ctx = React.useContext(ColorSchemeContext);
@@ -228,14 +229,14 @@ export default function createCssVarsProvider(options) {
       };
     }, []);
     const contextValue = React.useMemo(() => ({
-      mode,
-      systemMode,
-      setMode,
-      lightColorScheme,
-      darkColorScheme,
+      allColorSchemes,
       colorScheme,
+      darkColorScheme,
+      lightColorScheme,
+      mode,
       setColorScheme,
-      allColorSchemes
+      setMode,
+      systemMode
     }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {

package/esm/cssVars/useCurrentColorScheme.js

@@ -78,7 +78,7 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = !mode ? defaultMode : mode;
+      const newMode = mode != null ? mode : defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -159,11 +159,19 @@ export default function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(e => {
+  const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
-      setState(currentState => _extends({}, currentState, {
-        systemMode: e != null && e.matches ? 'dark' : 'light'
-      }));
+      setState(currentState => {
+        const systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return _extends({}, currentState, {
+          systemMode
+        });
+      });
     }
   }, [state.mode]);
 
@@ -179,34 +187,38 @@ export default function useCurrentColorScheme(options) {
     // Intentionally use deprecated listener methods to support iOS & old browsers
     media.addListener(handler);
     handler(media);
-    return () => media.removeListener(handler);
+    return () => {
+      media.removeListener(handler);
+    };
   }, []);
 
   // 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 (storageWindow) {
+      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.endsWith('dark')) {
-          setColorScheme({
-            dark: value
-          });
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
         }
-      }
-      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-        setMode(value || defaultMode);
-      }
-    };
-    if (storageWindow) {
+      };
       // For syncing color-scheme changes between iframes
       storageWindow.addEventListener('storage', handleStorage);
-      return () => storageWindow.removeEventListener('storage', handleStorage);
+      return () => {
+        storageWindow.removeEventListener('storage', handleStorage);
+      };
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);

package/esm/index.js

@@ -51,6 +51,8 @@ export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
 export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
 export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
 export { default as responsivePropType } from './responsivePropType';
+export { default as RtlProvider } from './RtlProvider';
+export * from './RtlProvider';
 
 /** ----------------- */
 /** Layout components */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.12
+ * @mui/system v5.15.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -60,6 +60,7 @@ var _exportNames = {
   unstable_prepareCssVars: true,
   unstable_createCssVarsTheme: true,
   responsivePropType: true,
+  RtlProvider: true,
   createContainer: true,
   Container: true,
   Unstable_Grid: true,
@@ -83,6 +84,12 @@ Object.defineProperty(exports, "GlobalStyles", {
     return _GlobalStyles.default;
   }
 });
+Object.defineProperty(exports, "RtlProvider", {
+  enumerable: true,
+  get: function () {
+    return _RtlProvider.default;
+  }
+});
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function () {
@@ -520,6 +527,18 @@ var _cssVarsParser = _interopRequireDefault(require("./cssVars/cssVarsParser"));
 var _prepareCssVars = _interopRequireDefault(require("./cssVars/prepareCssVars"));
 var _createCssVarsTheme = _interopRequireDefault(require("./cssVars/createCssVarsTheme"));
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
+var _RtlProvider = _interopRequireWildcard(require("./RtlProvider"));
+Object.keys(_RtlProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RtlProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RtlProvider[key];
+    }
+  });
+});
 var _createContainer = _interopRequireDefault(require("./Container/createContainer"));
 var _Container = _interopRequireWildcard(require("./Container"));
 Object.keys(_Container).forEach(function (key) {

package/legacy/RtlProvider/index.js

@@ -0,0 +1,22 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+var RtlContext = /*#__PURE__*/React.createContext();
+function RtlProvider(_ref) {
+  var value = _ref.value,
+    props = _objectWithoutProperties(_ref, ["value"]);
+  return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
+    value: value != null ? value : true
+  }, props));
+}
+process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
+  children: PropTypes.node,
+  value: PropTypes.bool
+} : void 0;
+export var useRtl = function useRtl() {
+  var value = React.useContext(RtlContext);
+  return value != null ? value : false;
+};
+export default RtlProvider;

package/legacy/ThemeProvider/ThemeProvider.js

@@ -8,6 +8,7 @@ import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '
 import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
+import RtlProvider from '../RtlProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 var EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme) {
@@ -50,11 +51,15 @@ function ThemeProvider(props) {
   }
   var engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   var privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  var rtlValue = engineTheme.direction === 'rtl';
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
-      children: children
+      children: /*#__PURE__*/_jsx(RtlProvider, {
+        value: rtlValue,
+        children: children
+      })
     })
   });
 }

package/legacy/cssVars/createCssVarsProvider.js

@@ -46,53 +46,53 @@ export default function createCssVarsProvider(options) {
     }
     return value;
   };
-  function CssVarsProvider(_ref) {
-    var children = _ref.children,
-      _ref$theme = _ref.theme,
-      themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
-      _ref$modeStorageKey = _ref.modeStorageKey,
-      modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
-      _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-      colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
-      _ref$attribute = _ref.attribute,
-      attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
-      _ref$defaultMode = _ref.defaultMode,
-      defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
-      _ref$defaultColorSche = _ref.defaultColorScheme,
-      defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
-      _ref$disableTransitio = _ref.disableTransitionOnChange,
-      disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
-      _ref$storageWindow = _ref.storageWindow,
-      storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
-      _ref$documentNode = _ref.documentNode,
-      documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
-      _ref$colorSchemeNode = _ref.colorSchemeNode,
-      colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
-      _ref$colorSchemeSelec = _ref.colorSchemeSelector,
-      colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
-      _ref$disableNestedCon = _ref.disableNestedContext,
-      disableNestedContext = _ref$disableNestedCon === void 0 ? false : _ref$disableNestedCon,
-      _ref$disableStyleShee = _ref.disableStyleSheetGeneration,
-      disableStyleSheetGeneration = _ref$disableStyleShee === void 0 ? false : _ref$disableStyleShee;
+  function CssVarsProvider(props) {
+    var children = props.children,
+      _props$theme = props.theme,
+      themeProp = _props$theme === void 0 ? defaultTheme : _props$theme,
+      _props$modeStorageKey = props.modeStorageKey,
+      modeStorageKey = _props$modeStorageKey === void 0 ? defaultModeStorageKey : _props$modeStorageKey,
+      _props$colorSchemeSto = props.colorSchemeStorageKey,
+      colorSchemeStorageKey = _props$colorSchemeSto === void 0 ? defaultColorSchemeStorageKey : _props$colorSchemeSto,
+      _props$attribute = props.attribute,
+      attribute = _props$attribute === void 0 ? defaultAttribute : _props$attribute,
+      _props$defaultMode = props.defaultMode,
+      defaultMode = _props$defaultMode === void 0 ? designSystemMode : _props$defaultMode,
+      _props$defaultColorSc = props.defaultColorScheme,
+      defaultColorScheme = _props$defaultColorSc === void 0 ? designSystemColorScheme : _props$defaultColorSc,
+      _props$disableTransit = props.disableTransitionOnChange,
+      disableTransitionOnChange = _props$disableTransit === void 0 ? designSystemTransitionOnChange : _props$disableTransit,
+      _props$storageWindow = props.storageWindow,
+      storageWindow = _props$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _props$storageWindow,
+      _props$documentNode = props.documentNode,
+      documentNode = _props$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _props$documentNode,
+      _props$colorSchemeNod = props.colorSchemeNode,
+      colorSchemeNode = _props$colorSchemeNod === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _props$colorSchemeNod,
+      _props$colorSchemeSel = props.colorSchemeSelector,
+      colorSchemeSelector = _props$colorSchemeSel === void 0 ? ':root' : _props$colorSchemeSel,
+      _props$disableNestedC = props.disableNestedContext,
+      disableNestedContext = _props$disableNestedC === void 0 ? false : _props$disableNestedC,
+      _props$disableStyleSh = props.disableStyleSheetGeneration,
+      disableStyleSheetGeneration = _props$disableStyleSh === void 0 ? false : _props$disableStyleSh;
     var hasMounted = React.useRef(false);
     var upperTheme = muiUseTheme();
     var ctx = React.useContext(ColorSchemeContext);
     var nested = !!ctx && !disableNestedContext;
     var scopedTheme = themeProp[themeId];
-    var _ref2 = scopedTheme || themeProp,
-      _ref2$colorSchemes = _ref2.colorSchemes,
-      colorSchemes = _ref2$colorSchemes === void 0 ? {} : _ref2$colorSchemes,
-      _ref2$components = _ref2.components,
-      components = _ref2$components === void 0 ? {} : _ref2$components,
-      _ref2$generateCssVars = _ref2.generateCssVars,
-      generateCssVars = _ref2$generateCssVars === void 0 ? function () {
+    var _ref = scopedTheme || themeProp,
+      _ref$colorSchemes = _ref.colorSchemes,
+      colorSchemes = _ref$colorSchemes === void 0 ? {} : _ref$colorSchemes,
+      _ref$components = _ref.components,
+      components = _ref$components === void 0 ? {} : _ref$components,
+      _ref$generateCssVars = _ref.generateCssVars,
+      generateCssVars = _ref$generateCssVars === void 0 ? function () {
         return {
           vars: {},
           css: {}
         };
-      } : _ref2$generateCssVars,
-      cssVarPrefix = _ref2.cssVarPrefix,
-      restThemeProp = _objectWithoutProperties(_ref2, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
+      } : _ref$generateCssVars,
+      cssVarPrefix = _ref.cssVarPrefix,
+      restThemeProp = _objectWithoutProperties(_ref, ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"]);
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -161,10 +161,10 @@ export default function createCssVarsProvider(options) {
     //    The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
     var defaultColorSchemeStyleSheet = {};
     var otherColorSchemesStyleSheet = {};
-    Object.entries(colorSchemes).forEach(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        scheme = _ref4[1];
+    Object.entries(colorSchemes).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        scheme = _ref3[1];
       var _generateCssVars2 = generateCssVars(key),
         css = _generateCssVars2.css,
         vars = _generateCssVars2.vars;
@@ -246,14 +246,14 @@ export default function createCssVarsProvider(options) {
     }, []);
     var contextValue = React.useMemo(function () {
       return {
-        mode: mode,
-        systemMode: systemMode,
-        setMode: setMode,
-        lightColorScheme: lightColorScheme,
-        darkColorScheme: darkColorScheme,
+        allColorSchemes: allColorSchemes,
         colorScheme: colorScheme,
+        darkColorScheme: darkColorScheme,
+        lightColorScheme: lightColorScheme,
+        mode: mode,
         setColorScheme: setColorScheme,
-        allColorSchemes: allColorSchemes
+        setMode: setMode,
+        systemMode: systemMode
       };
     }, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
     var shouldGenerateStyleSheet = true;