Modal noOutsideClick prop

src/lib/components/modal.svelte

@@ -6,6 +6,7 @@
 	export let open: boolean;
 	export let title: string;
 	export let size: 'sm' | 'md' | 'lg' = 'md';
+	export let noOutsideClick: boolean = false;
 
 	const dispatch = createEventDispatcher();
 
@@ -34,7 +35,7 @@
 </script>
 
 <svelte:window on:keyup={escape} />
-<dialog {open} on:click={close} class="app-modal">
+<dialog {open} on:click={() => (!noOutsideClick ? close() : null)} class="app-modal">
 	<article style:--max-width={maxWidths[size]} on:click|stopPropagation>
 		<header>
 			{title}

src/lib/components/welcome-modal.svelte

@@ -18,7 +18,7 @@
 	}
 </script>
 
-<Modal title="Welcome!" size="sm" bind:open on:close={close}>
+<Modal title="Welcome!" size="sm" noOutsideClick={true} bind:open on:close={close}>
 	<p>
 		Capture your thoughts for later by writing a quick note. Add tags to categorize it and organize
 		your notes.