From 46445159945a5ed0894210820e2f9b0062496aea Mon Sep 17 00:00:00 2001
From: Nathan Walston <walston@users.noreply.github.com>
Date: Fri, 24 May 2024 14:50:33 -0700
Subject: [PATCH 01/24] deprecate the `<Typography paragraph>` prop

---
 packages/mui-material/src/Typography/Typography.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts
index ce36600393674a..f4b0c9726e4386 100644
--- a/packages/mui-material/src/Typography/Typography.d.ts
+++ b/packages/mui-material/src/Typography/Typography.d.ts
@@ -38,6 +38,7 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated use the `component` prop instead, or use variant="body2" to get the same behavior.
    */
   paragraph?: boolean;
   /**

From cec0efa1b053c7ea78f32fd03b42e578e9e3b81a Mon Sep 17 00:00:00 2001
From: Nathan Walston <walston@users.noreply.github.com>
Date: Tue, 28 May 2024 08:13:22 -0700
Subject: [PATCH 02/24] Update
 packages/mui-material/src/Typography/Typography.d.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Aarón García Hervás <aaron.garcia.hervas@gmail.com>
Signed-off-by: Nathan Walston <walston@users.noreply.github.com>
---
 packages/mui-material/src/Typography/Typography.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts
index f4b0c9726e4386..d2af9b47a46e8b 100644
--- a/packages/mui-material/src/Typography/Typography.d.ts
+++ b/packages/mui-material/src/Typography/Typography.d.ts
@@ -38,7 +38,7 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
-   * @deprecated use the `component` prop instead, or use variant="body2" to get the same behavior.
+   * @deprecated use the `component` prop instead.
    */
   paragraph?: boolean;
   /**

From a5b2754475efaf71fe453628c8b210c54c865608 Mon Sep 17 00:00:00 2001
From: Nathan Walston <walston@users.noreply.github.com>
Date: Thu, 6 Jun 2024 10:16:40 -0400
Subject: [PATCH 03/24] deprecate classname

---
 packages/mui-material/src/Typography/typographyClasses.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Typography/typographyClasses.ts b/packages/mui-material/src/Typography/typographyClasses.ts
index 5762c1d869108c..1d24cc7151177d 100644
--- a/packages/mui-material/src/Typography/typographyClasses.ts
+++ b/packages/mui-material/src/Typography/typographyClasses.ts
@@ -44,7 +44,9 @@ export interface TypographyClasses {
   noWrap: string;
   /** Styles applied to the root element if `gutterBottom={true}`. */
   gutterBottom: string;
-  /** Styles applied to the root element if `paragraph={true}`. */
+  /**
+   * @deprecated
+   * Styles applied to the root element if `paragraph={true}`. */
   paragraph: string;
 }
 

From 83ce8b63bc4a8aed3043755afb6da67f94a6a1c7 Mon Sep 17 00:00:00 2001
From: Nathan Walston <walston@users.noreply.github.com>
Date: Thu, 6 Jun 2024 10:17:48 -0400
Subject: [PATCH 04/24] update docs

---
 docs/pages/material-ui/api/typography.json           | 12 +++++++++---
 .../translations/api-docs/typography/typography.json |  5 ++---
 packages/mui-material/src/Typography/Typography.js   |  1 +
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/docs/pages/material-ui/api/typography.json b/docs/pages/material-ui/api/typography.json
index a5ed87f4ba0277..4f9818efd1ca02 100644
--- a/docs/pages/material-ui/api/typography.json
+++ b/docs/pages/material-ui/api/typography.json
@@ -12,7 +12,12 @@
     "component": { "type": { "name": "elementType" } },
     "gutterBottom": { "type": { "name": "bool" }, "default": "false" },
     "noWrap": { "type": { "name": "bool" }, "default": "false" },
-    "paragraph": { "type": { "name": "bool" }, "default": "false" },
+    "paragraph": {
+      "type": { "name": "bool" },
+      "default": "false",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>component</code> prop instead, or use variant=&quot;body2&quot; to get the same behavior."
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -149,8 +154,9 @@
     {
       "key": "paragraph",
       "className": "MuiTypography-paragraph",
-      "description": "Styles applied to the root element if `paragraph={true}`.",
-      "isGlobal": false
+      "description": "",
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "root",
diff --git a/docs/translations/api-docs/typography/typography.json b/docs/translations/api-docs/typography/typography.json
index 369e9d2b613a5f..d2126600f903c2 100644
--- a/docs/translations/api-docs/typography/typography.json
+++ b/docs/translations/api-docs/typography/typography.json
@@ -114,9 +114,8 @@
       "conditions": "<code>variant=\"overline\"</code>"
     },
     "paragraph": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>paragraph={true}</code>"
+      "description": "",
+      "deprecationInfo": "Styles applied to the root element if <code>paragraph={true}</code>."
     },
     "root": { "description": "Styles applied to the root element." },
     "subtitle1": {
diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
index 394d708564231a..309a8252c99278 100644
--- a/packages/mui-material/src/Typography/Typography.js
+++ b/packages/mui-material/src/Typography/Typography.js
@@ -226,6 +226,7 @@ Typography.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
+   * @deprecated use the `component` prop instead, or use variant="body2" to get the same behavior.
    */
   paragraph: PropTypes.bool,
   /**

From e4930974c98ebeb1293651d12d2a6563b37fa2b4 Mon Sep 17 00:00:00 2001
From: Nathan Walston <walston@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:40:53 -0400
Subject: [PATCH 05/24] update migration markdown

---
 .../migrating-from-deprecated-apis.md            | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 8d8db39876683a..f95f1e1cd08437 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1499,6 +1499,22 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
  />
 ```
 
+## Typography
+
+There is no codemod to manage this change.
+
+### paragraph
+
+The Typography's prop `paragraph` was deprecated in favor of `component="p"`. set `margin-bottom` manually to match existing behavior:
+
+```diff
+ <Typography
+-  paragraph
++  component="p"
++  sx={{ marginBottom: "16px" }}
+ />
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:

From 031c6bb4acd6c218fa497beb94d1cd9ade6de2bf Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronjhunt@gmail.com>
Date: Tue, 11 Jun 2024 11:53:13 -0700
Subject: [PATCH 06/24] Updated documentation examples

---
 docs/data/material/components/cards/RecipeReviewCard.js   | 8 ++++----
 docs/data/material/components/cards/RecipeReviewCard.tsx  | 8 ++++----
 docs/data/material/components/dialogs/CookiesBanner.js    | 4 ++--
 docs/data/material/components/dialogs/CookiesBanner.tsx   | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.js    | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.tsx   | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.js       | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.tsx      | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.js    | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.tsx   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.js   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.js   | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.js  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.tsx | 4 ++--
 docs/data/material/components/drawers/ResponsiveDrawer.js | 4 ++--
 .../data/material/components/drawers/ResponsiveDrawer.tsx | 4 ++--
 .../getting-started/templates/blog/FeaturedPost.js        | 2 +-
 .../getting-started/templates/blog/FeaturedPost.tsx       | 2 +-
 .../getting-started/templates/blog/MainFeaturedPost.js    | 2 +-
 .../getting-started/templates/blog/MainFeaturedPost.tsx   | 2 +-
 docs/pages/material-ui/api/typography.json                | 2 +-
 packages/mui-material/src/Typography/Typography.js        | 2 +-
 packages/mui-material/src/Typography/Typography.test.js   | 4 ++--
 test/integration/material-ui/components.spec.tsx          | 8 ++++----
 26 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js
index 882d663339f5a9..d245b7aa2d6569 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.js
+++ b/docs/data/material/components/cards/RecipeReviewCard.js
@@ -93,12 +93,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography paragraph>Method:</Typography>
-          <Typography paragraph>
+          <Typography>Method:</Typography>
+          <Typography>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography paragraph>
+          <Typography>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -107,7 +107,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography paragraph>
+          <Typography>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/cards/RecipeReviewCard.tsx b/docs/data/material/components/cards/RecipeReviewCard.tsx
index 4cbc9931d64ab7..fddb2562b87f93 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.tsx
+++ b/docs/data/material/components/cards/RecipeReviewCard.tsx
@@ -97,12 +97,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography paragraph>Method:</Typography>
-          <Typography paragraph>
+          <Typography mb={2}>Method:</Typography>
+          <Typography mb={2}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography paragraph>
+          <Typography mb={2}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -111,7 +111,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography paragraph>
+          <Typography mb={2}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/dialogs/CookiesBanner.js b/docs/data/material/components/dialogs/CookiesBanner.js
index 451cb947e42289..2495b3ca30203b 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.js
+++ b/docs/data/material/components/dialogs/CookiesBanner.js
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/dialogs/CookiesBanner.tsx b/docs/data/material/components/dialogs/CookiesBanner.tsx
index 451cb947e42289..2495b3ca30203b 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.tsx
+++ b/docs/data/material/components/dialogs/CookiesBanner.tsx
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/drawers/ClippedDrawer.js b/docs/data/material/components/drawers/ClippedDrawer.js
index 651cbf9b076bd4..799121d317ab8d 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.js
+++ b/docs/data/material/components/drawers/ClippedDrawer.js
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ClippedDrawer.tsx b/docs/data/material/components/drawers/ClippedDrawer.tsx
index 651cbf9b076bd4..799121d317ab8d 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.tsx
+++ b/docs/data/material/components/drawers/ClippedDrawer.tsx
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.js b/docs/data/material/components/drawers/MiniDrawer.js
index de1e4430886b57..b6d7b59819ea98 100644
--- a/docs/data/material/components/drawers/MiniDrawer.js
+++ b/docs/data/material/components/drawers/MiniDrawer.js
@@ -248,7 +248,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -262,7 +262,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.tsx b/docs/data/material/components/drawers/MiniDrawer.tsx
index 0e3ff4c81909b2..63223750a574e1 100644
--- a/docs/data/material/components/drawers/MiniDrawer.tsx
+++ b/docs/data/material/components/drawers/MiniDrawer.tsx
@@ -252,7 +252,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -266,7 +266,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.js b/docs/data/material/components/drawers/PermanentDrawerLeft.js
index b345c8543c14f4..2e595776787139 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.js
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
index b345c8543c14f4..2e595776787139 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.js b/docs/data/material/components/drawers/PermanentDrawerRight.js
index 5de35b35e1df3f..5733f8383e39cf 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.js
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.js
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.tsx b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
index 5de35b35e1df3f..5733f8383e39cf 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.js b/docs/data/material/components/drawers/PersistentDrawerLeft.js
index da3e3d47d7e9ad..7feb131562314a 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.js
@@ -159,7 +159,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -173,7 +173,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
index 232fc5d3912351..a2fe25b5472774 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
@@ -163,7 +163,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -177,7 +177,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js
index 79f1dd5226049b..65398bc864dd6d 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.js
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.js
@@ -116,7 +116,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -130,7 +130,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
index e4e8f41954639f..e08ebd410110a7 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
@@ -120,7 +120,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -134,7 +134,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
index 89a66c9e5e4163..d5390a5156860e 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.js
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.js
@@ -137,7 +137,7 @@ function ResponsiveDrawer(props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -151,7 +151,7 @@ function ResponsiveDrawer(props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
index a06f4aa609ffee..acdc53f282981e 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
@@ -144,7 +144,7 @@ export default function ResponsiveDrawer(props: Props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography paragraph>
+        <Typography mb={2}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -158,7 +158,7 @@ export default function ResponsiveDrawer(props: Props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography paragraph>
+        <Typography mb={2}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.js b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
index 35fc3c5e4a58f7..f7fb97184a6268 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
@@ -26,7 +26,7 @@ function FeaturedPost(props) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" paragraph>
+            <Typography variant="subtitle1" mb={2}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
index e88025ee6fc20b..f57ea86eef5577 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
@@ -35,7 +35,7 @@ export default function FeaturedPost(props: FeaturedPostProps) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" paragraph>
+            <Typography variant="subtitle1" mb={2}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
index 48e597c3c50997..5b5b11adf6842b 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
@@ -49,7 +49,7 @@ function MainFeaturedPost(props) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" paragraph>
+            <Typography variant="h5" color="inherit" mb={2}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
index 8fdc99d8201886..3d44294aaed721 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
@@ -60,7 +60,7 @@ export default function MainFeaturedPost(props: MainFeaturedPostProps) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" paragraph>
+            <Typography variant="h5" color="inherit" mb={2}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">
diff --git a/docs/pages/material-ui/api/typography.json b/docs/pages/material-ui/api/typography.json
index 4f9818efd1ca02..70eed878c90758 100644
--- a/docs/pages/material-ui/api/typography.json
+++ b/docs/pages/material-ui/api/typography.json
@@ -16,7 +16,7 @@
       "type": { "name": "bool" },
       "default": "false",
       "deprecated": true,
-      "deprecationInfo": "use the <code>component</code> prop instead, or use variant=&quot;body2&quot; to get the same behavior."
+      "deprecationInfo": "use the <code>component</code> prop instead."
     },
     "sx": {
       "type": {
diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
index 309a8252c99278..63e6a4c6b797e3 100644
--- a/packages/mui-material/src/Typography/Typography.js
+++ b/packages/mui-material/src/Typography/Typography.js
@@ -226,7 +226,7 @@ Typography.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
-   * @deprecated use the `component` prop instead, or use variant="body2" to get the same behavior.
+   * @deprecated use the `component` prop instead.
    */
   paragraph: PropTypes.bool,
   /**
diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js
index 26dbd19f402f18..a215a267afdb33 100644
--- a/packages/mui-material/src/Typography/Typography.test.js
+++ b/packages/mui-material/src/Typography/Typography.test.js
@@ -72,8 +72,8 @@ describe('<Typography />', () => {
       expect(getByText(/hello/i).tagName).to.equal('SPAN');
     });
 
-    it('should render a p with a paragraph', () => {
-      const { getByText } = render(<Typography paragraph>Hello</Typography>);
+    it('should render a p', () => {
+      const { getByText } = render(<Typography component="p">Hello</Typography>);
 
       expect(getByText(/hello/i).tagName).to.equal('P');
     });
diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx
index 0a4575b210c06d..50f242bc50d5e3 100644
--- a/test/integration/material-ui/components.spec.tsx
+++ b/test/integration/material-ui/components.spec.tsx
@@ -263,14 +263,14 @@ function CardMediaTest() {
       </CardActions>
       <Collapse in timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography paragraph variant="body2">
+          <Typography mb={2} variant="body2">
             Method:
           </Typography>
-          <Typography paragraph>
+          <Typography mb={2}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
             minutes.
           </Typography>
-          <Typography paragraph>
+          <Typography mb={2}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
             heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
             browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
@@ -278,7 +278,7 @@ function CardMediaTest() {
             pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography paragraph>
+          <Typography mb={2}>
             Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
             without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
             medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook

From 0aa0892221cd828450cb50d03679889de5913d96 Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronjhunt@gmail.com>
Date: Tue, 11 Jun 2024 11:56:24 -0700
Subject: [PATCH 07/24] quickfix

---
 docs/data/material/components/cards/RecipeReviewCard.js | 8 ++++----
 docs/pages/material-ui/api/typography.json              | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js
index d245b7aa2d6569..864ca5bc69e5e1 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.js
+++ b/docs/data/material/components/cards/RecipeReviewCard.js
@@ -93,12 +93,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography>Method:</Typography>
-          <Typography>
+          <Typography mb={2}>Method:</Typography>
+          <Typography mb={2}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography>
+          <Typography mb={2}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -107,7 +107,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography>
+          <Typography mb={2}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/pages/material-ui/api/typography.json b/docs/pages/material-ui/api/typography.json
index 70eed878c90758..4f9818efd1ca02 100644
--- a/docs/pages/material-ui/api/typography.json
+++ b/docs/pages/material-ui/api/typography.json
@@ -16,7 +16,7 @@
       "type": { "name": "bool" },
       "default": "false",
       "deprecated": true,
-      "deprecationInfo": "use the <code>component</code> prop instead."
+      "deprecationInfo": "use the <code>component</code> prop instead, or use variant=&quot;body2&quot; to get the same behavior."
     },
     "sx": {
       "type": {

From 55dd876b9f335cbbfe9ebfaf75dc686ad55ec660 Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronjhunt@gmail.com>
Date: Tue, 11 Jun 2024 11:59:13 -0700
Subject: [PATCH 08/24] one more fix

---
 packages/mui-material/src/Typography/Typography.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
index 63e6a4c6b797e3..309a8252c99278 100644
--- a/packages/mui-material/src/Typography/Typography.js
+++ b/packages/mui-material/src/Typography/Typography.js
@@ -226,7 +226,7 @@ Typography.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
-   * @deprecated use the `component` prop instead.
+   * @deprecated use the `component` prop instead, or use variant="body2" to get the same behavior.
    */
   paragraph: PropTypes.bool,
   /**

From 90e65afd94ca3e8de10fb11e6f8adf29e6e3b863 Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronjhunt@gmail.com>
Date: Thu, 20 Jun 2024 12:19:46 -0700
Subject: [PATCH 09/24] change system props to sx

---
 docs/data/material/components/cards/RecipeReviewCard.js   | 8 ++++----
 docs/data/material/components/cards/RecipeReviewCard.tsx  | 8 ++++----
 docs/data/material/components/dialogs/CookiesBanner.js    | 4 ++--
 docs/data/material/components/dialogs/CookiesBanner.tsx   | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.js    | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.tsx   | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.js       | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.tsx      | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.js    | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.tsx   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.js   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.js   | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.js  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.tsx | 4 ++--
 docs/data/material/components/drawers/ResponsiveDrawer.js | 4 ++--
 .../data/material/components/drawers/ResponsiveDrawer.tsx | 4 ++--
 .../getting-started/templates/blog/MainFeaturedPost.js    | 2 +-
 .../getting-started/templates/blog/MainFeaturedPost.tsx   | 2 +-
 test/integration/material-ui/components.spec.tsx          | 8 ++++----
 21 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js
index 864ca5bc69e5e1..ab2a54c6b765f5 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.js
+++ b/docs/data/material/components/cards/RecipeReviewCard.js
@@ -93,12 +93,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography mb={2}>Method:</Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>Method:</Typography>
+          <Typography sx={{ marginBottom: '16px' }}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -107,7 +107,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/cards/RecipeReviewCard.tsx b/docs/data/material/components/cards/RecipeReviewCard.tsx
index fddb2562b87f93..453130482b0cc4 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.tsx
+++ b/docs/data/material/components/cards/RecipeReviewCard.tsx
@@ -97,12 +97,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography mb={2}>Method:</Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>Method:</Typography>
+          <Typography sx={{ marginBottom: '16px' }}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -111,7 +111,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/dialogs/CookiesBanner.js b/docs/data/material/components/dialogs/CookiesBanner.js
index 2495b3ca30203b..69f060d16d1228 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.js
+++ b/docs/data/material/components/dialogs/CookiesBanner.js
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/dialogs/CookiesBanner.tsx b/docs/data/material/components/dialogs/CookiesBanner.tsx
index 2495b3ca30203b..69f060d16d1228 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.tsx
+++ b/docs/data/material/components/dialogs/CookiesBanner.tsx
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/drawers/ClippedDrawer.js b/docs/data/material/components/drawers/ClippedDrawer.js
index 799121d317ab8d..a5d87e7bccbced 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.js
+++ b/docs/data/material/components/drawers/ClippedDrawer.js
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ClippedDrawer.tsx b/docs/data/material/components/drawers/ClippedDrawer.tsx
index 799121d317ab8d..a5d87e7bccbced 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.tsx
+++ b/docs/data/material/components/drawers/ClippedDrawer.tsx
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.js b/docs/data/material/components/drawers/MiniDrawer.js
index b6d7b59819ea98..e0bda2e0ecce60 100644
--- a/docs/data/material/components/drawers/MiniDrawer.js
+++ b/docs/data/material/components/drawers/MiniDrawer.js
@@ -248,7 +248,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -262,7 +262,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.tsx b/docs/data/material/components/drawers/MiniDrawer.tsx
index 63223750a574e1..03e56a0ef6ecbe 100644
--- a/docs/data/material/components/drawers/MiniDrawer.tsx
+++ b/docs/data/material/components/drawers/MiniDrawer.tsx
@@ -252,7 +252,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -266,7 +266,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.js b/docs/data/material/components/drawers/PermanentDrawerLeft.js
index 2e595776787139..4ff2c18eea3a9c 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.js
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
index 2e595776787139..4ff2c18eea3a9c 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.js b/docs/data/material/components/drawers/PermanentDrawerRight.js
index 5733f8383e39cf..8aae1dea446890 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.js
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.js
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.tsx b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
index 5733f8383e39cf..8aae1dea446890 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.js b/docs/data/material/components/drawers/PersistentDrawerLeft.js
index 7feb131562314a..2fa1db187073a2 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.js
@@ -159,7 +159,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -173,7 +173,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
index a2fe25b5472774..70b21b64b4eecd 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
@@ -163,7 +163,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -177,7 +177,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js
index 65398bc864dd6d..d22bd807a316d1 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.js
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.js
@@ -116,7 +116,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -130,7 +130,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
index e08ebd410110a7..5843f823d700a8 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
@@ -120,7 +120,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -134,7 +134,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
index d5390a5156860e..49c7f03af222fd 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.js
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.js
@@ -137,7 +137,7 @@ function ResponsiveDrawer(props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -151,7 +151,7 @@ function ResponsiveDrawer(props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
index acdc53f282981e..5428ff3f86c840 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
@@ -144,7 +144,7 @@ export default function ResponsiveDrawer(props: Props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -158,7 +158,7 @@ export default function ResponsiveDrawer(props: Props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography mb={2}>
+        <Typography sx={{ marginBottom: '16px' }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
index 5b5b11adf6842b..f2957fbca5a019 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
@@ -49,7 +49,7 @@ function MainFeaturedPost(props) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" mb={2}>
+            <Typography variant="h5" color="inherit" sx={{ marginBottom: '16px' }}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
index 3d44294aaed721..7236912f1f7a75 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
@@ -60,7 +60,7 @@ export default function MainFeaturedPost(props: MainFeaturedPostProps) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" mb={2}>
+            <Typography variant="h5" color="inherit" sx={{ marginBottom: '16px' }}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">
diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx
index 50f242bc50d5e3..4b4aa6043b07b9 100644
--- a/test/integration/material-ui/components.spec.tsx
+++ b/test/integration/material-ui/components.spec.tsx
@@ -263,14 +263,14 @@ function CardMediaTest() {
       </CardActions>
       <Collapse in timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography mb={2} variant="body2">
+          <Typography sx={{ marginBottom: '16px' }} variant="body2">
             Method:
           </Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
             minutes.
           </Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
             heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
             browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
@@ -278,7 +278,7 @@ function CardMediaTest() {
             pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography mb={2}>
+          <Typography sx={{ marginBottom: '16px' }}>
             Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
             without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
             medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook

From bff92fba6f20f010a36340385efaeae59f3c6a41 Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronjhunt@gmail.com>
Date: Thu, 20 Jun 2024 12:24:33 -0700
Subject: [PATCH 10/24] Update a few more examples

---
 test/integration/material-ui/components.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx
index 4b4aa6043b07b9..ffbe8440034ce5 100644
--- a/test/integration/material-ui/components.spec.tsx
+++ b/test/integration/material-ui/components.spec.tsx
@@ -221,7 +221,7 @@ function CardTest() {
           be-nev-o-lent
         </Typography>
         <Typography variant="body1">adjective</Typography>
-        <Typography component="p">
+        <Typography>
           well meaning and kindly.
           <br />a benevolent smile
         </Typography>
@@ -245,7 +245,7 @@ function CardMediaTest() {
         <img src="image/src.png" alt="Contemplative Reptile" />
       </CardMedia>
       <CardContent>
-        <Typography component="p">
+        <Typography>
           This impressive paella is a perfect party dish and a fun meal to cook together with your
           guests. Add 1 cup of frozen peas along with the mussels, if you like.
         </Typography>

From 72f57f23d0d043ab5f73d2a1186679b1ca34a9bf Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronjhunt@gmail.com>
Date: Thu, 20 Jun 2024 12:35:55 -0700
Subject: [PATCH 11/24] updated migration docs

---
 .../migrating-from-deprecated-apis.md                          | 3 +--
 docs/pages/material-ui/api/typography.json                     | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index f95f1e1cd08437..8717aa9f461f03 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1505,12 +1505,11 @@ There is no codemod to manage this change.
 
 ### paragraph
 
-The Typography's prop `paragraph` was deprecated in favor of `component="p"`. set `margin-bottom` manually to match existing behavior:
+The Typography's prop `paragraph` was deprecated in favor of setting `margin-bottom` using the sx props:
 
 ```diff
  <Typography
 -  paragraph
-+  component="p"
 +  sx={{ marginBottom: "16px" }}
  />
 ```
diff --git a/docs/pages/material-ui/api/typography.json b/docs/pages/material-ui/api/typography.json
index 4f9818efd1ca02..c6dd60064e95de 100644
--- a/docs/pages/material-ui/api/typography.json
+++ b/docs/pages/material-ui/api/typography.json
@@ -16,7 +16,7 @@
       "type": { "name": "bool" },
       "default": "false",
       "deprecated": true,
-      "deprecationInfo": "use the <code>component</code> prop instead, or use variant=&quot;body2&quot; to get the same behavior."
+      "deprecationInfo": "Use <code>sx</code> to apply a bottom margin, or use the <code>component</code> prop if you want to change the rendered component"
     },
     "sx": {
       "type": {

From d7f4d7dd009c7e86913f63a8b331a8d107233cbc Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronhunt@users.noreply.github.com>
Date: Thu, 20 Jun 2024 20:00:18 -0700
Subject: [PATCH 12/24] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Missed a few props, whoops. One more push coming after this.

Co-authored-by: Aarón García Hervás <aaron.garcia.hervas@gmail.com>
Signed-off-by: Arron Hunt <arronhunt@users.noreply.github.com>
---
 .../material/getting-started/templates/blog/FeaturedPost.js  | 2 +-
 .../material/getting-started/templates/blog/FeaturedPost.tsx | 2 +-
 .../migrating-from-deprecated-apis.md                        | 5 ++---
 packages/mui-material/src/Typography/Typography.d.ts         | 2 +-
 packages/mui-material/src/Typography/typographyClasses.ts    | 3 ++-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.js b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
index f7fb97184a6268..39b599b8311b11 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
@@ -26,7 +26,7 @@ function FeaturedPost(props) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" mb={2}>
+            <Typography variant="subtitle1" sx={{ marginBottom: '16px' }}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
index f57ea86eef5577..88525b84b686e5 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
@@ -35,7 +35,7 @@ export default function FeaturedPost(props: FeaturedPostProps) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" mb={2}>
+            <Typography variant="subtitle1" sx={{ marginBottom: '16px' }}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 8717aa9f461f03..bf1f8e5df4b880 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1501,16 +1501,15 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
 
 ## Typography
 
-There is no codemod to manage this change.
 
 ### paragraph
 
-The Typography's prop `paragraph` was deprecated in favor of setting `margin-bottom` using the sx props:
+The Typography's `paragraph` prop was deprecated in favor of using the `component` prop. The `16px` of margin-bottom that was automatically added to the element when using `paragraph` must be manually handled now.
 
 ```diff
  <Typography
 -  paragraph
-+  sx={{ marginBottom: "16px" }}
++  component="p"
  />
 ```
 
diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts
index d2af9b47a46e8b..e4ff039a9cac8c 100644
--- a/packages/mui-material/src/Typography/Typography.d.ts
+++ b/packages/mui-material/src/Typography/Typography.d.ts
@@ -38,7 +38,7 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
-   * @deprecated use the `component` prop instead.
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph?: boolean;
   /**
diff --git a/packages/mui-material/src/Typography/typographyClasses.ts b/packages/mui-material/src/Typography/typographyClasses.ts
index 1d24cc7151177d..731974a802fd97 100644
--- a/packages/mui-material/src/Typography/typographyClasses.ts
+++ b/packages/mui-material/src/Typography/typographyClasses.ts
@@ -45,8 +45,9 @@ export interface TypographyClasses {
   /** Styles applied to the root element if `gutterBottom={true}`. */
   gutterBottom: string;
   /**
+   * Styles applied to the root element if `paragraph={true}`.
    * @deprecated
-   * Styles applied to the root element if `paragraph={true}`. */
+   */
   paragraph: string;
 }
 

From 530abf49e37f881f4661b526d18bc5b8806c7766 Mon Sep 17 00:00:00 2001
From: Arron Hunt <arronjhunt@gmail.com>
Date: Thu, 20 Jun 2024 20:19:01 -0700
Subject: [PATCH 13/24] aarongarciah suggestions

---
 docs/pages/material-ui/api/typography.json              | 4 ++--
 docs/translations/api-docs/typography/typography.json   | 5 +++--
 packages/mui-material/src/Typography/Typography.js      | 2 +-
 packages/mui-material/src/Typography/Typography.test.js | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/docs/pages/material-ui/api/typography.json b/docs/pages/material-ui/api/typography.json
index c6dd60064e95de..a86efbb836ab3e 100644
--- a/docs/pages/material-ui/api/typography.json
+++ b/docs/pages/material-ui/api/typography.json
@@ -16,7 +16,7 @@
       "type": { "name": "bool" },
       "default": "false",
       "deprecated": true,
-      "deprecationInfo": "Use <code>sx</code> to apply a bottom margin, or use the <code>component</code> prop if you want to change the rendered component"
+      "deprecationInfo": "Use the <code>component</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "sx": {
       "type": {
@@ -154,7 +154,7 @@
     {
       "key": "paragraph",
       "className": "MuiTypography-paragraph",
-      "description": "",
+      "description": "Styles applied to the root element if `paragraph={true}`.",
       "isGlobal": false,
       "isDeprecated": true
     },
diff --git a/docs/translations/api-docs/typography/typography.json b/docs/translations/api-docs/typography/typography.json
index d2126600f903c2..369e9d2b613a5f 100644
--- a/docs/translations/api-docs/typography/typography.json
+++ b/docs/translations/api-docs/typography/typography.json
@@ -114,8 +114,9 @@
       "conditions": "<code>variant=\"overline\"</code>"
     },
     "paragraph": {
-      "description": "",
-      "deprecationInfo": "Styles applied to the root element if <code>paragraph={true}</code>."
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>paragraph={true}</code>"
     },
     "root": { "description": "Styles applied to the root element." },
     "subtitle1": {
diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
index 309a8252c99278..c5b7391526137c 100644
--- a/packages/mui-material/src/Typography/Typography.js
+++ b/packages/mui-material/src/Typography/Typography.js
@@ -226,7 +226,7 @@ Typography.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
-   * @deprecated use the `component` prop instead, or use variant="body2" to get the same behavior.
+   * @deprecated Use the `component` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   paragraph: PropTypes.bool,
   /**
diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js
index a215a267afdb33..26dbd19f402f18 100644
--- a/packages/mui-material/src/Typography/Typography.test.js
+++ b/packages/mui-material/src/Typography/Typography.test.js
@@ -72,8 +72,8 @@ describe('<Typography />', () => {
       expect(getByText(/hello/i).tagName).to.equal('SPAN');
     });
 
-    it('should render a p', () => {
-      const { getByText } = render(<Typography component="p">Hello</Typography>);
+    it('should render a p with a paragraph', () => {
+      const { getByText } = render(<Typography paragraph>Hello</Typography>);
 
       expect(getByText(/hello/i).tagName).to.equal('P');
     });

From 61bd2d68b73645a8bee45c489cee8ad457f5f2ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 1 Jul 2024 13:36:05 +0200
Subject: [PATCH 14/24] Trigger CI


From c3603df45e85371d02ad2ceee6cc41dfb74f047c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 1 Jul 2024 13:46:56 +0200
Subject: [PATCH 15/24] Unitless margins

---
 docs/data/material/components/cards/RecipeReviewCard.js   | 8 ++++----
 docs/data/material/components/cards/RecipeReviewCard.tsx  | 8 ++++----
 docs/data/material/components/dialogs/CookiesBanner.js    | 4 ++--
 docs/data/material/components/dialogs/CookiesBanner.tsx   | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.js    | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.tsx   | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.js       | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.tsx      | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.js    | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.tsx   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.js   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.js   | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.js  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.tsx | 4 ++--
 docs/data/material/components/drawers/ResponsiveDrawer.js | 4 ++--
 .../data/material/components/drawers/ResponsiveDrawer.tsx | 4 ++--
 .../getting-started/templates/blog/FeaturedPost.js        | 2 +-
 .../getting-started/templates/blog/FeaturedPost.tsx       | 2 +-
 .../getting-started/templates/blog/MainFeaturedPost.js    | 2 +-
 .../getting-started/templates/blog/MainFeaturedPost.tsx   | 2 +-
 22 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js
index ab2a54c6b765f5..0957761ceaeeca 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.js
+++ b/docs/data/material/components/cards/RecipeReviewCard.js
@@ -93,12 +93,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography sx={{ marginBottom: '16px' }}>Method:</Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography sx={{ marginBottom: 16 }}>Method:</Typography>
+          <Typography sx={{ marginBottom: 16 }}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography sx={{ marginBottom: 16 }}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -107,7 +107,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography sx={{ marginBottom: 16 }}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/cards/RecipeReviewCard.tsx b/docs/data/material/components/cards/RecipeReviewCard.tsx
index 453130482b0cc4..94b45761854854 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.tsx
+++ b/docs/data/material/components/cards/RecipeReviewCard.tsx
@@ -97,12 +97,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography sx={{ marginBottom: '16px' }}>Method:</Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography sx={{ marginBottom: 16 }}>Method:</Typography>
+          <Typography sx={{ marginBottom: 16 }}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography sx={{ marginBottom: 16 }}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -111,7 +111,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography sx={{ marginBottom: 16 }}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/dialogs/CookiesBanner.js b/docs/data/material/components/dialogs/CookiesBanner.js
index 69f060d16d1228..6bcf1b621e4dec 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.js
+++ b/docs/data/material/components/dialogs/CookiesBanner.js
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/dialogs/CookiesBanner.tsx b/docs/data/material/components/dialogs/CookiesBanner.tsx
index 69f060d16d1228..6bcf1b621e4dec 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.tsx
+++ b/docs/data/material/components/dialogs/CookiesBanner.tsx
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/drawers/ClippedDrawer.js b/docs/data/material/components/drawers/ClippedDrawer.js
index a5d87e7bccbced..ebbb05c9ca67ef 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.js
+++ b/docs/data/material/components/drawers/ClippedDrawer.js
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ClippedDrawer.tsx b/docs/data/material/components/drawers/ClippedDrawer.tsx
index a5d87e7bccbced..ebbb05c9ca67ef 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.tsx
+++ b/docs/data/material/components/drawers/ClippedDrawer.tsx
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.js b/docs/data/material/components/drawers/MiniDrawer.js
index e0bda2e0ecce60..2eb7bc81dcbf1a 100644
--- a/docs/data/material/components/drawers/MiniDrawer.js
+++ b/docs/data/material/components/drawers/MiniDrawer.js
@@ -248,7 +248,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -262,7 +262,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.tsx b/docs/data/material/components/drawers/MiniDrawer.tsx
index 03e56a0ef6ecbe..f0c9497fa7a0d0 100644
--- a/docs/data/material/components/drawers/MiniDrawer.tsx
+++ b/docs/data/material/components/drawers/MiniDrawer.tsx
@@ -252,7 +252,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -266,7 +266,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.js b/docs/data/material/components/drawers/PermanentDrawerLeft.js
index 4ff2c18eea3a9c..cec164267790a2 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.js
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
index 4ff2c18eea3a9c..cec164267790a2 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.js b/docs/data/material/components/drawers/PermanentDrawerRight.js
index 8aae1dea446890..0afd0fe9113052 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.js
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.js
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.tsx b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
index 8aae1dea446890..0afd0fe9113052 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.js b/docs/data/material/components/drawers/PersistentDrawerLeft.js
index 2fa1db187073a2..1b452d9d5c7109 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.js
@@ -159,7 +159,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -173,7 +173,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
index 70b21b64b4eecd..71338a1124a3c3 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
@@ -163,7 +163,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -177,7 +177,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js
index d22bd807a316d1..5f9a4427bff5f0 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.js
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.js
@@ -116,7 +116,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -130,7 +130,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
index 5843f823d700a8..98f549fa0c05c9 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
@@ -120,7 +120,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -134,7 +134,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
index 49c7f03af222fd..10bf24396794b8 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.js
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.js
@@ -137,7 +137,7 @@ function ResponsiveDrawer(props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -151,7 +151,7 @@ function ResponsiveDrawer(props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
index 5428ff3f86c840..cae1bf837cf56c 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
@@ -144,7 +144,7 @@ export default function ResponsiveDrawer(props: Props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -158,7 +158,7 @@ export default function ResponsiveDrawer(props: Props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: '16px' }}>
+        <Typography sx={{ marginBottom: 16 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.js b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
index 39b599b8311b11..f540855b449074 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
@@ -26,7 +26,7 @@ function FeaturedPost(props) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" sx={{ marginBottom: '16px' }}>
+            <Typography variant="subtitle1" sx={{ marginBottom: 16 }}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
index 88525b84b686e5..992ead82fe60c8 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
@@ -35,7 +35,7 @@ export default function FeaturedPost(props: FeaturedPostProps) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" sx={{ marginBottom: '16px' }}>
+            <Typography variant="subtitle1" sx={{ marginBottom: 16 }}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
index f2957fbca5a019..3713fd5f45469a 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
@@ -49,7 +49,7 @@ function MainFeaturedPost(props) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" sx={{ marginBottom: '16px' }}>
+            <Typography variant="h5" color="inherit" sx={{ marginBottom: 16 }}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
index 7236912f1f7a75..132961b84d067e 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
@@ -60,7 +60,7 @@ export default function MainFeaturedPost(props: MainFeaturedPostProps) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" sx={{ marginBottom: '16px' }}>
+            <Typography variant="h5" color="inherit" sx={{ marginBottom: 16 }}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">

From 412b6818047e25aa97008f511aa730b4c28bddb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 1 Jul 2024 14:02:01 +0200
Subject: [PATCH 16/24] Prettier

---
 .../migrating-from-deprecated-apis.md                            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index bf1f8e5df4b880..e0129d30f746df 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1501,7 +1501,6 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
 
 ## Typography
 
-
 ### paragraph
 
 The Typography's `paragraph` prop was deprecated in favor of using the `component` prop. The `16px` of margin-bottom that was automatically added to the element when using `paragraph` must be manually handled now.

From 299f33d0303cb2558428dbe831fad0b925e601e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 1 Jul 2024 14:02:47 +0200
Subject: [PATCH 17/24] Remove sx prop from integration test

---
 test/integration/material-ui/components.spec.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx
index ffbe8440034ce5..2966e7bc153a5a 100644
--- a/test/integration/material-ui/components.spec.tsx
+++ b/test/integration/material-ui/components.spec.tsx
@@ -263,14 +263,12 @@ function CardMediaTest() {
       </CardActions>
       <Collapse in timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography sx={{ marginBottom: '16px' }} variant="body2">
-            Method:
-          </Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography variant="body2">Method:</Typography>
+          <Typography>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
             minutes.
           </Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
             heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
             browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
@@ -278,7 +276,7 @@ function CardMediaTest() {
             pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography sx={{ marginBottom: '16px' }}>
+          <Typography>
             Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
             without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
             medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook

From 56994584b27f4272b128fbd530bb24d2f222ed80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 1 Jul 2024 14:28:10 +0200
Subject: [PATCH 18/24] Fix margins

---
 docs/data/material/components/cards/RecipeReviewCard.js   | 8 ++++----
 docs/data/material/components/cards/RecipeReviewCard.tsx  | 8 ++++----
 docs/data/material/components/dialogs/CookiesBanner.js    | 4 ++--
 docs/data/material/components/dialogs/CookiesBanner.tsx   | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.js    | 4 ++--
 docs/data/material/components/drawers/ClippedDrawer.tsx   | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.js       | 4 ++--
 docs/data/material/components/drawers/MiniDrawer.tsx      | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.js    | 4 ++--
 .../material/components/drawers/PermanentDrawerLeft.tsx   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.js   | 4 ++--
 .../material/components/drawers/PermanentDrawerRight.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.js   | 4 ++--
 .../material/components/drawers/PersistentDrawerLeft.tsx  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.js  | 4 ++--
 .../material/components/drawers/PersistentDrawerRight.tsx | 4 ++--
 docs/data/material/components/drawers/ResponsiveDrawer.js | 4 ++--
 .../data/material/components/drawers/ResponsiveDrawer.tsx | 4 ++--
 .../getting-started/templates/blog/FeaturedPost.js        | 2 +-
 .../getting-started/templates/blog/FeaturedPost.tsx       | 2 +-
 .../getting-started/templates/blog/MainFeaturedPost.js    | 2 +-
 .../getting-started/templates/blog/MainFeaturedPost.tsx   | 2 +-
 22 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js
index 0957761ceaeeca..55f440144ee7a0 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.js
+++ b/docs/data/material/components/cards/RecipeReviewCard.js
@@ -93,12 +93,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography sx={{ marginBottom: 16 }}>Method:</Typography>
-          <Typography sx={{ marginBottom: 16 }}>
+          <Typography sx={{ marginBottom: 2 }}>Method:</Typography>
+          <Typography sx={{ marginBottom: 2 }}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography sx={{ marginBottom: 16 }}>
+          <Typography sx={{ marginBottom: 2 }}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -107,7 +107,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography sx={{ marginBottom: 16 }}>
+          <Typography sx={{ marginBottom: 2 }}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/cards/RecipeReviewCard.tsx b/docs/data/material/components/cards/RecipeReviewCard.tsx
index 94b45761854854..155ce4a2f94ad7 100644
--- a/docs/data/material/components/cards/RecipeReviewCard.tsx
+++ b/docs/data/material/components/cards/RecipeReviewCard.tsx
@@ -97,12 +97,12 @@ export default function RecipeReviewCard() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography sx={{ marginBottom: 16 }}>Method:</Typography>
-          <Typography sx={{ marginBottom: 16 }}>
+          <Typography sx={{ marginBottom: 2 }}>Method:</Typography>
+          <Typography sx={{ marginBottom: 2 }}>
             Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
             aside for 10 minutes.
           </Typography>
-          <Typography sx={{ marginBottom: 16 }}>
+          <Typography sx={{ marginBottom: 2 }}>
             Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
             medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
             occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
@@ -111,7 +111,7 @@ export default function RecipeReviewCard() {
             stirring often until thickened and fragrant, about 10 minutes. Add
             saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
           </Typography>
-          <Typography sx={{ marginBottom: 16 }}>
+          <Typography sx={{ marginBottom: 2 }}>
             Add rice and stir very gently to distribute. Top with artichokes and
             peppers, and cook without stirring, until most of the liquid is absorbed,
             15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
diff --git a/docs/data/material/components/dialogs/CookiesBanner.js b/docs/data/material/components/dialogs/CookiesBanner.js
index 6bcf1b621e4dec..21647d0b8d2969 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.js
+++ b/docs/data/material/components/dialogs/CookiesBanner.js
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/dialogs/CookiesBanner.tsx b/docs/data/material/components/dialogs/CookiesBanner.tsx
index 6bcf1b621e4dec..21647d0b8d2969 100644
--- a/docs/data/material/components/dialogs/CookiesBanner.tsx
+++ b/docs/data/material/components/dialogs/CookiesBanner.tsx
@@ -32,13 +32,13 @@ export default function CookiesBanner() {
       </AppBar>
       <Container component="main" sx={{ pt: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
           imperdiet.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
diff --git a/docs/data/material/components/drawers/ClippedDrawer.js b/docs/data/material/components/drawers/ClippedDrawer.js
index ebbb05c9ca67ef..706a2295ece81f 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.js
+++ b/docs/data/material/components/drawers/ClippedDrawer.js
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ClippedDrawer.tsx b/docs/data/material/components/drawers/ClippedDrawer.tsx
index ebbb05c9ca67ef..706a2295ece81f 100644
--- a/docs/data/material/components/drawers/ClippedDrawer.tsx
+++ b/docs/data/material/components/drawers/ClippedDrawer.tsx
@@ -66,7 +66,7 @@ export default function ClippedDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -80,7 +80,7 @@ export default function ClippedDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.js b/docs/data/material/components/drawers/MiniDrawer.js
index 2eb7bc81dcbf1a..f0eb1af7c2b6a4 100644
--- a/docs/data/material/components/drawers/MiniDrawer.js
+++ b/docs/data/material/components/drawers/MiniDrawer.js
@@ -248,7 +248,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -262,7 +262,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/MiniDrawer.tsx b/docs/data/material/components/drawers/MiniDrawer.tsx
index f0c9497fa7a0d0..a70bf205f5c256 100644
--- a/docs/data/material/components/drawers/MiniDrawer.tsx
+++ b/docs/data/material/components/drawers/MiniDrawer.tsx
@@ -252,7 +252,7 @@ export default function MiniDrawer() {
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -266,7 +266,7 @@ export default function MiniDrawer() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.js b/docs/data/material/components/drawers/PermanentDrawerLeft.js
index cec164267790a2..40bf6584ec88d9 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.js
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
index cec164267790a2..40bf6584ec88d9 100644
--- a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerLeft.tsx
@@ -75,7 +75,7 @@ export default function PermanentDrawerLeft() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -89,7 +89,7 @@ export default function PermanentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.js b/docs/data/material/components/drawers/PermanentDrawerRight.js
index 0afd0fe9113052..7db740c53ef972 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.js
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.js
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.tsx b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
index 0afd0fe9113052..7db740c53ef972 100644
--- a/docs/data/material/components/drawers/PermanentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PermanentDrawerRight.tsx
@@ -35,7 +35,7 @@ export default function PermanentDrawerRight() {
         sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -49,7 +49,7 @@ export default function PermanentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.js b/docs/data/material/components/drawers/PersistentDrawerLeft.js
index 1b452d9d5c7109..51b3fae3fab40c 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.js
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.js
@@ -159,7 +159,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -173,7 +173,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
index 71338a1124a3c3..84e7902ba327f0 100644
--- a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx
@@ -163,7 +163,7 @@ export default function PersistentDrawerLeft() {
       </Drawer>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -177,7 +177,7 @@ export default function PersistentDrawerLeft() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js
index 5f9a4427bff5f0..9ef70a919c400a 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.js
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.js
@@ -116,7 +116,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -130,7 +130,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
index 98f549fa0c05c9..78746b5478ac6e 100644
--- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/data/material/components/drawers/PersistentDrawerRight.tsx
@@ -120,7 +120,7 @@ export default function PersistentDrawerRight() {
       </AppBar>
       <Main open={open}>
         <DrawerHeader />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -134,7 +134,7 @@ export default function PersistentDrawerRight() {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
index 10bf24396794b8..19a30e76db165d 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.js
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.js
@@ -137,7 +137,7 @@ function ResponsiveDrawer(props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -151,7 +151,7 @@ function ResponsiveDrawer(props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
index cae1bf837cf56c..5daa81e4cba73b 100644
--- a/docs/data/material/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
@@ -144,7 +144,7 @@ export default function ResponsiveDrawer(props: Props) {
         sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
       >
         <Toolbar />
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
           enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@@ -158,7 +158,7 @@ export default function ResponsiveDrawer(props: Props) {
           consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
           sapien faucibus et molestie ac.
         </Typography>
-        <Typography sx={{ marginBottom: 16 }}>
+        <Typography sx={{ marginBottom: 2 }}>
           Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
           eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
           neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.js b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
index f540855b449074..9db671854bcdf8 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.js
@@ -26,7 +26,7 @@ function FeaturedPost(props) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" sx={{ marginBottom: 16 }}>
+            <Typography variant="subtitle1" sx={{ marginBottom: 2 }}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
index 992ead82fe60c8..f69691a8940c45 100644
--- a/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/FeaturedPost.tsx
@@ -35,7 +35,7 @@ export default function FeaturedPost(props: FeaturedPostProps) {
             >
               {post.date}
             </Typography>
-            <Typography variant="subtitle1" sx={{ marginBottom: 16 }}>
+            <Typography variant="subtitle1" sx={{ marginBottom: 2 }}>
               {post.description}
             </Typography>
             <Typography variant="subtitle1" color="primary">
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
index 3713fd5f45469a..53e7b02ad5befc 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js
@@ -49,7 +49,7 @@ function MainFeaturedPost(props) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" sx={{ marginBottom: 16 }}>
+            <Typography variant="h5" color="inherit" sx={{ marginBottom: 2 }}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">
diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
index 132961b84d067e..bbb56a87773cc8 100644
--- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
+++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx
@@ -60,7 +60,7 @@ export default function MainFeaturedPost(props: MainFeaturedPostProps) {
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
-            <Typography variant="h5" color="inherit" sx={{ marginBottom: 16 }}>
+            <Typography variant="h5" color="inherit" sx={{ marginBottom: 2 }}>
               {post.description}
             </Typography>
             <Link variant="subtitle1" href="#">

From e6b2457ba848df4a69d5c763e28b1f1205320e16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 12 Jul 2024 16:18:00 +0200
Subject: [PATCH 19/24] Codemod

---
 .../deprecations/typography-props/index.js    |   1 +
 .../typography-props/test-cases/actual.js     |  19 +++
 .../typography-props/test-cases/expected.js   |  39 ++++++
 .../test-cases/theme.actual.js                |  57 +++++++++
 .../test-cases/theme.expected.js              |  64 ++++++++++
 .../typography-props/typography-props.js      | 113 ++++++++++++++++++
 .../typography-props/typography-props.test.js |  65 ++++++++++
 7 files changed, 358 insertions(+)
 create mode 100644 packages/mui-codemod/src/deprecations/typography-props/index.js
 create mode 100644 packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js
 create mode 100644 packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js
 create mode 100644 packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
 create mode 100644 packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
 create mode 100644 packages/mui-codemod/src/deprecations/typography-props/typography-props.js
 create mode 100644 packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js

diff --git a/packages/mui-codemod/src/deprecations/typography-props/index.js b/packages/mui-codemod/src/deprecations/typography-props/index.js
new file mode 100644
index 00000000000000..bae78eb6d95d50
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/typography-props/index.js
@@ -0,0 +1 @@
+export { default } from './typography-props';
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js
new file mode 100644
index 00000000000000..35d0ba1c67deb7
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js
@@ -0,0 +1,19 @@
+import Typography from '@mui/material/Typography';
+import { Typography as MyTypography } from '@mui/material';
+
+<Typography />;
+<MyTypography />;
+<Typography className="my-class" />;
+<MyTypography className="my-class" />;
+<Typography paragraph />;
+<MyTypography paragraph />;
+<Typography paragraph className="my-class" />;
+<MyTypography paragraph className="my-class" />;
+<Typography paragraph={false} className="my-class" />;
+<MyTypography paragraph={false} className="my-class" />;
+<Typography paragraph={paragraph} className="my-class" />;
+<MyTypography paragraph={paragraph} className="my-class" />;
+<Typography paragraph sx={{ marginBottom: "32px" }} />;
+<MyTypography paragraph sx={{ marginBottom: "32px" }} />;
+<Typography paragraph sx={{ color: "black" }} />;
+<MyTypography paragraph sx={{ color: "black" }} />;
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js
new file mode 100644
index 00000000000000..a804d24de6065b
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js
@@ -0,0 +1,39 @@
+import Typography from '@mui/material/Typography';
+import { Typography as MyTypography } from '@mui/material';
+
+<Typography />;
+<MyTypography />;
+<Typography className="my-class" />;
+<MyTypography className="my-class" />;
+<Typography sx={{
+  marginBottom: "16px"
+}} />;
+<MyTypography sx={{
+  marginBottom: "16px"
+}} />;
+<Typography className="my-class" sx={{
+  marginBottom: "16px"
+}} />;
+<MyTypography className="my-class" sx={{
+  marginBottom: "16px"
+}} />;
+<Typography className="my-class" />;
+<MyTypography className="my-class" />;
+<Typography className="my-class" sx={{
+  marginBottom: "16px"
+}} />;
+<MyTypography className="my-class" sx={{
+  marginBottom: "16px"
+}} />;
+<Typography sx={{ marginBottom: "32px" }} />;
+<MyTypography sx={{ marginBottom: "32px" }} />;
+<Typography
+  sx={{
+    color: "black",
+    marginBottom: "16px"
+  }} />;
+<MyTypography
+  sx={{
+    color: "black",
+    marginBottom: "16px"
+  }} />;
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
new file mode 100644
index 00000000000000..d8113a0b3faf42
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
@@ -0,0 +1,57 @@
+fn({
+  MuiTypography: {
+    defaultProps: {},
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: true,
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: true,
+      className: "my-class",
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        marginBottom: "32px",
+      },
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        color: "black",
+      },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
new file mode 100644
index 00000000000000..377f28e57ae365
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
@@ -0,0 +1,64 @@
+fn({
+  MuiTypography: {
+    defaultProps: {},
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      sx: {
+        marginBottom: "16px"
+      },
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "16px"
+      },
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "16px"
+      },
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+
+      sx: {
+        marginBottom: "32px",
+      }
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+
+      sx: {
+        color: "black",
+        marginBottom: "16px"
+      }
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
new file mode 100644
index 00000000000000..b0d717b57ff372
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
@@ -0,0 +1,113 @@
+import appendAttribute from '../../util/appendAttribute';
+import assignObject from '../../util/assignObject';
+import findComponentJSX from '../../util/findComponentJSX';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  findComponentJSX(j, { root, componentName: 'Typography' }, (elementPath) => {
+    const paragraphProp = elementPath.node.openingElement.attributes.find(
+      (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'paragraph',
+    );
+
+    if (!paragraphProp) {
+      return;
+    }
+
+    elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter(
+      (attr) => {
+        if (attr.type === 'JSXAttribute' && attr.name.name === 'paragraph') {
+          return false;
+        }
+        return true;
+      },
+    );
+
+    const isParagraphPropTruthy =
+      !!paragraphProp.value?.expression.value ||
+      paragraphProp.value?.expression.value === undefined;
+
+    if (!isParagraphPropTruthy) {
+      return;
+    }
+
+    const sxIndex = elementPath.node.openingElement.attributes.findIndex(
+      (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx',
+    );
+    if (sxIndex === -1) {
+      appendAttribute(j, {
+        target: elementPath.node,
+        attributeName: 'sx',
+        expression: j.objectExpression([
+          j.objectProperty(j.identifier('marginBottom'), j.literal('16px')),
+        ]),
+      });
+    } else {
+      const hasMarginBottom = elementPath.node.openingElement.attributes[
+        sxIndex
+      ].value.expression.properties.some((key) => key.key.name === 'marginBottom');
+
+      if (!hasMarginBottom) {
+        assignObject(j, {
+          target: elementPath.node.openingElement.attributes[sxIndex],
+          key: 'marginBottom',
+          expression: j.literal('16px'),
+        });
+      }
+    }
+  });
+
+  root.find(j.ObjectProperty, { key: { name: 'MuiTypography' } }).forEach((path) => {
+    const defaultPropsObject = path.value.value.properties.find(
+      (key) => key.key.name === 'defaultProps',
+    );
+
+    const paragraphProp = defaultPropsObject.value.properties.find(
+      (prop) => prop.key.name === 'paragraph',
+    );
+
+    if (!paragraphProp) {
+      return;
+    }
+
+    const isParagraphPropTruthy =
+      !!paragraphProp.value?.value || paragraphProp.value?.value === undefined;
+
+    if (!isParagraphPropTruthy) {
+      return;
+    }
+
+    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(
+      (prop) => !['paragraph'].includes(prop?.key?.name),
+    );
+
+    const sxIndex = defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'sx');
+
+    if (sxIndex === -1) {
+      defaultPropsObject.value.properties.push(
+        j.objectProperty(
+          j.identifier('sx'),
+          j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))]),
+        ),
+      );
+    } else {
+      const hasMarginBottom = defaultPropsObject.value.properties[sxIndex].value.properties.some(
+        (key) => key.key.name === 'marginBottom',
+      );
+
+      if (!hasMarginBottom) {
+        defaultPropsObject.value.properties[sxIndex].value.properties.push(
+          j.objectProperty(j.identifier('marginBottom'), j.literal('16px')),
+        );
+      }
+    }
+  });
+
+  return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js
new file mode 100644
index 00000000000000..f7ea7f7824504d
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js
@@ -0,0 +1,65 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './typography-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('typography-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('actual.js should not be equal to expected.js', () => {
+        const actual = read('./test-cases/actual.js');
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.not.equal(expected);
+      });
+    });
+
+    describe('[theme] typography-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('theme.actual.js should not be equal to theme.expected.js', () => {
+        const actual = read('./test-cases/theme.actual.js');
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.not.equal(expected);
+      });
+    });
+  });
+});

From 504a2026d42a6e94668d47f5a136bf6b9f89c87d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 12 Jul 2024 16:54:53 +0200
Subject: [PATCH 20/24] Fix codemod

---
 .../typography-props/test-cases/theme.actual.js   | 15 +++++++++++++++
 .../typography-props/test-cases/theme.expected.js | 12 ++++++++++++
 .../typography-props/typography-props.js          |  8 ++++----
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
index d8113a0b3faf42..054e7cf996de87 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
@@ -10,6 +10,21 @@ fn({
     },
   },
 });
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: false,
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: false,
+      className: "my-class",
+    },
+  },
+});
 fn({
   MuiTypography: {
     defaultProps: {
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
index 377f28e57ae365..8863cd88b9ed19 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
@@ -10,6 +10,18 @@ fn({
     },
   },
 });
+fn({
+  MuiTypography: {
+    defaultProps: {},
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class"
+    },
+  },
+});
 fn({
   MuiTypography: {
     defaultProps: {
diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
index b0d717b57ff372..fb2d50ddab609f 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
@@ -76,6 +76,10 @@ export default function transformer(file, api, options) {
       return;
     }
 
+    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(
+      (prop) => !['paragraph'].includes(prop?.key?.name),
+    );
+
     const isParagraphPropTruthy =
       !!paragraphProp.value?.value || paragraphProp.value?.value === undefined;
 
@@ -83,10 +87,6 @@ export default function transformer(file, api, options) {
       return;
     }
 
-    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(
-      (prop) => !['paragraph'].includes(prop?.key?.name),
-    );
-
     const sxIndex = defaultPropsObject.value.properties.findIndex((prop) => prop.key.name === 'sx');
 
     if (sxIndex === -1) {

From 1307b903aa7355a1e9caa91b9f9104312e1a2ea6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 12 Jul 2024 17:17:02 +0200
Subject: [PATCH 21/24] Add codemod entry to README

---
 packages/mui-codemod/README.md | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index 370e49ce8a6792..aab255add10428 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -61,7 +61,7 @@ npx @mui/codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote
 
 ## Included scripts
 
-- [Deprecation](#deprecations)
+- [Deprecations](#deprecations)
 - [v6](#v600)
 - [v5](#v500)
 - [v4](#v400)
@@ -1585,6 +1585,28 @@ CSS transforms:
 npx @mui/codemod@next deprecations/table-sort-label-classes <path>
 ```
 
+#### `typography-props`
+
+```diff
+ <Typography
+-  paragraph
++  sx={{ marginBottom: '16px' }}
+ />
+```
+
+```diff
+ MuiTypography: {
+   defaultProps: {
+-    paragraph: true
++    sx: { marginBottom: '16px' },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/typography-props <path>
+```
+
 ### v6.0.0
 
 #### `sx-prop`

From 32ca9977dfccf58d8b8c3a8075936bb2c2221136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 12 Jul 2024 18:25:53 +0200
Subject: [PATCH 22/24] Improve check

---
 .../src/deprecations/typography-props/typography-props.js  | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
index fb2d50ddab609f..cf635ef18d9d41 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
@@ -29,9 +29,7 @@ export default function transformer(file, api, options) {
       },
     );
 
-    const isParagraphPropTruthy =
-      !!paragraphProp.value?.expression.value ||
-      paragraphProp.value?.expression.value === undefined;
+    const isParagraphPropTruthy = paragraphProp.value?.expression.value !== false;
 
     if (!isParagraphPropTruthy) {
       return;
@@ -80,8 +78,7 @@ export default function transformer(file, api, options) {
       (prop) => !['paragraph'].includes(prop?.key?.name),
     );
 
-    const isParagraphPropTruthy =
-      !!paragraphProp.value?.value || paragraphProp.value?.value === undefined;
+    const isParagraphPropTruthy = paragraphProp.value?.value !== false;
 
     if (!isParagraphPropTruthy) {
       return;

From c7685d641b30658d03b6f22dbacf505ec62005f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 16 Jul 2024 11:57:31 +0200
Subject: [PATCH 23/24] Update deprecation entry

---
 .../migrating-from-deprecated-apis.md             | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index e0129d30f746df..a20663b17fed66 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1501,17 +1501,30 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
 
 ## Typography
 
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#typography-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/typography-props <path>
+```
+
 ### paragraph
 
-The Typography's `paragraph` prop was deprecated in favor of using the `component` prop. The `16px` of margin-bottom that was automatically added to the element when using `paragraph` must be manually handled now.
+The Typography's `paragraph` prop was deprecated. If you want to render `p` when using Typography, pass `component="p"`.
 
 ```diff
  <Typography
+   variant="subtitle1"
 -  paragraph
 +  component="p"
  />
 ```
 
+Note that Typography already renders a `p` by default, so there's no need to pass `component="p"` when not explicitly passing a variant.
+This is because `body1` is the default variant in Typography, and `body1` and `body2` variants render `p`, so there's no need to pass `component="p"` when using one of these variants.
+
+The `16px` of margin-bottom that was automatically added to the element when using `paragraph` must be manually handled now.
+The codemod that removes the `paragraph` prop adds `sx={{ marginBottom: '16px' }}` to the Typography component.
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:

From 78ffccaab2aea35dcb1c1f7b1cc9b46c6f713509 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 22 Jul 2024 19:57:50 +0200
Subject: [PATCH 24/24] Cater for mb shortcut

---
 .../typography-props/test-cases/actual.js             |  2 ++
 .../typography-props/test-cases/expected.js           |  2 ++
 .../typography-props/test-cases/theme.actual.js       | 11 +++++++++++
 .../typography-props/test-cases/theme.expected.js     | 11 +++++++++++
 .../deprecations/typography-props/typography-props.js |  6 ++++--
 5 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js
index 35d0ba1c67deb7..a5263bdb240e8e 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/actual.js
@@ -15,5 +15,7 @@ import { Typography as MyTypography } from '@mui/material';
 <MyTypography paragraph={paragraph} className="my-class" />;
 <Typography paragraph sx={{ marginBottom: "32px" }} />;
 <MyTypography paragraph sx={{ marginBottom: "32px" }} />;
+<Typography paragraph sx={{ mb: "32px" }} />;
+<MyTypography paragraph sx={{ mb: "32px" }} />;
 <Typography paragraph sx={{ color: "black" }} />;
 <MyTypography paragraph sx={{ color: "black" }} />;
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js
index a804d24de6065b..b078bb27c92dad 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/expected.js
@@ -27,6 +27,8 @@ import { Typography as MyTypography } from '@mui/material';
 }} />;
 <Typography sx={{ marginBottom: "32px" }} />;
 <MyTypography sx={{ marginBottom: "32px" }} />;
+<Typography sx={{ mb: "32px" }} />;
+<MyTypography sx={{ mb: "32px" }} />;
 <Typography
   sx={{
     color: "black",
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
index 054e7cf996de87..33f9757a6b0f98 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.actual.js
@@ -59,6 +59,17 @@ fn({
     },
   },
 });
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        mb: "32px",
+      },
+    },
+  },
+});
 fn({
   MuiTypography: {
     defaultProps: {
diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
index 8863cd88b9ed19..161b603a6f5a14 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/theme.expected.js
@@ -67,6 +67,17 @@ fn({
     defaultProps: {
       className: "my-class",
 
+      sx: {
+        mb: "32px",
+      }
+    },
+  },
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+
       sx: {
         color: "black",
         marginBottom: "16px"
diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
index cf635ef18d9d41..9968cc366038b4 100644
--- a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
+++ b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js
@@ -49,7 +49,9 @@ export default function transformer(file, api, options) {
     } else {
       const hasMarginBottom = elementPath.node.openingElement.attributes[
         sxIndex
-      ].value.expression.properties.some((key) => key.key.name === 'marginBottom');
+      ].value.expression.properties.some(
+        (key) => key.key.name === 'marginBottom' || key.key.name === 'mb',
+      );
 
       if (!hasMarginBottom) {
         assignObject(j, {
@@ -95,7 +97,7 @@ export default function transformer(file, api, options) {
       );
     } else {
       const hasMarginBottom = defaultPropsObject.value.properties[sxIndex].value.properties.some(
-        (key) => key.key.name === 'marginBottom',
+        (key) => key.key.name === 'marginBottom' || key.key.name === 'mb',
       );
 
       if (!hasMarginBottom) {