diff --git a/docs/data/joy/components/accordion/AccordionTransition.js b/docs/data/joy/components/accordion/AccordionTransition.js index 15908702f1506d..97d04db1d8f0c0 100644 --- a/docs/data/joy/components/accordion/AccordionTransition.js +++ b/docs/data/joy/components/accordion/AccordionTransition.js @@ -8,7 +8,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Stack from '@mui/joy/Stack'; import Typography from '@mui/joy/Typography'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; export default function AccordionTransition() { diff --git a/docs/data/joy/components/badge/BadgeAlignment.js b/docs/data/joy/components/badge/BadgeAlignment.js index 4d0c4ac31ef6ad..4d634732314b0d 100644 --- a/docs/data/joy/components/badge/BadgeAlignment.js +++ b/docs/data/joy/components/badge/BadgeAlignment.js @@ -5,7 +5,7 @@ import Box from '@mui/joy/Box'; import IconButton from '@mui/joy/IconButton'; import ArrowUpward from '@mui/icons-material/ArrowUpward'; import ArrowDownward from '@mui/icons-material/ArrowDownward'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; export default function BadgeAlignment() { diff --git a/docs/data/joy/components/badge/BadgeAlignment.tsx b/docs/data/joy/components/badge/BadgeAlignment.tsx index 26cef0321dd2f4..f63d48b4b9ce34 100644 --- a/docs/data/joy/components/badge/BadgeAlignment.tsx +++ b/docs/data/joy/components/badge/BadgeAlignment.tsx @@ -5,7 +5,7 @@ import Box from '@mui/joy/Box'; import IconButton from '@mui/joy/IconButton'; import ArrowUpward from '@mui/icons-material/ArrowUpward'; import ArrowDownward from '@mui/icons-material/ArrowDownward'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; export default function BadgeAlignment() { diff --git a/docs/data/joy/components/grid/InteractiveGrid.js b/docs/data/joy/components/grid/InteractiveGrid.js index 6752884b6f1483..dcd42d773ad641 100644 --- a/docs/data/joy/components/grid/InteractiveGrid.js +++ b/docs/data/joy/components/grid/InteractiveGrid.js @@ -7,7 +7,7 @@ import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import { BrandingProvider } from '@mui/docs/branding'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function InteractiveGrid() { const [direction, setDirection] = React.useState('row'); diff --git a/docs/data/joy/components/grid/InteractiveGrid.tsx b/docs/data/joy/components/grid/InteractiveGrid.tsx index 8059be0f4b3260..14875c640d8a4a 100644 --- a/docs/data/joy/components/grid/InteractiveGrid.tsx +++ b/docs/data/joy/components/grid/InteractiveGrid.tsx @@ -7,7 +7,7 @@ import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import { GridDirection } from '@mui/system'; import { BrandingProvider } from '@mui/docs/branding'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; type GridItemsAlignment = | 'flex-start' diff --git a/docs/data/joy/components/grid/SpacingGrid.js b/docs/data/joy/components/grid/SpacingGrid.js index 20971a1813de88..56bf0c72b1630d 100644 --- a/docs/data/joy/components/grid/SpacingGrid.js +++ b/docs/data/joy/components/grid/SpacingGrid.js @@ -5,7 +5,7 @@ import FormControl from '@mui/joy/FormControl'; import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; export default function SpacingGrid() { diff --git a/docs/data/joy/components/grid/SpacingGrid.tsx b/docs/data/joy/components/grid/SpacingGrid.tsx index ebb3466624480a..027fd1666a7b17 100644 --- a/docs/data/joy/components/grid/SpacingGrid.tsx +++ b/docs/data/joy/components/grid/SpacingGrid.tsx @@ -5,7 +5,7 @@ import FormControl from '@mui/joy/FormControl'; import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; export default function SpacingGrid() { diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js index d5142c84f95783..7243fcf4fc30b4 100644 --- a/docs/data/joy/components/stack/InteractiveStack.js +++ b/docs/data/joy/components/stack/InteractiveStack.js @@ -7,7 +7,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Stack from '@mui/joy/Stack'; import { styled } from '@mui/joy/styles'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; const Item = styled(Sheet)(({ theme }) => ({ diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx index 971adbb6a0f9c3..2f6ab92a887fb2 100644 --- a/docs/data/joy/components/stack/InteractiveStack.tsx +++ b/docs/data/joy/components/stack/InteractiveStack.tsx @@ -7,7 +7,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Stack, { StackProps } from '@mui/joy/Stack'; import { styled } from '@mui/joy/styles'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; const Item = styled(Sheet)(({ theme }) => ({ diff --git a/docs/data/joy/customization/approaches/ButtonThemes.js b/docs/data/joy/customization/approaches/ButtonThemes.js index ee359cacdf3162..e5eb79a876b3fc 100644 --- a/docs/data/joy/customization/approaches/ButtonThemes.js +++ b/docs/data/joy/customization/approaches/ButtonThemes.js @@ -5,7 +5,7 @@ import Button from '@mui/joy/Button'; import FormLabel from '@mui/joy/FormLabel'; import Select from '@mui/joy/Select'; import Option from '@mui/joy/Option'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; const githubTheme = extendTheme({ diff --git a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js index 828ebe8d50fc04..9ccccc2261e8ad 100644 --- a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js +++ b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js @@ -9,7 +9,7 @@ import Select from '@mui/joy/Select'; import Option from '@mui/joy/Option'; import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded'; import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; export default function ListThemes() { diff --git a/docs/data/material/components/badges/BadgeAlignment.js b/docs/data/material/components/badges/BadgeAlignment.js index 1cce1c8ec7005a..f83681e740c61f 100644 --- a/docs/data/material/components/badges/BadgeAlignment.js +++ b/docs/data/material/components/badges/BadgeAlignment.js @@ -7,7 +7,7 @@ import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import Box from '@mui/material/Box'; import MailIcon from '@mui/icons-material/Mail'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function BadgeAlignment() { const [horizontal, setHorizontal] = React.useState('right'); diff --git a/docs/data/material/components/chips/ChipsPlayground.js b/docs/data/material/components/chips/ChipsPlayground.js index fdcc7d5c36d2cd..e7802bb5eaaf8d 100644 --- a/docs/data/material/components/chips/ChipsPlayground.js +++ b/docs/data/material/components/chips/ChipsPlayground.js @@ -9,7 +9,7 @@ import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import FaceIcon from '@mui/icons-material/Face'; import DoneIcon from '@mui/icons-material/Done'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; function ChipsPlayground() { const [state, setState] = React.useState({ diff --git a/docs/data/material/components/grid/InteractiveGrid.js b/docs/data/material/components/grid/InteractiveGrid.js index adb64291001db6..c7232342e2b123 100644 --- a/docs/data/material/components/grid/InteractiveGrid.js +++ b/docs/data/material/components/grid/InteractiveGrid.js @@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function InteractiveGrid() { const [direction, setDirection] = React.useState('row'); diff --git a/docs/data/material/components/grid/InteractiveGrid.tsx b/docs/data/material/components/grid/InteractiveGrid.tsx index ee8c8da03b590c..e1538165570f4b 100644 --- a/docs/data/material/components/grid/InteractiveGrid.tsx +++ b/docs/data/material/components/grid/InteractiveGrid.tsx @@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; type GridItemsAlignment = | 'flex-start' diff --git a/docs/data/material/components/grid/SpacingGrid.js b/docs/data/material/components/grid/SpacingGrid.js index 1ed84d0670f904..6a22bdae9154d6 100644 --- a/docs/data/material/components/grid/SpacingGrid.js +++ b/docs/data/material/components/grid/SpacingGrid.js @@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/material/components/grid/SpacingGrid.tsx b/docs/data/material/components/grid/SpacingGrid.tsx index 4b6f8030592ae6..31e8f6a1b71d77 100644 --- a/docs/data/material/components/grid/SpacingGrid.tsx +++ b/docs/data/material/components/grid/SpacingGrid.tsx @@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/material/components/grid2/SpacingGrid.js b/docs/data/material/components/grid2/SpacingGrid.js index 5669d5db208381..95feabb53a27ca 100644 --- a/docs/data/material/components/grid2/SpacingGrid.js +++ b/docs/data/material/components/grid2/SpacingGrid.js @@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/material/components/grid2/SpacingGrid.tsx b/docs/data/material/components/grid2/SpacingGrid.tsx index 2db72e4043ae4e..54cce018da2fba 100644 --- a/docs/data/material/components/grid2/SpacingGrid.tsx +++ b/docs/data/material/components/grid2/SpacingGrid.tsx @@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js index fc2d1f34e158a5..faf1532ef9ad64 100644 --- a/docs/data/material/components/material-icons/SearchIcons.js +++ b/docs/data/material/components/material-icons/SearchIcons.js @@ -45,7 +45,7 @@ import useQueryParameterState from 'docs/src/modules/utils/useQueryParameterStat // import DeleteForeverRounded from '@mui/icons-material/DeleteForeverRounded'; // import DeleteForeverTwoTone from '@mui/icons-material/DeleteForeverTwoTone'; // import DeleteForeverSharp from '@mui/icons-material/DeleteForeverSharp'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import synonyms from './synonyms'; const FlexSearchIndex = flexsearch.default.Index; diff --git a/docs/data/material/components/popover/AnchorPlayground.js b/docs/data/material/components/popover/AnchorPlayground.js index fc4b5f91e9cd17..694a500ca4482e 100644 --- a/docs/data/material/components/popover/AnchorPlayground.js +++ b/docs/data/material/components/popover/AnchorPlayground.js @@ -12,7 +12,7 @@ import Button from '@mui/material/Button'; import Popover from '@mui/material/Popover'; import Input from '@mui/material/Input'; import InputLabel from '@mui/material/InputLabel'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; const inlineStyles = { anchorVertical: { diff --git a/docs/data/material/components/popper/ScrollPlayground.js b/docs/data/material/components/popper/ScrollPlayground.js index d3bc2d9e8f34e6..24cbe701c2f13a 100644 --- a/docs/data/material/components/popper/ScrollPlayground.js +++ b/docs/data/material/components/popper/ScrollPlayground.js @@ -14,7 +14,7 @@ import DialogTitle from '@mui/material/DialogTitle'; import Switch from '@mui/material/Switch'; import TextField from '@mui/material/TextField'; import FormGroup from '@mui/material/FormGroup'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; const Popper = styled(MuiPopper, { shouldForwardProp: (prop) => prop !== 'arrow', diff --git a/docs/data/material/components/stack/InteractiveStack.js b/docs/data/material/components/stack/InteractiveStack.js index 8c61706ef15893..270c7d2354c96d 100644 --- a/docs/data/material/components/stack/InteractiveStack.js +++ b/docs/data/material/components/stack/InteractiveStack.js @@ -7,7 +7,7 @@ import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Stack from '@mui/material/Stack'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function InteractiveStack() { const [direction, setDirection] = React.useState('row'); diff --git a/docs/data/material/components/stack/InteractiveStack.tsx b/docs/data/material/components/stack/InteractiveStack.tsx index c6320ecb8a77c5..2c4fb30f5c44e8 100644 --- a/docs/data/material/components/stack/InteractiveStack.tsx +++ b/docs/data/material/components/stack/InteractiveStack.tsx @@ -7,7 +7,7 @@ import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Stack, { StackProps } from '@mui/material/Stack'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function InteractiveStack() { const [direction, setDirection] = React.useState('row'); diff --git a/docs/data/system/components/grid/SpacingGrid.js b/docs/data/system/components/grid/SpacingGrid.js index 4ffd3591650ef4..79e2db15c03725 100644 --- a/docs/data/system/components/grid/SpacingGrid.js +++ b/docs/data/system/components/grid/SpacingGrid.js @@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/system/components/grid/SpacingGrid.tsx b/docs/data/system/components/grid/SpacingGrid.tsx index 97c0d5fe114b2d..80a78f26c3ca75 100644 --- a/docs/data/system/components/grid/SpacingGrid.tsx +++ b/docs/data/system/components/grid/SpacingGrid.tsx @@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Paper from '@mui/material/Paper'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/system/components/stack/InteractiveStack.js b/docs/data/system/components/stack/InteractiveStack.js index 25f978b8fe2827..ed48e6ac727308 100644 --- a/docs/data/system/components/stack/InteractiveStack.js +++ b/docs/data/system/components/stack/InteractiveStack.js @@ -8,7 +8,7 @@ import Radio from '@mui/material/Radio'; import Grid from '@mui/system/Unstable_Grid'; import Stack from '@mui/system/Stack'; import { styled } from '@mui/system'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; const Item = styled('div')(({ theme }) => ({ backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', diff --git a/docs/data/system/components/stack/InteractiveStack.tsx b/docs/data/system/components/stack/InteractiveStack.tsx index 026d18c5ff7d5f..40c09e895eddc1 100644 --- a/docs/data/system/components/stack/InteractiveStack.tsx +++ b/docs/data/system/components/stack/InteractiveStack.tsx @@ -8,7 +8,7 @@ import Radio from '@mui/material/Radio'; import Grid from '@mui/system/Unstable_Grid'; import Stack, { StackProps } from '@mui/system/Stack'; import { styled } from '@mui/system'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; const Item = styled('div')(({ theme }) => ({ backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff', diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 70dc207b752e66..7ba45523219f4e 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -18,7 +18,7 @@ import joyPages from 'docs/data/joy/pages'; import systemPages from 'docs/data/system/pages'; import PageContext from 'docs/src/modules/components/PageContext'; import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics'; -import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy'; +import { CodeCopyProvider } from '@mui/docs/CodeCopy'; import { ThemeProvider } from 'docs/src/modules/components/ThemeContext'; import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant'; import { CodeStylingProvider } from 'docs/src/modules/utils/codeStylingSolution'; diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx index 59caeeccbc97ad..dcf4b50acd53c6 100644 --- a/docs/src/components/home/AdvancedShowcase.tsx +++ b/docs/src/components/home/AdvancedShowcase.tsx @@ -5,8 +5,8 @@ import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import Divider from '@mui/material/Divider'; import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles'; import ProgressBar from 'docs/src/components/x-grid/ProgressBar'; import EditProgress from 'docs/src/components/x-grid/EditProgress'; diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx index b2483ab7abe165..0277cad4422d1d 100644 --- a/docs/src/components/home/CoreShowcase.tsx +++ b/docs/src/components/home/CoreShowcase.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Button, { buttonClasses } from '@mui/material/Button'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo'; import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer'; import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer'; diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx index dea8227b45d20d..d7e1e013218a76 100644 --- a/docs/src/components/productBaseUI/BaseUIComponents.tsx +++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx @@ -20,8 +20,8 @@ import ROUTES from 'docs/src/route'; // switcher icons -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; import BaseButtonDemo from './components/BaseButtonDemo'; import BaseMenuDemo from './components/BaseMenuDemo'; import BaseInputDemo from './components/BaseInputDemo'; diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx index 797744435b6a22..450b60234541d8 100644 --- a/docs/src/components/productBaseUI/BaseUICustomization.tsx +++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx @@ -14,8 +14,8 @@ import GradientText from 'docs/src/components/typography/GradientText'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import FlashCode from 'docs/src/components/animation/FlashCode'; import Frame from 'docs/src/components/action/Frame'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; const code = ` import clsx from 'clsx'; diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx index bed80677e8e989..5121c25c00c789 100644 --- a/docs/src/components/productMaterial/MaterialComponents.tsx +++ b/docs/src/components/productMaterial/MaterialComponents.tsx @@ -29,8 +29,8 @@ import Highlighter from 'docs/src/components/action/Highlighter'; import More from 'docs/src/components/action/More'; import Frame from 'docs/src/components/action/Frame'; import { customTheme } from 'docs/src/components/home/MaterialDesignComponents'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; import StylingInfo from 'docs/src/components/action/StylingInfo'; import ROUTES from 'docs/src/route'; diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx index 83a9f27affedf3..2565c703eea688 100644 --- a/docs/src/components/productMaterial/MaterialStyling.tsx +++ b/docs/src/components/productMaterial/MaterialStyling.tsx @@ -13,8 +13,8 @@ import Item, { Group } from 'docs/src/components/action/Item'; import Highlighter from 'docs/src/components/action/Highlighter'; import Frame from 'docs/src/components/action/Frame'; import RealEstateCard from 'docs/src/components/showcase/RealEstateCard'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; import FlashCode from 'docs/src/components/animation/FlashCode'; const code = ` diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx index 1e811604904064..5324961df64cbb 100644 --- a/docs/src/components/productMaterial/MaterialTheming.tsx +++ b/docs/src/components/productMaterial/MaterialTheming.tsx @@ -11,8 +11,8 @@ import Highlighter from 'docs/src/components/action/Highlighter'; import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign'; import Frame from 'docs/src/components/action/Frame'; import PlayerCard from 'docs/src/components/showcase/PlayerCard'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import MarkdownElement from 'docs/src/components/markdown/MarkdownElement'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; +import { MarkdownElement } from '@mui/docs/MarkdownElement'; const code = ` = 0; - const key = macOS ? '⌘' : 'Ctrl + '; - - return ( -
- -
- ); -} +export default CodeCopyButton; diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js index eab0596c3c8c06..59d7e53c6073f6 100644 --- a/docs/src/modules/components/ComponentsApiContent.js +++ b/docs/src/modules/components/ComponentsApiContent.js @@ -5,7 +5,7 @@ import kebabCase from 'lodash/kebabCase'; import { useRouter } from 'next/router'; import { exactProp } from '@mui/utils'; import { useTranslate, useUserLanguage } from '@mui/docs/i18n'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; import ClassesSection from 'docs/src/modules/components/ApiPage/sections/ClassesSection'; diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 434d7a18cb0c8c..5da994f1ecdfab 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton'; import Box from '@mui/material/Box'; import Collapse from '@mui/material/Collapse'; import NoSsr from '@mui/material/NoSsr'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import DemoSandbox from 'docs/src/modules/components/DemoSandbox'; import ReactRunner from 'docs/src/modules/components/ReactRunner'; import DemoEditor from 'docs/src/modules/components/DemoEditor'; diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index f1fbe72cbba0c2..bdee7f8daaa130 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -7,7 +7,7 @@ import prism from '@mui/internal-markdown/prism'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; import { useTranslate } from '@mui/docs/i18n'; -import { useCodeCopy } from 'docs/src/modules/utils/CodeCopy'; +import { useCodeCopy } from '@mui/docs/CodeCopy'; import { blueDark } from '@mui/docs/branding'; const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [ diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js index ca7a8458fa1034..16848d1f2cfac8 100644 --- a/docs/src/modules/components/HighlightedCode.js +++ b/docs/src/modules/components/HighlightedCode.js @@ -1,52 +1,5 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import prism from '@mui/internal-markdown/prism'; -import { NoSsr } from '@mui/base/NoSsr'; -import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; -import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; -import { useCodeCopy } from 'docs/src/modules/utils/CodeCopy'; - -const HighlightedCode = React.forwardRef(function HighlightedCode(props, ref) { - const { - copyButtonHidden = false, - copyButtonProps, - code, - language, - component: Component = MarkdownElement, - ...other - } = props; - const renderedCode = React.useMemo(() => { - return prism(code.trim(), language); - }, [code, language]); - const handlers = useCodeCopy(); - - return ( - -
- {copyButtonHidden ? null : ( - - - - )} - 
-          
-
-
- - ); -}); - -HighlightedCode.propTypes = { - code: PropTypes.string.isRequired, - component: PropTypes.elementType, - copyButtonHidden: PropTypes.bool, - copyButtonProps: PropTypes.object, - language: PropTypes.string.isRequired, - sx: PropTypes.object, -}; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/HighlightedCode` +import { HighlightedCode } from '@mui/docs/HighlightedCode'; export default HighlightedCode; diff --git a/docs/src/modules/components/HighlightedCode.test.js b/docs/src/modules/components/HighlightedCode.test.js index 05f7f1b627a523..60ccf9b7c04ff4 100644 --- a/docs/src/modules/components/HighlightedCode.test.js +++ b/docs/src/modules/components/HighlightedCode.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { createRenderer } from '@mui-internal/test-utils'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import { getDesignTokens } from '@mui/docs/branding'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; describe('HighlightedCode', () => { const { render } = createRenderer(); diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js index acb36479c6dd62..cc330f3b22ec67 100644 --- a/docs/src/modules/components/HooksApiContent.js +++ b/docs/src/modules/components/HooksApiContent.js @@ -5,7 +5,7 @@ import kebabCase from 'lodash/kebabCase'; import { exactProp } from '@mui/utils'; import { useTranslate, useUserLanguage } from '@mui/docs/i18n'; import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import { DEFAULT_API_LAYOUT_STORAGE_KEYS } from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption'; diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx index fa274153726f15..7cceb465dcba4b 100644 --- a/docs/src/modules/components/JoyThemeBuilder.tsx +++ b/docs/src/modules/components/JoyThemeBuilder.tsx @@ -59,7 +59,7 @@ import Search from '@mui/icons-material/Search'; import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; import DarkMode from '@mui/icons-material/DarkMode'; import LightMode from '@mui/icons-material/LightMode'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox'; import sourceJoyTemplates, { TemplateData } from 'docs/src/modules/joy/sourceJoyTemplates'; diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx index 8928e277af5ef7..787c5c22800aa4 100644 --- a/docs/src/modules/components/JoyUsageDemo.tsx +++ b/docs/src/modules/components/JoyUsageDemo.tsx @@ -19,7 +19,7 @@ import Sheet from '@mui/joy/Sheet'; import Switch from '@mui/joy/Switch'; import Typography from '@mui/joy/Typography'; import { BrandingProvider } from '@mui/docs/branding'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; const shallowEqual = (item1: { [k: string]: any }, item2: { [k: string]: any }) => { let equal = true; diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx index 2d4392d3059bf3..fe4fb76e37d8ef 100644 --- a/docs/src/modules/components/JoyVariablesDemo.tsx +++ b/docs/src/modules/components/JoyVariablesDemo.tsx @@ -12,7 +12,7 @@ import FormHelperText from '@mui/joy/FormHelperText'; import Input, { inputClasses } from '@mui/joy/Input'; import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; -import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { HighlightedCode } from '@mui/docs/HighlightedCode'; import { BrandingProvider } from '@mui/docs/branding'; interface DataItem { diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index fab86e80531c64..539a4656084b4a 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -1,835 +1,6 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { alpha, darken, styled } from '@mui/material/styles'; -import { - brandingDarkTheme as darkTheme, - brandingLightTheme as lightTheme, -} from '@mui/docs/branding'; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/MarkdownElement` -const Root = styled('div')( - ({ theme }) => ({ - ...lightTheme.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, ${lightTheme.palette.text.primary})`, - '& :focus-visible': { - outline: `3px solid ${alpha(lightTheme.palette.primary[500], 0.5)}`, - outlineOffset: 2, - }, - '& strong': { - color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, - }, - wordBreak: 'break-word', - '& pre': { - lineHeight: 1.5, // Developers like when the code is dense. - margin: theme.spacing(2, 'auto'), - padding: theme.spacing(2), - backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint. - color: 'hsl(60, 30%, 96%)', - colorScheme: 'dark', - borderRadius: `var(--muidocs-shape-borderRadius, ${ - theme.shape?.borderRadius ?? lightTheme.shape.borderRadius - }px)`, - border: '1px solid', - borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`, - overflow: 'auto', - WebkitOverflowScrolling: 'touch', - fontSize: lightTheme.typography.pxToRem(13), - maxWidth: 'calc(100vw - 32px)', - maxHeight: '400px', - [lightTheme.breakpoints.up('md')]: { - maxWidth: 'calc(100vw - 32px - 16px)', - }, - }, - '& code': { - ...lightTheme.typography.body2, - fontFamily: lightTheme.typography.fontFamilyCode, - fontWeight: 400, - WebkitFontSmoothing: 'subpixel-antialiased', - }, - '& pre > code': { - // Reset for Safari - // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102 - fontSize: 'inherit', - }, - // inline code block - '& :not(pre) > code': { - padding: '2px 4px', - color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, - backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, - border: '1px solid', - borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, - borderRadius: 6, - fontSize: lightTheme.typography.pxToRem(13), - direction: 'ltr /*! @noflip */', - boxDecorationBreak: 'clone', - }, - '& h1': { - ...lightTheme.typography.h3, - fontSize: lightTheme.typography.pxToRem(36), - fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`, - margin: '10px 0', - color: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`, - fontWeight: 600, - letterSpacing: -0.2, - }, - '& .description': { - ...lightTheme.typography.subtitle1, - fontWeight: 400, - margin: '0 0 24px', - }, - '& .component-tabs': { - margin: '0 0 40px', - }, - '& h2': { - ...lightTheme.typography.h5, - fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`, - fontSize: theme.typography.pxToRem(26), - fontWeight: lightTheme.typography.fontWeightSemiBold, - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - margin: '40px 0 4px', - }, - '& h3': { - ...lightTheme.typography.h6, - fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`, - fontSize: theme.typography.pxToRem(20), - fontWeight: lightTheme.typography.fontWeightSemiBold, - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - margin: '24px 0 4px', - }, - '& h4': { - ...lightTheme.typography.subtitle1, - fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`, - fontWeight: lightTheme.typography.fontWeightSemiBold, - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - margin: '20px 0 6px', - }, - '& h5': { - ...lightTheme.typography.subtitle2, - fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`, - fontWeight: lightTheme.typography.fontWeightSemiBold, - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - margin: '20px 0 8px', - }, - '& p': { - marginTop: 0, - marginBottom: 16, - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - }, - '& ul, & ol': { - paddingLeft: 30, - marginTop: 0, - marginBottom: 16, - '& ul, & ol': { - marginBottom: 6, - }, - }, - '& h1, & h2, & h3, & h4': { - display: 'flex', - alignItems: 'center', - gap: 6, - '& code': { - fontSize: 'inherit', - lineHeight: 'inherit', - // Remove scroll on small screens. - wordBreak: 'break-all', - }, - '& .title-link-to-anchor': { - color: 'inherit', - textDecoration: 'none', - position: 'relative', - display: 'flex', - alignItems: 'center', - }, - '& .anchor-icon': { - // To prevent the link to get the focus. - display: 'inline-flex', - alignItems: 'center', - visibility: 'hidden', - }, - '& a:not(.title-link-to-anchor):hover': { - color: 'currentColor', - border: 'none', - boxShadow: '0 1px 0 0 currentColor', - textDecoration: 'none', - }, - '& .anchor-icon, & .comment-link': { - padding: 0, - cursor: 'pointer', - alignItems: 'center', - justifyContent: 'center', - flexShrink: 0, - textAlign: 'center', - marginLeft: 8, - height: 26, - width: 26, - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`, - color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`, - border: '1px solid', - borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, - borderRadius: 8, - '&:hover': { - backgroundColor: alpha(lightTheme.palette.primary[100], 0.4), - borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`, - color: `var(--muidocs-palette-primary-main, ${lightTheme.palette.primary.main})`, - }, - '& svg': { - height: 14, - width: 14, - fill: 'currentColor', - pointerEvents: 'none', - verticalAlign: 'middle', - }, - }, - '&:hover .anchor-icon': { - visibility: 'visible', - }, - '& .comment-link': { - display: 'none', // So we can have the comment button opt-in. - marginLeft: 'auto', - transition: theme.transitions.create('opacity', { - duration: theme.transitions.duration.shortest, - }), - '& svg': { - fill: 'currentColor', - marginRight: 1.5, - }, - }, - }, - '& h1 code, & h2 code, & h3 code': { - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - }, - '& h1 code': { - fontWeight: lightTheme.typography.fontWeightSemiBold, - }, - '& h2 code': { - fontSize: lightTheme.typography.pxToRem(24), - fontWeight: lightTheme.typography.fontWeightSemiBold, - }, - '& h3 code': { - fontSize: lightTheme.typography.pxToRem(18), - }, - '& table': { - // Trade display table for scroll overflow - display: 'block', - wordBreak: 'normal', - overflowX: 'auto', - WebkitOverflowScrolling: 'touch', - borderCollapse: 'collapse', - marginBottom: '20px', - borderSpacing: 0, - '& .prop-name, & .prop-type, & .prop-default, & .slot-name, & .slot-defaultClass, & .slot-default': - { - fontWeight: 400, - fontFamily: lightTheme.typography.fontFamilyCode, - WebkitFontSmoothing: 'subpixel-antialiased', - fontSize: lightTheme.typography.pxToRem(13), - }, - '& .required': { - color: '#006500', - }, - '& .optional': { - color: '#45529f', - }, - '& .prop-type, & .slot-defaultClass': { - color: '#932981', - }, - '& .prop-default, & .slot-default': { - borderBottom: `1px dotted var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, - }, - }, - '& td': { - ...theme.typography.body2, - borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, - paddingRight: 20, - paddingTop: 16, - paddingBottom: 16, - color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, - }, - '& td code': { - lineHeight: 1.6, - }, - '& th': { - fontSize: theme.typography.pxToRem(14), - lineHeight: theme.typography.pxToRem(24), - fontWeight: 500, - color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, - whiteSpace: 'pre', - borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, - paddingRight: 20, - paddingTop: 12, - paddingBottom: 12, - }, - '& blockquote': { - position: 'relative', - padding: '0 16px', - margin: 0, - borderLeft: '1.5px solid', - borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, - '& p': { - fontSize: theme.typography.pxToRem(12.5), - fontFamily: lightTheme.typography.fontFamilyCode, - fontWeight: lightTheme.typography.fontWeightMedium, - lineHeight: theme.typography.pxToRem(24), - textIndent: 20, - }, - '&::before': { - position: 'absolute', - // eslint-disable-next-line material-ui/straight-quotes - content: '"“"', - color: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`, - fontSize: '2.5rem', - top: 8, - marginLeft: -6, - lineHeight: 0.5, - }, - }, - '& .MuiCallout-root': { - display: 'flex', - gap: 12, - padding: '16px', - margin: '16px 0', - border: '1px solid', - color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, - borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`, - borderRadius: `var(--muidocs-shape-borderRadius, ${ - theme.shape?.borderRadius ?? lightTheme.shape.borderRadius - }px)`, - '& > code': { - height: 'fit-content', - backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`, - borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`, - }, - '& .MuiCallout-content': { - minWidth: 0, // Allows content to shrink. Useful when callout contains code block - flexGrow: 1, - '& > p:last-child, & > ul:last-child': { - // Avoid margin on last child - marginBottom: 0, - }, - '& .MuiCode-root': { - '& > pre': { - margin: 0, - marginTop: 4, - }, - }, - '& > ul': { - // Because of the gap left by the icon, we visually need less padding - paddingLeft: 22, - }, - }, - '& > svg': { - marginTop: 2, - width: 20, - height: 20, - flexShrink: 0, - }, - '& > ul, & > p': { - '&:last-child': { - margin: 0, - }, - }, - '& ul, li, p': { - color: 'inherit', - }, - '&.MuiCallout-error': { - color: `var(--muidocs-palette-error-900, ${lightTheme.palette.error[900]})`, - backgroundColor: `var(--muidocs-palette-error-50, ${lightTheme.palette.error[50]})`, - borderColor: `var(--muidocs-palette-error-100, ${lightTheme.palette.error[100]})`, - '& strong': { - color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`, - }, - '& > svg': { - fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`, - }, - '& a': { - color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`, - textDecorationColor: alpha(lightTheme.palette.error.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', - }, - }, - }, - '&.MuiCallout-info': { - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, - borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`, - '& strong': { - color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`, - }, - '& > svg': { - fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`, - }, - }, - '&.MuiCallout-success': { - color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, - backgroundColor: `var(--muidocs-palette-success-50, ${lightTheme.palette.success[50]})`, - borderColor: `var(--muidocs-palette-success-100, ${lightTheme.palette.success[100]})`, - '& strong': { - color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, - }, - '& > svg': { - fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`, - }, - '& a': { - color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, - textDecorationColor: alpha(lightTheme.palette.success.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', - }, - }, - }, - '&.MuiCallout-warning': { - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - backgroundColor: alpha(lightTheme.palette.warning[50], 0.5), - borderColor: alpha(lightTheme.palette.warning[700], 0.15), - '& strong': { - color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - }, - '& > svg': { - fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`, - }, - '& a': { - color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', - }, - }, - }, - }, - '& a[target="_blank"]::after': { - content: '""', - maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`, - display: 'inline-flex', - width: '1em', - height: '1em', - color: 'inherit', - backgroundColor: 'currentColor', - transform: 'translate(0, 2px)', - transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)', // bounce effect - opacity: 0.8, - }, - '& a[target="_blank"]:hover::after': { - opacity: 1, - transform: 'translate(1px, 0)', - }, - '& a.remove-link-arrow::after': { - // Allows to remove link arrows for images - display: 'none', - }, - '& .Ad-root a::after': { - // Remove link arrow for ads - display: 'none', - }, - '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': { - // Style taken from the Link component - color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, - fontWeight: theme.typography.fontWeightMedium, - textDecoration: 'underline', - textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', - }, - }, - '& a code': { - color: darken(lightTheme.palette.primary.main, 0.04), - }, - '& a:not(.title-link-to-anchor) code': { - color: darken(lightTheme.palette.primary.main, 0.2), - }, - '& img, & video': { - // Use !important so that inline style on or