Migrates to svelte 5

web/src/lib/components/base/toggle.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
 
-    export let name: string = "";
-    export let value: boolean = false;
-    export let label: string = "";
-    export let error: string = "";
+    interface Props {
+        name?: string;
+        value?: boolean;
+        label?: string;
+        error?: string;
+        onchange?: (value: boolean) => void
+    }
+
+    let {
+        name = "",
+        value = $bindable(false),
+        label = "",
+        error = "",
+        onchange
+    }: Props = $props();
 
-    const dispatch = createEventDispatcher();
 
     function handleToggleChange() {
-        dispatch("change", value);
+        onchange?.(value);
     }
 </script>
 
@@ -20,7 +29,7 @@
         type="checkbox"
         class="sr-only peer"
         value="1"
-        on:change={handleToggleChange}
+        onchange={handleToggleChange}
     />
     <div
         class="w-11 h-6 bg-input-background border border-input-border peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-ring rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"