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/app-frontend/src/pages/instance/Mods.vue

@@ -2,19 +2,15 @@
 	<div>
 		<template v-if="projects?.length > 0">
 			<div class="flex items-center gap-2 mb-4">
-				<div class="iconified-input flex-grow">
-					<SearchIcon />
-					<input
-						v-model="searchFilter"
-						type="text"
-						:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
-						class="text-input search-input"
-						autocomplete="off"
-					/>
-					<Button class="r-btn" @click="() => (searchFilter = '')">
-						<XIcon />
-					</Button>
-				</div>
+				<StyledInput
+					v-model="searchFilter"
+					:icon="SearchIcon"
+					type="text"
+					:placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+					autocomplete="off"
+					clearable
+					wrapper-class="flex-grow"
+				/>
 				<AddContentButton :instance="instance" />
 			</div>
 			<div class="flex items-center justify-between">
@@ -268,10 +264,8 @@ import {
 	SlashIcon,
 	TrashIcon,
 	UpdatedIcon,
-	XIcon,
 } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
 	ContentListPanel,
 	defineMessages,
@@ -279,6 +273,7 @@ import {
 	OverflowMenu,
 	Pagination,
 	RadialHeader,
+	StyledInput,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'