@mui/material-nextjs 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,202 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.1.0
+
+<!-- generated comparing v7.0.2..master -->
+
+_May 6, 2025_
+
+A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Material UI now works with **Tailwind CSS v4**! Check out the [setup guide](https://mui.com/material-ui/integrations/tailwindcss/tailwindcss-v4/).
+
+### `@mui/material@7.1.0`
+
+- [InputBase] Text cursor jumps several lines up when inserting text fragment with new line at the end (#45246) @yermartee
+- [OutlinedInput] Add missing `notchedOutline` slot (#45917) @siriwatknp
+- [Snackbar] Skip default `onClickAway` behavior when `defaultMuiPrevented` is provided (#45629) @sai6855
+- [Avatar] Fix img slot types and add missing slots (#45483) @siriwatknp
+- [Badge] Replace useSlotProps with useSlot hook (#45871) @sai6855
+- [BottomNavigationAction] Add slots and slotProps (#45776) @sai6855
+- [CardActionArea] Add slots and slotProps (#45866) @sai6855
+- [useMediaQuery] Add warning and docs for using `useMediaQuery('print')` (#44790) @good-jinu
+- Remove unnecessary clsx usages (#46084) @sai6855
+- Corrected generic type definition in `SelectChangeEvent` (#45941) @SuyashShukla0007
+- Fix theme object changes between renders (#45863) @siriwatknp
+
+### `@mui/material-nextjs@7.1.0`
+
+- Add option to enable CSS layers for pages router (#45596) @siriwatknp
+- Do not wrap `@layer` order rules in App Router (#45864) @Nayeem-XTREME
+
+### `@mui/system@7.1.0`
+
+- Fix `@mui/system` types organization (#45860) @Janpot
+
+### `@mui/styled-engine@7.1.0`
+
+- Infer `ownerState` from props in `styled` (#46083) @siriwatknp
+- Fix style overrides variants type (#45478) @siriwatknp
+
+### Docs
+
+- [Avatar] Add avatar upload demo (#45986) @Demianeen
+- [Dialog] Remove deprecated props usage in demos (#45923) @sai6855
+- [Menu] Update `paper` slot JSDoc default from `Paper` to `PopoverPaper` (#45722) @andreachiera
+- [examples] Remove create-react-app usages (#45426) @CodeLeom
+- Add `AccordionSummary` to the v5 breaking change migration (#45947) @siriwatknp
+- Update CSS variable usage in migration guide for Pigment CSS (#46033) @sai6855
+- Fix docs API dark mode color (#46086) @alexfauquette
+- Add a guide for extending Material UI classes in Tailwind CSS (#46039) @siriwatknp
+- Add `InitColorSchemeScript` docs and API (#45927) @siriwatknp
+- Add Tailwind CSS v4 integration guide (#45906) @siriwatknp
+- Fix 301 links to the system v6 (#45931) @oliviertassinari
+- Add notification for MUI X v8 announcement (#45942) @joserodolfofreitas
+- Fix som 301 redirections (ae84b35) @oliviertassinari
+- Fix some 301 redirections (057384e) @oliviertassinari
+- Fix logo is not centered on small screens (#45920) @crabsim
+- Fix line break typo (a2a62d5) @oliviertassinari
+- Fix markdown typo in templates.md (#45914) @scyzoryck
+- Add Next.js App Router guide for custom classnames (#45852) @siriwatknp
+
+### Core
+
+- [code-infra] Give a stable name to dev tool app (3889ded) @oliviertassinari
+- [code-infra] Normalize author package in org (8135638) @oliviertassinari
+- [code-infra] Correct some manually curated .d.ts files (#46054) @Janpot
+- [code-infra] Align deps versions (#46048) @Janpot
+- [code-infra] Fix dynamic import in imports resolver (#46046) @Janpot
+- [code-infra] Eliminate `@mui/utils` deep imports (#46004) @Janpot
+- [code-infra] Expand renovate.json for react types (#45935) @Janpot
+- [code-infra] Make Argos upload script reusable (#45883) @Janpot
+- [code-infra] Disallow redundant window prefixes for globals (#45880) @Janpot
+- [code-infra] Remove type generation of modern build (#45912) @Janpot
+- [code-infra] Clean up bundle size checker (#45622) @Janpot
+- [code-infra] Fix `StrictMode` effects not being called twice in React 19 tests (#45812) @bernardobelchior
+- [code-infra] Convert `@mui/utils` to typescript (#45671) @Janpot
+- [docs-infra] Improve export into sandbox package.json (#46044) @oliviertassinari
+- [docs-infra] Update feedback Node.js to v22 (#46064) @oliviertassinari
+- [docs-infra] Normalize netlify.toml in org (b101d5c) @oliviertassinari
+- [docs-infra] Uniformize Vale between repositories (0f79796) @oliviertassinari
+- [docs-infra] Fix Vale no longer working (#46029) @oliviertassinari
+- [docs-infra] Remove demo styling switch (#45926) @Janpot
+- [docs-infra] StackBlitz WebContainer demos (#45924) @Janpot
+- [docs-infra] Fix feedback management (#45872) @alexfauquette
+- [test] Replace `playwright` with `@playwright/test` (#45998) @ZeeshanTamboli
+- Fix internal version duplication (#46051) @oliviertassinari
+- Avoid the need for `@mui/material/themeCssVarsAugmentation` (#46053) @Janpot
+- Add security label to dependabot PRs (0a5c027) @oliviertassinari
+- Remove unecessary versions (#46034) @oliviertassinari
+- Remove redundant overrides resolver (#45970) @romgrk
+- Fix duplicate branch reference (#45915) @oliviertassinari
+- Fix outdated <link rel="shortcut icon" (#45916) @oliviertassinari
+- Fix redirection chains (#45930) @oliviertassinari
+- Run pnpm docs:sync-team (beee09f) @oliviertassinari
+- Add `pkg.pr.new` publishing (#42984) @Aslemammad
+- Remove @mui/base from the master branch (#45857) @mnajdova
+
+All contributors of this release in alphabetical order: @alexfauquette, @andreachiera, @Aslemammad, @bernardobelchior, @CodeLeom, @crabsim, @Demianeen, @good-jinu, @Janpot, @joserodolfofreitas, @mnajdova, @Nayeem-XTREME, @oliviertassinari, @renovate[bot], @romgrk, @sai6855, @scyzoryck, @siriwatknp, @SuyashShukla0007, @yermartee, @ZeeshanTamboli
+
+## 7.0.2
+
+_Apr 9, 2025_
+
+A big thanks to the 12 contributors who made this release possible.
+
+### `@mui/material@7.0.2`
+
+- [Autocomplete] Add ability to render custom single value (#45387) @ZeeshanTamboli
+- [Autocomplete] Prevent shrink animation in controlled Autocomplete when initial `value` is provided (#45734) @imadx
+- [AvatarGroup] Fix `spacing` prop ignoring value `0` (#45799) @Kartik-Murthy
+- [Dialog] Deprecate composed classes (#45418) @sai6855
+
+### `@mui/material-nextjs@7.0.2`
+
+- Fix nonce issues (#45794) @Janpot
+- Add warnings to nextjs router integration (#45778) @Janpot
+
+### `@mui/styled-engine@7.0.2`
+
+- Added caching to `StyledEngineProvider` to improve performance for running tests with Jest (#45846) @siriwatknp
+
+### Core
+
+- [blog] Improve upvote video (0646444) @oliviertassinari
+- [code-infra] Remove webpack aliases (#45841) @Janpot
+- [code-infra] Remove .tsbuildinfo from build folder (#45727) @Janpot
+- [code-infra] Stabilize theme viewer screenshot tests (#45768) @Janpot
+- [code-infra] Remove modern bundles (#45808) @Janpot
+- Update buildTypes script to optionally remove css imports (#45835) @brijeshb42
+- Allow repo to be accepted as an argument for releaseTag (#45801) @brijeshb42
+- Update scripts to support base-ui (#45784) @brijeshb42
+- Sync scorecards.yml across codebase (4de5076) @oliviertassinari
+- Remove baseUrl and skipLibCheck (#45806) @Janpot
+- [docs-infra] Fix redirect styles pages (#45848) @siriwatknp
+- [docs-infra] Remove false-positive Vale rules (#45843) @oliviertassinari
+- [docs-infra] Make sure Next.js can find package.json through its aliases (#45840) @Janpot
+- [docs-infra] Fix Next.js brand name coverage (6915f8d) @oliviertassinari
+- [docs-infra] Fix layout shift between MIT and commercial pages (#45760) @oliviertassinari
+- [docs-infra] Non breaking space for ESM (#45758) @oliviertassinari
+- [support-infra] Remove dead 'workflow_call:' (#45736) @oliviertassinari
+- [utils] Support cleanup callbacks in useForkRef (#45621) @DiegoAndai
+
+### Docs
+
+- Fix pigment vite integration example (#44746) @brijeshb42
+- Update migration instructions and codemod references for deprecated APIs (#45793) @sai6855
+- Add TanStack Router routing example (#44930) @vetledv
+- Fix layout shifting in icons page (#45779) @sai6855
+- Fix migration instructions (#45762) @oliviertassinari
+- Fix wrong TypeScript support version (#45761) @oliviertassinari
+- Fix link to mui-joy/src/styles/components.d.ts (#45763) @oliviertassinari
+- Fix 301 link (ae94c40) @oliviertassinari
+- Fix 301 links (abd8f63) @oliviertassinari
+- Fix 301 redirection (c7658de) @oliviertassinari
+- [nextjs] Migrate from deprecated "legacyBehavior" prop (#44871) @oliviertassinari
+- [nextjs] Document CSP for Next.js Pages Router (#45798) @Grohden
+
+All contributors of this release in alphabetical order: @brijeshb42, @DiegoAndai, @Grohden, @imadx, @Janpot, @Kartik-Murthy, @oliviertassinari, @renovate[bot], @sai6855, @siriwatknp, @vetledv, @ZeeshanTamboli
+
+## 7.0.1
+
+<!-- generated comparing v7.0.0..master -->
+
+_Mar 28, 2025_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@7.0.1`
+
+- Export ThemeProviderProps (#45701) @aarongarciah
+- [Fab] Fix default variant text color when using CSS vars (#45714) @aarongarciah
+- Remove mention of v7 in deprecation messages (#45708) @DiegoAndai
+- [Popover] Allow `null` in `anchorEl` function return type (#45045) @eduter
+- Fix missing CSSProperties/MixinOptions types (#45706) @Janpot
+
+### `@mui/icons-material@7.0.1`
+
+- [code-infra] Fix icon-material type resolution under `moduleResolution: "node"` (#45704) @Janpot
+- Bring back individual icon dts (#45711) @Janpot
+
+### Core
+
+- Improve the release instructions (#45688) @mnajdova
+
+### Docs
+
+- Fix Masonry and Toolpad dark mode demos (#45721) @siriwatknp
+- Update v7 related copy (#45716) @aarongarciah
+- Avoid unwanted undefined in page title (#45718) @aarongarciah
+- Fix joy templates error (#45715) @siriwatknp
+- Rename GitHub icon import (#45709) @micttyoid
+- Fix Safari issue in dark mode (#45696) @mnajdova
+- Fix `Grid`, `GridLegacy`, `Stack`, `Badge`, `Select`, `Autocomplete` demos CSS variables (#45693) @DiegoAndai
+- Add "Material UI v7 is here" to the notifications (#45694) @DiegoAndai
+- Fix `Breadcrumbs`, `List`, `Divider`, and `Typography` dark mode demos (#45692) @siriwatknp
+- Fix Material Icons page in dark mode (#45691) @mnajdova
+
+All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @eduter, @Janpot, @micttyoid, @mnajdova, @siriwatknp
+
 ## 7.0.0
 
 <!-- generated comparing v7.0.0-rc.0..master -->

package/esm/nextCompatRouter.cjs

@@ -0,0 +1 @@
+module.exports = require('next/compat/router');

package/esm/nextCompatRouter.d.cts

@@ -0,0 +1,2 @@
+declare const _exports: typeof import("next/compat/router");
+export = _exports;

package/esm/v13-appRouter/appRouterV13.js

@@ -3,7 +3,8 @@
 import * as React from 'react';
 import createCache from '@emotion/cache';
 import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
-import { useServerInsertedHTML } from 'next/navigation';
+import { useServerInsertedHTML } from "./nextNavigation.cjs";
+import { useRouter as usePagesRouter } from "../nextCompatRouter.cjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
@@ -11,6 +12,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
  */
 export default function AppRouterCacheProvider(props) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = usePagesRouter();
+    if (router) {
+      console.error(['The App Router CacheProvider is not compatible with the Pages Router.', 'Please use the Pages Router CacheProvider from `@mui/material-ui-nextjs/vx-pagesRouter` instead.'].join('\n'));
+    }
+  }
   const {
     options,
     CacheProvider = DefaultCacheProvider,
@@ -26,7 +34,7 @@ export default function AppRouterCacheProvider(props) {
     let inserted = [];
     // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
+      if (options?.enableCssLayer && !args[1].styles.startsWith('@layer')) {
         args[1].styles = `@layer mui {${args[1].styles}}`;
       }
       const [selector, serialized] = args;

package/esm/v13-appRouter/nextNavigation.cjs

@@ -0,0 +1 @@
+module.exports = require('next/navigation');

package/esm/v13-appRouter/nextNavigation.d.cts

@@ -0,0 +1,2 @@
+declare const _exports: typeof import("next/navigation");
+export = _exports;

package/esm/v13-pagesRouter/createCache.d.ts

@@ -1 +1,4 @@
-export default function createEmotionCache(): import("@emotion/cache").EmotionCache;
+import createCache from '@emotion/cache';
+export default function createEmotionCache(options?: {
+  enableCssLayer?: boolean;
+} & Parameters<typeof createCache>[0]): import("@emotion/cache").EmotionCache;

package/esm/v13-pagesRouter/createCache.js

@@ -4,14 +4,30 @@ const isBrowser = typeof document !== 'undefined';
 // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
 // This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-export default function createEmotionCache() {
+export default function createEmotionCache(options) {
   let insertionPoint;
   if (isBrowser) {
     const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
-  return createCache({
+  const {
+    enableCssLayer,
+    ...rest
+  } = options ?? {};
+  const emotionCache = createCache({
     key: 'mui',
-    insertionPoint
+    insertionPoint,
+    ...rest
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      if (!args[1].styles.startsWith('@layer')) {
+        // avoid nested @layer
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }

package/esm/v13-pagesRouter/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./pagesRouterV13Document.js";
-export * from "./pagesRouterV13App.js";
+export * from "./pagesRouterV13App.js";
+export { default as createEmotionCache } from "./createCache.js";

package/esm/v13-pagesRouter/index.js

@@ -1,2 +1,3 @@
 export * from "./pagesRouterV13Document.js";
-export * from "./pagesRouterV13App.js";
+export * from "./pagesRouterV13App.js";
+export { default as createEmotionCache } from "./createCache.js";

package/esm/v13-pagesRouter/pagesRouterV13App.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
 import { CacheProvider } from '@emotion/react';
 import createEmotionCache from "./createCache.js";
+import { useRouter as usePagesRouter } from "../nextCompatRouter.cjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultEmotionCache = createEmotionCache();
 export function AppCacheProvider({
   emotionCache = defaultEmotionCache,
   children
 }) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = usePagesRouter();
+    if (!router) {
+      console.error(['The Pages router CacheProvider is not compatible with the App router.', 'Please use the App Router CacheProvider from `@mui/material-ui-nextjs/vx-appRouter` instead.'].join('n'));
+    }
+  }
   return /*#__PURE__*/_jsx(CacheProvider, {
     value: emotionCache,
     children: children

package/esm/v13-pagesRouter/pagesRouterV13Document.js

@@ -74,13 +74,22 @@ export async function documentGetInitialProps(ctx, options) {
       } = extractCriticalToChunks(initialProps.html);
       return {
         ...initialProps,
-        emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
-          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: style.css
+        emotionStyleTags: styles.map(style => {
+          if (!style.css.trim()) {
+            return null;
           }
-        }, style.key))
+          const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
+          return /*#__PURE__*/_jsx("style", {
+            // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
+            // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
+            "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: style.css
+            },
+            nonce: cache.nonce
+          }, style.key);
+        })
       };
     }
   }, ...(options?.plugins ?? [])])(ctx);

package/nextCompatRouter.cjs

@@ -0,0 +1 @@
+module.exports = require('next/compat/router');

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "7.0.0",
-  "private": false,
+  "version": "7.1.0",
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",
   "keywords": [
@@ -24,7 +23,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.10"
+    "@babel/runtime": "^7.27.1"
   },
   "peerDependencies": {
     "@emotion/cache": "^11.11.0",
@@ -64,10 +63,6 @@
       "import": {
         "types": "./esm/*/index.d.ts",
         "default": "./esm/*/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/*/index.d.ts",
-        "default": "./modern/*/index.js"
       }
     },
     "./v13-pagesRouter": {
@@ -78,11 +73,8 @@
       "import": {
         "types": "./esm/v13-pagesRouter/index.d.ts",
         "default": "./esm/v13-pagesRouter/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/v13-pagesRouter/index.d.ts",
-        "default": "./modern/v13-pagesRouter/index.js"
       }
     }
-  }
+  },
+  "private": false
 }

package/v13-appRouter/appRouterV13.js

@@ -10,7 +10,8 @@ exports.default = AppRouterCacheProvider;
 var React = _interopRequireWildcard(require("react"));
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 var _react2 = require("@emotion/react");
-var _navigation = require("next/navigation");
+var _nextNavigation = require("./nextNavigation.cjs");
+var _nextCompatRouter = require("../nextCompatRouter.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
@@ -18,6 +19,13 @@ var _jsxRuntime = require("react/jsx-runtime");
  * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
  */
 function AppRouterCacheProvider(props) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = (0, _nextCompatRouter.useRouter)();
+    if (router) {
+      console.error(['The App Router CacheProvider is not compatible with the Pages Router.', 'Please use the Pages Router CacheProvider from `@mui/material-ui-nextjs/vx-pagesRouter` instead.'].join('\n'));
+    }
+  }
   const {
     options,
     CacheProvider = _react2.CacheProvider,
@@ -33,7 +41,7 @@ function AppRouterCacheProvider(props) {
     let inserted = [];
     // Override the insert method to support streaming SSR with flush().
     cache.insert = (...args) => {
-      if (options?.enableCssLayer) {
+      if (options?.enableCssLayer && !args[1].styles.startsWith('@layer')) {
         args[1].styles = `@layer mui {${args[1].styles}}`;
       }
       const [selector, serialized] = args;
@@ -55,7 +63,7 @@ function AppRouterCacheProvider(props) {
       flush
     };
   });
-  (0, _navigation.useServerInsertedHTML)(() => {
+  (0, _nextNavigation.useServerInsertedHTML)(() => {
     const inserted = registry.flush();
     if (inserted.length === 0) {
       return null;

package/v13-appRouter/nextNavigation.cjs

@@ -0,0 +1 @@
+module.exports = require('next/navigation');

package/v13-pagesRouter/createCache.d.ts

@@ -1 +1,4 @@
-export default function createEmotionCache(): import("@emotion/cache").EmotionCache;
+import createCache from '@emotion/cache';
+export default function createEmotionCache(options?: {
+  enableCssLayer?: boolean;
+} & Parameters<typeof createCache>[0]): import("@emotion/cache").EmotionCache;

package/v13-pagesRouter/createCache.js

@@ -11,14 +11,30 @@ const isBrowser = typeof document !== 'undefined';
 // On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
 // This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-function createEmotionCache() {
+function createEmotionCache(options) {
   let insertionPoint;
   if (isBrowser) {
     const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
     insertionPoint = emotionInsertionPoint ?? undefined;
   }
-  return (0, _cache.default)({
+  const {
+    enableCssLayer,
+    ...rest
+  } = options ?? {};
+  const emotionCache = (0, _cache.default)({
     key: 'mui',
-    insertionPoint
+    insertionPoint,
+    ...rest
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      if (!args[1].styles.startsWith('@layer')) {
+        // avoid nested @layer
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }

package/v13-pagesRouter/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./pagesRouterV13Document.js";
-export * from "./pagesRouterV13App.js";
+export * from "./pagesRouterV13App.js";
+export { default as createEmotionCache } from "./createCache.js";

package/v13-pagesRouter/index.js

@@ -1,11 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  createEmotionCache: true
+};
+Object.defineProperty(exports, "createEmotionCache", {
+  enumerable: true,
+  get: function () {
+    return _createCache.default;
+  }
+});
 var _pagesRouterV13Document = require("./pagesRouterV13Document");
 Object.keys(_pagesRouterV13Document).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _pagesRouterV13Document[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +28,7 @@ Object.keys(_pagesRouterV13Document).forEach(function (key) {
 var _pagesRouterV13App = require("./pagesRouterV13App");
 Object.keys(_pagesRouterV13App).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _pagesRouterV13App[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -24,4 +36,5 @@ Object.keys(_pagesRouterV13App).forEach(function (key) {
       return _pagesRouterV13App[key];
     }
   });
-});
+});
+var _createCache = _interopRequireDefault(require("./createCache"));

package/v13-pagesRouter/pagesRouterV13App.js

@@ -9,12 +9,20 @@ exports.AppCacheProvider = AppCacheProvider;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _createCache = _interopRequireDefault(require("./createCache"));
+var _nextCompatRouter = require("../nextCompatRouter.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 const defaultEmotionCache = (0, _createCache.default)();
 function AppCacheProvider({
   emotionCache = defaultEmotionCache,
   children
 }) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = (0, _nextCompatRouter.useRouter)();
+    if (!router) {
+      console.error(['The Pages router CacheProvider is not compatible with the App router.', 'Please use the App Router CacheProvider from `@mui/material-ui-nextjs/vx-appRouter` instead.'].join('n'));
+    }
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
     value: emotionCache,
     children: children

package/v13-pagesRouter/pagesRouterV13Document.js

@@ -84,13 +84,22 @@ async function documentGetInitialProps(ctx, options) {
       } = extractCriticalToChunks(initialProps.html);
       return {
         ...initialProps,
-        emotionStyleTags: styles.map(style => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
-          "data-emotion": `${style.key} ${style.ids.join(' ')}`,
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: style.css
+        emotionStyleTags: styles.map(style => {
+          if (!style.css.trim()) {
+            return null;
           }
-        }, style.key))
+          const isLayerOrderRule = style.css.startsWith('@layer') && !style.css.match(/\{.*\}/);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+            // If the style is a layer order rule, prefix with the cache key to let Emotion hydrate this node.
+            // Otherwise, Emotion will hydrate only the non-global styles and they will override the layer order rule.
+            "data-emotion": `${isLayerOrderRule ? `${cache.key} ` : ''}${style.key} ${style.ids.join(' ')}`,
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: {
+              __html: style.css
+            },
+            nonce: cache.nonce
+          }, style.key);
+        })
       };
     }
   }, ...(options?.plugins ?? [])])(ctx);

package/modern/package.json

@@ -1 +0,0 @@
-{"type":"module","sideEffects":false}

package/modern/v13-appRouter/appRouterV13.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
-export type AppRouterCacheProviderProps = {
-  /**
-   * These are the options passed to createCache() from 'import createCache from "@emotion/cache"'.
-   */
-  options?: Partial<OptionsOfCreateCache> & {
-    /**
-     * If `true`, the generated styles are wrapped within `@layer mui`.
-     * This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind CSS, plain CSS etc.
-     */
-    enableCssLayer?: boolean;
-  };
-  /**
-   * By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"'.
-   */
-  CacheProvider?: React.ElementType<{
-    value: EmotionCache;
-  }>;
-  children: React.ReactNode;
-};
-/**
- * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
- * Without it, Emotion will generate a new <style> tag during SSR for every component.
- * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
- */
-export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps): React.JSX.Element;