Try extra clever version

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} alignTop>
+          <Radio name="roleName" key={role} value={role}>
             <div className="text-sans-md text-raise">
               {capitalize(role).replace('_', ' ')}
             </div>

app/ui/lib/Checkbox.tsx

@@ -46,8 +46,8 @@ export const Checkbox = ({
   className,
   ...inputProps
 }: CheckboxProps) => (
-  <label className="items-top inline-flex">
-    <span className="relative h-4 w-4">
+  <label className="text-sans-md items-top inline-flex">
+    <span className="relative mt-[calc((1lh-16px)/2)] h-4 w-4">
       <input
         className={cn(inputStyle, className)}
         type="checkbox"

app/ui/lib/Radio.tsx

@@ -17,10 +17,7 @@ import cn from 'classnames'
 import type { ComponentProps } from 'react'
 
 // input type is fixed to "radio"
-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
-}
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'>
 
 const fieldStyles = `
   peer appearance-none absolute outline-hidden
@@ -29,9 +26,9 @@ const fieldStyles = `
   disabled:hover:bg-transparent
 `
 
-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">
+export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
+  <label className="text-sans-md inline-flex items-start">
+    <span className="relative mt-[calc((1lh-16px)/2)] 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" />