@mui/docs 6.0.0-alpha.6 → 6.0.0-alpha.8

package/node/CodeCopy/CodeCopyButton.js

@@ -5,22 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CodeCopyButton = CodeCopyButton;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _ContentCopyRounded = _interopRequireDefault(require("@mui/icons-material/ContentCopyRounded"));
-var _LibraryAddCheckRounded = _interopRequireDefault(require("@mui/icons-material/LibraryAddCheckRounded"));
 var _useClipboardCopy = _interopRequireDefault(require("./useClipboardCopy"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span, _span2;
-const _excluded = ["code"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function CodeCopyButton(props) {
   const {
-      code
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    code,
+    ...other
+  } = props;
   const {
     copy,
     isCopied
@@ -30,7 +25,8 @@ function CodeCopyButton(props) {
   const key = macOS ? '⌘' : 'Ctrl + ';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "MuiCode-copy-container",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", (0, _extends2.default)({}, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      ...other,
       "aria-label": "Copy the code",
       type: "button",
       className: "MuiCode-copy",
@@ -38,22 +34,17 @@ function CodeCopyButton(props) {
         // event.stopPropagation();
         await copy(code);
       },
-      children: [isCopied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LibraryAddCheckRounded.default, {
-        sx: {
-          fontSize: 18
-        }
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentCopyRounded.default, {
-        sx: {
-          fontSize: 18
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [isCopied ? 'Copied' : 'Copy', /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         className: "MuiCode-copyKeypress",
+        style: {
+          opacity: isCopied ? 0 : 1
+        },
         children: [_span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: "(or"
         })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: ")"
         }))]
       })]
-    }))
+    })
   });
 }

package/node/HighlightedCode/HighlightedCode.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HighlightedCode = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _prism = _interopRequireDefault(require("@mui/internal-markdown/prism"));
 var _NoSsr = require("@mui/base/NoSsr");
@@ -14,7 +12,6 @@ var _styles = require("@mui/material/styles");
 var _CodeCopy = require("../CodeCopy");
 var _MarkdownElement = require("../MarkdownElement");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "plainStyle", "parentComponent", "preComponent"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Pre = (0, _styles.styled)('pre')(({
@@ -29,39 +26,42 @@ const Pre = (0, _styles.styled)('pre')(({
   [theme.breakpoints.up('md')]: {
     maxWidth: 'calc(100vw - 32px - 16px)'
   },
-  '& code': (0, _extends2.default)({}, theme.typography.caption, {
+  '& 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
-  })
+  }
 }));
 const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
   const {
-      copyButtonHidden = false,
-      copyButtonProps,
-      code,
-      language,
-      plainStyle,
-      parentComponent: Component = plainStyle ? 'div' : _MarkdownElement.MarkdownElement,
-      preComponent: PreComponent = plainStyle ? Pre : 'pre'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    copyButtonHidden = false,
+    copyButtonProps,
+    code,
+    language,
+    plainStyle,
+    parentComponent: Component = plainStyle ? 'div' : _MarkdownElement.MarkdownElement,
+    preComponent: PreComponent = plainStyle ? Pre : 'pre',
+    ...other
+  } = props;
   const renderedCode = React.useMemo(() => {
     return (0, _prism.default)(code.trim(), language);
   }, [code, language]);
   const handlers = (0, _CodeCopy.useCodeCopy)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({
-    ref: ref
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-      className: "MuiCode-root"
-    }, handlers, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    ref: ref,
+    ...other,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "MuiCode-root",
+      ...handlers,
       children: [copyButtonHidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, (0, _extends2.default)({
-          code: code
-        }, copyButtonProps))
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, {
+          code: code,
+          ...copyButtonProps
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreComponent, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
           className: `language-${language}`
@@ -72,6 +72,6 @@ const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(
           }
         })
       })]
-    }))
-  }));
+    })
+  });
 });

package/node/InfoCard/InfoCard.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GlowingIconContainer = GlowingIconContainer;
 exports.InfoCard = InfoCard;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -15,14 +13,13 @@ var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Link = require("../Link");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classNameDescription", "classNameTitle", "description", "icon", "link", "svg", "title", "titleProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function GlowingIconContainer({
   icon
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-    sx: theme => (0, _extends2.default)({
+    sx: theme => ({
       width: 36,
       height: 36,
       display: 'flex',
@@ -36,63 +33,65 @@ function GlowingIconContainer({
       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`,
       '& .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`
-    })),
+      },
+      ...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`
+      })
+    }),
     children: icon
   });
 }
 function InfoCard(props) {
   const {
-      classNameDescription,
-      classNameTitle,
-      description,
-      icon,
-      link,
-      svg,
-      title,
-      titleProps
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, (0, _extends2.default)({
+    classNameDescription,
+    classNameTitle,
+    description,
+    icon,
+    link,
+    svg,
+    title,
+    titleProps,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, {
     variant: "outlined",
     component: link ? _Link.Link : 'div',
-    href: link
-  }, link ? {
-    noLinkStyle: true,
-    // Fix overloading with prefetch={false}, only prefetch on hover.
-    prefetch: false
-  } : {}, {
-    sx: theme => (0, _extends2.default)({
+    href: link,
+    ...(link ? {
+      noLinkStyle: true,
+      // Fix overloading with prefetch={false}, only prefetch on hover.
+      prefetch: false
+    } : {}),
+    sx: theme => ({
       p: 2.5,
       height: '100%',
-      background: `${(theme.vars || theme).palette.gradients.linearSubtle}`
-    }, theme.applyDarkStyles({
-      bgcolor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.25),
       background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-      borderColor: 'primaryDark.700'
-    }))
-  }, other, {
+      ...theme.applyDarkStyles({
+        bgcolor: (0, _styles.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, {
       icon: icon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       fontWeight: "semiBold",
       component: "h3",
       color: "text.primary",
       variant: "body2",
       mt: icon ? 2 : 0,
       mb: description ? 0.5 : 0,
-      className: classNameTitle
-    }, titleProps, {
+      className: classNameTitle,
+      ...titleProps,
       children: title
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: "body2",
       color: "text.secondary",
       className: classNameDescription,
       children: description
     })]
-  }));
+  });
 }

package/node/Link/Link.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Link = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _router = require("next/router");
@@ -16,8 +14,8 @@ var _styles = require("@mui/material/styles");
 var _i18n = require("../i18n");
 var _DocsProvider = require("../DocsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["to", "linkAs", "replace", "scroll", "shallow", "prefetch", "legacyBehavior", "locale"],
-  _excluded2 = ["activeClassName", "as", "className", "href", "legacyBehavior", "linkAs", "locale", "noLinkStyle", "prefetch", "replace", "role", "scroll", "shallow"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * File to keep in sync with:
  *
@@ -25,22 +23,21 @@ const _excluded = ["to", "linkAs", "replace", "scroll", "shallow", "prefetch", "
  * - /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.
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Anchor = (0, _styles.styled)('a')({});
 const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
   const {
-      to,
-      linkAs,
-      replace,
-      scroll,
-      shallow,
-      prefetch,
-      legacyBehavior = true,
-      locale
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    to,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior = true,
+    locale,
+    ...other
+  } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_link.default, {
     href: to,
     prefetch: prefetch,
@@ -51,31 +48,33 @@ const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed
     passHref: true,
     locale: locale,
     legacyBehavior: legacyBehavior,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Anchor, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Anchor, {
       "data-no-markdown-link": "true",
-      ref: ref
-    }, other))
+      ref: ref,
+      ...other
+    })
   });
 });
 // A styled version of the Next.js Pages Router Link component:
 // https://nextjs.org/docs/pages/api-reference/components/link
 const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
   const {
-      activeClassName = 'active',
-      as,
-      className: classNameProps,
-      href,
-      legacyBehavior,
-      linkAs: linkAsProp,
-      locale,
-      noLinkStyle,
-      prefetch,
-      replace,
-      // Link don't have roles.
-      scroll,
-      shallow
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    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 = (0, _router.useRouter)();
   const pathname = typeof href === 'string' ? href : href == null ? void 0 : href.pathname;
   const routerPathname = router.pathname.replace('/[docsTab]', '');
@@ -100,14 +99,18 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     locale
   };
   if (noLinkStyle) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(NextLinkComposed, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(NextLinkComposed, {
       className: className,
-      ref: ref
-    }, nextjsProps, other));
+      ref: ref,
+      ...nextjsProps,
+      ...other
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
     component: NextLinkComposed,
     className: className,
-    ref: ref
-  }, nextjsProps, other));
+    ref: ref,
+    ...nextjsProps,
+    ...other
+  });
 });

package/node/MarkdownElement/MarkdownElement.js

@@ -5,21 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkdownElement = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _branding = require("../branding");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "renderedMarkdown"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Root = (0, _styles.styled)('div')(({
   theme
 }) => {
   var _theme$shape$borderRa, _theme$shape, _theme$shape$borderRa2, _theme$shape2, _theme$shape$borderRa3, _theme$shape3;
-  return (0, _extends2.default)({}, _branding.brandingLightTheme.typography.body1, {
+  return {
+    ..._branding.brandingLightTheme.typography.body1,
     lineHeight: 1.6,
     // Increased compared to the 1.5 default to make the docs easier to read.
     color: `var(--muidocs-palette-text-primary, ${_branding.brandingLightTheme.palette.text.primary})`,
@@ -52,11 +50,12 @@ const Root = (0, _styles.styled)('div')(({
         maxWidth: 'calc(100vw - 32px - 16px)'
       }
     },
-    '& code': (0, _extends2.default)({}, _branding.brandingLightTheme.typography.body2, {
+    '& code': {
+      ..._branding.brandingLightTheme.typography.body2,
       fontFamily: _branding.brandingLightTheme.typography.fontFamilyCode,
       fontWeight: 400,
       WebkitFontSmoothing: 'subpixel-antialiased'
-    }),
+    },
     '& pre > code': {
       // Reset for Safari
       // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
@@ -74,47 +73,53 @@ const Root = (0, _styles.styled)('div')(({
       direction: 'ltr /*! @noflip */',
       boxDecorationBreak: 'clone'
     },
-    '& h1': (0, _extends2.default)({}, _branding.brandingLightTheme.typography.h3, {
+    '& h1': {
+      ..._branding.brandingLightTheme.typography.h3,
       fontSize: _branding.brandingLightTheme.typography.pxToRem(36),
       fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
       margin: '10px 0',
       color: `var(--muidocs-palette-primaryDark-900, ${_branding.brandingLightTheme.palette.primaryDark[900]})`,
       fontWeight: 600,
       letterSpacing: -0.2
-    }),
-    '& .description': (0, _extends2.default)({}, _branding.brandingLightTheme.typography.subtitle1, {
+    },
+    '& .description': {
+      ..._branding.brandingLightTheme.typography.subtitle1,
       fontWeight: 400,
       margin: '0 0 24px'
-    }),
+    },
     '& .component-tabs': {
       margin: '0 0 40px'
     },
-    '& h2': (0, _extends2.default)({}, _branding.brandingLightTheme.typography.h5, {
+    '& h2': {
+      ..._branding.brandingLightTheme.typography.h5,
       fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
       fontSize: theme.typography.pxToRem(26),
       fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${_branding.brandingLightTheme.palette.grey[900]})`,
       margin: '40px 0 4px'
-    }),
-    '& h3': (0, _extends2.default)({}, _branding.brandingLightTheme.typography.h6, {
+    },
+    '& h3': {
+      ..._branding.brandingLightTheme.typography.h6,
       fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
       fontSize: theme.typography.pxToRem(20),
       fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${_branding.brandingLightTheme.palette.grey[900]})`,
       margin: '24px 0 4px'
-    }),
-    '& h4': (0, _extends2.default)({}, _branding.brandingLightTheme.typography.subtitle1, {
+    },
+    '& h4': {
+      ..._branding.brandingLightTheme.typography.subtitle1,
       fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
       fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${_branding.brandingLightTheme.palette.grey[900]})`,
       margin: '20px 0 6px'
-    }),
-    '& h5': (0, _extends2.default)({}, _branding.brandingLightTheme.typography.subtitle2, {
+    },
+    '& h5': {
+      ..._branding.brandingLightTheme.typography.subtitle2,
       fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
       fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${_branding.brandingLightTheme.palette.grey[900]})`,
       margin: '20px 0 8px'
-    }),
+    },
     '& p': {
       marginTop: 0,
       marginBottom: 16,
@@ -242,13 +247,14 @@ const Root = (0, _styles.styled)('div')(({
         borderBottom: `1px dotted var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`
       }
     },
-    '& td': (0, _extends2.default)({}, theme.typography.body2, {
+    '& td': {
+      ...theme.typography.body2,
       borderBottom: `1px solid var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`,
       paddingRight: 20,
       paddingTop: 16,
       paddingBottom: 16,
       color: `var(--muidocs-palette-text-secondary, ${_branding.brandingLightTheme.palette.text.secondary})`
-    }),
+    },
     '& td code': {
       lineHeight: 1.6
     },
@@ -537,45 +543,35 @@ const Root = (0, _styles.styled)('div')(({
       top: 0
     },
     '& .MuiCode-copy': {
-      display: 'inline-flex',
-      flexDirection: 'row-reverse',
-      alignItems: 'center',
-      width: 26,
-      height: 26,
       cursor: 'pointer',
       position: 'absolute',
       top: 12,
       right: 12,
+      display: 'inline-flex',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      height: 24,
       padding: theme.spacing(0.5),
-      fontFamily: 'inherit',
-      fontWeight: 500,
+      paddingBottom: '5px',
+      // optical alignment
+      fontFamily: _branding.brandingLightTheme.typography.fontFamily,
+      fontWeight: _branding.brandingLightTheme.typography.fontWeightMedium,
+      fontSize: _branding.brandingLightTheme.typography.pxToRem(12),
       borderRadius: 6,
-      border: 'none',
-      backgroundColor: 'hsl(210, 35%, 9%)',
-      // using the code block one-off background color (defined in line 23)
-      color: '#FFF',
+      border: '1px solid',
+      borderColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[600], 0.5),
+      backgroundColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[800], 0.5),
+      color: `var(--muidocs-palette-grey-200, ${_branding.brandingLightTheme.palette.grey[200]})`,
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest
       }),
-      '& svg': {
-        userSelect: 'none',
-        width: theme.typography.pxToRem(16),
-        height: theme.typography.pxToRem(16),
-        display: 'inline-block',
-        fill: 'currentcolor',
-        flexShrink: 0,
-        fontSize: '18px',
-        margin: 'auto',
-        opacity: 0.5
-      },
-      '& .MuiCode-copied-icon': {
+      '& .MuiCode-copied-label': {
         display: 'none'
       },
       '&:hover, &:focus': {
-        backgroundColor: _branding.brandingLightTheme.palette.primaryDark[600],
-        '& svg': {
-          opacity: 1
-        },
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
+        color: '#FFF',
         '& .MuiCode-copyKeypress': {
           display: 'block',
           // Approximate no hover capabilities with no keyboard
@@ -588,17 +584,19 @@ const Root = (0, _styles.styled)('div')(({
       '& .MuiCode-copyKeypress': {
         display: 'none',
         position: 'absolute',
-        right: 26
+        right: 34
       },
       '&[data-copied]': {
-        // style of the button when it is in copied state.
-        borderColor: _branding.brandingLightTheme.palette.primary[700],
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
         color: '#fff',
-        backgroundColor: _branding.brandingLightTheme.palette.primaryDark[600],
-        '& .MuiCode-copy-icon': {
+        '& .MuiCode-copyKeypress': {
+          opacity: 0
+        },
+        '& .MuiCode-copy-label': {
           display: 'none'
         },
-        '& .MuiCode-copied-icon': {
+        '& .MuiCode-copied-label': {
           display: 'block'
         }
       }
@@ -659,7 +657,7 @@ const Root = (0, _styles.styled)('div')(({
         borderRadius: 0
       }
     }
-  });
+  };
 }, ({
   theme
 }) => ({
@@ -818,10 +816,10 @@ const Root = (0, _styles.styled)('div')(({
 }));
 const MarkdownElement = exports.MarkdownElement = /*#__PURE__*/React.forwardRef(function MarkdownElement(props, ref) {
   const {
-      className,
-      renderedMarkdown
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    className,
+    renderedMarkdown,
+    ...other
+  } = props;
   const more = {};
   if (typeof renderedMarkdown === 'string') {
     // workaround for https://github.com/facebook/react/issues/17170
@@ -830,9 +828,10 @@ const MarkdownElement = exports.MarkdownElement = /*#__PURE__*/React.forwardRef(
       __html: renderedMarkdown
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
-    className: (0, _clsx.default)('markdown-body', className)
-  }, more, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    className: (0, _clsx.default)('markdown-body', className),
+    ...more,
+    ...other,
     ref: ref
-  }));
+  });
 });