From 20c1a4fa891992201993755a3707ca6d307d8a0f Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Wed, 16 Jul 2025 17:33:02 -0700
Subject: [PATCH] add error box component

---
 src/lib/ErrorBox.svelte | 18 ++++++++++++++++++
 src/lib/index.ts        |  1 +
 2 files changed, 19 insertions(+)
 create mode 100644 src/lib/ErrorBox.svelte

diff --git a/src/lib/ErrorBox.svelte b/src/lib/ErrorBox.svelte
new file mode 100644
index 0000000..e0aa28b
--- /dev/null
+++ b/src/lib/ErrorBox.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+	import type { ErrorMessage } from './error';
+
+	interface Props {
+		error: ErrorMessage | null;
+		class?: ClassValue | null;
+	}
+
+	let { error, class: classValue }: Props = $props();
+</script>
+
+{#if error}
+	<!-- eslint-disable svelte/no-at-html-tags -->
+	<div class={['bg-sui-accent text-sui-background my-4 rounded-xs px-6 py-4', classValue]}>
+		{@html error.message}
+	</div>
+{/if}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index e743446..466238a 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -6,6 +6,7 @@ export { default as Checkbox, type CheckboxState } from './Checkbox.svelte';
 export { default as Combobox, type ComboboxOption } from './Combobox.svelte';
 export { default as DateInput } from './DateInput.svelte';
 export { default as Dialog } from './Dialog.svelte';
+export { default as ErrorBox } from './ErrorBox.svelte';
 export { default as FramelessButton } from './FramelessButton.svelte';
 export { default as InjectGoogleMaps } from './InjectGoogleMaps.svelte';
 export { default as InjectUmami } from './InjectUmami.svelte';