@mui/system 5.15.13 → 5.15.15

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/colorManipulator.js

@@ -316,7 +316,7 @@ export function emphasize(color, coefficient = 0.15) {
 }
 export function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return private_safeEmphasize(color, coefficient);
+    return emphasize(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);

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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.13
+ * @mui/system v5.15.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/colorManipulator.js

@@ -324,7 +324,7 @@ export function emphasize(color) {
 }
 export function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return private_safeEmphasize(color, coefficient);
+    return emphasize(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);

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;

package/legacy/cssVars/useCurrentColorScheme.js

@@ -83,7 +83,7 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      var newMode = !mode ? defaultMode : mode;
+      var newMode = mode != null ? mode : defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -164,11 +164,17 @@ export default function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  var handleMediaQuery = React.useCallback(function (e) {
+  var handleMediaQuery = React.useCallback(function (event) {
     if (state.mode === 'system') {
       setState(function (currentState) {
+        var systemMode = event != null && event.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
         return _extends({}, currentState, {
-          systemMode: e != null && e.matches ? 'dark' : 'light'
+          systemMode: systemMode
         });
       });
     }
@@ -189,36 +195,36 @@ export default function useCurrentColorScheme(options) {
     media.addListener(handler);
     handler(media);
     return function () {
-      return media.removeListener(handler);
+      media.removeListener(handler);
     };
   }, []);
 
   // Handle when localStorage has changed
   React.useEffect(function () {
-    var handleStorage = function handleStorage(event) {
-      var value = event.newValue;
-      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-        // If the key is deleted, value will be null then reset color scheme to the default one.
-        if (event.key.endsWith('light')) {
-          setColorScheme({
-            light: value
-          });
+    if (storageWindow) {
+      var handleStorage = function handleStorage(event) {
+        var value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
         }
-        if (event.key.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 function () {
-        return storageWindow.removeEventListener('storage', handleStorage);
+        storageWindow.removeEventListener('storage', handleStorage);
       };
     }
     return undefined;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.13
+ * @mui/system v5.15.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/colorManipulator.js

@@ -316,7 +316,7 @@ export function emphasize(color, coefficient = 0.15) {
 }
 export function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return private_safeEmphasize(color, coefficient);
+    return emphasize(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);

package/modern/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?.cssVarPrefix === cssVarPrefix) {