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

packages/ui/src/components/servers/backups/BackupCreateModal.vue

@@ -4,14 +4,13 @@
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast">Name</span>
 			</label>
-			<input
+			<StyledInput
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
-				type="text"
-				class="w-full rounded-lg bg-bg-input p-4"
 				:placeholder="`Backup #${newBackupAmount}`"
-				maxlength="48"
+				:maxlength="48"
+				wrapper-class="w-full"
 			/>
 			<Transition
 				enter-active-class="transition-all duration-300 ease-out"
@@ -76,6 +75,7 @@ import {
 	injectNotificationManager,
 } from '../../../providers'
 import ButtonStyled from '../../base/ButtonStyled.vue'
+import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()