From 166418bdc5a1c155255de4ae71938eb5fb95b324 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 17:07:47 -0300
Subject: [PATCH 01/12] docs: Migrate List dividers demo to emotion

---
 .../pages/components/dividers/ListDividers.js | 21 ++++++++---------
 .../components/dividers/ListDividers.tsx      | 23 ++++++++-----------
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/docs/src/pages/components/dividers/ListDividers.js b/docs/src/pages/components/dividers/ListDividers.js
index ea63319988cb21..297333db708e2a 100644
--- a/docs/src/pages/components/dividers/ListDividers.js
+++ b/docs/src/pages/components/dividers/ListDividers.js
@@ -1,23 +1,20 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function ListDividers() {
-  const classes = useStyles();
-
   return (
-    <List component="nav" className={classes.root} aria-label="mailbox folders">
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+      component="nav"
+      aria-label="mailbox folders"
+    >
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>
diff --git a/docs/src/pages/components/dividers/ListDividers.tsx b/docs/src/pages/components/dividers/ListDividers.tsx
index 0b63800fc5b707..297333db708e2a 100644
--- a/docs/src/pages/components/dividers/ListDividers.tsx
+++ b/docs/src/pages/components/dividers/ListDividers.tsx
@@ -1,25 +1,20 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function ListDividers() {
-  const classes = useStyles();
-
   return (
-    <List component="nav" className={classes.root} aria-label="mailbox folders">
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+      component="nav"
+      aria-label="mailbox folders"
+    >
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>

From e98439057f7b57e5457faaffe7d7ff59a350d6c2 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 17:09:41 -0300
Subject: [PATCH 02/12] docs: Migrate Inset dividers demo to emotion

---
 .../components/dividers/InsetDividers.js      | 19 +++++++----------
 .../components/dividers/InsetDividers.tsx     | 21 +++++++------------
 2 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/docs/src/pages/components/dividers/InsetDividers.js b/docs/src/pages/components/dividers/InsetDividers.js
index 135618c2f2758f..192e441106f33e 100644
--- a/docs/src/pages/components/dividers/InsetDividers.js
+++ b/docs/src/pages/components/dividers/InsetDividers.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -10,19 +9,15 @@ import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function InsetDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemAvatar>
           <Avatar>
diff --git a/docs/src/pages/components/dividers/InsetDividers.tsx b/docs/src/pages/components/dividers/InsetDividers.tsx
index 75880518789015..192e441106f33e 100644
--- a/docs/src/pages/components/dividers/InsetDividers.tsx
+++ b/docs/src/pages/components/dividers/InsetDividers.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -10,21 +9,15 @@ import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function InsetDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemAvatar>
           <Avatar>

From 55436d392e71d34e479e18cdca675d39369c7c1e Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 17:17:15 -0300
Subject: [PATCH 03/12] docs: Migrate Subheader dividers demo to emotion

---
 .../components/dividers/SubheaderDividers.js  | 33 +++++++----------
 .../components/dividers/SubheaderDividers.tsx | 35 +++++++------------
 2 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js
index 1811ef074f09c4..61fa2ffa8bcb5c 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.js
+++ b/docs/src/pages/components/dividers/SubheaderDividers.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -9,32 +8,24 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-  dividerFullWidth: {
-    margin: `5px 0 0 ${theme.spacing(2)}`,
-  },
-  dividerInset: {
-    margin: `5px 0 0 ${theme.spacing(9)}`,
-  },
-}));
-
 export default function SubheaderDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <Divider component="li" />
       <li>
         <Typography
-          className={classes.dividerFullWidth}
+          sx={{
+            m: `5px 0 0 16px`,
+          }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -48,7 +39,9 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          className={classes.dividerInset}
+          sx={{
+            m: `5px 0 0 72px`,
+          }}
           color="textSecondary"
           display="block"
           variant="caption"
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.tsx b/docs/src/pages/components/dividers/SubheaderDividers.tsx
index 8be8597abc939e..61fa2ffa8bcb5c 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.tsx
+++ b/docs/src/pages/components/dividers/SubheaderDividers.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -9,34 +8,24 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-    dividerFullWidth: {
-      margin: `5px 0 0 ${theme.spacing(2)}`,
-    },
-    dividerInset: {
-      margin: `5px 0 0 ${theme.spacing(9)}`,
-    },
-  }),
-);
-
 export default function SubheaderDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <Divider component="li" />
       <li>
         <Typography
-          className={classes.dividerFullWidth}
+          sx={{
+            m: `5px 0 0 16px`,
+          }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -50,7 +39,9 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          className={classes.dividerInset}
+          sx={{
+            m: `5px 0 0 72px`,
+          }}
           color="textSecondary"
           display="block"
           variant="caption"

From 447b201f03a0abc640e5a6d891f7a98951218b39 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 17:31:54 -0300
Subject: [PATCH 04/12] docs: Migrate Middle dividers demo to emotion

---
 .../components/dividers/MiddleDividers.js     | 76 +++++++++---------
 .../components/dividers/MiddleDividers.tsx    | 78 +++++++++----------
 2 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js
index 135be2b5ff4690..5e647cf0df1ab1 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.js
+++ b/docs/src/pages/components/dividers/MiddleDividers.js
@@ -1,37 +1,25 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Chip from '@material-ui/core/Chip';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-  section1: {
-    margin: theme.spacing(3, 2),
-  },
-  section2: {
-    margin: theme.spacing(2),
-  },
-  section3: {
-    margin: theme.spacing(3, 1, 1),
-  },
-}));
-
 export default function MiddleDividers() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <div className={classes.section1}>
+    <Box
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+    >
+      <Box
+        sx={{
+          m: (theme) => theme.spacing(3, 2),
+        }}
+      >
         <Grid container alignItems="center">
           <Grid item xs>
             <Typography gutterBottom variant="h4" component="div">
@@ -48,22 +36,36 @@ export default function MiddleDividers() {
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
           just down the hall.
         </Typography>
-      </div>
+      </Box>
       <Divider variant="middle" />
-      <div className={classes.section2}>
+      <Box
+        sx={{
+          m: 2,
+        }}
+      >
         <Typography gutterBottom variant="body1">
           Select type
         </Typography>
-        <div>
-          <Chip className={classes.chip} label="Extra Soft" />
-          <Chip className={classes.chip} color="primary" label="Soft" />
-          <Chip className={classes.chip} label="Medium" />
-          <Chip className={classes.chip} label="Hard" />
-        </div>
-      </div>
-      <div className={classes.section3}>
+        <Box
+          sx={{
+            '& > .MuiChip-root': {
+              m: 0.5,
+            },
+          }}
+        >
+          <Chip label="Extra Soft" />
+          <Chip color="primary" label="Soft" />
+          <Chip label="Medium" />
+          <Chip label="Hard" />
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          m: (theme) => theme.spacing(3, 1, 1),
+        }}
+      >
         <Button>Add to cart</Button>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/dividers/MiddleDividers.tsx b/docs/src/pages/components/dividers/MiddleDividers.tsx
index e5b13ee3787b68..5e647cf0df1ab1 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.tsx
+++ b/docs/src/pages/components/dividers/MiddleDividers.tsx
@@ -1,39 +1,25 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Chip from '@material-ui/core/Chip';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-    chip: {
-      margin: theme.spacing(0.5),
-    },
-    section1: {
-      margin: theme.spacing(3, 2),
-    },
-    section2: {
-      margin: theme.spacing(2),
-    },
-    section3: {
-      margin: theme.spacing(3, 1, 1),
-    },
-  }),
-);
-
 export default function MiddleDividers() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <div className={classes.section1}>
+    <Box
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        backgroundColor: 'background.paper',
+      }}
+    >
+      <Box
+        sx={{
+          m: (theme) => theme.spacing(3, 2),
+        }}
+      >
         <Grid container alignItems="center">
           <Grid item xs>
             <Typography gutterBottom variant="h4" component="div">
@@ -50,22 +36,36 @@ export default function MiddleDividers() {
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
           just down the hall.
         </Typography>
-      </div>
+      </Box>
       <Divider variant="middle" />
-      <div className={classes.section2}>
+      <Box
+        sx={{
+          m: 2,
+        }}
+      >
         <Typography gutterBottom variant="body1">
           Select type
         </Typography>
-        <div>
-          <Chip className={classes.chip} label="Extra Soft" />
-          <Chip className={classes.chip} color="primary" label="Soft" />
-          <Chip className={classes.chip} label="Medium" />
-          <Chip className={classes.chip} label="Hard" />
-        </div>
-      </div>
-      <div className={classes.section3}>
+        <Box
+          sx={{
+            '& > .MuiChip-root': {
+              m: 0.5,
+            },
+          }}
+        >
+          <Chip label="Extra Soft" />
+          <Chip color="primary" label="Soft" />
+          <Chip label="Medium" />
+          <Chip label="Hard" />
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          m: (theme) => theme.spacing(3, 1, 1),
+        }}
+      >
         <Button>Add to cart</Button>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }

From ee2afdb98a28f185e3a535834ce36ba78e121056 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Sun, 28 Feb 2021 17:53:49 -0300
Subject: [PATCH 05/12] docs: Migrate Vertical dividers demo to emotion

---
 .../components/dividers/VerticalDividers.js   | 37 ++++++++----------
 .../components/dividers/VerticalDividers.tsx  | 39 ++++++++-----------
 2 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index a26e454a696c73..01cb25581b1d2f 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
@@ -9,28 +8,26 @@ import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 'fit-content',
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.secondary,
-    '& svg': {
-      margin: theme.spacing(1.5),
-    },
-    '& hr': {
-      margin: theme.spacing(0, 0.5),
-    },
-  },
-}));
-
 export default function VerticalDividers() {
-  const classes = useStyles();
-
   return (
     <div>
-      <Grid container alignItems="center" className={classes.root}>
+      <Grid
+        sx={{
+          width: 'fit-content',
+          border: (theme) => `1px solid ${theme.palette.divider}`,
+          borderRadius: (theme) => theme.shape.borderRadius,
+          backgroundColor: (theme) => theme.palette.background.paper,
+          color: (theme) => theme.palette.text.secondary,
+          '& svg': {
+            m: 1.5,
+          },
+          '& hr': {
+            m: (theme) => theme.spacing(0, 0.5),
+          },
+        }}
+        container
+        alignItems="center"
+      >
         <FormatAlignLeftIcon />
         <FormatAlignCenterIcon />
         <FormatAlignRightIcon />
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
index e0cd1de3c1caa5..01cb25581b1d2f 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
@@ -9,30 +8,26 @@ import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: 'fit-content',
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.secondary,
-      '& svg': {
-        margin: theme.spacing(1.5),
-      },
-      '& hr': {
-        margin: theme.spacing(0, 0.5),
-      },
-    },
-  }),
-);
-
 export default function VerticalDividers() {
-  const classes = useStyles();
-
   return (
     <div>
-      <Grid container alignItems="center" className={classes.root}>
+      <Grid
+        sx={{
+          width: 'fit-content',
+          border: (theme) => `1px solid ${theme.palette.divider}`,
+          borderRadius: (theme) => theme.shape.borderRadius,
+          backgroundColor: (theme) => theme.palette.background.paper,
+          color: (theme) => theme.palette.text.secondary,
+          '& svg': {
+            m: 1.5,
+          },
+          '& hr': {
+            m: (theme) => theme.spacing(0, 0.5),
+          },
+        }}
+        container
+        alignItems="center"
+      >
         <FormatAlignLeftIcon />
         <FormatAlignCenterIcon />
         <FormatAlignRightIcon />

From 781460be7ebce75c12e7c1bc4a81cc903fa8c856 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Mon, 1 Mar 2021 08:30:07 -0300
Subject: [PATCH 06/12] docs: Fix shorthand css

---
 docs/src/pages/components/dividers/InsetDividers.js      | 2 +-
 docs/src/pages/components/dividers/InsetDividers.tsx     | 2 +-
 docs/src/pages/components/dividers/ListDividers.js       | 2 +-
 docs/src/pages/components/dividers/ListDividers.tsx      | 2 +-
 docs/src/pages/components/dividers/MiddleDividers.js     | 2 +-
 docs/src/pages/components/dividers/MiddleDividers.tsx    | 2 +-
 docs/src/pages/components/dividers/SubheaderDividers.js  | 2 +-
 docs/src/pages/components/dividers/SubheaderDividers.tsx | 2 +-
 docs/src/pages/components/dividers/VerticalDividers.js   | 2 +-
 docs/src/pages/components/dividers/VerticalDividers.tsx  | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/components/dividers/InsetDividers.js b/docs/src/pages/components/dividers/InsetDividers.js
index 192e441106f33e..db979dd7245a0b 100644
--- a/docs/src/pages/components/dividers/InsetDividers.js
+++ b/docs/src/pages/components/dividers/InsetDividers.js
@@ -15,7 +15,7 @@ export default function InsetDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
     >
       <ListItem>
diff --git a/docs/src/pages/components/dividers/InsetDividers.tsx b/docs/src/pages/components/dividers/InsetDividers.tsx
index 192e441106f33e..db979dd7245a0b 100644
--- a/docs/src/pages/components/dividers/InsetDividers.tsx
+++ b/docs/src/pages/components/dividers/InsetDividers.tsx
@@ -15,7 +15,7 @@ export default function InsetDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
     >
       <ListItem>
diff --git a/docs/src/pages/components/dividers/ListDividers.js b/docs/src/pages/components/dividers/ListDividers.js
index 297333db708e2a..11287069ca20ec 100644
--- a/docs/src/pages/components/dividers/ListDividers.js
+++ b/docs/src/pages/components/dividers/ListDividers.js
@@ -10,7 +10,7 @@ export default function ListDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
       component="nav"
       aria-label="mailbox folders"
diff --git a/docs/src/pages/components/dividers/ListDividers.tsx b/docs/src/pages/components/dividers/ListDividers.tsx
index 297333db708e2a..11287069ca20ec 100644
--- a/docs/src/pages/components/dividers/ListDividers.tsx
+++ b/docs/src/pages/components/dividers/ListDividers.tsx
@@ -10,7 +10,7 @@ export default function ListDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
       component="nav"
       aria-label="mailbox folders"
diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js
index 5e647cf0df1ab1..8075518792027a 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.js
+++ b/docs/src/pages/components/dividers/MiddleDividers.js
@@ -12,7 +12,7 @@ export default function MiddleDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
     >
       <Box
diff --git a/docs/src/pages/components/dividers/MiddleDividers.tsx b/docs/src/pages/components/dividers/MiddleDividers.tsx
index 5e647cf0df1ab1..8075518792027a 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.tsx
+++ b/docs/src/pages/components/dividers/MiddleDividers.tsx
@@ -12,7 +12,7 @@ export default function MiddleDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
     >
       <Box
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js
index 61fa2ffa8bcb5c..cd17897a4bb95a 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.js
+++ b/docs/src/pages/components/dividers/SubheaderDividers.js
@@ -14,7 +14,7 @@ export default function SubheaderDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
     >
       <ListItem>
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.tsx b/docs/src/pages/components/dividers/SubheaderDividers.tsx
index 61fa2ffa8bcb5c..cd17897a4bb95a 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.tsx
+++ b/docs/src/pages/components/dividers/SubheaderDividers.tsx
@@ -14,7 +14,7 @@ export default function SubheaderDividers() {
       sx={{
         width: '100%',
         maxWidth: 360,
-        backgroundColor: 'background.paper',
+        bgcolor: 'background.paper',
       }}
     >
       <ListItem>
diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index 01cb25581b1d2f..bb15898505e846 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -16,7 +16,7 @@ export default function VerticalDividers() {
           width: 'fit-content',
           border: (theme) => `1px solid ${theme.palette.divider}`,
           borderRadius: (theme) => theme.shape.borderRadius,
-          backgroundColor: (theme) => theme.palette.background.paper,
+          bgcolor: (theme) => theme.palette.background.paper,
           color: (theme) => theme.palette.text.secondary,
           '& svg': {
             m: 1.5,
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
index 01cb25581b1d2f..bb15898505e846 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -16,7 +16,7 @@ export default function VerticalDividers() {
           width: 'fit-content',
           border: (theme) => `1px solid ${theme.palette.divider}`,
           borderRadius: (theme) => theme.shape.borderRadius,
-          backgroundColor: (theme) => theme.palette.background.paper,
+          bgcolor: (theme) => theme.palette.background.paper,
           color: (theme) => theme.palette.text.secondary,
           '& svg': {
             m: 1.5,

From 7fb0831cd9f45dcb984ecc905714a31253067aaf Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Mon, 1 Mar 2021 08:33:09 -0300
Subject: [PATCH 07/12] docs: Fix borderRadius

---
 docs/src/pages/components/dividers/VerticalDividers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index bb15898505e846..483423c8e4d7f5 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -15,7 +15,7 @@ export default function VerticalDividers() {
         sx={{
           width: 'fit-content',
           border: (theme) => `1px solid ${theme.palette.divider}`,
-          borderRadius: (theme) => theme.shape.borderRadius,
+          borderRadius: 1,
           bgcolor: (theme) => theme.palette.background.paper,
           color: (theme) => theme.palette.text.secondary,
           '& svg': {

From a684964e9658bf1139bfe0ef10bdadf6e2a96c21 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Mon, 1 Mar 2021 08:48:45 -0300
Subject: [PATCH 08/12] docs: Fix margin demos

---
 docs/src/pages/components/dividers/MiddleDividers.js     | 7 +++++--
 docs/src/pages/components/dividers/MiddleDividers.tsx    | 7 +++++--
 docs/src/pages/components/dividers/SubheaderDividers.js  | 8 ++------
 docs/src/pages/components/dividers/SubheaderDividers.tsx | 8 ++------
 docs/src/pages/components/dividers/VerticalDividers.js   | 2 +-
 docs/src/pages/components/dividers/VerticalDividers.tsx  | 2 +-
 6 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js
index 8075518792027a..9bd9328a1f6f17 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.js
+++ b/docs/src/pages/components/dividers/MiddleDividers.js
@@ -17,7 +17,8 @@ export default function MiddleDividers() {
     >
       <Box
         sx={{
-          m: (theme) => theme.spacing(3, 2),
+          my: 3,
+          mx: 2,
         }}
       >
         <Grid container alignItems="center">
@@ -61,7 +62,9 @@ export default function MiddleDividers() {
       </Box>
       <Box
         sx={{
-          m: (theme) => theme.spacing(3, 1, 1),
+          mt: 3,
+          ml: 1,
+          mb: 1,
         }}
       >
         <Button>Add to cart</Button>
diff --git a/docs/src/pages/components/dividers/MiddleDividers.tsx b/docs/src/pages/components/dividers/MiddleDividers.tsx
index 8075518792027a..9bd9328a1f6f17 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.tsx
+++ b/docs/src/pages/components/dividers/MiddleDividers.tsx
@@ -17,7 +17,8 @@ export default function MiddleDividers() {
     >
       <Box
         sx={{
-          m: (theme) => theme.spacing(3, 2),
+          my: 3,
+          mx: 2,
         }}
       >
         <Grid container alignItems="center">
@@ -61,7 +62,9 @@ export default function MiddleDividers() {
       </Box>
       <Box
         sx={{
-          m: (theme) => theme.spacing(3, 1, 1),
+          mt: 3,
+          ml: 1,
+          mb: 1,
         }}
       >
         <Button>Add to cart</Button>
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js
index cd17897a4bb95a..6342db42cba86c 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.js
+++ b/docs/src/pages/components/dividers/SubheaderDividers.js
@@ -23,9 +23,7 @@ export default function SubheaderDividers() {
       <Divider component="li" />
       <li>
         <Typography
-          sx={{
-            m: `5px 0 0 16px`,
-          }}
+          sx={{ mt: '5px', ml: 2 }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -39,9 +37,7 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          sx={{
-            m: `5px 0 0 72px`,
-          }}
+          sx={{ mt: '5px', ml: 9 }}
           color="textSecondary"
           display="block"
           variant="caption"
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.tsx b/docs/src/pages/components/dividers/SubheaderDividers.tsx
index cd17897a4bb95a..6342db42cba86c 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.tsx
+++ b/docs/src/pages/components/dividers/SubheaderDividers.tsx
@@ -23,9 +23,7 @@ export default function SubheaderDividers() {
       <Divider component="li" />
       <li>
         <Typography
-          sx={{
-            m: `5px 0 0 16px`,
-          }}
+          sx={{ mt: '5px', ml: 2 }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -39,9 +37,7 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          sx={{
-            m: `5px 0 0 72px`,
-          }}
+          sx={{ mt: '5px', ml: 9 }}
           color="textSecondary"
           display="block"
           variant="caption"
diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index 483423c8e4d7f5..0637bfd00c9dd5 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -22,7 +22,7 @@ export default function VerticalDividers() {
             m: 1.5,
           },
           '& hr': {
-            m: (theme) => theme.spacing(0, 0.5),
+            mx: 0.5,
           },
         }}
         container
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
index bb15898505e846..4c9b213bcf052d 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -22,7 +22,7 @@ export default function VerticalDividers() {
             m: 1.5,
           },
           '& hr': {
-            m: (theme) => theme.spacing(0, 0.5),
+            my: 0.5,
           },
         }}
         container

From 43981e02e1307570da9fc7fd0139f6e7e704554e Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Mon, 1 Mar 2021 08:53:45 -0300
Subject: [PATCH 09/12] docs: Fix color css using theme.[value]

---
 docs/src/pages/components/dividers/VerticalDividers.js  | 4 ++--
 docs/src/pages/components/dividers/VerticalDividers.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index 0637bfd00c9dd5..6c2b37eba2a279 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -16,8 +16,8 @@ export default function VerticalDividers() {
           width: 'fit-content',
           border: (theme) => `1px solid ${theme.palette.divider}`,
           borderRadius: 1,
-          bgcolor: (theme) => theme.palette.background.paper,
-          color: (theme) => theme.palette.text.secondary,
+          bgcolor: 'background.paper',
+          color: 'text.secondary',
           '& svg': {
             m: 1.5,
           },
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
index 4c9b213bcf052d..c29852384093d9 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -15,9 +15,9 @@ export default function VerticalDividers() {
         sx={{
           width: 'fit-content',
           border: (theme) => `1px solid ${theme.palette.divider}`,
-          borderRadius: (theme) => theme.shape.borderRadius,
-          bgcolor: (theme) => theme.palette.background.paper,
-          color: (theme) => theme.palette.text.secondary,
+          borderRadius: 1,
+          bgcolor: 'background.paper',
+          color: 'text.secondary',
           '& svg': {
             m: 1.5,
           },

From f287bb71ab14f8019e137ff4be6dc9184e644dd1 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 2 Mar 2021 23:49:42 +0100
Subject: [PATCH 10/12] shorter demos

---
 .../components/dividers/ListDividers.tsx      | 16 +++++------
 .../components/dividers/MiddleDividers.tsx    | 28 +++++--------------
 .../components/dividers/SubheaderDividers.tsx |  4 +--
 3 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/docs/src/pages/components/dividers/ListDividers.tsx b/docs/src/pages/components/dividers/ListDividers.tsx
index 11287069ca20ec..27163c0d5069a7 100644
--- a/docs/src/pages/components/dividers/ListDividers.tsx
+++ b/docs/src/pages/components/dividers/ListDividers.tsx
@@ -4,17 +4,15 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 
+const style = {
+  width: '100%',
+  maxWidth: 360,
+  bgcolor: 'background.paper',
+};
+
 export default function ListDividers() {
   return (
-    <List
-      sx={{
-        width: '100%',
-        maxWidth: 360,
-        bgcolor: 'background.paper',
-      }}
-      component="nav"
-      aria-label="mailbox folders"
-    >
+    <List sx={style} component="nav" aria-label="mailbox folders">
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>
diff --git a/docs/src/pages/components/dividers/MiddleDividers.tsx b/docs/src/pages/components/dividers/MiddleDividers.tsx
index 9bd9328a1f6f17..71630cb0a92cf9 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.tsx
+++ b/docs/src/pages/components/dividers/MiddleDividers.tsx
@@ -15,12 +15,7 @@ export default function MiddleDividers() {
         bgcolor: 'background.paper',
       }}
     >
-      <Box
-        sx={{
-          my: 3,
-          mx: 2,
-        }}
-      >
+      <Box sx={{ my: 3, mx: 2 }}>
         <Grid container alignItems="center">
           <Grid item xs>
             <Typography gutterBottom variant="h4" component="div">
@@ -33,24 +28,21 @@ export default function MiddleDividers() {
             </Typography>
           </Grid>
         </Grid>
-        <Typography color="textSecondary" variant="body2">
+        <Typography color="text.secondary" variant="body2">
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
           just down the hall.
         </Typography>
       </Box>
       <Divider variant="middle" />
-      <Box
-        sx={{
-          m: 2,
-        }}
-      >
+      <Box sx={{ m: 2 }}>
         <Typography gutterBottom variant="body1">
           Select type
         </Typography>
         <Box
           sx={{
-            '& > .MuiChip-root': {
-              m: 0.5,
+            // Replace with Stack
+            '& > :not(style) + :not(style)': {
+              ml: 1,
             },
           }}
         >
@@ -60,13 +52,7 @@ export default function MiddleDividers() {
           <Chip label="Hard" />
         </Box>
       </Box>
-      <Box
-        sx={{
-          mt: 3,
-          ml: 1,
-          mb: 1,
-        }}
-      >
+      <Box sx={{ mt: 3, ml: 1, mb: 1 }}>
         <Button>Add to cart</Button>
       </Box>
     </Box>
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.tsx b/docs/src/pages/components/dividers/SubheaderDividers.tsx
index 6342db42cba86c..9fd55b34a24d47 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.tsx
+++ b/docs/src/pages/components/dividers/SubheaderDividers.tsx
@@ -23,7 +23,7 @@ export default function SubheaderDividers() {
       <Divider component="li" />
       <li>
         <Typography
-          sx={{ mt: '5px', ml: 2 }}
+          sx={{ mt: 0.5, ml: 2 }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -37,7 +37,7 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          sx={{ mt: '5px', ml: 9 }}
+          sx={{ mt: 0.5, ml: 9 }}
           color="textSecondary"
           display="block"
           variant="caption"

From 808f450d3eecde6413f41b97462536d98c5e1d43 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 2 Mar 2021 23:53:15 +0100
Subject: [PATCH 11/12] yarn docs:typescript:formatted

---
 .../pages/components/dividers/ListDividers.js | 16 +++++------
 .../components/dividers/MiddleDividers.js     | 28 +++++--------------
 .../components/dividers/SubheaderDividers.js  |  4 +--
 .../components/dividers/VerticalDividers.js   |  2 +-
 4 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/docs/src/pages/components/dividers/ListDividers.js b/docs/src/pages/components/dividers/ListDividers.js
index 11287069ca20ec..27163c0d5069a7 100644
--- a/docs/src/pages/components/dividers/ListDividers.js
+++ b/docs/src/pages/components/dividers/ListDividers.js
@@ -4,17 +4,15 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 
+const style = {
+  width: '100%',
+  maxWidth: 360,
+  bgcolor: 'background.paper',
+};
+
 export default function ListDividers() {
   return (
-    <List
-      sx={{
-        width: '100%',
-        maxWidth: 360,
-        bgcolor: 'background.paper',
-      }}
-      component="nav"
-      aria-label="mailbox folders"
-    >
+    <List sx={style} component="nav" aria-label="mailbox folders">
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>
diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js
index 9bd9328a1f6f17..71630cb0a92cf9 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.js
+++ b/docs/src/pages/components/dividers/MiddleDividers.js
@@ -15,12 +15,7 @@ export default function MiddleDividers() {
         bgcolor: 'background.paper',
       }}
     >
-      <Box
-        sx={{
-          my: 3,
-          mx: 2,
-        }}
-      >
+      <Box sx={{ my: 3, mx: 2 }}>
         <Grid container alignItems="center">
           <Grid item xs>
             <Typography gutterBottom variant="h4" component="div">
@@ -33,24 +28,21 @@ export default function MiddleDividers() {
             </Typography>
           </Grid>
         </Grid>
-        <Typography color="textSecondary" variant="body2">
+        <Typography color="text.secondary" variant="body2">
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
           just down the hall.
         </Typography>
       </Box>
       <Divider variant="middle" />
-      <Box
-        sx={{
-          m: 2,
-        }}
-      >
+      <Box sx={{ m: 2 }}>
         <Typography gutterBottom variant="body1">
           Select type
         </Typography>
         <Box
           sx={{
-            '& > .MuiChip-root': {
-              m: 0.5,
+            // Replace with Stack
+            '& > :not(style) + :not(style)': {
+              ml: 1,
             },
           }}
         >
@@ -60,13 +52,7 @@ export default function MiddleDividers() {
           <Chip label="Hard" />
         </Box>
       </Box>
-      <Box
-        sx={{
-          mt: 3,
-          ml: 1,
-          mb: 1,
-        }}
-      >
+      <Box sx={{ mt: 3, ml: 1, mb: 1 }}>
         <Button>Add to cart</Button>
       </Box>
     </Box>
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js
index 6342db42cba86c..9fd55b34a24d47 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.js
+++ b/docs/src/pages/components/dividers/SubheaderDividers.js
@@ -23,7 +23,7 @@ export default function SubheaderDividers() {
       <Divider component="li" />
       <li>
         <Typography
-          sx={{ mt: '5px', ml: 2 }}
+          sx={{ mt: 0.5, ml: 2 }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -37,7 +37,7 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          sx={{ mt: '5px', ml: 9 }}
+          sx={{ mt: 0.5, ml: 9 }}
           color="textSecondary"
           display="block"
           variant="caption"
diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index 6c2b37eba2a279..c29852384093d9 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -22,7 +22,7 @@ export default function VerticalDividers() {
             m: 1.5,
           },
           '& hr': {
-            mx: 0.5,
+            my: 0.5,
           },
         }}
         container

From 45a52875c156589cadeee288817065410799f400 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 3 Mar 2021 00:11:06 +0100
Subject: [PATCH 12/12] fix visual regression

---
 docs/src/pages/components/dividers/VerticalDividers.js  | 2 +-
 docs/src/pages/components/dividers/VerticalDividers.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index c29852384093d9..6c2b37eba2a279 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -22,7 +22,7 @@ export default function VerticalDividers() {
             m: 1.5,
           },
           '& hr': {
-            my: 0.5,
+            mx: 0.5,
           },
         }}
         container
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
index c29852384093d9..6c2b37eba2a279 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -22,7 +22,7 @@ export default function VerticalDividers() {
             m: 1.5,
           },
           '& hr': {
-            my: 0.5,
+            mx: 0.5,
           },
         }}
         container