make input size changeable

src/lib/components/Input/Input.svelte

@@ -10,16 +10,31 @@
 	export let placeholder: string | null = null;
 	export let required = false;
 	export let disabled = false;
+	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 
 	export let inputElement: HTMLInputElement | undefined = undefined;
 
 	let initialType = type;
+
+	let passwordEyeSize = {
+		xs: '14',
+		sm: '18',
+		md: '24',
+		lg: '30'
+	};
 </script>
 
 <!-- the cursor-not-allowed class must be set here because a disabled button does not respect the 'cursor' css property -->
 <div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
 	{#if type === 'submit'}
-		<input class="btn" {id} type="submit" {disabled} bind:value bind:this={inputElement} />
+		<input
+			class={`btn btn-${size}`}
+			{id}
+			type="submit"
+			{disabled}
+			bind:value
+			bind:this={inputElement}
+		/>
 	{:else}
 		<div>
 			{#if $$slots.label}
@@ -34,6 +49,7 @@
 			{/if}
 			<div class="relative flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
 				<input
+					class={type === 'checkbox' ? `checkbox-${size}` : `input-${size}`}
 					class:checkbox={type === 'checkbox'}
 					class:input,input-bordered,w-[100%]={type !== 'checkbox'}
 					class:pr-11={initialType === 'password'}
@@ -61,9 +77,17 @@
 						}}
 					>
 						{#if type === 'password'}
-							<IconSolid name="eye-slash-solid" />
+							<IconSolid
+								name="eye-slash-solid"
+								width={passwordEyeSize[size]}
+								height={passwordEyeSize[size]}
+							/>
 						{:else}
-							<IconSolid name="eye-solid" />
+							<IconSolid
+								name="eye-solid"
+								width={passwordEyeSize[size]}
+								height={passwordEyeSize[size]}
+							/>
 						{/if}
 					</button>
 				{/if}