feat(Download): incompatibility warning

resolves #83

src/lib/components/Button.svelte

@@ -1,6 +1,5 @@
-<script>
-	export let kind = 'secondary';
-	$: type = 'button-' + kind;
+<script lang="ts">
+	export let type: 'filled' | 'tonal' | 'text' | 'outlined';
 	export let icon = '';
 	export let href = '';
 	export let target = '';
@@ -8,22 +7,14 @@
 
 <button on:click>
 	{#if href}
-		<a
-			{href}
-			{target}
-			{...$$restProps}
-			class={type}
-		>
+		<a {href} {target} {...$$restProps} class={`button-${type}`}>
 			{#if icon}
 				<img src="../icons/{icon}.svg" alt={icon} />
 			{/if}
 			<slot />
 		</a>
 	{:else}
-		<div
-			{...$$restProps}
-			class={type}
-		>
+		<div {...$$restProps} class={`button-${type}`}>
 			{#if icon}
 				<img src="../icons/{icon}.svg" alt={icon} />
 			{/if}
@@ -58,19 +49,20 @@
 		user-select: none;
 	}
 
-	.button-primary {
+	.button-filled {
 		background-color: var(--accent-color);
 		color: var(--grey-four);
 	}
-	.button-secondary {
+	.button-tonal {
 		background-color: var(--grey-two);
 	}
 
-	.button-primary, .button-secondary {
+	.button-filled,
+	.button-tonal {
 		padding: 16px 24px;
 	}
 
-	.button-tertiary {
+	.button-text {
 		background-color: transparent;
 		color: var(--accent-color);
 		font-weight: 500;

src/lib/components/Dialogue.svelte

@@ -42,9 +42,16 @@
 					<slot name="description" />
 				</p>
 			{/if}
-		</div>
 
-		<div class="slot"><slot /></div>
+			<div class="slot"><slot /></div>
+
+			{#if $$slots.buttons}
+				<div class="buttons">
+					<slot name="buttons" />
+				</div>
+			{/if}
+		</div>
+		
 	</div>
 {/if}
 
@@ -63,7 +70,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-bottom: 20px;
+		margin-bottom: 0.75rem;
 	}
 
 	.title {
@@ -78,8 +85,17 @@
 		margin-bottom: 8px;
 	}
 
+	.buttons {
+		display: flex;
+		gap: 2rem;
+		margin-top: 1rem;
+		justify-content: flex-end;
+		width: 100%;
+	}
+
+
 	.hasIcon {
-		flex-direction: column;
+		flex-direction: column;	
 	}
 
 	.modal {
@@ -131,9 +147,12 @@
 		display: flex;
 		flex-direction: column;
 		align-content: center;
+		width: 100%;
 	}
 
 	.modal::-webkit-scrollbar {
 		display: none;
 	}
 </style>
+
+