From b4bb88bd29832f6d5cb56151cd469bb5043dc497 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:43:12 -0300
Subject: [PATCH 1/4] small style updates to the code title class

---
 docs/src/modules/components/MarkdownElement.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index f8dfcdf9154314..e18b2ed63aefa8 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -510,6 +510,7 @@ const Root = styled('div')(
       // Font size reset to fix a bug with Safari 16.0 when letterSpacing is set
       fontSize: 10,
       '&:has(.MuiCode-title)': {
+        margin: theme.spacing(2, 'auto'),
         border: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
         borderRadius: theme.shape.borderRadius,
         overflow: 'clip',

From 53a6c6627c68e50850beb09a4d3358687a779fcb Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:43:46 -0300
Subject: [PATCH 2/4] apply it in instances I quickly found

---
 .../server-rendering/server-rendering.md      | 16 +---
 .../interoperability/interoperability.md      | 84 +++++--------------
 .../material/integrations/nextjs/nextjs.md    | 24 +++---
 .../styled-components/styled-components.md    | 20 ++---
 4 files changed, 40 insertions(+), 104 deletions(-)

diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md
index 899c9ab638cbe4..a7e795d175b4ed 100644
--- a/docs/data/material/guides/server-rendering/server-rendering.md
+++ b/docs/data/material/guides/server-rendering/server-rendering.md
@@ -26,9 +26,7 @@ In the following recipe, we are going to look at how to set up server-side rende
 
 Create a theme that will be shared between the client and the server:
 
-`theme.js`
-
-```js
+```js title="theme.js"
 import { createTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 
@@ -56,9 +54,7 @@ The following is the outline for what the server-side is going to look like.
 We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come into the server.
 If you're unfamiliar with Express or middleware, know that the `handleRender` function will be called every time the server receives a request.
 
-`server.js`
-
-```js
+```js title="server.js"
 import express from 'express';
 
 // We are going to fill these out in the sections to follow.
@@ -92,9 +88,7 @@ Material UI uses Emotion as its default styled engine.
 We need to extract the styles from the Emotion instance.
 For this, we need to share the same cache configuration for both the client and server:
 
-`createEmotionCache.js`
-
-```js
+```js title="createEmotionCache.js"
 import createCache from '@emotion/cache';
 
 export default function createEmotionCache() {
@@ -189,9 +183,7 @@ The client-side is straightforward.
 All we need to do is use the same cache configuration as the server-side.
 Let's take a look at the client file:
 
-`client.js`
-
-```jsx
+```jsx title="client.js"
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import CssBaseline from '@mui/material/CssBaseline';
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index f5928e24657497..013ca297afa904 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -22,9 +22,7 @@ Nothing fancy, just plain CSS.
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/plain-css-fdue7)
 
-**PlainCssSlider.css**
-
-```css
+```css title="PlainCssSlider.css"
 .slider {
   color: #20b2aa;
 }
@@ -34,9 +32,7 @@ Nothing fancy, just plain CSS.
 }
 ```
 
-**PlainCssSlider.js**
-
-```jsx
+```jsx title="PlainCssSlider.css"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 import './PlainCssSlider.css';
@@ -101,9 +97,7 @@ The following examples override the slider's `thumb` style in addition to the cu
 
 {{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}
 
-**PlainCssSliderDeep1.css**
-
-```css
+```css title="PlainCssSliderDeep1.css"
 .slider {
   color: #20b2aa;
 }
@@ -117,9 +111,7 @@ The following examples override the slider's `thumb` style in addition to the cu
 }
 ```
 
-**PlainCssSliderDeep1.js**
-
-```jsx
+```jsx title="PlainCssSliderDeep1.js"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 import './PlainCssSliderDeep1.css';
@@ -136,9 +128,7 @@ export default function PlainCssSliderDeep1() {
 
 The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
-**PlainCssSliderDeep2.css**
-
-```css
+```css title="PlainCssSliderDeep2.css"
 .slider {
   color: #20b2aa;
 }
@@ -152,9 +142,7 @@ The above demo relies on the [default `className` values](/system/styles/advance
 }
 ```
 
-**PlainCssSliderDeep2.js**
-
-```jsx
+```jsx title="PlainCssSliderDeep2.js"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 import './PlainCssSliderDeep2.css';
@@ -180,9 +168,7 @@ Explicitly providing the class names to the component is too much effort?
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/global-classnames-dho8k)
 
-**GlobalCssSlider.css**
-
-```css
+```css title="GlobalCssSlider.css"
 .MuiSlider-root {
   color: #20b2aa;
 }
@@ -192,9 +178,7 @@ Explicitly providing the class names to the component is too much effort?
 }
 ```
 
-**GlobalCssSlider.js**
-
-```jsx
+```jsx title="GlobalCssSlider.js"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 import './GlobalCssSlider.css';
@@ -254,9 +238,7 @@ The following example overrides the slider's `thumb` style in addition to the cu
 
 {{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}
 
-**GlobalCssSliderDeep.css**
-
-```css
+```css title="GlobalCssSliderDeep.css"
 .MuiSlider-root {
   color: #20b2aa;
 }
@@ -270,9 +252,7 @@ The following example overrides the slider's `thumb` style in addition to the cu
 }
 ```
 
-**GlobalCssSliderDeep.js**
-
-```jsx
+```jsx title="GlobalCssSliderDeep.js"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 import './GlobalCssSliderDeep.css';
@@ -431,9 +411,7 @@ bundling solution people are using.
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/css-modules-nuyg8)
 
-**CssModulesSlider.module.css**
-
-```css
+```css title="CssModulesSlider.module.css"
 .slider {
   color: #20b2aa;
 }
@@ -443,9 +421,7 @@ bundling solution people are using.
 }
 ```
 
-**CssModulesSlider.js**
-
-```jsx
+```jsx title="CssModulesSlider.js"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 // Webpack, Parcel or else will inject the CSS into the page
@@ -512,9 +488,7 @@ The following examples override the slider's `thumb` style in addition to the cu
 
 {{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}
 
-**CssModulesSliderDeep1.module.css**
-
-```css
+```css title="CssModulesSliderDeep1.module.css"
 .slider {
   color: #20b2aa;
 }
@@ -528,9 +502,7 @@ The following examples override the slider's `thumb` style in addition to the cu
 }
 ```
 
-**CssModulesSliderDeep1.js**
-
-```jsx
+```jsx title="CssModulesSliderDeep1.js"
 import * as React from 'react';
 // Webpack, Parcel or else will inject the CSS into the page
 import styles from './CssModulesSliderDeep1.module.css';
@@ -548,9 +520,7 @@ export default function CssModulesSliderDeep1() {
 
 The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
-**CssModulesSliderDeep2.module.css**
-
-```css
+```css title="CssModulesSliderDeep2.module.css"
 .slider {
   color: #20b2aa;
 }
@@ -564,9 +534,7 @@ The above demo relies on the [default `className` values](/system/styles/advance
 }
 ```
 
-**CssModulesSliderDeep2.js**
-
-```jsx
+```jsx title="CssModulesSliderDeep2.js"
 import * as React from 'react';
 // Webpack, Parcel or else will inject the CSS into the page
 import styles from './CssModulesSliderDeep2.module.css';
@@ -618,9 +586,7 @@ If you use a different framework, or already have set up your project, follow th
 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
 2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
 
-**tailwind.config.js**
-
-```diff
+```diff title="tailwind.config.js"
  module.exports = {
 +  corePlugins: {
 +    preflight: false,
@@ -630,9 +596,7 @@ If you use a different framework, or already have set up your project, follow th
 
 3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js and `"#root"` for CRA:
 
-**tailwind.config.js**
-
-```diff
+```diff title="tailwind.config.js"
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
@@ -737,9 +701,7 @@ Now it's all set up and you can start using Tailwind CSS on the Material UI com
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-ndkshy?file=pages%2Findex.tsx)
 
-**index.tsx**
-
-```jsx
+```jsx title="index.tsx"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 
@@ -761,9 +723,7 @@ This example showcases how to override the Slider's `thumb` style.
 
 {{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}
 
-**SliderThumbOverrides.tsx**
-
-```jsx
+```jsx title="SliderThumbOverrides.tsx"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 
@@ -786,9 +746,7 @@ export default function SliderThumbOverrides() {
 If you want to style a component's pseudo-state, you can use the appropriate key in the `classes` prop.
 Here is an example of how you can style the Slider's active state:
 
-**SliderPseudoStateOverrides.tsx**
-
-```jsx
+```jsx title="SliderPseudoStateOverrides.tsx"
 import * as React from 'react';
 import Slider from '@mui/material/Slider';
 
diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md
index 044877d094ce95..1234f79255c542 100644
--- a/docs/data/material/integrations/nextjs/nextjs.md
+++ b/docs/data/material/integrations/nextjs/nextjs.md
@@ -31,7 +31,7 @@ pnpm add @mui/material-nextjs @emotion/cache
 
 Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elements under the `<body>` with it:
 
-```diff
+```diff title="app/layout.tsx"
 +import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
  // or `v1X-appRouter` if you are using Next.js v1X
 
@@ -71,8 +71,7 @@ Use the `options` prop to override the default [cache options](https://emotion.s
 
 Create a new file and export a custom theme that includes the `'use client';` directive:
 
-```js
-// src/theme.ts
+```js title="src/theme.ts"
 'use client';
 import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
@@ -94,8 +93,7 @@ export default theme;
 
 Then in `src/app/layout.tsx`, pass the theme to `ThemeProvider`:
 
-```diff
- // app/layout.tsx
+```diff title="app/layout.tsx"
  import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 +import { ThemeProvider } from '@mui/material/styles';
 +import theme from '../theme';
@@ -122,8 +120,7 @@ To learn more about theming, check out the [theming guide](/material-ui/customiz
 
 If you want to use [CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` utilities instead:
 
-```diff
- // src/theme.ts
+```diff title="src/theme.ts"
  'use client';
 -import { createTheme } from '@mui/material/styles';
 +import { extendTheme } from '@mui/material/styles';
@@ -179,7 +176,7 @@ Inside the `pages/_document.tsx` file:
 - Import `documentGetInitialProps` and use it as the Document's `getInitialProps`.
 - Import `DocumentHeadTags` and render it inside the `<Head>`.
 
-```diff
+```diff title="pages/_document.tsx"
 +import {
 +  DocumentHeadTags,
 +  documentGetInitialProps,
@@ -209,7 +206,7 @@ Inside the `pages/_document.tsx` file:
 
 Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and render it as the root element:
 
-```diff
+```diff title="pages/_app.tsx"
 +import { AppCacheProvider } from '@mui/material-nextjs/v13-pagesRouter';
  // Or `v1X-pages` if you are using Next.js v1X
 
@@ -236,8 +233,7 @@ See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for w
 
 To use a custom [Emotion cache](https://emotion.sh/docs/@emotion/cache), pass it to the `emotionCache` property in `_document.tsx`:
 
-```diff
- // pages/_document.tsx
+```diff title="pages/_document.tsx"
  ...
 
  MyDocument.getInitialProps = async (ctx) => {
@@ -328,7 +324,7 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props
 
 In `pages/_app.tsx`, create a new theme and pass it to `ThemeProvider`:
 
-```diff
+```diff title="pages/_app.tsx"
  import * as React from 'react';
  import Head from 'next/head';
  import { AppProps } from 'next/app';
@@ -367,10 +363,10 @@ To learn more about theming, check out the [Theming guide](/material-ui/customiz
 
 If you want to use [CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/), use the `extendTheme` and `CssVarsProvider` instead:
 
-```diff
- // pages/_app.tsx
+````diff title="pages/_app.tsx"
 -import { ThemeProvider, createTheme } from '@mui/material/styles';
 +import { CssVarsProvider, extendTheme } from '@mui/material/styles';
 ```
 
 Learn more about [the advantages of CSS theme variables](/material-ui/experimental-api/css-theme-variables/overview/#advantages).
+````
diff --git a/docs/data/material/integrations/styled-components/styled-components.md b/docs/data/material/integrations/styled-components/styled-components.md
index 5c7c38d7b1626e..0601f5b3e68205 100644
--- a/docs/data/material/integrations/styled-components/styled-components.md
+++ b/docs/data/material/integrations/styled-components/styled-components.md
@@ -30,11 +30,9 @@ To use styled-components, you need to configure your bundler to replace it with
 
 If you're using yarn, you can configure it using a package resolution:
 
-**package.json**
-
 <!-- #default-branch-switch -->
 
-```diff
+```diff title="package.json"
  {
    "dependencies": {
 -    "@mui/styled-engine": "latest"
@@ -51,9 +49,7 @@ If you're using yarn, you can configure it using a package resolution:
 Because package resolutions aren't available with npm, you must update your bundler's config to add this alias.
 The example below shows how to do this with Webpack:
 
-**webpack.config.js**
-
-```diff
+```diff title="webpack.config.js"
  module.exports = {
    //...
 +  resolve: {
@@ -66,9 +62,7 @@ The example below shows how to do this with Webpack:
 
 For TypeScript, you must also update the `tsconfig.json` as shown here:
 
-**tsconfig.json**
-
-```diff
+```diff title="tsconfig.json"
  {
    "compilerOptions": {
 +    "paths": {
@@ -80,9 +74,7 @@ For TypeScript, you must also update the `tsconfig.json` as shown here:
 
 ### Next.js
 
-**next.config.js**
-
-```diff
+```diff title="next.config.js"
 +const withTM = require('next-transpile-modules')([
 +  '@mui/material',
 +  '@mui/system',
@@ -101,9 +93,7 @@ For TypeScript, you must also update the `tsconfig.json` as shown here:
 ```
 
 :::info
-**Versions compatibility**
-
-To ensure compatibility, it's essential to align the major version of `@mui/styled-engine-sc` with that of the `styled-components` package you're using. For instance, if you opt for `styled-components` version 5, it's necessary to use `@mui/styled-engine-sc` version 5. Similarly, if your preference is `styled-components` version 6, you'll need to upgrade `@mui/styled-engine-sc` to its version 6, which is currently in an alpha state.
+**Versions compatibility**: To ensure compatibility, it's essential to align the major version of `@mui/styled-engine-sc` with that of the `styled-components` package you're using. For instance, if you opt for `styled-components` version 5, it's necessary to use `@mui/styled-engine-sc` version 5. Similarly, if your preference is `styled-components` version 6, you'll need to upgrade `@mui/styled-engine-sc` to its version 6, which is currently in an alpha state.
 :::
 
 ## Ready-to-use examples

From 5cfe2007327a68f4d69c9c4a31367189808c768e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:44:12 -0300
Subject: [PATCH 3/4] bonus: stray formatting improvements

---
 .../data/material/customization/typography/typography.md | 9 +++++----
 .../minimizing-bundle-size/minimizing-bundle-size.md     | 5 +++--
 docs/data/material/guides/typescript/typescript.md       | 2 +-
 .../material/integrations/theme-scoping/theme-scoping.md | 4 ++--
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md
index c540a3c09c33d5..65d0718aacae3b 100644
--- a/docs/data/material/customization/typography/typography.md
+++ b/docs/data/material/customization/typography/typography.md
@@ -31,9 +31,10 @@ const theme = createTheme({
 
 To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
 
-⚠️ This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and
-`woff2` files. Fonts will _not_ be embedded within your bundle. They will be loaded from your webserver instead of a
-CDN.
+:::warning
+This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and
+`woff2` files. Fonts will _not_ be embedded within your bundle. They will be loaded from your webserver instead of a CDN.
+:::
 
 ```js
 import RalewayWoff2 from './fonts/Raleway-Regular.woff2';
@@ -181,7 +182,7 @@ html {
 }
 ```
 
-_You need to apply the above CSS on the html element of this page to see the below demo rendered correctly_
+You need to apply the above CSS on the HTML element of this page to see the below demo rendered correctly.
 
 {{"demo": "FontSizeTheme.js"}}
 
diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md
index c6dba59f9842da..cb2301cd5b3387 100644
--- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md
+++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md
@@ -19,8 +19,9 @@ If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack`
 import { Button, TextField } from '@mui/material';
 ```
 
-⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler
-that doesn't support tree-shaking.
+:::warning
+The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler that doesn't support tree-shaking.
+:::
 
 ## Development environment
 
diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md
index 32b93202cd0b2b..574ec568682538 100644
--- a/docs/data/material/guides/typescript/typescript.md
+++ b/docs/data/material/guides/typescript/typescript.md
@@ -45,7 +45,7 @@ by default and loose via opt-in.
 
 ## Customization of `Theme`
 
-Moved to [/customization/theming/#custom-variables](/material-ui/customization/theming/#custom-variables).
+Moved to [the Customizing the theme page](/material-ui/customization/theming/#custom-variables).
 
 ## Complications with the `component` prop
 
diff --git a/docs/data/material/integrations/theme-scoping/theme-scoping.md b/docs/data/material/integrations/theme-scoping/theme-scoping.md
index 762c8876be8e2e..3cb2bd9949497c 100644
--- a/docs/data/material/integrations/theme-scoping/theme-scoping.md
+++ b/docs/data/material/integrations/theme-scoping/theme-scoping.md
@@ -36,7 +36,7 @@ The Material UI theme will be separated from the other library, so when you use
 
 ### Using with Theme UI
 
-Render Material UI's theme provider below Theme UI's provider and assign the Material theme to the `THEME_ID` property:
+Render Material UI's theme provider below Theme UI's provider and assign the `materialTheme` to the `THEME_ID` property:
 
 ```js
 import { ThemeUIProvider } from 'theme-ui';
@@ -70,7 +70,7 @@ function App() {
 
 ### Using with Chakra UI
 
-Render Material UI's theme provider below Chakra UI's provider and assign the material theme to the `THEME_ID` property:
+Render Material UI's theme provider below Chakra UI's provider and assign the `materialTheme` to the `THEME_ID` property:
 
 ```js
 import { ChakraProvider, extendTheme as chakraExtendTheme } from '@chakra-ui/react';

From 619d3bc3fb131cd8740d78a046290d2215909f2e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 18 Mar 2024 09:17:15 -0300
Subject: [PATCH 4/4] rerun CI checks