1 files changed, 28 insertions, 12 deletions
diff --git a/src/lib/Layout/Popup.svelte b/src/lib/Layout/Popup.svelte
index b82e86c2..45b719f8 100644
--- a/src/lib/Layout/Popup.svelte
+++ b/src/lib/Layout/Popup.svelte
@@ -1,16 +1,32 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { browser } from '$app/environment';
   import { onMount } from 'svelte';
 
-  export let onLeave = () => {
+  interface Props {
+    onLeave?: any;
+    card?: boolean;
+    smallCard?: boolean;
+    fullscreen?: boolean;
+    show?: boolean;
+    locked?: boolean;
+    center?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    onLeave = () => {
     return;
-  };
-  export let card = true;
-  export let smallCard = false;
-  export let fullscreen = false;
-  export let show = true;
-  export let locked = false;
-  export let center = false;
+  },
+    card = true,
+    smallCard = false,
+    fullscreen = false,
+    show = $bindable(true),
+    locked = false,
+    center = false,
+    children
+  }: Props = $props();
 
   const handleClickOutside = (event: any) => {
     if (!locked && event.target.classList.contains('popup')) {
@@ -24,24 +40,24 @@
     if (browser) document.body.style.overflow = 'auto';
   });
 
-  $: {
+  run(() => {
     if (browser) {
       document.body.style.overflow = 'auto';
 
       if (show) document.body.style.overflow = 'hidden';
       else document.body.style.overflow = 'auto';
     }
-  }
+  });
 </script>
 
-<svelte:window on:click={handleClickOutside} />
+<svelte:window onclick={handleClickOutside} />
 
 {#if show}
   <div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}>
     <span
       class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`}
     >
-      <slot />
+      {@render children?.()}
     </span>
   </div>
 {/if}