@mui/material-nextjs 5.15.3 → 5.15.5

package/CHANGELOG.md

@@ -1,5 +1,188 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.5
+
+<!-- generated comparing v5.15.4..master -->
+
+_Jan 17, 2024_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- Base UI's CSS class prefix is now `base-` (#40205) @michaldudak
+- Bug fixes, and a lot of improvements to code and docs infra
+
+### `@mui/material@5.15.5`
+
+- &#8203;<!-- 42 -->[Accordion] Deprecate \*Props props and classes for v6 (#40418) @DiegoAndai
+- &#8203;<!-- 41 -->[Alert] Update TypeScript types to allow color override types to be added to `iconMapping` and `severity` props (#40551) @2metres
+- &#8203;<!-- 27 -->[Dialog] Remove deprecated onBackdropClick from Dialog tests (#40505) @sai6855
+- &#8203;<!-- 26 -->[Divider] Deprecate props and classes for v6 (#40563) @sai6855
+
+### `@mui/material-next@6.0.0-alpha.118`
+
+- &#8203;<!-- 36 -->[ButtonGroup] Apply MD3 style to `ButtonGroup` (#40124) @lhilgert9
+
+### `@mui/base@5.0.0-beta.32`
+
+#### Breaking changes
+
+- &#8203;<!-- 40 -->Change the CSS class prefix to `base-` (#40205) @michaldudak
+
+The class prefix of Base UI components have been changed from `Mui-` to `base-`. This only affects codebases that uses class names verbatim, i.e. not exposed by JS objects such as `buttonClasses`, but as plain strings or in CSS stylesheets (`.MuiButton.root`)
+
+To adapt your code to the new pattern:
+
+- replace all occurrences of the regex `.Mui([A-Z][A-Za-z]*)-` with `.base-$1-` (so `MuiButton-root` becomes `base-Button-root`, etc.),
+- replace all occurrences of the regex `.Mui-([a-z]*)` with `.base--$1` (so `Mui-disabled` becomes `base--disabled`, etc.).
+
+#### Changes
+
+- &#8203;<!-- 39 -->[Select] Fix screen-reader CSS to avoid body scrollbar (#40599) @brijeshb42
+- &#8203;<!-- 38 -->[Switch] Add border-box to demos (#40638) @zanivan
+
+### `@mui/joy@5.0.0-beta.23`
+
+- &#8203;<!-- 11 -->[ModalDialog] Fix ModalDialog layout prop override (#40512) @maakcode
+- &#8203;<!-- 10 -->[RadioGroup] Allow zero number as a value (#40344) @aacevski
+
+### `@mui/codemod@5.15.5`
+
+- &#8203;<!-- 31 -->Allow `json` files to be transformed (#40536) @ZeeshanTamboli
+
+### `@mui/lab@5.0.0-alpha.161`
+
+- &#8203;<!-- 09 -->Update `@mui/material` peer dependency version (#40528) @ZeeshanTamboli
+
+### `@mui/material-nextjs@5.15.5`
+
+- &#8203;<!-- 08 -->Fix release script (#40519) @petrovmiroslav
+- &#8203;<!-- 07 -->Support Nonces in the App Router Provider (#40269) @josh-feldman
+- &#8203;<!-- 06 -->Polish @mui/material-nextjs (#40473) @oliviertassinari
+
+### `@mui/system@5.15.5`
+
+- &#8203;<!-- 05 -->Fix import path for @mui/system in vite apps (#40490) @brijeshb42
+- &#8203;<!-- 02 -->Fix css vars generation and simplify the code (#40530) @siriwatknp
+- &#8203;<!-- 01 -->Identify zero runtime styled path (#40555) @brijeshb42
+
+### Docs
+
+- &#8203;<!-- 35 -->[joy-ui][Card] Fix text alignment in horizontal aligned card demo (#40562) @ZeeshanTamboli
+- &#8203;<!-- 25 -->Improve instructions about peer dependencies (#40621) @danilo-leal
+- &#8203;<!-- 24 -->Solve page description length @oliviertassinari
+- &#8203;<!-- 23 -->Fix MUI Treasury links (#40561) @siriwatknp
+- &#8203;<!-- 17 -->[material-ui] Update <ListItem button/> to ListItemButton in demos (#40564) @sai6855
+- &#8203;<!-- 16 -->[material-ui] Revise the Snackbar page (#39298) @danilo-leal
+- &#8203;<!-- 15 -->[material-ui] Sharpen Material 3 copy on demo pages (#40546) @samuelsycamore
+- &#8203;<!-- 14 -->[material-ui] Fix typo on Next.js integration guide (#40538) @zanivan
+- &#8203;<!-- 13 -->[material-ui][Snackbar] Remove unused `State` interface from Consecutive Snackbars demo (#40410)
+  @zinoroman
+- &#8203;<!-- 12 -->[website] Resolve broken links reported by `docs:link-check` (#40547) @samuelsycamore
+
+### Core
+
+- &#8203;<!-- 37 -->[blog] Fix 404 link to MUI Treasury @oliviertassinari
+- &#8203;<!-- 34 -->[code-infra] Add `run` command to deploy docs (#40513) @siriwatknp
+- &#8203;<!-- 32 -->[core] Update the lockfile (#40628) @michaldudak
+- &#8203;<!-- 31 -->[core] Remove dead code and follow standard @oliviertassinari
+- &#8203;<!-- 30 -->[core] Simplify server detection (#40471) @oliviertassinari
+- &#8203;<!-- 29 -->[core] Sync playwright cache between MUI X and Material UI (#40475) @oliviertassinari
+- &#8203;<!-- 28 -->[dependencies] Bump tough-cookie (#40437) @michaldudak
+- &#8203;<!-- 22 -->[docs-infra] Enforce brand name rules (#40525) @oliviertassinari
+- &#8203;<!-- 21 -->[docs-infra] Minimize ad layout shift on mobile (#40582) @oliviertassinari
+- &#8203;<!-- 20 -->[docs-infra] Improve API page deprecation info (#40440) @DiegoAndai
+- &#8203;<!-- 19 -->[docs-infra] Remove old tocs banners (#40537) @oliviertassinari
+- &#8203;<!-- 18 -->[docs-infra] Remove dead code aria-label sponsors (#40526) @oliviertassinari
+- &#8203;<!-- 04 -->[utils] Centralize clamp implementation in utils (#40267) @Kamino0
+- &#8203;<!-- 03 -->[website] Polish the Base UI page demos (#40504) @danilo-leal
+
+All contributors of this release in alphabetical order: @2metres, @aacevski, @brijeshb42, @danilo-leal, @DiegoAndai, @josh-feldman, @Kamino0, @lhilgert9, @maakcode, @michaldudak, @oliviertassinari, @petrovmiroslav, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli, @zinoroman
+
+## 5.15.4
+
+<!-- generated comparing v5.15.3..master -->
+
+_Jan 10, 2024_
+
+A big thanks to the 22 contributors who made this release possible. Here are some highlights:
+
+- ✨ Material UI's [ToggleButtonGroup](https://mui.com/material-ui/react-toggle-button/) now supports non-button element as a child (e.g., showing a Tooltip on a disabled ToggleButton) (#40220) @Methuselah96
+
+### `@mui/material@5.15.4`
+
+- [TextField][FormLabel][InputLabel][FormControl] Use exact children type to allow React children type augmentation (#38872) @nicegamer7
+- [Select] Add form submission regression test (#40176) @mj12albert
+- [ToggleButtonGroup] Support different elements under it (#40220) @Methuselah96
+- [ClickAwayListener] Fix export of types (#40485) @illume
+
+### `@mui/material-nextjs@5.15.4`
+
+- Improve build size issue (#40436) @siriwatknp
+
+### `@mui/icons-material@5.15.4`
+
+- Update the icons (#40365) @michaldudak
+
+### `@mui/system@5.15.4`
+
+- [zero] Move zero runtime related packages (#40426) @brijeshb42
+- Fix all use of styled(Box) (#40449) @oliviertassinari
+
+### `@mui/utils@5.15.4`
+
+- Fix `isPlainObject` to work across realm (#39981) @brijeshb42
+
+### `@mui/base@5.0.0-beta.31`
+
+- [base-ui][NumberInput] Remove inputId and inputRef types from NumberInput component (#40425) @sai6855
+
+### `@mui/joy@5.0.0-beta.22`
+
+- [Badge] Shouldn't crash when using custom size (#39986) @iamsaumya
+- [ToggleButtonGroup] Add `JoyToggleButtonGroup` to extendTheme's components type export (#40407) @RiceCrisp
+
+### Docs
+
+- [base-ui] Visual tweaks to the plain CSS theme stylesheet (#40487) @zanivan
+- [base-ui] Add tokens to plain CSS theme stylesheet (#40113) @zanivan
+- [base-ui] Update the overview page (#40412) @danilo-leal
+- [material-ui][Drawer] Resolve flickering when double-clicking on the backdrop to close it (#40343) @aacevski
+- [material-ui] Refactor form submission in FormDialog component (#40470) @sai6855
+- [material-ui] Replace recharts with MUI X charts on the Dashboard template (#40107) @alexfauquette
+- [material-ui] Revise the Alert demo page (#34892) @samuelsycamore
+- [material-ui] Revise the Accordion page (#40284) @anle9650
+- [material-ui] Add docs for complementary Card components (#40346) @anle9650
+- [material-ui] Add Material 3 components page (#40350) @DiegoAndai
+- Fix strange italic style @oliviertassinari
+- Fix references to ESLint @oliviertassinari
+- Fix 301 redirections @oliviertassinari
+- Right-to-left revision and addition to Joy UI (#39158) @danilo-leal
+
+### Core
+
+- [examples] Use material-nextjs integration package (#40199) @siriwatknp
+- [code-infra] Configure build dependencies in nx (#40482) @michaldudak
+- [code-infra] Don't require noreferrer on target link (#40447) @oliviertassinari
+- [code-infra] Use tsx instead of ts-node (#40428) @michaldudak
+- [code-infra] Add options to docs-api generation to support X code structure (#40111) @alexfauquette
+- [docs-infra] Add types for withDocsInfra (#40301) @oliviertassinari
+- [docs-infra] Fix anchor links in API pages (#40450) @oliviertassinari
+- [docs-infra] Fix API table full-width (#40476) @oliviertassinari
+- [docs-infra] Fix the copy button overlapping with the scrollbar (#40405) @danilo-leal
+- [docs-infra] Remove explicit `mui-x` dependency resolving (#40257) @LukasTy
+- [docs-infra] Update the outlined Demo container dark mode color (#40488) @danilo-leal
+- [core] Lock file maintenance (#34538) @renovate[bot]
+- [core] Remove duplicate devDependencies (#40438) @michaldudak
+- [core] Remove issue emoji @oliviertassinari
+- [core] Move prefetch at the core, will propagate to MUI X @oliviertassinari
+- [core] Change package manager to pnpm (#36287) @Janpot
+- [core][docs] Remove the "Understand MUI packages" page (#39835) @savalaram-redkar
+- [website] Evolve the Developer Advocate role (#40337) @oliviertassinari
+- [website] Fix default social card @oliviertassinari
+- [test] Restore the `t` command (#40430) @michaldudak
+
+All contributors of this release in alphabetical order: @aacevski, @alexfauquette, @anle9650, @brijeshb42, @danilo-leal, @DiegoAndai, @iamsaumya, @illume, @Janpot, @LukasTy, @Methuselah96, @michaldudak, @mj12albert, @nicegamer7, @oliviertassinari, @renovate[bot], @RiceCrisp, @sai6855, @samuelsycamore, @savalaram-redkar, @siriwatknp, @zanivan
+
 ## 5.15.3
 
 <!-- generated comparing v5.15.2..master -->
@@ -12480,7 +12663,7 @@ Here are some highlights ✨:
 
 - 👩‍🎨 A first iteration on the new styling solution.
 
-  You can find a [new version](https://mui.com/components/slider-styled/) of the slider in the lab powered by [emotion](https://emotion.sh/).
+  You can find a [new version](https://mui.com/components/slider-styled/) of the slider in the lab powered by [Emotion](https://emotion.sh/).
 
   In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check [this CodeSandbox](https://codesandbox.io/p/sandbox/sliderstyled-with-styled-components-forked-olc27?file=/package.json) for a demo. It relies on aliases to prevent any bundle size overhead.
 

package/legacy/v13-appRouter/appRouterV13.js

@@ -3,8 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
 import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import { useServerInsertedHTML } from 'next/navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function AppRouterCacheProvider(props) {
@@ -77,6 +77,7 @@ export default function AppRouterCacheProvider(props) {
         var name = _ref2.name,
           style = _ref2.style;
         return /*#__PURE__*/_jsx("style", {
+          nonce: options == null ? void 0 : options.nonce,
           "data-emotion": "".concat(registry.cache.key, "-global ").concat(name)
           // eslint-disable-next-line react/no-danger
           ,
@@ -85,6 +86,7 @@ export default function AppRouterCacheProvider(props) {
           }
         }, name);
       }), styles && /*#__PURE__*/_jsx("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/legacy/v13-appRouter/index.js

@@ -1,4 +1,2 @@
-'use client';
-
 export { default as AppRouterCacheProvider } from './appRouterV13';
 export * from './appRouterV13';

package/legacy/v13-pagesRouter/createCache.js

@@ -0,0 +1,17 @@
+import createCache from '@emotion/cache';
+var 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() {
+  var insertionPoint;
+  if (isBrowser) {
+    var emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
+  }
+  return createCache({
+    key: 'mui',
+    insertionPoint: insertionPoint
+  });
+}

package/legacy/v13-pagesRouter/index.js

@@ -1 +1,2 @@
-export * from './pagesRouterV13';
+export * from './pagesRouterV13Document';
+export * from './pagesRouterV13App';

package/legacy/v13-pagesRouter/pagesRouterV13App.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createEmotionCache from './createCache';
+import { jsx as _jsx } from "react/jsx-runtime";
+var defaultEmotionCache = createEmotionCache();
+export function AppCacheProvider(_ref) {
+  var _ref$emotionCache = _ref.emotionCache,
+    emotionCache = _ref$emotionCache === void 0 ? defaultEmotionCache : _ref$emotionCache,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: emotionCache,
+    children: children
+  });
+}

package/legacy/v13-pagesRouter/{pagesRouterV13.js → pagesRouterV13Document.js}

@@ -4,38 +4,11 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 var _meta;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
 import createEmotionServer from '@emotion/server/create-instance';
 import Document from 'next/document';
+import createEmotionCache from './createCache';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var 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() {
-  var insertionPoint;
-  if (isBrowser) {
-    var emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
-    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
-  }
-  return createCache({
-    key: 'mui',
-    insertionPoint: insertionPoint
-  });
-}
-var defaultEmotionCache = createEmotionCache();
-export function AppCacheProvider(_ref) {
-  var _ref$emotionCache = _ref.emotionCache,
-    emotionCache = _ref$emotionCache === void 0 ? defaultEmotionCache : _ref$emotionCache,
-    children = _ref.children;
-  return /*#__PURE__*/_jsx(CacheProvider, {
-    value: emotionCache,
-    children: children
-  });
-}
 /**
  * A utility to compose multiple `getInitialProps` functions.
  */
@@ -62,7 +35,7 @@ export function createGetInitialProps(plugins) {
             initialProps = _context2.sent;
             _context2.next = 7;
             return plugins.reduce( /*#__PURE__*/function () {
-              var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result, plugin) {
+              var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result, plugin) {
                 return _regeneratorRuntime.wrap(function _callee$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -79,7 +52,7 @@ export function createGetInitialProps(plugins) {
                 }, _callee);
               }));
               return function (_x2, _x3) {
-                return _ref2.apply(this, arguments);
+                return _ref.apply(this, arguments);
               };
             }(), Promise.resolve(initialProps));
           case 7:
@@ -97,8 +70,8 @@ export function createGetInitialProps(plugins) {
     return getInitialProps;
   }();
 }
-export function DocumentHeadTags(_ref3) {
-  var emotionStyleTags = _ref3.emotionStyleTags;
+export function DocumentHeadTags(_ref2) {
+  var emotionStyleTags = _ref2.emotionStyleTags;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
       name: "emotion-insertion-point",

package/legacy/v14-appRouter/index.js

@@ -1,3 +1 @@
-'use client';
-
 export * from '../v13-appRouter';

package/modern/v13-appRouter/appRouterV13.js

@@ -3,8 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
 import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import { useServerInsertedHTML } from 'next/navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function AppRouterCacheProvider(props) {
@@ -73,6 +73,7 @@ export default function AppRouterCacheProvider(props) {
         name,
         style
       }) => /*#__PURE__*/_jsx("style", {
+        nonce: options?.nonce,
         "data-emotion": `${registry.cache.key}-global ${name}`
         // eslint-disable-next-line react/no-danger
         ,
@@ -80,6 +81,7 @@ export default function AppRouterCacheProvider(props) {
           __html: style
         }
       }, name)), styles && /*#__PURE__*/_jsx("style", {
+        nonce: options?.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/modern/v13-appRouter/index.js

@@ -1,4 +1,2 @@
-'use client';
-
 export { default as AppRouterCacheProvider } from './appRouterV13';
 export * from './appRouterV13';

package/modern/v13-pagesRouter/createCache.js

@@ -0,0 +1,17 @@
+import createCache from '@emotion/cache';
+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() {
+  let insertionPoint;
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+  return createCache({
+    key: 'mui',
+    insertionPoint
+  });
+}

package/modern/v13-pagesRouter/index.js

@@ -1 +1,2 @@
-export * from './pagesRouterV13';
+export * from './pagesRouterV13Document';
+export * from './pagesRouterV13App';

package/modern/v13-pagesRouter/pagesRouterV13App.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createEmotionCache from './createCache';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultEmotionCache = createEmotionCache();
+export function AppCacheProvider({
+  emotionCache = defaultEmotionCache,
+  children
+}) {
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: emotionCache,
+    children: children
+  });
+}

package/modern/v13-pagesRouter/{pagesRouterV13.js → pagesRouterV13Document.js}

@@ -1,38 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _meta;
 import * as React from 'react';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
 import createEmotionServer from '@emotion/server/create-instance';
 import Document from 'next/document';
+import createEmotionCache from './createCache';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-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() {
-  let insertionPoint;
-  if (isBrowser) {
-    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
-    insertionPoint = emotionInsertionPoint ?? undefined;
-  }
-  return createCache({
-    key: 'mui',
-    insertionPoint
-  });
-}
-const defaultEmotionCache = createEmotionCache();
-export function AppCacheProvider({
-  emotionCache = defaultEmotionCache,
-  children
-}) {
-  return /*#__PURE__*/_jsx(CacheProvider, {
-    value: emotionCache,
-    children: children
-  });
-}
 /**
  * A utility to compose multiple `getInitialProps` functions.
  */

package/modern/v14-appRouter/index.js

@@ -1,3 +1 @@
-'use client';
-
 export * from '../v13-appRouter';

package/node/v13-appRouter/appRouterV13.js

@@ -9,8 +9,8 @@ exports.default = AppRouterCacheProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _cache = _interopRequireDefault(require("@emotion/cache"));
-var _navigation = require("next/navigation");
 var _react2 = require("@emotion/react");
+var _navigation = require("next/navigation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -81,6 +81,7 @@ function AppRouterCacheProvider(props) {
         name,
         style
       }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": `${registry.cache.key}-global ${name}`
         // eslint-disable-next-line react/no-danger
         ,
@@ -88,6 +89,7 @@ function AppRouterCacheProvider(props) {
           __html: style
         }
       }, name)), styles && /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/node/v13-appRouter/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/node/v13-pagesRouter/createCache.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createEmotionCache;
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+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() {
+  let insertionPoint;
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
+  }
+  return (0, _cache.default)({
+    key: 'mui',
+    insertionPoint
+  });
+}

package/node/v13-pagesRouter/index.js

@@ -3,14 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _pagesRouterV = require("./pagesRouterV13");
-Object.keys(_pagesRouterV).forEach(function (key) {
+var _pagesRouterV13Document = require("./pagesRouterV13Document");
+Object.keys(_pagesRouterV13Document).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _pagesRouterV[key]) return;
+  if (key in exports && exports[key] === _pagesRouterV13Document[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _pagesRouterV[key];
+      return _pagesRouterV13Document[key];
+    }
+  });
+});
+var _pagesRouterV13App = require("./pagesRouterV13App");
+Object.keys(_pagesRouterV13App).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _pagesRouterV13App[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pagesRouterV13App[key];
     }
   });
 });

package/node/v13-pagesRouter/pagesRouterV13App.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppCacheProvider = AppCacheProvider;
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _createCache = _interopRequireDefault(require("./createCache"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const defaultEmotionCache = (0, _createCache.default)();
+function AppCacheProvider({
+  emotionCache = defaultEmotionCache,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
+    value: emotionCache,
+    children: children
+  });
+}

package/node/v13-pagesRouter/{pagesRouterV13.js → pagesRouterV13Document.js}

@@ -4,46 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AppCacheProvider = AppCacheProvider;
 exports.DocumentHeadTags = DocumentHeadTags;
 exports.createGetInitialProps = createGetInitialProps;
 exports.documentGetInitialProps = documentGetInitialProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _cache = _interopRequireDefault(require("@emotion/cache"));
 var _createInstance = _interopRequireDefault(require("@emotion/server/create-instance"));
 var _document = _interopRequireDefault(require("next/document"));
+var _createCache = _interopRequireDefault(require("./createCache"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _meta;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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() {
-  let insertionPoint;
-  if (isBrowser) {
-    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
-    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
-  }
-  return (0, _cache.default)({
-    key: 'mui',
-    insertionPoint
-  });
-}
-const defaultEmotionCache = createEmotionCache();
-function AppCacheProvider({
-  emotionCache = defaultEmotionCache,
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
-    value: emotionCache,
-    children: children
-  });
-}
 /**
  * A utility to compose multiple `getInitialProps` functions.
  */
@@ -97,7 +69,7 @@ async function documentGetInitialProps(ctx, options) {
 
   // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
   // However, be aware that it can have global side effects.
-  const cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : createEmotionCache();
+  const cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : (0, _createCache.default)();
   // The createEmotionServer has to be called directly after the cache creation due to the side effect of cache.compat = true,
   // otherwise the <style> tag will not come with the HTML string from the server.
   const {

package/node/v14-appRouter/index.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "5.15.3",
+  "version": "5.15.5",
   "private": false,
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",
@@ -44,7 +44,8 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "build"
   },
   "engines": {
     "node": ">=12.0.0"

package/v13-appRouter/appRouterV13.d.ts

@@ -1,15 +1,19 @@
 import * as React from 'react';
-import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
+import { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
 export type AppRouterCacheProviderProps = {
-    /** These are the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+    /**
+     * 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, plain CSS etc.
+         * 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"' */
+    /**
+     * By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"'.
+     */
     CacheProvider?: (props: {
         value: EmotionCache;
         children: React.ReactNode;

package/v13-appRouter/appRouterV13.js

@@ -3,8 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import createCache from '@emotion/cache';
-import { useServerInsertedHTML } from 'next/navigation';
 import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import { useServerInsertedHTML } from 'next/navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function AppRouterCacheProvider(props) {
@@ -74,6 +74,7 @@ export default function AppRouterCacheProvider(props) {
         name,
         style
       }) => /*#__PURE__*/_jsx("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": `${registry.cache.key}-global ${name}`
         // eslint-disable-next-line react/no-danger
         ,
@@ -81,6 +82,7 @@ export default function AppRouterCacheProvider(props) {
           __html: style
         }
       }, name)), styles && /*#__PURE__*/_jsx("style", {
+        nonce: options == null ? void 0 : options.nonce,
         "data-emotion": dataEmotionAttribute
         // eslint-disable-next-line react/no-danger
         ,

package/v13-appRouter/index.js

@@ -1,4 +1,2 @@
-'use client';
-
 export { default as AppRouterCacheProvider } from './appRouterV13';
 export * from './appRouterV13';

package/v13-pagesRouter/createCache.d.ts

@@ -0,0 +1 @@
+export default function createEmotionCache(): import("@emotion/cache").EmotionCache;

package/v13-pagesRouter/createCache.js

@@ -0,0 +1,17 @@
+import createCache from '@emotion/cache';
+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() {
+  let insertionPoint;
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
+  }
+  return createCache({
+    key: 'mui',
+    insertionPoint
+  });
+}

package/v13-pagesRouter/index.d.ts

@@ -1 +1,2 @@
-export * from './pagesRouterV13';
+export * from './pagesRouterV13Document';
+export * from './pagesRouterV13App';

package/v13-pagesRouter/index.js

@@ -1 +1,2 @@
-export * from './pagesRouterV13';
+export * from './pagesRouterV13Document';
+export * from './pagesRouterV13App';

package/v13-pagesRouter/pagesRouterV13App.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { EmotionCache } from '@emotion/react';
+export interface EmotionCacheProviderProps {
+    emotionCache?: EmotionCache;
+}
+export declare function AppCacheProvider({ emotionCache, children, }: React.PropsWithChildren<EmotionCacheProviderProps>): React.JSX.Element;

package/v13-pagesRouter/pagesRouterV13App.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createEmotionCache from './createCache';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultEmotionCache = createEmotionCache();
+export function AppCacheProvider({
+  emotionCache = defaultEmotionCache,
+  children
+}) {
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: emotionCache,
+    children: children
+  });
+}

package/v13-pagesRouter/{pagesRouterV13.d.ts → pagesRouterV13Document.d.ts}

@@ -2,10 +2,6 @@ import * as React from 'react';
 import { AppType } from 'next/app';
 import { EmotionCache } from '@emotion/react';
 import { DocumentContext, DocumentInitialProps } from 'next/document';
-interface EmotionCacheProviderProps {
-    emotionCache?: EmotionCache;
-}
-export declare function AppCacheProvider({ emotionCache, children, }: React.PropsWithChildren<EmotionCacheProviderProps>): React.JSX.Element;
 interface Plugin {
     enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType>>) => (props: any) => JSX.Element;
     resolveProps: (initialProps: DocumentInitialProps) => Promise<DocumentInitialProps>;

package/v13-pagesRouter/{pagesRouterV13.js → pagesRouterV13Document.js}

@@ -1,38 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _meta;
 import * as React from 'react';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
 import createEmotionServer from '@emotion/server/create-instance';
 import Document from 'next/document';
+import createEmotionCache from './createCache';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-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() {
-  let insertionPoint;
-  if (isBrowser) {
-    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
-    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
-  }
-  return createCache({
-    key: 'mui',
-    insertionPoint
-  });
-}
-const defaultEmotionCache = createEmotionCache();
-export function AppCacheProvider({
-  emotionCache = defaultEmotionCache,
-  children
-}) {
-  return /*#__PURE__*/_jsx(CacheProvider, {
-    value: emotionCache,
-    children: children
-  });
-}
 /**
  * A utility to compose multiple `getInitialProps` functions.
  */

package/v14-appRouter/index.js

@@ -1,3 +1 @@
-'use client';
-
 export * from '../v13-appRouter';