refactor: StyledInput refactor -> Input components (#6733)

* feat: align style

* feat: new input components

* refactor: migrate to new input components

* refactor: rename component

* prepr

* chore: group inputs like buttons

* fix: lint

* feat: docs

* fix: lint

* fix: bugs

* prepr

* fix slug + adjust create server project

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/components/ui/library/group-instances-modal.vue

@@ -23,7 +23,7 @@
 
 		<div class="flex h-[400px] flex-col gap-3 overflow-y-auto bg-surface-2 py-4">
 			<div class="px-6">
-				<StyledInput
+				<Input
 					v-model="groupInstancesSearch"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchPlaceholder)"
@@ -96,8 +96,8 @@ import {
 	Button,
 	commonMessages,
 	defineMessages,
+	Input,
 	NewModal,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref, watch } from 'vue'

apps/app-frontend/src/components/ui/library/library-toolbar/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { PlusIcon, SearchIcon, SquarePlusIcon } from '@modrinth/assets'
-import { Button, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, Input, useVIntl } from '@modrinth/ui'
 import { computed, inject } from 'vue'
 
 import FilterMenu from '@/components/ui/library/library-toolbar/filter-menu.vue'
@@ -29,7 +29,7 @@ function openNewGroup() {
 <template>
 	<div class="flex flex-col gap-2">
 		<div class="flex flex-wrap gap-2">
-			<StyledInput
+			<Input
 				v-model="search"
 				:icon="SearchIcon"
 				type="text"

apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue

@@ -18,7 +18,7 @@
 			<label for="new-group-name" class="font-semibold text-contrast">
 				{{ formatMessage(messages.groupName) }}
 			</label>
-			<StyledInput
+			<Input
 				id="new-group-name"
 				ref="groupNameInput"
 				v-model="newGroupName"
@@ -32,7 +32,7 @@
 
 		<div class="flex h-[400px] flex-col gap-3 overflow-y-auto bg-surface-2 py-4">
 			<div class="px-6">
-				<StyledInput
+				<Input
 					v-model="newGroupSearch"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchInstance)"
@@ -103,15 +103,7 @@
 
 <script setup lang="ts">
 import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import {
-	Avatar,
-	Button,
-	defineMessages,
-	NewModal,
-	StyledInput,
-	TagItem,
-	useVIntl,
-} from '@modrinth/ui'
+import { Avatar, Button, defineMessages, Input, NewModal, TagItem, useVIntl } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { useLibrary } from '@/components/ui/library/use-library'
@@ -157,7 +149,7 @@ const {
 } = useLibrary()
 
 const modal = ref<InstanceType<typeof NewModal>>()
-const groupNameInput = ref<InstanceType<typeof StyledInput>>()
+const groupNameInput = ref<InstanceType<typeof Input>>()
 const groupNamesById = computed(
 	() => new Map(libraryGroups.value.map((group) => [group.id, group.name])),
 )