@mui/docs 9.0.0-alpha.3 → 9.0.0-beta.0

package/CHANGELOG.md

@@ -1,5 +1,216 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-beta.0
+
+<!-- generated comparing v9.0.0-alpha.4..master -->
+
+_Mar 25, 2026_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/material@9.0.0-beta.0`
+
+#### Breaking Changes
+
+- [linear-progress] Remove deprecated CSS classes (#48068) @mj12albert
+- [list-item, list-item-text] Remove deprecated props (#48042) @siriwatknp
+- [button-group] Remove deprecated classes (#48043) @siriwatknp
+- [card] Remove deprecated CardHeader props (#47995) @silviuaavram
+- [checkbox][radio][switch] Remove deprecated inputProps and inputRef (#48059) @siriwatknp
+- [chip] Remove deprecated classes (#48046) @silviuaavram
+- [dialog][modal][drawer][swipeabledrawer] Remove deprecated props and classes (#48039) @silviuaavram
+- [divider] Remove deprecated CSS classes (#48075) @siriwatknp
+- [drawer] Remove deprecated CSS classes (#48077) @siriwatknp
+- [image-list-item-bar] Remove deprecated CSS classes (#48064) @siriwatknp
+- [inputs] Remove deprecated props & classes (#48071) @mj12albert
+- [material-ui] Remove unnecessary overridesResolvers from styled components (#48082) @ZeeshanTamboli
+- [material-ui][system] Remove deprecated system props from Box, Stack, Typography (#48072) @siriwatknp
+- [pagination-item] Remove deprecated CSS classes (#48076) @siriwatknp
+- [pagination-item] Remove deprecated props (#48038) @siriwatknp
+- [rating] Remove deprecated IconContainerComponent (#48019) @siriwatknp
+- [select] Remove deprecated CSS classes (#48065) @mj12albert
+- [slider] Remove deprecated CSS classes (#48074) @siriwatknp
+- [step-connector][step-content][step-label] Remove deprecated props and classes (#48058) @siriwatknp
+- [tabs][tab] Remove deprecated CSS classes (#48078) @siriwatknp
+- [table-pagination][table-sort-label] Remove deprecated props and classes (#48060) @siriwatknp
+- [toggle-button-group] Remove deprecated classes (#48061) @siriwatknp
+
+#### Changes
+
+- [system] Improve performance when using sx prop (#44254) @romgrk
+
+### `@mui/codemod@9.0.0-beta.0`
+
+- [codemod] Add missing codemod links in upgrade guide (#48069) @silviuaavram
+
+### Docs
+
+- Mention all breaking changes in changelog (#48091) @silviuaavram
+- Fix link to upgrade-to-v9 docs in release CHANGELOG (#48081) @ZeeshanTamboli
+
+### Core
+
+- Update browserslistrc (#48085) @silviuaavram
+- [code-infra] Prevent major version updates of bundler/framework packages in bundling fixtures (#48062) @Copilot
+- [code-infra][icons-material] Avoid material utils barrel in createSvgIcon (#48029) @anchmelev
+- [docs-infra] Migrate more leaf components to mui-docs (#48018) @brijeshb42
+
+All contributors of this release in alphabetical order: @anchmelev, @brijeshb42, @Copilot, @mj12albert, @romgrk, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
+## 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://next.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 -->
@@ -13,11 +224,16 @@ A big thanks to the 10 contributors who made this release possible. Here are som
 
 ### `@mui/material@9.0.0-alpha.3`
 
+#### Breaking Changes
+
+- [stepper][menulist][tabs] Improve accessibility (#47687) @silviuaavram
+
+#### Changes
+
 - [autocomplete] Add `root` slot (#47852) @GerardasB
 - [autocomplete] Fix popup reopening on window focus regain with openOnFocus (#47790) @aman44444
 - [autocomplete] Support full slots for clearIndicator and popupIndicator (#47891) @silviuaavram
 - [material-ui] Partially revert "[material-ui] Clean up duplicated CSS rules (#47838)" (#47927) @sai6855
-- [stepper][menulist][tabs] Improve accessibility (#47687) @silviuaavram
 
 ### Docs
 
@@ -75,16 +291,21 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 
 ### @mui/material@9.0.0-alpha.1
 
+#### Breaking Changes
+
 - [Autocomplete] Prevents Autocomplete menu from opening on right click (#47797) @silviuaavram
 - [Backdrop] Remove aria-hidden by default (#47798) @silviuaavram
 - [ButtonBase] Ensure that onClick propagates when non-native button is clicked (#47800) @silviuaavram
 - [Dialog][Modal] Remove `disableEscapeKeyDown` prop (#47695) @silviuaavram
 - [Grid] Remove system props support (#47846) @siriwatknp
-- [TableCell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47762) @ZeeshanTamboli
 - [theme] Remove MuiTouchRipple from theme component types (#47849) @siriwatknp
-- [Tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47684) @ZeeshanTamboli
 - [useAutocomplete] Improve isOptionEqualToValue value argument type (#47801) @silviuaavram
 
+#### Changes
+
+- [TableCell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47762) @ZeeshanTamboli
+- [Tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47684) @ZeeshanTamboli
+
 ### Docs
 
 - [docs] Add updated community theme resource (#47847) @PeterTYLiu

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/{AnalyticsProvider → DocsApp}/AnalyticsProvider.js

@@ -131,17 +131,21 @@ export function CookieConsentDialog() {
                 children: [/*#__PURE__*/_jsx(Typography, {
                   variant: "subtitle2",
                   id: "cookie-consent-dialog-title",
-                  textAlign: {
-                    xs: 'center',
-                    sm: 'start'
+                  sx: {
+                    textAlign: {
+                      xs: 'center',
+                      sm: 'start'
+                    }
                   },
                   children: "Cookie Preferences"
                 }), /*#__PURE__*/_jsx(Typography, {
                   id: "cookie-consent-dialog-description",
                   variant: "body2",
-                  textAlign: {
-                    xs: 'center',
-                    sm: 'start'
+                  sx: {
+                    textAlign: {
+                      xs: 'center',
+                      sm: 'start'
+                    }
                   },
                   children: "We use cookies to understand site usage and improve our content. This includes third-party analytics."
                 })]

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,18 @@
+import { getTheme } from "../branding/index.js";
+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$/)`
+ */
+
+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,9 @@
+import { loadCSS } from 'fg-loadcss';
+let dependenciesLoaded = false;
+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;