sm Modal size

docs/routes/components/Modal.md

@@ -2,12 +2,20 @@
 <script lang="ts">
 	import { Modal, Button } from 'omorphia'
 	import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
+  	import IconCheck from 'virtual:icons/heroicons-outline/check'
 </script>
 
-<Modal title="Example modal" danger cancelButton let:trigger>
+<Modal title="Example modal" danger let:trigger>
 	<Button on:click={trigger} slot="trigger">Open modal</Button>
 
 	<p>Secret message goes here!</p>
 	<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
 </Modal>
+
+<Modal let:trigger size='sm'>
+	<Button on:click={trigger} slot="trigger">Confirm modal</Button>
+
+	Are you sure you want to delete this gallery image?
+	<Button color="primary" slot="button"><IconCheck /> Confirm</Button>
+</Modal>
 ```

src/components/Modal.svelte

@@ -7,7 +7,7 @@
 	export let open = false
 
 	/** Set the width of the modal */
-	export let size: 'md' | 'lg' = 'md'
+	export let size: 'sm' | 'md' | 'lg' = 'md'
 
 	export let title = ''
 
@@ -39,12 +39,14 @@
 	<div
 		class={classCombine(['modal', `modal--size-${size}`, 'card'])}
 		transition:fly={{ y: 400, duration: 250 }}>
+		{#if title}
 			<div class="modal__top">
 				<h2 class="title-secondary">{title}</h2>
 				<Button title="Close" color="transparent" on:click={close}>
 					<IconX width={20} />
 				</Button>
 			</div>
+		{/if}
 
 		<slot />
 
@@ -83,6 +85,9 @@
 		overflow-y: auto;
 
 		&--size {
+			&-sm {
+				max-width: 450px;
+			}
 			&-md {
 				max-width: 600px;
 			}