refactor: migrate all input fields to StyledInput (#5306)

* feat: StyledInput component

* migrate: auth pages to styledInput

* migrate: search/filter inputs

* migrate: dashboard inputs

* migrate: app frontend

* migrate: search related inputs

* migrate: all of app-frontend

* fix: missing inputs on app-frontend

* migrate: frontend

* feat: multiline

* migrate: textareas

* fix: storybook use text-primary

* fix: lint

* fix: merge conflict

* feat: cleanup

apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue

@@ -149,13 +149,13 @@
 								:disabled="false"
 								:heading-buttons="false"
 							/>
-							<textarea
+							<StyledInput
 								v-else
 								v-model="message"
-								type="text"
-								class="bg-bg-input h-[400px] w-full rounded-lg border border-solid border-surface-5 px-3 py-2 font-mono text-base"
+								multiline
 								placeholder="No message generated."
 								autocomplete="off"
+								input-class="h-[400px] font-mono"
 								@input="persistState"
 							/>
 						</div>
@@ -298,13 +298,12 @@
 													<span v-if="input.required" class="required">*</span>
 												</span>
 											</label>
-											<input
+											<StyledInput
 												:id="`input-${getActionId(action)}-${inputIndex}`"
 												v-model="textInputValues[`${getActionId(action)}-${inputIndex}`]"
-												type="text"
 												:placeholder="input.placeholder"
 												autocomplete="off"
-												@input="persistState"
+												@update:model-value="persistState"
 											/>
 										</template>
 									</div>
@@ -471,6 +470,7 @@ import {
 	MarkdownEditor,
 	OverflowMenu,
 	type OverflowMenuOption,
+	StyledInput,
 	useDebugLogger,
 } from '@modrinth/ui'
 import {

apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue

@@ -34,35 +34,32 @@
 					<label for="proof">
 						<span class="label__title">Proof</span>
 					</label>
-					<input
+					<StyledInput
 						id="proof"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).proof"
-						type="text"
 						autocomplete="off"
 						placeholder="Enter proof of status..."
-						@input="persistAll()"
+						@update:model-value="persistAll()"
 					/>
 					<label for="link">
 						<span class="label__title">Link</span>
 					</label>
-					<input
+					<StyledInput
 						id="link"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).url"
-						type="text"
 						autocomplete="off"
 						placeholder="Enter link of project..."
-						@input="persistAll()"
+						@update:model-value="persistAll()"
 					/>
 					<label for="title">
 						<span class="label__title">Title</span>
 					</label>
-					<input
+					<StyledInput
 						id="title"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).title"
-						type="text"
 						autocomplete="off"
 						placeholder="Enter title of project..."
-						@input="persistAll()"
+						@update:model-value="persistAll()"
 					/>
 				</div>
 			</div>
@@ -146,7 +143,7 @@
 
 <script setup lang="ts">
 import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { ButtonStyled, StyledInput } from '@modrinth/ui'
 import type {
 	ModerationFlameModpackItem,
 	ModerationJudgements,