@mui/docs 7.0.0-alpha.0 → 7.0.0-alpha.1

package/{node → esm}/Ad/ad.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.adBodyInlineStyles = exports.adBodyImageStyles = void 0;
-var _styles = require("@mui/material/styles");
-const adBodyImageStyles = theme => ({
+import { alpha } from '@mui/material/styles';
+export const adBodyImageStyles = theme => ({
   root: {
     display: 'block',
     overflow: 'hidden',
@@ -49,8 +43,7 @@ const adBodyImageStyles = theme => ({
     fontWeight: theme.typography.fontWeightRegular
   }
 });
-exports.adBodyImageStyles = adBodyImageStyles;
-const adBodyInlineStyles = theme => {
+export const adBodyInlineStyles = theme => {
   const baseline = adBodyImageStyles(theme);
   return {
     ...baseline,
@@ -80,7 +73,7 @@ const adBodyInlineStyles = theme => {
         // Style taken from the Link component & MarkdownElement.
         color: theme.palette.primary[600],
         textDecoration: 'underline',
-        textDecorationColor: (0, _styles.alpha)(theme.palette.primary.main, 0.4),
+        textDecorationColor: alpha(theme.palette.primary.main, 0.4),
         ...theme.applyStyles('dark', {
           color: theme.palette.primary[300]
         })
@@ -95,5 +88,4 @@ const adBodyInlineStyles = theme => {
       display: 'none'
     }
   };
-};
-exports.adBodyInlineStyles = adBodyInlineStyles;
+};

package/esm/Ad/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Ad.js";
+export * from "./AdManager.js";
+export * from "./AdProvider.js";
+export * from "./AdGuest.js";
+export { AdCarbonInline } from "./AdCarbon.js";

package/esm/Ad/index.js

@@ -0,0 +1,7 @@
+/// <reference types="gtag.js" />
+
+export * from "./Ad.js";
+export * from "./AdManager.js";
+export * from "./AdProvider.js";
+export * from "./AdGuest.js";
+export { AdCarbonInline } from "./AdCarbon.js";

package/esm/CodeCopy/CodeCopy.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * How to use: spread the handlers to the .MuiCode-root
+ *
+ * The html structure should be:
+ * <div className="MuiCode-root">
+ *  <pre>...</pre>
+ *  <button className="MuiCode-copy">...</button>
+ * </div>
+ */
+export declare function useCodeCopy(): React.HTMLAttributes<HTMLDivElement>;
+interface CodeCopyProviderProps {
+  children: React.ReactNode;
+}
+/**
+ * Place <CodeCopyProvider> at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
+ * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
+ */
+export declare function CodeCopyProvider({
+  children
+}: CodeCopyProviderProps): React.JSX.Element;
+export {};

package/{node → esm}/CodeCopy/CodeCopy.js

@@ -1,17 +1,8 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CodeCopyProvider = CodeCopyProvider;
-exports.useCodeCopy = useCodeCopy;
-var React = _interopRequireWildcard(require("react"));
-var _router = require("next/router");
-var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));
-var _jsxRuntime = require("react/jsx-runtime");
 var _InitCodeCopy;
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import clipboardCopy from 'clipboard-copy';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CodeBlockContext = /*#__PURE__*/React.createContext({
   current: null
 });
@@ -25,7 +16,7 @@ const CodeBlockContext = /*#__PURE__*/React.createContext({
  *  <button className="MuiCode-copy">...</button>
  * </div>
  */
-function useCodeCopy() {
+export function useCodeCopy() {
   const rootNode = React.useContext(CodeBlockContext);
   return {
     onMouseEnter: event => {
@@ -49,7 +40,7 @@ function useCodeCopy() {
 }
 function InitCodeCopy() {
   const rootNode = React.useContext(CodeBlockContext);
-  const router = (0, _router.useRouter)();
+  const router = useRouter();
   React.useEffect(() => {
     let key = 'Ctrl + ';
     if (typeof window !== 'undefined') {
@@ -103,7 +94,7 @@ function InitCodeCopy() {
           }, 2000);
           try {
             if (pre.textContent) {
-              await (0, _clipboardCopy.default)(pre.textContent);
+              await clipboardCopy(pre.textContent);
             }
             // eslint-disable-next-line no-empty
           } catch (error) {}
@@ -147,7 +138,7 @@ function hasNativeSelection(element) {
  * Place <CodeCopyProvider> at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
  * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
  */
-function CodeCopyProvider({
+export function CodeCopyProvider({
   children
 }) {
   const rootNode = React.useRef(null);
@@ -174,8 +165,8 @@ function CodeCopyProvider({
       copyBtn.dataset.gaEventAction = initialEventAction; // reset the 'data-ga-event-action' back to initial
     });
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CodeBlockContext.Provider, {
+  return /*#__PURE__*/_jsxs(CodeBlockContext.Provider, {
     value: rootNode,
-    children: [_InitCodeCopy || (_InitCodeCopy = /*#__PURE__*/(0, _jsxRuntime.jsx)(InitCodeCopy, {})), children]
+    children: [_InitCodeCopy || (_InitCodeCopy = /*#__PURE__*/_jsx(InitCodeCopy, {})), children]
   });
 }

package/esm/CodeCopy/CodeCopyButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface CodeCopyButtonProps {
+  code: string;
+}
+export declare function CodeCopyButton(props: CodeCopyButtonProps): React.JSX.Element;

package/esm/CodeCopy/CodeCopyButton.js

@@ -0,0 +1,41 @@
+var _span, _span2;
+import * as React from 'react';
+import useClipboardCopy from "./useClipboardCopy.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CodeCopyButton(props) {
+  const {
+    code,
+    ...other
+  } = props;
+  const {
+    copy,
+    isCopied
+  } = useClipboardCopy();
+  // This component is designed to be wrapped in NoSsr
+  const macOS = window.navigator.platform.toUpperCase().includes('MAC');
+  const key = macOS ? '⌘' : 'Ctrl + ';
+  return /*#__PURE__*/_jsx("div", {
+    className: "MuiCode-copy-container",
+    children: /*#__PURE__*/_jsxs("button", {
+      ...other,
+      "aria-label": "Copy the code",
+      type: "button",
+      className: "MuiCode-copy",
+      onClick: async () => {
+        // event.stopPropagation();
+        await copy(code);
+      },
+      children: [isCopied ? 'Copied' : 'Copy', /*#__PURE__*/_jsxs("span", {
+        className: "MuiCode-copyKeypress",
+        style: {
+          opacity: isCopied ? 0 : 1
+        },
+        children: [_span || (_span = /*#__PURE__*/_jsx("span", {
+          children: "(or"
+        })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/_jsx("span", {
+          children: ")"
+        }))]
+      })]
+    })
+  });
+}

package/esm/CodeCopy/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CodeCopy.js";
+export * from "./CodeCopyButton.js";
+export { default as useClipboardCopy } from "./useClipboardCopy.js";

package/esm/CodeCopy/index.js

@@ -0,0 +1,3 @@
+export * from "./CodeCopy.js";
+export * from "./CodeCopyButton.js";
+export { default as useClipboardCopy } from "./useClipboardCopy.js";

package/esm/CodeCopy/useClipboardCopy.d.ts

@@ -0,0 +1,4 @@
+export default function useClipboardCopy(): {
+  copy: (text: string) => Promise<void>;
+  isCopied: boolean;
+};

package/esm/CodeCopy/useClipboardCopy.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import clipboardCopy from 'clipboard-copy';
+export default function useClipboardCopy() {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const timeout = React.useRef(undefined);
+  React.useEffect(() => () => {
+    clearTimeout(timeout.current);
+  }, []);
+  const copy = async text => {
+    await clipboardCopy(text);
+    setIsCopied(true);
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
+      setIsCopied(false);
+    }, 1200);
+  };
+  return {
+    copy,
+    isCopied
+  };
+}

package/esm/ComponentLinkHeader/ComponentLinkHeader.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MarkdownHeaders } from '@mui/internal-markdown';
+export interface ComponentLinkHeaderProps {
+  design?: boolean;
+  markdown: {
+    headers: MarkdownHeaders;
+  };
+}
+export declare function ComponentLinkHeader(props: ComponentLinkHeaderProps): React.JSX.Element;

package/{node → esm}/ComponentLinkHeader/ComponentLinkHeader.js

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

package/esm/ComponentLinkHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ComponentLinkHeader.js";
+export { ComponentLinkHeader as default } from "./ComponentLinkHeader.js";

package/esm/ComponentLinkHeader/index.js

@@ -0,0 +1,2 @@
+export * from "./ComponentLinkHeader.js";
+export { ComponentLinkHeader as default } from "./ComponentLinkHeader.js";

package/esm/DocsProvider/DocsProvider.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Translations } from "../i18n/index.js";
+import { AdConfig } from "../Ad/index.js";
+export interface DocsConfig {
+  LANGUAGES: string[];
+  LANGUAGES_SSR: string[];
+  LANGUAGES_IN_PROGRESS: string[];
+  LANGUAGES_IGNORE_PAGES: (pathname: string) => boolean;
+}
+export interface DocsProviderProps {
+  config: DocsConfig;
+  adConfig?: Partial<AdConfig>;
+  defaultUserLanguage: string;
+  children?: React.ReactNode;
+  translations?: Translations;
+}
+export declare function DocsProvider({
+  config,
+  adConfig,
+  defaultUserLanguage,
+  translations,
+  children
+}: DocsProviderProps): React.JSX.Element;
+export declare function useDocsConfig(): DocsConfig;

package/esm/DocsProvider/DocsProvider.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { UserLanguageProvider } from "../i18n/index.js";
+import { AdProvider } from "../Ad/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DocsConfigContext = /*#__PURE__*/React.createContext(null);
+export function DocsProvider({
+  config,
+  adConfig,
+  defaultUserLanguage,
+  translations,
+  children
+}) {
+  return /*#__PURE__*/_jsx(DocsConfigContext.Provider, {
+    value: config,
+    children: /*#__PURE__*/_jsx(AdProvider, {
+      config: adConfig,
+      children: /*#__PURE__*/_jsx(UserLanguageProvider, {
+        defaultUserLanguage: defaultUserLanguage,
+        translations: translations,
+        children: 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 <DocsProvider>');
+  }
+  return config;
+}

package/esm/DocsProvider/index.d.ts

@@ -0,0 +1 @@
+export * from "./DocsProvider.js";

package/esm/DocsProvider/index.js

@@ -0,0 +1 @@
+export * from "./DocsProvider.js";

package/esm/HighlightedCode/HighlightedCode.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { SxProps } from '@mui/material/styles';
+export interface HighlightedCodeProps {
+  code: string;
+  copyButtonHidden?: boolean;
+  copyButtonProps?: ButtonProps;
+  language: string;
+  parentComponent?: React.ElementType;
+  plainStyle?: boolean;
+  preComponent?: React.ElementType;
+  sx?: SxProps;
+}
+export declare const HighlightedCode: React.ForwardRefExoticComponent<HighlightedCodeProps & React.RefAttributes<HTMLDivElement>>;

package/esm/HighlightedCode/HighlightedCode.js

@@ -0,0 +1,67 @@
+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,
+  color: 'hsl(60deg 30% 96.08%)',
+  // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch',
+  // iOS momentum scrolling.
+  '& code': {
+    // Avoid layout jump after hydration (style injected by Prism)
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased'
+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+  }
+}));
+export const HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
+  const {
+    code,
+    copyButtonHidden = false,
+    copyButtonProps,
+    language,
+    plainStyle,
+    parentComponent: Component = plainStyle ? React.Fragment : MarkdownElement,
+    preComponent: PreComponent = plainStyle ? Pre : 'pre',
+    ...other
+  } = props;
+  const renderedCode = React.useMemo(() => {
+    return prism(code.trim(), language);
+  }, [code, language]);
+  const handlers = useCodeCopy();
+  return /*#__PURE__*/_jsx(Component, {
+    ref: ref,
+    ...other,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "MuiCode-root",
+      ...handlers,
+      style: {
+        height: '100%'
+      },
+      children: [copyButtonHidden ? null : /*#__PURE__*/_jsx(NoSsr, {
+        children: /*#__PURE__*/_jsx(CodeCopyButton, {
+          code: code,
+          ...copyButtonProps
+        })
+      }), /*#__PURE__*/_jsx(PreComponent, {
+        children: /*#__PURE__*/_jsx("code", {
+          className: `language-${language}`
+          // eslint-disable-next-line react/no-danger
+          ,
+          dangerouslySetInnerHTML: {
+            __html: renderedCode
+          }
+        })
+      })]
+    })
+  });
+});

package/esm/HighlightedCode/index.d.ts

@@ -0,0 +1 @@
+export * from "./HighlightedCode.js";

package/esm/HighlightedCode/index.js

@@ -0,0 +1 @@
+export * from "./HighlightedCode.js";

package/esm/HighlightedCodeWithTabs/HighlightedCodeWithTabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const CodeTabList: import("@emotion/styled").StyledComponent<import("@mui/base/TabsList").TabsListOwnProps & Omit<any, keyof import("@mui/base/TabsList").TabsListOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: {
+    mounted: boolean;
+    contained?: boolean;
+  };
+}, {}, {}>;
+export declare const CodeTabPanel: import("@emotion/styled").StyledComponent<import("@mui/base/TabPanel").TabPanelOwnProps & Omit<any, keyof import("@mui/base/TabPanel").TabPanelOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: {
+    mounted: boolean;
+    contained?: boolean;
+  };
+}, {}, {}>;
+export declare const CodeTab: import("@emotion/styled").StyledComponent<import("@mui/base/Tab").TabOwnProps & Omit<any, keyof import("@mui/base/Tab").TabOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: {
+    mounted: boolean;
+    contained?: boolean;
+  };
+}, {}, {}>;
+type TabsConfig = {
+  code: string | ((tab: string) => string);
+  language: string;
+  tab: string;
+};
+export declare function HighlightedCodeWithTabs(props: {
+  tabs: Array<TabsConfig>;
+  storageKey?: string;
+} & Record<string, any>): React.JSX.Element;
+export {};