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

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

packages/hoppscotch-common/src/components.d.ts

@@ -1,202 +1,203 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
+import "@vue/runtime-core"
 
 export {}
 
-declare module '@vue/runtime-core' {
+declare module "@vue/runtime-core" {
   export interface GlobalComponents {
-    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
+    AppActionHandler: typeof import("./components/app/ActionHandler.vue")["default"]
-    AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
+    AppAnnouncement: typeof import("./components/app/Announcement.vue")["default"]
-    AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
+    AppDeveloperOptions: typeof import("./components/app/DeveloperOptions.vue")["default"]
-    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
+    AppFooter: typeof import("./components/app/Footer.vue")["default"]
-    AppFooter: typeof import('./components/app/Footer.vue')['default']
+    AppGitHubStarButton: typeof import("./components/app/GitHubStarButton.vue")["default"]
-    AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
+    AppHeader: typeof import("./components/app/Header.vue")["default"]
-    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppInterceptor: typeof import("./components/app/Interceptor.vue")["default"]
-    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
+    AppLogo: typeof import("./components/app/Logo.vue")["default"]
-    AppLogo: typeof import('./components/app/Logo.vue')['default']
+    AppOptions: typeof import("./components/app/Options.vue")["default"]
-    AppOptions: typeof import('./components/app/Options.vue')['default']
+    AppPaneLayout: typeof import("./components/app/PaneLayout.vue")["default"]
-    AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
+    AppShare: typeof import("./components/app/Share.vue")["default"]
-    AppShare: typeof import('./components/app/Share.vue')['default']
+    AppShortcuts: typeof import("./components/app/Shortcuts.vue")["default"]
-    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
+    AppShortcutsEntry: typeof import("./components/app/ShortcutsEntry.vue")["default"]
-    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
+    AppShortcutsPrompt: typeof import("./components/app/ShortcutsPrompt.vue")["default"]
-    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
+    AppSidenav: typeof import("./components/app/Sidenav.vue")["default"]
-    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
+    AppSpotlight: typeof import("./components/app/spotlight/index.vue")["default"]
-    AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default']
+    AppSpotlightEntry: typeof import("./components/app/spotlight/Entry.vue")["default"]
-    AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
+    AppSpotlightEntryGQLHistory: typeof import("./components/app/spotlight/entry/GQLHistory.vue")["default"]
-    AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
+    AppSpotlightEntryRESTHistory: typeof import("./components/app/spotlight/entry/RESTHistory.vue")["default"]
-    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
+    AppSupport: typeof import("./components/app/Support.vue")["default"]
-    AppSupport: typeof import('./components/app/Support.vue')['default']
+    ButtonPrimary: typeof import("./../../hoppscotch-ui/src/components/button/Primary.vue")["default"]
-    ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
+    ButtonSecondary: typeof import("./../../hoppscotch-ui/src/components/button/Secondary.vue")["default"]
-    ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
+    Collections: typeof import("./components/collections/index.vue")["default"]
-    Collections: typeof import('./components/collections/index.vue')['default']
+    CollectionsAdd: typeof import("./components/collections/Add.vue")["default"]
-    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
+    CollectionsAddFolder: typeof import("./components/collections/AddFolder.vue")["default"]
-    CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
+    CollectionsAddRequest: typeof import("./components/collections/AddRequest.vue")["default"]
-    CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default']
+    CollectionsCollection: typeof import("./components/collections/Collection.vue")["default"]
-    CollectionsCollection: typeof import('./components/collections/Collection.vue')['default']
+    CollectionsEdit: typeof import("./components/collections/Edit.vue")["default"]
-    CollectionsEdit: typeof import('./components/collections/Edit.vue')['default']
+    CollectionsEditFolder: typeof import("./components/collections/EditFolder.vue")["default"]
-    CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default']
+    CollectionsEditRequest: typeof import("./components/collections/EditRequest.vue")["default"]
-    CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default']
+    CollectionsGraphql: typeof import("./components/collections/graphql/index.vue")["default"]
-    CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default']
+    CollectionsGraphqlAdd: typeof import("./components/collections/graphql/Add.vue")["default"]
-    CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default']
+    CollectionsGraphqlAddFolder: typeof import("./components/collections/graphql/AddFolder.vue")["default"]
-    CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default']
+    CollectionsGraphqlAddRequest: typeof import("./components/collections/graphql/AddRequest.vue")["default"]
-    CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default']
+    CollectionsGraphqlCollection: typeof import("./components/collections/graphql/Collection.vue")["default"]
-    CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default']
+    CollectionsGraphqlEdit: typeof import("./components/collections/graphql/Edit.vue")["default"]
-    CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default']
+    CollectionsGraphqlEditFolder: typeof import("./components/collections/graphql/EditFolder.vue")["default"]
-    CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default']
+    CollectionsGraphqlEditRequest: typeof import("./components/collections/graphql/EditRequest.vue")["default"]
-    CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default']
+    CollectionsGraphqlFolder: typeof import("./components/collections/graphql/Folder.vue")["default"]
-    CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default']
+    CollectionsGraphqlImportExport: typeof import("./components/collections/graphql/ImportExport.vue")["default"]
-    CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default']
+    CollectionsGraphqlRequest: typeof import("./components/collections/graphql/Request.vue")["default"]
-    CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
+    CollectionsImportExport: typeof import("./components/collections/ImportExport.vue")["default"]
-    CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
+    CollectionsMyCollections: typeof import("./components/collections/MyCollections.vue")["default"]
-    CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
+    CollectionsRequest: typeof import("./components/collections/Request.vue")["default"]
-    CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
+    CollectionsSaveRequest: typeof import("./components/collections/SaveRequest.vue")["default"]
-    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
+    CollectionsTeamCollections: typeof import("./components/collections/TeamCollections.vue")["default"]
-    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
+    Environments: typeof import("./components/environments/index.vue")["default"]
-    Environments: typeof import('./components/environments/index.vue')['default']
+    EnvironmentsImportExport: typeof import("./components/environments/ImportExport.vue")["default"]
-    EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
+    EnvironmentsMy: typeof import("./components/environments/my/index.vue")["default"]
-    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
+    EnvironmentsMyDetails: typeof import("./components/environments/my/Details.vue")["default"]
-    EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
+    EnvironmentsMyEnvironment: typeof import("./components/environments/my/Environment.vue")["default"]
-    EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
+    EnvironmentsSelector: typeof import("./components/environments/Selector.vue")["default"]
-    EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
+    EnvironmentsTeams: typeof import("./components/environments/teams/index.vue")["default"]
-    EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default']
+    EnvironmentsTeamsDetails: typeof import("./components/environments/teams/Details.vue")["default"]
-    EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
+    EnvironmentsTeamsEnvironment: typeof import("./components/environments/teams/Environment.vue")["default"]
-    EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
+    FirebaseLogin: typeof import("./components/firebase/Login.vue")["default"]
-    EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
+    FirebaseLogout: typeof import("./components/firebase/Logout.vue")["default"]
-    FirebaseLogin: typeof import('./components/firebase/Login.vue')['default']
+    GraphqlAuthorization: typeof import("./components/graphql/Authorization.vue")["default"]
-    FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
+    GraphqlField: typeof import("./components/graphql/Field.vue")["default"]
-    GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
+    GraphqlRequest: typeof import("./components/graphql/Request.vue")["default"]
-    GraphqlField: typeof import('./components/graphql/Field.vue')['default']
+    GraphqlRequestOptions: typeof import("./components/graphql/RequestOptions.vue")["default"]
-    GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
+    GraphqlResponse: typeof import("./components/graphql/Response.vue")["default"]
-    GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
+    GraphqlSidebar: typeof import("./components/graphql/Sidebar.vue")["default"]
-    GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
+    GraphqlType: typeof import("./components/graphql/Type.vue")["default"]
-    GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
+    GraphqlTypeLink: typeof import("./components/graphql/TypeLink.vue")["default"]
-    GraphqlType: typeof import('./components/graphql/Type.vue')['default']
+    History: typeof import("./components/history/index.vue")["default"]
-    GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
+    HistoryGraphqlCard: typeof import("./components/history/graphql/Card.vue")["default"]
-    History: typeof import('./components/history/index.vue')['default']
+    HistoryRestCard: typeof import("./components/history/rest/Card.vue")["default"]
-    HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
+    HoppButtonPrimary: typeof import("@hoppscotch/ui")["HoppButtonPrimary"]
-    HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
+    HoppButtonSecondary: typeof import("@hoppscotch/ui")["HoppButtonSecondary"]
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppSmartAnchor: typeof import("@hoppscotch/ui")["HoppSmartAnchor"]
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAutoComplete: typeof import("@hoppscotch/ui")["HoppSmartAutoComplete"]
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartCheckbox: typeof import("@hoppscotch/ui")["HoppSmartCheckbox"]
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartConfirmModal: typeof import("@hoppscotch/ui")["HoppSmartConfirmModal"]
-    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
+    HoppSmartExpand: typeof import("@hoppscotch/ui")["HoppSmartExpand"]
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartFileChip: typeof import("@hoppscotch/ui")["HoppSmartFileChip"]
-    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
+    HoppSmartInput: typeof import("@hoppscotch/ui")["HoppSmartInput"]
-    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
+    HoppSmartIntersection: typeof import("@hoppscotch/ui")["HoppSmartIntersection"]
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartItem: typeof import("@hoppscotch/ui")["HoppSmartItem"]
-    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartLink: typeof import("@hoppscotch/ui")["HoppSmartLink"]
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartModal: typeof import("@hoppscotch/ui")["HoppSmartModal"]
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartPicture: typeof import("@hoppscotch/ui")["HoppSmartPicture"]
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
+    HoppSmartPlaceholder: typeof import("@hoppscotch/ui")["HoppSmartPlaceholder"]
-    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
+    HoppSmartProgressRing: typeof import("@hoppscotch/ui")["HoppSmartProgressRing"]
-    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
+    HoppSmartRadioGroup: typeof import("@hoppscotch/ui")["HoppSmartRadioGroup"]
-    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
+    HoppSmartSlideOver: typeof import("@hoppscotch/ui")["HoppSmartSlideOver"]
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartSpinner: typeof import("@hoppscotch/ui")["HoppSmartSpinner"]
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    HoppSmartTab: typeof import("@hoppscotch/ui")["HoppSmartTab"]
-    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartTabs: typeof import("@hoppscotch/ui")["HoppSmartTabs"]
-    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
+    HoppSmartToggle: typeof import("@hoppscotch/ui")["HoppSmartToggle"]
-    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
+    HoppSmartWindow: typeof import("@hoppscotch/ui")["HoppSmartWindow"]
-    HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
+    HoppSmartWindows: typeof import("@hoppscotch/ui")["HoppSmartWindows"]
-    HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
+    HttpAuthorization: typeof import("./components/http/Authorization.vue")["default"]
-    HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
+    HttpAuthorizationApiKey: typeof import("./components/http/authorization/ApiKey.vue")["default"]
-    HttpBody: typeof import('./components/http/Body.vue')['default']
+    HttpAuthorizationBasic: typeof import("./components/http/authorization/Basic.vue")["default"]
-    HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
+    HttpBody: typeof import("./components/http/Body.vue")["default"]
-    HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
+    HttpBodyParameters: typeof import("./components/http/BodyParameters.vue")["default"]
-    HttpHeaders: typeof import('./components/http/Headers.vue')['default']
+    HttpCodegenModal: typeof import("./components/http/CodegenModal.vue")["default"]
-    HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
+    HttpHeaders: typeof import("./components/http/Headers.vue")["default"]
-    HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
+    HttpImportCurl: typeof import("./components/http/ImportCurl.vue")["default"]
-    HttpParameters: typeof import('./components/http/Parameters.vue')['default']
+    HttpOAuth2Authorization: typeof import("./components/http/OAuth2Authorization.vue")["default"]
-    HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']
+    HttpParameters: typeof import("./components/http/Parameters.vue")["default"]
-    HttpRawBody: typeof import('./components/http/RawBody.vue')['default']
+    HttpPreRequestScript: typeof import("./components/http/PreRequestScript.vue")["default"]
-    HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default']
+    HttpRawBody: typeof import("./components/http/RawBody.vue")["default"]
-    HttpRequest: typeof import('./components/http/Request.vue')['default']
+    HttpReqChangeConfirmModal: typeof import("./components/http/ReqChangeConfirmModal.vue")["default"]
-    HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default']
+    HttpRequest: typeof import("./components/http/Request.vue")["default"]
-    HttpRequestTab: typeof import('./components/http/RequestTab.vue')['default']
+    HttpRequestOptions: typeof import("./components/http/RequestOptions.vue")["default"]
-    HttpResponse: typeof import('./components/http/Response.vue')['default']
+    HttpRequestTab: typeof import("./components/http/RequestTab.vue")["default"]
-    HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
+    HttpResponse: typeof import("./components/http/Response.vue")["default"]
-    HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
+    HttpResponseMeta: typeof import("./components/http/ResponseMeta.vue")["default"]
-    HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
+    HttpSidebar: typeof import("./components/http/Sidebar.vue")["default"]
-    HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
+    HttpTestResult: typeof import("./components/http/TestResult.vue")["default"]
-    HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
+    HttpTestResultEntry: typeof import("./components/http/TestResultEntry.vue")["default"]
-    HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
+    HttpTestResultEnv: typeof import("./components/http/TestResultEnv.vue")["default"]
-    HttpTests: typeof import('./components/http/Tests.vue')['default']
+    HttpTestResultReport: typeof import("./components/http/TestResultReport.vue")["default"]
-    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
+    HttpTests: typeof import("./components/http/Tests.vue")["default"]
-    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
+    HttpURLEncodedParams: typeof import("./components/http/URLEncodedParams.vue")["default"]
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideAlertTriangle: typeof import("~icons/lucide/alert-triangle")["default"]
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
+    IconLucideArrowLeft: typeof import("~icons/lucide/arrow-left")["default"]
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideCheckCircle: typeof import("~icons/lucide/check-circle")["default"]
-    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
+    IconLucideChevronRight: typeof import("~icons/lucide/chevron-right")["default"]
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
+    IconLucideGlobe: typeof import("~icons/lucide/globe")["default"]
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideHelpCircle: typeof import("~icons/lucide/help-circle")["default"]
-    IconLucideInfo: typeof import('~icons/lucide/info')['default']
+    IconLucideInbox: typeof import("~icons/lucide/inbox")["default"]
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
+    IconLucideInfo: typeof import("~icons/lucide/info")["default"]
-    IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
+    IconLucideLayers: typeof import("~icons/lucide/layers")["default"]
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideListEnd: typeof import("~icons/lucide/list-end")["default"]
-    IconLucideRss: typeof import('~icons/lucide/rss')['default']
+    IconLucideMinus: typeof import("~icons/lucide/minus")["default"]
-    IconLucideSearch: typeof import('~icons/lucide/search')['default']
+    IconLucideSearch: typeof import("~icons/lucide/search")["default"]
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideUsers: typeof import("~icons/lucide/users")["default"]
-    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
+    IconLucideVerified: typeof import("~icons/lucide/verified")["default"]
-    LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
+    LensesHeadersRenderer: typeof import("./components/lenses/HeadersRenderer.vue")["default"]
-    LensesRenderersAudioLensRenderer: typeof import('./components/lenses/renderers/AudioLensRenderer.vue')['default']
+    LensesHeadersRendererEntry: typeof import("./components/lenses/HeadersRendererEntry.vue")["default"]
-    LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
+    LensesRenderersAudioLensRenderer: typeof import("./components/lenses/renderers/AudioLensRenderer.vue")["default"]
-    LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default']
+    LensesRenderersHTMLLensRenderer: typeof import("./components/lenses/renderers/HTMLLensRenderer.vue")["default"]
-    LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default']
+    LensesRenderersImageLensRenderer: typeof import("./components/lenses/renderers/ImageLensRenderer.vue")["default"]
-    LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default']
+    LensesRenderersJSONLensRenderer: typeof import("./components/lenses/renderers/JSONLensRenderer.vue")["default"]
-    LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
+    LensesRenderersPDFLensRenderer: typeof import("./components/lenses/renderers/PDFLensRenderer.vue")["default"]
-    LensesRenderersVideoLensRenderer: typeof import('./components/lenses/renderers/VideoLensRenderer.vue')['default']
+    LensesRenderersRawLensRenderer: typeof import("./components/lenses/renderers/RawLensRenderer.vue")["default"]
-    LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
+    LensesRenderersVideoLensRenderer: typeof import("./components/lenses/renderers/VideoLensRenderer.vue")["default"]
-    LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
+    LensesRenderersXMLLensRenderer: typeof import("./components/lenses/renderers/XMLLensRenderer.vue")["default"]
-    ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
+    LensesResponseBodyRenderer: typeof import("./components/lenses/ResponseBodyRenderer.vue")["default"]
-    ProfileShortcodes: typeof import('./components/profile/Shortcodes.vue')['default']
+    ProfileShortcode: typeof import("./components/profile/Shortcode.vue")["default"]
-    ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default']
+    ProfileShortcodes: typeof import("./components/profile/Shortcodes.vue")["default"]
-    RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default']
+    ProfileUserDelete: typeof import("./components/profile/UserDelete.vue")["default"]
-    RealtimeConnectionConfig: typeof import('./components/realtime/ConnectionConfig.vue')['default']
+    RealtimeCommunication: typeof import("./components/realtime/Communication.vue")["default"]
-    RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
+    RealtimeConnectionConfig: typeof import("./components/realtime/ConnectionConfig.vue")["default"]
-    RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
+    RealtimeLog: typeof import("./components/realtime/Log.vue")["default"]
-    RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
+    RealtimeLogEntry: typeof import("./components/realtime/LogEntry.vue")["default"]
-    SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
+    RealtimeSubscription: typeof import("./components/realtime/Subscription.vue")["default"]
-    SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
+    SmartAccentModePicker: typeof import("./components/smart/AccentModePicker.vue")["default"]
-    SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
+    SmartAnchor: typeof import("./../../hoppscotch-ui/src/components/smart/Anchor.vue")["default"]
-    SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default']
+    SmartAutoComplete: typeof import("./../../hoppscotch-ui/src/components/smart/AutoComplete.vue")["default"]
-    SmartCheckbox: typeof import('./../../hoppscotch-ui/src/components/smart/Checkbox.vue')['default']
+    SmartChangeLanguage: typeof import("./components/smart/ChangeLanguage.vue")["default"]
-    SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default']
+    SmartCheckbox: typeof import("./../../hoppscotch-ui/src/components/smart/Checkbox.vue")["default"]
-    SmartConfirmModal: typeof import('./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue')['default']
+    SmartColorModePicker: typeof import("./components/smart/ColorModePicker.vue")["default"]
-    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
+    SmartConfirmModal: typeof import("./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue")["default"]
-    SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
+    SmartEnvInput: typeof import("./components/smart/EnvInput.vue")["default"]
-    SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
+    SmartExpand: typeof import("./../../hoppscotch-ui/src/components/smart/Expand.vue")["default"]
-    SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
+    SmartFileChip: typeof import("./../../hoppscotch-ui/src/components/smart/FileChip.vue")["default"]
-    SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
+    SmartFontSizePicker: typeof import("./components/smart/FontSizePicker.vue")["default"]
-    SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
+    SmartInput: typeof import("./../../hoppscotch-ui/src/components/smart/Input.vue")["default"]
-    SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
+    SmartIntersection: typeof import("./../../hoppscotch-ui/src/components/smart/Intersection.vue")["default"]
-    SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
+    SmartItem: typeof import("./../../hoppscotch-ui/src/components/smart/Item.vue")["default"]
-    SmartPicture: typeof import('./../../hoppscotch-ui/src/components/smart/Picture.vue')['default']
+    SmartLink: typeof import("./../../hoppscotch-ui/src/components/smart/Link.vue")["default"]
-    SmartPlaceholder: typeof import('./../../hoppscotch-ui/src/components/smart/Placeholder.vue')['default']
+    SmartModal: typeof import("./../../hoppscotch-ui/src/components/smart/Modal.vue")["default"]
-    SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
+    SmartPicture: typeof import("./../../hoppscotch-ui/src/components/smart/Picture.vue")["default"]
-    SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
+    SmartPlaceholder: typeof import("./../../hoppscotch-ui/src/components/smart/Placeholder.vue")["default"]
-    SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']
+    SmartProgressRing: typeof import("./../../hoppscotch-ui/src/components/smart/ProgressRing.vue")["default"]
-    SmartSlideOver: typeof import('./../../hoppscotch-ui/src/components/smart/SlideOver.vue')['default']
+    SmartRadio: typeof import("./../../hoppscotch-ui/src/components/smart/Radio.vue")["default"]
-    SmartSpinner: typeof import('./../../hoppscotch-ui/src/components/smart/Spinner.vue')['default']
+    SmartRadioGroup: typeof import("./../../hoppscotch-ui/src/components/smart/RadioGroup.vue")["default"]
-    SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
+    SmartSlideOver: typeof import("./../../hoppscotch-ui/src/components/smart/SlideOver.vue")["default"]
-    SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default']
+    SmartSpinner: typeof import("./../../hoppscotch-ui/src/components/smart/Spinner.vue")["default"]
-    SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default']
+    SmartTab: typeof import("./../../hoppscotch-ui/src/components/smart/Tab.vue")["default"]
-    SmartTree: typeof import('./components/smart/Tree.vue')['default']
+    SmartTabs: typeof import("./../../hoppscotch-ui/src/components/smart/Tabs.vue")["default"]
-    SmartTreeBranch: typeof import('./components/smart/TreeBranch.vue')['default']
+    SmartToggle: typeof import("./../../hoppscotch-ui/src/components/smart/Toggle.vue")["default"]
-    SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
+    SmartTree: typeof import("./components/smart/Tree.vue")["default"]
-    SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
+    SmartTreeBranch: typeof import("./components/smart/TreeBranch.vue")["default"]
-    TabPrimary: typeof import('./components/tab/Primary.vue')['default']
+    SmartWindow: typeof import("./../../hoppscotch-ui/src/components/smart/Window.vue")["default"]
-    TabSecondary: typeof import('./components/tab/Secondary.vue')['default']
+    SmartWindows: typeof import("./../../hoppscotch-ui/src/components/smart/Windows.vue")["default"]
-    Teams: typeof import('./components/teams/index.vue')['default']
+    TabPrimary: typeof import("./components/tab/Primary.vue")["default"]
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    TabSecondary: typeof import("./components/tab/Secondary.vue")["default"]
-    TeamsEdit: typeof import('./components/teams/Edit.vue')['default']
+    Teams: typeof import("./components/teams/index.vue")["default"]
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
+    TeamsAdd: typeof import("./components/teams/Add.vue")["default"]
-    TeamsMemberStack: typeof import('./components/teams/MemberStack.vue')['default']
+    TeamsEdit: typeof import("./components/teams/Edit.vue")["default"]
-    TeamsModal: typeof import('./components/teams/Modal.vue')['default']
+    TeamsInvite: typeof import("./components/teams/Invite.vue")["default"]
-    TeamsTeam: typeof import('./components/teams/Team.vue')['default']
+    TeamsMemberStack: typeof import("./components/teams/MemberStack.vue")["default"]
-    Tippy: typeof import('vue-tippy')['Tippy']
+    TeamsModal: typeof import("./components/teams/Modal.vue")["default"]
-    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
+    TeamsTeam: typeof import("./components/teams/Team.vue")["default"]
-    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
+    Tippy: typeof import("vue-tippy")["Tippy"]
+    WorkspaceCurrent: typeof import("./components/workspace/Current.vue")["default"]
+    WorkspaceSelector: typeof import("./components/workspace/Selector.vue")["default"]
   }
-
 }

packages/hoppscotch-common/src/components/app/Shortcuts.vue

@@ -4,15 +4,13 @@
       <div
         class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
       >
-        <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
+        <HoppSmartInput
-          <input
+          v-model="filterText"
-            v-model="filterText"
+          type="search"
-            type="search"
+          styles="px-6 py-4 border-b border-dividerLight"
-            autocomplete="off"
+          :placeholder="`${t('action.search')}`"
-            class="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
+          input-styles="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
-            :placeholder="`${t('action.search')}`"
+        />
-          />
-        </div>
       </div>
       <div class="flex flex-col divide-y divide-dividerLight">
         <HoppSmartPlaceholder
@@ -21,6 +19,7 @@
         >
           <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
         </HoppSmartPlaceholder>
+
         <details
           v-for="(sectionResults, sectionTitle) in shortcutsResults"
           v-else

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

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

packages/hoppscotch-common/src/components/collections/AddFolder.vue

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="name"
-          id="selectLabelAddFolder"
+        placeholder=" "
-          v-model="name"
+        input-styles="floating-input"
-          v-focus
+        :label="t('action.label')"
-          class="input floating-input"
+        @submit="addFolder"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addFolder"
-        />
-        <label for="selectLabelAddFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/collections/AddRequest.vue

@@ -6,19 +6,13 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="name"
-          id="selectLabelAddRequest"
+        placeholder=" "
-          v-model="name"
+        :label="t('action.label')"
-          v-focus
+        input-styles="floating-input"
-          class="input floating-input"
+        @submit="addRequest"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addRequest"
-        />
-        <label for="selectLabelAddRequest">{{ t("action.label") }}</label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/collections/Edit.vue

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

packages/hoppscotch-common/src/components/collections/EditFolder.vue

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="name"
-          id="selectLabelEditFolder"
+        placeholder=" "
-          v-model="name"
+        :label="t('action.label')"
-          v-focus
+        input-styles="floating-input"
-          class="input floating-input"
+        @submit="editFolder"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="editFolder"
-        />
-        <label for="selectLabelEditFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/collections/EditRequest.vue

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

packages/hoppscotch-common/src/components/collections/SaveRequest.vue

@@ -8,21 +8,15 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
+        <HoppSmartInput
-          <input
+          v-model="requestName"
-            id="selectLabelSaveReq"
+          styles="relative flex"
-            v-model="requestName"
+          placeholder=" "
-            v-focus
+          :label="t('request.name')"
-            class="input floating-input"
+          input-styles="floating-input"
-            placeholder=" "
+          @submit="saveRequestAs"
-            type="text"
+        />
-            autocomplete="off"
+
-            @keyup.enter="saveRequestAs"
-          />
-          <label for="selectLabelSaveReq">
-            {{ t("request.name") }}
-          </label>
-        </div>
         <label class="p-4">
           {{ t("collection.select_location") }}
         </label>

packages/hoppscotch-common/src/components/collections/graphql/Add.vue

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

packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue

@@ -6,21 +6,13 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="name"
-          id="selectLabelGqlAddFolder"
+        placeholder=" "
-          v-model="name"
+        :label="t('action.label')"
-          v-focus
+        input-styles="floating-input"
-          class="input floating-input"
+        @submit="addFolder"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addFolder"
-        />
-        <label for="selectLabelGqlAddFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="name"
-          id="selectLabelGqlAddRequest"
+        placeholder=" "
-          v-model="name"
+        :label="t('action.label')"
-          v-focus
+        input-styles="floating-input"
-          class="input floating-input"
+        @submit="addRequest"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addRequest"
-        />
-        <label for="selectLabelGqlAddRequest">
-          {{ t("action.label") }}
-        </label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/collections/graphql/Edit.vue

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

packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue

@@ -6,21 +6,13 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="name"
-          id="selectLabelGqlEditFolder"
+        placeholder=" "
-          v-model="name"
+        :label="t('action.label')"
-          v-focus
+        input-styles="floating-input"
-          class="input floating-input"
+        @submit="editFolder"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="editFolder"
-        />
-        <label for="selectLabelGqlEditFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="requestUpdateData.name"
-          id="selectLabelGqlEditReq"
+        placeholder=" "
-          v-model="requestUpdateData.name"
+        :label="t('action.label')"
-          v-focus
+        input-styles="floating-input"
-          class="input floating-input"
+        @submit="saveRequest"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="saveRequest"
-        />
-        <label for="selectLabelGqlEditReq">
-          {{ t("action.label") }}
-        </label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -11,7 +11,7 @@
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent"
+        class="py-2 pl-4 pr-2 bg-transparent !border-0"
       />
       <div
         class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"

packages/hoppscotch-common/src/components/collections/index.vue

@@ -18,12 +18,12 @@
       "
     >
       <WorkspaceCurrent :section="t('tab.collections')" />
-      <input
+
+      <HoppSmartInput
         v-model="filterTexts"
-        type="search"
-        autocomplete="off"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent"
+        input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
+        type="search"
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -7,22 +7,15 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
+        <HoppSmartInput
-          <input
+          v-model="name"
-            id="selectLabelEnvEdit"
+          placeholder=" "
-            v-model="name"
+          :label="t('action.label')"
-            v-focus
+          input-styles="floating-input"
-            class="input floating-input"
+          :disabled="editingEnvironmentIndex === 'Global'"
-            placeholder=" "
+          @submit="saveEnvironment"
-            type="text"
+        />
-            autocomplete="off"
+
-            :disabled="editingEnvironmentIndex === 'Global'"
-            @keyup.enter="saveEnvironment"
-          />
-          <label for="selectLabelEnvEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}

packages/hoppscotch-common/src/components/environments/teams/Details.vue

@@ -7,23 +7,15 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="relative flex">
+        <HoppSmartInput
-          <input
+          v-model="name"
-            id="selectLabelEnvEdit"
+          placeholder=" "
-            v-model="name"
+          :input-styles="['floating-input', isViewer && 'opacity-25']"
-            v-focus
+          :label="t('action.label')"
-            class="input floating-input"
+          :disabled="isViewer"
-            :class="isViewer && 'opacity-25'"
+          @submit="saveEnvironment"
-            placeholder=""
+        />
-            type="text"
+
-            autocomplete="off"
-            :disabled="isViewer"
-            @keyup.enter="saveEnvironment"
-          />
-          <label for="selectLabelEnvEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}

packages/hoppscotch-common/src/components/firebase/Login.vue

@@ -37,24 +37,14 @@
         class="flex flex-col space-y-2"
         @submit.prevent="signInWithEmail"
       >
-        <div class="flex flex-col">
+        <HoppSmartInput
-          <input
+          v-model="form.email"
-            id="email"
+          type="email"
-            v-model="form.email"
+          placeholder=" "
-            v-focus
+          :label="t('auth.email')"
-            class="input floating-input"
+          input-styles="floating-input"
-            placeholder=" "
+        />
-            type="email"
+
-            name="email"
-            autocomplete="off"
-            required
-            spellcheck="false"
-            autofocus
-          />
-          <label for="email">
-            {{ t("auth.email") }}
-          </label>
-        </div>
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"

packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue

@@ -18,15 +18,13 @@
       </span>
       <template #content="{ hide }">
         <div class="flex flex-col space-y-2">
-          <div class="sticky z-10 top-0 flex-shrink-0 overflow-x-auto">
+          <HoppSmartInput
-            <input
+            v-model="searchQuery"
-              v-model="searchQuery"
+            styles="ticky z-10 top-0 flex-shrink-0 overflow-x-auto"
-              type="search"
+            :placeholder="`${t('action.search')}`"
-              autocomplete="off"
+            type="search"
-              class="flex w-full p-4 py-2 input !bg-primaryContrast"
+            input-styles="flex w-full p-4 py-2 input !bg-primaryContrast"
-              :placeholder="`${t('action.search')}`"
+          />
-            />
-          </div>
           <div
             ref="tippyActions"
             class="flex flex-col focus:outline-none"

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">
+      <HoppSmartInput
-        <input
+        v-model="name"
-          id="selectLabelTeamAdd"
+        :label="t('action.label')"
-          v-model="name"
+        placeholder=" "
-          v-focus
+        input-styles="floating-input"
-          class="input floating-input"
+        @submit="addNewTeam"
-          placeholder=" "
+      />
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addNewTeam"
-        />
-        <label for="selectLabelTeamAdd">
-          {{ t("action.label") }}
-        </label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -2,21 +2,13 @@
   <HoppSmartModal v-if="show" dialog :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
+        <HoppSmartInput
-          <input
+          v-model="name"
-            id="selectLabelTeamEdit"
+          placeholder=" "
-            v-model="name"
+          :label="t('action.label')"
-            v-focus
+          input-styles="floating-input"
-            class="input floating-input"
+          @submit="saveTeam"
-            placeholder=" "
+        />
-            type="text"
-            autocomplete="off"
-            @keyup.enter="saveTeam"
-          />
-          <label for="selectLabelTeamEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
         <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.members") }}

packages/hoppscotch-common/src/pages/profile.vue

@@ -100,55 +100,45 @@
                     <label for="displayName">
                       {{ t("settings.profile_name") }}
                     </label>
-                    <form
+                    <HoppSmartInput
-                      class="flex mt-2 md:max-w-sm"
+                      v-model="displayName"
-                      @submit.prevent="updateDisplayName"
+                      styles="mt-2 md:max-w-sm"
+                      :placeholder="`${t('settings.profile_name')}`"
                     >
-                      <input
+                      <template #button>
-                        id="displayName"
+                        <HoppButtonSecondary
-                        v-model="displayName"
+                          filled
-                        class="input"
+                          outline
-                        :placeholder="`${t('settings.profile_name')}`"
+                          :label="t('action.save')"
-                        type="text"
+                          class="ml-2 min-w-16"
-                        autocomplete="off"
+                          type="submit"
-                        required
+                          :loading="updatingDisplayName"
-                      />
+                          @click="updateDisplayName"
-                      <HoppButtonSecondary
+                        />
-                        filled
+                      </template>
-                        outline
+                    </HoppSmartInput>
-                        :label="t('action.save')"
-                        class="ml-2 min-w-16"
-                        type="submit"
-                        :loading="updatingDisplayName"
-                      />
-                    </form>
                   </div>
                   <div class="py-4">
                     <label for="emailAddress">
                       {{ t("settings.profile_email") }}
                     </label>
-                    <form
+                    <HoppSmartInput
-                      class="flex mt-2 md:max-w-sm"
+                      v-model="emailAddress"
-                      @submit.prevent="updateEmailAddress"
+                      styles="flex mt-2 md:max-w-sm"
+                      :placeholder="`${t('settings.profile_name')}`"
                     >
-                      <input
+                      <template #button>
-                        id="emailAddress"
+                        <HoppButtonSecondary
-                        v-model="emailAddress"
+                          filled
-                        class="input"
+                          outline
-                        :placeholder="`${t('settings.profile_name')}`"
+                          :label="t('action.save')"
-                        type="email"
+                          class="ml-2 min-w-16"
-                        autocomplete="off"
+                          type="submit"
-                        required
+                          :loading="updatingEmailAddress"
-                      />
+                          @click="updateEmailAddress"
-                      <HoppButtonSecondary
+                        />
-                        filled
+                      </template>
-                        outline
+                    </HoppSmartInput>
-                        :label="t('action.save')"
-                        class="ml-2 min-w-16"
-                        type="submit"
-                        :loading="updatingEmailAddress"
-                      />
-                    </form>
                   </div>
                 </section>
 
@@ -208,7 +198,6 @@ import { ref, watchEffect, computed } from "vue"
 import { platform } from "~/platform"
 
 import { invokeAction } from "~/helpers/actions"
-
 import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
@@ -251,9 +240,9 @@ const loadingCurrentUser = computed(() => {
   else return false
 })
 
-const displayName = ref(currentUser.value?.displayName)
+const displayName = ref(currentUser.value?.displayName || "")
 const updatingDisplayName = ref(false)
-watchEffect(() => (displayName.value = currentUser.value?.displayName))
+watchEffect(() => (displayName.value = currentUser.value?.displayName || ""))
 
 const updateDisplayName = () => {
   updatingDisplayName.value = true
@@ -270,9 +259,9 @@ const updateDisplayName = () => {
     })
 }
 
-const emailAddress = ref(currentUser.value?.email)
+const emailAddress = ref(currentUser.value?.email || "")
 const updatingEmailAddress = ref(false)
-watchEffect(() => (emailAddress.value = currentUser.value?.email))
+watchEffect(() => (emailAddress.value = currentUser.value?.email || ""))
 
 const updateEmailAddress = () => {
   updatingEmailAddress.value = true

packages/hoppscotch-common/src/pages/realtime/websocket.vue

@@ -4,38 +4,35 @@
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
       >
-        <div class="inline-flex flex-1 space-x-2">
+        <HoppSmartInput
-          <input
+          v-model="url"
-            id="websocket-url"
+          type="url"
-            v-model="url"
+          styles="!inline-flex flex-1 space-x-2"
-            class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
+          input-styles="w-full px-4 py-2 border rounded !bg-primaryLight border-divider text-secondaryDark"
-            type="url"
+          :placeholder="`${t('websocket.url')}`"
-            autocomplete="off"
+          :disabled="
-            spellcheck="false"
+            connectionState === 'CONNECTED' || connectionState === 'CONNECTING'
-            :class="{ error: !isUrlValid }"
+          "
-            :placeholder="`${t('websocket.url')}`"
+          @submit="isUrlValid ? toggleConnection() : null"
-            :disabled="
+        >
-              connectionState === 'CONNECTED' ||
+          <template #button>
-              connectionState === 'CONNECTING'
+            <HoppButtonPrimary
-            "
+              id="connect"
-            @keyup.enter="isUrlValid ? toggleConnection() : null"
+              :disabled="!isUrlValid"
-          />
+              class="w-32"
-          <HoppButtonPrimary
+              name="connect"
-            id="connect"
+              :label="
-            :disabled="!isUrlValid"
+                connectionState === 'CONNECTING'
-            class="w-32"
+                  ? t('action.connecting')
-            name="connect"
+                  : connectionState === 'DISCONNECTED'
-            :label="
+                  ? t('action.connect')
-              connectionState === 'CONNECTING'
+                  : t('action.disconnect')
-                ? t('action.connecting')
+              "
-                : connectionState === 'DISCONNECTED'
+              :loading="connectionState === 'CONNECTING'"
-                ? t('action.connect')
+              @click="toggleConnection"
-                : t('action.disconnect')
+            />
-            "
+          </template>
-            :loading="connectionState === 'CONNECTING'"
+        </HoppSmartInput>
-            @click="toggleConnection"
-          />
-        </div>
       </div>
       <HoppSmartTabs
         v-model="selectedTab"

packages/hoppscotch-common/src/pages/settings.vue

@@ -193,20 +193,19 @@
               </div>
             </div>
             <div class="flex items-center py-4 space-x-2">
-              <div class="relative flex flex-col flex-1">
+              <HoppSmartInput
-                <input
+                v-model="PROXY_URL"
-                  id="url"
+                styles="flex-1"
-                  v-model="PROXY_URL"
+                placeholder=" "
-                  class="input floating-input"
+                input-styles="input floating-input"
-                  placeholder=" "
+                :disabled="!PROXY_ENABLED"
-                  type="url"
+              >
-                  autocomplete="off"
+                <template #label>
-                  :disabled="!PROXY_ENABLED"
+                  <label for="url">
-                />
+                    {{ t("settings.proxy_url") }}
-                <label for="url">
+                  </label>
-                  {{ t("settings.proxy_url") }}
+                </template>
-                </label>
+              </HoppSmartInput>
-              </div>
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('settings.reset_default')"

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -14,6 +14,22 @@ declare module '@vue/runtime-core' {
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
     AppToast: typeof import('./components/app/Toast.vue')['default']
     DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
     TeamsAdd: typeof import('./components/teams/Add.vue')['default']
     TeamsDetails: typeof import('./components/teams/Details.vue')['default']
     TeamsInvite: typeof import('./components/teams/Invite.vue')['default']

packages/hoppscotch-sh-admin/src/components/app/Login.vue

@@ -41,22 +41,14 @@
         class="flex flex-col space-y-4"
         @submit.prevent="signInWithEmail"
       >
-        <div class="flex flex-col">
+        <HoppSmartInput
-          <input
+          v-model="form.email"
-            id="email"
+          type="email"
-            v-model="form.email"
+          placeholder=" "
-            class="input floating-input"
+          input-styles="floating-input"
-            placeholder=" "
+          label="Email"
-            type="email"
+        />
-            name="email"
+
-            autocomplete="off"
-            required
-            spellcheck="false"
-            v-focus
-            autofocus
-          />
-          <label for="email"> Email </label>
-        </div>
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"

packages/hoppscotch-sh-admin/src/components/teams/Add.vue

@@ -18,18 +18,8 @@
             @input="(email: string) => getOwnerEmail(email)"
           />
         </div>
-        <div class="flex flex-col">
+        <label for="teamName"> {{ t('teams.name') }} </label>
-          <label for="teamName" class="py-2">{{ t('teams.name') }} </label>
+        <HoppSmartInput v-model="teamName" placeholder="" class="!my-2" />
-          <input
-            id="teamName"
-            v-model="teamName"
-            v-focus
-            class="input relative"
-            placeholder=""
-            type="email"
-            autocomplete="off"
-          />
-        </div>
       </div>
     </template>
     <template #footer>

packages/hoppscotch-sh-admin/src/components/teams/Details.vue

@@ -20,24 +20,26 @@
             '!border-accent': showRenameInput,
           }"
         >
-          <input
+          <HoppSmartInput
-            class="bg-transparent flex-1 p-3 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
-            type="text"
             v-model="newTeamName"
+            styles="bg-transparent flex-1 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
             placeholder="Team Name"
-            autofocus
             :disabled="!showRenameInput"
-            v-focus
+          >
-          />
+            <template #button>
-          <HoppButtonPrimary
+              <HoppButtonPrimary
-            class="!rounded-l-none"
+                class="!rounded-l-none"
-            filled
+                filled
-            :icon="showRenameInput ? IconSave : IconEdit"
+                :icon="showRenameInput ? IconSave : IconEdit"
-            :label="
+                :label="
-              showRenameInput ? `${t('teams.rename')}` : `${t('teams.edit')}`
+                  showRenameInput
-            "
+                    ? `${t('teams.rename')}`
-            @click="handleNameEdit()"
+                    : `${t('teams.edit')}`
-          />
+                "
+                @click="handleNameEdit()"
+              />
+            </template>
+          </HoppSmartInput>
         </div>
       </div>
 

packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue

@@ -6,19 +6,11 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HoppSmartInput
-        <input
+        v-model="email"
-          id="inviteUserEmail"
+        :label="t('users.email_address')"
-          v-model="email"
+        input-styles="floating-input"
-          v-focus
+      />
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="sendInvite"
-        />
-        <label for="inviteUserEmail">{{ t('users.email_address') }}</label>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-ui/src/components/smart/Input.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="relative flex" :class="styles">
+    <input
+      :id="inputID"
+      class="input"
+      :class="inputStyles"
+      v-model="inputText"
+      v-focus
+      :placeholder="placeholder"
+      :type="type"
+      @keyup.enter="emit('submit')"
+      autocomplete="off"
+      required
+      :disabled="disabled"
+    />
+
+    <label v-if="label.length > 0" :for="inputID"> {{ label }} </label>
+    <slot name="button"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+/*
+  This inputIDCounter is tracked in the global scope in order to ensure that each input has a unique ID.
+  When we use this component multiple times on the same page, we need to ensure that each input has a unique ID.
+  This is because the label's for attribute needs to match the input's id attribute.
+
+  That's why we use a global counter that increments each time we use this component.
+*/
+let inputIDCounter = 564275
+</script>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core"
+import { defineProps } from "vue"
+
+// Unique ID for input
+const inputID = `input-${inputIDCounter++}`
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    styles: string
+    modelValue: string | null
+    placeholder: string
+    inputStyles: string | (string | false)[]
+    type: string
+    label: string
+    disabled: boolean
+  }>(),
+  {
+    id: "",
+    styles: "",
+    modelValue: "",
+    placeholder: "",
+    inputStyles: "input",
+    type: "text",
+    label: "",
+    disabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "submit"): void
+  (e: "update:modelValue", v: string): void
+}>()
+
+const inputText = useVModel(props, "modelValue", emit)
+</script>

packages/hoppscotch-ui/src/components/smart/index.ts

@@ -4,6 +4,7 @@ export { default as HoppSmartCheckbox } from "./Checkbox.vue"
 export { default as HoppSmartConfirmModal } from "./ConfirmModal.vue"
 export { default as HoppSmartExpand } from "./Expand.vue"
 export { default as HoppSmartFileChip } from "./FileChip.vue"
+export { default as HoppSmartInput } from "./Input.vue"
 export { default as HoppSmartIntersection } from "./Intersection.vue"
 export { default as HoppSmartItem } from "./Item.vue"
 export { default as HoppSmartLink } from "./Link.vue"