@mui/docs 6.0.0-alpha.5 → 6.0.0-alpha.7

package/CHANGELOG.md

@@ -1,5 +1,100 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.7
+
+<!-- generated comparing v6.0.0-alpha.6..next -->
+
+_May 16, 2024_
+
+A big thanks to the 14 contributors who made this release possible.
+
+### `@mui/material@6.0.0-alpha.7`
+
+- &#8203;<!-- 23 -->[Autocomplete] Deprecate `componentsProps` props (#42179) @lhilgert9
+- &#8203;<!-- 22 -->[Autocomplete] Improve design when there's a start adornment for small autocomplete (#41781) @TahaRhidouani
+- &#8203;<!-- 21 -->[Autocomplete] deprecate `*Component` and `*Props` for v6 (#41875) @lhilgert9
+- &#8203;<!-- 19 -->[CircularProgress] Deprecate composed classes (#42076) @sai6855
+- &#8203;<!-- 05 -->[ToggleButtonGroup] Add missing `selected` class in ToggleButtonGroupClasses type (#42243) @tarunrajput
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- &#8203;<!-- 18 -->[Divider] Only apply codemod if light prop is present (#42098) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 13 -->Fix 301 to Figma @oliviertassinari
+- &#8203;<!-- 12 -->Fix use of deprecated React API (#42118) @oliviertassinari
+- &#8203;<!-- 11 -->Remove the Base notification (#42191) @danilo-leal
+- &#8203;<!-- 07 -->[material-ui] Improve descriptions for deprecated props (#42221) @aarongarciah
+- &#8203;<!-- 06 -->[material-ui] Fix typo in composition docs (#42195) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 20 -->[blog] Introducing Pigment CSS blog post (#42198) @samuelsycamore
+- &#8203;<!-- 17 -->[core] Remove confusing comment @oliviertassinari
+- &#8203;<!-- 16 -->[core] Match other repositories and convention @oliviertassinari
+- &#8203;<!-- 15 -->[core] Fix React 18.3 warnings about spreading keys in the Material UI `Autocomplete` component (#42099) @heath-freenome
+- &#8203;<!-- 14 -->[core] Remove unecessary quotes @oliviertassinari
+- &#8203;<!-- 10 -->[docs-infra] Share code for section title (#42236) @alexfauquette
+- &#8203;<!-- 09 -->[docs-infra] Limit the copy button to the visible code block (#42115) @danilo-leal
+- &#8203;<!-- 08 -->[docs-infra] Make select components with two capital letters (#42004) @alexfauquette
+- &#8203;<!-- 08 -->[docs-infra][toolpad] Fix Page title and SERP title mismatch (#41919) @bharatkashyap
+- &#8203;<!-- 05 -->[website] Add redirection for talk @oliviertassinari
+- &#8203;<!-- 04 -->[website] Adds Arthur Balduini team info (#42193) @arthurbalduini
+- &#8203;<!-- 03 -->[website] Update the role template file (#42192) @danilo-leal
+- &#8203;<!-- 02 -->[website] Update MUI X deps and migrate TreeView demos to v7 API (#42149) @noraleonte
+- &#8203;<!-- 01 -->[website] Fix pricing casing (#42178) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @arthurbalduini, @bharatkashyap, @danilo-leal, @DiegoAndai, @heath-freenome, @lhilgert9, @noraleonte, @oliviertassinari, @sai6855, @samuelsycamore, @TahaRhidouani, @tarunrajput
+
+## v6.0.0-alpha.6
+
+<!-- generated comparing v6.0.0-alpha.5..next -->
+
+_May 8, 2024_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@6.0.0-alpha.6`
+
+- [Chip] Add colorDefault class to chipClasses (#42067) @sai6855
+- Migrate components to support CSS extraction (#42001) @siriwatknp
+- [SpeedDial] Deprecate TransitionComponent (#40698) @harry-whorlow
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- Add `theme-v6` migration (#42056) @siriwatknp
+
+### `@mui/icons-material@6.0.0-alpha.6`
+
+- Add the Emergency icon (#42080) @danilo-leal
+
+### Docs
+
+- [autocomplete] Fix duplicate autocomplete id (#42086) @oliviertassinari
+- Fix SEO redirection issues @oliviertassinari
+- [material-ui] Fix broken link (#42142) @aarongarciah
+- [material-ui][docs] Fix link on the Sync page (#42088) @danilo-leal
+
+### Core
+
+- [blog] Shorten title to fit @oliviertassinari
+- [blog] Update Sync post OG image (#42114) @danilo-leal
+- [blog] A few tweaks in introducing-sync-plugin (#42092) @oliviertassinari
+- [code-infra] Add canary release scripts (#41949) @michaldudak
+- [code-infra] Move ComponentLinkHeader to @mui/docs (#42061) @Janpot
+- [code-infra] Bump node image used by CI in docker (#42079) @LukasTy
+- [core] Restrict import path with ESLint (#41970) @oliviertassinari
+- [docs-infra] Add design and formatting improvements (#42063) @danilo-leal
+- [docs-infra] Fix HTML structure violations (#42085) @oliviertassinari
+- [website] Componentize a few Careers page sections (#42102) @danilo-leal
+- [website] Refine the InfoCard design (#42116) @danilo-leal
+- [website] Fix home page slider's track position (#42141) @aarongarciah
+- [website] Closing the survey @oliviertassinari
+- [website] Remove Survey banner from website and Core docs (#42104) @joserodolfofreitas
+
+All contributors of this release in alphabetical order: @aarongarciah, @danilo-leal, @harry-whorlow, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp
+
 ## v6.0.0-alpha.5
 
 <!-- generated comparing v6.0.0-alpha.4..next -->

package/CodeCopy/CodeCopyButton.js

@@ -3,8 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _span, _span2;
 const _excluded = ["code"];
 import * as React from 'react';
-import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
-import LibraryAddCheckRoundedIcon from '@mui/icons-material/LibraryAddCheckRounded';
 import useClipboardCopy from './useClipboardCopy';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CodeCopyButton(props) {
@@ -29,16 +27,11 @@ export function CodeCopyButton(props) {
         // event.stopPropagation();
         await copy(code);
       },
-      children: [isCopied ? /*#__PURE__*/_jsx(LibraryAddCheckRoundedIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }) : /*#__PURE__*/_jsx(ContentCopyRoundedIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }), /*#__PURE__*/_jsxs("span", {
+      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", {

package/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/ComponentLinkHeader/ComponentLinkHeader.js

@@ -0,0 +1,179 @@
+var _ChatRounded, _BundleSizeIcon, _W3CIcon, _MaterialDesignIcon, _li, _React$Fragment;
+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 { styled } from '@mui/material/styles';
+import SketchIcon from '../svgIcons/SketchIcon';
+import FigmaIcon from '../svgIcons/FigmaIcon';
+import AdobeXDIcon from '../svgIcons/AdobeXDIcon';
+import BundleSizeIcon from '../svgIcons/BundleSizeIcon';
+import W3CIcon from '../svgIcons/W3CIcon';
+import MaterialDesignIcon from '../svgIcons/MaterialDesignIcon';
+import { useTranslate } from '../i18n';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Root = styled('ul')({
+  margin: 0,
+  padding: 0,
+  listStyle: 'none',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 8,
+  '& .MuiChip-root': {
+    height: 26,
+    padding: '0 8px',
+    gap: 6,
+    '& .MuiChip-label': {
+      padding: 0
+    },
+    '& .MuiChip-iconSmall': {
+      margin: 0,
+      fontSize: 14
+    }
+  }
+});
+const defaultPackageNames = {
+  'material-ui': '@mui/material',
+  'joy-ui': '@mui/joy',
+  'base-ui': '@mui/base',
+  system: '@mui/system'
+};
+export function ComponentLinkHeader(props) {
+  const {
+    markdown: {
+      headers
+    },
+    design
+  } = props;
+  const t = useTranslate();
+  const packageName = headers.packageName ?? defaultPackageNames[headers.productId] ?? '@mui/material';
+  return /*#__PURE__*/_jsxs(Root, {
+    children: [headers.githubLabel ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: `${process.env.SOURCE_CODE_REPO}/labels/${encodeURIComponent(headers.githubLabel)}`,
+        icon: _ChatRounded || (_ChatRounded = /*#__PURE__*/_jsx(ChatRounded, {
+          color: "primary"
+        })),
+        "data-ga-event-category": "ComponentLinkHeader",
+        "data-ga-event-action": "click",
+        "data-ga-event-label": t('githubLabel'),
+        "data-ga-event-split": "0.1",
+        label: t('githubLabel')
+      })
+    }) : null, /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: t('bundleSizeTooltip'),
+        describeChild: true,
+        children: /*#__PURE__*/_jsx(Chip, {
+          clickable: true,
+          role: undefined,
+          component: "a",
+          size: "small",
+          variant: "outlined",
+          rel: "nofollow",
+          href: `https://bundlephobia.com/package/${packageName}@latest`,
+          icon: _BundleSizeIcon || (_BundleSizeIcon = /*#__PURE__*/_jsx(BundleSizeIcon, {
+            color: "primary"
+          })),
+          "data-ga-event-category": "ComponentLinkHeader",
+          "data-ga-event-action": "click",
+          "data-ga-event-label": t('bundleSize'),
+          "data-ga-event-split": "0.1",
+          label: t('bundleSize')
+        })
+      })
+    }), headers.waiAria ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: headers.waiAria,
+        icon: _W3CIcon || (_W3CIcon = /*#__PURE__*/_jsx(W3CIcon, {
+          color: "primary"
+        })),
+        "data-ga-event-category": "ComponentLinkHeader",
+        "data-ga-event-action": "click",
+        "data-ga-event-label": "WAI-ARIA",
+        "data-ga-event-split": "0.1",
+        label: "WAI-ARIA"
+      })
+    }) : null, headers.materialDesign ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: headers.materialDesign,
+        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__*/_jsxs(React.Fragment, {
+      children: [_li || (_li = /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Chip, {
+          clickable: true,
+          role: undefined,
+          component: "a",
+          size: "small",
+          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__*/_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 : _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(Chip, {
+            clickable: true,
+            role: undefined,
+            component: "a",
+            size: "small",
+            variant: "outlined",
+            rel: "nofollow",
+            href: "https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
+            icon: /*#__PURE__*/_jsx(AdobeXDIcon, {}),
+            "data-ga-event-category": "ComponentLinkHeader",
+            "data-ga-event-action": "click",
+            "data-ga-event-label": "Adobe XD",
+            "data-ga-event-split": "0.1",
+            label: "Adobe"
+          })
+        }), /*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(Chip, {
+            clickable: true,
+            role: undefined,
+            component: "a",
+            size: "small",
+            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__*/_jsx(SketchIcon, {}),
+            "data-ga-event-category": "ComponentLinkHeader",
+            "data-ga-event-action": "click",
+            "data-ga-event-label": "Sketch",
+            "data-ga-event-split": "0.1",
+            label: "Sketch"
+          })
+        })]
+      }))]
+    })]
+  });
+}

package/ComponentLinkHeader/index.d.ts

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

package/ComponentLinkHeader/index.js

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

package/ComponentLinkHeader/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/ComponentLinkHeader/index.js",
+  "types": "./index.d.ts"
+}

package/InfoCard/InfoCard.d.ts

@@ -8,7 +8,6 @@ export declare function GlowingIconContainer({ icon }: GlowingIconContainerProps
 interface InfoCardProps {
     classNameDescription?: string;
     classNameTitle?: string;
-    dense?: boolean;
     description?: string;
     icon?: React.ReactNode;
     link?: string;

package/InfoCard/InfoCard.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["classNameDescription", "classNameTitle", "dense", "description", "icon", "link", "svg", "title", "titleProps"];
+const _excluded = ["classNameDescription", "classNameTitle", "description", "icon", "link", "svg", "title", "titleProps"];
 import * as React from 'react';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
@@ -13,8 +13,8 @@ export function GlowingIconContainer({
 }) {
   return /*#__PURE__*/_jsx(Box, {
     sx: theme => _extends({
-      width: 40,
-      height: 40,
+      width: 36,
+      height: 36,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -23,10 +23,13 @@ export function GlowingIconContainer({
       border: '1px solid',
       borderColor: 'primary.200',
       bgcolor: 'primary.50',
-      boxShadow: `0px 0 0 2px ${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: alpha(theme.palette.primary[400], 0.25),
-      bgcolor: alpha(theme.palette.primary[900], 0.4),
+      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
@@ -36,7 +39,6 @@ export function InfoCard(props) {
   const {
       classNameDescription,
       classNameTitle,
-      dense,
       description,
       icon,
       link,
@@ -55,7 +57,7 @@ export function InfoCard(props) {
     prefetch: false
   } : {}, {
     sx: theme => _extends({
-      p: dense ? 2.5 : 3.5,
+      p: 2.5,
       height: '100%',
       background: `${(theme.vars || theme).palette.gradients.linearSubtle}`
     }, theme.applyDarkStyles({
@@ -67,7 +69,7 @@ export function InfoCard(props) {
     children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
       icon: icon
     }), /*#__PURE__*/_jsx(Typography, _extends({
-      fontWeight: "bold",
+      fontWeight: "semiBold",
       component: "h3",
       color: "text.primary",
       variant: "body2",

package/MarkdownElement/MarkdownElement.js

@@ -526,45 +526,35 @@ const Root = 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: lightTheme.typography.fontFamily,
+    fontWeight: lightTheme.typography.fontWeightMedium,
+    fontSize: lightTheme.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: alpha(lightTheme.palette.primaryDark[600], 0.5),
+    backgroundColor: alpha(lightTheme.palette.primaryDark[800], 0.5),
+    color: `var(--muidocs-palette-grey-200, ${lightTheme.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: lightTheme.palette.primaryDark[600],
-      '& svg': {
-        opacity: 1
-      },
+      borderColor: `var(--muidocs-palette-primaryDark-400, ${lightTheme.palette.primaryDark[400]})`,
+      backgroundColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+      color: '#FFF',
       '& .MuiCode-copyKeypress': {
         display: 'block',
         // Approximate no hover capabilities with no keyboard
@@ -577,17 +567,19 @@ const Root = 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: lightTheme.palette.primary[700],
+      borderColor: `var(--muidocs-palette-primaryDark-400, ${lightTheme.palette.primaryDark[400]})`,
+      backgroundColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
       color: '#fff',
-      backgroundColor: lightTheme.palette.primaryDark[600],
-      '& .MuiCode-copy-icon': {
+      '& .MuiCode-copyKeypress': {
+        opacity: 0
+      },
+      '& .MuiCode-copy-label': {
         display: 'none'
       },
-      '& .MuiCode-copied-icon': {
+      '& .MuiCode-copied-label': {
         display: 'block'
       }
     }

package/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SectionTitleProps {
+    title: string;
+    hash: string;
+    level?: 'h2' | 'h3' | 'h4';
+}
+export declare function SectionTitle(props: SectionTitleProps): React.JSX.Element;

package/SectionTitle/SectionTitle.js

@@ -0,0 +1,30 @@
+var _span;
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SectionTitle(props) {
+  const {
+    title,
+    hash,
+    level: Level = 'h2'
+  } = props;
+  return /*#__PURE__*/_jsx(Level, {
+    id: hash,
+    style: {
+      flexGrow: 1
+    },
+    children: /*#__PURE__*/_jsxs("a", {
+      "aria-labelledby": hash,
+      className: "title-link-to-anchor",
+      href: `#${hash}`,
+      tabIndex: -1,
+      children: [title, _span || (_span = /*#__PURE__*/_jsx("span", {
+        className: "anchor-icon",
+        children: /*#__PURE__*/_jsx("svg", {
+          children: /*#__PURE__*/_jsx("use", {
+            xlinkHref: "#anchor-link-icon"
+          })
+        })
+      }))]
+    })
+  });
+}

package/SectionTitle/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionTitle';

package/SectionTitle/index.js

@@ -0,0 +1 @@
+export * from './SectionTitle';

package/SectionTitle/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/SectionTitle/index.js",
+  "types": "./index.d.ts"
+}

package/branding/brandingTheme.js

@@ -661,7 +661,8 @@ export function getThemedComponents() {
               fontSize: theme.typography.pxToRem(14),
               fontWeight: 500,
               '&:hover, &:focus': {
-                backgroundColor: (theme.vars || theme).palette.grey[50]
+                backgroundColor: (theme.vars || theme).palette.grey[100],
+                color: (theme.vars || theme).palette.text.primary
               },
               '&:focus-visible': {
                 outline: 'none'

package/node/CodeCopy/CodeCopyButton.js

@@ -8,8 +8,6 @@ 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;
@@ -38,16 +36,11 @@ 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", {