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

package/MarkdownElement/MarkdownElement.js

@@ -1,30 +1,22 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MarkdownElement = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _branding = require("../branding");
-var _jsxRuntime = require("react/jsx-runtime");
-const Root = (0, _styles.styled)('div')(({
+import * as React from 'react';
+import clsx from 'clsx';
+import { alpha, darken, styled } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../branding/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Root = styled('div')(({
   theme
 }) => ({
-  ..._branding.brandingLightTheme.typography.body1,
+  ...lightTheme.typography.body1,
   lineHeight: 1.625,
   // Rounds up to 26px－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})`,
+  color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
   '& :focus-visible': {
-    outline: `3px solid ${(0, _styles.alpha)(_branding.brandingLightTheme.palette.primary[500], 0.5)}`,
+    outline: `3px solid ${alpha(lightTheme.palette.primary[500], 0.5)}`,
     outlineOffset: 2
   },
   '& strong': {
-    color: `var(--muidocs-palette-text-primary, ${_branding.brandingLightTheme.palette.text.primary})`
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`
   },
   wordBreak: 'break-word',
   '& pre': {
@@ -36,17 +28,17 @@ const Root = (0, _styles.styled)('div')(({
     // 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 ?? _branding.brandingLightTheme.shape.borderRadius}px)`,
+    borderRadius: `var(--muidocs-shape-borderRadius, ${theme.shape?.borderRadius ?? lightTheme.shape.borderRadius}px)`,
     border: '1px solid',
-    borderColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
+    borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
     overflow: 'auto',
     WebkitOverflowScrolling: 'touch',
-    fontSize: _branding.brandingLightTheme.typography.pxToRem(13),
+    fontSize: lightTheme.typography.pxToRem(13),
     maxHeight: '400px'
   },
   '& code': {
-    ..._branding.brandingLightTheme.typography.body2,
-    fontFamily: _branding.brandingLightTheme.typography.fontFamilyCode,
+    ...lightTheme.typography.body2,
+    fontFamily: lightTheme.typography.fontFamilyCode,
     fontWeight: 400,
     WebkitFontSmoothing: 'subpixel-antialiased'
   },
@@ -58,26 +50,26 @@ const Root = (0, _styles.styled)('div')(({
   // inline code block
   '& :not(pre) > code': {
     padding: '2px 4px',
-    color: `var(--muidocs-palette-text-primary, ${_branding.brandingLightTheme.palette.text.primary})`,
-    backgroundColor: `var(--muidocs-palette-grey-50, ${_branding.brandingLightTheme.palette.grey[50]})`,
+    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, ${_branding.brandingLightTheme.palette.grey[200]})`,
+    borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
     borderRadius: 6,
-    fontSize: _branding.brandingLightTheme.typography.pxToRem(13),
+    fontSize: lightTheme.typography.pxToRem(13),
     direction: 'ltr /*! @noflip */',
     boxDecorationBreak: 'clone'
   },
   '& h1': {
-    ..._branding.brandingLightTheme.typography.h3,
-    fontSize: _branding.brandingLightTheme.typography.pxToRem(36),
-    fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
+    ...lightTheme.typography.h3,
+    fontSize: lightTheme.typography.pxToRem(36),
+    fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
     margin: '10px 0',
-    color: `var(--muidocs-palette-primaryDark-900, ${_branding.brandingLightTheme.palette.primaryDark[900]})`,
+    color: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
     fontWeight: 600,
     letterSpacing: -0.2
   },
   '& .description': {
-    ..._branding.brandingLightTheme.typography.subtitle1,
+    ...lightTheme.typography.subtitle1,
     fontWeight: 400,
     margin: '0 0 24px'
   },
@@ -85,39 +77,39 @@ const Root = (0, _styles.styled)('div')(({
     margin: '0 0 40px'
   },
   '& h2': {
-    ..._branding.brandingLightTheme.typography.h5,
-    fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
+    ...lightTheme.typography.h5,
+    fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
     fontSize: theme.typography.pxToRem(26),
-    fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold,
-    color: `var(--muidocs-palette-grey-900, ${_branding.brandingLightTheme.palette.grey[900]})`,
+    fontWeight: lightTheme.typography.fontWeightSemiBold,
+    color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
     margin: '40px 0 4px'
   },
   '& h3': {
-    ..._branding.brandingLightTheme.typography.h6,
-    fontFamily: `"General Sans", ${_branding.brandingLightTheme.typography.fontFamilySystem}`,
+    ...lightTheme.typography.h6,
+    fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
     fontSize: theme.typography.pxToRem(20),
-    fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold,
-    color: `var(--muidocs-palette-grey-900, ${_branding.brandingLightTheme.palette.grey[900]})`,
+    fontWeight: lightTheme.typography.fontWeightSemiBold,
+    color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
     margin: '24px 0 4px'
   },
   '& 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]})`,
+    ...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': {
-    ..._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]})`,
+    ...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, ${_branding.brandingLightTheme.palette.grey[900]})`
+    color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`
   },
   '& ul, & ol': {
     paddingLeft: 30,
@@ -154,16 +146,16 @@ const Root = (0, _styles.styled)('div')(({
   },
   '& a': {
     // Style taken from the Link component
-    color: `var(--muidocs-palette-primary-600, ${_branding.brandingLightTheme.palette.primary[600]})`,
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
     fontWeight: theme.typography.fontWeightMedium,
     textDecoration: 'underline',
-    textDecorationColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primary.main, 0.4),
+    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
     '&:hover': {
       textDecorationColor: 'inherit'
     }
   },
   '& a code': {
-    color: (0, _styles.darken)(_branding.brandingLightTheme.palette.primary.main, 0.2)
+    color: darken(lightTheme.palette.primary.main, 0.2)
   },
   '& h1, & h2, & h3, & h4': {
     display: 'flex',
@@ -199,7 +191,7 @@ const Root = (0, _styles.styled)('div')(({
       marginLeft: 8,
       height: 26,
       width: 26,
-      color: `var(--muidocs-palette-grey-600, ${_branding.brandingLightTheme.palette.grey[600]})`,
+      color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
       backgroundColor: 'transparent',
       border: '1px solid transparent',
       borderRadius: 8,
@@ -207,9 +199,9 @@ const Root = (0, _styles.styled)('div')(({
         duration: theme.transitions.duration.shortest
       }),
       '&:hover': {
-        backgroundColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primary[100], 0.4),
-        borderColor: `var(--muidocs-palette-primary-100, ${_branding.brandingLightTheme.palette.primary[100]})`,
-        color: `var(--muidocs-palette-primary-main, ${_branding.brandingLightTheme.palette.primary.main})`
+        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,
@@ -236,17 +228,17 @@ const Root = (0, _styles.styled)('div')(({
     }
   },
   '& h1 code, & h2 code, & h3 code': {
-    color: `var(--muidocs-palette-grey-900, ${_branding.brandingLightTheme.palette.grey[900]})`
+    color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`
   },
   '& h1 code': {
-    fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold
+    fontWeight: lightTheme.typography.fontWeightSemiBold
   },
   '& h2 code': {
-    fontSize: _branding.brandingLightTheme.typography.pxToRem(24),
-    fontWeight: _branding.brandingLightTheme.typography.fontWeightSemiBold
+    fontSize: lightTheme.typography.pxToRem(24),
+    fontWeight: lightTheme.typography.fontWeightSemiBold
   },
   '& h3 code': {
-    fontSize: _branding.brandingLightTheme.typography.pxToRem(18)
+    fontSize: lightTheme.typography.pxToRem(18)
   },
   '& table': {
     // Trade display table for scroll overflow
@@ -259,9 +251,9 @@ const Root = (0, _styles.styled)('div')(({
     borderSpacing: 0,
     '& .prop-name, & .prop-type, & .prop-default, & .slot-name, & .slot-defaultClass, & .slot-default': {
       fontWeight: 400,
-      fontFamily: _branding.brandingLightTheme.typography.fontFamilyCode,
+      fontFamily: lightTheme.typography.fontFamilyCode,
       WebkitFontSmoothing: 'subpixel-antialiased',
-      fontSize: _branding.brandingLightTheme.typography.pxToRem(13)
+      fontSize: lightTheme.typography.pxToRem(13)
     },
     '& .required': {
       color: '#006500'
@@ -273,16 +265,16 @@ const Root = (0, _styles.styled)('div')(({
       color: '#932981'
     },
     '& .prop-default, & .slot-default': {
-      borderBottom: `1px dotted var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`
+      borderBottom: `1px dotted var(--muidocs-palette-divider, ${lightTheme.palette.divider})`
     }
   },
   '& td': {
     ...theme.typography.body2,
-    borderBottom: `1px solid var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`,
+    borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
     paddingRight: 20,
     paddingTop: 16,
     paddingBottom: 16,
-    color: `var(--muidocs-palette-text-secondary, ${_branding.brandingLightTheme.palette.text.secondary})`
+    color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`
   },
   '& td code': {
     lineHeight: 1.6
@@ -291,9 +283,9 @@ const Root = (0, _styles.styled)('div')(({
     fontSize: theme.typography.pxToRem(14),
     lineHeight: theme.typography.pxToRem(24),
     fontWeight: 500,
-    color: `var(--muidocs-palette-text-primary, ${_branding.brandingLightTheme.palette.text.primary})`,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
     whiteSpace: 'pre',
-    borderBottom: `1px solid var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`,
+    borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
     paddingRight: 20,
     paddingTop: 12,
     paddingBottom: 12
@@ -303,11 +295,11 @@ const Root = (0, _styles.styled)('div')(({
     padding: '0 16px',
     margin: 0,
     borderLeft: '1.5px solid',
-    borderColor: `var(--muidocs-palette-grey-200, ${_branding.brandingLightTheme.palette.grey[200]})`,
+    borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
     '& p': {
       fontSize: theme.typography.pxToRem(12.5),
-      fontFamily: _branding.brandingLightTheme.typography.fontFamilyCode,
-      fontWeight: _branding.brandingLightTheme.typography.fontWeightMedium,
+      fontFamily: lightTheme.typography.fontFamilyCode,
+      fontWeight: lightTheme.typography.fontWeightMedium,
       lineHeight: theme.typography.pxToRem(24),
       textIndent: 20
     },
@@ -315,7 +307,7 @@ const Root = (0, _styles.styled)('div')(({
       position: 'absolute',
       // eslint-disable-next-line mui/straight-quotes
       content: '"“"',
-      color: `var(--muidocs-palette-grey-300, ${_branding.brandingLightTheme.palette.grey[300]})`,
+      color: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
       fontSize: '2.5rem',
       top: 8,
       marginLeft: -6,
@@ -328,9 +320,9 @@ const Root = (0, _styles.styled)('div')(({
     padding: '12px',
     margin: '16px 0',
     border: '1px solid',
-    color: `var(--muidocs-palette-text-secondary, ${_branding.brandingLightTheme.palette.text.secondary})`,
-    borderColor: `var(--muidocs-palette-grey-100, ${_branding.brandingLightTheme.palette.grey[100]})`,
-    borderRadius: `var(--muidocs-shape-borderRadius, ${theme.shape?.borderRadius ?? _branding.brandingLightTheme.shape.borderRadius}px)`,
+    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)`,
     '& .MuiCallout-content': {
       minWidth: 0,
       // Allows content to shrink. Useful when callout contains code block
@@ -338,8 +330,8 @@ const Root = (0, _styles.styled)('div')(({
     },
     '& code': {
       height: 'fit-content',
-      backgroundColor: `var(--muidocs-palette-grey-100, ${_branding.brandingLightTheme.palette.grey[100]})`,
-      borderColor: `var(--muidocs-palette-grey-300, ${_branding.brandingLightTheme.palette.grey[300]})`
+      backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
+      borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`
     },
     '& p': {
       marginBottom: '8px',
@@ -356,7 +348,7 @@ const Root = (0, _styles.styled)('div')(({
       '& pre': {
         margin: '4px 0 0 0',
         borderRadius: '12px 12px 6px 12px',
-        borderColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[600], 0.6),
+        borderColor: alpha(lightTheme.palette.primaryDark[600], 0.6),
         '& code': {
           backgroundColor: 'transparent'
         }
@@ -384,65 +376,65 @@ const Root = (0, _styles.styled)('div')(({
       color: 'inherit'
     },
     '&.MuiCallout-error': {
-      color: `var(--muidocs-palette-error-900, ${_branding.brandingLightTheme.palette.error[900]})`,
-      backgroundColor: `var(--muidocs-palette-error-50, ${_branding.brandingLightTheme.palette.error[50]})`,
-      borderColor: `var(--muidocs-palette-error-100, ${_branding.brandingLightTheme.palette.error[100]})`,
+      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, ${_branding.brandingLightTheme.palette.error[800]})`
+        color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`
       },
       '& svg': {
-        fill: `var(--muidocs-palette-error-500, ${_branding.brandingLightTheme.palette.error[600]})`
+        fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`
       },
       '& a': {
-        color: `var(--muidocs-palette-error-800, ${_branding.brandingLightTheme.palette.error[800]})`,
-        textDecorationColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.error.main, 0.4),
+        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, ${_branding.brandingLightTheme.palette.grey[900]})`,
-      backgroundColor: `var(--muidocs-palette-grey-50, ${_branding.brandingLightTheme.palette.grey[50]})`,
-      borderColor: `var(--muidocs-palette-grey-100, ${_branding.brandingLightTheme.palette.grey[100]})`,
+      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, ${_branding.brandingLightTheme.palette.primary[800]})`
+        color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`
       },
       '& svg': {
-        fill: `var(--muidocs-palette-grey-600, ${_branding.brandingLightTheme.palette.grey[600]})`
+        fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`
       }
     },
     '&.MuiCallout-success': {
-      color: `var(--muidocs-palette-success-900, ${_branding.brandingLightTheme.palette.success[900]})`,
-      backgroundColor: `var(--muidocs-palette-success-50, ${_branding.brandingLightTheme.palette.success[50]})`,
-      borderColor: `var(--muidocs-palette-success-100, ${_branding.brandingLightTheme.palette.success[100]})`,
+      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, ${_branding.brandingLightTheme.palette.success[900]})`
+        color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`
       },
       '& svg': {
-        fill: `var(--muidocs-palette-success-600, ${_branding.brandingLightTheme.palette.success[600]})`
+        fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`
       },
       '& a': {
-        color: `var(--muidocs-palette-success-900, ${_branding.brandingLightTheme.palette.success[900]})`,
-        textDecorationColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.success.main, 0.4),
+        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, ${_branding.brandingLightTheme.palette.grey[900]})`,
-      backgroundColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.warning[50], 0.5),
-      borderColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.warning[700], 0.15),
+      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, ${_branding.brandingLightTheme.palette.warning[800]})`
+        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`
       },
       '& svg': {
-        fill: `var(--muidocs-palette-warning-600, ${_branding.brandingLightTheme.palette.warning[600]})`
+        fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`
       },
       '& a': {
-        color: `var(--muidocs-palette-warning-800, ${_branding.brandingLightTheme.palette.warning[800]})`,
-        textDecorationColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.warning.main, 0.4),
+        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
+        textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4),
         '&:hover': {
           textDecorationColor: 'inherit'
         }
@@ -467,30 +459,30 @@ const Root = (0, _styles.styled)('div')(({
     margin: theme.spacing(5, 0),
     border: 0,
     flexShrink: 0,
-    backgroundColor: `var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`
+    backgroundColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`
   },
   '& kbd.key': {
     padding: 6,
     display: 'inline-block',
     whiteSpace: 'nowrap',
     margin: '0 1px',
-    fontFamily: _branding.brandingLightTheme.typography.fontFamilyCode,
-    fontSize: _branding.brandingLightTheme.typography.pxToRem(11),
-    color: `var(--muidocs-palette-text-primary, ${_branding.brandingLightTheme.palette.text.primary})`,
+    fontFamily: lightTheme.typography.fontFamilyCode,
+    fontSize: lightTheme.typography.pxToRem(11),
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
     lineHeight: '10px',
     verticalAlign: 'middle',
     borderRadius: 6,
-    border: `1px solid var(--muidocs-palette-grey-300, ${_branding.brandingLightTheme.palette.grey[300]})`,
-    backgroundColor: `var(--muidocs-palette-grey-50, ${_branding.brandingLightTheme.palette.grey[50]})`,
-    boxShadow: `inset 0 -2px 0 var(--muidocs-palette-grey-200, ${_branding.brandingLightTheme.palette.grey[200]})`
+    border: `1px solid var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
+    backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
+    boxShadow: `inset 0 -2px 0 var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`
   },
   '& details': {
     width: '100%',
     padding: theme.spacing(1),
     marginBottom: theme.spacing(1.5),
     border: '1px solid',
-    borderColor: `var(--muidocs-palette-divider, ${_branding.brandingLightTheme.palette.divider})`,
-    borderRadius: `var(--muidocs-shape-borderRadius, ${theme.shape?.borderRadius ?? _branding.brandingLightTheme.shape.borderRadius}px)`,
+    borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+    borderRadius: `var(--muidocs-shape-borderRadius, ${theme.shape?.borderRadius ?? lightTheme.shape.borderRadius}px)`,
     '& pre': {
       marginTop: theme.spacing(1)
     }
@@ -516,7 +508,7 @@ const Root = (0, _styles.styled)('div')(({
       backgroundColor: 'currentColor'
     },
     '&:hover': {
-      backgroundColor: `var(--muidocs-palette-grey-100, ${_branding.brandingLightTheme.palette.grey[50]})`
+      backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[50]})`
     }
   },
   '& details[open] > summary::after': {
@@ -530,7 +522,7 @@ const Root = (0, _styles.styled)('div')(({
     fontSize: 10,
     '&:has(.MuiCode-title)': {
       margin: theme.spacing(2, 'auto'),
-      border: `1px solid var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
+      border: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
       borderRadius: theme.shape.borderRadius,
       overflow: 'clip',
       '& .MuiCode-copy': {
@@ -555,14 +547,14 @@ const Root = (0, _styles.styled)('div')(({
     padding: theme.spacing(0.5),
     paddingBottom: '5px',
     // optical alignment
-    fontFamily: _branding.brandingLightTheme.typography.fontFamily,
-    fontWeight: _branding.brandingLightTheme.typography.fontWeightMedium,
-    fontSize: _branding.brandingLightTheme.typography.pxToRem(12),
+    fontFamily: lightTheme.typography.fontFamily,
+    fontWeight: lightTheme.typography.fontWeightMedium,
+    fontSize: lightTheme.typography.pxToRem(12),
     borderRadius: 6,
     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-300, ${_branding.brandingLightTheme.palette.grey[300]})`,
+    borderColor: alpha(lightTheme.palette.primaryDark[600], 0.5),
+    backgroundColor: alpha(lightTheme.palette.primaryDark[800], 0.5),
+    color: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
     transition: theme.transitions.create(['background', 'borderColor', 'display'], {
       duration: theme.transitions.duration.shortest
     }),
@@ -573,8 +565,8 @@ const Root = (0, _styles.styled)('div')(({
       display: 'none'
     },
     '&:hover, &:focus': {
-      borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
-      backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
+      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',
@@ -591,8 +583,8 @@ const Root = (0, _styles.styled)('div')(({
       right: 34
     },
     '&[data-copied]': {
-      borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
-      backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
+      borderColor: `var(--muidocs-palette-primaryDark-400, ${lightTheme.palette.primaryDark[400]})`,
+      backgroundColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
       color: '#fff',
       '& .MuiCode-copyKeypress': {
         opacity: 0
@@ -644,12 +636,12 @@ const Root = (0, _styles.styled)('div')(({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1.5),
-    borderBottom: `1px solid var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
-    backgroundColor: `var(--muidocs-palette-primaryDark-900, ${_branding.brandingLightTheme.palette.primaryDark[900]})`,
+    borderBottom: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+    backgroundColor: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
     fontFamily: theme.typography.fontFamilyCode,
     fontSize: theme.typography.pxToRem(12),
     fontWeight: theme.typography.fontWeightBold,
-    color: `var(--muidocs-palette-grey-200, ${_branding.brandingLightTheme.palette.grey[200]})`,
+    color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
     '::before': {
       content: `url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3333 3.99996H8L7.06 3.05996C6.80667 2.80663 6.46667 2.66663 6.11334 2.66663H2.66667C1.93334 2.66663 1.34 3.26663 1.34 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66667 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM12.6667 12H3.33334C2.96667 12 2.66667 11.7 2.66667 11.3333V5.99996C2.66667 5.63329 2.96667 5.33329 3.33334 5.33329H12.6667C13.0333 5.33329 13.3333 5.63329 13.3333 5.99996V11.3333C13.3333 11.7 13.0333 12 12.6667 12Z' fill='%2399CCF3'/%3E%3C/svg%3E%0A");`,
       width: '16px',
@@ -668,38 +660,38 @@ const Root = (0, _styles.styled)('div')(({
     color: 'rgb(255, 255, 255)',
     '& :not(pre) > code': {
       // inline code block
-      color: `var(--muidocs-palette-text-primary, ${_branding.brandingDarkTheme.palette.text.primary})`,
-      borderColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.primaryDark[600], 0.6),
-      backgroundColor: `var(--muidocs-palette-grey-900, ${_branding.brandingDarkTheme.palette.grey[900]})`
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      borderColor: alpha(darkTheme.palette.primaryDark[600], 0.6),
+      backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`
     },
     '& strong': {
-      color: `var(--muidocs-palette-grey-200, ${_branding.brandingDarkTheme.palette.grey[200]})`
+      color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`
     },
     '& hr': {
-      backgroundColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`
+      backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
     },
     '& a': {
-      color: `var(--muidocs-palette-primary-300, ${_branding.brandingDarkTheme.palette.primary[300]})`
+      color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`
     },
     '& a code': {
-      color: `var(--muidocs-palette-primary-light, ${_branding.brandingDarkTheme.palette.primary.light})`
+      color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`
     },
     '& h1, & h2, & h3, & h4, & h5': {
-      color: `var(--muidocs-palette-grey-50, ${_branding.brandingDarkTheme.palette.grey[50]})`,
+      color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
       '& .anchor-icon, & .comment-link': {
-        color: `var(--muidocs-palette-primary-300, ${_branding.brandingDarkTheme.palette.primaryDark[400]})`,
+        color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[400]})`,
         '&:hover': {
-          color: `var(--muidocs-palette-primary-100, ${_branding.brandingDarkTheme.palette.primary[100]})`,
-          borderColor: `var(--muidocs-palette-primary-900, ${_branding.brandingDarkTheme.palette.primary[900]})`,
-          backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.primary[900], 0.6)
+          color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
+          borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,
+          backgroundColor: alpha(darkTheme.palette.primary[900], 0.6)
         }
       }
     },
     '& p, & ul, & ol': {
-      color: `var(--muidocs-palette-grey-400, ${_branding.brandingDarkTheme.palette.grey[400]})`
+      color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
     },
     '& h1 code, & h2 code, & h3 code': {
-      color: `var(--muidocs-palette-grey-100, ${_branding.brandingDarkTheme.palette.grey[100]})`
+      color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`
     },
     '& table': {
       '& .required': {
@@ -712,95 +704,95 @@ const Root = (0, _styles.styled)('div')(({
         color: '#ffb6ec'
       },
       '& .prop-default, & .slot-default': {
-        borderColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`
+        borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
       }
     },
     '& td': {
-      color: `var(--muidocs-palette-text-secondary, ${_branding.brandingDarkTheme.palette.text.secondary})`,
-      borderColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`
+      color: `var(--muidocs-palette-text-secondary, ${darkTheme.palette.text.secondary})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
     },
     '& th': {
-      color: `var(--muidocs-palette-text-primary, ${_branding.brandingDarkTheme.palette.text.primary})`,
-      borderColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
     },
     '& blockquote': {
-      borderColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingDarkTheme.palette.primaryDark[700]})`,
+      borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
       '&::before': {
-        color: `var(--muidocs-palette-primaryDark-500, ${_branding.brandingDarkTheme.palette.primaryDark[500]})`
+        color: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`
       }
     },
     '& .MuiCallout-root': {
-      borderColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingDarkTheme.palette.primaryDark[700]})`,
+      borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
       '& code': {
-        backgroundColor: `var(--muidocs-palette-primaryDark-600, ${_branding.brandingDarkTheme.palette.primaryDark[600]})`,
-        borderColor: `var(--muidocs-palette-primaryDark-500, ${_branding.brandingDarkTheme.palette.primaryDark[500]})`
+        backgroundColor: `var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
+        borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`
       },
       '&.MuiCallout-error': {
-        color: `var(--muidocs-palette-error-50, ${_branding.brandingDarkTheme.palette.error[50]})`,
-        backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.error[700], 0.15),
-        borderColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.error[400], 0.1),
+        color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
+        backgroundColor: alpha(darkTheme.palette.error[700], 0.15),
+        borderColor: alpha(darkTheme.palette.error[400], 0.1),
         '& strong': {
-          color: `var(--muidocs-palette-error-300, ${_branding.brandingDarkTheme.palette.error[300]})`
+          color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`
         },
         '& svg': {
-          fill: `var(--muidocs-palette-error-500, ${_branding.brandingDarkTheme.palette.error[500]})`
+          fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`
         },
         '& a': {
-          color: `var(--muidocs-palette-error-200, ${_branding.brandingDarkTheme.palette.error[200]})`
+          color: `var(--muidocs-palette-error-200, ${darkTheme.palette.error[200]})`
         }
       },
       '&.MuiCallout-info': {
-        color: `var(--muidocs-palette-grey-50, ${_branding.brandingDarkTheme.palette.grey[50]})`,
-        backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.grey[700], 0.15),
-        borderColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.grey[800], 0.5),
+        color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+        backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
+        borderColor: alpha(darkTheme.palette.grey[800], 0.5),
         '& strong': {
-          color: `var(--muidocs-palette-primary-200, ${_branding.brandingDarkTheme.palette.primary[200]})`
+          color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
         },
         '& svg': {
-          fill: `var(--muidocs-palette-grey-400, ${_branding.brandingDarkTheme.palette.grey[400]})`
+          fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
         }
       },
       '&.MuiCallout-success': {
-        color: `var(--muidocs-palette-success-50, ${_branding.brandingDarkTheme.palette.success[50]})`,
-        backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.success[700], 0.12),
-        borderColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.success[400], 0.1),
+        color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
+        backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
+        borderColor: alpha(lightTheme.palette.success[400], 0.1),
         '& strong': {
-          color: `var(--muidocs-palette-success-200, ${_branding.brandingDarkTheme.palette.success[200]})`
+          color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`
         },
         '& svg': {
-          fill: `var(--muidocs-palette-success-500, ${_branding.brandingDarkTheme.palette.success[500]})`
+          fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`
         },
         '& a': {
-          color: `var(--muidocs-palette-success-100, ${_branding.brandingDarkTheme.palette.success[100]})`
+          color: `var(--muidocs-palette-success-100, ${darkTheme.palette.success[100]})`
         }
       },
       '&.MuiCallout-warning': {
-        color: `var(--muidocs-palette-warning-50, ${_branding.brandingDarkTheme.palette.warning[50]})`,
-        backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.warning[700], 0.12),
-        borderColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.warning[400], 0.1),
+        color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
+        backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
+        borderColor: alpha(darkTheme.palette.warning[400], 0.1),
         '& strong': {
-          color: `var(--muidocs-palette-warning-200, ${_branding.brandingDarkTheme.palette.warning[200]})`
+          color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`
         },
         '& svg': {
-          fill: `var(--muidocs-palette-warning-400, ${_branding.brandingDarkTheme.palette.warning[400]})`
+          fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`
         },
         '& a': {
-          color: `var(--muidocs-palette-warning-100, ${_branding.brandingDarkTheme.palette.warning[100]})`
+          color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`
         }
       }
     },
     '& kbd.key': {
-      color: `var(--muidocs-palette-text-primary, ${_branding.brandingDarkTheme.palette.text.primary})`,
-      backgroundColor: `var(--muidocs-palette-primaryDark-800, ${_branding.brandingDarkTheme.palette.primaryDark[800]})`,
-      border: `1px solid var(--muidocs-palette-primaryDark-600, ${_branding.brandingDarkTheme.palette.primaryDark[600]})`,
-      boxShadow: `inset 0 -2px 0 var(--muidocs-palette-primaryDark-700, ${_branding.brandingDarkTheme.palette.primaryDark[700]})`
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
+      border: `1px solid var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
+      boxShadow: `inset 0 -2px 0 var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`
     },
     '& details': {
-      borderColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
     },
     '& summary': {
       '&:hover': {
-        backgroundColor: `var(--muidocs-palette-primaryDark-800, ${_branding.brandingDarkTheme.palette.primaryDark[800]})`
+        backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`
       }
     },
     '& .feature-list': {
@@ -822,14 +814,14 @@ function handleHeaderClick(event) {
     event.preventDefault();
   }
 }
-const MarkdownElement = exports.MarkdownElement = /*#__PURE__*/React.forwardRef(function MarkdownElement(props, ref) {
+export const MarkdownElement = /*#__PURE__*/React.forwardRef(function MarkdownElement(props, ref) {
   const {
     className,
     renderedMarkdown,
     ...other
   } = props;
   const rootRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(rootRef, ref);
+  const handleRef = useForkRef(rootRef, ref);
   React.useEffect(() => {
     const elements = rootRef.current.getElementsByClassName('title-link-to-anchor');
     for (let i = 0; i < elements.length; i += 1) {
@@ -846,8 +838,8 @@ const MarkdownElement = exports.MarkdownElement = /*#__PURE__*/React.forwardRef(
       __html: renderedMarkdown
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
-    className: (0, _clsx.default)('markdown-body', className),
+  return /*#__PURE__*/_jsx(Root, {
+    className: clsx('markdown-body', className),
     ...more,
     ...other,
     ref: handleRef