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

package/node/ComponentLinkHeader/ComponentLinkHeader.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentLinkHeader = ComponentLinkHeader;
+var React = _interopRequireWildcard(require("react"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _ChatRounded2 = _interopRequireDefault(require("@mui/icons-material/ChatRounded"));
+var _styles = require("@mui/material/styles");
+var _SketchIcon = _interopRequireDefault(require("../svgIcons/SketchIcon"));
+var _FigmaIcon = _interopRequireDefault(require("../svgIcons/FigmaIcon"));
+var _AdobeXDIcon = _interopRequireDefault(require("../svgIcons/AdobeXDIcon"));
+var _BundleSizeIcon2 = _interopRequireDefault(require("../svgIcons/BundleSizeIcon"));
+var _W3CIcon2 = _interopRequireDefault(require("../svgIcons/W3CIcon"));
+var _MaterialDesignIcon2 = _interopRequireDefault(require("../svgIcons/MaterialDesignIcon"));
+var _i18n = require("../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var _ChatRounded, _BundleSizeIcon, _W3CIcon, _MaterialDesignIcon, _li, _React$Fragment;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Root = (0, _styles.styled)('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'
+};
+function ComponentLinkHeader(props) {
+  var _ref, _headers$packageName;
+  const {
+    markdown: {
+      headers
+    },
+    design
+  } = props;
+  const t = (0, _i18n.useTranslate)();
+  const packageName = (_ref = (_headers$packageName = headers.packageName) != null ? _headers$packageName : defaultPackageNames[headers.productId]) != null ? _ref : '@mui/material';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    children: [headers.githubLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        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__*/(0, _jsxRuntime.jsx)(_ChatRounded2.default, {
+          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__*/(0, _jsxRuntime.jsx)("li", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: t('bundleSizeTooltip'),
+        describeChild: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+          clickable: true,
+          role: undefined,
+          component: "a",
+          size: "small",
+          variant: "outlined",
+          rel: "nofollow",
+          href: `https://bundlephobia.com/package/${packageName}@latest`,
+          icon: _BundleSizeIcon || (_BundleSizeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BundleSizeIcon2.default, {
+            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__*/(0, _jsxRuntime.jsx)("li", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: headers.waiAria,
+        icon: _W3CIcon || (_W3CIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_W3CIcon2.default, {
+          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__*/(0, _jsxRuntime.jsx)("li", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: headers.materialDesign,
+        icon: _MaterialDesignIcon || (_MaterialDesignIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MaterialDesignIcon2.default, {})),
+        "data-ga-event-category": "ComponentLinkHeader",
+        "data-ga-event-action": "click",
+        "data-ga-event-label": "Material Design",
+        "data-ga-event-split": "0.1",
+        label: "Material Design"
+      })
+    }) : null, design === false ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [_li || (_li = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+          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__*/(0, _jsxRuntime.jsx)(_FigmaIcon.default, {}),
+          "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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+            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__*/(0, _jsxRuntime.jsx)(_AdobeXDIcon.default, {}),
+            "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__*/(0, _jsxRuntime.jsx)("li", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+            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__*/(0, _jsxRuntime.jsx)(_SketchIcon.default, {}),
+            "data-ga-event-category": "ComponentLinkHeader",
+            "data-ga-event-action": "click",
+            "data-ga-event-label": "Sketch",
+            "data-ga-event-split": "0.1",
+            label: "Sketch"
+          })
+        })]
+      }))]
+    })]
+  });
+}

package/node/ComponentLinkHeader/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ComponentLinkHeader.ComponentLinkHeader;
+  }
+});
+var _ComponentLinkHeader = require("./ComponentLinkHeader");
+Object.keys(_ComponentLinkHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ComponentLinkHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ComponentLinkHeader[key];
+    }
+  });
+});

package/node/InfoCard/InfoCard.js

@@ -15,7 +15,7 @@ var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Link = require("../Link");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classNameDescription", "classNameTitle", "dense", "description", "icon", "link", "svg", "title", "titleProps"];
+const _excluded = ["classNameDescription", "classNameTitle", "description", "icon", "link", "svg", "title", "titleProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function GlowingIconContainer({
@@ -23,8 +23,8 @@ function GlowingIconContainer({
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
     sx: theme => (0, _extends2.default)({
-      width: 40,
-      height: 40,
+      width: 36,
+      height: 36,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -33,10 +33,13 @@ function GlowingIconContainer({
       border: '1px solid',
       borderColor: 'primary.200',
       bgcolor: 'primary.50',
-      boxShadow: `0px 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`
+      boxShadow: `0px 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
+      '& .MuiSvgIcon-root': {
+        fontSize: theme.typography.pxToRem(18)
+      }
     }, theme.applyDarkStyles({
       borderColor: (0, _styles.alpha)(theme.palette.primary[400], 0.25),
-      bgcolor: (0, _styles.alpha)(theme.palette.primary[900], 0.4),
+      bgcolor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
       boxShadow: `0 0 0 2px ${(0, _styles.alpha)(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
     })),
     children: icon
@@ -46,7 +49,6 @@ function InfoCard(props) {
   const {
       classNameDescription,
       classNameTitle,
-      dense,
       description,
       icon,
       link,
@@ -65,7 +67,7 @@ function InfoCard(props) {
     prefetch: false
   } : {}, {
     sx: theme => (0, _extends2.default)({
-      p: dense ? 2.5 : 3.5,
+      p: 2.5,
       height: '100%',
       background: `${(theme.vars || theme).palette.gradients.linearSubtle}`
     }, theme.applyDarkStyles({
@@ -77,7 +79,7 @@ function InfoCard(props) {
     children: [svg && svg, icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlowingIconContainer, {
       icon: icon
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({
-      fontWeight: "bold",
+      fontWeight: "semiBold",
       component: "h3",
       color: "text.primary",
       variant: "body2",

package/node/MarkdownElement/MarkdownElement.js

@@ -537,45 +537,35 @@ const Root = (0, _styles.styled)('div')(({
       top: 0
     },
     '& .MuiCode-copy': {
-      display: 'inline-flex',
-      flexDirection: 'row-reverse',
-      alignItems: 'center',
-      width: 26,
-      height: 26,
       cursor: 'pointer',
       position: 'absolute',
       top: 12,
       right: 12,
+      display: 'inline-flex',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      height: 24,
       padding: theme.spacing(0.5),
-      fontFamily: 'inherit',
-      fontWeight: 500,
+      paddingBottom: '5px',
+      // optical alignment
+      fontFamily: _branding.brandingLightTheme.typography.fontFamily,
+      fontWeight: _branding.brandingLightTheme.typography.fontWeightMedium,
+      fontSize: _branding.brandingLightTheme.typography.pxToRem(12),
       borderRadius: 6,
-      border: 'none',
-      backgroundColor: 'hsl(210, 35%, 9%)',
-      // using the code block one-off background color (defined in line 23)
-      color: '#FFF',
+      border: '1px solid',
+      borderColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[600], 0.5),
+      backgroundColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[800], 0.5),
+      color: `var(--muidocs-palette-grey-200, ${_branding.brandingLightTheme.palette.grey[200]})`,
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest
       }),
-      '& svg': {
-        userSelect: 'none',
-        width: theme.typography.pxToRem(16),
-        height: theme.typography.pxToRem(16),
-        display: 'inline-block',
-        fill: 'currentcolor',
-        flexShrink: 0,
-        fontSize: '18px',
-        margin: 'auto',
-        opacity: 0.5
-      },
-      '& .MuiCode-copied-icon': {
+      '& .MuiCode-copied-label': {
         display: 'none'
       },
       '&:hover, &:focus': {
-        backgroundColor: _branding.brandingLightTheme.palette.primaryDark[600],
-        '& svg': {
-          opacity: 1
-        },
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
+        color: '#FFF',
         '& .MuiCode-copyKeypress': {
           display: 'block',
           // Approximate no hover capabilities with no keyboard
@@ -588,17 +578,19 @@ const Root = (0, _styles.styled)('div')(({
       '& .MuiCode-copyKeypress': {
         display: 'none',
         position: 'absolute',
-        right: 26
+        right: 34
       },
       '&[data-copied]': {
-        // style of the button when it is in copied state.
-        borderColor: _branding.brandingLightTheme.palette.primary[700],
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
         color: '#fff',
-        backgroundColor: _branding.brandingLightTheme.palette.primaryDark[600],
-        '& .MuiCode-copy-icon': {
+        '& .MuiCode-copyKeypress': {
+          opacity: 0
+        },
+        '& .MuiCode-copy-label': {
           display: 'none'
         },
-        '& .MuiCode-copied-icon': {
+        '& .MuiCode-copied-label': {
           display: 'block'
         }
       }

package/node/SectionTitle/SectionTitle.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SectionTitle = SectionTitle;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _span;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function SectionTitle(props) {
+  const {
+    title,
+    hash,
+    level: Level = 'h2'
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Level, {
+    id: hash,
+    style: {
+      flexGrow: 1
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+      "aria-labelledby": hash,
+      className: "title-link-to-anchor",
+      href: `#${hash}`,
+      tabIndex: -1,
+      children: [title, _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "anchor-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("use", {
+            xlinkHref: "#anchor-link-icon"
+          })
+        })
+      }))]
+    })
+  });
+}

package/node/SectionTitle/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SectionTitle = require("./SectionTitle");
+Object.keys(_SectionTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SectionTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SectionTitle[key];
+    }
+  });
+});

package/node/branding/brandingTheme.js

@@ -672,7 +672,8 @@ 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/svgIcons/AdobeXDIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  fillRule: "nonzero",
+  fill: "none",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M5.54 2h12.92C20.42 2 22 3.6 22 5.58v12.55a3.56 3.56 0 01-3.54 3.58H5.54A3.56 3.56 0 012 18.13V5.58A3.56 3.56 0 015.54 2z",
+    fill: "#470137"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12.52 7.28L10 11.45l2.68 4.41c.01.04.02.07.01.1 0 .04-.04.01-.09.02H10.7c-.13 0-.22 0-.28-.1l-.54-1.04c-.17-.35-.36-.7-.57-1.06l-.6-1.1h-.02c-.17.36-.36.73-.56 1.09l-.57 1.07-.57 1.06c-.04.09-.1.1-.2.1H4.94c-.03 0-.06.01-.06-.03 0-.03 0-.07.02-.1l2.6-4.28-2.53-4.31c-.03-.04-.04-.07-.02-.09.02-.02.05-.03.09-.03h1.9a.5.5 0 01.11.01c.04.02.06.05.09.08.16.36.34.72.53 1.09l.6 1.06c.2.36.39.71.57 1.07h.01c.18-.37.36-.73.55-1.08.18-.36.37-.71.57-1.06l.56-1.06c0-.04.02-.07.05-.09.03-.01.06-.02.1-.01h1.77c.04-.01.09.01.1.06 0 0-.01.04-.03.05zM16.39 16.16c-.62 0-1.24-.12-1.8-.38a2.92 2.92 0 01-1.27-1.15 3.65 3.65 0 01-.46-1.91 3.46 3.46 0 011.8-3.08 4.27 4.27 0 012.29-.48c.07 0 .16 0 .26.02V6.52c0-.06.02-.1.08-.1H19c.04 0 .08.03.08.07v8.01l.02.51.03.49c0 .06-.02.11-.08.13a6.37 6.37 0 01-2.65.53zm.82-1.69v-3.7a2.11 2.11 0 00-1.45.16c-.29.15-.53.36-.71.63-.19.27-.28.63-.28 1.06 0 .3.04.6.14.87a1.44 1.44 0 00.95.93c.23.08.46.11.7.11a4.49 4.49 0 00.65-.06z",
+    fill: "#FF61F6"
+  })]
+}), 'AdobeXD');

package/node/svgIcons/BundleSizeIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  fill: "currentColor",
+  fillRule: "nonzero",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M5.84 3c-.52 0-1 .25-1.3.67l-1.4 2.05c-.06.09-.1.19-.14.28h8V3H5.84zM20.86 5.72l-1.4-2.05c-.3-.42-.81-.67-1.33-.67H13v3h8c-.05-.1-.08-.2-.14-.28z",
+    fillOpacity: ".79"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M20.98 7H3.02L3 7.11V19.4c0 .89.71 1.61 1.58 1.61h14.84A1.6 1.6 0 0021 19.4V7.1L20.98 7zm-6.87 5.36H9.89a1.6 1.6 0 01-1.58-1.61c0-.89.7-1.6 1.58-1.6h4.22c.87 0 1.58.71 1.58 1.6 0 .89-.7 1.6-1.58 1.6z",
+    fillOpacity: ".87"
+  })]
+}), 'BundleSize');

package/node/svgIcons/FigmaIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  fillRule: "nonzero",
+  fill: "none",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M8 24a4 4 0 004-4v-4H8a4 4 0 000 8z",
+    fill: "#0ACF83"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M4 12a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",
+    fill: "#A259FF"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M4 4a4 4 0 014-4h4v8H8a4 4 0 01-4-4z",
+    fill: "#F24E1E"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 0h4a4 4 0 010 8h-4V0z",
+    fill: "#FF7262"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M20 12a4 4 0 11-8 0 4 4 0 018 0z",
+    fill: "#1ABCFE"
+  })]
+}), 'Figma');

package/node/svgIcons/MaterialDesignIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  fill: "none",
+  fillRule: "evenodd",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+    fill: "#737373",
+    cx: "12",
+    cy: "12",
+    r: "12"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    fill: "#BDBDBD",
+    d: "M4 4h16v16H4z"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    fill: "#FFF",
+    d: "M12 20l8-16H4z"
+  })]
+}), 'MaterialDesign');

package/node/svgIcons/SketchIcon.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  fillRule: "nonzero",
+  fill: "none",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    fill: "#FDB300",
+    d: "M5.24 2.7L12 2l6.76.7L24 9.48 12 23 0 9.49z"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    fill: "#EA6C00",
+    d: "M4.85 9l7.13 14L0 9zM19.1 9l-7.12 14L23.95 9z"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    fill: "#FDAD00",
+    d: "M4.85 9H19.1l-7.12 14z"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "#FDD231",
+      d: "M11.98 2l-6.75.65-.38 6.34zM11.98 2l6.75.65.37 6.34z"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "#FDAD00",
+      d: "M23.95 9l-5.22-6.35.37 6.34zM0 9l5.23-6.35-.38 6.34z"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "#FEEEB7",
+      d: "M11.98 2L4.85 9H19.1z"
+    })]
+  })]
+}), 'Sketch');

package/node/svgIcons/W3CIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = (0, _utils.createSvgIcon)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  fillRule: "nonzero",
+  fill: "none",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M6.92 6.1l2.33 7.99 2.32-8h6.3v.8l-2.37 4.14c.83.27 1.46.76 1.89 1.47.43.71.64 1.55.64 2.51 0 1.2-.31 2.2-.94 3a2.93 2.93 0 01-2.42 1.22 2.9 2.9 0 01-1.96-.72 4.25 4.25 0 01-1.23-1.96l1.31-.55c.2.5.45.9.76 1.18.32.28.69.43 1.12.43.44 0 .82-.26 1.13-.76.31-.51.47-1.12.47-1.84 0-.79-.17-1.4-.5-1.83-.38-.5-.99-.76-1.81-.76h-.64v-.78l2.24-3.92h-2.7l-.16.26-3.3 11.25h-.15l-2.4-8.14-2.41 8.14h-.16L.43 6.1H2.1l2.33 7.99L6 8.71 5.24 6.1h1.68z",
+    fill: "#005A9C"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    fill: "currentColor",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M23.52 6.25l.28 1.62-.98 1.8s-.38-.76-1.01-1.19c-.53-.35-.87-.43-1.41-.33-.7.14-1.48.93-1.82 1.9-.41 1.18-.42 1.74-.43 2.26a4.9 4.9 0 00.11 1.33s-.6-1.06-.59-2.61c0-1.1.19-2.11.72-3.1.47-.87 1.17-1.4 1.8-1.45.63-.07 1.14.23 1.53.55.42.33.83 1.07.83 1.07l.97-1.85zM23.64 15.4s-.43.75-.7 1.04c-.27.28-.76.79-1.36 1.04-.6.25-.91.3-1.5.25a3.03 3.03 0 01-1.34-.52 5.08 5.08 0 01-1.67-2.04s.24.75.39 1.07c.09.18.36.74.74 1.23a3.5 3.5 0 002.1 1.42c1.04.18 1.76-.27 1.94-.38a5.32 5.32 0 001.4-1.43c.1-.14.25-.43.25-.43l-.25-1.25z"
+    })
+  })]
+}), 'W3C');

package/node/translations/translations.json

@@ -75,6 +75,7 @@
     "toggleSettings": "Toggle settings drawer"
   },
   "backToTop": "Scroll back to top",
+  "backToOpenRoles": "Back to open roles",
   "blogDescr": "A polished blog page layout. Markdown support is courtesy of markdown-to-jsx.",
   "blogTitle": "Blog",
   "bundleSize": "Bundle size",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.7",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -23,12 +23,12 @@
   },
   "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
+    "@babel/runtime": "^7.24.5",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
-    "@mui/internal-markdown": "^1.0.3"
+    "@mui/internal-markdown": "^1.0.4"
   },
   "peerDependencies": {
     "@mui/base": "*",

package/svgIcons/AdobeXDIcon.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+export default _default;