mui · Janpot · Feb 7, 2024 · Jan 24, 2024 · Jan 24, 2024 · Jan 24, 2024
diff --git a/apps/zero-runtime-next-app/src/app/page.module.css b/apps/zero-runtime-next-app/src/app/page.module.css
@@ -15,7 +15,9 @@
   border-radius: var(--border-radius);
   background: rgba(var(--card-rgb), 0);
   border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
+  transition:
+    background 200ms,
+    border 200ms;
 }
 
 .card span {

diff --git a/apps/zero-runtime-vite-app/src/App.tsx b/apps/zero-runtime-vite-app/src/App.tsx
@@ -13,13 +13,16 @@ const ShowCaseDiv = styled('div')({
 });
 
 const atomics = generateAtomics(({ theme }) => ({
-  conditions: Object.entries(theme.breakpoints.values).reduce((acc, [key, value]) => {
-    if (key === 'xs') {
+  conditions: Object.entries(theme.breakpoints.values).reduce(
+    (acc, [key, value]) => {
+      if (key === 'xs') {
+        return acc;
+      }
+      acc[key as Breakpoint] = theme.breakpoints.up(value);
       return acc;
-    }
-    acc[key as Breakpoint] = theme.breakpoints.up(value);
-    return acc;
-  }, {} as Record<Breakpoint, string>),
+    },
+    {} as Record<Breakpoint, string>,
+  ),
   defaultCondition: 'sm',
   properties: {
     display: ['none', 'flex', 'block', 'grid', 'inline-flex', 'inline-block'],

diff --git a/benchmark/browser/index.html b/benchmark/browser/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/docs/data/base/getting-started/accessibility/ColorContrast.js b/docs/data/base/getting-started/accessibility/ColorContrast.js
@@ -40,7 +40,9 @@ const Button = styled(BaseButton)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow:
+      0 4px 20px 0 rgb(61 71 82 / 0.1),
+      0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 
@@ -72,7 +74,9 @@ const PoorContrastButton = styled(BaseButton)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow:
+      0 4px 20px 0 rgb(61 71 82 / 0.1),
+      0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/base/getting-started/accessibility/ColorContrast.tsx b/docs/data/base/getting-started/accessibility/ColorContrast.tsx
@@ -40,7 +40,9 @@ const Button = styled(BaseButton)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow:
+      0 4px 20px 0 rgb(61 71 82 / 0.1),
+      0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 
@@ -72,7 +74,9 @@ const PoorContrastButton = styled(BaseButton)`
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow:
+      0 4px 20px 0 rgb(61 71 82 / 0.1),
+      0 0 0 5px rgb(0 127 255 / 0.5);
     outline: none;
   }
 

diff --git a/docs/data/joy/components/input/InputReactNumberFormat.js b/docs/data/joy/components/input/InputReactNumberFormat.js
@@ -5,30 +5,29 @@ import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import Input from '@mui/joy/Input';
 
-const NumericFormatAdapter = React.forwardRef(function NumericFormatAdapter(
-  props,
-  ref,
-) {
-  const { onChange, ...other } = props;
+const NumericFormatAdapter = React.forwardRef(
+  function NumericFormatAdapter(props, ref) {
+    const { onChange, ...other } = props;
 
-  return (
-    <NumericFormat
-      {...other}
-      getInputRef={ref}
-      onValueChange={(values) => {
-        onChange({
-          target: {
-            name: props.name,
-            value: values.value,
-          },
-        });
-      }}
-      thousandSeparator
-      valueIsNumericString
-      prefix="$"
-    />
-  );
-});
+    return (
+      <NumericFormat
+        {...other}
+        getInputRef={ref}
+        onValueChange={(values) => {
+          onChange({
+            target: {
+              name: props.name,
+              value: values.value,
+            },
+          });
+        }}
+        thousandSeparator
+        valueIsNumericString
+        prefix="$"
+      />
+    );
+  },
+);
 
 NumericFormatAdapter.propTypes = {
   name: PropTypes.string.isRequired,

diff --git a/docs/data/joy/components/menu/MenuUsage.js b/docs/data/joy/components/menu/MenuUsage.js
@@ -56,16 +56,16 @@ export default function MenuUsage() {
     variant="${props.menuButtonVariant}"`
       : ''
   }${
-          props.color !== 'neutral'
-            ? `
+    props.color !== 'neutral'
+      ? `
     color="${props.color}"`
-            : ''
-        }${
-          props.size !== 'md'
-            ? `
+      : ''
+  }${
+    props.size !== 'md'
+      ? `
     size="${props.size}"`
-            : ''
-        }>
+      : ''
+  }>
     Format
   </MenuButton>
   <Menu${
@@ -74,21 +74,21 @@ export default function MenuUsage() {
     invertedColors`
       : ''
   }${
-          props.menuVariant !== 'outlined'
-            ? `
+    props.menuVariant !== 'outlined'
+      ? `
     variant="${props.menuVariant}"`
-            : ''
-        }${
-          props.color !== 'neutral'
-            ? `
+      : ''
+  }${
+    props.color !== 'neutral'
+      ? `
     color="${props.color}"`
-            : ''
-        }${
-          props.size !== 'md'
-            ? `
+      : ''
+  }${
+    props.size !== 'md'
+      ? `
     size="${props.size}"`
-            : ''
-        }>
+      : ''
+  }>
     <MenuItem>…</MenuItem>
     …
   </Menu>

diff --git a/docs/data/joy/components/stepper/StepperUsage.js b/docs/data/joy/components/stepper/StepperUsage.js
@@ -39,15 +39,15 @@ export default function StepperUsage() {
         props.orientation === 'vertical' ? ' orientation="vertical"' : ''
       }>
   <Step${props.stepOrientation === 'vertical' ? ` orientation="vertical"` : ''}${
-        props.indicator
-          ? `
+    props.indicator
+      ? `
     indicator={
       <StepIndicator variant="solid" color="primary">
         <Check />
       </StepIndicator>
     }\n  `
-          : ''
-      }>First</Step>
+      : ''
+  }>First</Step>
   ...
 </Stepper>`}
       renderDemo={({ stepperOrientation, stepOrientation, size, indicator }) => (

diff --git a/docs/data/joy/components/tabs/TabsUsage.js b/docs/data/joy/components/tabs/TabsUsage.js
@@ -75,21 +75,21 @@ export default function TabsUsage() {
       variant="${props.variant}"`
         : ''
     }${
-            props.color
-              ? `
+      props.color
+        ? `
       color="${props.color}"`
-              : ''
-          }${
-            props.disableIndicator
-              ? `
+        : ''
+    }${
+      props.disableIndicator
+        ? `
       disableIndicator`
-              : ''
-          }${
-            props.indicatorInset
-              ? `
+        : ''
+    }${
+      props.indicatorInset
+        ? `
       indicatorInset`
-              : ''
-          }>...</Tab>
+        : ''
+    }>...</Tab>
   </TabList>
   <TabPanel>...</TabPanel>`,
         )

diff --git a/docs/data/joy/customization/creating-themed-components/StatFullTemplate.tsx b/docs/data/joy/customization/creating-themed-components/StatFullTemplate.tsx
@@ -45,22 +45,21 @@ const StatUnit = styled('div', {
   color: theme.vars.palette.text.tertiary,
 }));
 
-const Stat = React.forwardRef<HTMLDivElement, StatProps>(function Stat(
-  inProps,
-  ref,
-) {
-  const props = useThemeProps({ props: inProps, name: 'JoyStat' });
-  const { value, unit, variant, ...other } = props;
+const Stat = React.forwardRef<HTMLDivElement, StatProps>(
+  function Stat(inProps, ref) {
+    const props = useThemeProps({ props: inProps, name: 'JoyStat' });
+    const { value, unit, variant, ...other } = props;
 
-  const ownerState = { ...props, variant };
+    const ownerState = { ...props, variant };
 
-  return (
-    <StatRoot ref={ref} ownerState={ownerState} {...other}>
-      <StatValue ownerState={ownerState}>{value}</StatValue>
-      <StatUnit ownerState={ownerState}>{unit}</StatUnit>
-    </StatRoot>
-  );
-});
+    return (
+      <StatRoot ref={ref} ownerState={ownerState} {...other}>
+        <StatValue ownerState={ownerState}>{value}</StatValue>
+        <StatUnit ownerState={ownerState}>{unit}</StatUnit>
+      </StatRoot>
+    );
+  },
+);
 
 export default function StatFullTemplate() {
   return (

diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx
@@ -48,13 +48,9 @@ export default function ShadowThemeViewer() {
     React.Children.toArray(
       shadow
         .split(', ')
-        .reduce<Array<React.ReactNode>>(
-          (result, curr, index, array) =>
-            array.length - 1 !== index
-              ? [...result, `${curr},`, <br />]
-              : [...result, curr],
-          [],
-        ),
+        .reduce<
+          Array<React.ReactNode>
+        >((result, curr, index, array) => (array.length - 1 !== index ? [...result, `${curr},`, <br />] : [...result, curr]), []),
     );
   return (
     <Box sx={{ width: '100%', overflow: 'hidden', position: 'relative' }}>

diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
@@ -29,30 +29,29 @@ TextMaskCustom.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(
-  props,
-  ref,
-) {
-  const { onChange, ...other } = props;
+const NumericFormatCustom = React.forwardRef(
+  function NumericFormatCustom(props, ref) {
+    const { onChange, ...other } = props;
 
-  return (
-    <NumericFormat
-      {...other}
-      getInputRef={ref}
-      onValueChange={(values) => {
-        onChange({
-          target: {
-            name: props.name,
-            value: values.value,
-          },
-        });
-      }}
-      thousandSeparator
-      valueIsNumericString
-      prefix="$"
-    />
-  );
-});
+    return (
+      <NumericFormat
+        {...other}
+        getInputRef={ref}
+        onValueChange={(values) => {
+          onChange({
+            target: {
+              name: props.name,
+              value: values.value,
+            },
+          });
+        }}
+        thousandSeparator
+        valueIsNumericString
+        prefix="$"
+      />
+    );
+  },
+);
 
 NumericFormatCustom.propTypes = {
   name: PropTypes.string.isRequired,

diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx b/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx
@@ -47,22 +47,21 @@ const StatUnit = styled('div', {
   color: theme.palette.text.secondary,
 }));
 
-const Stat = React.forwardRef<HTMLDivElement, StatProps>(function Stat(
-  inProps,
-  ref,
-) {
-  const props = useThemeProps({ props: inProps, name: 'MuiStat' });
-  const { value, unit, variant, ...other } = props;
+const Stat = React.forwardRef<HTMLDivElement, StatProps>(
+  function Stat(inProps, ref) {
+    const props = useThemeProps({ props: inProps, name: 'MuiStat' });
+    const { value, unit, variant, ...other } = props;
 
-  const ownerState = { ...props, variant };
+    const ownerState = { ...props, variant };
 
-  return (
-    <StatRoot ref={ref} ownerState={ownerState} {...other}>
-      <StatValue ownerState={ownerState}>{value}</StatValue>
-      <StatUnit ownerState={ownerState}>{unit}</StatUnit>
-    </StatRoot>
-  );
-});
+    return (
+      <StatRoot ref={ref} ownerState={ownerState} {...other}>
+        <StatValue ownerState={ownerState}>{value}</StatValue>
+        <StatUnit ownerState={ownerState}>{unit}</StatUnit>
+      </StatRoot>
+    );
+  },
+);
 
 export default function StatFullTemplate() {
   return (