checkbox: fix invalid state, shrinking of button

src/lib/Checkbox.svelte

@@ -57,11 +57,11 @@
 		type="button"
 		{id}
 		class={[
-			'text-sui-text flex size-7 appearance-none items-center',
+			'text-sui-text flex size-7 shrink-0 appearance-none items-center',
 			'justify-center rounded-lg shadow transition-all hover:opacity-75',
 			color === 'default' && 'bg-white',
 			color === 'contrast' && 'border-text/40 border bg-white',
-			!valid && 'border-sui-accent-400 border'
+			!valid && 'border border-red-500'
 		]}
 		onclick={() => {
 			if (value === false || value === undefined || value === 'indeterminate') {
@@ -86,9 +86,6 @@
 			for={id}
 		>
 			{@render children()}
-			{#if required}
-				<span class="text-sui-accent-400">*</span>
-			{/if}
 		</label>
 	{/if}
 </div>

src/routes/statemachine/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Checkbox from '$lib/Checkbox.svelte';
+	import Link from '$lib/Link.svelte';
 	import PhoneInput from '$lib/PhoneInput.svelte';
 	import RadioGroup from '$lib/RadioGroup.svelte';
 	import StateMachine, { type StateMachinePage } from '$lib/StateMachine.svelte';
@@ -79,7 +81,7 @@
 ></StateMachine>
 
 {#snippet firstPage()}
-	<TextInput label="What's your name?" validate={{ required: true }} />
+	<TextInput label="What's your name?" validate={{ required: true }} asterisk />
 
 	<RadioGroup
 		label="What's your favorite color?"
@@ -90,6 +92,11 @@
 		]}
 		required={true}
 	/>
+
+	<Checkbox name="consent" required={true} class="mt-1 mb-2">
+		I consent to the collection, use, and sharing described above and in the
+		<Link href="/privacy">Privacy Policy</Link>.
+	</Checkbox>
 {/snippet}
 
 {#snippet secondPage()}