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'}

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'}

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?.()}