Skip Typescript compilation on packaging

src/components/Avatar.svelte

@@ -18,13 +18,13 @@
 		floatUp && 'avatar--float-up',
 	])
 
-	let img
+	let img: HTMLImageElement
 
 	onMount(() => {
 		if (img && img.naturalWidth) {
 			const isPixelated = () => {
 				if (img.naturalWidth < 96 && img.naturalWidth > 0) {
-					img.style = 'image-rendering: pixelated;'
+					img.style.imageRendering = 'pixelated'
 				}
 			}
 

src/components/CheckboxList.svelte

@@ -8,8 +8,8 @@
 	/** Wrap the options horizontally */
 	export let wrap = false
 
-	const handleChange = (e, key) => {
-		if (e.target.checked) {
+	const handleChange = (event: any, key: string | number) => {
+		if (event.target.checked) {
 			if (!value) value = []
 			value = [key, ...value]
 		} else {

src/components/CheckboxVirtualList.svelte

@@ -11,8 +11,8 @@
 	export let value = []
 	export let options: Option[] = []
 
-	const handleChange = (e, key) => {
-		if (e.target.checked) {
+	const handleChange = (event: any, key: string | number) => {
+		if (event.target.checked) {
 			if (!value) value = []
 			value = [key, ...value]
 		} else {

src/components/FileUpload.svelte

@@ -3,8 +3,8 @@
 	import IconUpload from 'virtual:icons/heroicons-outline/upload'
 	import IconFile from 'virtual:icons/lucide/file'
 	import { t } from 'svelte-intl-precompile'
-	import Button from 'omorphia/components/Button.svelte'
-	import { classCombine } from 'omorphia/utils/classCombine'
+	import Button from './Button.svelte'
+	import { classCombine } from '../utils/classCombine'
 
 	export let multiple = false
 	export let accept: string

src/components/ModalDeletion.svelte

@@ -19,8 +19,11 @@
 	const dispatch = createEventDispatcher()
 </script>
 
-<Modal title={$t(`modal.deletion.${type}.title`)} bind:open let:trigger bind:data>
-	<slot slot="trigger" name="trigger" {trigger} />
+<!-- @ts-ignore -->
+<Modal title={$t(`modal.deletion.${type}.title`)} bind:open bind:data>
+	<svelte:fragment slot="trigger" let:trigger>
+		<slot name="trigger" {trigger} />
+	</svelte:fragment>
 
 	{#if type === 'account' || 'project'}
 		<div class="important-banner">
@@ -35,18 +38,18 @@
 			{id} />
 	</Field>
 
-	<Button
-		color="danger"
-		slot="button"
-		disabled={key !== data.key}
-		let:close
-		on:click={() => {
-			close()
-			dispatch('deletion')
-		}}>
-		<IconTrash />
-		{$t(`modal.deletion.${type}.action`)}
-	</Button>
+	<svelte:fragment slot="button" let:close>
+		<Button
+			color="danger"
+			disabled={key !== data.key}
+			on:click={() => {
+				close()
+				dispatch('deletion')
+			}}>
+			<IconTrash />
+			{$t(`modal.deletion.${type}.action`)}
+		</Button>
+	</svelte:fragment>
 </Modal>
 
 <style lang="postcss">

src/components/TextInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { SvelteComponent } from 'svelte/internal'
-
 	export let placeholder = ''
-	export let icon: SvelteComponent = undefined
+	/** A Svelte component */
+	export let icon: any = undefined
 	export let value = ''
 	export let multiline = false
+	/** An ID for better accessibility */
 	export let id: string = undefined
 	export let fill = false
 </script>
@@ -41,14 +41,14 @@
 			border: none;
 			width: 100%;
 			max-width: 100%;
-
-			&.has-icon {
-				padding-left: 2.5rem;
-			}
 		}
 
 		input {
 			padding: 0.25rem 1rem;
+
+			&.has-icon {
+				padding-left: 2.5rem;
+			}
 		}
 
 		textarea {