@sitecore/sc-contenthub-blok 0.0.90 → 1.0.1

package/node_modules/@mui/system/modern/GlobalStyles/GlobalStyles.js

@@ -2,16 +2,40 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
+import { GlobalStyles as MuiGlobalStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import useTheme from "../useTheme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+function wrapGlobalLayer(styles) {
+  const serialized = serializeStyles(styles);
+  if (styles !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      // If the styles are not already wrapped in a layer, wrap them in a global layer.
+      serialized.styles = `@layer global{${serialized.styles}}`;
+    }
+    return serialized;
+  }
+  return styles;
+}
 function GlobalStyles({
   styles,
   themeId,
   defaultTheme = {}
 }) {
   const upperTheme = useTheme(defaultTheme);
-  const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map(styleArg => {
+        if (typeof styleArg === 'function') {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /*#__PURE__*/_jsx(MuiGlobalStyles, {
     styles: globalStyles
   });

package/node_modules/@mui/system/modern/Grid/createGrid.js

@@ -10,6 +10,7 @@ import useThemeSystem from "../useTheme/index.js";
 import { extendSxProp } from "../styleFunctionSx/index.js";
 import createTheme from "../createTheme/index.js";
 import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
+import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 
@@ -75,6 +76,9 @@ export default function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    // TODO v8: Remove when removing the legacy Grid component
+    deleteLegacyGridProps(props, theme.breakpoints);
     const {
       className,
       children,

package/node_modules/@mui/system/modern/Grid/deleteLegacyGridProps.js

@@ -0,0 +1,41 @@
+const getLegacyGridWarning = propName => {
+  if (['item', 'zeroMinWidth'].includes(propName)) {
+    return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
+  }
+
+  // #host-reference
+  return `The \`${propName}\` prop has been removed. See https://v6.mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+};
+const warnedAboutProps = [];
+
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+export default function deleteLegacyGridProps(props, breakpoints) {
+  const propsToWarn = [];
+  if (props.item !== undefined) {
+    delete props.item;
+    propsToWarn.push('item');
+  }
+  if (props.zeroMinWidth !== undefined) {
+    delete props.zeroMinWidth;
+    propsToWarn.push('zeroMinWidth');
+  }
+  breakpoints.keys.forEach(breakpoint => {
+    if (props[breakpoint] !== undefined) {
+      propsToWarn.push(breakpoint);
+      delete props[breakpoint];
+    }
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    propsToWarn.forEach(prop => {
+      if (!warnedAboutProps.includes(prop)) {
+        warnedAboutProps.push(prop);
+        console.warn(`MUI Grid2: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/node_modules/@mui/system/modern/ThemeProvider/ThemeProvider.js

@@ -8,7 +8,8 @@ import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
 import RtlProvider from "../RtlProvider/index.js";
 import DefaultPropsProvider from "../DefaultPropsProvider/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import useLayerOrder from "./useLayerOrder.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
   return React.useMemo(() => {
@@ -59,15 +60,16 @@ function ThemeProvider(props) {
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
   const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
+  const layerOrder = useLayerOrder(engineTheme);
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+        children: /*#__PURE__*/_jsxs(DefaultPropsProvider, {
           value: themeId ? engineTheme[themeId].components : engineTheme.components,
-          children: children
+          children: [layerOrder, children]
         })
       })
     })

package/node_modules/@mui/system/modern/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import GlobalStyles from "../GlobalStyles/index.js";
+import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
+
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function useLayerOrder(theme) {
+  const upperTheme = useThemeWithoutDefault();
+  const id = useId() || '';
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  useEnhancedEffect(() => {
+    const head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && firstChild.hasAttribute?.('data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GlobalStyles, {
+    styles: layerOrder
+  });
+}

package/node_modules/@mui/system/modern/createStyled/createStyled.js

@@ -1,4 +1,4 @@
-import styledEngineStyled, { internal_mutateStyles as mutateStyles } from '@mui/styled-engine';
+import styledEngineStyled, { internal_mutateStyles as mutateStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -16,6 +16,13 @@ export const systemDefaultTheme = createTheme();
 export function shouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === 'object' && serialized.styles && !serialized.styles.startsWith('@layer') // only add the layer if it is not already there.
+  ) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 function defaultOverridesResolver(slot) {
   if (!slot) {
     return null;
@@ -25,7 +32,7 @@ function defaultOverridesResolver(slot) {
 function attachTheme(props, themeId, defaultTheme) {
   props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
 }
-function processStyle(props, style) {
+function processStyle(props, style, layerName) {
   /*
    * Style types:
    *  - null/undefined
@@ -37,27 +44,27 @@ function processStyle(props, style) {
 
   const resolvedStyle = typeof style === 'function' ? style(props) : style;
   if (Array.isArray(resolvedStyle)) {
-    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle));
+    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle, layerName));
   }
   if (Array.isArray(resolvedStyle?.variants)) {
     let rootStyle;
     if (resolvedStyle.isProcessed) {
-      rootStyle = resolvedStyle.style;
+      rootStyle = layerName ? shallowLayer(resolvedStyle.style, layerName) : resolvedStyle.style;
     } else {
       const {
         variants,
         ...otherStyles
       } = resolvedStyle;
-      rootStyle = otherStyles;
+      rootStyle = layerName ? shallowLayer(serializeStyles(otherStyles), layerName) : otherStyles;
     }
-    return processStyleVariants(props, resolvedStyle.variants, [rootStyle]);
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle], layerName);
   }
   if (resolvedStyle?.isProcessed) {
-    return resolvedStyle.style;
+    return layerName ? shallowLayer(serializeStyles(resolvedStyle.style), layerName) : resolvedStyle.style;
   }
-  return resolvedStyle;
+  return layerName ? shallowLayer(serializeStyles(resolvedStyle), layerName) : resolvedStyle;
 }
-function processStyleVariants(props, variants, results = []) {
+function processStyleVariants(props, variants, results = [], layerName = undefined) {
   let mergedState; // We might not need it, initialized lazily
 
   variantLoop: for (let i = 0; i < variants.length; i += 1) {
@@ -84,9 +91,9 @@ function processStyleVariants(props, variants, results = []) {
         ...props.ownerState,
         ownerState: props.ownerState
       });
-      results.push(variant.style(mergedState));
+      results.push(layerName ? shallowLayer(serializeStyles(variant.style(mergedState)), layerName) : variant.style(mergedState));
     } else {
-      results.push(variant.style);
+      results.push(layerName ? shallowLayer(serializeStyles(variant.style), layerName) : variant.style);
     }
   }
   return results;
@@ -115,6 +122,7 @@ export default function createStyled(input = {}) {
       overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
       ...options
     } = inputOptions;
+    const layerName = componentName && componentName.startsWith('Mui') || !!componentSlot ? 'components' : 'custom';
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -141,21 +149,26 @@ export default function createStyled(input = {}) {
       ...options
     });
     const transformStyle = style => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style) {
+      // - On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      //   component stays as a function. This condition makes sure that we do not interpolate functions
+      //   which are basically components used as a selectors.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
+      }
+      if (typeof style === 'function') {
         return function styleFunctionProcessor(props) {
-          return processStyle(props, style);
+          return processStyle(props, style, props.theme.modularCssLayers ? layerName : undefined);
         };
       }
       if (isPlainObject(style)) {
         const serialized = preprocessStyles(style);
-        if (!serialized.variants) {
-          return serialized.style;
-        }
         return function styleObjectProcessor(props) {
-          return processStyle(props, serialized);
+          if (!serialized.variants) {
+            return props.theme.modularCssLayers ? shallowLayer(serialized.style, layerName) : serialized.style;
+          }
+          return processStyle(props, serialized, props.theme.modularCssLayers ? layerName : undefined);
         };
       }
       return style;
@@ -180,7 +193,7 @@ export default function createStyled(input = {}) {
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
           // eslint-disable-next-line guard-for-in
           for (const slotKey in styleOverrides) {
-            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey]);
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey], props.theme.modularCssLayers ? 'theme' : undefined);
           }
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -192,7 +205,7 @@ export default function createStyled(input = {}) {
           if (!themeVariants) {
             return null;
           }
-          return processStyleVariants(props, themeVariants);
+          return processStyleVariants(props, themeVariants, [], props.theme.modularCssLayers ? 'theme' : undefined);
         });
       }
       if (!skipSx) {

package/node_modules/@mui/system/modern/cssVars/createCssVarsProvider.js

@@ -50,6 +50,7 @@ export default function createCssVarsProvider(options) {
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       disableTransitionOnChange = designSystemTransitionOnChange,
+      storageManager,
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -97,6 +98,7 @@ export default function createCssVarsProvider(options) {
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
+      storageManager,
       storageWindow,
       noSsr
     });
@@ -291,6 +293,11 @@ export default function createCssVarsProvider(options) {
      * You should use this option in conjuction with `InitColorSchemeScript` component.
      */
     noSsr: PropTypes.bool,
+    /**
+     * The storage manager to be used for storing the mode and color scheme
+     * @default using `window.localStorage`
+     */
+    storageManager: PropTypes.func,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window

package/node_modules/@mui/system/modern/cssVars/localStorageManager.js

@@ -0,0 +1,51 @@
+function noop() {}
+const localStorageManager = ({
+  key,
+  storageWindow
+}) => {
+  if (!storageWindow && typeof window !== 'undefined') {
+    storageWindow = window;
+  }
+  return {
+    get(defaultValue) {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+      if (!storageWindow) {
+        return defaultValue;
+      }
+      let value;
+      try {
+        value = storageWindow.localStorage.getItem(key);
+      } catch {
+        // Unsupported
+      }
+      return value || defaultValue;
+    },
+    set: value => {
+      if (storageWindow) {
+        try {
+          storageWindow.localStorage.setItem(key, value);
+        } catch {
+          // Unsupported
+        }
+      }
+    },
+    subscribe: handler => {
+      if (!storageWindow) {
+        return noop;
+      }
+      const listener = event => {
+        const value = event.newValue;
+        if (event.key === key) {
+          handler(value);
+        }
+      };
+      storageWindow.addEventListener('storage', listener);
+      return () => {
+        storageWindow.removeEventListener('storage', listener);
+      };
+    }
+  };
+};
+export default localStorageManager;

package/node_modules/@mui/system/modern/cssVars/useCurrentColorScheme.js

@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+import localStorageManager from "./localStorageManager.js";
+function noop() {}
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -32,22 +34,6 @@ export function getColorScheme(state) {
     return undefined;
   });
 }
-function initializeValue(key, defaultValue) {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-  let value;
-  try {
-    value = localStorage.getItem(key) || undefined;
-    if (!value) {
-      // the first time that user enters the site.
-      localStorage.setItem(key, defaultValue);
-    }
-  } catch {
-    // Unsupported
-  }
-  return value || defaultValue;
-}
 export default function useCurrentColorScheme(options) {
   const {
     defaultMode = 'light',
@@ -57,14 +43,27 @@ export default function useCurrentColorScheme(options) {
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window,
+    storageManager = localStorageManager,
     noSsr = false
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const isMultiSchemes = supportedColorSchemes.length > 1;
+  const modeStorage = React.useMemo(() => storageManager?.({
+    key: modeStorageKey,
+    storageWindow
+  }), [storageManager, modeStorageKey, storageWindow]);
+  const lightStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-light`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
+  const darkStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-dark`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
   const [state, setState] = React.useState(() => {
-    const initialMode = initializeValue(modeStorageKey, defaultMode);
-    const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
-    const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+    const initialMode = modeStorage?.get(defaultMode) || defaultMode;
+    const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
+    const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
@@ -84,27 +83,19 @@ export default function useCurrentColorScheme(options) {
         return currentState;
       }
       const newMode = mode ?? defaultMode;
-      try {
-        localStorage.setItem(modeStorageKey, newMode);
-      } catch {
-        // Unsupported
-      }
+      modeStorage?.set(newMode);
       return {
         ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
       };
     });
-  }, [modeStorageKey, defaultMode]);
+  }, [modeStorage, defaultMode]);
   const setColorScheme = React.useCallback(value => {
     if (!value) {
       setState(currentState => {
-        try {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch {
-          // Unsupported
-        }
+        lightStorage?.set(defaultLightColorScheme);
+        darkStorage?.set(defaultDarkColorScheme);
         return {
           ...currentState,
           lightColorScheme: defaultLightColorScheme,
@@ -120,15 +111,12 @@ export default function useCurrentColorScheme(options) {
             ...currentState
           };
           processState(currentState, mode => {
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch {
-              // Unsupported
-            }
             if (mode === 'light') {
+              lightStorage?.set(value);
               newState.lightColorScheme = value;
             }
             if (mode === 'dark') {
+              darkStorage?.set(value);
               newState.darkColorScheme = value;
             }
           });
@@ -147,11 +135,7 @@ export default function useCurrentColorScheme(options) {
             console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
           } else {
             newState.lightColorScheme = newLightColorScheme;
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
+            lightStorage?.set(newLightColorScheme);
           }
         }
         if (newDarkColorScheme) {
@@ -159,17 +143,13 @@ export default function useCurrentColorScheme(options) {
             console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
           } else {
             newState.darkColorScheme = newDarkColorScheme;
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
+            darkStorage?.set(newDarkColorScheme);
           }
         }
         return newState;
       });
     }
-  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
+  }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
       setState(currentState => {
@@ -209,34 +189,34 @@ export default function useCurrentColorScheme(options) {
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow && isMultiSchemes) {
-      const handleStorage = event => {
-        const value = event.newValue;
-        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-          // If the key is deleted, value will be null then reset color scheme to the default one.
-          if (event.key.endsWith('light')) {
-            setColorScheme({
-              light: value
-            });
-          }
-          if (event.key.endsWith('dark')) {
-            setColorScheme({
-              dark: value
-            });
-          }
-        }
-        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+    if (isMultiSchemes) {
+      const unsubscribeMode = modeStorage?.subscribe(value => {
+        if (!value || ['light', 'dark', 'system'].includes(value)) {
           setMode(value || defaultMode);
         }
-      };
-      // For syncing color-scheme changes between iframes
-      storageWindow.addEventListener('storage', handleStorage);
+      }) || noop;
+      const unsubscribeLight = lightStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            light: value
+          });
+        }
+      }) || noop;
+      const unsubscribeDark = darkStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            dark: value
+          });
+        }
+      }) || noop;
       return () => {
-        storageWindow.removeEventListener('storage', handleStorage);
+        unsubscribeMode();
+        unsubscribeLight();
+        unsubscribeDark();
       };
     }
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
+  }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
   return {
     ...state,
     mode: isClient ? state.mode : undefined,

package/node_modules/@mui/system/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.4.1
+ * @mui/system v6.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node_modules/@mui/system/modern/styleFunctionSx/AliasesCSSProperties.js

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

package/node_modules/@mui/system/modern/styleFunctionSx/OverwriteCSSProperties.js

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

package/node_modules/@mui/system/modern/styleFunctionSx/StandardCssProperties.js

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

package/node_modules/@mui/system/modern/styleFunctionSx/styleFunctionSx.js

@@ -64,7 +64,8 @@ export function unstable_createStyleFunctionSx() {
   function styleFunctionSx(props) {
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
@@ -105,7 +106,8 @@ export function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css = merge(css, breakpointsValues);
@@ -116,6 +118,11 @@ export function unstable_createStyleFunctionSx() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          '@layer sx': sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css))
+        };
+      }
       return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);

package/node_modules/@mui/system/modern/useMediaQuery/useMediaQuery.js

@@ -102,6 +102,9 @@ export function unstable_createUseMediaQuery(params = {}) {
     }
     let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
     query = query.replace(/^@media( ?)/m, '');
+    if (query.includes('print')) {
+      console.warn([`MUI: You have provided a \`print\` query to the \`useMediaQuery\` hook.`, 'Using the print media query to modify print styles can lead to unexpected results.', 'Consider using the `displayPrint` field in the `sx` prop instead.', 'More information about `displayPrint` on our docs: https://mui.com/system/display/#display-in-print.'].join('\n'));
+    }
     const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
     const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
     if (process.env.NODE_ENV !== 'production') {