update to svelte 5

src/lib/components/Toast/ErrorToast.svelte

@@ -3,15 +3,10 @@
 	import { fly } from 'svelte/transition';
 	import { onDestroy } from 'svelte';
 
-	export let timeout = 2000;
-	export let show = false;
+	let { children, timeout = 2000, show = false } = $props();
 
-	export function reset() {
-		progressValue = 1;
-	}
-
-	let progressValue = 100;
-	let intervalClear: ReturnType<typeof setInterval> | undefined;
+	let progressValue = $state(100);
+	let intervalClear: ReturnType<typeof setInterval> | undefined = $state();
 
 	function startTimout() {
 		intervalClear = setInterval(() => {
@@ -23,10 +18,11 @@
 		}, timeout / 100);
 	}
 
-	$: if (show) {
+	$effect(() => {
+		if (!show) return;
 		progressValue = 0;
 		startTimout();
-	}
+	});
 
 	onDestroy(() => clearInterval(intervalClear));
 </script>
@@ -36,23 +32,23 @@
 		in:fly={{ x: 0, duration: 200 }}
 		out:fly={{ x: 400, duration: 400 }}
 		class="toast"
-		on:mouseenter={() => {
+		onmouseenter={() => {
 			clearInterval(intervalClear);
 			progressValue = 1;
 		}}
-		on:mouseleave={startTimout}
+		onmouseleave={startTimout}
 		role="alert"
 	>
 		<div class="alert alert-error border-none relative text-gray-900 overflow-hidden">
 			<div class="flex gap-2 z-10">
 				<ExclamationCircle />
-				<slot />
+				{@render children()}
 			</div>
 			<progress
 				class="progress progress-error absolute bottom-0 h-[3px] w-full bg-[rgba(0,0,0,0.6)]"
 				value={progressValue}
 				max="100"
-			/>
+			></progress>
 		</div>
 	</div>
 {/if}