From 46eed550d5528377e934299233021702c00f87e2 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 17 Jan 2025 11:33:12 -0500
Subject: [PATCH] update components

---
 src/lib/components/DataInput/TextInput.svelte |  2 +-
 src/lib/components/DataInput/Textarea.svelte  |  2 +-
 src/lib/components/Feedback/Alert.svelte      | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/DataInput/TextInput.svelte b/src/lib/components/DataInput/TextInput.svelte
index e5bf537..e148b5b 100644
--- a/src/lib/components/DataInput/TextInput.svelte
+++ b/src/lib/components/DataInput/TextInput.svelte
@@ -38,7 +38,7 @@
 <label class="form-control w-full" transition:fadeTransition={{ duration: fade ? 200 : 0 }}>
 	<div class="label">
 		<span
-			class="label-text"
+			class="label-text flex items-center gap-2"
 			class:text-primary={color === 'primary'}
 			class:text-secondary={color === 'secondary'}
 			class:text-accent={color === 'accent'}
diff --git a/src/lib/components/DataInput/Textarea.svelte b/src/lib/components/DataInput/Textarea.svelte
index 14f3fed..c6e9527 100644
--- a/src/lib/components/DataInput/Textarea.svelte
+++ b/src/lib/components/DataInput/Textarea.svelte
@@ -19,7 +19,7 @@
 <label class="form-control w-full max-w-lg">
 	<div class="label">
 		<span
-			class="label-text"
+			class="label-text flex items-center gap-2"
 			class:text-primary={color === 'primary'}
 			class:text-secondary={color === 'secondary'}
 			class:text-accent={color === 'accent'}
diff --git a/src/lib/components/Feedback/Alert.svelte b/src/lib/components/Feedback/Alert.svelte
index 2dc4efb..e466a17 100644
--- a/src/lib/components/Feedback/Alert.svelte
+++ b/src/lib/components/Feedback/Alert.svelte
@@ -1,23 +1,27 @@
 <script lang="ts">
 	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
 	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
 		children?: Snippet;
 		icon?: Snippet;
 		status?: Extract<DaisyColor, 'info' | 'success' | 'warning' | 'error'>;
-	};
+	} & SvelteHTMLElements['div'];
 
-	let { children, icon, status: color }: Props = $props();
+	let { children, class: className, icon, status: color, ...props }: Props = $props();
 </script>
 
 <div
 	role="alert"
-	class="alert"
+	class={twMerge('alert', clsx(className))}
 	class:alert-info={color === 'info'}
 	class:alert-success={color === 'success'}
 	class:alert-warning={color === 'warning'}
 	class:alert-error={color === 'error'}
+	{...props}
 >
 	{@render icon?.()}
 	{@render children?.()}