From 91147092a9f4d60aafac6601ad3f3050706fe7d7 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 11 Jan 2024 21:48:18 +0100
Subject: [PATCH 1/4] [docs] Document bundlesize

---
 docs/.link-check-errors.txt                                     | 1 +
 docs/data/base/components/autocomplete/autocomplete.md          | 2 ++
 .../base/components/click-away-listener/click-away-listener.md  | 2 ++
 docs/data/base/components/focus-trap/focus-trap.md              | 2 ++
 docs/data/base/components/modal/modal.md                        | 2 ++
 docs/data/material/components/autocomplete/autocomplete.md      | 2 ++
 .../data/material/components/use-media-query/use-media-query.md | 1 +
 7 files changed, 12 insertions(+)

diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
index 0b8d083f4a0077..93c1a940153143 100644
--- a/docs/.link-check-errors.txt
+++ b/docs/.link-check-errors.txt
@@ -1,2 +1,3 @@
 Broken links found by `pnpm docs:link-check` that exist:
 
+- https://mui.com/size-snapshot/
diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md
index d0a0cb5de11e64..d90787ff0c1073 100644
--- a/docs/data/base/components/autocomplete/autocomplete.md
+++ b/docs/data/base/components/autocomplete/autocomplete.md
@@ -14,6 +14,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [4.5 kB gzipped](/size-snapshot/).
+
 ## Introduction
 
 An autocomplete component is an enhanced text input that shows a list of suggested options as users type, and lets them select an option from the list.
diff --git a/docs/data/base/components/click-away-listener/click-away-listener.md b/docs/data/base/components/click-away-listener/click-away-listener.md
index 7d67d0a2390dbe..636dc7ce95b8f1 100644
--- a/docs/data/base/components/click-away-listener/click-away-listener.md
+++ b/docs/data/base/components/click-away-listener/click-away-listener.md
@@ -13,6 +13,8 @@ githubLabel: 'component: ClickAwayListener'
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [0.9 kB gzipped](/size-snapshot/).
+
 ## Introduction
 
 Click-Away Listener is a utility component that listens for click events outside of its child.
diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md
index 76c850021919f3..96abfaf55b0f7c 100644
--- a/docs/data/base/components/focus-trap/focus-trap.md
+++ b/docs/data/base/components/focus-trap/focus-trap.md
@@ -13,6 +13,8 @@ githubLabel: 'component: FocusTrap'
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [1.6 kB gzipped](/size-snapshot/).
+
 ## Introduction
 
 Focus Trap is a utility component that's useful when implementing an overlay such as a [modal dialog](/base-ui/react-modal/), which should block all interactions outside of it while open.
diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md
index 88b80048a83a25..b9295aca414320 100644
--- a/docs/data/base/components/modal/modal.md
+++ b/docs/data/base/components/modal/modal.md
@@ -15,6 +15,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [5.1 kB gzipped](/size-snapshot/).
+
 ## Introduction
 
 Modal is a utility component that renders its children in front of a backdrop.
diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md
index 9dab4d8409dcc8..55086bdf720aec 100644
--- a/docs/data/material/components/autocomplete/autocomplete.md
+++ b/docs/data/material/components/autocomplete/autocomplete.md
@@ -172,6 +172,8 @@ The `useAutocomplete` hook is also reexported from @mui/material for convenience
 import useAutocomplete from '@mui/material/useAutocomplete';
 ```
 
+- 📦 [4.5 kB gzipped](/size-snapshot/).
+
 {{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}}
 
 ### Customized hook
diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md
index f17a458873e939..f7f1eaca046fd4 100644
--- a/docs/data/material/components/use-media-query/use-media-query.md
+++ b/docs/data/material/components/use-media-query/use-media-query.md
@@ -12,6 +12,7 @@ Some of the key features:
 
 - ⚛️ It has an idiomatic React API.
 - 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically.
+- 📦 [1 kB gzipped](/size-snapshot/).
 - 🤖 It supports server-side rendering.
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

From 2386f08027ba6d8d0166ad9cf198250faba4b84a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 14 Jan 2024 22:09:44 +0100
Subject: [PATCH 2/4] Michal's review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michał Dudak <michal.dudak@gmail.com>
Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 docs/data/base/components/autocomplete/autocomplete.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md
index d90787ff0c1073..5535de69957608 100644
--- a/docs/data/base/components/autocomplete/autocomplete.md
+++ b/docs/data/base/components/autocomplete/autocomplete.md
@@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
-- 📦 [4.5 kB gzipped](/size-snapshot/).
+- 📦 [4.5 kB gzipped](https://bundlephobia.com/package/@mui/base).
 
 ## Introduction
 

From acf8e0f9096e8bd50c32719e9fbbf95aadf44002 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 14 Jan 2024 22:16:44 +0100
Subject: [PATCH 3/4] rely on bundle phobia more

---
 docs/.link-check-errors.txt                                     | 2 --
 .../base/components/click-away-listener/click-away-listener.md  | 2 +-
 docs/data/base/components/focus-trap/focus-trap.md              | 2 +-
 docs/data/base/components/modal/modal.md                        | 2 +-
 docs/data/material/components/autocomplete/autocomplete.md      | 2 +-
 .../data/material/components/use-media-query/use-media-query.md | 2 +-
 docs/public/_redirects                                          | 2 +-
 7 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
index 93c1a940153143..1a8203779f14d9 100644
--- a/docs/.link-check-errors.txt
+++ b/docs/.link-check-errors.txt
@@ -1,3 +1 @@
 Broken links found by `pnpm docs:link-check` that exist:
-
-- https://mui.com/size-snapshot/
diff --git a/docs/data/base/components/click-away-listener/click-away-listener.md b/docs/data/base/components/click-away-listener/click-away-listener.md
index 636dc7ce95b8f1..861c01b0cbbc03 100644
--- a/docs/data/base/components/click-away-listener/click-away-listener.md
+++ b/docs/data/base/components/click-away-listener/click-away-listener.md
@@ -13,7 +13,7 @@ githubLabel: 'component: ClickAwayListener'
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
-- 📦 [0.9 kB gzipped](/size-snapshot/).
+- 📦 [0.9 kB gzipped](https://bundlephobia.com/package/@mui/base).
 
 ## Introduction
 
diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md
index 96abfaf55b0f7c..e0cb9d8ca6904b 100644
--- a/docs/data/base/components/focus-trap/focus-trap.md
+++ b/docs/data/base/components/focus-trap/focus-trap.md
@@ -13,7 +13,7 @@ githubLabel: 'component: FocusTrap'
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
-- 📦 [1.6 kB gzipped](/size-snapshot/).
+- 📦 [1.6 kB gzipped](https://bundlephobia.com/package/@mui/base).
 
 ## Introduction
 
diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md
index b9295aca414320..a28edf8ca98361 100644
--- a/docs/data/base/components/modal/modal.md
+++ b/docs/data/base/components/modal/modal.md
@@ -15,7 +15,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
-- 📦 [5.1 kB gzipped](/size-snapshot/).
+- 📦 [5.1 kB gzipped](https://bundlephobia.com/package/@mui/base).
 
 ## Introduction
 
diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md
index 55086bdf720aec..5ab71766d16507 100644
--- a/docs/data/material/components/autocomplete/autocomplete.md
+++ b/docs/data/material/components/autocomplete/autocomplete.md
@@ -172,7 +172,7 @@ The `useAutocomplete` hook is also reexported from @mui/material for convenience
 import useAutocomplete from '@mui/material/useAutocomplete';
 ```
 
-- 📦 [4.5 kB gzipped](/size-snapshot/).
+- 📦 [4.6 kB gzipped](https://bundlephobia.com/package/@mui/material).
 
 {{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}}
 
diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md
index f7f1eaca046fd4..b77c5805094517 100644
--- a/docs/data/material/components/use-media-query/use-media-query.md
+++ b/docs/data/material/components/use-media-query/use-media-query.md
@@ -12,7 +12,7 @@ Some of the key features:
 
 - ⚛️ It has an idiomatic React API.
 - 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically.
-- 📦 [1 kB gzipped](/size-snapshot/).
+- 📦 [1.1 kB gzipped](https://bundlephobia.com/package/@mui/material).
 - 🤖 It supports server-side rendering.
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 8434c880d8d00c..f66c29a2b61370 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -5,7 +5,7 @@
 /spam / 301
 /sign-up / 301
 
-/size-snapshot https://s3.eu-central-1.amazonaws.com/mui-org-ci/artifacts/master/latest/size-snapshot.json 200
+/size-snapshot/ https://s3.eu-central-1.amazonaws.com/mui-org-ci/artifacts/master/latest/size-snapshot.json 200
 
 # To add when we finish work on v6
 # https://next.mui.com/* https://mui.com/:splat 301!

From 8f6ba7344c548746802d4983a83d86fa0ae2de31 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 14 Jan 2024 23:59:45 +0100
Subject: [PATCH 4/4] proof of concept

---
 docs/data/base/components/button/button.md    |  2 +
 docs/data/base/components/input/input.md      |  2 +
 .../components/number-input/number-input.md   |  2 +
 docs/data/base/components/select/select.md    |  2 +
 docs/data/base/components/slider/slider.md    |  2 +
 docs/pages/_app.js                            | 43 +++++++++++--------
 docs/pages/base-ui/react-slider/index.js      |  8 ++++
 docs/src/docs-infra/InitialPropsContext.ts    | 16 +++++++
 docs/src/docs-infra/createGetModuleSize.ts    | 40 +++++++++++++++++
 .../modules/components/ComponentLinkHeader.js | 22 +++++++++-
 docs/src/modules/components/getModuleSize.ts  | 22 ++++++++++
 docs/src/pages/versions/ReleasedVersions.js   |  2 +-
 packages/markdown/prepareMarkdown.js          |  3 +-
 13 files changed, 142 insertions(+), 24 deletions(-)
 create mode 100644 docs/src/docs-infra/InitialPropsContext.ts
 create mode 100644 docs/src/docs-infra/createGetModuleSize.ts
 create mode 100644 docs/src/modules/components/getModuleSize.ts

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index 1ce20c7cfdf67b..dfde0cb10e748f 100644
--- a/docs/data/base/components/button/button.md
+++ b/docs/data/base/components/button/button.md
@@ -15,6 +15,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [3.3 kB gzipped](https://bundlephobia.com/package/@mui/base).
+
 ## Introduction
 
 The Button component replaces the native HTML `<button>` element, and offers expanded options for styling and accessibility.
diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md
index 7a150f2fa67ebc..5b8e2dc6192ff4 100644
--- a/docs/data/base/components/input/input.md
+++ b/docs/data/base/components/input/input.md
@@ -14,6 +14,8 @@ githubLabel: 'component: input'
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [3.3 kB gzipped](https://bundlephobia.com/package/@mui/base).
+
 ## Introduction
 
 An input is a UI element that accepts text data from the user.
diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md
index fff86db09f16ec..30577a35655bb3 100644
--- a/docs/data/base/components/number-input/number-input.md
+++ b/docs/data/base/components/number-input/number-input.md
@@ -14,6 +14,8 @@ githubLabel: 'component: number input'
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [4.3 kB gzipped](https://bundlephobia.com/package/@mui/base).
+
 ## Introduction
 
 A number input is a UI element that accepts numeric values from the user.
diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
index 3e0021ee6818d4..e60131e948f122 100644
--- a/docs/data/base/components/select/select.md
+++ b/docs/data/base/components/select/select.md
@@ -15,6 +15,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sel
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [16.8 kB gzipped](https://bundlephobia.com/package/@mui/base).
+
 ## Introduction
 
 A select is a UI element that gives users a list of options to choose from.
diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
index de372799103529..a8a93b7efe33bd 100644
--- a/docs/data/base/components/slider/slider.md
+++ b/docs/data/base/components/slider/slider.md
@@ -16,6 +16,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
 
 {{"component": "modules/components/ComponentPageTabs.js"}}
 
+- 📦 [6.8 kB gzipped](https://bundlephobia.com/package/@mui/base).
+
 ## Introduction
 
 The Slider component lets users make selections from a range of values along a horizontal or vertical bar.
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index fda6434ca07aea..91c61f67894f55 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -14,6 +14,7 @@ import generalDocsPages from 'docs/data/docs/pages';
 import basePages from 'docs/data/base/pages';
 import docsInfraPages from 'docs/data/docs-infra/pages';
 import materialPages from 'docs/data/material/pages';
+import InitialPropsContext from 'docs/src/docs-infra/InitialPropsContext';
 import joyPages from 'docs/data/joy/pages';
 import systemPages from 'docs/data/system/pages';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -137,7 +138,7 @@ Tip: you can access the documentation \`theme\` object directly in the console.
   );
 }
 function AppWrapper(props) {
-  const { children, emotionCache, pageProps } = props;
+  const { children, emotionCache, pageProps, initialProps } = props;
 
   const router = useRouter();
   // TODO move productId & productCategoryId resolution to page layout.
@@ -294,22 +295,24 @@ function AppWrapper(props) {
         <meta name="mui:productId" content={productId} />
         <meta name="mui:productCategoryId" content={productCategoryId} />
       </NextHead>
-      <UserLanguageProvider defaultUserLanguage={pageProps.userLanguage}>
-        <CodeCopyProvider>
-          <CodeStylingProvider>
-            <CodeVariantProvider>
-              <PageContext.Provider value={pageContextValue}>
-                <ThemeProvider>
-                  <DocsStyledEngineProvider cacheLtr={emotionCache}>
-                    {children}
-                    <GoogleAnalytics />
-                  </DocsStyledEngineProvider>
-                </ThemeProvider>
-              </PageContext.Provider>
-            </CodeVariantProvider>
-          </CodeStylingProvider>
-        </CodeCopyProvider>
-      </UserLanguageProvider>
+      <InitialPropsContext.Provider value={initialProps}>
+        <UserLanguageProvider defaultUserLanguage={pageProps.userLanguage}>
+          <CodeCopyProvider>
+            <CodeStylingProvider>
+              <CodeVariantProvider>
+                <PageContext.Provider value={pageContextValue}>
+                  <ThemeProvider>
+                    <DocsStyledEngineProvider cacheLtr={emotionCache}>
+                      {children}
+                      <GoogleAnalytics />
+                    </DocsStyledEngineProvider>
+                  </ThemeProvider>
+                </PageContext.Provider>
+              </CodeVariantProvider>
+            </CodeStylingProvider>
+          </CodeCopyProvider>
+        </UserLanguageProvider>
+      </InitialPropsContext.Provider>
     </React.Fragment>
   );
 }
@@ -317,15 +320,17 @@ function AppWrapper(props) {
 AppWrapper.propTypes = {
   children: PropTypes.node.isRequired,
   emotionCache: PropTypes.object.isRequired,
+  initialProps: PropTypes.object,
   pageProps: PropTypes.object.isRequired,
 };
 
 export default function MyApp(props) {
-  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  const { Component, emotionCache = clientSideEmotionCache, pageProps: pagePropsProp } = props;
   const getLayout = Component.getLayout ?? ((page) => page);
+  const { initialProps, ...pageProps } = pagePropsProp;
 
   return (
-    <AppWrapper emotionCache={emotionCache} pageProps={pageProps}>
+    <AppWrapper emotionCache={emotionCache} pageProps={pageProps} initialProps={initialProps}>
       {getLayout(<Component {...pageProps} />)}
     </AppWrapper>
   );
diff --git a/docs/pages/base-ui/react-slider/index.js b/docs/pages/base-ui/react-slider/index.js
index 317fe79096011a..580f352d81f6fc 100644
--- a/docs/pages/base-ui/react-slider/index.js
+++ b/docs/pages/base-ui/react-slider/index.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import getModuleSize from 'docs/src/modules/components/getModuleSize';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/components/slider/slider.md?@mui/markdown';
 
@@ -11,3 +12,10 @@ export default function Page(props) {
 Page.getLayout = (page) => {
   return <AppFrame>{page}</AppFrame>;
 };
+
+Page.getInitialProps = async () => {
+  const moduleSize = await getModuleSize(pageProps);
+  return {
+    initialProps: { moduleSize },
+  };
+};
diff --git a/docs/src/docs-infra/InitialPropsContext.ts b/docs/src/docs-infra/InitialPropsContext.ts
new file mode 100644
index 00000000000000..dd0a9c78abcd65
--- /dev/null
+++ b/docs/src/docs-infra/InitialPropsContext.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+/**
+ * @typedef {Array<{ version: string; url: string }>} InitialPropsContextValue
+ */
+
+/**
+ * @type {React.Context<InitialPropsContextValue}
+ */
+const InitialPropsContext = React.createContext(null);
+
+if (process.env.NODE_ENV !== 'production') {
+  InitialPropsContext.displayName = 'InitialPropsContext';
+}
+
+export default InitialPropsContext;
diff --git a/docs/src/docs-infra/createGetModuleSize.ts b/docs/src/docs-infra/createGetModuleSize.ts
new file mode 100644
index 00000000000000..00d778b6217d79
--- /dev/null
+++ b/docs/src/docs-infra/createGetModuleSize.ts
@@ -0,0 +1,40 @@
+const cache = new Map();
+
+async function fetchBundlephobia(packageName: string, packageVersion: string) {
+  if (false && process.env.DEPLOY_ENV !== 'production' && process.env.DEPLOY_ENV !== 'staging') {
+    return {
+      assets: [],
+    };
+  }
+
+  if (cache.has(packageName)) {
+    return cache.get(packageName);
+  }
+
+  const bundlephobiaResponse = await fetch(`https://bundlephobia.com/api/exports-sizes?package=${packageName}@${packageVersion}`);
+  const data = await bundlephobiaResponse.json();
+  cache.set(packageName, data);
+  return data;
+}
+
+export default function createGetModuleSize({ packageVersion, productIdPackage }: { packageVersion: Object, productIdPackage: Object }) {
+  return async (pageProps: any) => {
+    const markdownHeader = pageProps.docs.en.headers;
+
+    // @ts-ignore
+    const packageName = productIdPackage[markdownHeader.productId];
+    // @ts-ignore
+    const data = await fetchBundlephobia(packageName, packageVersion[packageName]);
+
+    const modules = markdownHeader.components.concat(markdownHeader.hooks);
+
+    const sizes = data.assets.reduce((acc: any, asset: any) => {
+      if (modules.includes(asset.name)) {
+        acc[asset.name] = asset.gzip;
+      }
+      return acc;
+    }, {});
+
+    return sizes;
+  }
+}
diff --git a/docs/src/modules/components/ComponentLinkHeader.js b/docs/src/modules/components/ComponentLinkHeader.js
index b16baa3f1256ac..759ecbb9b3ce11 100644
--- a/docs/src/modules/components/ComponentLinkHeader.js
+++ b/docs/src/modules/components/ComponentLinkHeader.js
@@ -10,8 +10,17 @@ import AdobeXDIcon from 'docs/src/modules/components/AdobeXDIcon';
 import BundleSizeIcon from 'docs/src/modules/components/BundleSizeIcon';
 import W3CIcon from 'docs/src/modules/components/W3CIcon';
 import MaterialDesignIcon from 'docs/src/modules/components/MaterialDesignIcon';
+import InitialPropsContext from 'docs/src/docs-infra/InitialPropsContext';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 
+function formatBytes(bytes, decimals = 2) {
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'kB', 'MB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
 const Root = styled('ul')({
   margin: 0,
   padding: 0,
@@ -37,10 +46,19 @@ export default function ComponentLinkHeader(props) {
     design,
   } = props;
   const t = useTranslate();
-
+  const initialProps = React.useContext(InitialPropsContext);
+  const modules = headers.components.concat(headers.hooks);
   const packageName =
     headers.packageName ?? defaultPackageNames[headers.productId] ?? '@mui/material';
 
+  let bundleSizeLabel = t('bundleSize');
+
+  console.log(initialProps.moduleSize);
+
+  if (Object.keys(initialProps.moduleSize).length > 0) {
+    bundleSizeLabel = `${bundleSizeLabel}: ${formatBytes(initialProps.moduleSize[modules[0]])}`;
+  }
+
   return (
     <Root>
       {headers.githubLabel ? (
@@ -79,7 +97,7 @@ export default function ComponentLinkHeader(props) {
             data-ga-event-action="click"
             data-ga-event-label={t('bundleSize')}
             data-ga-event-split="0.1"
-            label={t('bundleSize')}
+            label={bundleSizeLabel}
           />
         </Tooltip>
       </li>
diff --git a/docs/src/modules/components/getModuleSize.ts b/docs/src/modules/components/getModuleSize.ts
new file mode 100644
index 00000000000000..7484685af684ec
--- /dev/null
+++ b/docs/src/modules/components/getModuleSize.ts
@@ -0,0 +1,22 @@
+import createGetModuleSize from 'docs/src/docs-infra/createGetModuleSize';
+import materialPkgJson from 'packages/mui-material/package.json';
+import joyPkgJson from 'packages/mui-joy/package.json';
+import systemPkgJson from 'packages/mui-system/package.json';
+import basePkgJson from 'packages/mui-base/package.json';
+
+const getModuleSize = createGetModuleSize({
+  packageVersion: {
+    '@mui/material': materialPkgJson.version,
+    '@mui/joy': joyPkgJson.version,
+    '@mui/system': systemPkgJson.version,
+    '@mui/base': basePkgJson.version,
+  },
+  productIdPackage: {
+    'material-ui': '@mui/material',
+    'joy-ui': '@mui/joy',
+    'base-ui': '@mui/base',
+    system: '@mui/system',
+  },
+});
+
+export default getModuleSize;
diff --git a/docs/src/pages/versions/ReleasedVersions.js b/docs/src/pages/versions/ReleasedVersions.js
index 337800f09dbe15..3a921ddf291dce 100644
--- a/docs/src/pages/versions/ReleasedVersions.js
+++ b/docs/src/pages/versions/ReleasedVersions.js
@@ -6,7 +6,7 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import Link from 'docs/src/modules/components/Link';
-import VersionsContext from './VersionsContext';
+import VersionsContext from 'docs/src/pages/versions/VersionsContext';
 
 const GITHUB_RELEASE_BASE_URL = 'https://github.com/mui/material-ui/releases/tag/';
 
diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js
index 296a6fdafe3cb4..c03dd54f871b57 100644
--- a/packages/markdown/prepareMarkdown.js
+++ b/packages/markdown/prepareMarkdown.js
@@ -49,7 +49,6 @@ function resolveComponentApiUrl(productId, componentPkg, component) {
 function prepareMarkdown(config) {
   const { fileRelativeContext, translations, componentPackageMapping = {}, options } = config;
 
-  const demos = {};
   /**
    * @type {Record<string, { rendered: Array<string | { component: string } | { demo:string }> }>}
    */
@@ -253,7 +252,7 @@ ${headers.hooks
     }
   }
 
-  return { demos, docs };
+  return { docs };
 }
 
 module.exports = prepareMarkdown;