From b56ddbd589293149c8fc83184e1543715d986601 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 21:33:24 -0300
Subject: [PATCH 01/13] improving the Player Card demo component

---
 .../productMaterial/MaterialTheming.tsx       | 34 +++++++--------
 docs/src/components/showcase/PlayerCard.tsx   | 43 +++++++++----------
 2 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 65907d826eeef0..2ae241552fbb78 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -31,48 +31,44 @@ const code = `
     width="100"
     height="100"
     alt="Contemplative Reptile album cover"
-    src="/static/images/cards/contemplative-reptile.jpg"
+    src="/images/contemplative-reptile.jpg"
     sx={{
       width: { xs: '100%', sm: 100 },
-      borderRadius: 0.6,
     }}
   />
-  <Stack direction="column" spacing={2} alignItems="center">
-    <Stack direction="column" spacing={0.2} alignItems="center">
-      <Typography color="text.primary" fontWeight="medium" fontSize={15}>
+  <Stack direction="column" alignItems="center" spacing={1} useFlexGap>
+    <div>
+      <Typography color="text.primary" fontWeight="semiBold">
         Contemplative Reptile
       </Typography>
       <Typography
-        component="div"
         variant="caption"
         color="text.secondary"
-        fontWeight="regular"
+        fontWeight="medium"
+        textAlign="center"
+        sx={{ width: '100%' }}
       >
         Sounds of Nature
       </Typography>
-    </Stack>
-    <Stack direction="row" alignItems="center" spacing={1.5}>
-      <IconButton 
-        disabled 
-        aria-label="shuffle" 
-        size="small" 
-        sx={{ flexGrow: 0 }}>
+    </div>
+    <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
+      <IconButton aria-label="Shuffle" disabled size="small">
         <ShuffleRoundedIcon fontSize="small" />
       </IconButton>
-      <IconButton aria-label="fast rewind" disabled size="small">
+      <IconButton aria-label="Fast rewind" disabled size="small">
         <FastRewindRounded fontSize="small" />
       </IconButton>
       <IconButton
-        aria-label={paused ? 'play' : 'pause'}
-        sx={{ mx: 1 }}
+        aria-label={paused ? 'Play music' : 'Pause music'}
         onClick={() => setPaused((val) => !val)}
+        sx={{ mx: 1 }}
       >
         {paused ? <PlayArrowRounded /> : <PauseRounded />}
       </IconButton>
-      <IconButton aria-label="fast forward" disabled size="small">
+      <IconButton aria-label="Fast forward" disabled size="small">
         <FastForwardRounded fontSize="small" />
       </IconButton>
-      <IconButton aria-label="loop" disabled size="small">
+      <IconButton aria-label="Loop music" disabled size="small">
         <LoopRoundedIcon fontSize="small" />
       </IconButton>
     </Stack>
diff --git a/docs/src/components/showcase/PlayerCard.tsx b/docs/src/components/showcase/PlayerCard.tsx
index 1e29fbbe51769c..726023bd1ef2bd 100644
--- a/docs/src/components/showcase/PlayerCard.tsx
+++ b/docs/src/components/showcase/PlayerCard.tsx
@@ -32,13 +32,10 @@ export default function PlayerCard({
             display: 'flex',
             flexDirection: { xs: 'column', sm: 'row' },
             alignItems: 'center',
-            borderColor: extraStyles ? 'primary.200' : 'grey.200',
             gap: 2,
-            boxShadow: (theme) =>
-              extraStyles
-                ? '0 2px 4px rgba(0, 127, 255, 0.2)'
-                : `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
             ...(!disableTheming && {
+              borderColor: 'divider',
+              boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
               [`& .${iconButtonClasses.root}`]: {
                 border: '1px solid',
                 bgcolor: 'primary.50',
@@ -61,10 +58,7 @@ export default function PlayerCard({
             ((theme) =>
               theme.applyDarkStyles({
                 bgcolor: 'primaryDark.900',
-                borderColor: extraStyles ? 'primary.800' : 'primaryDark.700',
-                boxShadow: extraStyles
-                  ? '0 2px 4px rgba(0, 127, 255, 0.2)'
-                  : '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
                 [`& .${iconButtonClasses.root}`]: {
                   bgcolor: 'primary.900',
                   color: 'primary.200',
@@ -90,41 +84,44 @@ export default function PlayerCard({
           src="/static/images/cards/contemplative-reptile.jpg"
           sx={{
             width: { xs: '100%', sm: 100 },
-            borderRadius: 0.6,
+            ...(!disableTheming && {
+              borderRadius: '6px',
+            }),
           }}
         />
-        <Stack direction="column" spacing={2} alignItems="center">
-          <Stack direction="column" spacing={0.2} alignItems="center">
-            <Typography color="text.primary" fontWeight="medium" fontSize={15}>
+        <Stack direction="column" alignItems="center" spacing={1} useFlexGap>
+          <div>
+            <Typography color="text.primary" fontWeight="semiBold">
               Contemplative Reptile
             </Typography>
             <Typography
-              component="div"
               variant="caption"
               color="text.secondary"
-              fontWeight="regular"
+              fontWeight="medium"
+              textAlign="center"
+              sx={{ width: '100%' }}
             >
               Sounds of Nature
             </Typography>
-          </Stack>
-          <Stack direction="row" alignItems="center" spacing={1.5}>
-            <IconButton aria-label="shuffle" disabled size="small" sx={{ flexGrow: 0 }}>
+          </div>
+          <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
+            <IconButton aria-label="Shuffle" disabled size="small">
               <ShuffleRoundedIcon fontSize="small" />
             </IconButton>
-            <IconButton aria-label="fast rewind" disabled size="small">
+            <IconButton aria-label="Fast rewind" disabled size="small">
               <FastRewindRounded fontSize="small" />
             </IconButton>
             <IconButton
-              aria-label={paused ? 'play' : 'pause'}
-              sx={{ mx: 1 }}
+              aria-label={paused ? 'Play music' : 'Pause music'}
               onClick={() => setPaused((val) => !val)}
+              sx={{ mx: 1 }}
             >
               {paused ? <PlayArrowRounded /> : <PauseRounded />}
             </IconButton>
-            <IconButton aria-label="fast forward" disabled size="small">
+            <IconButton aria-label="Fast forward" disabled size="small">
               <FastForwardRounded fontSize="small" />
             </IconButton>
-            <IconButton aria-label="loop" disabled size="small">
+            <IconButton aria-label="Loop music" disabled size="small">
               <LoopRoundedIcon fontSize="small" />
             </IconButton>
           </Stack>

From dc896aaad5fac542d93e8c43d4d7cbcd04f91228 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 21:33:45 -0300
Subject: [PATCH 02/13] improving the Real Estate styling demo component and
 section

---
 .../productMaterial/MaterialStyling.tsx       | 24 ++++++++-----------
 .../components/showcase/RealEstateCard.tsx    | 12 ++++++----
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index b26d938a3fb7d8..db719db9b23223 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -19,13 +19,10 @@ const code = `
 <Card
   variant="outlined"
   sx={{
-    p: 1,
-    boxShadow: '0 1px 3px rgba(0, 127, 255, 0.1)',
+    p: 2,
     display: 'flex',
-    flexDirection: {
-      xs: 'column', // mobile
-      sm: 'row', // tablet and up
-    },
+    flexWrap: 'wrap',
+    zIndex: 1,
   }}
 >
   <CardMedia
@@ -33,16 +30,14 @@ const code = `
     width="100"
     height="100"
     alt="123 Main St, Phoenix, AZ cover"
-    src="/static/images/cards/real-estate.png"
+    src="/images/real-estate.png"
     sx={{
-      borderRadius: 0.5,
+      borderRadius: '6px',
       width: { xs: '100%', sm: 100 },
-      mr: { sm: 1.5 },
-      mb: { xs: 1.5, sm: 0 },
     }}
   />
   <Box sx={{ alignSelf: 'center', ml: 2 }}>
-    <Typography variant="body2" color="text.secondary" fontWeight="medium">
+    <Typography variant="body2" color="text.secondary" fontWeight="regular">
       123 Main St, Phoenix, AZ
     </Typography>
     <Typography fontWeight="bold" noWrap>
@@ -55,6 +50,7 @@ const code = `
         pl: 0.5,
         pr: 1,
         typography: 'caption',
+        fontWeight: 'semiBold',
         borderRadius: 10,
         display: 'flex',
         bgcolor: 'primary.50',
@@ -74,9 +70,9 @@ const code = `
   </Box>
 </Card>`;
 
-const startLine = [34, 25, 6];
-const endLine = [48, 30, 8];
-const scrollTo = [540, 320, 0];
+const startLine = [29, 21, 17];
+const endLine = [46, 26, 17];
+const scrollTo = [540, 320, 200];
 
 export const useResizeHandle = (
   target: React.MutableRefObject<HTMLDivElement | null>,
diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx
index 7f89952d59da2e..5bfbb8a2389637 100644
--- a/docs/src/components/showcase/RealEstateCard.tsx
+++ b/docs/src/components/showcase/RealEstateCard.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Card, { CardProps } from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
@@ -12,14 +13,14 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
       {...props}
       sx={[
         (theme) => ({
+          p: 2,
           display: 'flex',
           flexWrap: 'wrap',
-          p: 2,
           zIndex: 1,
-          boxShadow: '0 2px 4px rgba(0, 127, 255, 0.1)',
+          boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
           ...theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
-            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.8)',
+            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
           }),
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -32,13 +33,13 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
         alt="123 Main St, Phoenix, AZ cover"
         src="/static/images/cards/real-estate.png"
         sx={{
-          borderRadius: 0.5,
+          borderRadius: '6px',
           width: 'clamp(100px, (304px - 100%) * 999 , 100%)',
         }}
       />
       <Box sx={{ width: 'clamp(15px, (304px - 100%) * 999 , 100%)', height: 15 }} />
       <Box sx={{ alignSelf: 'center' }}>
-        <Typography variant="caption" color="text.secondary" fontWeight="medium">
+        <Typography variant="caption" color="text.secondary" fontWeight="regular">
           123 Main St, Phoenix, AZ
         </Typography>
         <Typography fontWeight="bold" noWrap>
@@ -51,6 +52,7 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
             pl: 0.5,
             pr: 1,
             typography: 'caption',
+            fontWeight: 'semiBold',
             borderRadius: 10,
             display: 'flex',
             bgcolor: 'primary.50',

From f2d5bdc12fe2a877e40df10ba11ee2c03c6a83f1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 21:41:16 -0300
Subject: [PATCH 03/13] fix highlight container for correct focus-visible style
 display

---
 docs/src/components/productMaterial/MaterialComponents.tsx | 2 +-
 docs/src/components/productMaterial/MaterialStyling.tsx    | 2 +-
 docs/src/components/productMaterial/MaterialTemplates.tsx  | 3 ++-
 docs/src/components/productMaterial/MaterialTheming.tsx    | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 81a7036fac7d60..eb75b26cd0af63 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -151,7 +151,7 @@ export default function MaterialComponents() {
             }
             description="A meticulous implementation of Material Design; every Material UI component meets the highest standards of form and function."
           />
-          <Group desktopColumns={2} sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
+          <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
                 <Item icon={React.cloneElement(icons[name])} title={name} />
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index db719db9b23223..aaed716cd64671 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -176,7 +176,7 @@ export default function MaterialStyling() {
             }
             description="CSS utilities allow you to move faster and make for a smooth developer experience when styling any component."
           />
-          <Group sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
+          <Group sx={{ m: -2, p: 2 }}>
             <Highlighter disableBorder {...getSelectedProps(0)} onClick={() => setIndex(0)}>
               <Item
                 icon={<AutoAwesomeRounded color="warning" />}
diff --git a/docs/src/components/productMaterial/MaterialTemplates.tsx b/docs/src/components/productMaterial/MaterialTemplates.tsx
index e53b1e2144d26a..554a56b69b1620 100644
--- a/docs/src/components/productMaterial/MaterialTemplates.tsx
+++ b/docs/src/components/productMaterial/MaterialTemplates.tsx
@@ -140,7 +140,7 @@ export default function MaterialTemplates() {
         }
         description="A carefully curated collection of gorgeous, fully functional templates, all powered by Material UI."
       />
-      <Group rowLayout desktopColumns={2} sx={{ mt: 3 }}>
+      <Group rowLayout desktopColumns={2} sx={{ p: 2 }}>
         {DEMOS.map((name) => (
           <Highlighter
             key={name}
@@ -153,6 +153,7 @@ export default function MaterialTemplates() {
             <Item
               icon={React.cloneElement(icons[name], name === demo ? { color: 'primary' } : {})}
               title={name}
+              smallerIconDistance
             />
           </Highlighter>
         ))}
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 2ae241552fbb78..4a046002a453f5 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -90,7 +90,7 @@ export default function MaterialTheming() {
             }
             description="Start quickly with Material Design or use the advanced theming feature to easily tailor the components to your needs."
           />
-          <Group sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
+          <Group sx={{ m: -2, p: 2 }}>
             <Highlighter disableBorder selected={customized} onClick={() => setCustomized(true)}>
               <Item
                 icon={<AutoAwesomeRounded color="warning" />}

From 23ccb90950b368b5ecfac758c5fdacb554438312 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 21:41:30 -0300
Subject: [PATCH 04/13] add handy prop on the Item component for better icon
 spacing

---
 docs/src/components/action/Item.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
index 27c7f61eada1e9..4385f5573a84ba 100644
--- a/docs/src/components/action/Item.tsx
+++ b/docs/src/components/action/Item.tsx
@@ -72,14 +72,16 @@ export function Group({
 }
 
 export default function Item({
+  description,
   icon,
   title,
-  description,
+  smallerIconDistance = false,
   ...props
 }: {
+  description?: string;
   icon: React.ReactNode;
   title: string;
-  description?: string;
+  smallerIconDistance?: boolean;
 } & BoxProps) {
   return (
     <Box
@@ -87,12 +89,13 @@ export default function Item({
       component="span"
       sx={{
         p: 2,
+        pr: smallerIconDistance ? 3 : 2,
         display: 'flex',
         alignItems: 'center',
         ...props.sx,
       }}
     >
-      <Box component="span" sx={{ mr: 2, lineHeight: 0 }}>
+      <Box component="span" sx={{ mr: smallerIconDistance ? 1 : 2, lineHeight: 0 }}>
         {icon}
       </Box>
       <Box sx={{ flexWrap: 'wrap' }}>

From 2470d53dcb8f26337f836fc925c9184acbad1441 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 21:50:48 -0300
Subject: [PATCH 05/13] standardizing the Material Design vs. Custom theme
 button design (clean-up)

---
 docs/src/components/action/StylingInfo.tsx    |  3 +-
 docs/src/components/home/CoreShowcase.tsx     |  2 +-
 .../productMaterial/MaterialComponents.tsx    | 60 ++++++++-----------
 3 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index 2ceb1e303da83a..e67cf63941c5ce 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/docs/src/components/action/StylingInfo.tsx
@@ -37,8 +37,7 @@ export default function StylingInfo({
         transition: '0.3s',
         left: 0,
         right: 0,
-        px: 2,
-        pt: 1,
+        p: 2,
         background: ({ palette }) => alpha(palette.common.black, 0.5),
         backdropFilter: 'blur(8px)',
         zIndex: 1,
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index 28bc24fbdba944..b2483ab7abe165 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -190,7 +190,7 @@ export default function CoreShowcase() {
                 code={componentCode}
                 language="jsx"
               />
-              <StylingInfo appeared={customized} sx={{ mb: 0, mx: -2 }} />
+              <StylingInfo appeared={customized} sx={{ mx: -2 }} />
             </Box>
           </Box>
         </div>
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index eb75b26cd0af63..bf1cfa6ad0fae7 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Experimental_CssVarsProvider as CssVarsProvider, styled } from '@mui/material/styles';
+import { Experimental_CssVarsProvider as CssVarsProvider, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
+import Button, { buttonClasses } from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
@@ -36,29 +36,6 @@ import ROUTES from 'docs/src/route';
 
 const DEMOS = ['Button', 'Text field', 'Table', 'Alert', 'Tooltip'] as const;
 
-const StyledButton = styled(Button)(({ theme }) => ({
-  borderRadius: 40,
-  padding: theme.spacing('2px', 1),
-  fontSize: theme.typography.pxToRem(12),
-  lineHeight: 18 / 12,
-  '&.MuiButton-text': {
-    color: theme.palette.grey[500],
-    border: '1px solid',
-    borderColor: theme.palette.primaryDark[700],
-    '&:hover': {
-      backgroundColor: theme.palette.primaryDark[700],
-    },
-  },
-  '&.MuiButton-outlined': {
-    color: '#fff',
-    backgroundColor: theme.palette.primary[800],
-    borderColor: theme.palette.primary[700],
-    '&:hover': {
-      backgroundColor: theme.palette.primary[700],
-    },
-  },
-}));
-
 const CODES = {
   Button: `
   <Button variant="text" startIcon={<ShoppingCartRounded />}>
@@ -310,7 +287,7 @@ export default function MaterialComponents() {
             <Frame.Info
               data-mui-color-scheme="dark"
               sx={{
-                minHeight: 180,
+                minHeight: 220,
                 maxHeight: demo === 'Table' ? 260 : 'none',
                 position: 'relative',
                 overflow: 'hidden',
@@ -318,6 +295,7 @@ export default function MaterialComponents() {
                 pt: 5,
               }}
             >
+              <StylingInfo appeared={customized} />
               <Box
                 sx={{
                   overflow: 'auto',
@@ -339,37 +317,47 @@ export default function MaterialComponents() {
                   pb: 3,
                   display: 'flex',
                   alignItems: 'center',
+                  gap: 1,
                   position: 'absolute',
-                  top: 12,
-                  left: 16,
+                  top: 16,
+                  left: 12,
                   right: 0,
                   zIndex: 10,
                   background: `linear-gradient(to bottom, ${
                     (theme.vars || theme).palette.common.black
                   } 30%, transparent)`,
+                  [`& .${buttonClasses.root}`]: {
+                    borderRadius: 40,
+                    padding: '2px 10px',
+                    fontSize: '0.75rem',
+                    lineHeight: 18 / 12,
+                  },
+                  '& .MuiButton-outlinedPrimary': {
+                    backgroundColor: alpha(theme.palette.primary[900], 0.5),
+                  },
                 })}
               >
-                <StyledButton
+                <Button
                   size="small"
-                  variant={customized ? 'text' : 'outlined'}
+                  variant="outlined"
+                  color={customized ? 'secondary' : 'primary'}
                   onClick={() => {
                     setCustomized(false);
                   }}
                 >
                   Material Design
-                </StyledButton>
-                <StyledButton
+                </Button>
+                <Button
                   size="small"
-                  variant={customized ? 'outlined' : 'text'}
+                  variant="outlined"
+                  color={customized ? 'primary' : 'secondary'}
                   onClick={() => {
                     setCustomized(true);
                   }}
-                  sx={{ ml: 1 }}
                 >
                   Custom theme
-                </StyledButton>
+                </Button>
               </Box>
-              <StylingInfo appeared={customized} />
             </Frame.Info>
           </Frame>
         </Grid>

From c75947df4a720dbf2a3bb9d5ccf957a8ae237d7a Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 21:53:43 -0300
Subject: [PATCH 06/13] small tweaks to the Table demo

---
 docs/src/components/home/MaterialDesignComponents.tsx      | 6 +++---
 docs/src/components/productMaterial/MaterialComponents.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index fcb937b5e75b8d..ead70ff8dc866f 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -453,11 +453,11 @@ export function buildTheme(): ThemeOptions {
       MuiTableHead: {
         styleOverrides: {
           root: ({ theme }) => ({
-            padding: 10,
+            padding: 8,
             backgroundColor: alpha(theme.palette.grey[50], 0.5),
             borderColor: (theme.vars || theme).palette.divider,
             ...theme.applyDarkStyles({
-              backgroundColor: alpha(theme.palette.primaryDark[600], 0.5),
+              backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
             }),
           }),
         },
@@ -465,7 +465,7 @@ export function buildTheme(): ThemeOptions {
       MuiTableCell: {
         styleOverrides: {
           root: ({ theme }) => ({
-            padding: 10,
+            padding: 8,
             borderColor: (theme.vars || theme).palette.divider,
           }),
         },
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index bf1cfa6ad0fae7..3abc1df7a2ad0a 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -187,7 +187,7 @@ export default function MaterialComponents() {
                     sx={{
                       mx: 'auto',
                       my: 4,
-                      maxWidth: 320,
+                      maxWidth: '90%',
                       '& .MuiTableBody-root > .MuiTableRow-root:last-of-type > .MuiTableCell-root':
                         {
                           borderBottomWidth: 0,

From 55b000e2a16d6147697d7496b7a2804dd7949c1e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 21:59:09 -0300
Subject: [PATCH 07/13] fine-tune to the Styling section code highlight

---
 .../productMaterial/MaterialStyling.tsx       | 20 ++++++++++---------
 .../components/showcase/RealEstateCard.tsx    |  6 +++---
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index aaed716cd64671..87107108845660 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded';
+import DevicesOtherRoundedIcon from '@mui/icons-material/DevicesOtherRounded';
+import ContrastRoundedIcon from '@mui/icons-material/ContrastRounded';
+import SwitchAccessShortcutRoundedIcon from '@mui/icons-material/SwitchAccessShortcutRounded';
 import DragHandleRounded from '@mui/icons-material/DragHandleRounded';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -49,12 +51,12 @@ const code = `
         py: 0.4,
         pl: 0.5,
         pr: 1,
+        borderRadius: 12,
+        display: 'flex',
+        border: '1px solid',
         typography: 'caption',
         fontWeight: 'semiBold',
-        borderRadius: 10,
-        display: 'flex',
         bgcolor: 'primary.50',
-        border: '1px solid',
         borderColor: 'primary.100',
         color: 'primary.700',
         ...theme.applyDarkStyles({
@@ -70,8 +72,8 @@ const code = `
   </Box>
 </Card>`;
 
-const startLine = [29, 21, 17];
-const endLine = [46, 26, 17];
+const startLine = [36, 21, 17];
+const endLine = [44, 26, 17];
 const scrollTo = [540, 320, 200];
 
 export const useResizeHandle = (
@@ -179,21 +181,21 @@ export default function MaterialStyling() {
           <Group sx={{ m: -2, p: 2 }}>
             <Highlighter disableBorder {...getSelectedProps(0)} onClick={() => setIndex(0)}>
               <Item
-                icon={<AutoAwesomeRounded color="warning" />}
+                icon={<ContrastRoundedIcon color="primary" />}
                 title="Leverage the tokens from your theme"
                 description="Easily use the design tokens defined in your theme for any CSS property out there."
               />
             </Highlighter>
             <Highlighter disableBorder {...getSelectedProps(1)} onClick={() => setIndex(1)}>
               <Item
-                icon={<AutoAwesomeRounded color="warning" />}
+                icon={<SwitchAccessShortcutRoundedIcon color="primary" />}
                 title="No context switching"
                 description="The styling and component usage are both in the same place, right where you need them."
               />
             </Highlighter>
             <Highlighter disableBorder {...getSelectedProps(2)} onClick={() => setIndex(2)}>
               <Item
-                icon={<AutoAwesomeRounded color="warning" />}
+                icon={<DevicesOtherRoundedIcon color="primary" />}
                 title="Responsive styles right inside system prop"
                 description="An elegant API for writing CSS media queries that match your theme breakpoints."
               />
diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx
index 5bfbb8a2389637..740d6b67544ef4 100644
--- a/docs/src/components/showcase/RealEstateCard.tsx
+++ b/docs/src/components/showcase/RealEstateCard.tsx
@@ -51,12 +51,12 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
             py: 0.4,
             pl: 0.5,
             pr: 1,
+            display: 'flex',
+            borderRadius: 12,
+            border: '1px solid',
             typography: 'caption',
             fontWeight: 'semiBold',
-            borderRadius: 10,
-            display: 'flex',
             bgcolor: 'primary.50',
-            border: '1px solid',
             borderColor: 'primary.100',
             color: 'primary.700',
             ...theme.applyDarkStyles({

From 4e238223fb2b9ccccaf289c87123a02c87dbb297 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 22:08:36 -0300
Subject: [PATCH 08/13] useFlexGap on the hero section Stack components

---
 docs/src/components/productMaterial/MaterialHero.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index 3a4ae3427b5780..ea1bf4a200ead9 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -294,7 +294,7 @@ export default function MaterialHero() {
               },
             }}
           >
-            <Stack spacing={4}>
+            <Stack spacing={4} useFlexGap>
               <div>
                 <Accordion
                   elevation={0}
@@ -395,7 +395,11 @@ export default function MaterialHero() {
                 </List>
               </Paper>
             </Stack>
-            <Stack spacing={4} sx={{ ml: 4, '& > .MuiPaper-root': { maxWidth: 'none' } }}>
+            <Stack
+              spacing={4}
+              useFlexGap
+              sx={{ ml: 4, '& > .MuiPaper-root': { maxWidth: 'none' } }}
+            >
               <Box sx={{ display: 'flex', gap: 2, '& button': { textWrap: 'nowrap' } }}>
                 <Button variant="contained" startIcon={<DownloadIcon fontSize="small" />} fullWidth>
                   Install library
@@ -466,8 +470,7 @@ export default function MaterialHero() {
                   <Typography variant="body2" color="text.secondary">
                     Not just a great valley, but a shrine to human foresight, the strength of
                     granite, the power of glaciers, the persistence of life, and the tranquility of
-                    the High Sierra. It&apos;s famed for its giant, ancient sequoia trees, and the
-                    granite cliffs of El Capitan and Half Dome.
+                    the High Sierra.
                   </Typography>
                 </CardContent>
                 <CardActions disableSpacing>

From baaba0de41a42bf36ec33ec841368dd7153d1fd1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 22:12:07 -0300
Subject: [PATCH 09/13] make the Highlighter's focus state less similar to the
 hover and selected states

---
 docs/src/components/action/Highlighter.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index 727cc54b6fe57f..ec145fb195d633 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -59,13 +59,16 @@ export default function Highlighter({
             color: 'primary.500',
           }),
           ...(!selected && {
-            '&:hover, &:focus': {
+            '&:hover': {
               bgcolor: 'primary.50',
               borderColor: 'primary.100',
               '@media (hover: none)': {
                 bgcolor: 'transparent',
               },
             },
+            '&:focus': {
+              bgcolor: 'transparent',
+            },
           }),
           ...theme.applyDarkStyles({
             color: 'primary.800',
@@ -73,13 +76,16 @@ export default function Highlighter({
               borderColor: alpha(theme.palette.primaryDark[600], 0.3),
             }),
             ...(!selected && {
-              '&:hover, &:focus': {
+              '&:hover': {
                 bgcolor: alpha(theme.palette.primary[900], 0.1),
                 borderColor: alpha(theme.palette.primary[800], 0.4),
                 '@media (hover: none)': {
                   bgcolor: 'transparent',
                 },
               },
+              '&:focus': {
+                bgcolor: 'transparent',
+              },
             }),
             ...(selected && {
               bgcolor: alpha(theme.palette.primary[800], 0.2),

From 00ff7f392bd05703c8a3ffe767a125a226ad5d27 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 12 Feb 2024 22:27:43 -0300
Subject: [PATCH 10/13] fix lint issues

---
 docs/src/components/productMaterial/MaterialTheming.tsx | 2 +-
 docs/src/components/showcase/PlayerCard.tsx             | 8 +-------
 docs/src/components/showcase/RealEstateCard.tsx         | 2 +-
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 4a046002a453f5..01079c893757c9 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -120,7 +120,7 @@ export default function MaterialTheming() {
               }}
             >
               {customized ? (
-                <PlayerCard extraStyles />
+                <PlayerCard />
               ) : (
                 <CssVarsProvider>
                   <PlayerCard disableTheming />
diff --git a/docs/src/components/showcase/PlayerCard.tsx b/docs/src/components/showcase/PlayerCard.tsx
index 726023bd1ef2bd..8183ffe5f0e81a 100644
--- a/docs/src/components/showcase/PlayerCard.tsx
+++ b/docs/src/components/showcase/PlayerCard.tsx
@@ -13,13 +13,7 @@ import PauseRounded from '@mui/icons-material/PauseRounded';
 import ShuffleRoundedIcon from '@mui/icons-material/ShuffleRounded';
 import LoopRoundedIcon from '@mui/icons-material/LoopRounded';
 
-export default function PlayerCard({
-  disableTheming,
-  extraStyles,
-}: {
-  disableTheming?: boolean;
-  extraStyles?: boolean;
-}) {
+export default function PlayerCard({ disableTheming }: { disableTheming?: boolean }) {
   const [paused, setPaused] = React.useState(true);
   return (
     <Fade in timeout={700}>
diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx
index 740d6b67544ef4..694db05be72654 100644
--- a/docs/src/components/showcase/RealEstateCard.tsx
+++ b/docs/src/components/showcase/RealEstateCard.tsx
@@ -17,7 +17,7 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
           display: 'flex',
           flexWrap: 'wrap',
           zIndex: 1,
-          boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
+          boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
           ...theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
             boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',

From e1cb0e1857716bd55848aedf4fa8a925ecb9b4fd Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:33:13 -0300
Subject: [PATCH 11/13] simplify real state card

---
 .../productMaterial/MaterialStyling.tsx       | 39 ++++++++-----------
 .../components/showcase/RealEstateCard.tsx    | 35 +++++++----------
 2 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 87107108845660..c17732c37e088d 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -40,40 +40,33 @@ const code = `
   />
   <Box sx={{ alignSelf: 'center', ml: 2 }}>
     <Typography variant="body2" color="text.secondary" fontWeight="regular">
-      123 Main St, Phoenix, AZ
+      123 Main St, Phoenix, AZ, USA
     </Typography>
-    <Typography fontWeight="bold" noWrap>
+    <Typography fontWeight="bold" noWrap gutterBottom>
       $280k - $310k
     </Typography>
-    <Box
+    <Chip
+      size="small"
+      variant="outlined"
+      icon={<InfoRounded />}
+      label="Confidence score: 85%"
       sx={(theme) => ({
-        mt: 1,
-        py: 0.4,
-        pl: 0.5,
-        pr: 1,
-        borderRadius: 12,
-        display: 'flex',
-        border: '1px solid',
-        typography: 'caption',
-        fontWeight: 'semiBold',
-        bgcolor: 'primary.50',
-        borderColor: 'primary.100',
-        color: 'primary.700',
+        '.MuiChip-icon': { fontSize: 16, ml: '4px', color: 'success.500' },
+        bgcolor: 'success.50',
+        borderColor: 'success.100',
+        color: 'success.900',
         ...theme.applyDarkStyles({
           bgcolor: 'primaryDark.700',
-          color: 'primary.200',
-          borderColor: 'primary.900',
+          color: 'success.200',
+          borderColor: 'success.900',
         }),
       })}
-    >
-      <InfoRounded sx={{ fontSize: 16, mr: 0.5, mt: '1px' }} />
-      Confidence score: 85%
-    </Box>
+    />
   </Box>
 </Card>`;
 
-const startLine = [36, 21, 17];
-const endLine = [44, 26, 17];
+const startLine = [32, 21, 17];
+const endLine = [42, 26, 17];
 const scrollTo = [540, 320, 200];
 
 export const useResizeHandle = (
diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx
index 694db05be72654..569e8d7166f406 100644
--- a/docs/src/components/showcase/RealEstateCard.tsx
+++ b/docs/src/components/showcase/RealEstateCard.tsx
@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 import Card, { CardProps } from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
 import InfoRounded from '@mui/icons-material/InfoRounded';
 
 export default function RealEstateCard({ sx, ...props }: CardProps) {
@@ -40,34 +41,28 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
       <Box sx={{ width: 'clamp(15px, (304px - 100%) * 999 , 100%)', height: 15 }} />
       <Box sx={{ alignSelf: 'center' }}>
         <Typography variant="caption" color="text.secondary" fontWeight="regular">
-          123 Main St, Phoenix, AZ
+          123 Main St, Phoenix, AZ, USA
         </Typography>
-        <Typography fontWeight="bold" noWrap>
+        <Typography fontWeight="bold" noWrap gutterBottom>
           $280k - $310k
         </Typography>
-        <Box
+        <Chip
+          size="small"
+          variant="outlined"
+          icon={<InfoRounded />}
+          label="Confidence score: 85%"
           sx={(theme) => ({
-            mt: 1,
-            py: 0.4,
-            pl: 0.5,
-            pr: 1,
-            display: 'flex',
-            borderRadius: 12,
-            border: '1px solid',
-            typography: 'caption',
-            fontWeight: 'semiBold',
-            bgcolor: 'primary.50',
-            borderColor: 'primary.100',
-            color: 'primary.700',
+            '.MuiChip-icon': { fontSize: 16, ml: '4px', color: 'success.500' },
+            bgcolor: 'success.50',
+            borderColor: 'success.100',
+            color: 'success.900',
             ...theme.applyDarkStyles({
               bgcolor: 'primaryDark.700',
-              color: 'primary.200',
-              borderColor: 'primary.900',
+              color: 'success.200',
+              borderColor: 'success.900',
             }),
           })}
-        >
-          <InfoRounded sx={{ fontSize: 16, mr: 0.5, mt: '1px' }} /> Confidence score: 85%
-        </Box>
+        />
       </Box>
     </Card>
   );

From bd75672956f808f367530ae140f393259463824e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 14 Feb 2024 23:38:58 -0300
Subject: [PATCH 12/13] remove overflow from the Highlighter component

---
 docs/src/components/action/Highlighter.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index ec145fb195d633..1ea42e4b6882cc 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -45,7 +45,6 @@ export default function Highlighter({
           transitionProperty: 'all',
           transitionDuration: '100ms',
           color: 'primary.300',
-          overflow: 'auto',
           ...((!disableBorder || selected) && {
             borderColor: 'grey.100',
           }),

From 1bf64e098d81126673c29064525c2cd09399c1a1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 14 Feb 2024 23:39:19 -0300
Subject: [PATCH 13/13] refine the responsive styles demo

---
 docs/src/components/productMaterial/MaterialStyling.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index c17732c37e088d..48897433cb4dc4 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -251,10 +251,10 @@ export default function MaterialStyling() {
                         width: '1px',
                         bgcolor: 'grey.200',
                         position: 'absolute',
-                        left: 375,
+                        left: { xs: 335, sm: 375 },
                         height: '100%',
                         ...theme.applyDarkStyles({
-                          bgcolor: 'primaryDark.600',
+                          bgcolor: 'divider',
                         }),
                       })}
                     >