feat: introducing a new smart input hoppscotch ui component (#3089)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

packages/hoppscotch-common/src/components/teams/Add.vue

@@ -1,21 +1,13 @@
 <template>
   <HoppSmartModal v-if="show" dialog :title="t('team.new')" @close="hideModal">
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelTeamAdd"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addNewTeam"
-        />
-        <label for="selectLabelTeamAdd">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        :label="t('action.label')"
+        placeholder=" "
+        input-styles="floating-input"
+        @submit="addNewTeam"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">