fix(ui): Align legal consent checkbox in simple theme

.changeset/fair-singers-consent.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix the legal consent checkbox growing in size when its label wraps to a second line while using the `simple` theme. The checkbox is now aligned to the start of the row so it no longer stretches to match the label height.

packages/clerk-js/sandbox/app.ts

@@ -281,6 +281,8 @@ async function initControls() {
     .addBinding(PARAMS, 'baseTheme', {
       options: {
         default: '',
+        clerk: 'clerk',
+        simple: 'simple',
         dark: 'dark',
         shadesOfPurple: 'shadesOfPurple',
         neobrutalism: 'neobrutalism',
@@ -357,6 +359,8 @@ async function initControls() {
 }
 
 const themes: Record<string, unknown> = {
+  clerk: 'clerk',
+  simple: 'simple',
   dark,
   shadesOfPurple,
   neobrutalism,

packages/ui/src/elements/LegalConsentCheckbox.tsx

@@ -79,7 +79,10 @@ export const LegalCheckbox = (
 
   return (
     <Field.Root {...props}>
-      <Flex justify='center'>
+      <Flex
+        justify='center'
+        align='start'
+      >
         <Field.CheckboxIndicator
           elementDescriptor={descriptors.formFieldCheckboxInput}
           elementId={descriptors.formFieldInput.setId('legalAccepted')}