Revert "Vertically centre radio and checkbox properly"

This reverts commit d02e303.

Author: benjaminleonard

app/forms/access-util.tsx

@@ -106,7 +106,7 @@ export function RoleRadioField<
         className="mt-2"
       >
         {R.reverse(allRoles).map((role) => (
-          <Radio name="roleName" key={role} value={role}>
+          <Radio name="roleName" key={role} value={role} alignTop>
             <div className="text-sans-md text-raise">
               {capitalize(role).replace('_', ' ')}
             </div>

app/ui/lib/Checkbox.tsx

@@ -46,24 +46,22 @@ export const Checkbox = ({
   className,
   ...inputProps
 }: CheckboxProps) => (
-  <label className="text-sans-md">
-    <div className="inline-flex h-lh shrink-0 grow-0 items-center">
-      <span className="relative h-4 w-4">
-        <input
-          className={cn(inputStyle, className)}
-          type="checkbox"
-          ref={(el) => {
-            if (el) {
-              el.indeterminate = !!indeterminate
-            }
-          }}
-          {...inputProps}
-        />
-        {inputProps.checked && !indeterminate && <Check />}
-        {indeterminate && <Indeterminate />}
-      </span>
+  <label className="items-top inline-flex">
+    <span className="relative h-4 w-4">
+      <input
+        className={cn(inputStyle, className)}
+        type="checkbox"
+        ref={(el) => {
+          if (el) {
+            el.indeterminate = !!indeterminate
+          }
+        }}
+        {...inputProps}
+      />
+      {inputProps.checked && !indeterminate && <Check />}
+      {indeterminate && <Indeterminate />}
+    </span>
 
-      {children && <span className="text-default ml-2.5">{children}</span>}
-    </div>
+    {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
   </label>
 )

app/ui/lib/Radio.tsx

@@ -17,7 +17,10 @@ import cn from 'classnames'
 import type { ComponentProps } from 'react'
 
 // input type is fixed to "radio"
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'>
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'> & {
+  /** Align radio button with top of content instead of center (useful for multi-line content) */
+  alignTop?: boolean
+}
 
 const fieldStyles = `
   peer appearance-none absolute outline-hidden
@@ -26,15 +29,13 @@ const fieldStyles = `
   disabled:hover:bg-transparent
 `
 
-export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
-  <label className="text-sans-md flex">
-    <div className="inline-flex h-lh shrink-0 grow-0 items-center">
-      <span className="relative h-4 w-4 shrink-0">
-        <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
-        {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
-        <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
-      </span>
-    </div>
+export const Radio = ({ children, className, alignTop, ...inputProps }: RadioProps) => (
+  <label className={cn('inline-flex', alignTop ? 'items-start' : 'items-center')}>
+    <span className="relative h-4 w-4 shrink-0">
+      <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
+      {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
+      <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
+    </span>
 
     {children && <span className="text-default ml-2.5">{children}</span>}
   </label>