feat: add billing and organization workflows

src/lib/components/money-field.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import * as Form from '$lib/components/ui/form/index.js';
+	import { Field as FormField, Control, FieldErrors } from 'formsnap';
+	import * as Field from '$lib/components/ui/field/index.js';
 	import * as InputGroup from '$lib/components/ui/input-group/index.js';
 
 	let {
@@ -8,35 +9,42 @@
 		data,
 		name,
 		label,
-		id
+		id,
+		description
 	}: {
 		form: any;
 		data: any;
 		name: string;
 		label: string;
 		id: string;
+		description?: string;
 	} = $props();
 </script>
 
-<Form.Field {form} {name}>
-	<Form.Control {id}>
-		{#snippet children({ props })}
-			<Form.Label>{label}</Form.Label>
-			<InputGroup.Root>
-				<InputGroup.Addon>
-					<InputGroup.Text>£</InputGroup.Text>
-				</InputGroup.Addon>
-				<InputGroup.Input
-					{...props}
-					type="number"
-					min="0"
-					step="0.01"
-					inputmode="decimal"
-					placeholder="0.00"
-					bind:value={$data[name]}
-				/>
-			</InputGroup.Root>
-		{/snippet}
-	</Form.Control>
-	<Form.FieldErrors />
-</Form.Field>
+<FormField {form} {name}>
+	<Field.Field>
+		<Control {id}>
+			{#snippet children({ props })}
+				<Field.Label>{label}</Field.Label>
+				<InputGroup.Root>
+					<InputGroup.Addon>
+						<InputGroup.Text>£</InputGroup.Text>
+					</InputGroup.Addon>
+					<InputGroup.Input
+						{...props}
+						type="number"
+						min="0"
+						step="0.01"
+						inputmode="decimal"
+						placeholder="0.00"
+						bind:value={$data[name]}
+					/>
+				</InputGroup.Root>
+			{/snippet}
+		</Control>
+		{#if description}
+			<Field.Description>{description}</Field.Description>
+		{/if}
+		<Field.Error><FieldErrors /></Field.Error>
+	</Field.Field>
+</FormField>