@mui/docs 6.0.0-beta.3 → 6.0.0-beta.4

package/node/Ad/ad.styles.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.adBodyInlineStyles = exports.adBodyImageStyles = void 0;
+var _styles = require("@mui/material/styles");
+const adBodyImageStyles = theme => ({
+  root: {
+    display: 'block',
+    overflow: 'hidden',
+    border: '1px dashed',
+    borderColor: theme.palette.divider,
+    borderRadius: theme.shape.borderRadius,
+    padding: '8px 8px 8px calc(8px + 130px)',
+    [theme.breakpoints.up('sm')]: {
+      padding: '12px 12px 12px calc(12px + 130px)'
+    }
+  },
+  imgWrapper: {
+    float: 'left',
+    marginLeft: -130,
+    width: 130,
+    height: 100
+  },
+  img: {
+    verticalAlign: 'middle'
+  },
+  a: {
+    color: theme.palette.text.primary,
+    textDecoration: 'none'
+  },
+  description: {
+    ...theme.typography.body2,
+    [theme.breakpoints.up('sm')]: {
+      ...theme.typography.body1
+    },
+    display: 'block',
+    marginLeft: theme.spacing(1.5)
+  },
+  poweredby: {
+    ...theme.typography.caption,
+    marginLeft: theme.spacing(1.5),
+    color: theme.palette.text.secondary,
+    display: 'block',
+    marginTop: theme.spacing(0.5),
+    fontWeight: theme.typography.fontWeightRegular
+  }
+});
+exports.adBodyImageStyles = adBodyImageStyles;
+const adBodyInlineStyles = theme => {
+  const baseline = adBodyImageStyles(theme);
+  return {
+    ...baseline,
+    root: {
+      display: 'block',
+      paddingTop: 8
+    },
+    imgWrapper: {
+      display: 'none'
+    },
+    description: {
+      ...baseline.description,
+      marginLeft: 0,
+      '&::before': {
+        border: '1px solid #3e8e41',
+        color: '#3e8e41',
+        marginRight: 6,
+        padding: '1px 5px',
+        borderRadius: 3,
+        content: '"Ad"',
+        fontSize: theme.typography.pxToRem(14)
+      },
+      '&::after': {
+        // Link
+        marginLeft: 4,
+        content: '"Get started"',
+        // Style taken from the Link component & MarkdownElement.
+        color: theme.palette.primary[600],
+        textDecoration: 'underline',
+        textDecorationColor: (0, _styles.alpha)(theme.palette.primary.main, 0.4),
+        ...theme.applyStyles('dark', {
+          color: theme.palette.primary[300]
+        })
+      }
+    },
+    poweredby: {
+      ...baseline.poweredby,
+      marginTop: 2,
+      marginLeft: 0
+    },
+    link: {
+      display: 'none'
+    }
+  };
+};
+exports.adBodyInlineStyles = adBodyInlineStyles;

package/node/Ad/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  AdCarbonInline: true
+};
+Object.defineProperty(exports, "AdCarbonInline", {
+  enumerable: true,
+  get: function () {
+    return _AdCarbon.AdCarbonInline;
+  }
+});
+var _Ad = require("./Ad");
+Object.keys(_Ad).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Ad[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Ad[key];
+    }
+  });
+});
+var _AdManager = require("./AdManager");
+Object.keys(_AdManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AdManager[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AdManager[key];
+    }
+  });
+});
+var _AdProvider = require("./AdProvider");
+Object.keys(_AdProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AdProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AdProvider[key];
+    }
+  });
+});
+var _AdGuest = require("./AdGuest");
+Object.keys(_AdGuest).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AdGuest[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AdGuest[key];
+    }
+  });
+});
+var _AdCarbon = require("./AdCarbon");

package/node/DocsProvider/DocsProvider.js

@@ -7,22 +7,27 @@ exports.DocsProvider = DocsProvider;
 exports.useDocsConfig = useDocsConfig;
 var React = _interopRequireWildcard(require("react"));
 var _i18n = require("../i18n");
+var _Ad = require("../Ad");
 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; }
 const DocsConfigContext = /*#__PURE__*/React.createContext(null);
 function DocsProvider({
   config,
+  adConfig,
   defaultUserLanguage,
   translations,
   children
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DocsConfigContext.Provider, {
     value: config,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.UserLanguageProvider, {
-      defaultUserLanguage: defaultUserLanguage,
-      translations: translations,
-      children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ad.AdProvider, {
+      config: adConfig,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.UserLanguageProvider, {
+        defaultUserLanguage: defaultUserLanguage,
+        translations: translations,
+        children: children
+      })
     })
   });
 }

package/node/branding/brandingTheme.js

@@ -449,9 +449,9 @@ function getThemedComponents() {
             transition: 'all 120ms ease-in',
             ...(ownerState.size === 'large' && {
               ...theme.typography.body1,
-              lineHeight: 21 / 16,
-              padding: theme.spacing('8px', '10px', '10px', '12px'),
+              lineHeight: 1.5,
               fontWeight: theme.typography.fontWeightMedium,
+              padding: theme.spacing('8px', '12px', '8px', '14px'),
               borderRadius: 10,
               '& > span': {
                 transition: '0.2s',
@@ -463,9 +463,10 @@ function getThemedComponents() {
             }),
             ...(ownerState.size === 'medium' && {
               fontSize: defaultTheme.typography.pxToRem(15),
-              padding: theme.spacing('8px', '12px', '8px', '14px'),
               fontWeight: theme.typography.fontWeightMedium,
-              borderRadius: 8,
+              lineHeight: 1.25,
+              padding: theme.spacing('8px', '10px', '10px', '12px'),
+              borderRadius: 10,
               '& > span': {
                 transition: '0.2s',
                 marginLeft: 4
@@ -475,11 +476,11 @@ function getThemedComponents() {
               }
             }),
             ...(ownerState.size === 'small' && {
-              padding: '6px 8px',
+              padding: '6px 10px',
               fontFamily: theme.typography.fontFamily,
               fontSize: defaultTheme.typography.pxToRem(13),
               fontWeight: theme.typography.fontWeightMedium,
-              borderRadius: 8,
+              borderRadius: 10,
               '& .MuiButton-startIcon': {
                 transition: '0.15s',
                 marginRight: 4,
@@ -502,18 +503,24 @@ function getThemedComponents() {
               color: (theme.vars || theme).palette.text.primary,
               backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
               borderColor: (theme.vars || theme).palette.primaryDark[100],
-              boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+              boxShadow: `#FFF 0 1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.grey[50]
               },
+              '&:active': {
+                backgroundColor: (theme.vars || theme).palette.grey[100]
+              },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primaryDark[100],
                 borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
                 backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[700], 0.3)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                   borderColor: (theme.vars || theme).palette.primaryDark[600]
+                },
+                '&:active': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[800]
                 }
               })
             }),
@@ -521,19 +528,25 @@ function getThemedComponents() {
               color: (theme.vars || theme).palette.primary[600],
               backgroundColor: (0, _styles.alpha)(theme.palette.primary[50], 0.2),
               borderColor: (theme.vars || theme).palette.primary[100],
-              boxShadow: `${(0, _styles.alpha)(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
+              boxShadow: `${(0, _styles.alpha)(theme.palette.primary[100], 0.4)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.primary[50],
                 borderColor: (theme.vars || theme).palette.primary[200]
               },
+              '&:active': {
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.7)
+              },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[200],
                 borderColor: (0, _styles.alpha)(theme.palette.primary[900], 0.7),
                 backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.2),
-                boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.2)} 0 1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 1px inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[900],
-                  borderColor: (theme.vars || theme).palette.primary[700]
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.5),
+                  borderColor: (theme.vars || theme).palette.primary[900]
+                },
+                '&:active': {
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.3)
                 }
               })
             }),
@@ -541,13 +554,36 @@ function getThemedComponents() {
               color: '#fff',
               textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
               backgroundColor: (theme.vars || theme).palette.primary[500],
-              backgroundImage: `linear-gradient(180deg, ${(0, _styles.alpha)(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
-              boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              backgroundImage: 'transparent',
+              border: '1px solid ',
+              borderColor: (theme.vars || theme).palette.primary[600],
+              boxShadow: `${(0, _styles.alpha)(theme.palette.primary[400], 0.5)} 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[800], 0.4)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
               '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[700]
+                backgroundColor: (theme.vars || theme).palette.primary[700],
+                borderColor: (theme.vars || theme).palette.primary[800]
               },
               '&:active': {
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700]
+                backgroundColor: (theme.vars || theme).palette.primary[800],
+                borderColor: (theme.vars || theme).palette.primary[600],
+                boxShadow: `${(0, _styles.alpha)(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`
+              }
+            }),
+            ...(ownerState.variant === 'contained' && ownerState.color === 'secondary' && {
+              color: '#fff',
+              textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
+              backgroundColor: (theme.vars || theme).palette.primaryDark[500],
+              backgroundImage: 'transparent',
+              border: '1px solid ',
+              borderColor: (theme.vars || theme).palette.primaryDark[600],
+              boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[400], 0.5)} 0 1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.primaryDark[800], 0.7)} 0 -1px 0 1px inset, ${(0, _styles.alpha)(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                borderColor: (theme.vars || theme).palette.primaryDark[700]
+              },
+              '&:active': {
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                borderColor: (theme.vars || theme).palette.primaryDark[600],
+                boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`
               }
             }),
             ...(ownerState.variant === 'text' && ownerState.color === 'secondary' && {
@@ -569,8 +605,20 @@ function getThemedComponents() {
             }),
             ...(ownerState.variant === 'text' && ownerState.color === 'primary' && {
               color: (theme.vars || theme).palette.primary[600],
+              '&:hover': {
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.3)
+              },
+              '&:active': {
+                backgroundColor: (0, _styles.alpha)(theme.palette.primary[100], 0.5)
+              },
               ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300]
+                color: (theme.vars || theme).palette.primary[300],
+                '&:hover': {
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.3)
+                },
+                '&:active': {
+                  backgroundColor: (0, _styles.alpha)(theme.palette.primary[900], 0.1)
+                }
               })
             })
           })
@@ -724,6 +772,12 @@ function getThemedComponents() {
                 background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
               })
             },
+            '&:active': {
+              background: (theme.vars || theme).palette.grey[100],
+              ...theme.applyDarkStyles({
+                background: theme.palette.primaryDark[800]
+              })
+            },
             ...(ownerState.size === 'small' && {
               height: 32,
               width: 32,
@@ -746,7 +800,11 @@ function getThemedComponents() {
             boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.grey[300],
-              background: (theme.vars || theme).palette.grey[50]
+              background: (theme.vars || theme).palette.grey[50],
+              boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: (theme.vars || theme).palette.grey[100]
             }
           }, theme.applyDarkStyles({
             color: (theme.vars || theme).palette.primary[300],
@@ -755,7 +813,11 @@ function getThemedComponents() {
             boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
+              background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
+              boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: theme.palette.primaryDark[800]
             }
           })]
         }, {
@@ -772,7 +834,11 @@ function getThemedComponents() {
             '&:hover': {
               color: (theme.vars || theme).palette.text.primary,
               borderColor: (theme.vars || theme).palette.grey[300],
-              background: (theme.vars || theme).palette.grey[50]
+              background: (theme.vars || theme).palette.grey[50],
+              boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: (theme.vars || theme).palette.grey[100]
             }
           }, theme.applyDarkStyles({
             borderColor: (0, _styles.alpha)(theme.palette.primaryDark[600], 0.5),
@@ -780,7 +846,11 @@ function getThemedComponents() {
             boxShadow: `${(0, _styles.alpha)(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.primaryDark[600],
-              background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8)
+              background: (0, _styles.alpha)(theme.palette.primaryDark[700], 0.8),
+              boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`
+            },
+            '&:active': {
+              background: theme.palette.primaryDark[800]
             }
           })]
         }]
@@ -1343,6 +1413,24 @@ function getThemedComponents() {
             // scrollbarGutter: 'stable',
           }
         }
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: ({
+            theme,
+            ownerState
+          }) => ({
+            ...(ownerState.variant === 'elevation' && {
+              border: '1px solid',
+              borderColor: (theme.vars || theme).palette.grey[100],
+              boxShadow: `${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[300], 0.5)} 0 1px 8px 0`,
+              ...theme.applyDarkStyles({
+                borderColor: (theme.vars || theme).palette.primaryDark[700],
+                boxShadow: `${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 8px 0`
+              })
+            })
+          })
+        }
       }
     }
   };

package/node/utils/loadScript.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = loadScript;
+function loadScript(src, position) {
+  const script = document.createElement('script');
+  script.setAttribute('async', '');
+  script.src = src;
+  if (position) {
+    position.appendChild(script);
+  }
+  return script;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
   "dependencies": {
-    "@babel/runtime": "^7.24.8",
+    "@babel/runtime": "^7.25.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
@@ -38,7 +38,8 @@
     "@types/react": "^17.0.0 || ^18.0.0",
     "chai": "^4.4.1",
     "next": "^13.5.1 || ^14",
-    "react": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "csstype": "^3.1.3"
   },
   "peerDependenciesMeta": {
     "@types/react": {