diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
index 9aa53294a34be7..73c984e5efc078 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -155,7 +155,7 @@ const StyledAutocompleteRoot = styled('div')(
   padding-right: 5px;
   overflow: hidden;
   width: 320px;
-  
+
   &.focused {
     border-color: ${blue[400]};
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
@@ -264,7 +264,7 @@ const StyledPopupIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;
@@ -289,7 +289,7 @@ const StyledClearIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
index 1d465838034b49..394748ee3e017d 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -138,7 +138,7 @@ const StyledAutocompleteRoot = styled('div')(
   padding-right: 5px;
   overflow: hidden;
   width: 320px;
-  
+
   &.focused {
     border-color: ${blue[400]};
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
@@ -247,7 +247,7 @@ const StyledPopupIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;
@@ -272,7 +272,7 @@ const StyledClearIndicator = styled(Button)(
     background-color: transparent;
     align-self: center;
     padding: 0 2px;
-    
+
     &:hover {
       background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]};
       cursor: pointer;
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
index f24ea77300da7e..4f4e2399fafeaf 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -53,7 +53,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     transition: all 800ms ease;
     pointer-events: none;
   }
-  
+
   & .bg {
     stroke: var(--main-color);
     stroke-width: 1;
@@ -86,7 +86,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     outline-offset: 2px;
   }
 
-  &.${buttonClasses.active} { 
+  &.${buttonClasses.active} {
     & .bg {
       fill: var(--active-color);
       transition: fill 300ms ease-out;
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
index 6733dee6f7e020..72413739662779 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -54,7 +54,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     transition: all 800ms ease;
     pointer-events: none;
   }
-  
+
   & .bg {
     stroke: var(--main-color);
     stroke-width: 1;
@@ -87,7 +87,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     outline-offset: 2px;
   }
 
-  &.${buttonClasses.active} { 
+  &.${buttonClasses.active} {
     & .bg {
       fill: var(--active-color);
       transition: fill 300ms ease-out;
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
index 1caf7cb2550212..f7cdde1f0fd0be 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
@@ -54,12 +54,11 @@ function Styles() {
       .CustomButton:active:not(.${buttonClasses.disabled}) {
         background-color: ${cyan[700]};
       }
-      
+
       .${buttonClasses.disabled} {
         opacity: 0.5;
         cursor: not-allowed;
-
-
+      }
       `}
     </style>
   );
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
index 1caf7cb2550212..f7cdde1f0fd0be 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
@@ -54,12 +54,11 @@ function Styles() {
       .CustomButton:active:not(.${buttonClasses.disabled}) {
         background-color: ${cyan[700]};
       }
-      
+
       .${buttonClasses.disabled} {
         opacity: 0.5;
         cursor: not-allowed;
-
-
+      }
       `}
     </style>
   );
diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.js b/docs/data/base/components/form-control/BasicFormControl/system/index.js
index 74956e018b87b0..f2b89b5af1061b 100644
--- a/docs/data/base/components/form-control/BasicFormControl/system/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/system/index.js
@@ -16,7 +16,7 @@ export default function BasicFormControl() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
+
   .${inputClasses.input} {
     width: 320px;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
index 3b3d38e15c2cd4..a76d389e9f983c 100644
--- a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
@@ -16,7 +16,7 @@ export default function BasicFormControl() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
+
   .${inputClasses.input} {
     width: 320px;
     font-size: 0.875rem;
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js
index 2710be182fb482..1d15c03b3e2ff4 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.js
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.js
@@ -18,7 +18,6 @@ export default function FormControlFunctionChild() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
   display: inline-block;
 
   .${inputClasses.input} {
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
index 0ec778fa20ae5a..2ec9f57b26b993 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.tsx
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
@@ -18,7 +18,6 @@ export default function FormControlFunctionChild() {
 
 const StyledInput = styled(Input)(
   ({ theme }) => `
-  
   display: inline-block;
 
   .${inputClasses.input} {
diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.js b/docs/data/base/components/input/UnstyledInputBasic/css/index.js
index f115837b61c88c..a64877d635bed1 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/css/index.js
+++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.js
@@ -65,16 +65,16 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         }
-      
+
         &:focus-visible {
           outline: 0;
         }
diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
index f115837b61c88c..a64877d635bed1 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
@@ -65,16 +65,16 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         }
-      
+
         &:focus-visible {
           outline: 0;
         }
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
index ddf9d9f8f09a9b..7db613fae34b34 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
@@ -65,11 +65,11 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
index ddf9d9f8f09a9b..7db613fae34b34 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
@@ -65,11 +65,11 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
-      
+
         &:hover {
           border-color: ${cyan[400]};
         }
-      
+
         &:focus {
           border-color: ${cyan[400]};
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
diff --git a/docs/data/base/components/menu/MenuSimple/css/index.js b/docs/data/base/components/menu/MenuSimple/css/index.js
index 817e9ec525430f..0c5e3c2730567f 100644
--- a/docs/data/base/components/menu/MenuSimple/css/index.js
+++ b/docs/data/base/components/menu/MenuSimple/css/index.js
@@ -140,7 +140,6 @@ function Styles() {
       cursor: pointer;
       border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
       color: ${isDarkMode ? cyan[300] : cyan[400]};
-    
       transition-property: all;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 120ms;
@@ -150,7 +149,7 @@ function Styles() {
       background: ${isDarkMode ? grey[800] : grey[50]};
       border-color: ${isDarkMode ? grey[600] : grey[300]};
     }
-  
+
     .TriggerButton:focus-visible {
       border-color: ${cyan[400]};
       outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
diff --git a/docs/data/base/components/menu/MenuSimple/css/index.tsx b/docs/data/base/components/menu/MenuSimple/css/index.tsx
index 7941a093d09e0a..90749a10a77fd2 100644
--- a/docs/data/base/components/menu/MenuSimple/css/index.tsx
+++ b/docs/data/base/components/menu/MenuSimple/css/index.tsx
@@ -140,7 +140,6 @@ function Styles() {
       cursor: pointer;
       border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
       color: ${isDarkMode ? cyan[300] : cyan[400]};
-    
       transition-property: all;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 120ms;
@@ -150,7 +149,7 @@ function Styles() {
       background: ${isDarkMode ? grey[800] : grey[50]};
       border-color: ${isDarkMode ? grey[600] : grey[300]};
     }
-  
+
     .TriggerButton:focus-visible {
       border-color: ${cyan[400]};
       outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 1120423f829f3e..2053fb5680b27c 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -188,16 +188,15 @@ const styles = `
     border: 1px solid ${grey[200]};
     color: ${grey[900]};
     cursor: pointer;
-  
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
-  
+
     &:hover {
       background: ${grey[50]};
       border-color: ${grey[300]};
     }
-  
+
     &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${blue[200]};
diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index a512bc2d2bab3e..129b7b2615f71b 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -187,16 +187,15 @@ const styles = `
     border: 1px solid ${grey[200]};
     color: ${grey[900]};
     cursor: pointer;
-  
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
-  
+
     &:hover {
       background: ${grey[50]};
       border-color: ${grey[300]};
     }
-  
+
     &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${blue[200]};
diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.js b/docs/data/base/components/number-input/NumberInputBasic/system/index.js
index b5920b72210369..2a708e438c961e 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/system/index.js
+++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.js
@@ -126,7 +126,6 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -141,7 +140,7 @@ const StyledButton = styled('button')(
     grid-column: 2/3;
     grid-row: 1/2;
   }
-  
+
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
index 0c6d88aa426446..57e0b14b9cbf23 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
@@ -130,7 +130,6 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -145,7 +144,7 @@ const StyledButton = styled('button')(
     grid-column: 2/3;
     grid-row: 1/2;
   }
-  
+
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction.js
index d0518191dbbbd2..08b7d982256a42 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction.js
+++ b/docs/data/base/components/number-input/NumberInputIntroduction.js
@@ -121,7 +121,6 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -136,7 +135,7 @@ const StyledButton = styled('button')(
     grid-column: 2/3;
     grid-row: 1/2;
   }
-  
+
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx b/docs/data/base/components/number-input/NumberInputIntroduction.tsx
index fbab0df46eda37..41c83fc1a34bbe 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction.tsx
+++ b/docs/data/base/components/number-input/NumberInputIntroduction.tsx
@@ -125,7 +125,6 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -140,7 +139,7 @@ const StyledButton = styled('button')(
     grid-column: 2/3;
     grid-row: 1/2;
   }
-  
+
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
diff --git a/docs/data/base/components/number-input/QuantityInput/system/index.js b/docs/data/base/components/number-input/QuantityInput/system/index.js
index bb48c57411a7a8..d6e947347003a6 100644
--- a/docs/data/base/components/number-input/QuantityInput/system/index.js
+++ b/docs/data/base/components/number-input/QuantityInput/system/index.js
@@ -60,7 +60,6 @@ const StyledInputRoot = styled('div')(
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 400;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
-  
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
@@ -110,14 +109,12 @@ const StyledButton = styled('button')(
   border-radius: 999px;
   color: ${theme.palette.mode === 'dark' ? blue[300] : blue[600]};
   background: transparent;
-
   width: 40px;
   height: 40px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
diff --git a/docs/data/base/components/number-input/QuantityInput/system/index.tsx b/docs/data/base/components/number-input/QuantityInput/system/index.tsx
index 4cd346988c5225..a9ef7fcfa7dc1b 100644
--- a/docs/data/base/components/number-input/QuantityInput/system/index.tsx
+++ b/docs/data/base/components/number-input/QuantityInput/system/index.tsx
@@ -66,7 +66,6 @@ const StyledInputRoot = styled('div')(
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 400;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
-  
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
@@ -116,14 +115,12 @@ const StyledButton = styled('button')(
   border-radius: 999px;
   color: ${theme.palette.mode === 'dark' ? blue[300] : blue[600]};
   background: transparent;
-
   width: 40px;
   height: 40px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
index 2139fc1f221472..707d9c7aa48701 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
@@ -66,7 +66,6 @@ function Styles() {
   const isDarkMode = useIsDarkMode();
   return (
     <style>{`
-
       .Button {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
@@ -79,12 +78,12 @@ function Styles() {
         cursor: pointer;
         border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
         color: ${isDarkMode ? cyan[300] : cyan[400]};
-  
+
         &:hover {
           background: ${isDarkMode ? grey[900] : grey[100]};
           border-color: ${isDarkMode ? cyan[200] : cyan[400]};
         }
-  
+
         &:focus-visible {
           border-color: ${cyan[400]};
           outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
index 63b79bf8aa832e..c3a2a6185b27f2 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
@@ -66,7 +66,6 @@ function Styles() {
   const isDarkMode = useIsDarkMode();
   return (
     <style>{`
-
       .Button {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
@@ -79,12 +78,12 @@ function Styles() {
         cursor: pointer;
         border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
         color: ${isDarkMode ? cyan[300] : cyan[400]};
-  
+
         &:hover {
           background: ${isDarkMode ? grey[900] : grey[100]};
           border-color: ${isDarkMode ? cyan[200] : cyan[400]};
         }
-  
+
         &:focus-visible {
           border-color: ${cyan[400]};
           outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
index eb394e49df05b0..3fbf1db5b3fccb 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
@@ -63,12 +63,12 @@ const TriggerButton = styled('button')(
     cursor: pointer;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
-  
+
     &:hover {
       background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
       border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
     }
-  
+
     &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
index 38799287b29ab3..37a35f36bc2d07 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
@@ -63,12 +63,12 @@ const TriggerButton = styled('button')(
     cursor: pointer;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
-  
+
     &:hover {
       background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
       border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
     }
-  
+
     &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
index 0d5cb69ab7526c..d36863ed24ddae 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
@@ -62,40 +62,38 @@ function Styles() {
   // Replace this with your app logic for determining dark mode
   const isDarkMode = useIsDarkMode();
   return (
-    <style>{`  
+    <style>{`
         .Button {
-            font-family: IBM Plex Sans,sans-serif;
-            font-weight: 600;
-            font-size: 0.875rem;
-            line-height: 1.5;
-            background-color: ${cyan[500]};
-            padding: 8px 16px;
-            border-radius: 8px;
-            color: white;
-            cursor: pointer;
-            border: none;
-      
-            &:hover {
-                background-color: ${cyan[600]};
-            }
+          font-family: IBM Plex Sans,sans-serif;
+          font-weight: 600;
+          font-size: 0.875rem;
+          line-height: 1.5;
+          background-color: ${cyan[500]};
+          padding: 8px 16px;
+          border-radius: 8px;
+          color: white;
+          cursor: pointer;
+          border: none;
+
+          &:hover {
+            background-color: ${cyan[600]};
           }
-  
+        }
+
         .CustomPopup{
-            background-color: ${isDarkMode ? grey[900] : grey[50]};
-            border-radius: 8px;
-            border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-            box-shadow: ${
-              isDarkMode
-                ? `0 4px 8px rgb(0 0 0 / 0.7)`
-                : `0 4px 8px rgb(0 0 0 / 0.1)`
-            };
-            padding: 0.75rem;
-            color: ${isDarkMode ? cyan[100] : cyan[700]};
-            font-size: 0.875rem;
-            font-family: 'IBM Plex Sans', sans-serif;
-            font-weight: 500;
-            opacity: 1;
-            margin: 0.5rem 0px;
+          background-color: ${isDarkMode ? grey[900] : grey[50]};
+          border-radius: 8px;
+          border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+          box-shadow: ${
+            isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
+          };
+          padding: 0.75rem;
+          color: ${isDarkMode ? cyan[100] : cyan[700]};
+          font-size: 0.875rem;
+          font-family: 'IBM Plex Sans', sans-serif;
+          font-weight: 500;
+          opacity: 1;
+          margin: 0.5rem 0px;
         }
     `}</style>
   );
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
index afaeb697b58c9f..be870592eddfaf 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
@@ -62,40 +62,38 @@ function Styles() {
   // Replace this with your app logic for determining dark mode
   const isDarkMode = useIsDarkMode();
   return (
-    <style>{`  
+    <style>{`
         .Button {
-            font-family: IBM Plex Sans,sans-serif;
-            font-weight: 600;
-            font-size: 0.875rem;
-            line-height: 1.5;
-            background-color: ${cyan[500]};
-            padding: 8px 16px;
-            border-radius: 8px;
-            color: white;
-            cursor: pointer;
-            border: none;
-      
-            &:hover {
-                background-color: ${cyan[600]};
-            }
+          font-family: IBM Plex Sans,sans-serif;
+          font-weight: 600;
+          font-size: 0.875rem;
+          line-height: 1.5;
+          background-color: ${cyan[500]};
+          padding: 8px 16px;
+          border-radius: 8px;
+          color: white;
+          cursor: pointer;
+          border: none;
+
+          &:hover {
+            background-color: ${cyan[600]};
           }
-  
+        }
+
         .CustomPopup{
-            background-color: ${isDarkMode ? grey[900] : grey[50]};
-            border-radius: 8px;
-            border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-            box-shadow: ${
-              isDarkMode
-                ? `0 4px 8px rgb(0 0 0 / 0.7)`
-                : `0 4px 8px rgb(0 0 0 / 0.1)`
-            };
-            padding: 0.75rem;
-            color: ${isDarkMode ? cyan[100] : cyan[700]};
-            font-size: 0.875rem;
-            font-family: 'IBM Plex Sans', sans-serif;
-            font-weight: 500;
-            opacity: 1;
-            margin: 0.5rem 0px;
+          background-color: ${isDarkMode ? grey[900] : grey[50]};
+          border-radius: 8px;
+          border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+          box-shadow: ${
+            isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
+          };
+          padding: 0.75rem;
+          color: ${isDarkMode ? cyan[100] : cyan[700]};
+          font-size: 0.875rem;
+          font-family: 'IBM Plex Sans', sans-serif;
+          font-weight: 500;
+          opacity: 1;
+          margin: 0.5rem 0px;
         }
     `}</style>
   );
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
index c85a1bacb30954..16f99ef827b9ae 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
@@ -101,9 +101,6 @@ function Styles() {
         color: ${isDarkMode ? grey[300] : grey[900]};
         position: relative;
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
-
-
-
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -118,7 +115,6 @@ function Styles() {
           outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
         }
 
-        
         & > svg {
           font-size: 1rem;
           position: absolute;
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
index 00c6ae2d818f05..f67e0106e645ab 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
@@ -101,9 +101,6 @@ function Styles() {
         color: ${isDarkMode ? grey[300] : grey[900]};
         position: relative;
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
-
-
-
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -118,7 +115,6 @@ function Styles() {
           outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
         }
 
-        
         & > svg {
           font-size: 1rem;
           position: absolute;
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
index eec5c0e0c3291a..bb36790e37b6ec 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
@@ -77,7 +77,7 @@ function Styles() {
       from {
         transform: translateX(100%);
       }
-    
+
       to {
         transform: translateX(0);
       }
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
index eec5c0e0c3291a..bb36790e37b6ec 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
@@ -77,7 +77,7 @@ function Styles() {
       from {
         transform: translateX(100%);
       }
-    
+
       to {
         transform: translateX(0);
       }
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
index 79f7b301d975af..f78872f16b33bf 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
@@ -137,7 +137,7 @@ function Styles() {
       from {
         transform: translateX(100%);
       }
-    
+
       to {
         transform: translateX(0);
       }
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
index 547ae8229d9ba8..b7828d6d12f200 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
@@ -138,7 +138,7 @@ function Styles() {
       from {
         transform: translateX(100%);
       }
-    
+
       to {
         transform: translateX(0);
       }
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
index 47b8a3082e0ff0..bb919c7d2e33ad 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
@@ -112,7 +112,6 @@ function Styles() {
         border-radius: 16px;
         background-color: #fff;
         position: relative;
-        
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -150,7 +149,7 @@ function Styles() {
         z-index: 1;
         margin: 0;
       }
-    
+
     `}
     </style>
   );
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
index 47b8a3082e0ff0..bb919c7d2e33ad 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
@@ -112,7 +112,6 @@ function Styles() {
         border-radius: 16px;
         background-color: #fff;
         position: relative;
-        
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -150,7 +149,7 @@ function Styles() {
         z-index: 1;
         margin: 0;
       }
-    
+
     `}
     </style>
   );
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
index b8e5ab6425583e..331b17a4a60c57 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -81,7 +81,6 @@ const Root = styled('span')(
     border-radius: 16px;
     background-color: #fff;
     position: relative;
-    
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
index b8e5ab6425583e..331b17a4a60c57 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -81,7 +81,6 @@ const Root = styled('span')(
     border-radius: 16px;
     background-color: #fff;
     position: relative;
-    
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js
index 38edba2147b0c4..23c54478e38776 100644
--- a/docs/data/base/components/switch/UnstyledSwitches.js
+++ b/docs/data/base/components/switch/UnstyledSwitches.js
@@ -81,7 +81,6 @@ const Root = styled('span')(
     border-radius: 16px;
     background-color: #fff;
     position: relative;
-    
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx
index 38edba2147b0c4..23c54478e38776 100644
--- a/docs/data/base/components/switch/UnstyledSwitches.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitches.tsx
@@ -81,7 +81,6 @@ const Root = styled('span')(
     border-radius: 16px;
     background-color: #fff;
     position: relative;
-    
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
diff --git a/docs/data/base/components/table-pagination/TableCustomized/css/index.js b/docs/data/base/components/table-pagination/TableCustomized/css/index.js
index 01d52b207f299a..9c4d968a0688d6 100644
--- a/docs/data/base/components/table-pagination/TableCustomized/css/index.js
+++ b/docs/data/base/components/table-pagination/TableCustomized/css/index.js
@@ -164,7 +164,7 @@ function Styles() {
       .TablePaginationDemo th {
         background-color: ${isDarkMode ? cyan[800] : cyan[50]};
       }
-      
+
       .CustomTablePagination .${classes.spacer} {
         display: none;
       }
diff --git a/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx b/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx
index c3f9fae825ca22..c924d1d72ffb2a 100644
--- a/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx
+++ b/docs/data/base/components/table-pagination/TableCustomized/css/index.tsx
@@ -169,7 +169,7 @@ function Styles() {
       .TablePaginationDemo th {
         background-color: ${isDarkMode ? cyan[800] : cyan[50]};
       }
-      
+
       .CustomTablePagination .${classes.spacer} {
         display: none;
       }
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js
index b11fa85653c4a4..b576613dc8e31b 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.js
@@ -93,10 +93,12 @@ function Styles() {
       .TablePaginationIntroductionDemo {
         width: 500px;
         max-width: 100%;
-      }  
+      }
+
       th {
         background-color: ${isDarkMode ? grey[900] : '#fff'};
       }
+
       .TablePaginationIntroductionDemo table {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
@@ -116,7 +118,7 @@ function Styles() {
       .TablePaginationIntroductionDemo th {
         background-color: ${isDarkMode ? grey[900] : '#fff'};
       }
-      
+
       .CustomTablePagination .${classes.spacer} {
         display: none;
       }
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx
index 658aa2b87d49a8..43b582907026ed 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction/css/index.tsx
@@ -98,10 +98,12 @@ function Styles() {
       .TablePaginationIntroductionDemo {
         width: 500px;
         max-width: 100%;
-      }  
+      }
+
       th {
         background-color: ${isDarkMode ? grey[900] : '#fff'};
       }
+
       .TablePaginationIntroductionDemo table {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
@@ -121,7 +123,7 @@ function Styles() {
       .TablePaginationIntroductionDemo th {
         background-color: ${isDarkMode ? grey[900] : '#fff'};
       }
-      
+
       .CustomTablePagination .${classes.spacer} {
         display: none;
       }
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.js b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
index 1b69b87b439a68..48d27659bfde96 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.js
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
@@ -38,16 +38,16 @@ export default function EmptyTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
index 1b69b87b439a68..48d27659bfde96 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
@@ -38,16 +38,16 @@ export default function EmptyTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
index 4a851b38eae588..01b8b5dee5199e 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
@@ -38,16 +38,16 @@ export default function MaxHeightTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
index 4a851b38eae588..01b8b5dee5199e 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
@@ -38,16 +38,16 @@ export default function MaxHeightTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
index abb9bb169098f4..1324d251d63b04 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
@@ -38,16 +38,16 @@ export default function MinHeightTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
index abb9bb169098f4..1324d251d63b04 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
@@ -38,16 +38,16 @@ export default function MinHeightTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
index ad68709ff1f1b2..8f6344393c8e47 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
@@ -75,10 +75,10 @@ function Styles() {
         box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         outline: none;
       }
-      
+
       // firefox
       .CustomTextarea:focus-visible {
-      outline: 0;
+        outline: 0;
       }
     `}
     </style>
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
index ad68709ff1f1b2..8f6344393c8e47 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
@@ -75,10 +75,10 @@ function Styles() {
         box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         outline: none;
       }
-      
+
       // firefox
       .CustomTextarea:focus-visible {
-      outline: 0;
+        outline: 0;
       }
     `}
     </style>
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
index e26d0f61e51de2..ae355fd760a508 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
@@ -38,16 +38,16 @@ export default function EmptyTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
index e26d0f61e51de2..ae355fd760a508 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
@@ -38,16 +38,16 @@ export default function EmptyTextarea() {
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  
+
     &:hover {
       border-color: ${blue[400]};
     }
-  
+
     &:focus {
       border-color: ${blue[400]};
       box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
     }
-  
+
     // firefox
     &:focus-visible {
       outline: 0;
diff --git a/docs/data/material/components/material-icons/material-icons-pt.md b/docs/data/material/components/material-icons/material-icons-pt.md
index 7aa84683f9e623..ce3156b026d3e1 100644
--- a/docs/data/material/components/material-icons/material-icons-pt.md
+++ b/docs/data/material/components/material-icons/material-icons-pt.md
@@ -15,7 +15,7 @@ O pacote npm, [@mui/icons-material](https://www.npmjs.com/package/@mui/icons-mat
 :::info
 The `@mui/icons-material` package depends on `@mui/material`, which requires Emotion packages.
 
-If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`.  
+If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`.
 See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.
 :::
 
diff --git a/docs/data/material/components/material-icons/material-icons-zh.md b/docs/data/material/components/material-icons/material-icons-zh.md
index ad8519706fffc8..1c6ff7930028a5 100644
--- a/docs/data/material/components/material-icons/material-icons-zh.md
+++ b/docs/data/material/components/material-icons/material-icons-zh.md
@@ -15,7 +15,7 @@ The following npm package, [@mui/icons-material](https://www.npmjs.com/package/@
 :::info
 The `@mui/icons-material` package depends on `@mui/material`, which requires Emotion packages.
 
-If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`.  
+If you don't use Material UI in your project yet, install the icons package with `npm install @mui/icons-material @mui/material @emotion/styled @emotion/react`.
 See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.
 :::
 
diff --git a/docs/data/material/guides/interoperability/interoperability-pt.md b/docs/data/material/guides/interoperability/interoperability-pt.md
index b7049cf7b744a3..6c93cf1de96afa 100644
--- a/docs/data/material/guides/interoperability/interoperability-pt.md
+++ b/docs/data/material/guides/interoperability/interoperability-pt.md
@@ -861,6 +861,6 @@ There is [an ESLint plugin](https://docs.tss-react.dev/detecting-unused-classes)
 :::
 
 :::warning
-For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default.  
+For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default.
 Material UI and TSS use Emotion 11, so you must make [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32) to `.storybook/main.js` in order to use Storybook with Material UI.
 :::
diff --git a/docs/data/material/guides/interoperability/interoperability-zh.md b/docs/data/material/guides/interoperability/interoperability-zh.md
index 74d8dccb415c6d..2e4a50485eb227 100644
--- a/docs/data/material/guides/interoperability/interoperability-zh.md
+++ b/docs/data/material/guides/interoperability/interoperability-zh.md
@@ -855,6 +855,6 @@ There is [an ESLint plugin](https://docs.tss-react.dev/detecting-unused-classes)
 :::
 
 :::warning
-For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default.  
+For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default.
 Material UI and TSS use Emotion 11, so you must make [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32) to `.storybook/main.js` in order to use Storybook with Material UI.
 :::
diff --git a/docs/pages/experiments/base/listbox.tsx b/docs/pages/experiments/base/listbox.tsx
index acdb62766465c4..fbdfc67412e677 100644
--- a/docs/pages/experiments/base/listbox.tsx
+++ b/docs/pages/experiments/base/listbox.tsx
@@ -27,7 +27,7 @@ const styles = `
   .list:focus-visible {
     outline: none;
   }
-  
+
   .item {
     width: 50px;
     height: 50px;
diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
index dc6785b06694f5..1de1bb4a9a5099 100644
--- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -505,7 +505,6 @@ const StyledSwitch = styled('span')(`
     border-radius: max(2px, var(--border-radius));
     background-color: #fff;
     position: relative;
-    
     transition-property: left;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
@@ -625,7 +624,7 @@ const StyledBadge = styled(Badge)(
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;
   position: relative;
-  display: inline-block;  
+  display: inline-block;
 
   & .${badgeClasses.badge} {
     --_scale: 1.5em;
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index e2d5a1afd97f2a..b651e77e429d3e 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -68,7 +68,7 @@ const CODES = {
   Add item
 </Button>
 <Button variant="outlined" startIcon={<ShoppingCartRounded />}>
-  Add item  
+  Add item
 </Button>
 `,
   'Text field': `
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
index e99209473b0552..51da85ac1ac359 100644
--- a/docs/src/modules/components/JoyThemeBuilder.tsx
+++ b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -349,7 +349,7 @@ const theme = extendTheme(${JSON.stringify(
     (k, v) => (v === undefined ? '__undefined' : v),
     2,
   ).replace(/"__undefined"/g, 'undefined')})
-  
+
 export default theme;`;
 
 function getPaletteFormProps(colorSchemes: any, colorMode: string, node: string) {
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index a0974408418a53..af9fa127fda8a0 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -38,7 +38,7 @@ const progressKeyframe = keyframes`
   75% {
     width: var(--LinearProgress-progressMaxWidth);
   }
-  
+
   100% {
     left: var(--_LinearProgress-progressInset);
     width: var(--LinearProgress-progressMinWidth);