Removes React Toggle library (#38771)

Co-authored-by: diondiondion <mail@diondiondion.com>

app/javascript/mastodon/components/form_fields/toggle.module.css

@@ -1,3 +1,13 @@
+.wrapper {
+  --diameter: 20px;
+  --padding: 2px;
+  --transition: 0.2s ease-in-out;
+
+  display: inline-block;
+  position: relative;
+  height: calc(var(--diameter) + var(--padding) * 2);
+}
+
 .input {
   position: absolute;
   opacity: 0;
@@ -9,10 +19,6 @@
 }
 
 .toggle {
-  --diameter: 20px;
-  --padding: 2px;
-  --transition: 0.2s ease-in-out;
-
   display: inline-flex;
   align-items: center;
   border-radius: 9999px;
@@ -68,8 +74,3 @@
 :global([dir='rtl']) .input:checked + .toggle::before {
   transform: translateX(calc(-1 * (var(--diameter) - (var(--padding) * 2))));
 }
-
-.wrapper {
-  display: inline-block;
-  position: relative;
-}

app/javascript/mastodon/components/form_fields/toggle_field.tsx

@@ -31,20 +31,17 @@ ToggleField.displayName = 'ToggleField';
 
 export const Toggle = forwardRef<HTMLInputElement, Props>(
   ({ className, size, ...otherProps }, ref) => (
-    <span className={classes.wrapper}>
+    <span
+      className={classes.wrapper}
+      style={{ '--diameter': size ? `${size}px` : undefined } as CSSProperties}
+    >
       <input
         {...otherProps}
         type='checkbox'
         className={classes.input}
         ref={ref}
       />
-      <span
-        className={classNames(classes.toggle, className)}
-        style={
-          { '--diameter': size ? `${size}px` : undefined } as CSSProperties
-        }
-        hidden
-      />
+      <span className={classNames(classes.toggle, className)} hidden />
     </span>
   ),
 );