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

package/HighlightedCode/HighlightedCode.js

@@ -1,19 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HighlightedCode = HighlightedCode;
-var React = _interopRequireWildcard(require("react"));
-var _prism = _interopRequireDefault(require("@mui/internal-markdown/prism"));
-var _NoSsr = require("@mui/base/NoSsr");
-var _styles = require("@mui/material/styles");
-var _CodeCopy = require("../CodeCopy");
-var _MarkdownElement = require("../MarkdownElement");
-var _jsxRuntime = require("react/jsx-runtime");
-const Pre = (0, _styles.styled)('pre')(({
+import * as React from 'react';
+import prism from '@mui/internal-markdown/prism';
+import { NoSsr } from '@mui/base/NoSsr';
+import { styled } from '@mui/material/styles';
+import { useCodeCopy, CodeCopyButton } from "../CodeCopy/index.js";
+import { MarkdownElement } from "../MarkdownElement/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Pre = styled('pre')(({
   theme
 }) => ({
   margin: 0,
@@ -31,37 +23,37 @@ const Pre = (0, _styles.styled)('pre')(({
     // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
   }
 }));
-function HighlightedCode(props) {
+export function HighlightedCode(props) {
   const {
     code,
     copyButtonHidden = false,
     copyButtonProps,
     language,
     plainStyle,
-    parentComponent: Component = plainStyle ? React.Fragment : _MarkdownElement.MarkdownElement,
+    parentComponent: Component = plainStyle ? React.Fragment : MarkdownElement,
     preComponent: PreComponent = plainStyle ? Pre : 'pre',
     ...other
   } = props;
   const renderedCode = React.useMemo(() => {
-    return (0, _prism.default)(code.trim(), language);
+    return prism(code.trim(), language);
   }, [code, language]);
-  const handlers = (0, _CodeCopy.useCodeCopy)();
+  const handlers = useCodeCopy();
   const componentProps = !plainStyle ? other : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+  return /*#__PURE__*/_jsx(Component, {
     ...componentProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       className: "MuiCode-root",
       ...handlers,
       style: {
         height: '100%'
       },
-      children: [copyButtonHidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, {
+      children: [copyButtonHidden ? null : /*#__PURE__*/_jsx(NoSsr, {
+        children: /*#__PURE__*/_jsx(CodeCopyButton, {
           code: code,
           ...copyButtonProps
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreComponent, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+      }), /*#__PURE__*/_jsx(PreComponent, {
+        children: /*#__PURE__*/_jsx("code", {
           className: `language-${language}`
           // eslint-disable-next-line react/no-danger
           ,

package/HighlightedCode/index.js

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

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js

@@ -1,23 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CodeTabPanel = exports.CodeTabList = exports.CodeTab = void 0;
-exports.HighlightedCodeWithTabs = HighlightedCodeWithTabs;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _Tabs = require("@mui/base/Tabs");
-var _TabsList = require("@mui/base/TabsList");
-var _TabPanel = require("@mui/base/TabPanel");
-var _Tab = require("@mui/base/Tab");
-var _useLocalStorageState = _interopRequireDefault(require("@mui/utils/useLocalStorageState"));
-var _HighlightedCode = require("../HighlightedCode");
-var _jsxRuntime = require("react/jsx-runtime");
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { Tabs } from '@mui/base/Tabs';
+import { TabsList as TabsListBase } from '@mui/base/TabsList';
+import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
+import { Tab as TabBase } from '@mui/base/Tab';
+import useLocalStorageState from '@mui/utils/useLocalStorageState';
+import { HighlightedCode } from "../HighlightedCode/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PACKAGE_MANAGER_ORDER = new Map(['npm', 'pnpm', 'yarn'].map((manager, index) => [manager, index]));
-const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList)(({
+export const CodeTabList = styled(TabsListBase)(({
   theme
 }) => ({
   display: 'flex',
@@ -26,7 +17,7 @@ const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList
   borderRight: '1px solid',
   overflowX: 'auto',
   ...theme.applyDarkStyles({
-    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+    backgroundColor: alpha(theme.palette.primaryDark[800], 0.2)
   }),
   variants: [{
     props: ({
@@ -117,7 +108,7 @@ const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList
       ownerState
     }) => ownerState?.contained,
     style: {
-      backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2)
+      backgroundColor: alpha(theme.palette.grey[50], 0.2)
     }
   }, {
     props: ({
@@ -128,7 +119,7 @@ const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList
     }
   }]
 }));
-const CodeTabPanel = exports.CodeTabPanel = (0, _styles.styled)(_TabPanel.TabPanel)({
+export const CodeTabPanel = styled(TabPanelBase)({
   '& pre': {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
@@ -190,7 +181,7 @@ const CodeTabPanel = exports.CodeTabPanel = (0, _styles.styled)(_TabPanel.TabPan
     }
   }]
 });
-const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
+export const CodeTab = styled(TabBase)(({
   theme
 }) => ({
   variants: [{
@@ -271,7 +262,7 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
     }) => !ownerState?.contained,
     style: {
       '&:hover': {
-        backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
+        backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
         color: (theme.vars || theme).palette.grey[400]
       }
     }
@@ -315,7 +306,7 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
     }
   })
 }));
-function HighlightedCodeWithTabs(props) {
+export function HighlightedCodeWithTabs(props) {
   const {
     tabs,
     storageKey
@@ -329,7 +320,7 @@ function HighlightedCodeWithTabs(props) {
     }
     return result;
   }, [storageKey, tabs]);
-  const [activeTab, setActiveTab] = (0, _useLocalStorageState.default)(storageKey ?? null, availableTabs[0]);
+  const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
   // During hydration, activeTab is null, default to first value.
   const defaultizedActiveTab = activeTab ?? availableTabs[0];
   const [mounted, setMounted] = React.useState(false);
@@ -342,15 +333,15 @@ function HighlightedCodeWithTabs(props) {
   const ownerState = {
     mounted
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tabs.Tabs, {
+  return /*#__PURE__*/_jsxs(Tabs, {
     selectionFollowsFocus: true,
     value: defaultizedActiveTab,
     onChange: handleChange,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTabList, {
+    children: [/*#__PURE__*/_jsx(CodeTabList, {
       ownerState: ownerState,
       children: tabs.map(({
         tab
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTab, {
+      }) => /*#__PURE__*/_jsx(CodeTab, {
         ownerState: ownerState,
         value: tab,
         children: tab
@@ -359,10 +350,10 @@ function HighlightedCodeWithTabs(props) {
       tab,
       language,
       code
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTabPanel, {
+    }) => /*#__PURE__*/_jsx(CodeTabPanel, {
       ownerState: ownerState,
       value: tab,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedCode.HighlightedCode, {
+      children: /*#__PURE__*/_jsx(HighlightedCode, {
         language: language || 'bash',
         code: typeof code === 'function' ? code(tab) : code
       })

package/HighlightedCodeWithTabs/index.js

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

package/IconImage/IconImage.js

@@ -1,22 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = IconImage;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _ThemeContext = require("../ThemeContext");
-var _jsxRuntime = require("react/jsx-runtime");
-const Img = (0, _styles.styled)('img')({
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { ThemeOptionsContext } from "../ThemeContext/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Img = styled('img')({
   display: 'inline-block',
   verticalAlign: 'bottom'
 });
 let neverHydrated = true;
-function IconImage(props) {
+export default function IconImage(props) {
   const {
     height: heightProp,
     name,
@@ -24,7 +16,7 @@ function IconImage(props) {
     mode: modeProp,
     ...other
   } = props;
-  const themeOptions = React.useContext(_ThemeContext.ThemeOptionsContext);
+  const themeOptions = React.useContext(ThemeOptionsContext);
   const [firstRender, setFirstRender] = React.useState(true);
   React.useEffect(() => {
     setFirstRender(false);
@@ -49,8 +41,8 @@ function IconImage(props) {
   // First time render with a theme depend image
   if (firstRender && neverHydrated && mode !== '') {
     if (other.loading === 'eager') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Img, {
           className: "only-light-mode-v2",
           src: `/static/branding/${name}-light.svg`,
           alt: "",
@@ -58,7 +50,7 @@ function IconImage(props) {
           height: height,
           ...other,
           loading: "lazy"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+        }), /*#__PURE__*/_jsx(Img, {
           className: "only-dark-mode-v2",
           src: `/static/branding/${name}-dark.svg`,
           alt: "",
@@ -71,7 +63,7 @@ function IconImage(props) {
     }
 
     // Prevent hydration mismatch between the light and dark mode image source.
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    return /*#__PURE__*/_jsx(Box, {
       component: "span",
       sx: {
         width,
@@ -80,7 +72,7 @@ function IconImage(props) {
       }
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+  return /*#__PURE__*/_jsx(Img, {
     src: `/static/branding/${name}${mode ? `-${mode}` : ''}.svg`,
     alt: "",
     loading: "lazy",

package/IconImage/index.js

@@ -1,13 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _IconImage.default;
-  }
-});
-var _IconImage = _interopRequireDefault(require("./IconImage"));
+export { default } from "./IconImage.js";

package/InfoCard/InfoCard.js

@@ -1,23 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GlowingIconContainer = GlowingIconContainer;
-exports.InfoCard = InfoCard;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _Link = require("../Link");
-var _jsxRuntime = require("react/jsx-runtime");
-function GlowingIconContainer({
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { Link } from "../Link/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function GlowingIconContainer({
   icon
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  return /*#__PURE__*/_jsx(Box, {
     sx: theme => ({
       width: 36,
       height: 36,
@@ -29,20 +20,20 @@ function GlowingIconContainer({
       border: '1px solid',
       borderColor: 'primary.200',
       bgcolor: 'primary.50',
-      boxShadow: `0px 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
+      boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
       '& .MuiSvgIcon-root': {
         fontSize: theme.typography.pxToRem(18)
       },
       ...theme.applyDarkStyles({
-        borderColor: (0, _styles.alpha)(theme.palette.primary[400], 0.25),
-        bgcolor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
-        boxShadow: `0 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
+        borderColor: alpha(theme.palette.primary[400], 0.25),
+        bgcolor: alpha(theme.palette.primary[900], 0.2),
+        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
       })
     }),
     children: icon
   });
 }
-function InfoCard(props) {
+export function InfoCard(props) {
   const {
     classNameDescription,
     classNameTitle,
@@ -54,9 +45,9 @@ function InfoCard(props) {
     titleProps,
     ...other
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, {
+  return /*#__PURE__*/_jsxs(Paper, {
     variant: "outlined",
-    component: link ? _Link.Link : 'div',
+    component: link ? Link : 'div',
     href: link,
     ...(link ? {
       noLinkStyle: true,
@@ -68,15 +59,15 @@ function InfoCard(props) {
       height: '100%',
       background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
       ...theme.applyDarkStyles({
-        bgcolor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.25),
+        bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
         background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
         borderColor: 'primaryDark.700'
       })
     }),
     ...other,
-    children: [svg && svg, icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlowingIconContainer, {
+    children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
       icon: icon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), /*#__PURE__*/_jsx(Typography, {
       fontWeight: "semiBold",
       component: "h3",
       color: "text.primary",
@@ -86,7 +77,7 @@ function InfoCard(props) {
       className: classNameTitle,
       ...titleProps,
       children: title
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       color: "text.secondary",
       className: classNameDescription,

package/InfoCard/index.js

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

package/Link/Link.js

@@ -1,19 +1,11 @@
-"use strict";
+import * as React from 'react';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import NextLink from 'next/link';
+import MuiLink from '@mui/material/Link';
+import { useUserLanguage } from "../i18n/index.js";
+import { useDocsConfig } from "../DocsProvider/index.js";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NextLinkComposed = exports.Link = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _router = require("next/router");
-var _link = _interopRequireDefault(require("next/link"));
-var _Link = _interopRequireDefault(require("@mui/material/Link"));
-var _i18n = require("../i18n");
-var _DocsProvider = require("../DocsProvider");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * File to keep in sync with:
  *
@@ -22,14 +14,14 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
  * - /examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx
  */
-
-const NextLinkComposed = exports.NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
   const {
     to,
     linkAs,
     ...other
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_link.default, {
+  return /*#__PURE__*/_jsx(NextLink, {
     href: to,
     as: linkAs,
     "data-no-markdown-link": "true",
@@ -39,7 +31,7 @@ const NextLinkComposed = exports.NextLinkComposed = /*#__PURE__*/React.forwardRe
 });
 // A styled version of the Next.js Link component:
 // https://nextjs.org/docs/pages/api-reference/components/link
-const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
+export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
   const {
     activeClassName = 'active',
     as,
@@ -49,14 +41,14 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     noLinkStyle,
     ...other
   } = props;
-  const router = (0, _router.useRouter)();
+  const router = useRouter();
   const pathname = typeof href === 'string' ? href : href?.pathname;
   const routerPathname = router.pathname.replace('/[docsTab]', '');
-  const className = (0, _clsx.default)(classNameProps, routerPathname === pathname && activeClassName);
-  const userLanguage = (0, _i18n.useUserLanguage)();
+  const className = clsx(classNameProps, routerPathname === pathname && activeClassName);
+  const userLanguage = useUserLanguage();
   const {
     LANGUAGES_IGNORE_PAGES
-  } = (0, _DocsProvider.useDocsConfig)();
+  } = useDocsConfig();
   let linkAs = linkAsProp || as || href;
   if (userLanguage !== 'en' && pathname && pathname.startsWith('/') && !LANGUAGES_IGNORE_PAGES(pathname) && !pathname.startsWith(`/${userLanguage}/`)) {
     linkAs = `/${userLanguage}${linkAs}`;
@@ -66,14 +58,14 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     linkAs
   };
   if (noLinkStyle) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(NextLinkComposed, {
+    return /*#__PURE__*/_jsx(NextLinkComposed, {
       className: className,
       ref: ref,
       ...nextjsProps,
       ...other
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+  return /*#__PURE__*/_jsx(MuiLink, {
     component: NextLinkComposed,
     className: className,
     ref: ref,

package/Link/MarkdownLinks.d.ts

@@ -0,0 +1,2 @@
+export declare function samePageLinkNavigation(event: MouseEvent): boolean;
+export declare function MarkdownLinks(): null;

package/Link/MarkdownLinks.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Router from 'next/router';
+import { pathnameToLanguage } from "../helpers/helpers.js";
+export function samePageLinkNavigation(event) {
+  if (event.defaultPrevented || event.button !== 0 ||
+  // ignore everything but left-click
+  event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+    return true;
+  }
+  return false;
+}
+function isLink(event) {
+  let activeElement = event.target;
+  while (activeElement?.nodeType === Node.ELEMENT_NODE && activeElement.nodeName !== 'A') {
+    activeElement = activeElement.parentElement;
+  }
+
+  // Ignore non internal link clicks.
+  // Absolute URLs can be internal, we delegate this to Next.js's router
+  if (activeElement === null || activeElement.nodeName !== 'A' || activeElement.getAttribute('target') === '_blank' || activeElement.getAttribute('data-no-markdown-link') === 'true') {
+    return null;
+  }
+  return activeElement;
+}
+
+/**
+ * @param {MouseEvent} event
+ */
+function handleClick(event) {
+  // Ignore click events meant for native link handling, for example open in new tab
+  if (samePageLinkNavigation(event)) {
+    return;
+  }
+  const activeElement = isLink(event);
+  if (activeElement === null) {
+    return;
+  }
+  event.preventDefault();
+  const as = activeElement.getAttribute('href');
+  if (as === null) {
+    return;
+  }
+  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
+  Router.push(canonicalPathname, as);
+}
+
+/**
+ * Source copied from https://github.com/vercel/next.js/blob/ebc4eaaa2564b4283711646079d68e430496c88b/packages/next/src/client/link.tsx
+ */
+function handleMouseOver(event) {
+  const activeElement = isLink(event);
+  if (activeElement === null) {
+    return;
+  }
+  const as = activeElement.getAttribute('href');
+  if (as === null) {
+    return;
+  }
+  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
+  const prefetchPromise = Router.prefetch(canonicalPathname, as, {
+    priority: true
+  });
+  // Prefetch the JSON page if asked (only in the client)
+  // We need to handle a prefetch error here since we may be
+  // loading with priority which can reject but we don't
+  // want to force navigation since this is only a prefetch
+  Promise.resolve(prefetchPromise).catch(err => {
+    if (process.env.NODE_ENV !== 'production') {
+      // rethrow to show invalid URL errors
+      throw err;
+    }
+  });
+}
+export function MarkdownLinks() {
+  React.useEffect(() => {
+    document.addEventListener('click', handleClick);
+    document.addEventListener('mouseover', handleMouseOver);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('mouseover', handleMouseOver);
+    };
+  }, []);
+  return null;
+}

package/Link/SkipLink.d.ts

@@ -0,0 +1 @@
+export declare function SkipLink(): import("react/jsx-runtime").JSX.Element;