feat(build): migrate from Prettier to Oxfmt for performant code formatting (#42434)

docs/developer_docs_versioned_docs/version-6.1.0/components/ui/switch.mdx

@@ -33,46 +33,44 @@ A toggle switch for boolean on/off states. Supports loading indicators, sizing,
 <StoryWithControls
   component="Switch"
   props={{
-  disabled: false,
-  loading: false,
-  title: "Toggle feature"
-}}
+    disabled: false,
+    loading: false,
+    title: 'Toggle feature',
+  }}
   controls={[
-  {
-    name: "disabled",
-    label: "Disabled",
-    type: "boolean",
-    description: "Whether the switch is disabled."
-  },
-  {
-    name: "loading",
-    label: "Loading",
-    type: "boolean",
-    description: "Whether to show a loading spinner inside the switch."
-  },
-  {
-    name: "title",
-    label: "Title",
-    type: "text",
-    description: "HTML title attribute shown as a browser tooltip on hover. Useful for accessibility."
-  },
-  {
-    name: "checked",
-    label: "Checked",
-    type: "boolean",
-    description: "Whether the switch is on."
-  },
-  {
-    name: "size",
-    label: "Size",
-    type: "radio",
-    options: [
-      "small",
-      "default"
-    ],
-    description: "Size of the switch."
-  }
-]}
+    {
+      name: 'disabled',
+      label: 'Disabled',
+      type: 'boolean',
+      description: 'Whether the switch is disabled.',
+    },
+    {
+      name: 'loading',
+      label: 'Loading',
+      type: 'boolean',
+      description: 'Whether to show a loading spinner inside the switch.',
+    },
+    {
+      name: 'title',
+      label: 'Title',
+      type: 'text',
+      description:
+        'HTML title attribute shown as a browser tooltip on hover. Useful for accessibility.',
+    },
+    {
+      name: 'checked',
+      label: 'Checked',
+      type: 'boolean',
+      description: 'Whether the switch is on.',
+    },
+    {
+      name: 'size',
+      label: 'Size',
+      type: 'radio',
+      options: ['small', 'default'],
+      description: 'Size of the switch.',
+    },
+  ]}
 />
 
 ## Try It
@@ -84,13 +82,11 @@ function Demo() {
   const [checked, setChecked] = React.useState(true);
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-      <Switch
-        checked={checked}
-        onChange={setChecked}
-        title="Toggle feature"
-      />
+      <Switch checked={checked} onChange={setChecked} title="Toggle feature" />
       <span>{checked ? 'On' : 'Off'}</span>
-      <span style={{ color: '#999', fontSize: 12 }}>(hover the switch to see the title tooltip)</span>
+      <span style={{ color: '#999', fontSize: 12 }}>
+        (hover the switch to see the title tooltip)
+      </span>
     </div>
   );
 }
@@ -154,14 +150,45 @@ function SettingsPanel() {
   const [darkMode, setDarkMode] = React.useState(false);
   const [autoRefresh, setAutoRefresh] = React.useState(true);
   return (
-    <div style={{ maxWidth: 320, border: '1px solid #e8e8e8', borderRadius: 8, padding: 16 }}>
+    <div
+      style={{
+        maxWidth: 320,
+        border: '1px solid #e8e8e8',
+        borderRadius: 8,
+        padding: 16,
+      }}
+    >
       <h4 style={{ marginTop: 0 }}>Dashboard Settings</h4>
       {[
-        { label: 'Email notifications', checked: notifications, onChange: setNotifications, title: 'Toggle email notifications' },
-        { label: 'Dark mode', checked: darkMode, onChange: setDarkMode, title: 'Toggle dark mode' },
-        { label: 'Auto-refresh data', checked: autoRefresh, onChange: setAutoRefresh, title: 'Toggle auto-refresh' },
+        {
+          label: 'Email notifications',
+          checked: notifications,
+          onChange: setNotifications,
+          title: 'Toggle email notifications',
+        },
+        {
+          label: 'Dark mode',
+          checked: darkMode,
+          onChange: setDarkMode,
+          title: 'Toggle dark mode',
+        },
+        {
+          label: 'Auto-refresh data',
+          checked: autoRefresh,
+          onChange: setAutoRefresh,
+          title: 'Toggle auto-refresh',
+        },
       ].map(({ label, checked, onChange, title }) => (
-        <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid #f0f0f0' }}>
+        <div
+          key={label}
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: '8px 0',
+            borderBottom: '1px solid #f0f0f0',
+          }}
+        >
           <span>{label}</span>
           <Switch checked={checked} onChange={onChange} title={title} />
         </div>
@@ -173,11 +200,11 @@ function SettingsPanel() {
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `disabled` | `boolean` | `false` | Whether the switch is disabled. |
-| `loading` | `boolean` | `false` | Whether to show a loading spinner inside the switch. |
-| `title` | `string` | `"Toggle feature"` | HTML title attribute shown as a browser tooltip on hover. Useful for accessibility. |
+| Prop       | Type      | Default            | Description                                                                         |
+| ---------- | --------- | ------------------ | ----------------------------------------------------------------------------------- |
+| `disabled` | `boolean` | `false`            | Whether the switch is disabled.                                                     |
+| `loading`  | `boolean` | `false`            | Whether to show a loading spinner inside the switch.                                |
+| `title`    | `string`  | `"Toggle feature"` | HTML title attribute shown as a browser tooltip on hover. Useful for accessibility. |
 
 ## Import