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

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.6
+
+<!-- generated comparing v6.0.0-alpha.5..next -->
+
+_May 8, 2024_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@6.0.0-alpha.6`
+
+- [Chip] Add colorDefault class to chipClasses (#42067) @sai6855
+- Migrate components to support CSS extraction (#42001) @siriwatknp
+- [SpeedDial] Deprecate TransitionComponent (#40698) @harry-whorlow
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- Add `theme-v6` migration (#42056) @siriwatknp
+
+### `@mui/icons-material@6.0.0-alpha.6`
+
+- Add the Emergency icon (#42080) @danilo-leal
+
+### Docs
+
+- [autocomplete] Fix duplicate autocomplete id (#42086) @oliviertassinari
+- Fix SEO redirection issues @oliviertassinari
+- [material-ui] Fix broken link (#42142) @aarongarciah
+- [material-ui][docs] Fix link on the Sync page (#42088) @danilo-leal
+
+### Core
+
+- [blog] Shorten title to fit @oliviertassinari
+- [blog] Update Sync post OG image (#42114) @danilo-leal
+- [blog] A few tweaks in introducing-sync-plugin (#42092) @oliviertassinari
+- [code-infra] Add canary release scripts (#41949) @michaldudak
+- [code-infra] Move ComponentLinkHeader to @mui/docs (#42061) @Janpot
+- [code-infra] Bump node image used by CI in docker (#42079) @LukasTy
+- [core] Restrict import path with ESLint (#41970) @oliviertassinari
+- [docs-infra] Add design and formatting improvements (#42063) @danilo-leal
+- [docs-infra] Fix HTML structure violations (#42085) @oliviertassinari
+- [website] Componentize a few Careers page sections (#42102) @danilo-leal
+- [website] Refine the InfoCard design (#42116) @danilo-leal
+- [website] Fix home page slider's track position (#42141) @aarongarciah
+- [website] Closing the survey @oliviertassinari
+- [website] Remove Survey banner from website and Core docs (#42104) @joserodolfofreitas
+
+All contributors of this release in alphabetical order: @aarongarciah, @danilo-leal, @harry-whorlow, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp
+
+## v6.0.0-alpha.5
+
+<!-- generated comparing v6.0.0-alpha.4..next -->
+
+_May 1, 2024_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@6.0.0-alpha.5`
+
+- [FormControlLabel] Deprecate `componentsProps` (#41767) @sai6855
+- [PaginationItem] Deprecate components prop (#41777) @sai6855
+- [SvgIcon] Convert to support CSS extraction (#41779) @aarongarciah
+
+### `@mui/base@5.0.0-beta.43`
+
+- [TextareaAutosize] Fix resizing instability (#41638) @ZeeshanTamboli
+
+### Docs
+
+- Fix small SEO issues @oliviertassinari
+- [material-ui] Fix minor spelling error in the "About the lab" page (#42073) @ryanhartwig
+- [material-ui] Update Figma plugin name (#41967) @danilo-leal
+- [material-ui][templates] Fix input props attributes in Landing Page template (#42013) @5-tom
+- [system] Update typo on the sx prop page (#42035) @bricker
+
+### Core
+
+- [docs-infra] Clean up branding theme file and improve font-face readibility (#42023) @danilo-leal
+- [docs-infra] Simplify docs demo (#42016) @oliviertassinari
+- [website] Add content about the Sync plugin in the Material UI page (#40515) @danilo-leal
+- [website] Sync career roles (#42058) @oliviertassinari
+- [website] Add Nadja on the about page (#42021) @mnajdova
+- [website] Fix code block design by changing the `MarkdownElement` import (#42022) @danilo-leal
+- [wesbite] Remove duplicate MarkdownElement component (#42028) @danilo-leal
+
+All contributors of this release in alphabetical order: @5-tom, @aarongarciah, @bricker, @danilo-leal, @mnajdova, @oliviertassinari, @ryanhartwig, @sai6855, @ZeeshanTamboli
+
 ## v6.0.0-alpha.4
 
 <!-- generated comparing v6.0.0-alpha.3..next -->

package/ComponentLinkHeader/ComponentLinkHeader.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MarkdownHeaders } from '@mui/internal-markdown';
+export interface ComponentLinkHeaderProps {
+    design?: boolean;
+    markdown: {
+        headers: MarkdownHeaders;
+    };
+}
+export declare function ComponentLinkHeader(props: ComponentLinkHeaderProps): React.JSX.Element;

package/ComponentLinkHeader/ComponentLinkHeader.js

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

package/ComponentLinkHeader/index.d.ts

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

package/ComponentLinkHeader/index.js

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

package/ComponentLinkHeader/package.json

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

package/HighlightedCode/HighlightedCode.d.ts

@@ -3,10 +3,12 @@ import { ButtonProps } from '@mui/material/Button';
 import { SxProps } from '@mui/material/styles';
 export interface HighlightedCodeProps {
     code: string;
-    component?: React.ElementType;
     copyButtonHidden?: boolean;
     copyButtonProps?: ButtonProps;
     language: string;
+    parentComponent?: React.ElementType;
+    preComponent?: React.ElementType;
+    plainStyle?: boolean;
     sx?: SxProps;
 }
 export declare const HighlightedCode: React.ForwardRefExoticComponent<HighlightedCodeProps & React.RefAttributes<HTMLDivElement>>;

package/HighlightedCode/HighlightedCode.js

@@ -1,19 +1,42 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "component"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "plainStyle", "parentComponent", "preComponent"];
 import * as React from 'react';
 import prism from '@mui/internal-markdown/prism';
 import { NoSsr } from '@mui/base/NoSsr';
+import { styled } from '@mui/material/styles';
 import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
 import { MarkdownElement } from '../MarkdownElement';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Pre = styled('pre')(({
+  theme
+}) => ({
+  margin: 0,
+  color: 'hsl(60deg 30% 96.08%)',
+  // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch',
+  // iOS momentum scrolling.
+  maxWidth: 'calc(100vw - 32px)',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 'calc(100vw - 32px - 16px)'
+  },
+  '& code': _extends({}, theme.typography.caption, {
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased'
+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+  })
+}));
 export const HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
   const {
       copyButtonHidden = false,
       copyButtonProps,
       code,
       language,
-      component: Component = MarkdownElement
+      plainStyle,
+      parentComponent: Component = plainStyle ? 'div' : MarkdownElement,
+      preComponent: PreComponent = plainStyle ? Pre : 'pre'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const renderedCode = React.useMemo(() => {
@@ -30,7 +53,7 @@ export const HighlightedCode = /*#__PURE__*/React.forwardRef(function Highlighte
         children: /*#__PURE__*/_jsx(CodeCopyButton, _extends({
           code: code
         }, copyButtonProps))
-      }), /*#__PURE__*/_jsx("pre", {
+      }), /*#__PURE__*/_jsx(PreComponent, {
         children: /*#__PURE__*/_jsx("code", {
           className: `language-${language}`
           // eslint-disable-next-line react/no-danger

package/InfoCard/InfoCard.d.ts

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

package/InfoCard/InfoCard.js

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

package/branding/brandingTheme.js

@@ -218,20 +218,17 @@ export const getDesignTokens = mode => ({
     },
     body1: {
       fontSize: defaultTheme.typography.pxToRem(16),
-      // 16px
       lineHeight: 24 / 16,
       letterSpacing: 0
     },
     body2: {
       fontSize: defaultTheme.typography.pxToRem(14),
-      // 14px
       lineHeight: 21 / 14,
       letterSpacing: 0
     },
     caption: {
       display: 'inline-block',
       fontSize: defaultTheme.typography.pxToRem(12),
-      // 12px
       lineHeight: 18 / 12,
       letterSpacing: 0,
       fontWeight: 700
@@ -380,7 +377,7 @@ export function getThemedComponents() {
               transform: 'translateX(2px)'
             }
           }, ownerState.size === 'small' && {
-            padding: theme.spacing('6px', 1),
+            padding: theme.spacing('6px', 1.5),
             fontFamily: theme.typography.fontFamily,
             fontSize: defaultTheme.typography.pxToRem(13),
             fontWeight: theme.typography.fontWeightSemiBold,
@@ -664,7 +661,8 @@ export function getThemedComponents() {
               fontSize: theme.typography.pxToRem(14),
               fontWeight: 500,
               '&:hover, &:focus': {
-                backgroundColor: (theme.vars || theme).palette.grey[50]
+                backgroundColor: (theme.vars || theme).palette.grey[100],
+                color: (theme.vars || theme).palette.text.primary
               },
               '&:focus-visible': {
                 outline: 'none'

package/node/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"
+          })
+        })]
+      }))]
+    })]
+  });
+}