add report page

src/lib/components/Input/Input.svelte

@@ -10,6 +10,7 @@
 	export let required = false;
 	export let disabled = false;
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+	export let pickyWidth = true;
 
 	export let inputElement: HTMLInputElement | undefined = undefined;
 
@@ -60,7 +61,10 @@
 					</span>
 				</label>
 			{/if}
-			<div class="relative flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
+			<div
+				class="relative flex items-center"
+				class:sm:max-w-[16rem]={type !== 'checkbox' && pickyWidth}
+			>
 				<input
 					class:checkbox={type === 'checkbox'}
 					class:checkbox-xs={type === 'checkbox' && size === 'xs'}

src/lib/components/Input/Textarea.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	export let id: string | null = null;
+	export let name: string | null = null;
+	export let value: string | null = null;
+	export let label: string | null = null;
+	export let notice: string | null = null;
+	export let required = false;
+	export let disabled = false;
+	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+	export let rows = 2;
+</script>
+
+<div>
+	{#if label}
+		<label class="label" for={id}>
+			<span class="label-text">
+				{label}
+				{#if required}
+					<span class="text-red-700">*</span>
+				{/if}
+			</span>
+		</label>
+	{/if}
+	<textarea
+		class="textarea textarea-bordered w-full"
+		class:textarea-xs={size === 'xs'}
+		class:textarea-sm={size === 'sm'}
+		class:textarea-md={size === 'md'}
+		class:textarea-lg={size === 'lg'}
+		{id}
+		{name}
+		{required}
+		{disabled}
+		{rows}
+		bind:value
+	/>
+	{#if notice}
+		<label class="label" for={id}>
+			<span class="label-text-alt">{notice}</span>
+		</label>
+	{/if}
+</div>