From c74169779db872993eb309322009901415acdb40 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Tue, 20 Feb 2024 12:09:26 +0100
Subject: [PATCH] [code-infra] Move Link to @mui/docs (#40889)
Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
---
.circleci/config.yml | 2 +
.../components/material-icons/SearchIcons.js | 4 +-
.../default-theme/DefaultTheme.js | 2 +-
.../customization/density/DensityTool.js | 2 +-
.../MaterialUIComponents.js | 2 +-
docs/pages/_app.js | 7 +-
docs/pages/blog.tsx | 2 +-
docs/pages/careers.tsx | 2 +-
docs/pages/components.tsx | 4 +-
docs/pages/experiments/index.js | 2 +-
docs/src/components/about/AboutEnd.tsx | 2 +-
docs/src/components/about/HowToSupport.tsx | 2 +-
docs/src/components/about/OurValues.tsx | 2 +-
docs/src/components/about/Team.tsx | 2 +-
.../action/ComponentShowcaseCard.tsx | 2 +-
docs/src/components/action/InfoCard.tsx | 2 +-
docs/src/components/action/StylingInfo.tsx | 2 +-
docs/src/components/banner/AppFrameBanner.tsx | 2 +-
.../src/components/banner/AppHeaderBanner.tsx | 2 +-
.../banner/TableOfContentsBanner.tsx | 2 +-
docs/src/components/header/HeaderNavBar.tsx | 2 +-
.../components/header/HeaderNavDropdown.tsx | 2 +-
docs/src/components/home/DiamondSponsors.tsx | 2 +-
.../src/components/home/GetStartedButtons.tsx | 2 +-
docs/src/components/home/GoldSponsors.tsx | 2 +-
.../home/MaterialDesignComponents.tsx | 2 +-
docs/src/components/home/ProductsSwitcher.tsx | 2 +-
docs/src/components/home/SponsorCard.tsx | 2 +-
docs/src/components/pricing/EarlyBird.tsx | 2 +-
docs/src/components/pricing/PricingList.tsx | 2 +-
docs/src/components/pricing/PricingTable.tsx | 2 +-
.../pricing/PricingWhatToExpect.tsx | 2 +-
.../components/productBaseUI/BaseUIHero.tsx | 2 +-
.../productBaseUI/BaseUITestimonial.tsx | 2 +-
.../productBaseUI/BaseUIThemesDemo.tsx | 2 +-
.../productDesignKit/DesignKitDemo.tsx | 2 +-
.../productDesignKit/DesignKitFAQ.tsx | 2 +-
.../productDesignKit/DesignKitHero.tsx | 2 +-
.../productMaterial/MaterialDesignKits.tsx | 2 +-
.../productMaterial/MaterialEnd.tsx | 2 +-
.../productMaterial/MaterialHero.tsx | 2 +-
.../productMaterial/MaterialTemplates.tsx | 2 +-
.../productTemplate/TemplateDemo.tsx | 2 +-
.../productTemplate/TemplateHero.tsx | 2 +-
.../productX/XComponentsSwitcher.tsx | 2 +-
docs/src/components/productX/XDataGrid.tsx | 2 +-
docs/src/components/productX/XRoadmap.tsx | 2 +-
docs/src/layouts/AppFooter.tsx | 2 +-
docs/src/layouts/AppHeader.tsx | 4 +-
docs/src/modules/components/Ad.js | 2 +-
docs/src/modules/components/ApiPage.js | 2 +-
.../components/ApiPage/list/ClassesList.tsx | 2 +-
.../ApiPage/list/PropertiesList.tsx | 2 +-
.../components/ApiPage/list/SlotsList.tsx | 2 +-
.../ApiPage/sections/ClassesSection.tsx | 2 +-
.../ApiPage/sections/PropertiesSection.js | 2 +-
.../ApiPage/sections/SlotsSection.tsx | 2 +-
.../components/ApiPage/table/ClassesTable.tsx | 2 +-
.../ApiPage/table/PropertiesTable.tsx | 2 +-
.../components/ApiPage/table/SlotsTable.tsx | 2 +-
docs/src/modules/components/AppFrame.js | 2 +-
.../modules/components/AppLayoutDocsFooter.js | 4 +-
docs/src/modules/components/AppNavDrawer.js | 2 +-
.../modules/components/AppNavDrawerItem.js | 2 +-
docs/src/modules/components/AppSearch.js | 4 +-
.../modules/components/AppSettingsDrawer.js | 2 +-
.../modules/components/AppTableOfContents.js | 4 +-
docs/src/modules/components/BackToTop.tsx | 2 +-
.../modules/components/BaseUIComponents.js | 2 +-
.../modules/components/ComponentLinkHeader.js | 2 +-
.../modules/components/ComponentPageTabs.js | 4 +-
.../components/ComponentsApiContent.js | 2 +-
docs/src/modules/components/Demo.js | 2 +-
docs/src/modules/components/DemoEditor.tsx | 2 +-
docs/src/modules/components/DemoSandbox.js | 2 +-
docs/src/modules/components/DemoToolbar.js | 2 +-
.../src/modules/components/DiamondSponsors.js | 4 +-
docs/src/modules/components/EditPage.js | 2 +-
.../src/modules/components/GoogleAnalytics.js | 2 +-
docs/src/modules/components/Head.tsx | 2 +-
.../src/modules/components/HooksApiContent.js | 2 +-
.../modules/components/JoyThemeBuilder.tsx | 3 +-
docs/src/modules/components/Link.d.ts | 4 -
docs/src/modules/components/Link.tsx | 141 +-----------------
docs/src/modules/components/MarkdownDocs.js | 2 +-
docs/src/modules/components/MarkdownDocsV2.js | 2 +-
.../MaterialFreeTemplatesCollection.js | 2 +-
.../modules/components/MaterialShowcase.js | 4 +-
.../modules/components/MuiProductSelector.tsx | 2 +-
docs/src/modules/components/Notifications.js | 2 +-
.../modules/components/RichMarkdownElement.js | 2 +-
docs/src/modules/components/SkipLink.tsx | 2 +-
docs/src/modules/components/ThemeContext.js | 2 +-
docs/src/modules/components/TopLayoutBlog.js | 2 +-
.../modules/components/TopLayoutCareers.js | 2 +-
docs/src/modules/utils/i18n.js | 95 +-----------
docs/src/pages/versions/LatestVersions.js | 2 +-
docs/src/pages/versions/ReleasedVersions.js | 2 +-
package.json | 1 +
packages/mui-docs/.npmignore | 1 +
packages/mui-docs/package.json | 8 +-
.../src/DocsProvider/DocsProvider.tsx | 37 +++++
packages/mui-docs/src/DocsProvider/index.tsx | 1 +
packages/mui-docs/src/Link/Link.tsx | 138 +++++++++++++++++
packages/mui-docs/src/Link/index.ts | 1 +
packages/mui-docs/src/i18n/i18n.tsx | 121 +++++++++++++++
packages/mui-docs/src/i18n/index.ts | 1 +
packages/mui-docs/src/index.d.ts | 0
packages/mui-docs/src/index.js | 4 -
packages/mui-docs/tsconfig.build.json | 16 ++
packages/mui-docs/tsconfig.json | 8 +
pnpm-lock.yaml | 74 +++++++++
scripts/buildTypes.mjs | 7 +-
113 files changed, 524 insertions(+), 348 deletions(-)
delete mode 100644 docs/src/modules/components/Link.d.ts
create mode 100644 packages/mui-docs/.npmignore
create mode 100644 packages/mui-docs/src/DocsProvider/DocsProvider.tsx
create mode 100644 packages/mui-docs/src/DocsProvider/index.tsx
create mode 100644 packages/mui-docs/src/Link/Link.tsx
create mode 100644 packages/mui-docs/src/Link/index.ts
create mode 100644 packages/mui-docs/src/i18n/i18n.tsx
create mode 100644 packages/mui-docs/src/i18n/index.ts
delete mode 100644 packages/mui-docs/src/index.d.ts
delete mode 100644 packages/mui-docs/src/index.js
create mode 100644 packages/mui-docs/tsconfig.build.json
create mode 100644 packages/mui-docs/tsconfig.json
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 83ecb0ec835077..6a93b0944e60b6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -260,6 +260,8 @@ jobs:
- run:
name: Tests TypeScript definitions
command: pnpm typescript:ci
+ environment:
+ NODE_OPTIONS: --max-old-space-size=3072
- run:
name: Test module augmentation
command: |
diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
index 9cdd8a7d0ea5d6..fc2d1f34e158a5 100644
--- a/docs/data/material/components/material-icons/SearchIcons.js
+++ b/docs/data/material/components/material-icons/SearchIcons.js
@@ -21,8 +21,8 @@ import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import SvgIcon from '@mui/material/SvgIcon';
import * as mui from '@mui/icons-material';
-import Link from 'docs/src/modules/components/Link';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { Link } from '@mui/docs/Link';
+import { useTranslate } from '@mui/docs/i18n';
import useQueryParameterState from 'docs/src/modules/utils/useQueryParameterState';
// For Debugging
// import Menu from '@mui/icons-material/Menu';
diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/DefaultTheme.js
index 86df7d9295d62b..07024ca8c68148 100644
--- a/docs/data/material/customization/default-theme/DefaultTheme.js
+++ b/docs/data/material/customization/default-theme/DefaultTheme.js
@@ -4,7 +4,7 @@ import Divider from '@mui/material/Divider';
import { createTheme, styled } from '@mui/material/styles';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import ThemeViewer, {
useNodeIdsLazy,
} from 'docs/src/modules/components/ThemeViewer';
diff --git a/docs/data/material/customization/density/DensityTool.js b/docs/data/material/customization/density/DensityTool.js
index 99060eda788a1c..02f57e1eec9537 100644
--- a/docs/data/material/customization/density/DensityTool.js
+++ b/docs/data/material/customization/density/DensityTool.js
@@ -10,7 +10,7 @@ import Switch from '@mui/material/Switch';
import IncreaseIcon from '@mui/icons-material/AddCircleOutline';
import DecreaseIcon from '@mui/icons-material/RemoveCircleOutline';
import { DispatchContext } from 'docs/src/modules/components/ThemeContext';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
const minSpacing = 0;
const maxSpacing = 20;
diff --git a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
index 3c9465a407ecea..d9d8fab9e425e4 100644
--- a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
+++ b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
@@ -6,7 +6,7 @@ import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
const components = [
{
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 6b977c69ee9a67..e8c07a174183e1 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -22,14 +22,15 @@ import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy';
import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant';
import { CodeStylingProvider } from 'docs/src/modules/utils/codeStylingSolution';
-import { UserLanguageProvider } from 'docs/src/modules/utils/i18n';
import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
import createEmotionCache from 'docs/src/createEmotionCache';
import findActivePage from 'docs/src/modules/utils/findActivePage';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
+import { DocsProvider } from '@mui/docs/DocsProvider';
import './global.css';
import '../public/static/components-gallery/base-theme.css';
+import config from '../config';
// Remove the license warning from demonstration purposes
LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
@@ -294,7 +295,7 @@ function AppWrapper(props) {
-
+
@@ -309,7 +310,7 @@ function AppWrapper(props) {
-
+
);
}
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index 1a113ea6a6abbe..43cb1ccd3ca02d 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -25,7 +25,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import { authors as AUTHORS } from 'docs/src/modules/components/TopLayoutBlog';
import HeroEnd from 'docs/src/components/home/HeroEnd';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import generateRssFeed from 'docs/scripts/generateRSSFeed';
import Section from 'docs/src/layouts/Section';
import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing';
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index 18332a6f933ae2..0f1e1d90e3210c 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -14,7 +14,7 @@ import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetail from '@mui/material/AccordionDetails';
import OurValues from 'docs/src/components/about/OurValues';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import AppHeader from 'docs/src/layouts/AppHeader';
import AppFooter from 'docs/src/layouts/AppFooter';
import GradientText from 'docs/src/components/typography/GradientText';
diff --git a/docs/pages/components.tsx b/docs/pages/components.tsx
index 7d3194d4fa761c..bedd316cde428e 100644
--- a/docs/pages/components.tsx
+++ b/docs/pages/components.tsx
@@ -12,8 +12,8 @@ import AppFooter from 'docs/src/layouts/AppFooter';
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import Section from 'docs/src/layouts/Section';
import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
-import Link from 'docs/src/modules/components/Link';
+import { useTranslate } from '@mui/docs/i18n';
+import { Link } from '@mui/docs/Link';
import type { MuiPage } from 'docs/src/MuiPage';
import materialPages from 'docs/data/material/pages';
diff --git a/docs/pages/experiments/index.js b/docs/pages/experiments/index.js
index 26c01c3bb60516..5ec6b4629925a1 100644
--- a/docs/pages/experiments/index.js
+++ b/docs/pages/experiments/index.js
@@ -9,7 +9,7 @@ import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import GradientText from 'docs/src/components/typography/GradientText';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
export default function Experiments({ experiments }) {
const categories = {};
diff --git a/docs/src/components/about/AboutEnd.tsx b/docs/src/components/about/AboutEnd.tsx
index c52ccb6d4a1b0c..02562b245b617a 100644
--- a/docs/src/components/about/AboutEnd.tsx
+++ b/docs/src/components/about/AboutEnd.tsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import GradientText from 'docs/src/components/typography/GradientText';
import ROUTES from 'docs/src/route';
import Section from 'docs/src/layouts/Section';
diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx
index cc31544506ec9c..9dd95dab85874d 100644
--- a/docs/src/components/about/HowToSupport.tsx
+++ b/docs/src/components/about/HowToSupport.tsx
@@ -9,7 +9,7 @@ import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
import LocalAtmRoundedIcon from '@mui/icons-material/LocalAtmRounded';
import GradientText from 'docs/src/components/typography/GradientText';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
index a7615796a3b485..ad9db9243c4c73 100644
--- a/docs/src/components/about/OurValues.tsx
+++ b/docs/src/components/about/OurValues.tsx
@@ -5,7 +5,7 @@ import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import GradientText from 'docs/src/components/typography/GradientText';
import ROUTES from 'docs/src/route';
import Section from 'docs/src/layouts/Section';
diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx
index 85df0b8643dde7..05464dd093739e 100644
--- a/docs/src/components/about/Team.tsx
+++ b/docs/src/components/about/Team.tsx
@@ -13,7 +13,7 @@ import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRou
import XIcon from '@mui/icons-material/X';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
diff --git a/docs/src/components/action/ComponentShowcaseCard.tsx b/docs/src/components/action/ComponentShowcaseCard.tsx
index 9c3620011fe1fb..ce4be602553222 100644
--- a/docs/src/components/action/ComponentShowcaseCard.tsx
+++ b/docs/src/components/action/ComponentShowcaseCard.tsx
@@ -5,7 +5,7 @@ import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
interface ComponentShowcaseCardProps {
imgLoading?: 'eager';
diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx
index 5cdb3d1995c839..45ba7e23cbfdb6 100644
--- a/docs/src/components/action/InfoCard.tsx
+++ b/docs/src/components/action/InfoCard.tsx
@@ -3,7 +3,7 @@ import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography, { TypographyProps } from '@mui/material/Typography';
-import Link, { LinkProps } from 'docs/src/modules/components/Link';
+import { Link, LinkProps } from '@mui/docs/Link';
interface GlowingIconContainerProps {
icon: React.ReactNode;
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index e67cf63941c5ce..8e9eea208c0573 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/docs/src/components/action/StylingInfo.tsx
@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
export default function StylingInfo({
diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
index 783b2ef8582bc7..139c369d36773b 100644
--- a/docs/src/components/banner/AppFrameBanner.tsx
+++ b/docs/src/components/banner/AppFrameBanner.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { alpha } from '@mui/material/styles';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import FEATURE_TOGGLE from 'docs/src/featureToggle';
import PageContext from 'docs/src/modules/components/PageContext';
import { convertProductIdToName } from 'docs/src/modules/components/AppSearch';
diff --git a/docs/src/components/banner/AppHeaderBanner.tsx b/docs/src/components/banner/AppHeaderBanner.tsx
index badeab3e283194..ae83ac840550aa 100644
--- a/docs/src/components/banner/AppHeaderBanner.tsx
+++ b/docs/src/components/banner/AppHeaderBanner.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
import FEATURE_TOGGLE from 'docs/src/featureToggle';
diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx
index f68238559dce87..66f492e4b3ca8b 100644
--- a/docs/src/components/banner/TableOfContentsBanner.tsx
+++ b/docs/src/components/banner/TableOfContentsBanner.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { alpha } from '@mui/material/styles';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import FEATURE_TOGGLE from 'docs/src/featureToggle';
export default function TableOfContentsBanner() {
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index 8711e66a16f856..a5577aa05ab62a 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -11,7 +11,7 @@ import Fade from '@mui/material/Fade';
import Typography from '@mui/material/Typography';
import IconImage from 'docs/src/components/icon/IconImage';
import ROUTES from 'docs/src/route';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
const Navigation = styled('nav')(({ theme }) => [
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index 8474a58c071c95..95fbe4c39c0c70 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -8,7 +8,7 @@ import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
import SvgHamburgerMenu from 'docs/src/icons/SvgHamburgerMenu';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
const Anchor = styled('a')<{ component?: React.ElementType; noLinkStyle?: boolean }>(
diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
index 3db767540b4399..2746ae899018e9 100644
--- a/docs/src/components/home/DiamondSponsors.tsx
+++ b/docs/src/components/home/DiamondSponsors.tsx
@@ -5,7 +5,7 @@ import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import AddRounded from '@mui/icons-material/AddRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import SponsorCard from 'docs/src/components/home/SponsorCard';
const DIAMONDs = [
diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx
index e9079cd3dfd550..0639b8ce5f889f 100644
--- a/docs/src/components/home/GetStartedButtons.tsx
+++ b/docs/src/components/home/GetStartedButtons.tsx
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
import CheckRounded from '@mui/icons-material/CheckRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import NpmCopyButton from 'docs/src/components/action/NpmCopyButton';
interface GetStartedButtonsProps extends BoxProps {
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index ecbea93a5049ca..dbb23f042c7564 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
import AddRounded from '@mui/icons-material/AddRounded';
import Grid from '@mui/material/Grid';
import SponsorCard from 'docs/src/components/home/SponsorCard';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
const GOLDs = [
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index ead70ff8dc866f..6796c028965c8e 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -33,7 +33,7 @@ import MailRounded from '@mui/icons-material/MailRounded';
import VerifiedUserRounded from '@mui/icons-material/VerifiedUserRounded';
import HelpCenterRounded from '@mui/icons-material/HelpCenterRounded';
import ROUTES from 'docs/src/route';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
const Grid = styled('div')(({ theme }) => [
diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx
index a92fcbba30beac..d4860ba18ace4a 100644
--- a/docs/src/components/home/ProductsSwitcher.tsx
+++ b/docs/src/components/home/ProductsSwitcher.tsx
@@ -9,7 +9,7 @@ import Stack from '@mui/material/Stack';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import IconImage from 'docs/src/components/icon/IconImage';
import Highlighter from 'docs/src/components/action/Highlighter';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
const SwipeableViews = dynamic(() => import('react-swipeable-views'), { ssr: false });
diff --git a/docs/src/components/home/SponsorCard.tsx b/docs/src/components/home/SponsorCard.tsx
index 3c916d57880466..57db5d26c72354 100644
--- a/docs/src/components/home/SponsorCard.tsx
+++ b/docs/src/components/home/SponsorCard.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import LaunchRounded from '@mui/icons-material/LaunchRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
export default function SponsorCard(props: {
item: {
diff --git a/docs/src/components/pricing/EarlyBird.tsx b/docs/src/components/pricing/EarlyBird.tsx
index db70c5fc5e9381..f375f56579de15 100644
--- a/docs/src/components/pricing/EarlyBird.tsx
+++ b/docs/src/components/pricing/EarlyBird.tsx
@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import { alpha } from '@mui/material/styles';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
export default function EarlyBird() {
return (
diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
index 70f6499a5e9a4d..46eceaabc760a6 100644
--- a/docs/src/components/pricing/PricingList.tsx
+++ b/docs/src/components/pricing/PricingList.tsx
@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import PricingTable, { PlanName, PlanPrice } from 'docs/src/components/pricing/PricingTable';
import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext';
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 9e8a890232fb60..00dcffd7011fc5 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -12,7 +12,7 @@ import { useRouter } from 'next/router';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import LaunchRounded from '@mui/icons-material/LaunchRounded';
import UnfoldMoreRounded from '@mui/icons-material/UnfoldMoreRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import IconImage from 'docs/src/components/icon/IconImage';
import LicensingModelSwitch from 'docs/src/components/pricing/LicensingModelSwitch';
import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext';
diff --git a/docs/src/components/pricing/PricingWhatToExpect.tsx b/docs/src/components/pricing/PricingWhatToExpect.tsx
index b28441cfa6dc1b..ffeaea5868b4e6 100644
--- a/docs/src/components/pricing/PricingWhatToExpect.tsx
+++ b/docs/src/components/pricing/PricingWhatToExpect.tsx
@@ -9,7 +9,7 @@ import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
import Section from 'docs/src/layouts/Section';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import GradientText from 'docs/src/components/typography/GradientText';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
index d3764a834cdcb5..910d59d96c29c0 100644
--- a/docs/src/components/productBaseUI/BaseUIHero.tsx
+++ b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -7,7 +7,7 @@ import IconImage from 'docs/src/components/icon/IconImage';
import GradientText from 'docs/src/components/typography/GradientText';
import ROUTES from 'docs/src/route';
import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
const BaseUIThemesDemo = dynamic(() => import('./BaseUIThemesDemo'), {
ssr: false,
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
index 53f24fca570721..c876ad1627cd3a 100644
--- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx
+++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -7,7 +7,7 @@ import Grid from '@mui/material/Unstable_Grid2';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import Section from 'docs/src/layouts/Section';
export default function BaseUITestimonial() {
diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
index 1f77a7257171ee..b8d24d54b97e9d 100644
--- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -42,7 +42,7 @@ import InterestsRoundedIcon from '@mui/icons-material/InterestsRounded';
import RadioRoundedIcon from '@mui/icons-material/RadioRounded';
import ROUTES from 'docs/src/route';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import heroVariables from 'docs/src/components/productBaseUI/heroVariables';
const Panel = styled('div')({
diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx
index 10c95bae3e7f6a..841164afd2a071 100644
--- a/docs/src/components/productDesignKit/DesignKitDemo.tsx
+++ b/docs/src/components/productDesignKit/DesignKitDemo.tsx
@@ -16,7 +16,7 @@ import Item, { Group } from 'docs/src/components/action/Item';
import Highlighter from 'docs/src/components/action/Highlighter';
import More from 'docs/src/components/action/More';
import Frame from 'docs/src/components/action/Frame';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
const DEMOS = ['Components', 'Branding', 'Iconography'];
diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
index 4bc93c18981a1c..5e4f052cc9a4c3 100644
--- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx
+++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -10,7 +10,7 @@ import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetail from '@mui/material/AccordionDetails';
import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
-import InternalLink from 'docs/src/modules/components/Link';
+import { Link as InternalLink } from '@mui/docs/Link';
import Section from 'docs/src/layouts/Section';
const faqData = [
diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx
index 64fc7c52db6cf7..b7a9e61583898c 100644
--- a/docs/src/components/productDesignKit/DesignKitHero.tsx
+++ b/docs/src/components/productDesignKit/DesignKitHero.tsx
@@ -7,7 +7,7 @@ import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRou
import GradientText from 'docs/src/components/typography/GradientText';
import HeroContainer from 'docs/src/layouts/HeroContainer';
import IconImage from 'docs/src/components/icon/IconImage';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import {
DesignKitImagesSet1,
DesignKitImagesSet2,
diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx
index c2a97d4f03fdc2..ef65d052dee64a 100644
--- a/docs/src/components/productMaterial/MaterialDesignKits.tsx
+++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx
@@ -16,7 +16,7 @@ import Item, { Group } from 'docs/src/components/action/Item';
import Highlighter from 'docs/src/components/action/Highlighter';
import More from 'docs/src/components/action/More';
import Frame from 'docs/src/components/action/Frame';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
const DEMOS = ['Components', 'Branding', 'Iconography'];
diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx
index fb2a270a5bc262..99d91ad0c83dd6 100644
--- a/docs/src/components/productMaterial/MaterialEnd.tsx
+++ b/docs/src/components/productMaterial/MaterialEnd.tsx
@@ -11,7 +11,7 @@ import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import GradientText from 'docs/src/components/typography/GradientText';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
export default function MaterialEnd() {
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index ea1bf4a200ead9..0df46b622ac450 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -60,7 +60,7 @@ import HeroContainer from 'docs/src/layouts/HeroContainer';
import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
import GradientText from 'docs/src/components/typography/GradientText';
import { getDesignTokens } from 'docs/src/modules/brandingTheme';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
function Checkboxes() {
diff --git a/docs/src/components/productMaterial/MaterialTemplates.tsx b/docs/src/components/productMaterial/MaterialTemplates.tsx
index 554a56b69b1620..363a98a8f3f9d6 100644
--- a/docs/src/components/productMaterial/MaterialTemplates.tsx
+++ b/docs/src/components/productMaterial/MaterialTemplates.tsx
@@ -16,7 +16,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
import Item, { Group } from 'docs/src/components/action/Item';
import Highlighter from 'docs/src/components/action/Highlighter';
import Frame from 'docs/src/components/action/Frame';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import More from 'docs/src/components/action/More';
export const DEMOS = ['Dashboard', 'Landing Pages', 'E-commerce'];
diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx
index b53eaa55637913..6ad9ce04e8491a 100644
--- a/docs/src/components/productTemplate/TemplateDemo.tsx
+++ b/docs/src/components/productTemplate/TemplateDemo.tsx
@@ -14,7 +14,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
import Item, { Group } from 'docs/src/components/action/Item';
import Highlighter from 'docs/src/components/action/Highlighter';
import Frame from 'docs/src/components/action/Frame';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import More from 'docs/src/components/action/More';
import { DEMOS, icons, TEMPLATES } from 'docs/src/components/productMaterial/MaterialTemplates';
diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
index 19f097d6d47f3d..aff549228dac2f 100644
--- a/docs/src/components/productTemplate/TemplateHero.tsx
+++ b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -6,7 +6,7 @@ import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRou
import GradientText from 'docs/src/components/typography/GradientText';
import HeroContainer from 'docs/src/layouts/HeroContainer';
import IconImage from 'docs/src/components/icon/IconImage';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import {
StoreTemplatesSet1,
StoreTemplatesSet2,
diff --git a/docs/src/components/productX/XComponentsSwitcher.tsx b/docs/src/components/productX/XComponentsSwitcher.tsx
index 0aed766b99698d..761ea0261fd39e 100644
--- a/docs/src/components/productX/XComponentsSwitcher.tsx
+++ b/docs/src/components/productX/XComponentsSwitcher.tsx
@@ -10,7 +10,7 @@ import AccountTreeRounded from '@mui/icons-material/AccountTreeRounded';
import BarChartRoundedIcon from '@mui/icons-material/BarChartRounded';
import { visuallyHidden } from '@mui/utils';
import Highlighter from 'docs/src/components/action/Highlighter';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
const SwipeableViews = dynamic(() => import('react-swipeable-views'), { ssr: false });
diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
index bd61c9272e0be2..f0b43ee5f86fad 100644
--- a/docs/src/components/productX/XDataGrid.tsx
+++ b/docs/src/components/productX/XDataGrid.tsx
@@ -22,7 +22,7 @@ import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
import FlashCode from 'docs/src/components/animation/FlashCode';
import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
import StylingInfo from 'docs/src/components/action/StylingInfo';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import ROUTES from 'docs/src/route';
const DEMOS = ['Editing', 'Selection', 'Sorting', 'Pagination', 'Filtering'] as const;
diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx
index 4d342490a6621b..e9148796d8d5f0 100644
--- a/docs/src/components/productX/XRoadmap.tsx
+++ b/docs/src/components/productX/XRoadmap.tsx
@@ -16,7 +16,7 @@ import AutoGraphRoundedIcon from '@mui/icons-material/AutoGraphRounded';
import SpeedRounded from '@mui/icons-material/SpeedRounded';
import { alpha } from '@mui/material/styles';
import ROUTES from 'docs/src/route';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import Section from 'docs/src/layouts/Section';
import GradientText from 'docs/src/components/typography/GradientText';
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index bf34878d875498..7f7393871a6ab3 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -15,7 +15,7 @@ import SvgMuiLogotype from 'docs/src/icons/SvgMuiLogotype';
import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
import ROUTES from 'docs/src/route';
import DiscordIcon from 'docs/src/icons/DiscordIcon';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import SvgStackOverflow from 'docs/src/icons/SvgStackOverflow';
interface AppFooterProps {
diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
index 8aba9bb331058d..6e467d01819e7d 100644
--- a/docs/src/layouts/AppHeader.tsx
+++ b/docs/src/layouts/AppHeader.tsx
@@ -11,9 +11,9 @@ import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
import HeaderNavBar from 'docs/src/components/header/HeaderNavBar';
import HeaderNavDropdown from 'docs/src/components/header/HeaderNavDropdown';
import ThemeModeToggle from 'docs/src/components/header/ThemeModeToggle';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import { DeferredAppSearch } from 'docs/src/modules/components/AppFrame';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
const Header = styled('header')(({ theme }) => [
{
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index 1247850638aa61..eddd42bb79bfcf 100644
--- a/docs/src/modules/components/Ad.js
+++ b/docs/src/modules/components/Ad.js
@@ -6,7 +6,7 @@ import Paper from '@mui/material/Paper';
import AdCarbon from 'docs/src/modules/components/AdCarbon';
import AdInHouse from 'docs/src/modules/components/AdInHouse';
import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
function PleaseDisableAdblock(props) {
const t = useTranslate();
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index abc2cfa1781d6d..7bf385bf42e5d4 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -8,7 +8,7 @@ import AdGuest from 'docs/src/modules/components/AdGuest';
import Alert from '@mui/material/Alert';
import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
import { alpha } from '@mui/material/styles';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
index b10494b62882f3..fdf4497f465f4b 100644
--- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import { styled } from '@mui/material/styles';
import kebabCase from 'lodash/kebabCase';
import { ComponentClassDefinition } from '@mui-internal/docs-utils';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import ExpandableApiItem, {
ApiItemContaier,
} from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem';
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index 46bf826b14ce57..af3d018b340418 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import kebabCase from 'lodash/kebabCase';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import {
brandingDarkTheme as darkTheme,
brandingLightTheme as lightTheme,
diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
index 03db0f5396e06f..f205d62009f5fd 100644
--- a/docs/src/modules/components/ApiPage/list/SlotsList.tsx
+++ b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
@@ -5,7 +5,7 @@ import {
brandingLightTheme as lightTheme,
brandingDarkTheme as darkTheme,
} from 'docs/src/modules/brandingTheme';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import ExpandableApiItem, {
ApiItemContaier,
} from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem';
diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
index 1436bcdaac2b2a..5f6badcd5150c8 100644
--- a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
+++ b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
@@ -1,6 +1,6 @@
/* eslint-disable react/no-danger */
import * as React from 'react';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import { ComponentClassDefinition } from '@mui-internal/docs-utils';
import Box from '@mui/material/Box';
import ToggleDisplayOption, {
diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
index 034fc15e8c4162..295d4c1187c516 100644
--- a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
+++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -2,7 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import ToggleDisplayOption, {
useApiPageOption,
} from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption';
diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
index c93869bb90f81f..dcbb7bd63807af 100644
--- a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
+++ b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
@@ -1,7 +1,7 @@
/* eslint-disable react/no-danger */
import * as React from 'react';
import Box from '@mui/material/Box';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import ToggleDisplayOption, {
ApiDisplayOptions,
useApiPageOption,
diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
index 604259f7682599..d49d35f8cc7236 100644
--- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
@@ -8,7 +8,7 @@ import {
} from 'docs/src/modules/brandingTheme';
import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList';
import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning';
const StyledTable = styled('table')(
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
index 2e245a3b0f7eb6..40622f2b29499a 100644
--- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -1,7 +1,7 @@
/* eslint-disable react/no-danger */
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import {
brandingDarkTheme as darkTheme,
brandingLightTheme as lightTheme,
diff --git a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx
index 8b2bf8e7176166..d08c3e68aa3133 100644
--- a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx
@@ -1,6 +1,6 @@
/* eslint-disable react/no-danger */
import * as React from 'react';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import { styled, alpha } from '@mui/material/styles';
import {
brandingDarkTheme as darkTheme,
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 93a2c368b5c6ef..9f43d152a13b07 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -23,7 +23,7 @@ import Notifications from 'docs/src/modules/components/Notifications';
import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
import SkipLink from 'docs/src/modules/components/SkipLink';
import PageContext from 'docs/src/modules/components/PageContext';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
import AppFrameBanner from 'docs/src/components/banner/AppFrameBanner';
diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
index 7857133a8a4277..91d36fd6a11039 100644
--- a/docs/src/modules/components/AppLayoutDocsFooter.js
+++ b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -27,11 +27,11 @@ import RssFeedIcon from '@mui/icons-material/RssFeed';
import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded';
import DiscordIcon from 'docs/src/icons/DiscordIcon';
// Other imports
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import PageContext from 'docs/src/modules/components/PageContext';
import EditPage from 'docs/src/modules/components/EditPage';
import SvgMuiLogotype from 'docs/src/icons/SvgMuiLogotype';
-import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
import { getCookie, pageToTitleI18n } from 'docs/src/modules/utils/helpers';
const FooterLink = styled(Typography)(({ theme }) => {
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 2bb699b2827bc4..32ad7954cee8ff 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -19,7 +19,7 @@ import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
import AppNavDrawerItem from 'docs/src/modules/components/AppNavDrawerItem';
import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
import PageContext from 'docs/src/modules/components/PageContext';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
// TODO: Collapse should expose an API to customize the duration based on the height.
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 324a5c93ad49ad..82b436a56e5b14 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -6,7 +6,7 @@ import Collapse from '@mui/material/Collapse';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import { samePageLinkNavigation } from 'docs/src/modules/components/MarkdownLinks';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import standardNavIcons from './AppNavIcons';
const Item = styled(
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 4f3977de986dbb..60c83279ec945c 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -23,8 +23,8 @@ import GlobalStyles from '@mui/material/GlobalStyles';
import { alpha, styled } from '@mui/material/styles';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import { LANGUAGES_SSR } from 'docs/config';
-import Link from 'docs/src/modules/components/Link';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { Link } from '@mui/docs/Link';
+import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
import PageContext from 'docs/src/modules/components/PageContext';
diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index 93548164573c46..3ddad7cb06a71b 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -17,7 +17,7 @@ import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirectionLToR';
import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
const Heading = styled(Typography)(({ theme }) => ({
margin: '20px 0 10px',
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index beb4d7a1e8fedc..cf685a681782e6 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -5,8 +5,8 @@ import throttle from 'lodash/throttle';
import { styled, alpha } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import NoSsr from '@mui/material/NoSsr';
-import Link from 'docs/src/modules/components/Link';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { Link } from '@mui/docs/Link';
+import { useTranslate } from '@mui/docs/i18n';
import { samePageLinkNavigation } from 'docs/src/modules/components/MarkdownLinks';
import TableOfContentsBanner from 'docs/src/components/banner/TableOfContentsBanner';
import featureToggle from 'docs/src/featureToggle';
diff --git a/docs/src/modules/components/BackToTop.tsx b/docs/src/modules/components/BackToTop.tsx
index 4f4dc538e28e9e..a3366f7f626fb4 100644
--- a/docs/src/modules/components/BackToTop.tsx
+++ b/docs/src/modules/components/BackToTop.tsx
@@ -6,7 +6,7 @@ import Tooltip from '@mui/material/Tooltip';
import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';
import Fade from '@mui/material/Fade';
import { Theme } from '@mui/material/styles';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
export default function BackToTop() {
const t = useTranslate();
diff --git a/docs/src/modules/components/BaseUIComponents.js b/docs/src/modules/components/BaseUIComponents.js
index 3eacefae94ff24..d361c29d0aeb55 100644
--- a/docs/src/modules/components/BaseUIComponents.js
+++ b/docs/src/modules/components/BaseUIComponents.js
@@ -4,7 +4,7 @@ import CardMedia from '@mui/material/CardMedia';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { alpha } from '@mui/material/styles';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
function components() {
return [
diff --git a/docs/src/modules/components/ComponentLinkHeader.js b/docs/src/modules/components/ComponentLinkHeader.js
index 1be2351a21016b..ebc8e4cef3e9be 100644
--- a/docs/src/modules/components/ComponentLinkHeader.js
+++ b/docs/src/modules/components/ComponentLinkHeader.js
@@ -10,7 +10,7 @@ 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 { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
const Root = styled('ul')({
margin: 0,
diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js
index 1d61b09b846ae9..5e43b1a96a8ef6 100644
--- a/docs/src/modules/components/ComponentPageTabs.js
+++ b/docs/src/modules/components/ComponentPageTabs.js
@@ -5,8 +5,8 @@ import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Tabs, { tabsClasses } from '@mui/material/Tabs';
import Tab, { tabClasses } from '@mui/material/Tab';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
-import Link from 'docs/src/modules/components/Link';
+import { useTranslate } from '@mui/docs/i18n';
+import { Link } from '@mui/docs/Link';
export const HEIGHT = 50;
diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js
index a49959898ec535..5d7e1685b2518b 100644
--- a/docs/src/modules/components/ComponentsApiContent.js
+++ b/docs/src/modules/components/ComponentsApiContent.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import kebabCase from 'lodash/kebabCase';
import { useRouter } from 'next/router';
import { exactProp } from '@mui/utils';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 15250e4312f19a..12cdd5d9c5e1d2 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -19,7 +19,7 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import { useCodeVariant } from 'docs/src/modules/utils/codeVariant';
import { useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
-import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
import BrandingProvider from 'docs/src/BrandingProvider';
import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index 09635d291597eb..0172043e473a87 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -6,7 +6,7 @@ import { styled, useTheme } from '@mui/material/styles';
import prism from '@mui/markdown/prism';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import { useCodeCopy } from 'docs/src/modules/utils/CodeCopy';
import { blueDark } from 'docs/src/modules/brandingTheme';
diff --git a/docs/src/modules/components/DemoSandbox.js b/docs/src/modules/components/DemoSandbox.js
index 78aff5ce50a01e..57ebf0ace75a40 100644
--- a/docs/src/modules/components/DemoSandbox.js
+++ b/docs/src/modules/components/DemoSandbox.js
@@ -12,7 +12,7 @@ import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
import { useTheme, styled, createTheme, ThemeProvider } from '@mui/material/styles';
import rtl from 'jss-rtl';
import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import { getDesignTokens } from 'docs/src/modules/brandingTheme';
import { highDensity } from 'docs/src/modules/components/ThemeContext';
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index 88b25a700b6d15..4e6594f7b9709b 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -24,7 +24,7 @@ import { useRouter } from 'next/router';
import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
import { useSetCodeVariant } from 'docs/src/modules/utils/codeVariant';
import { useSetCodeStyling, useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
import codeSandbox from '../sandbox/CodeSandbox';
import stackBlitz from '../sandbox/StackBlitz';
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index b49827730bfe23..7488776b44d2a6 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -5,8 +5,8 @@ import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
-import Link from 'docs/src/modules/components/Link';
+import { useTranslate } from '@mui/docs/i18n';
+import { Link } from '@mui/docs/Link';
const NativeLink = styled('a')(({ theme }) => ({
boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
index 76cb9ef8a16669..d8b16b3067ee3b 100644
--- a/docs/src/modules/components/EditPage.js
+++ b/docs/src/modules/components/EditPage.js
@@ -2,7 +2,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import GitHubIcon from '@mui/icons-material/GitHub';
-import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' };
diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
index fb4c511f87c2d6..f9821a100d2bea 100644
--- a/docs/src/modules/components/GoogleAnalytics.js
+++ b/docs/src/modules/components/GoogleAnalytics.js
@@ -4,7 +4,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import { useRouter } from 'next/router';
import { useNoSsrCodeVariant } from 'docs/src/modules/utils/codeVariant';
import { useNoSsrCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
-import { useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage } from '@mui/docs/i18n';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
// So we can write code like:
diff --git a/docs/src/modules/components/Head.tsx b/docs/src/modules/components/Head.tsx
index c203562c298e73..7366a2ce2fd8ff 100644
--- a/docs/src/modules/components/Head.tsx
+++ b/docs/src/modules/components/Head.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import NextHead from 'next/head';
import { useRouter } from 'next/router';
import { LANGUAGES_SSR } from 'docs/config';
-import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
// #major-version-switch
diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js
index 5ae5ebee298608..80f057ca98e84d 100644
--- a/docs/src/modules/components/HooksApiContent.js
+++ b/docs/src/modules/components/HooksApiContent.js
@@ -3,7 +3,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import kebabCase from 'lodash/kebabCase';
import { exactProp } from '@mui/utils';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
index 51da85ac1ac359..e668edbed5979e 100644
--- a/docs/src/modules/components/JoyThemeBuilder.tsx
+++ b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
-// @ts-ignore
-import { TypeScript as TypeScriptIcon } from '@mui/docs';
+import TypeScriptIcon from '@mui/docs/svgIcons/TypeScript';
import startCase from 'lodash/startCase';
import { deepmerge } from '@mui/utils';
import { decomposeColor } from '@mui/system';
diff --git a/docs/src/modules/components/Link.d.ts b/docs/src/modules/components/Link.d.ts
deleted file mode 100644
index afebd27ce1be05..00000000000000
--- a/docs/src/modules/components/Link.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { LinkProps as MuiLinkProps } from '@mui/material/Link';
-import { LinkProps } from 'next/link';
-
-export default function Link(props: LinkProps & MuiLinkProps): JSX.Element;
diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx
index 57c4b21a67e4d9..6a3fba0c136afe 100644
--- a/docs/src/modules/components/Link.tsx
+++ b/docs/src/modules/components/Link.tsx
@@ -1,138 +1,5 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { useRouter } from 'next/router';
-import NextLink, { LinkProps as NextLinkProps } from 'next/link';
-import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
-import { styled } from '@mui/material/styles';
-import { useUserLanguage } from 'docs/src/modules/utils/i18n';
-import { LANGUAGES_IGNORE_PAGES } from 'docs/config';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/i18n`
-/**
- * File to keep in sync with:
- *
- * - /docs/src/modules/components/Link.tsx
- * - /examples/material-ui-nextjs-pages-router/src/Link.js
- * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
- */
-
-// Add support for the sx prop for consistency with the other branches.
-const Anchor = styled('a')({});
-
-interface NextLinkComposedProps
- extends Omit, 'href'>,
- Omit {
- to: NextLinkProps['href'];
- linkAs?: NextLinkProps['as'];
-}
-
-const NextLinkComposed = React.forwardRef(
- function NextLinkComposed(props, ref) {
- const {
- to,
- linkAs,
- replace,
- scroll,
- shallow,
- prefetch,
- legacyBehavior = true,
- locale,
- ...other
- } = props;
-
- return (
-
-
-
- );
- },
-);
-
-export type LinkProps = {
- activeClassName?: string;
- as?: NextLinkProps['as'];
- href: NextLinkProps['href'];
- linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled().
- noLinkStyle?: boolean;
-} & Omit &
- Omit;
-
-// A styled version of the Next.js Pages Router Link component:
-// https://nextjs.org/docs/pages/api-reference/components/link
-const Link = React.forwardRef(function Link(props, ref) {
- const {
- activeClassName = 'active',
- as,
- className: classNameProps,
- href,
- legacyBehavior,
- linkAs: linkAsProp,
- locale,
- noLinkStyle,
- prefetch,
- replace,
- role, // Link don't have roles.
- scroll,
- shallow,
- ...other
- } = props;
-
- const router = useRouter();
- const pathname = typeof href === 'string' ? href : href?.pathname;
- const routerPathname = router.pathname.replace('/[docsTab]', '');
-
- const shouldBeActive = routerPathname === pathname;
-
- const className = clsx(classNameProps, {
- [activeClassName]: shouldBeActive && activeClassName,
- });
-
- const userLanguage = useUserLanguage();
-
- let linkAs = linkAsProp || as || (href as string);
- if (
- userLanguage !== 'en' &&
- pathname &&
- pathname.indexOf('/') === 0 &&
- !LANGUAGES_IGNORE_PAGES(pathname) &&
- !pathname.startsWith(`/${userLanguage}/`)
- ) {
- linkAs = `/${userLanguage}${linkAs}`;
- }
-
- const nextjsProps = {
- to: href,
- linkAs,
- replace,
- scroll,
- shallow,
- legacyBehavior,
- prefetch,
- locale,
- };
-
- if (noLinkStyle) {
- return ;
- }
-
- return (
-
- );
-});
-
-export default Link;
+export * from '@mui/docs/Link';
+export { Link as default } from '@mui/docs/Link';
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 285f5634485137..68fce71531bd04 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -7,7 +7,7 @@ import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/
import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
-import { useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage } from '@mui/docs/i18n';
import BrandingProvider from 'docs/src/BrandingProvider';
import Ad from 'docs/src/modules/components/Ad';
import AdGuest from 'docs/src/modules/components/AdGuest';
diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
index 87a62168ed41db..59be4f176c2d91 100644
--- a/docs/src/modules/components/MarkdownDocsV2.js
+++ b/docs/src/modules/components/MarkdownDocsV2.js
@@ -11,7 +11,7 @@ import { getTranslatedHeader as getComponentTranslatedHeader } from 'docs/src/mo
import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
import BrandingProvider from 'docs/src/BrandingProvider';
import Ad from 'docs/src/modules/components/Ad';
import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame';
diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
index d47ef7c78f0e12..91be4ebb3a5050 100644
--- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js
+++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
@@ -11,7 +11,7 @@ import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import Visibility from '@mui/icons-material/Visibility';
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`;
diff --git a/docs/src/modules/components/MaterialShowcase.js b/docs/src/modules/components/MaterialShowcase.js
index 74b2f493ddd7f8..fe4db5bf344f9b 100644
--- a/docs/src/modules/components/MaterialShowcase.js
+++ b/docs/src/modules/components/MaterialShowcase.js
@@ -10,8 +10,8 @@ import IconButton from '@mui/material/IconButton';
import GitHubIcon from '@mui/icons-material/GitHub';
import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
import { alpha } from '@mui/material/styles';
-import Link from 'docs/src/modules/components/Link';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { Link } from '@mui/docs/Link';
+import { useTranslate } from '@mui/docs/i18n';
/**
* The app structure:
diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index a5686733531906..abd7ae14f094bb 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import IconImage from 'docs/src/components/icon/IconImage';
import ROUTES from 'docs/src/route';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
import PageContext from 'docs/src/modules/components/PageContext';
interface ProductSubMenuProp extends BoxProps {
diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 2ffa1a3e7cb79a..6fc4cb9857a4eb 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -14,7 +14,7 @@ import MuiList from '@mui/material/List';
import MuiListItem from '@mui/material/ListItem';
import MuiDivider from '@mui/material/Divider';
import { getCookie } from 'docs/src/modules/utils/helpers';
-import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
async function fetchNotifications() {
if (process.env.NODE_ENV === 'development') {
diff --git a/docs/src/modules/components/RichMarkdownElement.js b/docs/src/modules/components/RichMarkdownElement.js
index d13a19e384e943..449b1df5adb6a9 100644
--- a/docs/src/modules/components/RichMarkdownElement.js
+++ b/docs/src/modules/components/RichMarkdownElement.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import HighlightedCodeWithTabs from 'docs/src/modules/components/HighlightedCodeWithTabs';
import Demo from 'docs/src/modules/components/Demo';
diff --git a/docs/src/modules/components/SkipLink.tsx b/docs/src/modules/components/SkipLink.tsx
index cafdd56f84409d..9e9f8536758b5d 100644
--- a/docs/src/modules/components/SkipLink.tsx
+++ b/docs/src/modules/components/SkipLink.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import MuiLink from '@mui/material/Link';
import { styled } from '@mui/material/styles';
-import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { useTranslate } from '@mui/docs/i18n';
const StyledLink = styled(MuiLink)(({ theme }) => ({
position: 'fixed',
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
index a30fdcc08d7702..50fe41c5a7adf5 100644
--- a/docs/src/modules/components/ThemeContext.js
+++ b/docs/src/modules/components/ThemeContext.js
@@ -10,7 +10,7 @@ import { enUS, zhCN, ptBR } from '@mui/material/locale';
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
import { getCookie } from 'docs/src/modules/utils/helpers';
import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
-import { useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useUserLanguage } from '@mui/docs/i18n';
import {
getDesignTokens,
getThemedComponents,
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 6967b303d03692..df796c63a6ef08 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -18,7 +18,7 @@ import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import ROUTES from 'docs/src/route';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
export const authors = {
oliviertassinari: {
diff --git a/docs/src/modules/components/TopLayoutCareers.js b/docs/src/modules/components/TopLayoutCareers.js
index 76aa72775ade88..95daa634e83f0f 100644
--- a/docs/src/modules/components/TopLayoutCareers.js
+++ b/docs/src/modules/components/TopLayoutCareers.js
@@ -8,7 +8,7 @@ import AppFooter from 'docs/src/layouts/AppFooter';
import AppHeader from 'docs/src/layouts/AppHeader';
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
const StyledDiv = styled('div')({
flex: '1 0 100%',
diff --git a/docs/src/modules/utils/i18n.js b/docs/src/modules/utils/i18n.js
index 7f26e577b36c60..5c77a699a0063e 100644
--- a/docs/src/modules/utils/i18n.js
+++ b/docs/src/modules/utils/i18n.js
@@ -1,93 +1,4 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/i18n`
-function mapTranslations(req) {
- const translations = {};
- req.keys().forEach((filename) => {
- const match = filename.match(/-([a-z]{2}).json$/);
-
- if (match) {
- translations[match[1]] = req(filename);
- } else {
- translations.en = req(filename);
- }
- });
- return translations;
-}
-
-const req = require.context('docs/translations', false, /translations.*\.json$/);
-const translations = mapTranslations(req);
-
-function getPath(obj, path) {
- if (!path || typeof path !== 'string') {
- return null;
- }
-
- return path.split('.').reduce((acc, item) => (acc && acc[item] ? acc[item] : null), obj);
-}
-
-const UserLanguageContext = React.createContext({ userLanguage: '', setUserLanguage: () => {} });
-if (process.env.NODE_ENV !== 'production') {
- UserLanguageContext.displayName = 'UserLanguage';
-}
-
-export function UserLanguageProvider(props) {
- const { children, defaultUserLanguage } = props;
-
- const [userLanguage, setUserLanguage] = React.useState(defaultUserLanguage);
-
- const contextValue = React.useMemo(() => {
- return { userLanguage, setUserLanguage };
- }, [userLanguage]);
-
- return (
- {children}
- );
-}
-
-UserLanguageProvider.propTypes = {
- children: PropTypes.node.isRequired,
- defaultUserLanguage: PropTypes.string,
-};
-
-export function useUserLanguage() {
- return React.useContext(UserLanguageContext).userLanguage;
-}
-
-export function useSetUserLanguage() {
- return React.useContext(UserLanguageContext).setUserLanguage;
-}
-
-const warnedOnce = {};
-
-export function useTranslate() {
- const userLanguage = useUserLanguage();
-
- return React.useMemo(
- () =>
- function translate(key, options = {}) {
- const { ignoreWarning = false } = options;
- const wordings = translations[userLanguage];
-
- if (!wordings) {
- console.error(`Missing language: ${userLanguage}.`);
- return '…';
- }
-
- const translation = getPath(wordings, key);
-
- if (!translation) {
- const fullKey = `${userLanguage}:${key}`;
- // No warnings in CI env
- if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
- console.error(`Missing translation for ${fullKey}`);
- warnedOnce[fullKey] = true;
- }
- return getPath(translations.en, key);
- }
-
- return translation;
- },
- [userLanguage],
- );
-}
+export * from '@mui/docs/i18n';
diff --git a/docs/src/pages/versions/LatestVersions.js b/docs/src/pages/versions/LatestVersions.js
index b68d733319ed7f..be989b02c57398 100644
--- a/docs/src/pages/versions/LatestVersions.js
+++ b/docs/src/pages/versions/LatestVersions.js
@@ -5,7 +5,7 @@ import TableBody from '@mui/material/TableBody';
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 { Link } from '@mui/docs/Link';
function LatestVersions() {
return (
diff --git a/docs/src/pages/versions/ReleasedVersions.js b/docs/src/pages/versions/ReleasedVersions.js
index 3a921ddf291dce..0ff71cd1716dd6 100644
--- a/docs/src/pages/versions/ReleasedVersions.js
+++ b/docs/src/pages/versions/ReleasedVersions.js
@@ -5,7 +5,7 @@ import TableBody from '@mui/material/TableBody';
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 { Link } from '@mui/docs/Link';
import VersionsContext from 'docs/src/pages/versions/VersionsContext';
const GITHUB_RELEASE_BASE_URL = 'https://github.com/mui/material-ui/releases/tag/';
diff --git a/package.json b/package.json
index 11c7b74cf64627..21587fee30f237 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
"dependencies": {
"@googleapis/sheets": "^5.0.5",
"@slack/bolt": "^3.17.1",
+ "execa": "^8.0.1",
"google-auth-library": "^9.5.0"
},
"devDependencies": {
diff --git a/packages/mui-docs/.npmignore b/packages/mui-docs/.npmignore
new file mode 100644
index 00000000000000..81f0fda795522a
--- /dev/null
+++ b/packages/mui-docs/.npmignore
@@ -0,0 +1 @@
+.tsbuildinfo
diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
index a626b0bf858c5c..f90cfbd3d19c12 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -23,11 +23,12 @@
},
"homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
+ "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
"build:legacy": "node ../../scripts/build.mjs legacy",
"build:modern": "echo 'Skip modern build'",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
+ "build:types": "node ../../scripts/buildTypes.mjs",
"build:copy-files": "node ../../scripts/copyFiles.mjs",
"prebuild": "rimraf build",
"release": "pnpm build && pnpm publish",
@@ -37,16 +38,21 @@
"@babel/runtime": "^7.23.9",
"@mui/base": "workspace:*",
"@mui/utils": "workspace:^",
+ "clsx": "^2.1.0",
"nprogress": "^0.2.0",
"prop-types": "^15.8.1"
},
"devDependencies": {
+ "@types/node": "^18.19.10",
+ "@types/prop-types": "^15.7.11",
"@types/react": "^18.2.55",
+ "next": "^13.5.1",
"react": "^18.2.0"
},
"peerDependencies": {
"@mui/material": "workspace:^",
"@types/react": "^17.0.0 || ^18.0.0",
+ "next": "^13.5.1",
"react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
diff --git a/packages/mui-docs/src/DocsProvider/DocsProvider.tsx b/packages/mui-docs/src/DocsProvider/DocsProvider.tsx
new file mode 100644
index 00000000000000..4ca2b78ef342ff
--- /dev/null
+++ b/packages/mui-docs/src/DocsProvider/DocsProvider.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { UserLanguageProvider } from '../i18n';
+
+export interface DocsConfig {
+ LANGUAGES: string[];
+ LANGUAGES_SSR: string[];
+ LANGUAGES_IN_PROGRESS: string[];
+ LANGUAGES_IGNORE_PAGES: (pathname: string) => boolean;
+}
+
+const DocsConfigContext = React.createContext(null);
+
+export interface DocsProviderProps {
+ config: DocsConfig;
+ defaultUserLanguage: string;
+ children?: React.ReactNode;
+}
+
+export function DocsProvider({ config, defaultUserLanguage, children }: DocsProviderProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+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 ',
+ );
+ }
+ return config;
+}
diff --git a/packages/mui-docs/src/DocsProvider/index.tsx b/packages/mui-docs/src/DocsProvider/index.tsx
new file mode 100644
index 00000000000000..07bc1c724391f2
--- /dev/null
+++ b/packages/mui-docs/src/DocsProvider/index.tsx
@@ -0,0 +1 @@
+export * from './DocsProvider';
diff --git a/packages/mui-docs/src/Link/Link.tsx b/packages/mui-docs/src/Link/Link.tsx
new file mode 100644
index 00000000000000..9de3d6d1c97287
--- /dev/null
+++ b/packages/mui-docs/src/Link/Link.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+import { useUserLanguage } from '../i18n';
+import { useDocsConfig } from '../DocsProvider';
+
+/**
+ * File to keep in sync with:
+ *
+ * - /docs/src/modules/components/Link.tsx
+ * - /examples/material-ui-nextjs-pages-router/src/Link.js
+ * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
+ */
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled('a')({});
+
+interface NextLinkComposedProps
+ extends Omit, 'href'>,
+ Omit {
+ to: NextLinkProps['href'];
+ linkAs?: NextLinkProps['as'];
+}
+
+const NextLinkComposed = React.forwardRef(
+ function NextLinkComposed(props, ref) {
+ const {
+ to,
+ linkAs,
+ replace,
+ scroll,
+ shallow,
+ prefetch,
+ legacyBehavior = true,
+ locale,
+ ...other
+ } = props;
+
+ return (
+
+
+
+ );
+ },
+);
+
+export type LinkProps = {
+ activeClassName?: string;
+ as?: NextLinkProps['as'];
+ href: NextLinkProps['href'];
+ linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled().
+ noLinkStyle?: boolean;
+} & Omit &
+ Omit;
+
+// A styled version of the Next.js Pages Router Link component:
+// https://nextjs.org/docs/pages/api-reference/components/link
+export const Link = React.forwardRef(function Link(props, ref) {
+ const {
+ activeClassName = 'active',
+ as,
+ className: classNameProps,
+ href,
+ legacyBehavior,
+ linkAs: linkAsProp,
+ locale,
+ noLinkStyle,
+ prefetch,
+ replace,
+ role, // Link don't have roles.
+ scroll,
+ shallow,
+ ...other
+ } = props;
+
+ const router = useRouter();
+ const pathname = typeof href === 'string' ? href : href?.pathname;
+ const routerPathname = router.pathname.replace('/[docsTab]', '');
+
+ const shouldBeActive = routerPathname === pathname;
+
+ const className = clsx(classNameProps, {
+ [activeClassName]: shouldBeActive && activeClassName,
+ });
+
+ const userLanguage = useUserLanguage();
+
+ const { LANGUAGES_IGNORE_PAGES } = useDocsConfig();
+
+ let linkAs = linkAsProp || as || (href as string);
+ if (
+ userLanguage !== 'en' &&
+ pathname &&
+ pathname.indexOf('/') === 0 &&
+ !LANGUAGES_IGNORE_PAGES(pathname) &&
+ !pathname.startsWith(`/${userLanguage}/`)
+ ) {
+ linkAs = `/${userLanguage}${linkAs}`;
+ }
+
+ const nextjsProps = {
+ to: href,
+ linkAs,
+ replace,
+ scroll,
+ shallow,
+ legacyBehavior,
+ prefetch,
+ locale,
+ };
+
+ if (noLinkStyle) {
+ return ;
+ }
+
+ return (
+
+ );
+});
diff --git a/packages/mui-docs/src/Link/index.ts b/packages/mui-docs/src/Link/index.ts
new file mode 100644
index 00000000000000..3db78f51f070a0
--- /dev/null
+++ b/packages/mui-docs/src/Link/index.ts
@@ -0,0 +1 @@
+export * from './Link';
diff --git a/packages/mui-docs/src/i18n/i18n.tsx b/packages/mui-docs/src/i18n/i18n.tsx
new file mode 100644
index 00000000000000..037680d8e3ed01
--- /dev/null
+++ b/packages/mui-docs/src/i18n/i18n.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+declare global {
+ interface NodeRequire {
+ context: (path: string, useSubdirectories: boolean, regex: RegExp) => RequireContext;
+ }
+}
+
+interface RequireContext {
+ (req: string): string;
+ keys: () => string[];
+}
+
+function mapTranslations(req: RequireContext) {
+ const translations: Record = {};
+ req.keys().forEach((filename) => {
+ const match = filename.match(/-([a-z]{2}).json$/);
+
+ if (match) {
+ translations[match[1]] = req(filename);
+ } else {
+ translations.en = req(filename);
+ }
+ });
+ return translations;
+}
+
+const req: RequireContext = require.context('docs/translations', false, /translations.*\.json$/);
+const translations = mapTranslations(req);
+
+function getPath(obj: any, path: string): any {
+ if (!path || typeof path !== 'string') {
+ return null;
+ }
+
+ return path.split('.').reduce((acc, item) => (acc && acc[item] ? acc[item] : null), obj);
+}
+
+interface UserLanguageContextValue {
+ userLanguage: string;
+ setUserLanguage: React.Dispatch>;
+}
+
+const UserLanguageContext = React.createContext({
+ userLanguage: '',
+ setUserLanguage: () => {},
+});
+if (process.env.NODE_ENV !== 'production') {
+ UserLanguageContext.displayName = 'UserLanguage';
+}
+
+export interface UserLanguageProviderProps {
+ children: React.ReactNode;
+ defaultUserLanguage: string;
+}
+
+export function UserLanguageProvider(props: UserLanguageProviderProps) {
+ const { children, defaultUserLanguage } = props;
+
+ const [userLanguage, setUserLanguage] = React.useState(defaultUserLanguage);
+
+ const contextValue = React.useMemo(() => {
+ return { userLanguage, setUserLanguage };
+ }, [userLanguage]);
+
+ return (
+ {children}
+ );
+}
+
+UserLanguageProvider.propTypes = {
+ children: PropTypes.node.isRequired,
+ defaultUserLanguage: PropTypes.string,
+};
+
+export function useUserLanguage() {
+ return React.useContext(UserLanguageContext).userLanguage;
+}
+
+export function useSetUserLanguage() {
+ return React.useContext(UserLanguageContext).setUserLanguage;
+}
+
+const warnedOnce: Record = {};
+
+export interface TranslateOptions {
+ ignoreWarning?: boolean;
+}
+
+export function useTranslate() {
+ const userLanguage = useUserLanguage();
+
+ return React.useMemo(
+ () =>
+ function translate(key: string, options: TranslateOptions = {}) {
+ const { ignoreWarning = false } = options;
+ const wordings = translations[userLanguage];
+
+ if (!wordings) {
+ console.error(`Missing language: ${userLanguage}.`);
+ return '…';
+ }
+
+ const translation = getPath(wordings, key);
+
+ if (!translation) {
+ const fullKey = `${userLanguage}:${key}`;
+ // No warnings in CI env
+ if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
+ console.error(`Missing translation for ${fullKey}`);
+ warnedOnce[fullKey] = true;
+ }
+ return getPath(translations.en, key);
+ }
+
+ return translation;
+ },
+ [userLanguage],
+ );
+}
diff --git a/packages/mui-docs/src/i18n/index.ts b/packages/mui-docs/src/i18n/index.ts
new file mode 100644
index 00000000000000..e82230f1bf136f
--- /dev/null
+++ b/packages/mui-docs/src/i18n/index.ts
@@ -0,0 +1 @@
+export * from './i18n';
diff --git a/packages/mui-docs/src/index.d.ts b/packages/mui-docs/src/index.d.ts
deleted file mode 100644
index e69de29bb2d1d6..00000000000000
diff --git a/packages/mui-docs/src/index.js b/packages/mui-docs/src/index.js
deleted file mode 100644
index 8ae6d57e29c695..00000000000000
--- a/packages/mui-docs/src/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as FileDownload } from './svgIcons/FileDownload';
-export { default as JavaScript } from './svgIcons/JavaScript';
-export { default as NProgressBar } from './NProgressBar';
-export { default as TypeScript } from './svgIcons/TypeScript';
diff --git a/packages/mui-docs/tsconfig.build.json b/packages/mui-docs/tsconfig.build.json
new file mode 100644
index 00000000000000..ba7a787fa189f4
--- /dev/null
+++ b/packages/mui-docs/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+ // This config is for emitting declarations (.d.ts) only
+ // Actual .ts source files are transpiled via babel
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "composite": true,
+ "declaration": true,
+ "noEmit": false,
+ "emitDeclarationOnly": true,
+ "outDir": "build",
+ "rootDir": "./src"
+ },
+ "include": ["src/**/*.ts*"],
+ "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
+ "references": [{ "path": "../mui-material/tsconfig.build.json" }]
+}
diff --git a/packages/mui-docs/tsconfig.json b/packages/mui-docs/tsconfig.json
new file mode 100644
index 00000000000000..1227ceb7c1f109
--- /dev/null
+++ b/packages/mui-docs/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "skipLibCheck": true,
+ "types": ["react", "node"]
+ },
+ "include": ["src/**/*", "test/**/*"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62ac4c9b6b32d6..24a1868a1dfb71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,9 @@ importers:
'@slack/bolt':
specifier: ^3.17.1
version: 3.17.1
+ execa:
+ specifier: ^8.0.1
+ version: 8.0.1
google-auth-library:
specifier: ^9.5.0
version: 9.5.0
@@ -1255,6 +1258,9 @@ importers:
'@mui/utils':
specifier: workspace:^
version: link:../mui-utils/build
+ clsx:
+ specifier: ^2.1.0
+ version: 2.1.0
nprogress:
specifier: ^0.2.0
version: 0.2.0
@@ -1262,9 +1268,18 @@ importers:
specifier: ^15.8.1
version: 15.8.1
devDependencies:
+ '@types/node':
+ specifier: ^18.19.15
+ version: 18.19.15
+ '@types/prop-types':
+ specifier: ^15.7.11
+ version: 15.7.11
'@types/react':
specifier: ^18.2.55
version: 18.2.55
+ next:
+ specifier: ^13.5.1
+ version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
react:
specifier: ^18.2.0
version: 18.2.0
@@ -11967,6 +11982,21 @@ packages:
signal-exit: 3.0.7
strip-final-newline: 2.0.0
+ /execa@8.0.1:
+ resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+ engines: {node: '>=16.17'}
+ dependencies:
+ cross-spawn: 7.0.3
+ get-stream: 8.0.1
+ human-signals: 5.0.0
+ is-stream: 3.0.0
+ merge-stream: 2.0.0
+ npm-run-path: 5.2.0
+ onetime: 6.0.0
+ signal-exit: 4.1.0
+ strip-final-newline: 3.0.0
+ dev: false
+
/expand-brackets@2.1.4:
resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
engines: {node: '>=0.10.0'}
@@ -12634,6 +12664,11 @@ packages:
resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
engines: {node: '>=10'}
+ /get-stream@8.0.1:
+ resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+ engines: {node: '>=16'}
+ dev: false
+
/get-symbol-description@1.0.0:
resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
engines: {node: '>= 0.4'}
@@ -13340,6 +13375,11 @@ packages:
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
engines: {node: '>=10.17.0'}
+ /human-signals@5.0.0:
+ resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+ engines: {node: '>=16.17.0'}
+ dev: false
+
/humanize-ms@1.2.1:
resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
dependencies:
@@ -13884,6 +13924,11 @@ packages:
resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
engines: {node: '>=8'}
+ /is-stream@3.0.0:
+ resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+ engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+ dev: false
+
/is-string@1.0.7:
resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
engines: {node: '>= 0.4'}
@@ -15885,6 +15930,11 @@ packages:
resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
engines: {node: '>=6'}
+ /mimic-fn@4.0.0:
+ resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+ engines: {node: '>=12'}
+ dev: false
+
/mimic-response@1.0.1:
resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
engines: {node: '>=4'}
@@ -16583,6 +16633,13 @@ packages:
dependencies:
path-key: 3.1.1
+ /npm-run-path@5.2.0:
+ resolution: {integrity: sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==}
+ engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+ dependencies:
+ path-key: 4.0.0
+ dev: false
+
/npmlog@6.0.2:
resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -16863,6 +16920,13 @@ packages:
dependencies:
mimic-fn: 2.1.0
+ /onetime@6.0.0:
+ resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+ engines: {node: '>=12'}
+ dependencies:
+ mimic-fn: 4.0.0
+ dev: false
+
/open@6.4.0:
resolution: {integrity: sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==}
engines: {node: '>=8'}
@@ -17279,6 +17343,11 @@ packages:
resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
engines: {node: '>=8'}
+ /path-key@4.0.0:
+ resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+ engines: {node: '>=12'}
+ dev: false
+
/path-parse@1.0.7:
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
@@ -19912,6 +19981,11 @@ packages:
resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
engines: {node: '>=6'}
+ /strip-final-newline@3.0.0:
+ resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+ engines: {node: '>=12'}
+ dev: false
+
/strip-indent@3.0.0:
resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
engines: {node: '>=8'}
diff --git a/scripts/buildTypes.mjs b/scripts/buildTypes.mjs
index e8430b6279f65d..f2a4e0d9e4f5fc 100644
--- a/scripts/buildTypes.mjs
+++ b/scripts/buildTypes.mjs
@@ -1,12 +1,11 @@
import chalk from 'chalk';
-import childProcess from 'child_process';
import glob from 'fast-glob';
import fse from 'fs-extra';
import path from 'path';
-import { promisify } from 'util';
import yargs from 'yargs';
+import { $ } from 'execa';
-const exec = promisify(childProcess.exec);
+const $$ = $({ stdio: 'inherit' });
/**
* Fixes a wrong import path caused by https://github.com/microsoft/TypeScript/issues/39117
@@ -111,7 +110,7 @@ async function main() {
);
}
- await exec(['pnpm', 'tsc', '-b', tsconfigPath].join(' '));
+ await $$`pnpm tsc -b ${tsconfigPath}`;
const publishDir = path.join(packageRoot, 'build');
const declarationFiles = await glob('**/*.d.ts', { absolute: true, cwd: publishDir });