@mui/docs 9.0.0-alpha.3 → 9.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,159 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-alpha.4
+
+<!-- generated comparing v9.0.0-alpha.3..master -->
+
+_Mar 20, 2026_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/material@9.0.0-alpha.4`
+
+#### Breaking Changes
+
+- [accordion] Remove deprecated props (#47963) @silviuaavram
+  - `TransitionComponent`
+  - `TransitionProps`
+- [accordionsummary] Remove deprecated CSS class (#48006) @silviuaavram
+  - `contentGutters`
+- [alert] Remove deprecated CSS classes (#48011) @silviuaavram
+  - `standardSuccess`
+  - `standardInfo`
+  - `standardWarning`
+  - `standardError`
+  - `outlinedSuccess`
+  - `outlinedInfo`
+  - `outlinedWarning`
+  - `outlinedError`
+  - `filledSuccess`
+  - `filledInfo`
+  - `filledWarning`
+  - `filledError`
+- [alert] Remove deprecated props (#47965) @silviuaavram
+  - `components`
+  - `componentsProps`
+- [autocomplete] Remove deprecated props (#47864) @ZeeshanTamboli
+  - `ChipProps`
+  - `componentsProps`
+  - `ListboxComponent`
+  - `ListboxProps`
+  - `PaperComponent`
+  - `PopperComponent`
+  - `renderTags`
+- [avatar] Remove deprecated props (#47966) @silviuaavram
+  - `imgProps`
+- [avatargroup] Remove deprecated props (#47968) @silviuaavram
+  - `componentsProps`
+- [backdrop] Remove deprecated props (#47991) @silviuaavram
+  - `components`
+  - `componentsProps`
+  - `TransitionComponent`
+- [badge] Remove deprecated props (#47993) @silviuaavram
+  - `components`
+  - `componentsProps`
+- [button] Remove deprecated CSS classes (#48012) @silviuaavram
+  - Color variant classes: `textInherit`, `outlinedPrimary`, `containedSecondary`, etc.
+  - Size classes: `textSizeSmall`, `iconSizeMedium`, etc.
+- [circularprogress] Remove deprecated CSS classes (#48014) @silviuaavram
+  - `circleDeterminate`
+  - `circleIndeterminate`
+- [divider] Remove deprecated prop (#48013) @atharva3333
+  - `light`
+- [formcontrollabel] Remove deprecated props (#48032) @atharva3333
+  - `componentsProps`
+- [menu] Remove deprecated props (#48021) @siriwatknp
+  - `MenuListProps`
+  - `PaperProps`
+  - `TransitionProps`
+- [mobilestepper] Remove deprecated props (#48041) @siriwatknp
+  - `LinearProgressProps`
+- [popover] Remove deprecated props (#48021) @siriwatknp
+  - `BackdropComponent`
+  - `BackdropProps`
+  - `PaperProps`
+  - `TransitionComponent`
+  - `TransitionProps`
+- [popper] Remove deprecated props (#48020) @siriwatknp
+  - `components`
+  - `componentsProps`
+- [select] Remove deprecated props passed via `MenuProps` (#48021) @siriwatknp
+  - `MenuListProps`
+  - `PaperProps`
+  - `TransitionProps`
+- [slider] Remove deprecated props (#47996) @siriwatknp
+  - `components`
+  - `componentsProps`
+- [speeddial] Remove deprecated props (#47998) @siriwatknp
+  - `TransitionComponent`
+  - `TransitionProps`
+- [speeddialaction] Remove deprecated props (#47998) @siriwatknp
+  - `FabProps`
+  - `tooltipTitle`
+  - `tooltipPlacement`
+  - `tooltipOpen`
+  - `TooltipClasses`
+- [tabs] Remove deprecated props (#48017) @siriwatknp
+  - `ScrollButtonComponent`
+  - `TabIndicatorProps`
+  - `TabScrollButtonProps`
+  - `slots.StartScrollButtonIcon`
+  - `slots.EndScrollButtonIcon`
+- [textfield] Remove deprecated props (#47878) @ZeeshanTamboli
+  - `InputProps`
+  - `inputProps`
+  - `SelectProps`
+  - `InputLabelProps`
+  - `FormHelperTextProps`
+- [tooltip] Remove deprecated props (#47988) @siriwatknp
+  - `components`
+  - `componentsProps`
+  - `PopperComponent`
+  - `PopperProps`
+  - `TransitionComponent`
+  - `TransitionProps`
+- [typography] Remove deprecated prop (#47986) @siriwatknp
+  - `paragraph`
+- [buttonbase] Key handlers should not run on a disabled non-native button (#48003) @mj12albert
+- [tablepagination] Format pagination numbers according to locale (#47803) @siriwatknp
+- [textfield] Use non-native label for `<TextField select/>` (#47958) @mj12albert
+
+Check out the [v9 upgrade guide](https://mui.com/material-ui/migration/upgrade-to-v9/).
+
+#### Changes
+
+- [autocomplete] Optimize selected option lookup (#47953) @anchmelev
+- [buttonbase] Fix native button detection (#47985) @mj12albert
+- [inputbase] Fix test using removed InputProps on TextField (#48000) @siriwatknp
+- [popper] Add missing classes export (#48031) @mj12albert
+- [select] Fix focus visible always set on menu item (#47912) @silviuaavram
+- [slider] Fix focus visible styles incorrectly applied by pointer (#47894) @mj12albert
+- [slider] Accept readonly array for the value prop (#47936) @pcorpet
+
+### `@mui/codemod@9.0.0-alpha.4`
+
+- [codemod] Add slot key rename to `tabs-props` codemod and add to README (#48035) @siriwatknp
+- [codemod] Add card-header-props migration guide (#48005) @siriwatknp
+
+### Docs
+
+- [blog] Lowercase 2026-MUI-X-price-changes blog post URL (#47871) @Janpot
+- [docs] Wide docs layout (#47950) @noraleonte
+- [docs] Mention the list of props removed in upgrade guide (#48010) @silviuaavram
+- [docs] Update Autocomplete deprecated props removal migration guide docs (#47990) @ZeeshanTamboli
+- [docs-infra] Extract shared App component from \_app into @mui/docs (#47933) @brijeshb42
+- [docs-infra] Expose global theme object (#47964) @Janpot
+- [docs][system] Update `styled` API docs for easier understanding (#47957) @olivier-lxo
+
+### Core
+
+- [code-infra] Add pkg-pr-new as dev dependency (#47992) @Janpot
+- [code-infra] Remove CI coverage collection and upload to Codecov (#47930) @Janpot
+- [core] Migrate to ESLint 10 (#47872) @brijeshb42
+- [core] Remove GridLegacy component (#47956) @siriwatknp
+
+All contributors of this release in alphabetical order: @anchmelev, @atharva3333, @brijeshb42, @Janpot, @mj12albert, @noraleonte, @olivier-lxo, @pcorpet, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
 ## 9.0.0-alpha.3
 
 <!-- generated comparing v9.0.0-alpha.2..master -->

package/DemoContext/DemoContext.d.ts

@@ -19,7 +19,7 @@ export interface SandboxConfig {
    * Generates the root index.js/tsx content for CodeSandbox/StackBlitz.
    * Receives codeVariant ('TS' | 'JS') for type assertion.
    */
-  getRootIndex: (codeVariant: CodeVariant) => string;
+  getRootIndex?: (codeVariant: CodeVariant) => string;
   /**
    * Primary npm package for this product, used in sandbox generation.
    * e.g., "@mui/material", "@mui/joy", "@mui/x-data-grid"

package/DocsApp/DocsApp.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { AdConfig } from "../Ad/index.js";
+import type { DemoContextValue } from "../DemoContext/index.js";
+import type { DocsConfig } from "../DocsProvider/index.js";
+import type { MuiPageContext } from "../PageContext/index.js";
+import type { Translations } from "../i18n/index.js";
+import createEmotionCache from "./createEmotionCache.js";
+export interface DocsAppProps {
+  /**
+   * The Next.js page component.
+   */
+  Component: React.ComponentType<any> & {
+    getLayout?: (page: React.ReactElement) => React.ReactNode;
+  };
+  /**
+   * The Emotion cache for CSS-in-JS. Falls back to a client-side cache.
+   */
+  emotionCache?: ReturnType<typeof createEmotionCache>;
+  /**
+   * Page props from Next.js, including userLanguage and translations.
+   */
+  pageProps: {
+    userLanguage: string;
+    translations: Translations;
+    [key: string]: unknown;
+  };
+  /**
+   * Docs configuration object (from docs/config.ts)
+   */
+  docsConfig: DocsConfig;
+  /**
+   * Path to the service worker file, e.g. '/sw.js'
+   */
+  serviceWorkerPath: string;
+  /**
+   * The currently active page object
+   */
+  activePage: MuiPageContext['activePage'];
+  /**
+   * The parent pages of the active page
+   */
+  activePageParents: MuiPageContext['activePageParents'];
+  /**
+   * List of all pages for the product
+   */
+  pageList: MuiPageContext['pages'];
+  /**
+   * Product metadata and branding info
+   */
+  productIdentifier: MuiPageContext['productIdentifier'];
+  /**
+   * Product identifier string (e.g. 'material-ui')
+   */
+  productId: MuiPageContext['productId'];
+  /**
+   * Product category identifier string (e.g. 'core')
+   */
+  productCategoryId: MuiPageContext['productCategoryId'];
+  /**
+   * Display name for the product (e.g. 'Material UI')
+   */
+  demoDisplayName: DemoContextValue['productDisplayName'];
+  /**
+   * CodeSandbox configuration for demos
+   */
+  csbConfig: DemoContextValue['csb'];
+  /**
+   * Optional ad configuration
+   */
+  adConfig?: Partial<AdConfig>;
+  /**
+   * Optional wrapper component for theming
+   */
+  ThemeWrapper?: React.ComponentType<{
+    children: React.ReactNode;
+  }>;
+}
+declare function DocsApp(props: DocsAppProps): import("react/jsx-runtime").JSX.Element;
+export { DocsApp };

package/DocsApp/DocsApp.js

@@ -0,0 +1,105 @@
+var _meta, _GoogleAnalytics;
+import NextHead from 'next/head';
+import * as React from 'react';
+import { CodeCopyProvider } from "../CodeCopy/index.js";
+import DemoContext from "../DemoContext/index.js";
+import { DocsProvider } from "../DocsProvider/index.js";
+import PageContext from "../PageContext/index.js";
+import { ThemeProvider } from "../ThemeContext/index.js";
+import { CodeStylingProvider } from "../codeStyling/index.js";
+import { CodeVariantProvider } from "../codeVariant/index.js";
+import { AnalyticsProvider } from "./AnalyticsProvider.js";
+import GoogleAnalytics from "./GoogleAnalytics.js";
+import DocsStyledEngineProvider from "./StyledEngineProvider.js";
+import createEmotionCache from "./createEmotionCache.js";
+import { loadDependencies } from "./loadDependencies.js";
+import { registerServiceWorker } from "./serviceWorker.js";
+
+// Client-side cache, shared for the whole session of the user in the browser.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const clientSideEmotionCache = createEmotionCache();
+function DocsApp(props) {
+  const {
+    Component,
+    emotionCache = clientSideEmotionCache,
+    pageProps,
+    docsConfig,
+    serviceWorkerPath,
+    activePage,
+    activePageParents,
+    pageList,
+    productIdentifier,
+    productId,
+    productCategoryId,
+    demoDisplayName,
+    csbConfig,
+    adConfig,
+    ThemeWrapper = ThemeProvider
+  } = props;
+  const pageContextValue = React.useMemo(() => ({
+    activePage,
+    activePageParents,
+    pages: pageList,
+    productIdentifier,
+    productId,
+    productCategoryId
+  }), [activePage, activePageParents, pageList, productIdentifier, productId, productCategoryId]);
+  const demoContextValue = React.useMemo(() => ({
+    productDisplayName: demoDisplayName,
+    csb: csbConfig
+  }), [demoDisplayName, csbConfig]);
+  const getLayout = Component.getLayout ?? (page => page);
+  React.useEffect(() => {
+    loadDependencies();
+    registerServiceWorker(serviceWorkerPath);
+
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles) {
+      jssStyles.parentElement.removeChild(jssStyles);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(NextHead, {
+      children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
+        name: "viewport",
+        content: "initial-scale=1, width=device-width"
+      })), /*#__PURE__*/_jsx("meta", {
+        name: "mui:productId",
+        content: productId
+      }), /*#__PURE__*/_jsx("meta", {
+        name: "mui:productCategoryId",
+        content: productCategoryId
+      })]
+    }), /*#__PURE__*/_jsx(DocsProvider, {
+      config: docsConfig,
+      adConfig: adConfig,
+      defaultUserLanguage: pageProps.userLanguage,
+      translations: pageProps.translations,
+      children: /*#__PURE__*/_jsx(CodeCopyProvider, {
+        children: /*#__PURE__*/_jsx(CodeStylingProvider, {
+          children: /*#__PURE__*/_jsx(CodeVariantProvider, {
+            children: /*#__PURE__*/_jsx(PageContext.Provider, {
+              value: pageContextValue,
+              children: /*#__PURE__*/_jsx(DemoContext.Provider, {
+                value: demoContextValue,
+                children: /*#__PURE__*/_jsx(ThemeWrapper, {
+                  children: /*#__PURE__*/_jsx(DocsStyledEngineProvider, {
+                    cacheLtr: emotionCache,
+                    children: /*#__PURE__*/_jsxs(AnalyticsProvider, {
+                      children: [getLayout(/*#__PURE__*/_jsx(Component, {
+                        ...pageProps
+                      })), _GoogleAnalytics || (_GoogleAnalytics = /*#__PURE__*/_jsx(GoogleAnalytics, {}))]
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })]
+  });
+}
+export { DocsApp };

package/{GoogleAnalytics → DocsApp}/GoogleAnalytics.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useRouter } from 'next/router';
-import { useNoSsrCodeVariant } from '@mui/docs/codeVariant';
-import { useUserLanguage } from '@mui/docs/i18n';
-import { pathnameToLanguage } from '@mui/docs/helpers';
-import { ThemeOptionsContext } from '@mui/docs/ThemeContext';
+import { useNoSsrCodeVariant } from "../codeVariant/index.js";
+import { useUserLanguage } from "../i18n/index.js";
+import { pathnameToLanguage } from "../helpers/index.js";
+import { ThemeOptionsContext } from "../ThemeContext/index.js";
 
 // So we can write code like:
 //

package/DocsApp/StyledEngineProvider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
+type StyledEngineProviderProps = {
+  cacheLtr: ReturnType<typeof createCache>;
+  children: React.ReactNode;
+};
+export default function StyledEngineProvider(props: StyledEngineProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/{StyledEngineProvider → DocsApp}/StyledEngineProvider.js

@@ -1,6 +1,5 @@
 var _GlobalStyles;
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { StyleSheetManager } from 'styled-components';
 import { CacheProvider } from '@emotion/react';
 import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
@@ -9,9 +8,8 @@ import rtlPlugin from '@mui/stylis-plugin-rtl';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { ThemeOptionsContext } from "../ThemeContext/index.js";
 import globalSelector from "../globalSelector/index.js";
-
-// Cache for the rtl version of the styles
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Cache for the rtl version of the styles
 const cacheRtl = createCache({
   key: 'rtl',
   prepend: true,
@@ -37,8 +35,4 @@ export default function StyledEngineProvider(props) {
       })), children]
     })
   });
-}
-process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
-  cacheLtr: PropTypes.object.isRequired,
-  children: PropTypes.node
-} : void 0;
+}

package/DocsApp/consoleBanner.d.ts

@@ -0,0 +1 @@
+export declare function printConsoleBanner(): void;

package/DocsApp/consoleBanner.js

@@ -0,0 +1,19 @@
+import { getTheme } from "../branding/index.js";
+// eslint-disable-next-line import/prefer-default-export
+export function printConsoleBanner() {
+  if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
+    window.theme = getTheme('ltr');
+    // eslint-disable-next-line no-console
+    console.log(`%c
+
+███╗   ███╗ ██╗   ██╗ ██████╗
+████╗ ████║ ██║   ██║   ██╔═╝
+██╔████╔██║ ██║   ██║   ██║
+██║╚██╔╝██║ ██║   ██║   ██║
+██║ ╚═╝ ██║ ╚██████╔╝ ██████╗
+╚═╝     ╚═╝  ╚═════╝  ╚═════╝
+
+Tip: you can access the documentation \`theme\` object directly in the console.
+`, 'font-family:monospace;color:#1976d2;font-size:12px;');
+  }
+}

package/DocsApp/createGetInitialProps.d.ts

@@ -0,0 +1,30 @@
+import type { RequireContext } from "../i18n/index.js";
+interface AppContext {
+  ctx: {
+    query: {
+      userLanguage?: string;
+    };
+  };
+  Component: {
+    getInitialProps?: (ctx: AppContext['ctx']) => Promise<Record<string, unknown>>;
+  };
+}
+/**
+ * Factory to create MyApp.getInitialProps.
+ * Follows the same pattern as `@mui/docs/Document`'s `createGetInitialProps`.
+ *
+ * @param options.translationsContext - A webpack require.context pointing at translation JSON files.
+ *   e.g. `require.context('docs/translations', false, /\.\/translations.*\.json$/)`
+ */
+export declare function createGetInitialProps(options: {
+  translationsContext: RequireContext;
+}): ({
+  ctx,
+  Component
+}: AppContext) => Promise<{
+  pageProps: {
+    userLanguage: string;
+    translations: import("../i18n/index.js").Translations;
+  };
+}>;
+export {};

package/DocsApp/createGetInitialProps.js

@@ -0,0 +1,29 @@
+import { mapTranslations } from "../i18n/index.js";
+/**
+ * Factory to create MyApp.getInitialProps.
+ * Follows the same pattern as `@mui/docs/Document`'s `createGetInitialProps`.
+ *
+ * @param options.translationsContext - A webpack require.context pointing at translation JSON files.
+ *   e.g. `require.context('docs/translations', false, /\.\/translations.*\.json$/)`
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function createGetInitialProps(options) {
+  async function getInitialPropsApp({
+    ctx,
+    Component
+  }) {
+    let pageProps = {};
+    const translations = mapTranslations(options.translationsContext);
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx);
+    }
+    return {
+      pageProps: {
+        userLanguage: ctx.query.userLanguage || 'en',
+        translations,
+        ...pageProps
+      }
+    };
+  }
+  return getInitialPropsApp;
+}

package/DocsApp/index.d.ts

@@ -0,0 +1,5 @@
+export { DocsApp } from "./DocsApp.js";
+export type { DocsAppProps } from "./DocsApp.js";
+export { createGetInitialProps } from "./createGetInitialProps.js";
+export { printConsoleBanner } from "./consoleBanner.js";
+export { reportWebVitals } from "./reportWebVitals.js";

package/DocsApp/index.js

@@ -0,0 +1,4 @@
+export { DocsApp } from "./DocsApp.js";
+export { createGetInitialProps } from "./createGetInitialProps.js";
+export { printConsoleBanner } from "./consoleBanner.js";
+export { reportWebVitals } from "./reportWebVitals.js";

package/DocsApp/loadDependencies.d.ts

@@ -0,0 +1 @@
+export declare function loadDependencies(): void;

package/DocsApp/loadDependencies.js

@@ -0,0 +1,11 @@
+import { loadCSS } from 'fg-loadcss';
+let dependenciesLoaded = false;
+
+// eslint-disable-next-line import/prefer-default-export
+export function loadDependencies() {
+  if (dependenciesLoaded) {
+    return;
+  }
+  dependenciesLoaded = true;
+  loadCSS('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Two+Tone', document.querySelector('#material-icon-font') ?? undefined);
+}

package/DocsApp/reportWebVitals.d.ts

@@ -0,0 +1,13 @@
+export declare function reportWebVitals({
+  id,
+  name,
+  label,
+  delta,
+  value
+}: {
+  id: string;
+  name: string;
+  label: string;
+  delta: number;
+  value: number;
+}): void;

package/DocsApp/reportWebVitals.js

@@ -0,0 +1,24 @@
+// Track fraction of actual events to prevent exceeding event quota.
+// Filter sessions instead of individual events so that we can track multiple metrics per device.
+// See https://github.com/GoogleChromeLabs/web-vitals-report to use this data
+const disableWebVitalsReporting = Math.random() > 0.0001;
+
+// eslint-disable-next-line import/prefer-default-export
+export function reportWebVitals({
+  id,
+  name,
+  label,
+  delta,
+  value
+}) {
+  if (disableWebVitalsReporting) {
+    return;
+  }
+  window.gtag('event', name, {
+    value: delta,
+    metric_label: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
+    metric_value: value,
+    metric_delta: delta,
+    metric_id: id // id unique to current page load
+  });
+}

package/DocsApp/serviceWorker.d.ts

@@ -0,0 +1 @@
+export declare function registerServiceWorker(swPath: string): Promise<void>;

package/DocsApp/serviceWorker.js

@@ -0,0 +1,61 @@
+let reloadInterval;
+
+// Avoid infinite loop when "Update on reload" is set in the Chrome sw dev tools.
+function lazyReload() {
+  clearInterval(reloadInterval);
+  reloadInterval = setInterval(() => {
+    if (document.hasFocus()) {
+      window.location.reload();
+    }
+  }, 100);
+}
+
+// Inspired by
+// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users
+function forcePageReload(registration) {
+  // console.log('already controlled?', Boolean(navigator.serviceWorker.controller));
+
+  if (!navigator.serviceWorker.controller) {
+    // The window client isn't currently controlled so it's a new service
+    // worker that will activate immediately.
+    return;
+  }
+
+  // console.log('registration waiting?', Boolean(registration.waiting));
+  if (registration.waiting) {
+    // SW is waiting to activate. Can occur if multiple clients open and
+    // one of the clients is refreshed.
+    registration.waiting.postMessage('skipWaiting');
+    return;
+  }
+  function listenInstalledStateChange() {
+    registration.installing.addEventListener('statechange', event => {
+      // console.log('statechange', event.target.state);
+      if (event.target.state === 'installed' && registration.waiting) {
+        // A new service worker is available, inform the user
+        registration.waiting.postMessage('skipWaiting');
+      } else if (event.target.state === 'activated') {
+        // Force the control of the page by the activated service worker.
+        lazyReload();
+      }
+    });
+  }
+  if (registration.installing) {
+    listenInstalledStateChange();
+    return;
+  }
+
+  // We are currently controlled so a new SW may be found...
+  // Add a listener in case a new SW is found,
+  registration.addEventListener('updatefound', listenInstalledStateChange);
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export async function registerServiceWorker(swPath) {
+  if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production' && window.location.host.includes('mui.com')) {
+    // register() automatically attempts to refresh the sw.js.
+    const registration = await navigator.serviceWorker.register(swPath);
+    // Force the page reload for users.
+    forcePageReload(registration);
+  }
+}

package/Document/getInitialProps.js

@@ -1,7 +1,7 @@
 var _style, _style2, _style3, _style4;
 import * as React from 'react';
 import { documentGetInitialProps } from '@mui/material-nextjs/v13-pagesRouter';
-import createEmotionCache from "../createEmotionCache/index.js";
+import createEmotionCache from "../DocsApp/createEmotionCache.js";
 import { pathnameToLanguage } from "../helpers/helpers.js";
 
 // eslint-disable-next-line import/prefer-default-export
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function createGetInitialProps({
   setupStyledComponents = false
 }) {
-  async function getInitialProps(ctx) {
+  async function getInitialPropsDocument(ctx) {
     const styledComponentsSheet = setupStyledComponents ? new (await import('styled-components')).ServerStyleSheet() : null;
     try {
       const finalProps = await documentGetInitialProps(ctx, {
@@ -58,5 +58,5 @@ export function createGetInitialProps({
       }
     }
   }
-  return getInitialProps;
+  return getInitialPropsDocument;
 }

package/PageContext/PageContext.d.ts

@@ -9,21 +9,22 @@ export type RootSvgProps<P = unknown> = Omit<React.SVGProps<SVGSVGElement>, 'ref
 } & P;
 export interface ProductVersion {
   text: string;
-  current: boolean;
-  href?: undefined;
+  current?: boolean;
+  href?: string;
 }
 export interface ProductInfo {
   metadata: string;
   name: string;
-  logo: (props: RootSvgProps) => React.JSX.Element;
-  logoSvg: string;
-  wordmarkSvg: string;
+  logo?: (props: RootSvgProps) => React.JSX.Element;
+  logoSvg?: string;
+  wordmarkSvg?: string;
   versions: ProductVersion[];
 }
 export interface MuiPageContext {
   activePage: MuiPage | null;
   pages: MuiPage[];
   productId: MuiProductId;
+  productCategoryId: string;
   productIdentifier: ProductInfo;
   activePageParents: MuiPage[];
 }

package/branding/BrandingCssVarsProvider.d.ts

@@ -9,15 +9,19 @@ export declare function setDocsColors(primary: Record<string, string>, secondary
 export declare function resetDocsColor(): void;
 export declare function setDocsSpacing(value: number): void;
 export declare function resetDocsSpacing(): void;
+export declare function getTheme(direction: 'ltr' | 'rtl'): import("@mui/material/styles").Theme;
+interface BrandingCssThemeProviderProps {
+  children: React.ReactNode;
+  direction?: 'ltr' | 'rtl';
+  forceThemeRerender?: boolean;
+}
 export declare function BrandingCssThemeProvider({
   children,
   direction,
   forceThemeRerender
-}: React.PropsWithChildren<{
-  direction?: 'ltr' | 'rtl';
-  forceThemeRerender?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}: BrandingCssThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function BrandingCssVarsProvider(props: {
   children: React.ReactNode;
   direction?: 'ltr' | 'rtl';
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/branding/BrandingCssVarsProvider.js

@@ -104,7 +104,7 @@ export function resetDocsSpacing() {
   }
 }
 const themeCache = new Map();
-function getTheme(direction) {
+export function getTheme(direction) {
   let cachedTheme = themeCache.get(direction);
   if (!cachedTheme) {
     cachedTheme = createTheme({

package/branding/brandingTheme.js

@@ -317,7 +317,9 @@ export function getThemedComponents() {
     components: {
       MuiAlert: {
         styleOverrides: {
-          root: {
+          root: ({
+            theme
+          }) => ({
             padding: '16px',
             gap: '12px',
             fontSize: '1rem',
@@ -333,80 +335,85 @@ export function getThemedComponents() {
             },
             '& .MuiAlert-message': {
               padding: 0
-            }
-          },
+            },
+            variants: [{
+              // same styles from the MarkdownElement callout
+              props: {
+                variant: 'standard',
+                color: 'warning'
+              },
+              style: [{
+                backgroundColor: alpha(theme.palette.warning[50], 0.5),
+                color: (theme.vars || theme).palette.grey[900],
+                border: '1px solid',
+                borderColor: alpha(theme.palette.warning[700], 0.15),
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.warning[600]
+                },
+                '& * a': {
+                  // !important is used here to override the anchor tag color coming from MarkdownElement
+                  color: `${(theme.vars || theme).palette.warning[900]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
+                  }
+                }
+              }, theme.applyDarkStyles({
+                backgroundColor: alpha(theme.palette.warning[700], 0.12),
+                color: (theme.vars || theme).palette.warning[50],
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.warning[400]
+                },
+                '& * a': {
+                  color: `${(theme.vars || theme).palette.warning[100]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
+                  }
+                }
+              })]
+            }, {
+              // same styles from the MarkdownElement callout
+              props: {
+                variant: 'standard',
+                color: 'success'
+              },
+              style: [{
+                backgroundColor: alpha(theme.palette.success[50], 0.5),
+                color: (theme.vars || theme).palette.success[900],
+                border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.success[600]
+                },
+                '& * a': {
+                  // !important is used here to override the anchor tag color coming from MarkdownElement
+                  color: `${(theme.vars || theme).palette.success[900]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
+                  }
+                }
+              }, theme.applyDarkStyles({
+                backgroundColor: alpha(theme.palette.success[700], 0.12),
+                color: (theme.vars || theme).palette.success[50],
+                borderColor: alpha(theme.palette.success[400], 0.1),
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.success[500]
+                },
+                '& * a': {
+                  color: `${(theme.vars || theme).palette.success[100]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
+                  }
+                }
+              })]
+            }]
+          }),
           icon: {
             paddingTop: 10,
             paddingBottom: 0
-          },
-          standardWarning: ({
-            theme
-          }) => [
-          // same styles from the MarkdownElement callout
-          {
-            backgroundColor: alpha(theme.palette.warning[50], 0.5),
-            color: (theme.vars || theme).palette.grey[900],
-            border: '1px solid',
-            borderColor: alpha(theme.palette.warning[700], 0.15),
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[600]
-            },
-            '& * a': {
-              // !important is used here to override the anchor tag color coming from MarkdownElement
-              color: `${(theme.vars || theme).palette.warning[900]} !important`,
-              textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.warning[700], 0.12),
-            color: (theme.vars || theme).palette.warning[50],
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[400]
-            },
-            '& * a': {
-              color: `${(theme.vars || theme).palette.warning[100]} !important`,
-              textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
-              }
-            }
-          })],
-          standardSuccess: ({
-            theme
-          }) => [
-          // same styles from the MarkdownElement callout
-          {
-            backgroundColor: alpha(theme.palette.success[50], 0.5),
-            color: (theme.vars || theme).palette.success[900],
-            border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.success[600]
-            },
-            '& * a': {
-              // !important is used here to override the anchor tag color coming from MarkdownElement
-              color: `${(theme.vars || theme).palette.success[900]} !important`,
-              textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.success[700], 0.12),
-            color: (theme.vars || theme).palette.success[50],
-            borderColor: alpha(theme.palette.success[400], 0.1),
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.success[500]
-            },
-            '& * a': {
-              color: `${(theme.vars || theme).palette.success[100]} !important`,
-              textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
-              }
-            }
-          })]
+          }
         }
       },
       MuiButtonBase: {

package/codeStyling/codeStyling.d.ts

@@ -1,10 +1,7 @@
-export function CodeStylingProvider(props: any): import("react/jsx-runtime").JSX.Element;
-export namespace CodeStylingProvider {
-  namespace propTypes {
-    let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-  }
-}
-export function useCodeStyling(): string;
-export function useNoSsrCodeStyling(): any;
-export function useSetCodeStyling(): () => void;
-import PropTypes from 'prop-types';
+import * as React from 'react';
+export declare function CodeStylingProvider(props: {
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCodeStyling(): string;
+export declare function useNoSsrCodeStyling(): string | undefined;
+export declare function useSetCodeStyling(): React.Dispatch<React.SetStateAction<string>>;

package/codeStyling/codeStyling.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { CODE_STYLING } from "../constants/index.js";
 import { getCookie } from "../helpers/index.js";
@@ -70,9 +69,6 @@ export function CodeStylingProvider(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? CodeStylingProvider.propTypes = {
-  children: PropTypes.node.isRequired
-} : void 0;
 export function useCodeStyling() {
   return React.useContext(CodeStylingContext).codeStyling;
 }

package/codeVariant/codeVariant.d.ts

@@ -1,10 +1,7 @@
-export function CodeVariantProvider(props: any): import("react/jsx-runtime").JSX.Element;
-export namespace CodeVariantProvider {
-  namespace propTypes {
-    let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-  }
-}
-export function useCodeVariant(): string;
-export function useNoSsrCodeVariant(): any;
-export function useSetCodeVariant(): () => void;
-import PropTypes from 'prop-types';
+import * as React from 'react';
+export declare function CodeVariantProvider(props: {
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCodeVariant(): string;
+export declare function useNoSsrCodeVariant(): string | undefined;
+export declare function useSetCodeVariant(): React.Dispatch<React.SetStateAction<string>>;

package/codeVariant/codeVariant.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { CODE_VARIANTS } from "../constants/index.js";
 import { getCookie } from "../helpers/index.js";
@@ -59,9 +58,6 @@ export function CodeVariantProvider(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? CodeVariantProvider.propTypes = {
-  children: PropTypes.node.isRequired
-} : void 0;
 export function useCodeVariant() {
   return React.useContext(CodeVariantContext).codeVariant;
 }

package/constants/constants.d.ts

@@ -1,13 +1,13 @@
-export namespace CODE_VARIANTS {
-  let JS: string;
-  let TS: string;
-}
-export namespace CODE_STYLING {
-  let SYSTEM: string;
-  let TAILWIND: string;
-  let CSS: string;
-}
-export const LANGUAGES_LABEL: {
+export declare const CODE_VARIANTS: {
+  JS: string;
+  TS: string;
+};
+export declare const CODE_STYLING: {
+  SYSTEM: string;
+  TAILWIND: string;
+  CSS: string;
+};
+export declare const LANGUAGES_LABEL: {
   code: string;
   text: string;
 }[];

package/constants/index.d.ts

@@ -1 +1 @@
-export { CODE_VARIANTS, CODE_STYLING, LANGUAGES_LABEL } from "./constants.js";
+export * from "./constants.js";

package/constants/index.js

@@ -1 +1 @@
-export { CODE_VARIANTS, CODE_STYLING, LANGUAGES_LABEL } from "./constants.js";
+export * from "./constants.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "9.0.0-alpha.3",
+  "version": "9.0.0-alpha.4",
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
   "keywords": [
@@ -29,19 +29,19 @@
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
     "stylis": "4.2.0",
-    "@mui/stylis-plugin-rtl": "^9.0.0-alpha.3",
-    "@mui/internal-markdown": "^3.0.3"
+    "@mui/internal-markdown": "^3.0.4"
   },
   "peerDependencies": {
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/base": "^5.0.0 || ^5.0.0-beta || ^7.0.0 || ^7.0.0-beta",
-    "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/material-nextjs": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/system": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/utils": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
+    "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha",
+    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha",
+    "@mui/material-nextjs": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha",
+    "@mui/stylis-plugin-rtl": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha",
+    "@mui/system": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha",
+    "@mui/utils": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 || ^9.0.0-alpha",
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/stylis": "^4.2.7",
     "chai": "^6.0.1",
@@ -76,16 +76,6 @@
         "default": "./Ad/index.js"
       }
     },
-    "./AnalyticsProvider": {
-      "import": {
-        "types": "./AnalyticsProvider/index.d.ts",
-        "default": "./AnalyticsProvider/index.js"
-      },
-      "default": {
-        "types": "./AnalyticsProvider/index.d.ts",
-        "default": "./AnalyticsProvider/index.js"
-      }
-    },
     "./CodeCopy": {
       "import": {
         "types": "./CodeCopy/index.d.ts",
@@ -116,6 +106,16 @@
         "default": "./DemoContext/index.js"
       }
     },
+    "./DocsApp": {
+      "import": {
+        "types": "./DocsApp/index.d.ts",
+        "default": "./DocsApp/index.js"
+      },
+      "default": {
+        "types": "./DocsApp/index.d.ts",
+        "default": "./DocsApp/index.js"
+      }
+    },
     "./DocsProvider": {
       "import": {
         "types": "./DocsProvider/index.d.ts",
@@ -136,16 +136,6 @@
         "default": "./Document/index.js"
       }
     },
-    "./GoogleAnalytics": {
-      "import": {
-        "types": "./GoogleAnalytics/index.d.ts",
-        "default": "./GoogleAnalytics/index.js"
-      },
-      "default": {
-        "types": "./GoogleAnalytics/index.d.ts",
-        "default": "./GoogleAnalytics/index.js"
-      }
-    },
     "./HighlightedCode": {
       "import": {
         "types": "./HighlightedCode/index.d.ts",
@@ -256,16 +246,6 @@
         "default": "./SectionTitle/index.js"
       }
     },
-    "./StyledEngineProvider": {
-      "import": {
-        "types": "./StyledEngineProvider/index.d.ts",
-        "default": "./StyledEngineProvider/index.js"
-      },
-      "default": {
-        "types": "./StyledEngineProvider/index.d.ts",
-        "default": "./StyledEngineProvider/index.js"
-      }
-    },
     "./ThemeContext": {
       "import": {
         "types": "./ThemeContext/index.d.ts",
@@ -316,16 +296,6 @@
         "default": "./constants/index.js"
       }
     },
-    "./createEmotionCache": {
-      "import": {
-        "types": "./createEmotionCache/index.d.ts",
-        "default": "./createEmotionCache/index.js"
-      },
-      "default": {
-        "types": "./createEmotionCache/index.d.ts",
-        "default": "./createEmotionCache/index.js"
-      }
-    },
     "./findActivePage": {
       "import": {
         "types": "./findActivePage/index.d.ts",
@@ -425,6 +395,16 @@
         "types": "./utils/index.d.ts",
         "default": "./utils/index.js"
       }
+    },
+    "./webpack": {
+      "import": {
+        "types": "./webpack/index.d.ts",
+        "default": "./webpack/index.js"
+      },
+      "default": {
+        "types": "./webpack/index.d.ts",
+        "default": "./webpack/index.js"
+      }
     }
   }
 }

package/webpack/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Type declarations for webpack's require.context() API.
+ *
+ * Usage: import '@mui/docs/webpack' in a .d.ts or at the top of a file,
+ * or add to tsconfig "types".
+ */
+export interface WebpackRequireContext {
+  (req: string): string;
+  keys: () => string[];
+}
+declare global {
+  namespace NodeJS {
+    interface Require {
+      context(directory: string, useSubdirectories?: boolean, regExp?: RegExp, mode?: string): WebpackRequireContext;
+    }
+  }
+}

package/webpack/index.js

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

package/AnalyticsProvider/index.d.ts

@@ -1 +0,0 @@
-export { AnalyticsProvider, useAnalyticsConsent, CookieConsentDialog } from "./AnalyticsProvider.js";

package/AnalyticsProvider/index.js

@@ -1 +0,0 @@
-export { AnalyticsProvider, useAnalyticsConsent, CookieConsentDialog } from "./AnalyticsProvider.js";

package/GoogleAnalytics/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./GoogleAnalytics.js";

package/GoogleAnalytics/index.js

@@ -1 +0,0 @@
-export { default } from "./GoogleAnalytics.js";

package/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -1,9 +0,0 @@
-declare function StyledEngineProvider(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace StyledEngineProvider {
-  namespace propTypes {
-    let cacheLtr: PropTypes.Validator<object>;
-    let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-  }
-}
-export default StyledEngineProvider;
-import PropTypes from 'prop-types';

package/StyledEngineProvider/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./StyledEngineProvider.js";

package/StyledEngineProvider/index.js

@@ -1 +0,0 @@
-export { default } from "./StyledEngineProvider.js";

package/createEmotionCache/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./createEmotionCache.js";

package/createEmotionCache/index.js

@@ -1 +0,0 @@
-export { default } from "./createEmotionCache.js";