From 46e1449db78ef56f48b596848cdc020a61ea4afe Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Fri, 15 Nov 2024 17:40:46 +0530
Subject: [PATCH] pnpm docs:typescript:formatted

---
 .../accordion/ControlledAccordions.js         | 52 ++++++++-----------
 .../accordion/ControlledAccordions.tsx        | 52 ++++++++-----------
 2 files changed, 44 insertions(+), 60 deletions(-)

diff --git a/docs/data/material/components/accordion/ControlledAccordions.js b/docs/data/material/components/accordion/ControlledAccordions.js
index 13abea34b74420..18af1047e3919b 100644
--- a/docs/data/material/components/accordion/ControlledAccordions.js
+++ b/docs/data/material/components/accordion/ControlledAccordions.js
@@ -19,14 +19,12 @@ export default function ControlledAccordions() {
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1bh-content"
           id="panel1bh-header"
-          sx={{
-            justifyContent: 'initial',
-            '& .MuiAccordionSummary-expandIconWrapper': {
-              marginLeft: 'auto',
-            },
-          }}
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             General settings
           </Typography>
           <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
@@ -38,22 +36,17 @@ export default function ControlledAccordions() {
           </Typography>
         </AccordionDetails>
       </Accordion>
-      <Accordion
-        expanded={expanded === 'panel2'}
-        onChange={handleChange('panel2')}
-        sx={{
-          justifyContent: 'initial',
-          '& .MuiAccordionSummary-expandIconWrapper': {
-            marginLeft: 'auto',
-          },
-        }}
-      >
+      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel2bh-content"
           id="panel2bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             Users
           </Typography>
           <Typography sx={{ color: 'text.secondary' }}>
@@ -68,22 +61,17 @@ export default function ControlledAccordions() {
           </Typography>
         </AccordionDetails>
       </Accordion>
-      <Accordion
-        expanded={expanded === 'panel3'}
-        onChange={handleChange('panel3')}
-        sx={{
-          justifyContent: 'initial',
-          '& .MuiAccordionSummary-expandIconWrapper': {
-            marginLeft: 'auto',
-          },
-        }}
-      >
+      <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel3bh-content"
           id="panel3bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             Advanced settings
           </Typography>
           <Typography sx={{ color: 'text.secondary' }}>
@@ -103,7 +91,11 @@ export default function ControlledAccordions() {
           aria-controls="panel4bh-content"
           id="panel4bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             Personal data
           </Typography>
         </AccordionSummary>
diff --git a/docs/data/material/components/accordion/ControlledAccordions.tsx b/docs/data/material/components/accordion/ControlledAccordions.tsx
index c2773224fb05c7..19dc81f147dae4 100644
--- a/docs/data/material/components/accordion/ControlledAccordions.tsx
+++ b/docs/data/material/components/accordion/ControlledAccordions.tsx
@@ -20,14 +20,12 @@ export default function ControlledAccordions() {
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1bh-content"
           id="panel1bh-header"
-          sx={{
-            justifyContent: 'initial',
-            '& .MuiAccordionSummary-expandIconWrapper': {
-              marginLeft: 'auto',
-            },
-          }}
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             General settings
           </Typography>
           <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
@@ -39,22 +37,17 @@ export default function ControlledAccordions() {
           </Typography>
         </AccordionDetails>
       </Accordion>
-      <Accordion
-        expanded={expanded === 'panel2'}
-        onChange={handleChange('panel2')}
-        sx={{
-          justifyContent: 'initial',
-          '& .MuiAccordionSummary-expandIconWrapper': {
-            marginLeft: 'auto',
-          },
-        }}
-      >
+      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel2bh-content"
           id="panel2bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             Users
           </Typography>
           <Typography sx={{ color: 'text.secondary' }}>
@@ -69,22 +62,17 @@ export default function ControlledAccordions() {
           </Typography>
         </AccordionDetails>
       </Accordion>
-      <Accordion
-        expanded={expanded === 'panel3'}
-        onChange={handleChange('panel3')}
-        sx={{
-          justifyContent: 'initial',
-          '& .MuiAccordionSummary-expandIconWrapper': {
-            marginLeft: 'auto',
-          },
-        }}
-      >
+      <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel3bh-content"
           id="panel3bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             Advanced settings
           </Typography>
           <Typography sx={{ color: 'text.secondary' }}>
@@ -104,7 +92,11 @@ export default function ControlledAccordions() {
           aria-controls="panel4bh-content"
           id="panel4bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0, textAlign: 'start' }}>
+          <Typography
+            component="span"
+            align="left"
+            sx={{ width: '33%', flexShrink: 0 }}
+          >
             Personal data
           </Typography>
         </AccordionSummary>