diff --git a/docs/data/base/components/form-control/BasicFormControl.js b/docs/data/base/components/form-control/BasicFormControl.js
index 732e37016a0755..59e6accec4b8f9 100644
--- a/docs/data/base/components/form-control/BasicFormControl.js
+++ b/docs/data/base/components/form-control/BasicFormControl.js
@@ -6,25 +6,15 @@ import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 import clsx from 'clsx';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function BasicFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <Label>Name</Label>
+      <Input />
+      <HelperText />
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -109,12 +99,22 @@ const HelperText = styled((props) => {
   font-size: 0.875rem;
 `;
 
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <Label>Name</Label>
-      <Input />
-      <HelperText />
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/BasicFormControl.tsx b/docs/data/base/components/form-control/BasicFormControl.tsx
index b984bb276f9095..dabfde12ff5735 100644
--- a/docs/data/base/components/form-control/BasicFormControl.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl.tsx
@@ -6,25 +6,15 @@ import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 import clsx from 'clsx';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function BasicFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <Label>Name</Label>
+      <Input />
+      <HelperText />
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -111,12 +101,22 @@ const HelperText = styled((props: {}) => {
   font-size: 0.875rem;
 `;
 
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <Label>Name</Label>
-      <Input />
-      <HelperText />
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js
index 95f5e3a51cf440..9893d48b7f6435 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.js
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.js
@@ -3,25 +3,18 @@ import FormControlUnstyled from '@mui/base/FormControlUnstyled';
 import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function FormControlFunctionChild() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      {({ filled, focused }) => (
+        <React.Fragment>
+          <Input className={filled ? 'filled' : ''} />
+          {filled && !focused && <OkMark>✔</OkMark>}
+        </React.Fragment>
+      )}
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -63,15 +56,22 @@ const OkMark = styled('span')`
   color: rgba(125, 200, 0, 1);
 `;
 
-export default function FormControlFunctionChild() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      {({ filled, focused }) => (
-        <React.Fragment>
-          <Input className={filled ? 'filled' : ''} />
-          {filled && !focused && <OkMark>✔</OkMark>}
-        </React.Fragment>
-      )}
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
index 8d2be39fa5247a..3ac8b2b54b65c7 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.tsx
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
@@ -5,25 +5,18 @@ import FormControlUnstyled, {
 import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
-const blue = {
-  100: '#DAECFF',
-  200: '#80BFFF',
-  400: '#3399FF',
-  600: '#0072E5',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
+export default function FormControlFunctionChild() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      {({ filled, focused }: FormControlUnstyledState) => (
+        <React.Fragment>
+          <Input className={filled ? 'filled' : ''} />
+          {filled && !focused && <OkMark>✔</OkMark>}
+        </React.Fragment>
+      )}
+    </FormControlUnstyled>
+  );
+}
 
 const Input = styled(InputUnstyled)(
   ({ theme }) => `
@@ -65,15 +58,22 @@ const OkMark = styled('span')`
   color: rgba(125, 200, 0, 1);
 `;
 
-export default function FormControlFunctionChild() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      {({ filled, focused }: FormControlUnstyledState) => (
-        <React.Fragment>
-          <Input className={filled ? 'filled' : ''} />
-          {filled && !focused && <OkMark>✔</OkMark>}
-        </React.Fragment>
-      )}
-    </FormControlUnstyled>
-  );
-}
+const blue = {
+  100: '#DAECFF',
+  200: '#80BFFF',
+  400: '#3399FF',
+  600: '#0072E5',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
diff --git a/docs/data/base/components/form-control/UseFormControl.js b/docs/data/base/components/form-control/UseFormControl.js
index c44a08036be463..7497c7029aeb20 100644
--- a/docs/data/base/components/form-control/UseFormControl.js
+++ b/docs/data/base/components/form-control/UseFormControl.js
@@ -3,6 +3,15 @@ import FormControlUnstyled, {
   useFormControlUnstyledContext,
 } from '@mui/base/FormControlUnstyled';
 
+export default function UseFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <CustomInput />
+      <ControlStateDisplay />
+    </FormControlUnstyled>
+  );
+}
+
 function CustomInput() {
   const formControlContext = useFormControlUnstyledContext();
 
@@ -40,12 +49,3 @@ function ControlStateDisplay() {
     </p>
   );
 }
-
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <CustomInput />
-      <ControlStateDisplay />
-    </FormControlUnstyled>
-  );
-}
diff --git a/docs/data/base/components/form-control/UseFormControl.tsx b/docs/data/base/components/form-control/UseFormControl.tsx
index 3af02e62afc7ad..6320d4b0881bd4 100644
--- a/docs/data/base/components/form-control/UseFormControl.tsx
+++ b/docs/data/base/components/form-control/UseFormControl.tsx
@@ -3,6 +3,15 @@ import FormControlUnstyled, {
   useFormControlUnstyledContext,
 } from '@mui/base/FormControlUnstyled';
 
+export default function UseFormControl() {
+  return (
+    <FormControlUnstyled defaultValue="" required>
+      <CustomInput />
+      <ControlStateDisplay />
+    </FormControlUnstyled>
+  );
+}
+
 function CustomInput() {
   const formControlContext = useFormControlUnstyledContext();
 
@@ -40,12 +49,3 @@ function ControlStateDisplay() {
     </p>
   );
 }
-
-export default function UseFormControl() {
-  return (
-    <FormControlUnstyled defaultValue="" required>
-      <CustomInput />
-      <ControlStateDisplay />
-    </FormControlUnstyled>
-  );
-}