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

package/DemoContext/DemoContext.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import type { MuiProductId } from "../getProductInfoFromUrl/index.js";
+export type CodeVariant = 'TS' | 'JS';
+type RelativeModule = {
+  module: string;
+  raw: string;
+};
+export interface DemoData {
+  title: string;
+  language: string;
+  raw: string;
+  codeVariant: CodeVariant;
+  githubLocation: string;
+  productId?: Exclude<MuiProductId, 'null'>;
+  relativeModules?: RelativeModule[];
+}
+export interface SandboxConfig {
+  /**
+   * Generates the root index.js/tsx content for CodeSandbox/StackBlitz.
+   * Receives codeVariant ('TS' | 'JS') for type assertion.
+   */
+  getRootIndex?: (codeVariant: CodeVariant) => string;
+  /**
+   * Primary npm package for this product, used in sandbox generation.
+   * e.g., "@mui/material", "@mui/joy", "@mui/x-data-grid"
+   */
+  primaryPackage: string;
+  /**
+   * Default dependency to add when generating sandbox (e.g., '@mui/material' for StyledEngineProvider)
+   * Used when the root index template requires a specific package.
+   */
+  fallbackDependency?: {
+    name: string;
+    version: string;
+  };
+  /**
+   * Hook to add extra peer dependencies to sandbox.
+   */
+  includePeerDependencies?: (deps: Record<string, string>, options: {
+    versions: Record<string, string>;
+  }) => Record<string, string>;
+  /**
+   * Hook to override default package versions.
+   */
+  getVersions?: (versions: Record<string, string>, options: {
+    muiCommitRef?: string;
+  }) => Record<string, string>;
+  /**
+   * Hook to resolve custom imports to dependencies.
+   */
+  postProcessImport?: (importName: string) => Record<string, string> | null;
+}
+export interface IframeWrapperProps {
+  /**
+   * The demo content (already cloned with `window` prop by FramedDemo).
+   * The wrapper should just render {children} - no cloning needed.
+   */
+  children: React.ReactElement;
+  /** The iframe's document, for setting attributes or observing color scheme */
+  document: Document;
+  /** If true, the demo is isolated and should not inject theme CSS variables */
+  isolated?: boolean;
+}
+export interface DemoContextValue {
+  /**
+   * Display name shown in demo titles, e.g., "Material UI", "Joy UI", "MUI X"
+   */
+  productDisplayName: string;
+  /**
+   * Optional wrapper component for iframe demo content.
+   * Responsible for:
+   * - Creating and injecting CSS theme variables (via GlobalStyles)
+   * - Any product-specific observers (e.g., JoyIframeObserver)
+   *
+   * If not provided, defaults to MaterialIframeWrapper (creates Material theme).
+   * Pass `null` explicitly to disable iframe wrapping entirely.
+   */
+  IframeWrapper?: React.ComponentType<IframeWrapperProps> | null;
+  /**
+   * Configuration for CodeSandbox/StackBlitz sandbox generation.
+   */
+  csb: SandboxConfig;
+}
+declare const DemoContext: React.Context<DemoContextValue | null>;
+export declare function useDemoContext(): DemoContextValue;
+export default DemoContext;

package/DemoContext/DemoContext.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+const DemoContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  DemoContext.displayName = 'DemoContext';
+}
+export function useDemoContext() {
+  const context = React.useContext(DemoContext);
+  if (!context) {
+    throw new Error('useDemoContext must be used within a DemoContext.Provider');
+  }
+  return context;
+}
+export default DemoContext;

package/DemoContext/index.d.ts

@@ -0,0 +1,2 @@
+export { default, useDemoContext } from "./DemoContext.js";
+export type { CodeVariant, DemoData, SandboxConfig, IframeWrapperProps, DemoContextValue } from "./DemoContext.js";

package/DemoContext/index.js

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

package/DocsApp/AnalyticsProvider.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+type ConsentStatus = 'analytics' | 'essential' | null;
+interface AnalyticsContextValue {
+  consentStatus: ConsentStatus;
+  hasAnalyticsConsent: boolean;
+  needsConsent: boolean;
+  setAnalyticsConsent: () => void;
+  setEssentialOnly: () => void;
+}
+export declare function useAnalyticsConsent(): AnalyticsContextValue;
+export declare function CookieConsentDialog(): import("react/jsx-runtime").JSX.Element;
+export declare function AnalyticsProvider({
+  children
+}: {
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/DocsApp/AnalyticsProvider.js

@@ -0,0 +1,225 @@
+var _CookieOutlinedIcon, _BrandingCssThemeProv;
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Fade from '@mui/material/Fade';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import useLocalStorageState from '@mui/utils/useLocalStorageState';
+import { alpha } from '@mui/system';
+import Portal from '@mui/material/Portal';
+import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import CookieOutlinedIcon from '@mui/icons-material/CookieOutlined';
+import { BrandingCssThemeProvider } from "../branding/BrandingCssVarsProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COOKIE_CONSENT_KEY = 'docs-cookie-consent';
+function getDoNotTrack() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  // Check for Do Not Track (DNT)
+  return navigator.doNotTrack === '1' || window.doNotTrack === '1';
+}
+
+// DNT doesn't change during a session, so we can use a simple external store
+const subscribeToNothing = () => () => {};
+const getDoNotTrackSnapshot = () => getDoNotTrack();
+const getDoNotTrackServerSnapshot = () => true; // Assume DNT until we know the actual value
+
+function useDoNotTrack() {
+  return React.useSyncExternalStore(subscribeToNothing, getDoNotTrackSnapshot, getDoNotTrackServerSnapshot);
+}
+const AnalyticsContext = /*#__PURE__*/React.createContext({
+  consentStatus: null,
+  hasAnalyticsConsent: false,
+  needsConsent: false,
+  setAnalyticsConsent: () => {},
+  setEssentialOnly: () => {}
+});
+export function useAnalyticsConsent() {
+  return React.useContext(AnalyticsContext);
+}
+export function CookieConsentDialog() {
+  const {
+    needsConsent,
+    setAnalyticsConsent,
+    setEssentialOnly
+  } = useAnalyticsConsent();
+  const [show, setShow] = React.useState(false);
+  React.useEffect(() => {
+    if (needsConsent) {
+      // Double rAF to ensure the initial opacity: 0 state is painted before transitioning
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setShow(true);
+        });
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+    setShow(false);
+    return undefined;
+  }, [needsConsent]);
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(TrapFocus, {
+      open: needsConsent,
+      disableAutoFocus: true,
+      disableEnforceFocus: true,
+      children: /*#__PURE__*/_jsx(Fade, {
+        in: show,
+        unmountOnExit: true,
+        children: /*#__PURE__*/_jsx(Paper, {
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-labelledby": "cookie-consent-dialog-title",
+          "aria-describedby": "cookie-consent-dialog-description",
+          variant: "outlined",
+          tabIndex: -1,
+          sx: theme => ({
+            position: 'fixed',
+            bottom: 0,
+            right: 0,
+            p: 2,
+            m: 2,
+            maxWidth: 340,
+            pointerEvents: 'auto',
+            boxShadow: theme.shadows[2],
+            zIndex: theme.zIndex.snackbar,
+            ...(theme.applyDarkStyles ? theme.applyDarkStyles({
+              bgcolor: 'primaryDark.900'
+            }) : {
+              [theme.getColorSchemeSelector?.('dark') || '&.mode-dark']: {
+                bgcolor: 'primaryDark.900'
+              }
+            })
+          }),
+          children: /*#__PURE__*/_jsxs(Stack, {
+            direction: "column",
+            spacing: 3,
+            sx: {
+              justifyContent: 'flex-start'
+            },
+            children: [/*#__PURE__*/_jsxs(Stack, {
+              spacing: 1,
+              sx: {
+                flexShrink: 1,
+                alignSelf: {
+                  xs: 'flex-start',
+                  sm: 'center'
+                }
+              },
+              children: [/*#__PURE__*/_jsx(Box, {
+                sx: theme => ({
+                  borderRadius: '50%',
+                  bgcolor: alpha(theme.palette.primary.main, 0.1),
+                  p: 1,
+                  display: 'inline-block',
+                  width: 40,
+                  height: 40,
+                  mb: -1,
+                  alignSelf: {
+                    xs: 'center',
+                    sm: 'flex-start'
+                  }
+                }),
+                children: _CookieOutlinedIcon || (_CookieOutlinedIcon = /*#__PURE__*/_jsx(CookieOutlinedIcon, {
+                  color: "primary",
+                  strokeWidth: 1.5
+                }))
+              }), /*#__PURE__*/_jsxs(Stack, {
+                spacing: 0.5,
+                children: [/*#__PURE__*/_jsx(Typography, {
+                  variant: "subtitle2",
+                  id: "cookie-consent-dialog-title",
+                  textAlign: {
+                    xs: 'center',
+                    sm: 'start'
+                  },
+                  children: "Cookie Preferences"
+                }), /*#__PURE__*/_jsx(Typography, {
+                  id: "cookie-consent-dialog-description",
+                  variant: "body2",
+                  textAlign: {
+                    xs: 'center',
+                    sm: 'start'
+                  },
+                  children: "We use cookies to understand site usage and improve our content. This includes third-party analytics."
+                })]
+              })]
+            }), /*#__PURE__*/_jsxs(Stack, {
+              direction: "row",
+              spacing: 1,
+              sx: {
+                justifyContent: 'flex-start'
+              },
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: setAnalyticsConsent,
+                variant: "contained",
+                size: "small",
+                children: "Allow analytics"
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: setEssentialOnly,
+                size: "small",
+                children: "Essential only"
+              })]
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+function updateGoogleConsent(hasAnalytics) {
+  if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
+    window.gtag('consent', 'update', {
+      ad_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied',
+      analytics_storage: hasAnalytics ? 'granted' : 'denied'
+    });
+
+    // Initialize Apollo when analytics consent is granted
+    const win = window;
+    if (hasAnalytics && typeof win.initApollo === 'function') {
+      win.initApollo();
+    }
+  }
+}
+export function AnalyticsProvider({
+  children
+}) {
+  const [consentStatus, setConsentStatus] = useLocalStorageState(COOKIE_CONSENT_KEY, null);
+  const doNotTrack = useDoNotTrack();
+
+  // Respect Do Not Track - don't show dialog and treat as essential only
+  const needsConsent = consentStatus === null && !doNotTrack;
+
+  // Update Google consent when status changes or on mount if already set
+  React.useEffect(() => {
+    if (doNotTrack) {
+      // DNT is enabled - always deny analytics
+      updateGoogleConsent(false);
+    } else if (consentStatus !== null) {
+      updateGoogleConsent(consentStatus === 'analytics');
+    }
+  }, [consentStatus, doNotTrack]);
+  const setAnalyticsConsent = React.useCallback(() => {
+    setConsentStatus('analytics');
+  }, [setConsentStatus]);
+  const setEssentialOnly = React.useCallback(() => {
+    setConsentStatus('essential');
+  }, [setConsentStatus]);
+  const contextValue = React.useMemo(() => ({
+    consentStatus: doNotTrack ? 'essential' : consentStatus,
+    hasAnalyticsConsent: !doNotTrack && consentStatus === 'analytics',
+    needsConsent,
+    setAnalyticsConsent,
+    setEssentialOnly
+  }), [consentStatus, doNotTrack, needsConsent, setAnalyticsConsent, setEssentialOnly]);
+  return /*#__PURE__*/_jsxs(AnalyticsContext.Provider, {
+    value: contextValue,
+    children: [children, _BrandingCssThemeProv || (_BrandingCssThemeProv = /*#__PURE__*/_jsx(BrandingCssThemeProvider, {
+      children: /*#__PURE__*/_jsx(CookieConsentDialog, {})
+    }))]
+  });
+}

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/DocsApp/GoogleAnalytics.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * basically just a `useAnalytics` hook.
+ * However, it needs the redux store which is created
+ * in the same component this "hook" is used.
+ */
+declare function GoogleAnalytics(): null;
+declare const _default: React.MemoExoticComponent<typeof GoogleAnalytics>;
+export default _default;

package/DocsApp/GoogleAnalytics.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useRouter } from 'next/router';
+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:
+//
+// <Button
+//   data-ga-event-category="demo"
+//   data-ga-event-action="expand"
+// >
+//   Foo
+// </Button>
+function handleClick(event) {
+  let el = event.target;
+  while (el && el !== document) {
+    const element = el;
+    const category = element.getAttribute('data-ga-event-category');
+
+    // We reach a tracking element, no need to look higher in the dom tree.
+    if (category) {
+      const split = parseFloat(element.getAttribute('data-ga-event-split') || '');
+      if (split && split < Math.random()) {
+        return;
+      }
+      window.gtag('event', category, {
+        eventAction: element.getAttribute('data-ga-event-action'),
+        eventLabel: element.getAttribute('data-ga-event-label')
+      });
+      break;
+    }
+    el = element.parentElement;
+  }
+}
+let boundDataGaListener = false;
+
+/**
+ * basically just a `useAnalytics` hook.
+ * However, it needs the redux store which is created
+ * in the same component this "hook" is used.
+ */
+function GoogleAnalytics() {
+  React.useEffect(() => {
+    if (!boundDataGaListener) {
+      boundDataGaListener = true;
+      document.addEventListener('click', handleClick);
+    }
+  }, []);
+  const router = useRouter();
+  const timeout = React.useRef(null);
+  React.useEffect(() => {
+    // Wait for the title to be updated.
+    // React fires useEffect twice in dev mode
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = setTimeout(() => {
+      const {
+        canonicalAsServer
+      } = pathnameToLanguage(window.location.pathname);
+
+      // https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag
+      const productIdMeta = document.querySelector('meta[name="mui:productId"]');
+      const productCategoryIdMeta = document.querySelector('meta[name="mui:productCategoryId"]');
+      window.gtag('event', 'page_view', {
+        page_title: document.title,
+        page_location: canonicalAsServer,
+        productId: productIdMeta?.content,
+        productCategoryId: productCategoryIdMeta?.content
+      });
+    });
+  }, [router.route]);
+  const codeVariant = useNoSsrCodeVariant();
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      codeVariant
+    });
+  }, [codeVariant]);
+  const userLanguage = useUserLanguage();
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      userLanguage
+    });
+  }, [userLanguage]);
+  React.useEffect(() => {
+    /**
+     * Based on https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
+     * Adjusted to track 3 or more different ratios
+     */
+    function trackDevicePixelRation() {
+      const devicePixelRatio = Math.round(window.devicePixelRatio * 10) / 10;
+      window.gtag('set', 'user_properties', {
+        devicePixelRatio
+      });
+    }
+    trackDevicePixelRation();
+
+    /**
+     * @type {MediaQueryList}
+     */
+    const matchMedia = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    matchMedia.addListener(trackDevicePixelRation);
+    return () => {
+      matchMedia.removeListener(trackDevicePixelRation);
+    };
+  }, []);
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
+    noSsr: true
+  });
+  const colorSchemeOS = prefersDarkMode ? 'dark' : 'light';
+  const themeOptions = React.useContext(ThemeOptionsContext);
+  const colorScheme = themeOptions.paletteMode;
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      colorSchemeOS
+    });
+  }, [colorSchemeOS]);
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      colorScheme
+    });
+  }, [colorScheme]);
+  return null;
+}
+export default /*#__PURE__*/React.memo(GoogleAnalytics);

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 {};