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

package/ComponentLinkHeader/ComponentLinkHeader.js

@@ -1,28 +1,20 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ComponentLinkHeader = ComponentLinkHeader;
-var React = _interopRequireWildcard(require("react"));
-var _router = require("next/router");
-var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _ChatRounded2 = _interopRequireDefault(require("@mui/icons-material/ChatRounded"));
-var _GitHub = _interopRequireDefault(require("@mui/icons-material/GitHub"));
-var _styles = require("@mui/material/styles");
-var _MarkdownIcon2 = _interopRequireDefault(require("../svgIcons/MarkdownIcon"));
-var _SketchIcon = _interopRequireDefault(require("../svgIcons/SketchIcon"));
-var _FigmaIcon = _interopRequireDefault(require("../svgIcons/FigmaIcon"));
-var _BundleSizeIcon2 = _interopRequireDefault(require("../svgIcons/BundleSizeIcon"));
-var _W3CIcon2 = _interopRequireDefault(require("../svgIcons/W3CIcon"));
-var _MaterialDesignIcon2 = _interopRequireDefault(require("../svgIcons/MaterialDesignIcon"));
-var _i18n = require("../i18n");
-var _jsxRuntime = require("react/jsx-runtime");
 var _MarkdownIcon, _ChatRounded, _BundleSizeIcon, _GitHubIcon, _W3CIcon, _MaterialDesignIcon, _li, _li2;
-const Root = (0, _styles.styled)('ul')(({
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+import ChatRounded from '@mui/icons-material/ChatRounded';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import { styled } from '@mui/material/styles';
+import MarkdownIcon from "../svgIcons/MarkdownIcon.js";
+import SketchIcon from "../svgIcons/SketchIcon.js";
+import FigmaIcon from "../svgIcons/FigmaIcon.js";
+import BundleSizeIcon from "../svgIcons/BundleSizeIcon.js";
+import W3CIcon from "../svgIcons/W3CIcon.js";
+import MaterialDesignIcon from "../svgIcons/MaterialDesignIcon.js";
+import { useTranslate } from "../i18n/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Root = styled('ul')(({
   theme
 }) => ({
   margin: theme.spacing(2, 0),
@@ -50,34 +42,34 @@ const defaultPackageNames = {
   'base-ui': '@mui/base',
   system: '@mui/system'
 };
-function ComponentLinkHeader(props) {
+export function ComponentLinkHeader(props) {
   const {
     markdown: {
       headers
     },
     design
   } = props;
-  const t = (0, _i18n.useTranslate)();
-  const router = (0, _router.useRouter)();
+  const t = useTranslate();
+  const router = useRouter();
   const packageName = headers.packageName ?? defaultPackageNames[headers.productId] ?? '@mui/material';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
-    children: [packageName === '@mui/material' && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+  return /*#__PURE__*/_jsxs(Root, {
+    children: [packageName === '@mui/material' && /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
         clickable: true,
         role: undefined,
         component: "a",
         size: "small",
         variant: "outlined",
         href: `${router.pathname}.md`,
-        icon: _MarkdownIcon || (_MarkdownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkdownIcon2.default, {})),
+        icon: _MarkdownIcon || (_MarkdownIcon = /*#__PURE__*/_jsx(MarkdownIcon, {})),
         "data-ga-event-category": "ComponentLinkHeader",
         "data-ga-event-action": "click",
         "data-ga-event-label": "Markdown",
         "data-ga-event-split": "0.1",
         label: "View as Markdown"
       })
-    }), headers.githubLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    }), headers.githubLabel ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
         clickable: true,
         role: undefined,
         component: "a",
@@ -85,7 +77,7 @@ function ComponentLinkHeader(props) {
         variant: "outlined",
         rel: "nofollow",
         href: `${process.env.SOURCE_CODE_REPO}/labels/${encodeURIComponent(headers.githubLabel)}`,
-        icon: _ChatRounded || (_ChatRounded = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatRounded2.default, {
+        icon: _ChatRounded || (_ChatRounded = /*#__PURE__*/_jsx(ChatRounded, {
           color: "primary"
         })),
         "data-ga-event-category": "ComponentLinkHeader",
@@ -94,11 +86,11 @@ function ComponentLinkHeader(props) {
         "data-ga-event-split": "0.1",
         label: t('githubLabel')
       })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    }) : null, /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Tooltip, {
         title: t('bundleSizeTooltip'),
         describeChild: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        children: /*#__PURE__*/_jsx(Chip, {
           clickable: true,
           role: undefined,
           component: "a",
@@ -106,7 +98,7 @@ function ComponentLinkHeader(props) {
           variant: "outlined",
           rel: "nofollow",
           href: `https://bundlephobia.com/package/${packageName}@latest`,
-          icon: _BundleSizeIcon || (_BundleSizeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BundleSizeIcon2.default, {
+          icon: _BundleSizeIcon || (_BundleSizeIcon = /*#__PURE__*/_jsx(BundleSizeIcon, {
             color: "primary"
           })),
           "data-ga-event-category": "ComponentLinkHeader",
@@ -116,8 +108,8 @@ function ComponentLinkHeader(props) {
           label: t('bundleSize')
         })
       })
-    }), headers.githubSource ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    }), headers.githubSource ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
         clickable: true,
         role: undefined,
         component: "a",
@@ -125,15 +117,15 @@ function ComponentLinkHeader(props) {
         variant: "outlined",
         rel: "nofollow",
         href: `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}/${headers.githubSource}`,
-        icon: _GitHubIcon || (_GitHubIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GitHub.default, {})),
+        icon: _GitHubIcon || (_GitHubIcon = /*#__PURE__*/_jsx(GitHubIcon, {})),
         "data-ga-event-category": "ComponentLinkHeader",
         "data-ga-event-action": "click",
         "data-ga-event-label": "Source",
         "data-ga-event-split": "0.1",
         label: "Source"
       })
-    }) : null, headers.waiAria ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    }) : null, headers.waiAria ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
         clickable: true,
         role: undefined,
         component: "a",
@@ -141,7 +133,7 @@ function ComponentLinkHeader(props) {
         variant: "outlined",
         rel: "nofollow",
         href: headers.waiAria,
-        icon: _W3CIcon || (_W3CIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_W3CIcon2.default, {
+        icon: _W3CIcon || (_W3CIcon = /*#__PURE__*/_jsx(W3CIcon, {
           color: "primary"
         })),
         "data-ga-event-category": "ComponentLinkHeader",
@@ -150,8 +142,8 @@ function ComponentLinkHeader(props) {
         "data-ga-event-split": "0.1",
         label: "WAI-ARIA"
       })
-    }) : null, headers.materialDesign ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    }) : null, headers.materialDesign ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
         clickable: true,
         role: undefined,
         component: "a",
@@ -159,16 +151,16 @@ function ComponentLinkHeader(props) {
         variant: "outlined",
         rel: "nofollow",
         href: headers.materialDesign,
-        icon: _MaterialDesignIcon || (_MaterialDesignIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MaterialDesignIcon2.default, {})),
+        icon: _MaterialDesignIcon || (_MaterialDesignIcon = /*#__PURE__*/_jsx(MaterialDesignIcon, {})),
         "data-ga-event-category": "ComponentLinkHeader",
         "data-ga-event-action": "click",
         "data-ga-event-label": "Material Design",
         "data-ga-event-split": "0.1",
         label: "Material Design"
       })
-    }) : null, design === false ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [_li || (_li = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+    }) : null, design === false ? null : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [_li || (_li = /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Chip, {
           clickable: true,
           role: undefined,
           component: "a",
@@ -176,15 +168,15 @@ function ComponentLinkHeader(props) {
           variant: "outlined",
           rel: "nofollow",
           href: "https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FigmaIcon.default, {}),
+          icon: /*#__PURE__*/_jsx(FigmaIcon, {}),
           "data-ga-event-category": "ComponentLinkHeader",
           "data-ga-event-action": "click",
           "data-ga-event-label": "Figma",
           "data-ga-event-split": "0.1",
           label: "Figma"
         })
-      })), packageName === '@mui/joy' ? null : _li2 || (_li2 = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+      })), packageName === '@mui/joy' ? null : _li2 || (_li2 = /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Chip, {
           clickable: true,
           role: undefined,
           component: "a",
@@ -192,7 +184,7 @@ function ComponentLinkHeader(props) {
           variant: "outlined",
           rel: "nofollow",
           href: "https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SketchIcon.default, {}),
+          icon: /*#__PURE__*/_jsx(SketchIcon, {}),
           "data-ga-event-category": "ComponentLinkHeader",
           "data-ga-event-action": "click",
           "data-ga-event-label": "Sketch",

package/ComponentLinkHeader/index.js

@@ -1,24 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _ComponentLinkHeader.ComponentLinkHeader;
-  }
-});
-var _ComponentLinkHeader = require("./ComponentLinkHeader");
-Object.keys(_ComponentLinkHeader).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ComponentLinkHeader[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ComponentLinkHeader[key];
-    }
-  });
-});
+export * from "./ComponentLinkHeader.js";
+export { ComponentLinkHeader as default } from "./ComponentLinkHeader.js";

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/DocsProvider/DocsProvider.js

@@ -1,28 +1,20 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DocsProvider = DocsProvider;
-exports.useDocsConfig = useDocsConfig;
-var React = _interopRequireWildcard(require("react"));
-var _i18n = require("../i18n");
-var _Ad = require("../Ad");
-var _jsxRuntime = require("react/jsx-runtime");
+import * as React from 'react';
+import { UserLanguageProvider } from "../i18n/index.js";
+import { AdProvider } from "../Ad/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const DocsConfigContext = /*#__PURE__*/React.createContext(null);
-function DocsProvider({
+export function DocsProvider({
   config,
   adConfig,
   defaultUserLanguage,
   translations,
   children
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DocsConfigContext.Provider, {
+  return /*#__PURE__*/_jsx(DocsConfigContext.Provider, {
     value: config,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ad.AdProvider, {
+    children: /*#__PURE__*/_jsx(AdProvider, {
       config: adConfig,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.UserLanguageProvider, {
+      children: /*#__PURE__*/_jsx(UserLanguageProvider, {
         defaultUserLanguage: defaultUserLanguage,
         translations: translations,
         children: children
@@ -30,7 +22,7 @@ function DocsProvider({
     })
   });
 }
-function useDocsConfig() {
+export function useDocsConfig() {
   const config = React.useContext(DocsConfigContext);
   if (!config) {
     throw new Error('Could not find docs config context value; please ensure the component is wrapped in a <DocsProvider>');

package/DocsProvider/index.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _DocsProvider = require("./DocsProvider");
-Object.keys(_DocsProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DocsProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DocsProvider[key];
-    }
-  });
-});
+export * from "./DocsProvider.js";

package/Document/Document.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type DocumentProps = {
+  canonicalAsServer: string;
+  analytics: {
+    google: string;
+    apollo: string;
+  };
+  userLanguage: string;
+  children?: React.ReactNode;
+};
+export declare function Document({
+  canonicalAsServer,
+  userLanguage,
+  analytics,
+  children
+}: DocumentProps): import("react/jsx-runtime").JSX.Element;

package/Document/Document.js

@@ -0,0 +1,147 @@
+var _link, _link2, _link3, _MuiInitColorSchemeSc, _Main, _NextScript;
+import * as React from 'react';
+import Script from 'next/script';
+import { Html, Head, Main, NextScript } from 'next/document';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+import { getMetaThemeColor } from '@mui/docs/branding';
+import { fontClasses } from '@mui/docs/nextFonts';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Document({
+  canonicalAsServer,
+  userLanguage,
+  analytics,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(Html, {
+    lang: userLanguage,
+    "data-mui-color-scheme": "light",
+    children: [/*#__PURE__*/_jsxs(Head, {
+      children: [_link || (_link = /*#__PURE__*/_jsx("link", {
+        rel: "manifest",
+        href: "/static/manifest.json"
+      })), /*#__PURE__*/_jsx("meta", {
+        name: "theme-color",
+        content: getMetaThemeColor('light'),
+        media: "(prefers-color-scheme: light)"
+      }), /*#__PURE__*/_jsx("meta", {
+        name: "theme-color",
+        content: getMetaThemeColor('dark'),
+        media: "(prefers-color-scheme: dark)"
+      }), _link2 || (_link2 = /*#__PURE__*/_jsx("link", {
+        rel: "icon",
+        href: "/static/favicon.ico"
+      })), _link3 || (_link3 = /*#__PURE__*/_jsx("link", {
+        rel: "apple-touch-icon",
+        sizes: "180x180",
+        href: "/static/icons/180x180.png"
+      })), /*#__PURE__*/_jsx("link", {
+        rel: "canonical",
+        href: `https://mui.com${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonicalAsServer}`
+      }), /*#__PURE__*/_jsx("link", {
+        rel: "alternate",
+        href: `https://mui.com${canonicalAsServer}`,
+        hrefLang: "x-default"
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: {
+          // First SSR paint
+          '.only-light-mode': {
+            display: 'block'
+          },
+          '.only-dark-mode': {
+            display: 'none'
+          },
+          // Post SSR Hydration
+          '.mode-dark .only-light-mode': {
+            display: 'none'
+          },
+          '.mode-dark .only-dark-mode': {
+            display: 'block'
+          },
+          // TODO migrate to .only-dark-mode to .only-dark-mode-v2
+          '[data-mui-color-scheme="light"] .only-dark-mode-v2': {
+            display: 'none'
+          },
+          '[data-mui-color-scheme="dark"] .only-light-mode-v2': {
+            display: 'none'
+          },
+          '.plan-pro, .plan-premium': {
+            display: 'inline-block',
+            height: '0.9em',
+            width: '1em',
+            verticalAlign: 'middle',
+            marginLeft: '0.3em',
+            marginBottom: '0.08em',
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            flexShrink: 0
+          },
+          '.plan-pro': {
+            backgroundImage: 'url(/static/x/pro.svg)'
+          },
+          '.plan-premium': {
+            backgroundImage: 'url(/static/x/premium.svg)'
+          }
+        }
+      })]
+    }), /*#__PURE__*/_jsxs("body", {
+      className: fontClasses,
+      children: [_MuiInitColorSchemeSc || (_MuiInitColorSchemeSc = /*#__PURE__*/_jsx(MuiInitColorSchemeScript, {
+        defaultMode: "system"
+      })), children, _Main || (_Main = /*#__PURE__*/_jsx(Main, {})), /*#__PURE__*/_jsx("script", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+window.gtag = gtag;
+
+${ /* Set default consent to denied (Google Consent Mode v2) */''}
+gtag('consent', 'default', {
+  'ad_storage': 'denied',
+  'ad_user_data': 'denied',
+  'ad_personalization': 'denied',
+  'analytics_storage': 'denied',
+  'wait_for_update': 500
+});
+gtag('set', 'ads_data_redaction', true);
+gtag('set', 'url_passthrough', true);
+
+gtag('js', new Date());
+gtag('config', '${analytics.google}', {
+  send_page_view: false,
+});
+
+${ /* Apollo initialization - called by AnalyticsProvider when consent is granted */''}
+window.initApollo = function() {
+  if (window.apolloInitialized) return;
+  window.apolloInitialized = true;
+  var n = Math.random().toString(36).substring(7),
+    o = document.createElement('script');
+  o.src = 'https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache=' + n;
+  o.async = true;
+  o.defer = true;
+  o.onload = function () {
+    window.trackingFunctions.onLoad({ appId: '${analytics.apollo}' });
+  };
+  document.head.appendChild(o);
+};
+
+${ /* Check localStorage for existing consent and initialize if already granted */''}
+(function() {
+  try {
+    var consent = localStorage.getItem('docs-cookie-consent');
+    if (consent === 'analytics') {
+      window.initApollo();
+    }
+  } catch (e) {}
+})();
+`
+        }
+      }), /*#__PURE__*/_jsx(Script, {
+        strategy: "afterInteractive",
+        src: `https://www.googletagmanager.com/gtag/js?id=${analytics.google}`
+      }), _NextScript || (_NextScript = /*#__PURE__*/_jsx(NextScript, {}))]
+    })]
+  });
+}

package/Document/getInitialProps.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { DocumentContext } from 'next/document';
+export declare function createGetInitialProps({
+  setupStyledComponents
+}: {
+  setupStyledComponents: boolean;
+}): (ctx: DocumentContext) => Promise<{
+  canonicalAsServer: string;
+  analytics: {
+    google: string;
+    apollo: string;
+  };
+  userLanguage: string | string[];
+  styles: (string | number | bigint | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element)[];
+  html: string;
+  head?: Array<React.JSX.Element | null>;
+  emotionStyleTags: React.ReactElement<unknown>[];
+}>;

package/Document/getInitialProps.js

@@ -0,0 +1,62 @@
+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 { pathnameToLanguage } from "../helpers/helpers.js";
+
+// eslint-disable-next-line import/prefer-default-export
+import { jsx as _jsx } from "react/jsx-runtime";
+export function createGetInitialProps({
+  setupStyledComponents = false
+}) {
+  async function getInitialProps(ctx) {
+    const styledComponentsSheet = setupStyledComponents ? new (await import('styled-components')).ServerStyleSheet() : null;
+    try {
+      const finalProps = await documentGetInitialProps(ctx, {
+        emotionCache: createEmotionCache(),
+        plugins: styledComponentsSheet ? [{
+          enhanceApp: App => props => styledComponentsSheet.collectStyles(/*#__PURE__*/_jsx(App, {
+            ...props
+          })),
+          resolveProps: async initialProps => ({
+            ...initialProps,
+            styles: [styledComponentsSheet.getStyleElement(), ...React.Children.toArray(initialProps.styles)]
+          })
+        }] : []
+      });
+
+      // All the URLs should have a leading /.
+      // This is missing in the Next.js static export.
+      let url = ctx.req?.url;
+      if (url && url[url.length - 1] !== '/') {
+        url += '/';
+      }
+      const isProd = process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging';
+      const google = isProd ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J';
+      const apollo = isProd ? '691c2e920c5e20000d7801b6' : 'dev-id';
+      return {
+        ...finalProps,
+        canonicalAsServer: pathnameToLanguage(url ?? '').canonicalAsServer,
+        analytics: {
+          google,
+          apollo
+        },
+        userLanguage: ctx.query.userLanguage || 'en',
+        styles: [_style || (_style = /*#__PURE__*/_jsx("style", {
+          id: "material-icon-font"
+        }, "material-icon-font")), _style2 || (_style2 = /*#__PURE__*/_jsx("style", {
+          id: "font-awesome-css"
+        }, "font-awesome-css")), ...finalProps.emotionStyleTags, _style3 || (_style3 = /*#__PURE__*/_jsx("style", {
+          id: "app-search"
+        }, "app-search")), _style4 || (_style4 = /*#__PURE__*/_jsx("style", {
+          id: "prismjs"
+        }, "prismjs")), ...React.Children.toArray(finalProps.styles)]
+      };
+    } finally {
+      if (styledComponentsSheet) {
+        styledComponentsSheet.seal();
+      }
+    }
+  }
+  return getInitialProps;
+}