time input: partial refactor

Lots of weird issues right now that seem primarily to arise from binding
to `ref` on `StyledRawInput` components and then storing that binding
in a stateful object. Ideally I want to do this in order to simplify
declaration of inputs so that I reuse other controls more readily.

Second step of this refactor should be to remove reliance on binding a
reference to the underlying HTML element.

src/routes/+page.svelte

@@ -259,7 +259,10 @@
 <div class="component">
 	<p class="title">Time Input</p>
 
-	<TimeInput name="example-time-input" label="Enter a time" />
+	<InputGroup class="gap-8">
+		<TimeInput label="Regular time input" name="example-time-input" />
+		<TimeInput label="Compact time" compact />
+	</InputGroup>
 </div>
 
 <div class="component">
@@ -417,7 +420,7 @@
 		}
 	}}
 	onopen={(dialog) => {
-		dialog.error(ErrorMessage.from('Example error message!'));
+		dialog.error('Example error message!');
 		dialog.loading();
 		setTimeout(() => {
 			dialog.loaded();