From cae18405062c7c32f7905c45d0437251edb5407f Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 24 Feb 2023 13:20:12 +0530
Subject: [PATCH] refactor: update hopp-ui to be independent (#2927)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
---
 packages/hoppscotch-common/package.json       |    2 +-
 packages/hoppscotch-common/src/App.vue        |    2 +-
 .../hoppscotch-common/src/components.d.ts     |   38 +-
 .../src/components/app/DeveloperOptions.vue   |    6 +-
 .../src/components/app/Footer.vue             |   42 +-
 .../src/components/app/Header.vue             |   18 +-
 .../src/components/app/Interceptor.vue        |    9 +-
 .../src/components/app/Options.vue            |   28 +-
 .../src/components/app/PowerSearch.vue        |    4 +-
 .../src/components/app/Share.vue              |    4 +-
 .../src/components/app/Shortcuts.vue          |    4 +-
 .../src/components/app/ShortcutsPrompt.vue    |    2 +-
 .../src/components/app/Sidenav.vue            |    4 +-
 .../src/components/app/Support.vue            |   18 +-
 .../src/components/collections/Add.vue        |    8 +-
 .../src/components/collections/AddFolder.vue  |    8 +-
 .../src/components/collections/AddRequest.vue |    8 +-
 .../src/components/collections/Collection.vue |   16 +-
 .../src/components/collections/Edit.vue       |    8 +-
 .../src/components/collections/EditFolder.vue |    8 +-
 .../components/collections/EditRequest.vue    |    8 +-
 .../components/collections/ImportExport.vue   |   18 +-
 .../components/collections/MyCollections.vue  |   10 +-
 .../src/components/collections/Request.vue    |   10 +-
 .../components/collections/SaveRequest.vue    |    8 +-
 .../collections/TeamCollections.vue           |   16 +-
 .../src/components/collections/TeamSelect.vue |   16 +-
 .../components/collections/graphql/Add.vue    |    8 +-
 .../collections/graphql/AddFolder.vue         |   12 +-
 .../collections/graphql/AddRequest.vue        |   12 +-
 .../collections/graphql/Collection.vue        |   18 +-
 .../components/collections/graphql/Edit.vue   |    8 +-
 .../collections/graphql/EditFolder.vue        |    8 +-
 .../collections/graphql/EditRequest.vue       |    8 +-
 .../components/collections/graphql/Folder.vue |   16 +-
 .../collections/graphql/ImportExport.vue      |   14 +-
 .../collections/graphql/Request.vue           |   12 +-
 .../components/collections/graphql/index.vue  |    8 +-
 .../src/components/collections/index.vue      |   14 +-
 .../components/environments/ChooseType.vue    |   20 +-
 .../components/environments/ImportExport.vue  |   16 +-
 .../src/components/environments/index.vue     |   18 +-
 .../components/environments/my/Details.vue    |   16 +-
 .../environments/my/Environment.vue           |   18 +-
 .../src/components/environments/my/index.vue  |    8 +-
 .../components/environments/teams/Details.vue |   18 +-
 .../environments/teams/Environment.vue        |   18 +-
 .../components/environments/teams/index.vue   |   16 +-
 .../src/components/firebase/Login.vue         |   24 +-
 .../src/components/firebase/Logout.vue        |    4 +-
 .../src/components/graphql/Authorization.vue  |   37 +-
 .../src/components/graphql/Request.vue        |    2 +-
 .../src/components/graphql/RequestOptions.vue |   66 +-
 .../src/components/graphql/Response.vue       |    8 +-
 .../src/components/graphql/Sidebar.vue        |   54 +-
 .../src/components/history/graphql/Card.vue   |    6 +-
 .../src/components/history/index.vue          |   16 +-
 .../src/components/history/rest/Card.vue      |    4 +-
 .../src/components/http/Authorization.vue     |   37 +-
 .../src/components/http/Body.vue              |   10 +-
 .../src/components/http/BodyParameters.vue    |   20 +-
 .../src/components/http/CodegenModal.vue      |   18 +-
 .../src/components/http/Headers.vue           |   30 +-
 .../src/components/http/ImportCurl.vue        |   18 +-
 .../components/http/OAuth2Authorization.vue   |    2 +-
 .../src/components/http/Parameters.vue        |   20 +-
 .../src/components/http/PreRequestScript.vue  |    8 +-
 .../src/components/http/RawBody.vue           |   10 +-
 .../components/http/ReqChangeConfirmModal.vue |   10 +-
 .../src/components/http/Request.vue           |   22 +-
 .../src/components/http/RequestOptions.vue    |   28 +-
 .../src/components/http/ResponseMeta.vue      |    2 +-
 .../src/components/http/Sidebar.vue           |   20 +-
 .../src/components/http/TestResult.vue        |    8 +-
 .../src/components/http/TestResultReport.vue  |    2 +-
 .../src/components/http/Tests.vue             |    8 +-
 .../src/components/http/URLEncodedParams.vue  |   20 +-
 .../src/components/lenses/HeadersRenderer.vue |    2 +-
 .../lenses/HeadersRendererEntry.vue           |    2 +-
 .../lenses/ResponseBodyRenderer.vue           |   16 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |    8 +-
 .../lenses/renderers/ImageLensRenderer.vue    |    2 +-
 .../lenses/renderers/JSONLensRenderer.vue     |   18 +-
 .../lenses/renderers/PDFLensRenderer.vue      |    2 +-
 .../lenses/renderers/RawLensRenderer.vue      |    6 +-
 .../lenses/renderers/XMLLensRenderer.vue      |    6 +-
 .../src/components/profile/Shortcode.vue      |    6 +-
 .../src/components/profile/Shortcodes.vue     |    8 +-
 .../src/components/profile/UserDelete.vue     |   12 +-
 .../src/components/realtime/Communication.vue |   20 +-
 .../components/realtime/ConnectionConfig.vue  |   12 +-
 .../src/components/realtime/Log.vue           |    8 +-
 .../src/components/realtime/LogEntry.vue      |   26 +-
 .../src/components/realtime/Subscription.vue  |   12 +-
 .../src/components/smart/AccentModePicker.vue |    2 +-
 .../src/components/smart/ChangeLanguage.vue   |    8 +-
 .../src/components/smart/ColorModePicker.vue  |    2 +-
 .../src/components/smart/FontSizePicker.vue   |    4 +-
 .../src/components/smart/Tree.vue             |    2 +-
 .../src/components/smart/TreeBranch.vue       |    2 +-
 .../src/components/tab/Primary.vue            |    4 +-
 .../src/components/tab/Secondary.vue          |    4 +-
 .../src/components/teams/Add.vue              |    8 +-
 .../src/components/teams/Edit.vue             |   22 +-
 .../src/components/teams/Invite.vue           |   39 +-
 .../src/components/teams/Modal.vue            |    4 +-
 .../src/components/teams/Team.vue             |   16 +-
 .../src/components/teams/index.vue            |    6 +-
 packages/hoppscotch-common/src/modules/ui.ts  |    5 +-
 packages/hoppscotch-common/src/pages/_.vue    |    9 +-
 .../hoppscotch-common/src/pages/enter.vue     |    2 +-
 .../hoppscotch-common/src/pages/join-team.vue |   12 +-
 .../hoppscotch-common/src/pages/profile.vue   |   36 +-
 .../hoppscotch-common/src/pages/r/_id.vue     |    6 +-
 .../hoppscotch-common/src/pages/realtime.vue  |    8 +-
 .../src/pages/realtime/mqtt.vue               |   18 +-
 .../src/pages/realtime/socketio.vue           |   37 +-
 .../src/pages/realtime/sse.vue                |    2 +-
 .../src/pages/realtime/websocket.vue          |   26 +-
 .../hoppscotch-common/src/pages/settings.vue  |   42 +-
 packages/hoppscotch-common/tsconfig.json      |    2 +-
 packages/hoppscotch-ui/README.md              |    2 +-
 packages/hoppscotch-ui/package.json           |   25 +-
 .../hoppscotch-ui/src/assets/scss/styles.scss |  440 ------
 packages/hoppscotch-ui/src/components.d.ts    |   37 -
 .../src/components/button/Primary.vue         |   47 +-
 .../src/components/button/Secondary.vue       |   42 +-
 .../src/components/button/index.ts            |    2 +
 .../hoppscotch-ui/src/components/index.ts     |   49 +-
 .../src/components/smart/Anchor.vue           |   24 +-
 .../src/components/smart/AutoComplete.vue     |   39 +-
 .../src/components/smart/ConfirmModal.vue     |   32 +-
 .../src/components/smart/Expand.vue           |   28 +-
 .../src/components/smart/Item.vue             |   59 +-
 .../src/components/smart/Link.vue             |   27 +-
 .../src/components/smart/Modal.vue            |    2 +-
 .../src/components/smart/Radio.vue            |   11 +-
 .../src/components/smart/RadioGroup.vue       |   12 +-
 .../src/components/smart/SlideOver.vue        |   25 +-
 .../src/components/smart/Spinner.vue          |    8 +-
 .../src/components/smart/Windows.vue          |  110 +-
 .../src/components/smart/index.ts             |   20 +
 packages/hoppscotch-ui/src/index.ts           |   35 +-
 packages/hoppscotch-ui/src/plugin.ts          |   30 +
 .../src/stories/Anchor.story.vue              |   19 +-
 .../src/stories/AutoComplete.story.vue        |   27 +-
 .../src/stories/Button.story.vue              |    8 +-
 .../src/stories/Checkbox.story.vue            |    4 +-
 .../src/stories/ConfirmModal.story.vue        |    9 +-
 .../src/stories/Expand.story.vue              |   20 +
 .../hoppscotch-ui/src/stories/Item.story.vue  |    6 +-
 .../hoppscotch-ui/src/stories/Link.story.vue  |   10 +-
 .../hoppscotch-ui/src/stories/Modal.story.vue |    8 +-
 .../src/stories/ProgressRing.story.vue        |    9 +-
 .../hoppscotch-ui/src/stories/Radio.story.vue |    5 +-
 .../src/stories/SlideOver.story.vue           |    7 +-
 .../src/stories/Spinner.story.vue             |    6 +-
 .../hoppscotch-ui/src/stories/Tab.story.vue   |   13 +-
 .../src/stories/Toggle.story.vue              |    3 +-
 .../src/stories/Window.story.vue              |   23 +-
 packages/hoppscotch-ui/tsconfig.json          |   41 +-
 packages/hoppscotch-ui/vite.config.ts         |   48 +-
 packages/hoppscotch-web/package.json          |    1 +
 packages/hoppscotch-web/vite.config.ts        |   10 +-
 pnpm-lock.yaml                                | 1203 +++++++++++++----
 165 files changed, 2134 insertions(+), 2069 deletions(-)
 delete mode 100644 packages/hoppscotch-ui/src/components.d.ts
 create mode 100644 packages/hoppscotch-ui/src/components/button/index.ts
 create mode 100644 packages/hoppscotch-ui/src/components/smart/index.ts
 create mode 100644 packages/hoppscotch-ui/src/plugin.ts
 create mode 100644 packages/hoppscotch-ui/src/stories/Expand.story.vue

diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json
index 34c92fb88..57e35b399 100644
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -90,7 +90,7 @@
     "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.0.16",
     "vue-tippy": "6.0.0-alpha.58",
-    "vuedraggable": "^4.1.0",
+    "vuedraggable-es": "^4.1.1",
     "wonka": "^4.0.15",
     "workbox-window": "^6.5.4",
     "yargs-parser": "^21.1.1"
diff --git a/packages/hoppscotch-common/src/App.vue b/packages/hoppscotch-common/src/App.vue
index de03b4aa4..8cf3e8e26 100644
--- a/packages/hoppscotch-common/src/App.vue
+++ b/packages/hoppscotch-common/src/App.vue
@@ -4,7 +4,7 @@
       v-if="isLoadingInitialRoute"
       class="flex flex-col items-center justify-center min-h-screen"
     >
-      <SmartSpinner />
+      <HoppSmartSpinner />
     </div>
     <ErrorPage v-if="errorInfo !== null" :error="errorInfo" />
     <RouterView v-else />
diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index 3b7ae649d..72ac2df75 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -26,8 +26,6 @@ declare module '@vue/runtime-core' {
     AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
     AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']
-    ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
-    ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
     Collections: typeof import('./components/collections/index.vue')['default']
     CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
     CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
@@ -75,6 +73,16 @@ declare module '@vue/runtime-core' {
     History: typeof import('./components/history/index.vue')['default']
     HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
     HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
+    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
     HttpBody: typeof import('./components/http/Body.vue')['default']
     HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
@@ -97,15 +105,9 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
-    IconLucideLoader: typeof import('~icons/lucide/loader')['default']
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
@@ -128,32 +130,12 @@ declare module '@vue/runtime-core' {
     RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
     RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
     SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
-    SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
-    SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
     SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default']
-    SmartCheckbox: typeof import('./../../hoppscotch-ui/src/components/smart/Checkbox.vue')['default']
     SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default']
-    SmartConfirmModal: typeof import('./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue')['default']
     SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
-    SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
-    SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
     SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
-    SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
-    SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
-    SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
-    SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
-    SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
-    SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
-    SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']
-    SmartSlideOver: typeof import('./../../hoppscotch-ui/src/components/smart/SlideOver.vue')['default']
-    SmartSpinner: typeof import('./../../hoppscotch-ui/src/components/smart/Spinner.vue')['default']
-    SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
-    SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default']
-    SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default']
     SmartTree: typeof import('./components/smart/Tree.vue')['default']
     SmartTreeBranch: typeof import('./components/smart/TreeBranch.vue')['default']
-    SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
-    SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
     TabPrimary: typeof import('./components/tab/Primary.vue')['default']
     TabSecondary: typeof import('./components/tab/Secondary.vue')['default']
     Teams: typeof import('./components/teams/index.vue')['default']
diff --git a/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue b/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
index f2f63346f..a94977acf 100644
--- a/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
+++ b/packages/hoppscotch-common/src/components/app/DeveloperOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('app.developer_option')"
@@ -10,7 +10,7 @@
         {{ t("app.developer_option_description") }}
       </p>
       <div class="flex flex-1">
-        <ButtonSecondary
+        <HoppButtonSecondary
           outline
           filled
           :icon="copyIcon"
@@ -19,7 +19,7 @@
         />
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/app/Footer.vue b/packages/hoppscotch-common/src/components/app/Footer.vue
index 3c02499bb..a6731e11d 100644
--- a/packages/hoppscotch-common/src/components/app/Footer.vue
+++ b/packages/hoppscotch-common/src/components/app/Footer.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="flex justify-between bg-primary">
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
           :icon="IconSidebar"
@@ -10,7 +10,7 @@
           :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
           @click="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
             'layout.zen_mode'
@@ -23,7 +23,7 @@
           @click="ZEN_MODE = !ZEN_MODE"
         />
         <tippy interactive trigger="click" theme="popover">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('settings.interceptor')"
             :icon="IconShieldCheck"
@@ -40,7 +40,7 @@
           theme="popover"
           :on-shown="() => tippyActions!.focus()"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             :icon="IconHelpCircle"
             class="!rounded-none"
             :label="`${t('app.help')}`"
@@ -55,7 +55,7 @@
               @keyup.c="chat!.$el.click()"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 ref="documentation"
                 :icon="IconBook"
                 :label="`${t('app.documentation')}`"
@@ -64,7 +64,7 @@
                 :shortcut="['D']"
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="shortcuts"
                 :icon="IconZap"
                 :label="`${t('app.keyboard_shortcuts')}`"
@@ -76,7 +76,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="chat"
                 :icon="IconMessageCircle"
                 :label="`${t('app.chat_with_us')}`"
@@ -88,14 +88,14 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconGift"
                 :label="`${t('app.whats_new')}`"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconActivity"
                 :label="t('app.status')"
                 to="https://status.hoppscotch.io"
@@ -103,21 +103,21 @@
                 @click="hide()"
               />
               <hr />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconGithub"
                 :label="`${t('app.github')}`"
                 to="https://github.com/hoppscotch/hoppscotch"
                 blank
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconTwitter"
                 :label="`${t('app.twitter')}`"
                 to="https://hoppscotch.io/twitter"
                 blank
                 @click="hide()"
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconUserPlus"
                 :label="`${t('app.invite')}`"
                 @click="
@@ -127,7 +127,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconLock"
                 :label="`${t('app.terms_and_privacy')}`"
                 to="https://docs.hoppscotch.io/privacy"
@@ -148,7 +148,7 @@
             </div>
           </template>
         </tippy>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
             'app.shortcuts'
@@ -156,14 +156,14 @@
           :icon="IconZap"
           @click="invokeAction('flyouts.keybinds.toggle')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconShare2"
           :title="t('request.share')"
           @click="nativeShare()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           :icon="IconColumns"
@@ -177,7 +177,7 @@
             'rotate-180': SIDEBAR_ON_LEFT,
           }"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
             :icon="IconSidebarOpen"
@@ -223,7 +223,7 @@ import { platform } from "~/platform"
 import { TippyComponent } from "vue-tippy"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { invokeAction } from "@helpers/actions"
-import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
+import { HoppSmartItem } from "@hoppscotch/ui"
 
 const t = useI18n()
 const showDeveloperOptions = ref(false)
@@ -274,7 +274,7 @@ const showDeveloperOptionModal = () => {
 
 // Template refs
 const tippyActions = ref<TippyComponent | null>(null)
-const documentation = ref<typeof SmartItem>()
-const shortcuts = ref<typeof SmartItem>()
-const chat = ref<typeof SmartItem>()
+const documentation = ref<typeof HoppSmartItem>()
+const shortcuts = ref<typeof HoppSmartItem>()
+const chat = ref<typeof HoppSmartItem>()
 </script>
diff --git a/packages/hoppscotch-common/src/components/app/Header.vue b/packages/hoppscotch-common/src/components/app/Header.vue
index f20e619cc..539d994c3 100644
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -10,7 +10,7 @@
           paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
         }"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
           :label="t('app.name')"
           to="/"
@@ -18,7 +18,7 @@
         <AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
       </div>
       <div class="inline-flex items-center space-x-2">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="showInstallButton"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('header.install_pwa')"
@@ -26,14 +26,14 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="installPWA()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t('app.search')} <kbd>/</kbd>`"
           :icon="IconSearch"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.search.toggle')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${
             mdAndLarger ? t('support.title') : t('app.options')
@@ -42,7 +42,7 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.support.toggle')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="currentUser === null"
           :icon="IconUploadCloud"
           :label="t('header.save_workspace')"
@@ -50,13 +50,13 @@
           class="hidden md:flex"
           @click="invokeAction('modals.login.toggle')"
         />
-        <ButtonPrimary
+        <HoppButtonPrimary
           v-if="currentUser === null"
           :label="t('header.login')"
           @click="invokeAction('modals.login.toggle')"
         />
         <div v-else class="inline-flex items-center space-x-2">
-          <ButtonPrimary
+          <HoppButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('team.invite_tooltip')"
             :label="t('team.invite')"
@@ -127,7 +127,7 @@
                     </span>
                   </div>
                   <hr />
-                  <SmartItem
+                  <HoppSmartItem
                     ref="profile"
                     to="/profile"
                     :icon="IconUser"
@@ -135,7 +135,7 @@
                     :shortcut="['P']"
                     @click="hide()"
                   />
-                  <SmartItem
+                  <HoppSmartItem
                     ref="settings"
                     to="/settings"
                     :icon="IconSettings"
diff --git a/packages/hoppscotch-common/src/components/app/Interceptor.vue b/packages/hoppscotch-common/src/components/app/Interceptor.vue
index 0bc4755e2..f54dbb110 100644
--- a/packages/hoppscotch-common/src/components/app/Interceptor.vue
+++ b/packages/hoppscotch-common/src/components/app/Interceptor.vue
@@ -8,12 +8,15 @@
         {{ t("settings.interceptor_description") }}
       </p>
     </div>
-    <SmartRadioGroup v-model="interceptorSelection" :radios="interceptors" />
+    <HoppSmartRadioGroup
+      v-model="interceptorSelection"
+      :radios="interceptors"
+    />
     <div
       v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
       class="flex space-x-2"
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
         blank
         :icon="IconChrome"
@@ -21,7 +24,7 @@
         outline
         class="!flex-1"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
         blank
         :icon="IconFirefox"
diff --git a/packages/hoppscotch-common/src/components/app/Options.vue b/packages/hoppscotch-common/src/components/app/Options.vue
index 33413c588..707c5cd9d 100644
--- a/packages/hoppscotch-common/src/components/app/Options.vue
+++ b/packages/hoppscotch-common/src/components/app/Options.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('app.options')"
@@ -11,7 +11,7 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("layout.name") }}
         </h2>
-        <SmartItem
+        <HoppSmartItem
           :icon="IconSidebar"
           :label="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
           :description="t('layout.collapse_sidebar')"
@@ -19,7 +19,7 @@
           active
           @click="expandNavigation"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconSidebarOpen"
           :label="SIDEBAR ? t('hide.collection') : t('show.collection')"
           :description="t('layout.collapse_collection')"
@@ -30,7 +30,7 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("support.title") }}
         </h2>
-        <SmartItem
+        <HoppSmartItem
           :icon="IconBook"
           :label="t('app.documentation')"
           to="https://docs.hoppscotch.io"
@@ -40,7 +40,7 @@
           blank
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconGift"
           :label="t('app.whats_new')"
           to="https://docs.hoppscotch.io/changelog"
@@ -50,7 +50,7 @@
           blank
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconActivity"
           :label="t('app.status')"
           to="https://status.hoppscotch.io"
@@ -60,7 +60,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconLock"
           :label="`${t('app.terms_and_privacy')}`"
           to="https://docs.hoppscotch.io/privacy"
@@ -73,7 +73,7 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("settings.follow") }}
         </h2>
-        <SmartItem
+        <HoppSmartItem
           :icon="IconDiscord"
           :label="t('app.discord')"
           to="https://hoppscotch.io/discord"
@@ -83,7 +83,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconTwitter"
           :label="t('app.twitter')"
           to="https://hoppscotch.io/twitter"
@@ -93,7 +93,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconGithub"
           :label="`${t('app.github')}`"
           to="https://github.com/hoppscotch/hoppscotch"
@@ -103,7 +103,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconMessageCircle"
           :label="t('app.chat_with_us')"
           :description="t('support.chat')"
@@ -111,7 +111,7 @@
           active
           @click="chatWithUs()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconUserPlus"
           :label="`${t('app.invite')}`"
           :description="t('shortcut.miscellaneous.invite')"
@@ -119,7 +119,7 @@
           active
           @click="expandInvite()"
         />
-        <SmartItem
+        <HoppSmartItem
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconShare2"
@@ -132,7 +132,7 @@
       </div>
       <AppShare :show="showShare" @hide-modal="showShare = false" />
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/app/PowerSearch.vue b/packages/hoppscotch-common/src/components/app/PowerSearch.vue
index 88873710c..88645191b 100644
--- a/packages/hoppscotch-common/src/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-common/src/components/app/PowerSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     styles="sm:max-w-lg"
     full-width
@@ -68,7 +68,7 @@
         </div>
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/app/Share.vue b/packages/hoppscotch-common/src/components/app/Share.vue
index 198aa5ee1..9b6635079 100644
--- a/packages/hoppscotch-common/src/components/app/Share.vue
+++ b/packages/hoppscotch-common/src/components/app/Share.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('app.invite_your_friends')"
@@ -35,7 +35,7 @@
         {{ t("app.invite_description") }}
       </p>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/app/Shortcuts.vue b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
index ec8c5c001..2adfd302a 100644
--- a/packages/hoppscotch-common/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
+  <HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
     <template #content>
       <div
         class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
@@ -76,7 +76,7 @@
         </details>
       </div>
     </template>
-  </SmartSlideOver>
+  </HoppSmartSlideOver>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue b/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
index 99cfbf431..1839a6bf3 100644
--- a/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
+++ b/packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue
@@ -32,7 +32,7 @@
         </div>
       </div>
     </div>
-    <ButtonSecondary
+    <HoppButtonSecondary
       :label="`${t('app.documentation')}`"
       to="https://docs.hoppscotch.io/features/response"
       :icon="IconExternalLink"
diff --git a/packages/hoppscotch-common/src/components/app/Sidenav.vue b/packages/hoppscotch-common/src/components/app/Sidenav.vue
index 212d997fc..7636a988e 100644
--- a/packages/hoppscotch-common/src/components/app/Sidenav.vue
+++ b/packages/hoppscotch-common/src/components/app/Sidenav.vue
@@ -1,7 +1,7 @@
 <template>
   <aside class="flex justify-between h-full md:flex-col">
     <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
-      <SmartLink
+      <HoppSmartLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"
         v-tippy="{
@@ -20,7 +20,7 @@
         <span v-if="EXPAND_NAVIGATION" class="nav-title">
           {{ t(navigation.title) }}
         </span>
-      </SmartLink>
+      </HoppSmartLink>
     </nav>
   </aside>
 </template>
diff --git a/packages/hoppscotch-common/src/components/app/Support.vue b/packages/hoppscotch-common/src/components/app/Support.vue
index 82e2aa8c7..cdf0668b3 100644
--- a/packages/hoppscotch-common/src/components/app/Support.vue
+++ b/packages/hoppscotch-common/src/components/app/Support.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('support.title')"
@@ -8,7 +8,7 @@
   >
     <template #body>
       <div class="flex flex-col space-y-2">
-        <SmartItem
+        <HoppSmartItem
           :icon="IconBook"
           :label="t('app.documentation')"
           to="https://docs.hoppscotch.io"
@@ -18,7 +18,7 @@
           blank
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconZap"
           :label="t('app.keyboard_shortcuts')"
           :description="t('support.shortcuts')"
@@ -26,7 +26,7 @@
           active
           @click="showShortcuts()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconGift"
           :label="t('app.whats_new')"
           to="https://docs.hoppscotch.io/changelog"
@@ -36,7 +36,7 @@
           blank
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconMessageCircle"
           :label="t('app.chat_with_us')"
           :description="t('support.chat')"
@@ -44,7 +44,7 @@
           active
           @click="chatWithUs()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconGitHub"
           :label="t('app.github')"
           to="https://hoppscotch.io/github"
@@ -54,7 +54,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconDiscord"
           :label="t('app.join_discord_community')"
           to="https://hoppscotch.io/discord"
@@ -64,7 +64,7 @@
           active
           @click="hideModal()"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconTwitter"
           :label="t('app.twitter')"
           to="https://hoppscotch.io/twitter"
@@ -76,7 +76,7 @@
         />
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/Add.vue b/packages/hoppscotch-common/src/components/collections/Add.vue
index a2f0575c0..1377f5621 100644
--- a/packages/hoppscotch-common/src/components/collections/Add.vue
+++ b/packages/hoppscotch-common/src/components/collections/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('collection.new')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="addNewCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/AddFolder.vue b/packages/hoppscotch-common/src/components/collections/AddFolder.vue
index ba0d56fb4..11126d8da 100644
--- a/packages/hoppscotch-common/src/components/collections/AddFolder.vue
+++ b/packages/hoppscotch-common/src/components/collections/AddFolder.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('folder.new')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="addFolder"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/AddRequest.vue b/packages/hoppscotch-common/src/components/collections/AddRequest.vue
index fba4fe5d9..23bcd729c 100644
--- a/packages/hoppscotch-common/src/components/collections/AddRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/AddRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('request.new')"
@@ -22,13 +22,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="addRequest"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -36,7 +36,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/Collection.vue b/packages/hoppscotch-common/src/components/collections/Collection.vue
index 7a96c7387..466e5b54e 100644
--- a/packages/hoppscotch-common/src/components/collections/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/Collection.vue
@@ -29,14 +29,14 @@
         </span>
       </span>
       <div v-if="!hasNoTeamAccess" class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFilePlus"
           :title="t('request.new')"
           class="hidden group-hover:inline-flex"
           @click="emit('add-request')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFolderPlus"
           :title="t('folder.new')"
@@ -51,7 +51,7 @@
             theme="popover"
             :on-shown="() => tippyActions!.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -68,7 +68,7 @@
                 @keyup.x="exportAction?.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="requestAction"
                   :icon="IconFilePlus"
                   :label="t('request.new')"
@@ -80,7 +80,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="folderAction"
                   :icon="IconFolderPlus"
                   :label="t('folder.new')"
@@ -92,7 +92,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="t('action.edit')"
@@ -104,7 +104,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="exportAction"
                   :icon="IconDownload"
                   :label="t('export.title')"
@@ -117,7 +117,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="t('action.delete')"
diff --git a/packages/hoppscotch-common/src/components/collections/Edit.vue b/packages/hoppscotch-common/src/components/collections/Edit.vue
index 65b348977..f1e61d9ab 100644
--- a/packages/hoppscotch-common/src/components/collections/Edit.vue
+++ b/packages/hoppscotch-common/src/components/collections/Edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('collection.edit')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="saveCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/EditFolder.vue b/packages/hoppscotch-common/src/components/collections/EditFolder.vue
index 58ec7549c..eb6423deb 100644
--- a/packages/hoppscotch-common/src/components/collections/EditFolder.vue
+++ b/packages/hoppscotch-common/src/components/collections/EditFolder.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('folder.edit')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="editFolder"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/EditRequest.vue b/packages/hoppscotch-common/src/components/collections/EditRequest.vue
index f08e8fbf1..6299ea0e8 100644
--- a/packages/hoppscotch-common/src/components/collections/EditRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/EditRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('modal.edit_request')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="editRequest"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/ImportExport.vue b/packages/hoppscotch-common/src/components/collections/ImportExport.vue
index f224f7b20..90badc53f 100644
--- a/packages/hoppscotch-common/src/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/ImportExport.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('modal.collections')"
@@ -7,7 +7,7 @@
     @close="hideModal"
   >
     <template #actions>
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-if="importerType !== null"
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.go_back')"
@@ -101,7 +101,7 @@
             </div>
           </div>
         </div>
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('import.title')"
           :disabled="enableImportButton"
           :loading="importingMyCollections"
@@ -109,9 +109,9 @@
         />
       </div>
       <div v-else class="flex flex-col">
-        <SmartExpand>
+        <HoppSmartExpand>
           <template #body>
-            <SmartItem
+            <HoppSmartItem
               v-for="(importer, index) in importerModules"
               :key="`importer-${index}`"
               :icon="importer.icon"
@@ -119,10 +119,10 @@
               @click="importerType = index"
             />
           </template>
-        </SmartExpand>
+        </HoppSmartExpand>
         <hr />
         <div class="flex flex-col space-y-2">
-          <SmartItem
+          <HoppSmartItem
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.download_file')"
             :icon="IconDownload"
@@ -141,7 +141,7 @@
             "
             class="flex"
           >
-            <SmartItem
+            <HoppSmartItem
               :disabled="
                 !currentUser
                   ? true
@@ -158,7 +158,7 @@
         </div>
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/MyCollections.vue b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
index 1b3607a06..9d71a7c36 100644
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -8,21 +8,21 @@
           : 'top: var(--upper-primary-sticky-fold)'
       "
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         :icon="IconPlus"
         :label="t('action.new')"
         class="!rounded-none"
         @click="emit('display-modal-add')"
       />
       <span class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/collections"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconArchive"
@@ -210,7 +210,7 @@
               <span class="pb-4 text-center">
                 {{ t("empty.collections") }}
               </span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :label="t('add.new')"
                 filled
                 outline
@@ -231,7 +231,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.collection") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="t('add.new')"
               filled
               outline
diff --git a/packages/hoppscotch-common/src/components/collections/Request.vue b/packages/hoppscotch-common/src/components/collections/Request.vue
index 24739fab1..cb2b0a328 100644
--- a/packages/hoppscotch-common/src/components/collections/Request.vue
+++ b/packages/hoppscotch-common/src/components/collections/Request.vue
@@ -47,7 +47,7 @@
         </span>
       </span>
       <div v-if="!hasNoTeamAccess" class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconRotateCCW"
@@ -63,7 +63,7 @@
             theme="popover"
             :on-shown="() => tippyActions!.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -78,7 +78,7 @@
                 @keyup.delete="deleteAction?.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="t('action.edit')"
@@ -90,7 +90,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="duplicate"
                   :icon="IconCopy"
                   :label="t('action.duplicate')"
@@ -103,7 +103,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="t('action.delete')"
diff --git a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
index 91039a6e4..b342b44d6 100644
--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('collection.save_as')}`"
@@ -43,13 +43,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           :loading="modalLoadingState"
           outline
           @click="saveRequestAs"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -57,7 +57,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index d45e7fbc4..2a4eb6790 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -8,7 +8,7 @@
           : 'top: var(--upper-secondary-sticky-fold)'
       "
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-if="hasNoTeamAccess"
         v-tippy="{ theme: 'tooltip' }"
         disabled
@@ -17,7 +17,7 @@
         :title="t('team.no_access')"
         :label="t('action.new')"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-else
         :icon="IconPlus"
         :label="t('action.new')"
@@ -25,14 +25,14 @@
         @click="emit('display-modal-add')"
       />
       <span class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/collections"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :disabled="
@@ -206,7 +206,7 @@
               <span class="pb-4 text-center">
                 {{ t("empty.collections") }}
               </span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-if="hasNoTeamAccess"
                 v-tippy="{ theme: 'tooltip' }"
                 disabled
@@ -215,7 +215,7 @@
                 :title="t('team.no_access')"
                 :label="t('add.new')"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-else
                 :label="t('add.new')"
                 filled
@@ -237,7 +237,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.collection") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-if="hasNoTeamAccess"
               v-tippy="{ theme: 'tooltip' }"
               disabled
@@ -246,7 +246,7 @@
               :title="t('team.no_access')"
               :label="t('add.new')"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-else
               :label="t('add.new')"
               filled
diff --git a/packages/hoppscotch-common/src/components/collections/TeamSelect.vue b/packages/hoppscotch-common/src/components/collections/TeamSelect.vue
index 8c540d43e..c4745017c 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamSelect.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-1">
-    <SmartIntersection
+    <HoppSmartIntersection
       class="flex flex-col flex-1"
       @intersecting="onTeamSelectIntersect"
     >
@@ -16,13 +16,13 @@
           :title="`${t('collection.select_team')}`"
           class="bg-transparent border-b border-dividerLight select-wrapper"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-if="collectionsType.selectedTeam"
             :icon="IconUsers"
             :label="collectionsType.selectedTeam.name"
             class="flex-1 !justify-start pr-8 rounded-none"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-else
             :label="`${t('collection.select_team')}`"
             class="flex-1 !justify-start pr-8 rounded-none"
@@ -39,11 +39,11 @@
               v-if="isTeamListLoading && myTeams.length === 0"
               class="flex flex-col items-center justify-center flex-1 p-2"
             >
-              <SmartSpinner class="my-2" />
+              <HoppSmartSpinner class="my-2" />
               <span class="text-secondaryLight">{{ t("state.loading") }}</span>
             </div>
             <div v-else-if="myTeams.length > 0" class="flex flex-col">
-              <SmartItem
+              <HoppSmartItem
                 v-for="(team, index) in myTeams"
                 :key="`team-${index}`"
                 :label="team.name"
@@ -62,7 +62,7 @@
                 "
               />
               <hr />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconPlus"
                 :label="t('team.create_new')"
                 @click="
@@ -86,7 +86,7 @@
               <span class="pb-4 text-center">
                 {{ t("empty.teams") }}
               </span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :label="t('team.create_new')"
                 filled
                 outline
@@ -101,7 +101,7 @@
           </div>
         </template>
       </tippy>
-    </SmartIntersection>
+    </HoppSmartIntersection>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Add.vue b/packages/hoppscotch-common/src/components/collections/graphql/Add.vue
index 6415413f7..190248af9 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Add.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('collection.new')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="addNewCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue b/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue
index 5d080fb54..1c4ab322d 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('folder.new')"
@@ -24,8 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary :label="t('action.save')" outline @click="addFolder" />
-        <ButtonSecondary
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          outline
+          @click="addFolder"
+        />
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -33,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue b/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
index 9d918169e..ec8fb7698 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('request.new')"
@@ -24,8 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary :label="t('action.save')" outline @click="addRequest" />
-        <ButtonSecondary
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          outline
+          @click="addRequest"
+        />
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -33,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
index d68775b83..4776a15bf 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
@@ -29,7 +29,7 @@
         </span>
       </span>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFilePlus"
           :title="t('request.new')"
@@ -40,7 +40,7 @@
             })
           "
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFolderPlus"
           :title="t('folder.new')"
@@ -59,7 +59,7 @@
             theme="popover"
             :on-shown="() => tippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -75,7 +75,7 @@
                 @keyup.delete="deleteAction.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="requestAction"
                   :icon="IconFilePlus"
                   :label="`${t('request.new')}`"
@@ -89,7 +89,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="folderAction"
                   :icon="IconFolderPlus"
                   :label="`${t('folder.new')}`"
@@ -103,7 +103,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="`${t('action.edit')}`"
@@ -115,7 +115,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="`${t('action.delete')}`"
@@ -186,7 +186,7 @@
           <span class="pb-4 text-center">
             {{ t("empty.collection") }}
           </span>
-          <ButtonSecondary
+          <HoppButtonSecondary
             :label="t('add.new')"
             filled
             outline
@@ -199,7 +199,7 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_collection')}`"
       @hide-modal="confirmRemove = false"
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue b/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue
index 3058d6d55..a5a3e1049 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('collection.edit')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="saveCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue b/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue
index 0de42b604..2f069b522 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('folder.edit')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="editFolder"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue b/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
index 9771a339a..0302523d3 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('modal.edit_request')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="saveRequest"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
index 7a2f799d9..701dfa0df 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
@@ -29,14 +29,14 @@
         </span>
       </span>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFilePlus"
           :title="t('request.new')"
           class="hidden group-hover:inline-flex"
           @click="emit('add-request', { path: folderPath })"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFolderPlus"
           :title="t('folder.new')"
@@ -51,7 +51,7 @@
             theme="popover"
             :on-shown="() => tippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -67,7 +67,7 @@
                 @keyup.delete="deleteAction.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="requestAction"
                   :icon="IconFilePlus"
                   :label="`${t('request.new')}`"
@@ -79,7 +79,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="folderAction"
                   :icon="IconFolderPlus"
                   :label="`${t('folder.new')}`"
@@ -91,7 +91,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="`${t('action.edit')}`"
@@ -103,7 +103,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="`${t('action.delete')}`"
@@ -181,7 +181,7 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_folder')}`"
       @hide-modal="confirmRemove = false"
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
index 9874609cf..190ec8a3d 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('modal.collections')}`"
@@ -9,7 +9,7 @@
     <template #actions>
       <span>
         <tippy interactive trigger="click" theme="popover">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.more')"
             :icon="IconMoreVertical"
@@ -22,7 +22,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconGithub"
                 :label="t('import.from_gist')"
                 @click="
@@ -42,7 +42,7 @@
                     : undefined
                 "
               >
-                <SmartItem
+                <HoppSmartItem
                   :disabled="
                     !currentUser
                       ? true
@@ -67,7 +67,7 @@
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">
-        <SmartItem
+        <HoppSmartItem
           :icon="IconFolderPlus"
           :label="t('import.from_json')"
           @click="openDialogChooseFileToImportFrom"
@@ -80,7 +80,7 @@
           @change="importFromJSON"
         />
         <hr />
-        <SmartItem
+        <HoppSmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.download_file')"
           :icon="IconDownload"
@@ -89,7 +89,7 @@
         />
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Request.vue b/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
index ac16a9c72..0c4225404 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
@@ -28,7 +28,7 @@
         </span>
       </span>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconRotateCCW"
@@ -44,7 +44,7 @@
             theme="popover"
             :on-shown="() => tippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -59,7 +59,7 @@
                 @keyup.delete="deleteAction.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="`${t('action.edit')}`"
@@ -75,7 +75,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="duplicate"
                   :icon="IconCopy"
                   :label="`${t('action.duplicate')}`"
@@ -91,7 +91,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="`${t('action.delete')}`"
@@ -109,7 +109,7 @@
         </span>
       </div>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_request')}`"
       @hide-modal="confirmRemove = false"
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/index.vue b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
index 23887a972..6bf7a715b 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -16,21 +16,21 @@
       <div
         class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           :icon="IconPlus"
           :label="t('action.new')"
           class="!rounded-none"
           @click="displayModalAdd(true)"
         />
         <div class="flex">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             to="https://docs.hoppscotch.io/features/collections"
             blank
             :title="t('app.wiki')"
             :icon="IconHelpCircle"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-if="!saveRequest"
             v-tippy="{ theme: 'tooltip' }"
             :title="t('modal.import_export')"
@@ -73,7 +73,7 @@
       <span class="pb-4 text-center">
         {{ t("empty.collections") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="t('add.new')"
         filled
         outline
diff --git a/packages/hoppscotch-common/src/components/collections/index.vue b/packages/hoppscotch-common/src/components/collections/index.vue
index b45695993..d8e360c29 100644
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -15,7 +15,7 @@
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>
-    <SmartTabs
+    <HoppSmartTabs
       v-model="selectedCollectionTab"
       render-inactive-tabs
       :styles="`
@@ -27,7 +27,7 @@
         }
       `"
     >
-      <SmartTab
+      <HoppSmartTab
         :id="'my-collections'"
         :label="`${t('collection.my_collections')}`"
       >
@@ -53,8 +53,8 @@
           @display-modal-add="displayModalAdd(true)"
           @display-modal-import-export="displayModalImportExport(true)"
         />
-      </SmartTab>
-      <SmartTab
+      </HoppSmartTab>
+      <HoppSmartTab
         :id="'team-collections'"
         :label="`${t('collection.team_collections')}`"
       >
@@ -99,8 +99,8 @@
           @display-modal-add="displayModalAdd(true)"
           @display-modal-import-export="displayModalImportExport(true)"
         />
-      </SmartTab>
-    </SmartTabs>
+      </HoppSmartTab>
+    </HoppSmartTabs>
     <CollectionsAdd
       :show="showModalAdd"
       :loading-state="modalLoadingState"
@@ -140,7 +140,7 @@
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"
     />
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="showConfirmModal"
       :title="confirmModalTitle"
       :loading-state="modalLoadingState"
diff --git a/packages/hoppscotch-common/src/components/environments/ChooseType.vue b/packages/hoppscotch-common/src/components/environments/ChooseType.vue
index ddfa2d620..8ed0b78e6 100644
--- a/packages/hoppscotch-common/src/components/environments/ChooseType.vue
+++ b/packages/hoppscotch-common/src/components/environments/ChooseType.vue
@@ -1,19 +1,19 @@
 <template>
   <div>
-    <SmartTabs
+    <HoppSmartTabs
       :id="'environments_tab'"
       v-model="selectedEnvironmentTab"
       render-inactive-tabs
     >
-      <SmartTab
+      <HoppSmartTab
         :id="'my-environments'"
         :label="`${t('environment.my_environments')}`"
       />
-      <SmartTab
+      <HoppSmartTab
         :id="'team-environments'"
         :label="`${t('environment.team_environments')}`"
       >
-        <SmartIntersection @intersecting="onTeamSelectIntersect">
+        <HoppSmartIntersection @intersecting="onTeamSelectIntersect">
           <tippy
             interactive
             trigger="click"
@@ -26,13 +26,13 @@
               :title="`${t('collection.select_team')}`"
               class="bg-transparent border-b border-dividerLight select-wrapper"
             >
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-if="environmentType.selectedTeam"
                 :icon="IconUsers"
                 :label="environmentType.selectedTeam.name"
                 class="flex-1 !justify-start pr-8 rounded-none"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-else
                 :label="`${t('collection.select_team')}`"
                 class="flex-1 !justify-start pr-8 rounded-none"
@@ -45,7 +45,7 @@
                 tabindex="0"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   v-for="(team, index) in myTeams"
                   :key="`team-${index}`"
                   :label="team.name"
@@ -68,9 +68,9 @@
               </div>
             </template>
           </tippy>
-        </SmartIntersection>
-      </SmartTab>
-    </SmartTabs>
+        </HoppSmartIntersection>
+      </HoppSmartTab>
+    </HoppSmartTabs>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/environments/ImportExport.vue b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
index 8e7f12da2..89a186449 100644
--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('environment.title')}`"
@@ -14,7 +14,7 @@
           theme="popover"
           :on-shown="() => tippyActions!.focus()"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.more')"
             :icon="IconMoreVertical"
@@ -26,7 +26,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconGithub"
                 :label="t('import.from_gist')"
                 @click="
@@ -46,7 +46,7 @@
                     : undefined
                 "
               >
-                <SmartItem
+                <HoppSmartItem
                   :disabled="
                     !currentUser
                       ? true
@@ -71,11 +71,11 @@
     </template>
     <template #body>
       <div v-if="loading" class="flex flex-col items-center justify-center p-4">
-        <SmartSpinner class="my-4" />
+        <HoppSmartSpinner class="my-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div v-else class="flex flex-col space-y-2">
-        <SmartItem
+        <HoppSmartItem
           :icon="IconFolderPlus"
           :label="t('import.from_json')"
           @click="openDialogChooseFileToImportFrom"
@@ -88,7 +88,7 @@
           @change="importFromJSON"
         />
         <hr />
-        <SmartItem
+        <HoppSmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.download_file')"
           :icon="IconDownload"
@@ -97,7 +97,7 @@
         />
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/environments/index.vue b/packages/hoppscotch-common/src/components/environments/index.vue
index 61c6435bd..8afe7d2ee 100644
--- a/packages/hoppscotch-common/src/components/environments/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/index.vue
@@ -15,14 +15,14 @@
           :title="`${t('environment.select')}`"
           class="bg-transparent border-b border-dividerLight select-wrapper"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-if="
               selectedEnv.type === 'MY_ENV' && selectedEnv.index !== undefined
             "
             :label="myEnvironments[selectedEnv.index].name"
             class="flex-1 !justify-start pr-8 rounded-none"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-else
             :label="`${t('environment.select')}`"
             class="flex-1 !justify-start pr-8 rounded-none"
@@ -36,7 +36,7 @@
             tabindex="0"
             @keyup.escape="hide()"
           >
-            <SmartItem
+            <HoppSmartItem
               :label="`${t('environment.no_environment')}`"
               :info-icon="
                 selectedEnvironmentIndex.type !== 'MY_ENV'
@@ -52,7 +52,7 @@
               "
             />
             <hr v-if="myEnvironments.length > 0" />
-            <SmartItem
+            <HoppSmartItem
               v-for="(gen, index) in myEnvironments"
               :key="`gen-${index}`"
               :label="gen.name"
@@ -74,12 +74,12 @@
           :title="`${t('environment.select')}`"
           class="bg-transparent border-b border-dividerLight select-wrapper"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-if="selectedEnv.name"
             :label="selectedEnv.name"
             class="flex-1 !justify-start pr-8 rounded-none"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-else
             :label="`${t('environment.select')}`"
             class="flex-1 !justify-start pr-8 rounded-none"
@@ -92,7 +92,7 @@
             tabindex="0"
             @keyup.escape="hide()"
           >
-            <SmartItem
+            <HoppSmartItem
               :label="`${t('environment.no_environment')}`"
               :info-icon="
                 selectedEnvironmentIndex.type !== 'TEAM_ENV'
@@ -111,7 +111,7 @@
               v-if="loading"
               class="flex flex-col items-center justify-center p-4"
             >
-              <SmartSpinner class="my-4" />
+              <HoppSmartSpinner class="my-4" />
               <span class="text-secondaryLight">{{ t("state.loading") }}</span>
             </div>
             <hr v-if="teamEnvironmentList.length > 0" />
@@ -119,7 +119,7 @@
               v-if="environmentType.selectedTeam !== undefined"
               class="flex flex-col"
             >
-              <SmartItem
+              <HoppSmartItem
                 v-for="(gen, index) in teamEnvironmentList"
                 :key="`gen-team-${index}`"
                 :label="gen.environment.name"
diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index 497e8fd54..6e9f90cc5 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t(`environment.${action}`)"
@@ -28,13 +28,13 @@
             {{ t("environment.variable_list") }}
           </label>
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.clear_all')"
               :icon="clearIcon"
               @click="clearContent()"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :icon="IconPlus"
               :title="t('add.new')"
@@ -69,7 +69,7 @@
               :name="'value' + index"
             />
             <div class="flex">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
@@ -92,7 +92,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.environments") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
               class="mb-4"
@@ -104,12 +104,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="saveEnvironment"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -117,7 +117,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/environments/my/Environment.vue b/packages/hoppscotch-common/src/components/environments/my/Environment.vue
index de2669a2f..32e7dd670 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Environment.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Environment.vue
@@ -33,7 +33,7 @@
         theme="popover"
         :on-shown="() => tippyActions!.focus()"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.more')"
           :icon="IconMoreVertical"
@@ -53,7 +53,7 @@
             "
             @keyup.escape="hide()"
           >
-            <SmartItem
+            <HoppSmartItem
               ref="edit"
               :icon="IconEdit"
               :label="`${t('action.edit')}`"
@@ -65,7 +65,7 @@
                 }
               "
             />
-            <SmartItem
+            <HoppSmartItem
               ref="duplicate"
               :icon="IconCopy"
               :label="`${t('action.duplicate')}`"
@@ -77,7 +77,7 @@
                 }
               "
             />
-            <SmartItem
+            <HoppSmartItem
               v-if="environmentIndex !== 'Global'"
               ref="deleteAction"
               :icon="IconTrash2"
@@ -94,7 +94,7 @@
         </template>
       </tippy>
     </span>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_environment')}`"
       @hide-modal="confirmRemove = false"
@@ -122,7 +122,7 @@ import {
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { TippyComponent } from "vue-tippy"
-import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
+import { HoppSmartItem } from "@hoppscotch/ui"
 
 const t = useI18n()
 const toast = useToast()
@@ -140,9 +140,9 @@ const confirmRemove = ref(false)
 
 const tippyActions = ref<TippyComponent | null>(null)
 const options = ref<TippyComponent | null>(null)
-const edit = ref<typeof SmartItem>()
-const duplicate = ref<typeof SmartItem>()
-const deleteAction = ref<typeof SmartItem>()
+const edit = ref<typeof HoppSmartItem>()
+const duplicate = ref<typeof HoppSmartItem>()
+const deleteAction = ref<typeof HoppSmartItem>()
 
 const removeEnvironment = () => {
   if (props.environmentIndex === null) return
diff --git a/packages/hoppscotch-common/src/components/environments/my/index.vue b/packages/hoppscotch-common/src/components/environments/my/index.vue
index b48390e6e..fde550b90 100644
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -3,21 +3,21 @@
     <div
       class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         :icon="IconPlus"
         :label="`${t('action.new')}`"
         class="!rounded-none"
         @click="displayModalAdd(true)"
       />
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/environments"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconArchive"
           :title="t('modal.import_export')"
@@ -45,7 +45,7 @@
       <span class="pb-4 text-center">
         {{ t("empty.environments") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
         outline
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
index b7993b839..ac00d8ca0 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t(`environment.${action}`)"
@@ -29,13 +29,13 @@
             {{ t("environment.variable_list") }}
           </label>
           <div v-if="!isViewer" class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.clear_all')"
               :icon="clearIcon"
               @click="clearContent()"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :icon="IconPlus"
               :title="t('add.new')"
@@ -73,7 +73,7 @@
               :readonly="isViewer"
             />
             <div v-if="!isViewer" class="flex">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
@@ -96,14 +96,14 @@
             <span class="pb-4 text-center">
               {{ t("empty.environments") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-if="isViewer"
               disabled
               :label="`${t('add.new')}`"
               filled
               class="mb-4"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-else
               :label="`${t('add.new')}`"
               filled
@@ -116,13 +116,13 @@
     </template>
     <template v-if="!isViewer" #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           :loading="isLoading"
           outline
           @click="saveEnvironment"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -130,7 +130,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
index 086285003..9b20e960a 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
@@ -26,7 +26,7 @@
         theme="popover"
         :on-shown="() => tippyActions!.focus()"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.more')"
           :icon="IconMoreVertical"
@@ -42,7 +42,7 @@
             @keyup.delete="deleteAction!.$el.click()"
             @keyup.escape="options!.tippy().hide()"
           >
-            <SmartItem
+            <HoppSmartItem
               ref="edit"
               :icon="IconEdit"
               :label="`${t('action.edit')}`"
@@ -54,7 +54,7 @@
                 }
               "
             />
-            <SmartItem
+            <HoppSmartItem
               ref="duplicate"
               :icon="IconCopy"
               :label="`${t('action.duplicate')}`"
@@ -66,7 +66,7 @@
                 }
               "
             />
-            <SmartItem
+            <HoppSmartItem
               ref="deleteAction"
               :icon="IconTrash2"
               :label="`${t('action.delete')}`"
@@ -82,7 +82,7 @@
         </template>
       </tippy>
     </span>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_environment')}`"
       @hide-modal="confirmRemove = false"
@@ -108,7 +108,7 @@ import IconCopy from "~icons/lucide/copy"
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconMoreVertical from "~icons/lucide/more-vertical"
 import { TippyComponent } from "vue-tippy"
-import SmartItem from "@hoppscotch/ui/src/components/smart/Item.vue"
+import { HoppSmartItem } from "@hoppscotch/ui"
 
 const t = useI18n()
 const toast = useToast()
@@ -126,9 +126,9 @@ const confirmRemove = ref(false)
 
 const tippyActions = ref<TippyComponent | null>(null)
 const options = ref<TippyComponent | null>(null)
-const edit = ref<typeof SmartItem>()
-const duplicate = ref<typeof SmartItem>()
-const deleteAction = ref<typeof SmartItem>()
+const edit = ref<typeof HoppSmartItem>()
+const duplicate = ref<typeof HoppSmartItem>()
+const deleteAction = ref<typeof HoppSmartItem>()
 
 const removeEnvironment = () => {
   pipe(
diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
index f3557660a..3e77f7218 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -3,7 +3,7 @@
     <div
       class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
         disabled
@@ -12,7 +12,7 @@
         :title="t('team.no_access')"
         :label="t('action.new')"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-else
         :icon="IconPlus"
         :label="`${t('action.new')}`"
@@ -20,21 +20,21 @@
         @click="displayModalAdd(true)"
       />
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/environments"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="team !== undefined && team.myRole === 'VIEWER'"
           v-tippy="{ theme: 'tooltip' }"
           disabled
           :icon="IconArchive"
           :title="t('modal.import_export')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-else
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconArchive"
@@ -56,7 +56,7 @@
       <span class="pb-4 text-center">
         {{ t("empty.environments") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
         disabled
@@ -66,7 +66,7 @@
         :title="t('team.no_access')"
         :label="t('action.new')"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-else
         :label="`${t('add.new')}`"
         filled
@@ -87,7 +87,7 @@
       />
     </div>
     <div v-if="loading" class="flex flex-col items-center justify-center p-4">
-      <SmartSpinner class="my-4" />
+      <HoppSmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div
diff --git a/packages/hoppscotch-common/src/components/firebase/Login.vue b/packages/hoppscotch-common/src/components/firebase/Login.vue
index 67397827e..f37409e60 100644
--- a/packages/hoppscotch-common/src/components/firebase/Login.vue
+++ b/packages/hoppscotch-common/src/components/firebase/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('auth.login_to_hoppscotch')}`"
@@ -8,25 +8,25 @@
   >
     <template #body>
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
-        <SmartItem
+        <HoppSmartItem
           :loading="signingInWithGitHub"
           :icon="IconGithub"
           :label="`${t('auth.continue_with_github')}`"
           @click="signInWithGithub"
         />
-        <SmartItem
+        <HoppSmartItem
           :loading="signingInWithGoogle"
           :icon="IconGoogle"
           :label="`${t('auth.continue_with_google')}`"
           @click="signInWithGoogle"
         />
-        <SmartItem
+        <HoppSmartItem
           :loading="signingInWithMicrosoft"
           :icon="IconMicrosoft"
           :label="`${t('auth.continue_with_microsoft')}`"
           @click="signInWithMicrosoft"
         />
-        <SmartItem
+        <HoppSmartItem
           :icon="IconEmail"
           :label="`${t('auth.continue_with_email')}`"
           @click="mode = 'email'"
@@ -55,7 +55,7 @@
             {{ t("auth.email") }}
           </label>
         </div>
-        <ButtonPrimary
+        <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"
           :label="`${t('auth.send_magic_link')}`"
@@ -78,14 +78,14 @@
     <template #footer>
       <div v-if="mode === 'sign-in'" class="text-secondaryLight text-tiny">
         By signing in, you are agreeing to our
-        <SmartAnchor
+        <HoppSmartAnchor
           class="link"
           to="https://docs.hoppscotch.io/terms"
           blank
           label="Terms of Service"
         />
         and
-        <SmartAnchor
+        <HoppSmartAnchor
           class="link"
           to="https://docs.hoppscotch.io/privacy"
           blank
@@ -93,7 +93,7 @@
         />
       </div>
       <div v-if="mode === 'email'">
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('auth.all_sign_in_options')"
           :icon="IconArrowLeft"
           class="!p-0"
@@ -104,20 +104,20 @@
         v-if="mode === 'email-sent'"
         class="flex justify-between flex-1 text-secondaryLight"
       >
-        <SmartAnchor
+        <HoppSmartAnchor
           class="link"
           :label="t('auth.re_enter_email')"
           :icon="IconArrowLeft"
           @click="mode = 'email'"
         />
-        <SmartAnchor
+        <HoppSmartAnchor
           class="link"
           :label="`${t('action.dismiss')}`"
           @click="hideModal"
         />
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">
diff --git a/packages/hoppscotch-common/src/components/firebase/Logout.vue b/packages/hoppscotch-common/src/components/firebase/Logout.vue
index 4a808e0a6..8da86d6ad 100644
--- a/packages/hoppscotch-common/src/components/firebase/Logout.vue
+++ b/packages/hoppscotch-common/src/components/firebase/Logout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex" @click="OpenLogoutModal()">
-    <SmartItem
+    <HoppSmartItem
       ref="logoutItem"
       :icon="IconLogOut"
       :label="`${t('auth.logout')}`"
@@ -8,7 +8,7 @@
       :shortcut="shortcut"
       @click="OpenLogoutModal()"
     />
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmLogout"
       :title="`${t('confirm.logout')}`"
       @hide-modal="confirmLogout = false"
diff --git a/packages/hoppscotch-common/src/components/graphql/Authorization.vue b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
index f6b4784ae..0ece4999c 100644
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -14,7 +14,10 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
+            <HoppButtonSecondary
+              class="pr-8 ml-2 rounded-none"
+              :label="authName"
+            />
           </span>
           <template #content="{ hide }">
             <div
@@ -23,7 +26,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 label="None"
                 :icon="authName === 'None' ? IconCircleDot : IconCircle"
                 :active="authName === 'None'"
@@ -34,7 +37,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="Basic Auth"
                 :icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
                 :active="authName === 'Basic Auth'"
@@ -45,7 +48,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="Bearer Token"
                 :icon="authName === 'Bearer' ? IconCircleDot : IconCircle"
                 :active="authName === 'Bearer'"
@@ -56,7 +59,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="OAuth 2.0"
                 :icon="authName === 'OAuth 2.0' ? IconCircleDot : IconCircle"
                 :active="authName === 'OAuth 2.0'"
@@ -67,7 +70,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="API key"
                 :icon="authName === 'API key' ? IconCircleDot : IconCircle"
                 :active="authName === 'API key'"
@@ -83,27 +86,27 @@
         </tippy>
       </span>
       <div class="flex">
-        <!-- <SmartCheckbox
+        <!-- <HoppSmartCheckbox
           :on="!URLExcludes.auth"
           @change="setExclude('auth', !$event)"
         >
           {{ t("authorization.include_in_url") }}
-        </SmartCheckbox> -->
-        <SmartCheckbox
+        </HoppSmartCheckbox> -->
+        <HoppSmartCheckbox
           :on="authActive"
           class="px-2"
           @change="authActive = !authActive"
         >
           {{ t("state.enabled") }}
-        </SmartCheckbox>
-        <ButtonSecondary
+        </HoppSmartCheckbox>
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/authorization"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
@@ -124,7 +127,7 @@
       <span class="pb-4 text-center">
         {{ t("empty.authorization") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         outline
         :label="t('app.documentation')"
         to="https://docs.hoppscotch.io/features/authorization"
@@ -180,7 +183,7 @@
                 :on-shown="() => authTippyActions.focus()"
               >
                 <span class="select-wrapper">
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     :label="addTo || t('state.none')"
                     class="pr-8 ml-2 rounded-none"
                   />
@@ -192,7 +195,7 @@
                     tabindex="0"
                     @keyup.escape="hide()"
                   >
-                    <SmartItem
+                    <HoppSmartItem
                       :icon="addTo === 'Headers' ? IconCircleDot : IconCircle"
                       :active="addTo === 'Headers'"
                       :label="'Headers'"
@@ -203,7 +206,7 @@
                         }
                       "
                     />
-                    <SmartItem
+                    <HoppSmartItem
                       :icon="
                         addTo === 'Query params' ? IconCircleDot : IconCircle
                       "
@@ -229,7 +232,7 @@
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.authorization") }}
         </div>
-        <SmartAnchor
+        <HoppSmartAnchor
           class="link"
           :label="t('authorization.learn')"
           :icon="IconExternalLink"
diff --git a/packages/hoppscotch-common/src/components/graphql/Request.vue b/packages/hoppscotch-common/src/components/graphql/Request.vue
index f42bbf62a..c12da4055 100644
--- a/packages/hoppscotch-common/src/components/graphql/Request.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Request.vue
@@ -14,7 +14,7 @@
         :disabled="connected"
         @keyup.enter="onConnectClick"
       />
-      <ButtonPrimary
+      <HoppButtonPrimary
         id="get"
         name="get"
         :label="!connected ? t('action.connect') : t('action.disconnect')"
diff --git a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
index 0dcee6914..a5007156e 100644
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col flex-1 h-full">
-    <SmartTabs
+    <HoppSmartTabs
       v-model="selectedOptionTab"
       styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
       render-inactive-tabs
     >
-      <SmartTab
+      <HoppSmartTab
         :id="'query'"
         :label="`${t('tab.query')}`"
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
@@ -17,7 +17,7 @@
             {{ t("request.query") }}
           </label>
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
               :title="`${t(
                 'request.run'
@@ -27,7 +27,7 @@
               class="rounded-none !text-accent !hover:text-accentDark"
               @click="runQuery()"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
               :title="`${t(
                 'request.save'
@@ -37,33 +37,33 @@
               class="rounded-none"
               @click="saveRequest"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               to="https://docs.hoppscotch.io/graphql"
               blank
               :title="t('app.wiki')"
               :icon="IconHelpCircle"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.clear_all')"
               :icon="IconTrash2"
               @click="clearGQLQuery()"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('state.linewrap')"
               :class="{ '!text-accent': linewrapEnabledQuery }"
               :icon="IconWrapText"
               @click.prevent="linewrapEnabledQuery = !linewrapEnabledQuery"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.prettify')"
               :icon="prettifyQueryIcon"
               @click="prettifyQuery"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.copy')"
               :icon="copyQueryIcon"
@@ -72,8 +72,8 @@
           </div>
         </div>
         <div ref="queryEditor" class="flex flex-col flex-1"></div>
-      </SmartTab>
-      <SmartTab
+      </HoppSmartTab>
+      <HoppSmartTab
         :id="'variables'"
         :label="`${t('tab.variables')}`"
         :indicator="variableString && variableString.length > 0 ? true : false"
@@ -85,20 +85,20 @@
             {{ t("request.variables") }}
           </label>
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               to="https://docs.hoppscotch.io/graphql"
               blank
               :title="t('app.wiki')"
               :icon="IconHelpCircle"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.clear_all')"
               :icon="IconTrash2"
               @click="clearGQLVariables()"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('state.linewrap')"
               :class="{ '!text-accent': linewrapEnabledVariable }"
@@ -107,13 +107,13 @@
                 linewrapEnabledVariable = !linewrapEnabledVariable
               "
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.prettify')"
               :icon="prettifyVariablesIcon"
               @click="prettifyVariableString"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.copy')"
               :icon="copyVariablesIcon"
@@ -122,8 +122,8 @@
           </div>
         </div>
         <div ref="variableEditor" class="flex flex-col flex-1"></div>
-      </SmartTab>
-      <SmartTab
+      </HoppSmartTab>
+      <HoppSmartTab
         :id="'headers'"
         :label="`${t('tab.headers')}`"
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
@@ -135,34 +135,34 @@
             {{ t("tab.headers") }}
           </label>
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               to="https://docs.hoppscotch.io/graphql"
               blank
               :title="t('app.wiki')"
               :icon="IconHelpCircle"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.clear_all')"
               :icon="IconTrash2"
               @click="clearContent()"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('state.linewrap')"
               :class="{ '!text-accent': linewrapEnabled }"
               :icon="IconWrapText"
               @click.prevent="linewrapEnabled = !linewrapEnabled"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('state.bulk_mode')"
               :icon="IconEdit"
               :class="{ '!text-accent': bulkMode }"
               @click="bulkMode = !bulkMode"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('add.new')"
               :icon="IconPlus"
@@ -192,7 +192,7 @@
                 class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
               >
                 <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-tippy="{
                       theme: 'tooltip',
                       delay: [500, 20],
@@ -210,7 +210,7 @@
                     tabindex="-1"
                   />
                 </span>
-                <SmartAutoComplete
+                <HoppSmartAutoComplete
                   :placeholder="`${t('count.header', { count: index + 1 })}`"
                   :source="commonHeaders"
                   :spellcheck="false"
@@ -250,7 +250,7 @@
                   "
                 />
                 <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
                     :title="
                       header.hasOwnProperty('active')
@@ -278,7 +278,7 @@
                   />
                 </span>
                 <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
                     :title="t('action.remove')"
                     :icon="IconTrash"
@@ -302,7 +302,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.headers") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
               :icon="IconPlus"
@@ -311,11 +311,11 @@
             />
           </div>
         </div>
-      </SmartTab>
-      <SmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
+      </HoppSmartTab>
+      <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
         <GraphqlAuthorization />
-      </SmartTab>
-    </SmartTabs>
+      </HoppSmartTab>
+    </HoppSmartTabs>
     <CollectionsSaveRequest
       mode="graphql"
       :show="showSaveRequestModal"
@@ -354,7 +354,7 @@ import {
   parseRawKeyValueEntriesE,
   RawKeyValueEntry,
 } from "@hoppscotch/data"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { clone, cloneDeep, isEqual } from "lodash-es"
 import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue
index 2826fcf21..b0138d782 100644
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -4,7 +4,7 @@
       v-if="responseString === 'loading'"
       class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
-      <SmartSpinner class="my-4" />
+      <HoppSmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div v-else-if="responseString" class="flex flex-col flex-1">
@@ -15,14 +15,14 @@
           {{ t("response.title") }}
         </label>
         <div class="flex items-center">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
             :class="{ '!text-accent': linewrapEnabled }"
             :icon="IconWrapText"
             @click.prevent="linewrapEnabled = !linewrapEnabled"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip', allowHTML: true }"
             :title="`${t(
               'action.download_file'
@@ -30,7 +30,7 @@
             :icon="downloadResponseIcon"
             @click="downloadResponse"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip', allowHTML: true }"
             :title="`${t(
               'action.copy'
diff --git a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
index d8aa1fffa..274c3ba00 100644
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -1,21 +1,25 @@
 <template>
-  <SmartTabs
+  <HoppSmartTabs
     v-model="selectedNavigationTab"
     styles="sticky overflow-x-auto flex-shrink-0 bg-primary z-10 top-0"
     vertical
     render-inactive-tabs
   >
-    <SmartTab :id="'history'" :icon="IconClock" :label="`${t('tab.history')}`">
+    <HoppSmartTab
+      :id="'history'"
+      :icon="IconClock"
+      :label="`${t('tab.history')}`"
+    >
       <History :page="'graphql'" @use-history="handleUseHistory" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'collections'"
       :icon="IconFolder"
       :label="`${t('tab.collections')}`"
     >
       <CollectionsGraphql />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'docs'"
       :icon="IconBookOpen"
       :label="`${t('tab.documentation')}`"
@@ -51,7 +55,7 @@
             class="flex flex-1 p-4 py-2 bg-transparent"
           />
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               to="https://docs.hoppscotch.io/quickstart/graphql"
               blank
@@ -60,12 +64,12 @@
             />
           </div>
         </div>
-        <SmartTabs
+        <HoppSmartTabs
           v-model="selectedGqlTab"
           styles="border-t border-b border-dividerLight bg-primary sticky overflow-x-auto flex-shrink-0 z-10 top-sidebarPrimaryStickyFold"
           render-inactive-tabs
         >
-          <SmartTab
+          <HoppSmartTab
             v-if="queryFields.length > 0"
             :id="'queries'"
             :label="`${t('tab.queries')}`"
@@ -78,8 +82,8 @@
               :jump-type-callback="handleJumpToType"
               class="p-4"
             />
-          </SmartTab>
-          <SmartTab
+          </HoppSmartTab>
+          <HoppSmartTab
             v-if="mutationFields.length > 0"
             :id="'mutations'"
             :label="`${t('graphql.mutations')}`"
@@ -92,8 +96,8 @@
               :jump-type-callback="handleJumpToType"
               class="p-4"
             />
-          </SmartTab>
-          <SmartTab
+          </HoppSmartTab>
+          <HoppSmartTab
             v-if="subscriptionFields.length > 0"
             :id="'subscriptions'"
             :label="`${t('graphql.subscriptions')}`"
@@ -106,8 +110,8 @@
               :jump-type-callback="handleJumpToType"
               class="p-4"
             />
-          </SmartTab>
-          <SmartTab
+          </HoppSmartTab>
+          <HoppSmartTab
             v-if="graphqlTypes.length > 0"
             :id="'types'"
             :label="`${t('tab.types')}`"
@@ -122,11 +126,11 @@
               :highlighted-fields="getGqlTypeHighlightedFields(type)"
               :jump-type-callback="handleJumpToType"
             />
-          </SmartTab>
-        </SmartTabs>
+          </HoppSmartTab>
+        </HoppSmartTabs>
       </div>
-    </SmartTab>
-    <SmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
+    </HoppSmartTab>
+    <HoppSmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
         class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
@@ -135,27 +139,27 @@
           {{ t("graphql.schema") }}
         </label>
         <div class="flex">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             to="https://docs.hoppscotch.io/quickstart/graphql"
             blank
             :title="t('app.wiki')"
             :icon="IconHelpCircle"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
             :class="{ '!text-accent': linewrapEnabled }"
             :icon="IconWrapText"
             @click.prevent="linewrapEnabled = !linewrapEnabled"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.download_file')"
             :icon="downloadSchemaIcon"
             @click="downloadSchema"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.copy')"
             :icon="copySchemaIcon"
@@ -182,8 +186,8 @@
           {{ t("empty.schema") }}
         </span>
       </div>
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/history/graphql/Card.vue b/packages/hoppscotch-common/src/components/history/graphql/Card.vue
index b3321cb72..600cfca49 100644
--- a/packages/hoppscotch-common/src/components/history/graphql/Card.vue
+++ b/packages/hoppscotch-common/src/components/history/graphql/Card.vue
@@ -15,7 +15,7 @@
           {{ entry.request.url }}
         </span>
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :icon="IconTrash"
         color="red"
@@ -24,14 +24,14 @@
         data-testid="delete_history_entry"
         @click="emit('delete-entry')"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="expand ? t('hide.more') : t('show.more')"
         :icon="expand ? IconMinimize2 : IconMaximize2"
         class="hidden group-hover:inline-flex"
         @click="expand = !expand"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="!entry.star ? t('add.star') : t('remove.star')"
         :icon="entry.star ? IconStarOff : IconStar"
diff --git a/packages/hoppscotch-common/src/components/history/index.vue b/packages/hoppscotch-common/src/components/history/index.vue
index 1ed45eeb2..ecce85b11 100644
--- a/packages/hoppscotch-common/src/components/history/index.vue
+++ b/packages/hoppscotch-common/src/components/history/index.vue
@@ -11,7 +11,7 @@
         :placeholder="`${t('action.search')}`"
       />
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/history"
           blank
@@ -19,7 +19,7 @@
           :icon="IconHelpCircle"
         />
         <tippy interactive trigger="click" theme="popover">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.filter')"
             :icon="IconFilter"
@@ -29,7 +29,7 @@
               <div class="pb-2 pl-4 text-tiny text-secondaryLight">
                 {{ t("action.filter") }}
               </div>
-              <SmartRadioGroup
+              <HoppSmartRadioGroup
                 v-model="filterSelection"
                 :radios="filters"
                 @update:model-value="hide()"
@@ -38,7 +38,7 @@
               <div class="pb-2 pl-4 text-tiny text-secondaryLight">
                 {{ t("action.group_by") }}
               </div>
-              <SmartRadioGroup
+              <HoppSmartRadioGroup
                 v-model="groupSelection"
                 :radios="groups"
                 @update:model-value="hide()"
@@ -46,7 +46,7 @@
             </div>
           </template>
         </tippy>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           data-testid="clear_history"
           :disabled="history.length === 0"
@@ -81,7 +81,7 @@
               {{ filteredHistoryGroupIndex }}
             </span>
           </span>
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :icon="IconTrash"
             color="red"
@@ -128,7 +128,7 @@
       <span class="mt-2 mb-4 text-center">
         {{ t("state.nothing_found") }} "{{ filterText || filterSelection }}"
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="t('action.clear')"
         outline
         @click="
@@ -139,7 +139,7 @@
         "
       />
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_history')}`"
       @hide-modal="confirmRemove = false"
diff --git a/packages/hoppscotch-common/src/components/history/rest/Card.vue b/packages/hoppscotch-common/src/components/history/rest/Card.vue
index 4756424d6..dc5348aaf 100644
--- a/packages/hoppscotch-common/src/components/history/rest/Card.vue
+++ b/packages/hoppscotch-common/src/components/history/rest/Card.vue
@@ -26,7 +26,7 @@
         {{ entry.request.endpoint }}
       </span>
     </span>
-    <ButtonSecondary
+    <HoppButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
       :icon="IconTrash"
       color="red"
@@ -35,7 +35,7 @@
       data-testid="delete_history_entry"
       @click="emit('delete-entry')"
     />
-    <ButtonSecondary
+    <HoppButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
       :title="!entry.star ? t('add.star') : t('remove.star')"
       :class="{ 'group-hover:inline-flex hidden': !entry.star }"
diff --git a/packages/hoppscotch-common/src/components/http/Authorization.vue b/packages/hoppscotch-common/src/components/http/Authorization.vue
index 6c08cd230..c8fda1553 100644
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -14,7 +14,10 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
+            <HoppButtonSecondary
+              class="pr-8 ml-2 rounded-none"
+              :label="authName"
+            />
           </span>
           <template #content="{ hide }">
             <div
@@ -23,7 +26,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 label="None"
                 :icon="authName === 'None' ? IconCircleDot : IconCircle"
                 :active="authName === 'None'"
@@ -34,7 +37,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="Basic Auth"
                 :icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
                 :active="authName === 'Basic Auth'"
@@ -45,7 +48,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="Bearer Token"
                 :icon="authName === 'Bearer' ? IconCircleDot : IconCircle"
                 :active="authName === 'Bearer'"
@@ -56,7 +59,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="OAuth 2.0"
                 :icon="authName === 'OAuth 2.0' ? IconCircleDot : IconCircle"
                 :active="authName === 'OAuth 2.0'"
@@ -67,7 +70,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 label="API key"
                 :icon="authName === 'API key' ? IconCircleDot : IconCircle"
                 :active="authName === 'API key'"
@@ -83,26 +86,26 @@
         </tippy>
       </span>
       <div class="flex">
-        <!-- <SmartCheckbox
+        <!-- <HoppSmartCheckbox
           :on="!URLExcludes.auth"
           @change="setExclude('auth', !$event)"
         >
           {{ $t("authorization.include_in_url") }}
-        </SmartCheckbox>-->
-        <SmartCheckbox
+        </HoppSmartCheckbox>-->
+        <HoppSmartCheckbox
           :on="authActive"
           class="px-2"
           @change="authActive = !authActive"
-          >{{ t("state.enabled") }}</SmartCheckbox
+          >{{ t("state.enabled") }}</HoppSmartCheckbox
         >
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/authorization"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
@@ -121,7 +124,7 @@
         :alt="`${t('empty.authorization')}`"
       />
       <span class="pb-4 text-center">{{ t("empty.authorization") }}</span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         outline
         :label="t('app.documentation')"
         to="https://docs.hoppscotch.io/features/authorization"
@@ -177,7 +180,7 @@
                 :on-shown="() => authTippyActions.focus()"
               >
                 <span class="select-wrapper">
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     :label="addTo || t('state.none')"
                     class="pr-8 ml-2 rounded-none"
                   />
@@ -189,7 +192,7 @@
                     tabindex="0"
                     @keyup.escape="hide()"
                   >
-                    <SmartItem
+                    <HoppSmartItem
                       :icon="addTo === 'Headers' ? IconCircleDot : IconCircle"
                       :active="addTo === 'Headers'"
                       :label="'Headers'"
@@ -200,7 +203,7 @@
                         }
                       "
                     />
-                    <SmartItem
+                    <HoppSmartItem
                       :icon="
                         addTo === 'Query params' ? IconCircleDot : IconCircle
                       "
@@ -226,7 +229,7 @@
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.authorization") }}
         </div>
-        <SmartAnchor
+        <HoppSmartAnchor
           class="link"
           :label="t('authorization.learn')"
           :icon="IconExternalLink"
diff --git a/packages/hoppscotch-common/src/components/http/Body.vue b/packages/hoppscotch-common/src/components/http/Body.vue
index 0252f3ad4..66a383df9 100644
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/packages/hoppscotch-common/src/components/http/Body.vue
@@ -14,7 +14,7 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="contentType || t('state.none')"
               class="pr-8 ml-2 rounded-none"
             />
@@ -26,7 +26,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 :label="t('state.none')"
                 :info-icon="contentType === null ? IconDone : null"
                 :active-info-icon="contentType === null"
@@ -50,7 +50,7 @@
                   </span>
                 </div>
                 <div class="flex flex-col">
-                  <SmartItem
+                  <HoppSmartItem
                     v-for="(
                       contentTypeItem, contentTypeIndex
                     ) in contentTypeItems.contentTypes"
@@ -72,7 +72,7 @@
             </div>
           </template>
         </tippy>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="t('request.override_help')"
           :label="
@@ -109,7 +109,7 @@
         :alt="`${t('empty.body')}`"
       />
       <span class="pb-4 text-center">{{ t("empty.body") }}</span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         outline
         :label="`${t('app.documentation')}`"
         to="https://docs.hoppscotch.io/features/body"
diff --git a/packages/hoppscotch-common/src/components/http/BodyParameters.vue b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
index af0a23952..1fc20e3fe 100644
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
@@ -7,20 +7,20 @@
         {{ t("request.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -44,7 +44,7 @@
           class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
         >
           <span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{
                 theme: 'tooltip',
                 delay: [500, 20],
@@ -76,10 +76,10 @@
           />
           <div v-if="entry.isFile" class="file-chips-container">
             <div class="space-x-2 file-chips-wrapper">
-              <SmartFileChip
+              <HoppSmartFileChip
                 v-for="(file, fileIndex) in entry.value"
                 :key="`param-${index}-file-${fileIndex}`"
-                >{{ file.name }}</SmartFileChip
+                >{{ file.name }}</HoppSmartFileChip
               >
             </div>
           </div>
@@ -110,7 +110,7 @@
             </label>
           </span>
           <span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="
                 entry.hasOwnProperty('active')
@@ -140,7 +140,7 @@
             />
           </span>
           <span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.remove')"
               :icon="IconTrash"
@@ -163,7 +163,7 @@
         :alt="`${t('empty.body')}`"
       />
       <span class="pb-4 text-center">{{ t("empty.body") }}</span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
         :icon="IconPlus"
@@ -188,7 +188,7 @@ import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
 import { FormDataKeyValue } from "@hoppscotch/data"
 import { isEqual, clone } from "lodash-es"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { pluckRef } from "@composables/ref"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
diff --git a/packages/hoppscotch-common/src/components/http/CodegenModal.vue b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
index 9531eb7e0..43f6afe58 100644
--- a/packages/hoppscotch-common/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-common/src/components/http/CodegenModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('request.generate_code')}`"
@@ -18,7 +18,7 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="
                 CodegenDefinitions.find((x) => x.name === codegenType).caption
               "
@@ -43,7 +43,7 @@
                 tabindex="0"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   v-for="codegen in filteredCodegenDefinitions"
                   :key="codegen.name"
                   :label="codegen.caption"
@@ -89,20 +89,20 @@
               {{ t("request.generated_code") }}
             </label>
             <div class="flex items-center">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('state.linewrap')"
                 :class="{ '!text-accent': linewrapEnabled }"
                 :icon="IconWrapText"
                 @click.prevent="linewrapEnabled = !linewrapEnabled"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.download_file')"
                 :icon="downloadIcon"
                 @click="downloadResponse"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.copy')"
                 :icon="copyIcon"
@@ -119,13 +119,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.copy')}`"
           :icon="copyCodeIcon"
           outline
           @click="copyRequestCode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.dismiss')}`"
           outline
           filled
@@ -133,7 +133,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index 953e8d8a6..33a7dd502 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -7,20 +7,20 @@
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/headers"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -28,14 +28,14 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.bulk_mode')"
           :icon="IconEdit"
           :class="{ '!text-accent': bulkMode }"
           @click="bulkMode = !bulkMode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -61,7 +61,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{
                   theme: 'tooltip',
                   delay: [500, 20],
@@ -79,7 +79,7 @@
                 tabindex="-1"
               />
             </span>
-            <SmartAutoComplete
+            <HoppSmartAutoComplete
               :placeholder="`${t('count.header', { count: index + 1 })}`"
               :source="commonHeaders"
               :spellcheck="false"
@@ -110,7 +110,7 @@
               "
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   header.hasOwnProperty('active')
@@ -138,7 +138,7 @@
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
                 :icon="IconTrash"
@@ -165,7 +165,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :icon="IconLock"
                 class="opacity-25 cursor-auto text-secondaryLight bg-divider"
                 tabindex="-1"
@@ -182,19 +182,19 @@
               readonly
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-if="header.source === 'auth'"
                 :icon="masking ? IconEye : IconEyeOff"
                 @click="toggleMask()"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-else
                 :icon="IconArrowUpRight"
                 class="cursor-auto text-primary hover:text-primary"
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :icon="IconArrowUpRight"
                 @click="changeTab(header.source)"
               />
@@ -213,7 +213,7 @@
           :alt="`${t('empty.headers')}`"
         />
         <span class="pb-4 text-center">{{ t("empty.headers") }}</span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
@@ -253,7 +253,7 @@ import * as RA from "fp-ts/ReadonlyArray"
 import * as E from "fp-ts/Either"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { RequestOptionTabs } from "./RequestOptions.vue"
 import { useCodemirror } from "@composables/codemirror"
 import {
diff --git a/packages/hoppscotch-common/src/components/http/ImportCurl.vue b/packages/hoppscotch-common/src/components/http/ImportCurl.vue
index c0dcca842..5912570d1 100644
--- a/packages/hoppscotch-common/src/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-common/src/components/http/ImportCurl.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('import.curl')}`"
@@ -13,26 +13,26 @@
               cURL
             </label>
             <div class="flex items-center">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.clear_all')"
                 :icon="IconTrash2"
                 @click="clearContent()"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('state.linewrap')"
                 :class="{ '!text-accent': linewrapEnabled }"
                 :icon="IconWrapText"
                 @click.prevent="linewrapEnabled = !linewrapEnabled"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.download_file')"
                 :icon="downloadIcon"
                 @click="downloadResponse"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip', allowHTML: true }"
                 :title="t('action.copy')"
                 :icon="copyIcon"
@@ -51,13 +51,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           ref="importButton"
           :label="`${t('import.title')}`"
           outline
           @click="handleImport"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -65,7 +65,7 @@
         />
       </span>
       <span class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           :icon="pasteIcon"
           :label="`${t('action.paste')}`"
           filled
@@ -74,7 +74,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
index 9f94e91fd..f6798684b 100644
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
@@ -22,7 +22,7 @@
       <SmartEnvInput v-model="scope" placeholder="Scope" />
     </div>
     <div class="p-2">
-      <ButtonSecondary
+      <HoppButtonSecondary
         filled
         :label="`${t('authorization.generate_token')}`"
         @click="handleAccessTokenRequest()"
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 3dfbdf5fe..87fccf142 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -7,20 +7,20 @@
         {{ t("request.parameter_list") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/parameters"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -28,14 +28,14 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.bulk_mode')"
           :icon="IconEdit"
           :class="{ '!text-accent': bulkMode }"
           @click="bulkMode = !bulkMode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -61,7 +61,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{
                   theme: 'tooltip',
                   delay: [500, 20],
@@ -104,7 +104,7 @@
               "
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   param.hasOwnProperty('active')
@@ -134,7 +134,7 @@
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
                 :icon="IconTrash"
@@ -157,7 +157,7 @@
           :alt="`${t('empty.parameters')}`"
         />
         <span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('add.new')}`"
           :icon="IconPlus"
           filled
@@ -192,7 +192,7 @@ import {
   RawKeyValueEntry,
 } from "@hoppscotch/data"
 import { isEqual, cloneDeep } from "lodash-es"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import linter from "~/helpers/editor/linting/rawKeyValue"
 import { useCodemirror } from "@composables/codemirror"
 import { useColorMode } from "@composables/theming"
diff --git a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
index d9453bd6b..62e8f25bc 100644
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
@@ -7,20 +7,20 @@
         {{ t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
@@ -39,7 +39,7 @@
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.pre_request_script") }}
         </div>
-        <SmartAnchor
+        <HoppSmartAnchor
           :label="`${t('preRequest.learn')}`"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
diff --git a/packages/hoppscotch-common/src/components/http/RawBody.vue b/packages/hoppscotch-common/src/components/http/RawBody.vue
index d560b462e..b71f27497 100644
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -7,27 +7,27 @@
         {{ t("request.raw_body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="
             [
               'application/json',
@@ -43,7 +43,7 @@
           @click="prettifyRequestBody"
         />
         <label for="payload">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('import.title')"
             :icon="IconFilePlus"
diff --git a/packages/hoppscotch-common/src/components/http/ReqChangeConfirmModal.vue b/packages/hoppscotch-common/src/components/http/ReqChangeConfirmModal.vue
index d4f9a02fe..45b38a5d7 100644
--- a/packages/hoppscotch-common/src/components/http/ReqChangeConfirmModal.vue
+++ b/packages/hoppscotch-common/src/components/http/ReqChangeConfirmModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('modal.confirm')"
@@ -13,28 +13,28 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           v-focus
           :label="t('action.save')"
           :loading="loading"
           outline
           @click="saveChange"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.dont_save')"
           outline
           filled
           @click="discardChange"
         />
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="t('action.cancel')"
         outline
         filled
         @click="hideModal"
       />
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
index 763f7db71..f0ba577b4 100644
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -30,7 +30,7 @@
                 tabindex="0"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   v-for="(method, index) in methods"
                   :key="`method-${index}`"
                   :label="method"
@@ -58,7 +58,7 @@
       </div>
     </div>
     <div class="flex mt-2 sm:mt-0">
-      <ButtonPrimary
+      <HoppButtonPrimary
         id="send"
         v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
         :title="`${t('action.send')} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
@@ -73,7 +73,7 @@
           theme="popover"
           :on-shown="() => sendTippyActions.focus()"
         >
-          <ButtonPrimary
+          <HoppButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('app.options')"
             :icon="IconChevronDown"
@@ -90,7 +90,7 @@
               @keyup.delete="clearAll.$el.click()"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 ref="curl"
                 :label="`${t('import.curl')}`"
                 :icon="IconFileCode"
@@ -102,7 +102,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="show"
                 :label="`${t('show.code')}`"
                 :icon="IconCode2"
@@ -114,7 +114,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 ref="clearAll"
                 :label="`${t('action.clear_all')}`"
                 :icon="IconRotateCCW"
@@ -131,7 +131,7 @@
         </tippy>
       </span>
       <span class="flex ml-2 transition border rounded border-divider">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
           :title="`${t(
             'request.save'
@@ -149,7 +149,7 @@
             theme="popover"
             :on-shown="() => saveTippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('app.options')"
               :icon="IconChevronDown"
@@ -175,7 +175,7 @@
                   class="mb-2 input !bg-primaryContrast"
                   @keyup.enter="hide()"
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="copyRequestAction"
                   :label="shareButtonText"
                   :icon="copyLinkIcon"
@@ -187,13 +187,13 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   :icon="IconLink2"
                   :label="`${t('request.view_my_links')}`"
                   to="/profile"
                 />
                 <hr />
-                <SmartItem
+                <HoppSmartItem
                   ref="saveRequestAction"
                   :label="`${t('request.save_as')}`"
                   :icon="IconFolderPlus"
diff --git a/packages/hoppscotch-common/src/components/http/RequestOptions.vue b/packages/hoppscotch-common/src/components/http/RequestOptions.vue
index 0f9527cbc..a8a26a829 100644
--- a/packages/hoppscotch-common/src/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestOptions.vue
@@ -1,30 +1,30 @@
 <template>
-  <SmartTabs
+  <HoppSmartTabs
     v-model="selectedRealtimeTab"
     styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
     render-inactive-tabs
   >
-    <SmartTab
+    <HoppSmartTab
       :id="'params'"
       :label="`${t('tab.parameters')}`"
       :info="`${newActiveParamsCount$}`"
     >
       <HttpParameters />
-    </SmartTab>
-    <SmartTab :id="'bodyParams'" :label="`${t('tab.body')}`">
+    </HoppSmartTab>
+    <HoppSmartTab :id="'bodyParams'" :label="`${t('tab.body')}`">
       <HttpBody @change-tab="changeTab" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'headers'"
       :label="`${t('tab.headers')}`"
       :info="`${newActiveHeadersCount$}`"
     >
       <HttpHeaders @change-tab="changeTab" />
-    </SmartTab>
-    <SmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
+    </HoppSmartTab>
+    <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
       <HttpAuthorization />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'preRequestScript'"
       :label="`${t('tab.pre_request_script')}`"
       :indicator="
@@ -32,15 +32,15 @@
       "
     >
       <HttpPreRequestScript />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'tests'"
       :label="`${t('tab.tests')}`"
       :indicator="testScript && testScript.length > 0 ? true : false"
     >
       <HttpTests />
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/ResponseMeta.vue b/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
index f2d1f139a..493f7ce50 100644
--- a/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-common/src/components/http/ResponseMeta.vue
@@ -8,7 +8,7 @@
         v-if="response.type === 'loading'"
         class="flex flex-col items-center justify-center"
       >
-        <SmartSpinner class="my-4" />
+        <HoppSmartSpinner class="my-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div
diff --git a/packages/hoppscotch-common/src/components/http/Sidebar.vue b/packages/hoppscotch-common/src/components/http/Sidebar.vue
index e102c1413..ae210d3f8 100644
--- a/packages/hoppscotch-common/src/components/http/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/http/Sidebar.vue
@@ -1,28 +1,32 @@
 <template>
-  <SmartTabs
+  <HoppSmartTabs
     v-model="selectedNavigationTab"
     styles="sticky overflow-x-auto flex-shrink-0 bg-primary z-10 top-0"
     vertical
     render-inactive-tabs
   >
-    <SmartTab :id="'history'" :icon="IconClock" :label="`${t('tab.history')}`">
+    <HoppSmartTab
+      :id="'history'"
+      :icon="IconClock"
+      :label="`${t('tab.history')}`"
+    >
       <History :page="'rest'" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'collections'"
       :icon="IconFolder"
       :label="`${t('tab.collections')}`"
     >
       <Collections />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       :id="'env'"
       :icon="IconLayers"
       :label="`${t('environment.title')}`"
     >
       <Environments />
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/TestResult.vue b/packages/hoppscotch-common/src/components/http/TestResult.vue
index c80c9dedb..f8f9b3941 100644
--- a/packages/hoppscotch-common/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResult.vue
@@ -14,7 +14,7 @@
         <label class="font-semibold truncate text-secondaryLight">
           {{ t("test.report") }}
         </label>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
@@ -48,13 +48,13 @@
                     {{ t("environment.no_environment_description") }}
                   </p>
                   <p class="flex mt-3 space-x-2">
-                    <ButtonSecondary
+                    <HoppButtonSecondary
                       :label="t('environment.add_to_global')"
                       class="text-tiny !bg-primary"
                       filled
                       @click="addEnvToGlobal()"
                     />
-                    <ButtonSecondary
+                    <HoppButtonSecondary
                       :label="t('environment.create_new')"
                       class="text-tiny !bg-primary"
                       filled
@@ -186,7 +186,7 @@
       <span class="pb-4 text-center">
         {{ t("helpers.tests") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         outline
         :label="`${t('action.learn_more')}`"
         to="https://docs.hoppscotch.io/features/tests"
diff --git a/packages/hoppscotch-common/src/components/http/TestResultReport.vue b/packages/hoppscotch-common/src/components/http/TestResultReport.vue
index 797195ef0..bfa9d4a7e 100644
--- a/packages/hoppscotch-common/src/components/http/TestResultReport.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResultReport.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center px-4 py-2">
-    <SmartProgressRing
+    <HoppSmartProgressRing
       class="mr-2 text-red-500"
       :radius="8"
       :stroke="1.5"
diff --git a/packages/hoppscotch-common/src/components/http/Tests.vue b/packages/hoppscotch-common/src/components/http/Tests.vue
index f27079c91..b56245b64 100644
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/packages/hoppscotch-common/src/components/http/Tests.vue
@@ -7,20 +7,20 @@
         {{ t("test.javascript_code") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/tests"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
@@ -39,7 +39,7 @@
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.post_request_tests") }}
         </div>
-        <SmartAnchor
+        <HoppSmartAnchor
           :label="`${t('test.learn')}`"
           to="https://docs.hoppscotch.io/features/tests"
           blank
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index 2ab1ad4f2..8957eb9c4 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -7,20 +7,20 @@
         {{ t("request.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear_all')"
           :icon="IconTrash2"
           @click="clearContent()"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="bulkMode"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -28,14 +28,14 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.bulk_mode')"
           :icon="IconEdit"
           :class="{ '!text-accent': bulkMode }"
           @click="bulkMode = !bulkMode"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('add.new')"
           :icon="IconPlus"
@@ -61,7 +61,7 @@
             class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
           >
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{
                   theme: 'tooltip',
                   delay: [500, 20],
@@ -104,7 +104,7 @@
               "
             />
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   param.hasOwnProperty('active')
@@ -132,7 +132,7 @@
               />
             </span>
             <span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
                 :icon="IconTrash"
@@ -156,7 +156,7 @@
         <span class="pb-4 text-center">
           {{ t("empty.body") }}
         </span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
@@ -191,7 +191,7 @@ import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
 import * as RA from "fp-ts/ReadonlyArray"
 import * as E from "fp-ts/Either"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import { useCodemirror } from "@composables/codemirror"
 import linter from "~/helpers/editor/linting/rawKeyValue"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
diff --git a/packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue
index d853e2a8e..009efa526 100644
--- a/packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue
@@ -7,7 +7,7 @@
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="headers"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.copy')"
diff --git a/packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue b/packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue
index 6f87f1fd1..dea7aa4ca 100644
--- a/packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue
+++ b/packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue
@@ -15,7 +15,7 @@
       <span class="truncate rounded-sm select-all">
         {{ header.value }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.copy')"
         :icon="copyIcon"
diff --git a/packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue
index 7935d98df..31a0400a2 100644
--- a/packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue
@@ -1,10 +1,10 @@
 <template>
-  <SmartTabs
+  <HoppSmartTabs
     v-if="response"
     v-model="selectedLensTab"
     styles="sticky overflow-x-auto flex-shrink-0 z-10 bg-primary top-lowerPrimaryStickyFold"
   >
-    <SmartTab
+    <HoppSmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.renderer"
       :key="`lens-${index}`"
@@ -12,8 +12,8 @@
       class="flex flex-col flex-1 w-full h-full"
     >
       <component :is="lensRendererFor(lens.renderer)" :response="response" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       v-if="maybeHeaders"
       id="headers"
       :label="t('response.headers')"
@@ -21,8 +21,8 @@
       class="flex flex-col flex-1"
     >
       <LensesHeadersRenderer :headers="maybeHeaders" />
-    </SmartTab>
-    <SmartTab
+    </HoppSmartTab>
+    <HoppSmartTab
       id="results"
       :label="t('test.results')"
       :indicator="
@@ -38,8 +38,8 @@
       class="flex flex-col flex-1"
     >
       <HttpTestResult />
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
index 86b29db1d..da12e8b15 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -7,7 +7,7 @@
         {{ t("response.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -15,7 +15,7 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${
@@ -24,7 +24,7 @@
           :icon="!previewEnabled ? IconEye : IconEyeOff"
           @click.prevent="togglePreview"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
@@ -33,7 +33,7 @@
           :icon="downloadIcon"
           @click="downloadResponse"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue
index bcbf8c1b9..c68c1407e 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue
@@ -7,7 +7,7 @@
         {{ t("response.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
index c85a9de2e..c1755e0cf 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -10,7 +10,7 @@
         {{ t("response.body") }}
       </label>
       <div class="flex items-center">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -18,7 +18,7 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.filter')"
@@ -26,7 +26,7 @@
           :class="{ '!text-accent': toggleFilter }"
           @click.prevent="toggleFilterState"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
@@ -35,7 +35,7 @@
           :icon="downloadIcon"
           @click="downloadResponse"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
@@ -76,7 +76,7 @@
           <icon-lucide-info class="svg-icons mr-1.5" />
           <span>{{ filterResponseError.error }}</span>
         </div>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('app.wiki')"
@@ -121,7 +121,7 @@
                 tabindex="0"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   v-for="(arrayMember, astIndex) in item.astParent.values"
                   :key="`ast-${astIndex}`"
                   :label="`${astIndex}`"
@@ -140,7 +140,7 @@
                 tabindex="0"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   v-for="(objectMember, astIndex) in item.astParent.members"
                   :key="`ast-${astIndex}`"
                   :label="objectMember.key.value"
@@ -158,7 +158,7 @@
               ref="tippyActions"
               class="flex flex-col"
             >
-              <SmartItem
+              <HoppSmartItem
                 label="{}"
                 @click="
                   () => {
@@ -173,7 +173,7 @@
               ref="tippyActions"
               class="flex flex-col"
             >
-              <SmartItem
+              <HoppSmartItem
                 label="[]"
                 @click="
                   () => {
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue
index b3ce29b5d..45b4b50e1 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/PDFLensRenderer.vue
@@ -7,7 +7,7 @@
         {{ t("response.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
index 7668d4029..3cf1db1d5 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
@@ -7,7 +7,7 @@
         {{ t("response.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -15,7 +15,7 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
@@ -24,7 +24,7 @@
           :icon="downloadIcon"
           @click="downloadResponse"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
index 6e8394300..4892ee47b 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -7,7 +7,7 @@
         {{ t("response.body") }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
@@ -15,7 +15,7 @@
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
@@ -24,7 +24,7 @@
           :icon="downloadIcon"
           @click="downloadResponse"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
diff --git a/packages/hoppscotch-common/src/components/profile/Shortcode.vue b/packages/hoppscotch-common/src/components/profile/Shortcode.vue
index 74d6009eb..64b507a4f 100644
--- a/packages/hoppscotch-common/src/components/profile/Shortcode.vue
+++ b/packages/hoppscotch-common/src/components/profile/Shortcode.vue
@@ -15,7 +15,7 @@
       {{ dateStamp }}
     </div>
     <div class="justify-center table-box">
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.open_workspace')"
         :to="`${shortcodeBaseURL}/r/${shortcode.id}`"
@@ -23,7 +23,7 @@
         :icon="IconExternalLink"
         class="px-3 text-accent hover:text-accent"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.copy')"
         color="green"
@@ -31,7 +31,7 @@
         class="px-3"
         @click="copyShortcode(shortcode.id)"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.delete')"
         :icon="IconTrash"
diff --git a/packages/hoppscotch-common/src/components/profile/Shortcodes.vue b/packages/hoppscotch-common/src/components/profile/Shortcodes.vue
index 62b9ad7e3..4f2de9a0c 100644
--- a/packages/hoppscotch-common/src/components/profile/Shortcodes.vue
+++ b/packages/hoppscotch-common/src/components/profile/Shortcodes.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="relative py-4 overflow-x-auto">
       <div v-if="loading" class="flex flex-col items-center justify-center">
-        <SmartSpinner class="mb-4" />
+        <HoppSmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div
@@ -56,14 +56,14 @@
             :shortcode="shortcode"
             @delete-shortcode="deleteShortcode"
           />
-          <SmartIntersection
+          <HoppSmartIntersection
             v-if="hasMoreShortcodes && myShortcodes.length > 0"
             @intersecting="loadMoreShortcodes()"
           >
             <div v-if="adapterLoading" class="flex flex-col items-center py-3">
-              <SmartSpinner />
+              <HoppSmartSpinner />
             </div>
-          </SmartIntersection>
+          </HoppSmartIntersection>
         </div>
       </div>
       <div
diff --git a/packages/hoppscotch-common/src/components/profile/UserDelete.vue b/packages/hoppscotch-common/src/components/profile/UserDelete.vue
index 7ef1a71e1..6214eaebb 100644
--- a/packages/hoppscotch-common/src/components/profile/UserDelete.vue
+++ b/packages/hoppscotch-common/src/components/profile/UserDelete.vue
@@ -6,14 +6,14 @@
     <div class="my-1 mb-4 text-secondaryLight">
       {{ t("settings.delete_account_description") }}
     </div>
-    <ButtonSecondary
+    <HoppButtonSecondary
       filled
       outline
       :label="t('settings.delete_account')"
       type="submit"
       @click="showDeleteAccountModal = true"
     />
-    <SmartModal
+    <HoppSmartModal
       v-if="showDeleteAccountModal"
       dialog
       :title="t('settings.delete_account')"
@@ -21,7 +21,7 @@
     >
       <template #body>
         <div v-if="loading" class="flex flex-col items-center justify-center">
-          <SmartSpinner class="mb-4" />
+          <HoppSmartSpinner class="mb-4" />
           <span class="text-secondaryLight">{{ t("state.loading") }}</span>
         </div>
         <div
@@ -73,7 +73,7 @@
       </template>
       <template #footer>
         <span class="flex space-x-2">
-          <ButtonPrimary
+          <HoppButtonPrimary
             :label="t('settings.delete_account')"
             :loading="deletingUser"
             filled
@@ -86,7 +86,7 @@
             class="!bg-red-500 !hover:bg-red-600 !border-red-500 !hover:border-red-600"
             @click="deleteUserAccount"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             :label="t('action.cancel')"
             outline
             filled
@@ -94,7 +94,7 @@
           />
         </span>
       </template>
-    </SmartModal>
+    </HoppSmartModal>
   </section>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/realtime/Communication.vue b/packages/hoppscotch-common/src/components/realtime/Communication.vue
index 1f2b2a4ce..d2215f070 100644
--- a/packages/hoppscotch-common/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Communication.vue
@@ -31,7 +31,7 @@
           :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="contentType || t('state.none').toLowerCase()"
               class="pr-8 ml-2 rounded-none"
             />
@@ -43,7 +43,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 v-for="(contentTypeItem, index) in validContentTypes"
                 :key="`contentTypeItem-${index}`"
                 :label="contentTypeItem"
@@ -63,7 +63,7 @@
         </tippy>
       </span>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
           :title="`${t(
             'request.run'
@@ -74,7 +74,7 @@
           class="rounded-none !text-accent !hover:text-accentDark"
           @click="sendMessage()"
         />
-        <SmartCheckbox
+        <HoppSmartCheckbox
           v-tippy="{ theme: 'tooltip' }"
           :on="clearInputOnSend"
           class="px-2"
@@ -82,28 +82,28 @@
           @change="clearInputOnSend = !clearInputOnSend"
         >
           {{ t("mqtt.clear_input") }}
-        </SmartCheckbox>
-        <ButtonSecondary
+        </HoppSmartCheckbox>
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/realtime"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.clear')"
           :icon="IconTrash2"
           @click="clearContent"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           :icon="IconWrapText"
           @click.prevent="linewrapEnabled = !linewrapEnabled"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="contentType && contentType == 'JSON'"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.prettify')"
@@ -111,7 +111,7 @@
           @click="prettifyRequestBody"
         />
         <label for="payload">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('import.title')"
             :icon="IconFilePlus"
diff --git a/packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue b/packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue
index 7d90d9e18..fa1964a03 100644
--- a/packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue
+++ b/packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue
@@ -9,12 +9,12 @@
         </label>
       </span>
       <div class="flex">
-        <SmartCheckbox
+        <HoppSmartCheckbox
           :on="config.cleanSession"
           class="px-2"
           @change="config.cleanSession = !config.cleanSession"
           >{{ t("mqtt.clean_session") }}
-        </SmartCheckbox>
+        </HoppSmartCheckbox>
       </div>
     </div>
     <div class="flex flex-1 h-full border-dividerLight">
@@ -63,14 +63,14 @@
             </label>
             <tippy interactive trigger="click" theme="popover">
               <span class="select-wrapper">
-                <ButtonSecondary
+                <HoppButtonSecondary
                   class="pr-8 ml-2 rounded-none"
                   :label="`${config.lwQos}`"
                 />
               </span>
               <template #content="{ hide }">
                 <div class="flex flex-col" role="menu">
-                  <SmartItem
+                  <HoppSmartItem
                     v-for="item in QOS_VALUES"
                     :key="`qos-${item}`"
                     :label="`${item}`"
@@ -87,12 +87,12 @@
               </template>
             </tippy>
           </div>
-          <SmartCheckbox
+          <HoppSmartCheckbox
             :on="config.lwRetain"
             class="py-2"
             @change="config.lwRetain = !config.lwRetain"
             >{{ t("mqtt.lw_retain") }}
-          </SmartCheckbox>
+          </HoppSmartCheckbox>
         </div>
       </div>
     </div>
diff --git a/packages/hoppscotch-common/src/components/realtime/Log.vue b/packages/hoppscotch-common/src/components/realtime/Log.vue
index 4cc5924b0..3c7f92913 100644
--- a/packages/hoppscotch-common/src/components/realtime/Log.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Log.vue
@@ -8,27 +8,27 @@
         {{ title }}
       </label>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.delete')"
           :icon="IconTrash"
           @click="emit('delete')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           id="bottompage"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.scroll_to_top')"
           :icon="IconArrowUp"
           @click="scrollTo('top')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           id="bottompage"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.scroll_to_bottom')"
           :icon="IconArrowDown"
           @click="scrollTo('bottom')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           id="bottompage"
           v-tippy="{ theme: 'tooltip' }"
           :title="`${t('action.autoscroll')}: ${
diff --git a/packages/hoppscotch-common/src/components/realtime/LogEntry.vue b/packages/hoppscotch-common/src/components/realtime/LogEntry.vue
index 702665ceb..ceb7a27b0 100644
--- a/packages/hoppscotch-common/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-common/src/components/realtime/LogEntry.vue
@@ -34,14 +34,14 @@
             </div>
           </div>
         </div>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.copy')"
           :icon="copyQueryIcon"
           class="hidden group-hover:inline-flex"
           @click="copyQuery(entry.payload)"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :icon="IconChevronDown"
           class="transform"
           :class="{ 'rotate-180': !minimized }"
@@ -50,14 +50,14 @@
       </div>
     </div>
     <div v-if="!minimized" class="overflow-hidden bg-primaryContrast">
-      <SmartTabs
+      <HoppSmartTabs
         v-model="selectedTab"
         styles="bg-primaryLight"
         render-inactive-tabs
       >
-        <SmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
-        <SmartTab id="raw" label="Raw" />
-      </SmartTabs>
+        <HoppSmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
+        <HoppSmartTab id="raw" label="Raw" />
+      </HoppSmartTabs>
       <div
         class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
       >
@@ -65,20 +65,20 @@
           {{ t("response.body") }}
         </label>
         <div class="flex">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
             :class="{ '!text-accent': linewrapEnabled }"
             :icon="IconWrapText"
             @click.prevent="linewrapEnabled = !linewrapEnabled"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.download_file')"
             :icon="downloadIcon"
             @click="downloadResponse"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.copy')"
             :icon="copyIcon"
@@ -123,7 +123,7 @@
                   tabindex="0"
                   @keyup.escape="hide()"
                 >
-                  <SmartItem
+                  <HoppSmartItem
                     v-for="(arrayMember, astIndex) in item.astParent.values"
                     :key="`ast-${astIndex}`"
                     :label="`${astIndex}`"
@@ -142,7 +142,7 @@
                   tabindex="0"
                   @keyup.escape="hide()"
                 >
-                  <SmartItem
+                  <HoppSmartItem
                     v-for="(objectMember, astIndex) in item.astParent.members"
                     :key="`ast-${astIndex}`"
                     :label="objectMember.key.value"
@@ -160,7 +160,7 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
               >
-                <SmartItem
+                <HoppSmartItem
                   label="{}"
                   @click="
                     () => {
@@ -175,7 +175,7 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
               >
-                <SmartItem
+                <HoppSmartItem
                   label="[]"
                   @click="
                     () => {
diff --git a/packages/hoppscotch-common/src/components/realtime/Subscription.vue b/packages/hoppscotch-common/src/components/realtime/Subscription.vue
index 300e94679..14e9d4bf8 100644
--- a/packages/hoppscotch-common/src/components/realtime/Subscription.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Subscription.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" dialog :title="t('mqtt.new')" @close="hideModal">
+  <HoppSmartModal v-if="show" dialog :title="t('mqtt.new')" @close="hideModal">
     <template #body>
       <div class="flex justify-between mb-4">
         <div
@@ -10,11 +10,11 @@
           </label>
           <tippy interactive trigger="click" theme="popover">
             <span class="select-wrapper">
-              <ButtonSecondary class="pr-8" :label="`${QoS}`" />
+              <HoppButtonSecondary class="pr-8" :label="`${QoS}`" />
             </span>
             <template #content="{ hide }">
               <div class="flex flex-col" role="menu">
-                <SmartItem
+                <HoppSmartItem
                   v-for="item in QOS_VALUES"
                   :key="`qos-${item}`"
                   :label="`${item}`"
@@ -68,13 +68,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('mqtt.subscribe')"
           :loading="loadingState"
           outline
           @click="addNewSubscription"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -82,7 +82,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/hoppscotch-common/src/components/smart/AccentModePicker.vue b/packages/hoppscotch-common/src/components/smart/AccentModePicker.vue
index 8636efd10..7ad3bc8f9 100644
--- a/packages/hoppscotch-common/src/components/smart/AccentModePicker.vue
+++ b/packages/hoppscotch-common/src/components/smart/AccentModePicker.vue
@@ -9,7 +9,7 @@
     <!-- text-orange-500 -->
     <!-- text-red-500 -->
     <!-- text-pink-500 -->
-    <ButtonSecondary
+    <HoppButtonSecondary
       v-for="(color, index) of accentColors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
diff --git a/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue b/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
index ebc9e339a..f38eb1cdd 100644
--- a/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
+++ b/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
@@ -7,7 +7,7 @@
       :on-shown="() => tippyActions.focus()"
     >
       <span class="select-wrapper">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('settings.choose_language')"
           class="pr-8"
@@ -33,7 +33,7 @@
             tabindex="0"
             @keyup.escape="hide()"
           >
-            <SmartLink
+            <HoppSmartLink
               v-for="locale in filteredAppLanguages"
               :key="`locale-${locale.code}`"
               class="flex flex-1"
@@ -44,14 +44,14 @@
                 }
               "
             >
-              <SmartItem
+              <HoppSmartItem
                 :label="locale.name"
                 :active-info-icon="currentLocale.code === locale.code"
                 :info-icon="
                   currentLocale.code === locale.code ? IconDone : null
                 "
               />
-            </SmartLink>
+            </HoppSmartLink>
             <div
               v-if="
                 !(
diff --git a/packages/hoppscotch-common/src/components/smart/ColorModePicker.vue b/packages/hoppscotch-common/src/components/smart/ColorModePicker.vue
index 3b4aea2fe..c69c7b8dd 100644
--- a/packages/hoppscotch-common/src/components/smart/ColorModePicker.vue
+++ b/packages/hoppscotch-common/src/components/smart/ColorModePicker.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <ButtonSecondary
+    <HoppButtonSecondary
       v-for="(color, index) of colors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
diff --git a/packages/hoppscotch-common/src/components/smart/FontSizePicker.vue b/packages/hoppscotch-common/src/components/smart/FontSizePicker.vue
index ef4eefdf4..31fda5a06 100644
--- a/packages/hoppscotch-common/src/components/smart/FontSizePicker.vue
+++ b/packages/hoppscotch-common/src/components/smart/FontSizePicker.vue
@@ -7,7 +7,7 @@
       :on-shown="() => tippyActions.focus()"
     >
       <span class="select-wrapper">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('settings.change_font_size')"
           class="pr-8"
@@ -25,7 +25,7 @@
           tabindex="0"
           @keyup.escape="hide()"
         >
-          <SmartItem
+          <HoppSmartItem
             v-for="(size, index) in fontSizes"
             :key="`size-${index}`"
             :label="`${getFontSizeName(size)}`"
diff --git a/packages/hoppscotch-common/src/components/smart/Tree.vue b/packages/hoppscotch-common/src/components/smart/Tree.vue
index 5e30abe98..fe875fa6c 100644
--- a/packages/hoppscotch-common/src/components/smart/Tree.vue
+++ b/packages/hoppscotch-common/src/components/smart/Tree.vue
@@ -31,7 +31,7 @@
       v-else-if="rootNodes.status === 'loading'"
       class="flex flex-col items-center justify-center flex-1 p-4"
     >
-      <SmartSpinner class="my-4" />
+      <HoppSmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div
diff --git a/packages/hoppscotch-common/src/components/smart/TreeBranch.vue b/packages/hoppscotch-common/src/components/smart/TreeBranch.vue
index e02213bbe..32bdbe2dc 100644
--- a/packages/hoppscotch-common/src/components/smart/TreeBranch.vue
+++ b/packages/hoppscotch-common/src/components/smart/TreeBranch.vue
@@ -46,7 +46,7 @@
       v-if="childNodes.status === 'loading'"
       class="flex flex-col items-center justify-center flex-1 p-4"
     >
-      <SmartSpinner class="my-4" />
+      <HoppSmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div
diff --git a/packages/hoppscotch-common/src/components/tab/Primary.vue b/packages/hoppscotch-common/src/components/tab/Primary.vue
index e08e4a650..e7bd3639c 100644
--- a/packages/hoppscotch-common/src/components/tab/Primary.vue
+++ b/packages/hoppscotch-common/src/components/tab/Primary.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartLink
+  <HoppSmartLink
     :to="to"
     :exact="exact"
     :blank="blank"
@@ -20,7 +20,7 @@
       :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
     />
     {{ label }}
-  </SmartLink>
+  </HoppSmartLink>
 </template>
 
 <script>
diff --git a/packages/hoppscotch-common/src/components/tab/Secondary.vue b/packages/hoppscotch-common/src/components/tab/Secondary.vue
index aa750f4d9..3a143e8d7 100644
--- a/packages/hoppscotch-common/src/components/tab/Secondary.vue
+++ b/packages/hoppscotch-common/src/components/tab/Secondary.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartLink
+  <HoppSmartLink
     :to="to"
     :exact="exact"
     :blank="blank"
@@ -28,7 +28,7 @@
     <span class="truncate">
       {{ label }}
     </span>
-  </SmartLink>
+  </HoppSmartLink>
 </template>
 
 <script lang="ts">
diff --git a/packages/hoppscotch-common/src/components/teams/Add.vue b/packages/hoppscotch-common/src/components/teams/Add.vue
index 488635f62..ef0eeaeb0 100644
--- a/packages/hoppscotch-common/src/components/teams/Add.vue
+++ b/packages/hoppscotch-common/src/components/teams/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" dialog :title="t('team.new')" @close="hideModal">
+  <HoppSmartModal v-if="show" dialog :title="t('team.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col">
         <input
@@ -19,13 +19,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="isLoading"
           outline
           @click="addNewTeam"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -33,7 +33,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/teams/Edit.vue b/packages/hoppscotch-common/src/components/teams/Edit.vue
index 2c0e7c41f..cb1b4a738 100644
--- a/packages/hoppscotch-common/src/components/teams/Edit.vue
+++ b/packages/hoppscotch-common/src/components/teams/Edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" dialog :title="t('team.edit')" @close="hideModal">
+  <HoppSmartModal v-if="show" dialog :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col">
         <div class="relative flex">
@@ -22,7 +22,7 @@
             {{ t("team.members") }}
           </label>
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               :icon="IconUserPlus"
               :label="t('team.invite')"
               filled
@@ -36,7 +36,7 @@
         </div>
         <div v-if="teamDetails.loading" class="border rounded border-divider">
           <div class="flex items-center justify-center p-4">
-            <SmartSpinner />
+            <HoppSmartSpinner />
           </div>
         </div>
         <div
@@ -60,7 +60,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.members") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               :icon="IconUserPlus"
               :label="t('team.invite')"
               @click="
@@ -106,7 +106,7 @@
                       tabindex="0"
                       @keyup.escape="hide()"
                     >
-                      <SmartItem
+                      <HoppSmartItem
                         label="OWNER"
                         :icon="
                           member.role === 'OWNER' ? IconCircleDot : IconCircle
@@ -119,7 +119,7 @@
                           }
                         "
                       />
-                      <SmartItem
+                      <HoppSmartItem
                         label="EDITOR"
                         :icon="
                           member.role === 'EDITOR' ? IconCircleDot : IconCircle
@@ -132,7 +132,7 @@
                           }
                         "
                       />
-                      <SmartItem
+                      <HoppSmartItem
                         label="VIEWER"
                         :icon="
                           member.role === 'VIEWER' ? IconCircleDot : IconCircle
@@ -150,7 +150,7 @@
                 </tippy>
               </span>
               <div class="flex">
-                <ButtonSecondary
+                <HoppButtonSecondary
                   id="member"
                   v-tippy="{ theme: 'tooltip' }"
                   :title="t('action.remove')"
@@ -174,13 +174,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="isLoading"
           outline
           @click="saveTeam"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -188,7 +188,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/teams/Invite.vue b/packages/hoppscotch-common/src/components/teams/Invite.vue
index 40750f702..34a954235 100644
--- a/packages/hoppscotch-common/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-common/src/components/teams/Invite.vue
@@ -1,5 +1,10 @@
 <template>
-  <SmartModal v-if="show" dialog :title="t('team.invite')" @close="hideModal">
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="t('team.invite')"
+    @close="hideModal"
+  >
     <template #body>
       <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
         <div class="flex flex-col items-center justify-center max-w-md">
@@ -40,7 +45,7 @@
         v-else-if="sendingInvites"
         class="flex items-center justify-center p-4"
       >
-        <SmartSpinner />
+        <HoppSmartSpinner />
       </div>
       <div v-else class="flex flex-col">
         <div class="flex items-center justify-between flex-1">
@@ -53,7 +58,7 @@
             v-if="pendingInvites.loading"
             class="flex items-center justify-center p-4"
           >
-            <SmartSpinner />
+            <HoppSmartSpinner />
           </div>
           <div v-else>
             <div
@@ -82,7 +87,7 @@
                   readonly
                 />
                 <div class="flex">
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
                     :title="t('action.remove')"
                     :icon="IconTrash"
@@ -118,7 +123,7 @@
             {{ t("team.invite_tooltip") }}
           </label>
           <div class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               :icon="IconPlus"
               :label="t('add.new')"
               filled
@@ -162,7 +167,7 @@
                     tabindex="0"
                     @keyup.escape="hide()"
                   >
-                    <SmartItem
+                    <HoppSmartItem
                       label="OWNER"
                       :icon="
                         invitee.value === 'OWNER' ? IconCircleDot : IconCircle
@@ -175,7 +180,7 @@
                         }
                       "
                     />
-                    <SmartItem
+                    <HoppSmartItem
                       label="EDITOR"
                       :icon="
                         invitee.value === 'EDITOR' ? IconCircleDot : IconCircle
@@ -188,7 +193,7 @@
                         }
                       "
                     />
-                    <SmartItem
+                    <HoppSmartItem
                       label="VIEWER"
                       :icon="
                         invitee.value === 'VIEWER' ? IconCircleDot : IconCircle
@@ -206,7 +211,7 @@
               </tippy>
             </span>
             <div class="flex">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 id="member"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.remove')"
@@ -229,7 +234,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.invites") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="t('add.new')"
               filled
               @click="addNewInvitee"
@@ -294,7 +299,7 @@
         v-if="sendInvitesResult.length"
         class="flex justify-between flex-1 text-secondaryLight"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           class="link !p-0"
           :label="t('team.invite_more')"
           :icon="IconArrowLeft"
@@ -310,15 +315,19 @@
             }
           "
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           class="link !p-0"
           :label="`${t('action.dismiss')}`"
           @click="hideModal"
         />
       </p>
       <span v-else class="flex space-x-2">
-        <ButtonPrimary :label="t('team.invite')" outline @click="sendInvites" />
-        <ButtonSecondary
+        <HoppButtonPrimary
+          :label="t('team.invite')"
+          outline
+          @click="sendInvites"
+        />
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -326,7 +335,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/teams/Modal.vue b/packages/hoppscotch-common/src/components/teams/Modal.vue
index 60939ff2d..736c4da82 100644
--- a/packages/hoppscotch-common/src/components/teams/Modal.vue
+++ b/packages/hoppscotch-common/src/components/teams/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('team.select_a_team')"
@@ -8,7 +8,7 @@
     <template #body>
       <Teams :modal="true" />
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/teams/Team.vue b/packages/hoppscotch-common/src/components/teams/Team.vue
index a6a0e01f0..3a0d6b5e0 100644
--- a/packages/hoppscotch-common/src/components/teams/Team.vue
+++ b/packages/hoppscotch-common/src/components/teams/Team.vue
@@ -56,7 +56,7 @@
     </div>
     <div v-if="!compact" class="flex items-end justify-between flex-shrink-0">
       <span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="team.myRole === 'OWNER'"
           :icon="IconEdit"
           class="rounded-none"
@@ -67,7 +67,7 @@
             }
           "
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="team.myRole === 'OWNER'"
           :icon="IconUserPlus"
           class="rounded-none"
@@ -87,7 +87,7 @@
           theme="popover"
           :on-shown="() => tippyActions.focus()"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.more')"
             :icon="IconMoreVertical"
@@ -108,7 +108,7 @@
               "
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 v-if="team.myRole === 'OWNER'"
                 ref="edit"
                 :icon="IconEdit"
@@ -121,7 +121,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
                 ref="exit"
                 :icon="IconUserX"
@@ -134,7 +134,7 @@
                   }
                 "
               />
-              <SmartItem
+              <HoppSmartItem
                 v-if="team.myRole === 'OWNER'"
                 ref="deleteAction"
                 :icon="IconTrash2"
@@ -152,13 +152,13 @@
         </tippy>
       </span>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="t('confirm.remove_team')"
       @hide-modal="confirmRemove = false"
       @resolve="deleteTeam()"
     />
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmExit"
       :title="t('confirm.exit_team')"
       @hide-modal="confirmExit = false"
diff --git a/packages/hoppscotch-common/src/components/teams/index.vue b/packages/hoppscotch-common/src/components/teams/index.vue
index 7b12a706c..571bb2098 100644
--- a/packages/hoppscotch-common/src/components/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/teams/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="space-y-4">
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="`${t('team.create_new')}`"
         outline
         @click="displayModalAdd(true)"
       />
       <div v-if="loading" class="flex flex-col items-center justify-center">
-        <SmartSpinner class="mb-4" />
+        <HoppSmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div
@@ -23,7 +23,7 @@
         <span class="mb-4 text-center">
           {{ t("empty.teams") }}
         </span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('team.create_new')}`"
           filled
           @click="displayModalAdd(true)"
diff --git a/packages/hoppscotch-common/src/modules/ui.ts b/packages/hoppscotch-common/src/modules/ui.ts
index e34f01b23..c4aa089b8 100644
--- a/packages/hoppscotch-common/src/modules/ui.ts
+++ b/packages/hoppscotch-common/src/modules/ui.ts
@@ -1,10 +1,11 @@
 import { HoppModule } from "."
-import HoppUI from "./../../../hoppscotch-ui/src"
-import { HoppUIPluginOptions } from "@hoppscotch/ui/src"
+import { plugin as HoppUI, HoppUIPluginOptions } from "@hoppscotch/ui"
 import { useKeybindingDisabler } from "~/helpers/keybindings"
 import { useI18n } from "vue-i18n"
 const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()
 
+import "@hoppscotch/ui/style.css"
+
 const HoppUIOptions: HoppUIPluginOptions = {
   t: (key: string) => useI18n().t(key).toString(),
   onModalOpen: disableKeybindings,
diff --git a/packages/hoppscotch-common/src/pages/_.vue b/packages/hoppscotch-common/src/pages/_.vue
index 90a5bde22..7b8361022 100644
--- a/packages/hoppscotch-common/src/pages/_.vue
+++ b/packages/hoppscotch-common/src/pages/_.vue
@@ -16,8 +16,13 @@
     </h1>
     <p class="mb-4 text-secondaryLight">{{ message }}</p>
     <p class="mt-4 space-x-2">
-      <ButtonSecondary to="/" :icon="IconHome" filled :label="t('app.home')" />
-      <ButtonSecondary
+      <HoppButtonSecondary
+        to="/"
+        :icon="IconHome"
+        filled
+        :label="t('app.home')"
+      />
+      <HoppButtonSecondary
         :icon="IconRefreshCW"
         :label="t('app.reload')"
         filled
diff --git a/packages/hoppscotch-common/src/pages/enter.vue b/packages/hoppscotch-common/src/pages/enter.vue
index 6bef11446..5904e1be9 100644
--- a/packages/hoppscotch-common/src/pages/enter.vue
+++ b/packages/hoppscotch-common/src/pages/enter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-center justify-center min-h-screen">
-    <SmartSpinner v-if="signingInWithEmail" />
+    <HoppSmartSpinner v-if="signingInWithEmail" />
     <AppLogo v-else class="w-16 h-16 rounded" />
     <pre v-if="error" class="mt-4 text-secondaryLight">{{ error }}</pre>
   </div>
diff --git a/packages/hoppscotch-common/src/pages/join-team.vue b/packages/hoppscotch-common/src/pages/join-team.vue
index f10a84e5d..7ff7ba577 100644
--- a/packages/hoppscotch-common/src/pages/join-team.vue
+++ b/packages/hoppscotch-common/src/pages/join-team.vue
@@ -16,7 +16,7 @@
       v-else-if="loadingCurrentUser"
       class="flex flex-col items-center justify-center flex-1 p-4"
     >
-      <SmartSpinner />
+      <HoppSmartSpinner />
     </div>
     <div
       v-else-if="currentUser === null"
@@ -24,7 +24,7 @@
     >
       <h1 class="heading">{{ t("team.login_to_continue") }}</h1>
       <p class="mt-2">{{ t("team.login_to_continue_description") }}</p>
-      <ButtonPrimary
+      <HoppButtonPrimary
         :label="t('auth.login_to_hoppscotch')"
         class="mt-8"
         @click="invokeAction('modals.login.toggle')"
@@ -35,7 +35,7 @@
         v-if="inviteDetails.loading"
         class="flex flex-col items-center justify-center flex-1 p-4"
       >
-        <SmartSpinner />
+        <HoppSmartSpinner />
       </div>
       <div v-else>
         <div
@@ -86,7 +86,7 @@
             }}
           </p>
           <div class="mt-8">
-            <ButtonPrimary
+            <HoppButtonPrimary
               :label="
                 t('team.join_team', {
                   team: inviteDetails.data.right.teamInvitation.team.name,
@@ -121,7 +121,7 @@
             }}
           </p>
           <div class="mt-8">
-            <ButtonSecondary
+            <HoppButtonSecondary
               to="/"
               :icon="IconHome"
               filled
@@ -132,7 +132,7 @@
       </div>
     </div>
     <div class="p-4">
-      <ButtonSecondary
+      <HoppButtonSecondary
         class="tracking-wide !font-bold !text-secondaryDark"
         label="HOPPSCOTCH"
         to="/"
diff --git a/packages/hoppscotch-common/src/pages/profile.vue b/packages/hoppscotch-common/src/pages/profile.vue
index 9f345eb71..ec21d4df9 100644
--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/packages/hoppscotch-common/src/pages/profile.vue
@@ -6,7 +6,7 @@
           v-if="loadingCurrentUser"
           class="flex flex-col items-center justify-center flex-1 p-4"
         >
-          <SmartSpinner class="mb-4" />
+          <HoppSmartSpinner class="mb-4" />
         </div>
         <div
           v-else-if="currentUser === null"
@@ -21,7 +21,7 @@
           <p class="pb-4 text-center text-secondaryLight">
             {{ t("empty.profile") }}
           </p>
-          <ButtonPrimary
+          <HoppButtonPrimary
             :label="t('auth.login')"
             class="mb-4"
             @click="invokeAction('modals.login.toggle')"
@@ -66,7 +66,7 @@
                     :title="t('settings.verified_email')"
                     class="ml-2 text-green-500 svg-icons focus:outline-none cursor-help"
                   />
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-else
                     :label="t('settings.verify_email')"
                     :icon="IconVerified"
@@ -79,7 +79,7 @@
             </div>
             <div class="flex items-end space-x-2">
               <div>
-                <SmartItem
+                <HoppSmartItem
                   to="/settings"
                   :icon="IconSettings"
                   :label="t('profile.app_settings')"
@@ -89,12 +89,12 @@
               <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs
+          <HoppSmartTabs
             v-model="selectedProfileTab"
             styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10"
             render-inactive-tabs
           >
-            <SmartTab :id="'sync'" :label="t('settings.account')">
+            <HoppSmartTab :id="'sync'" :label="t('settings.account')">
               <div class="grid grid-cols-1">
                 <section class="p-4">
                   <h4 class="font-semibold text-secondaryDark">
@@ -120,7 +120,7 @@
                         autocomplete="off"
                         required
                       />
-                      <ButtonSecondary
+                      <HoppButtonSecondary
                         filled
                         outline
                         :label="t('action.save')"
@@ -147,7 +147,7 @@
                         autocomplete="off"
                         required
                       />
-                      <ButtonSecondary
+                      <HoppButtonSecondary
                         filled
                         outline
                         :label="t('action.save')"
@@ -170,39 +170,39 @@
                   </div>
                   <div class="py-4 space-y-4">
                     <div class="flex items-center">
-                      <SmartToggle
+                      <HoppSmartToggle
                         :on="SYNC_COLLECTIONS"
                         @change="toggleSetting('syncCollections')"
                       >
                         {{ t("settings.sync_collections") }}
-                      </SmartToggle>
+                      </HoppSmartToggle>
                     </div>
                     <div class="flex items-center">
-                      <SmartToggle
+                      <HoppSmartToggle
                         :on="SYNC_ENVIRONMENTS"
                         @change="toggleSetting('syncEnvironments')"
                       >
                         {{ t("settings.sync_environments") }}
-                      </SmartToggle>
+                      </HoppSmartToggle>
                     </div>
                     <div class="flex items-center">
-                      <SmartToggle
+                      <HoppSmartToggle
                         :on="SYNC_HISTORY"
                         @change="toggleSetting('syncHistory')"
                       >
                         {{ t("settings.sync_history") }}
-                      </SmartToggle>
+                      </HoppSmartToggle>
                     </div>
                   </div>
                 </section>
 
                 <ProfileShortcodes />
               </div>
-            </SmartTab>
-            <SmartTab :id="'teams'" :label="t('team.title')">
+            </HoppSmartTab>
+            <HoppSmartTab :id="'teams'" :label="t('team.title')">
               <Teams :modal="false" class="p-4" />
-            </SmartTab>
-          </SmartTabs>
+            </HoppSmartTab>
+          </HoppSmartTabs>
         </div>
       </div>
     </div>
diff --git a/packages/hoppscotch-common/src/pages/r/_id.vue b/packages/hoppscotch-common/src/pages/r/_id.vue
index 15c65067b..89710cf9f 100644
--- a/packages/hoppscotch-common/src/pages/r/_id.vue
+++ b/packages/hoppscotch-common/src/pages/r/_id.vue
@@ -17,7 +17,7 @@
         v-if="shortcodeDetails.loading"
         class="flex flex-col items-center justify-center flex-1 p-4"
       >
-        <SmartSpinner />
+        <HoppSmartSpinner />
       </div>
       <div v-else>
         <div
@@ -32,13 +32,13 @@
             {{ t("error.invalid_link_description") }}
           </p>
           <p class="mt-4">
-            <ButtonSecondary
+            <HoppButtonSecondary
               to="/"
               :icon="IconHome"
               filled
               :label="t('app.home')"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               :icon="IconRefreshCW"
               :label="t('app.reload')"
               filled
diff --git a/packages/hoppscotch-common/src/pages/realtime.vue b/packages/hoppscotch-common/src/pages/realtime.vue
index bd56ace7a..2cbde040c 100644
--- a/packages/hoppscotch-common/src/pages/realtime.vue
+++ b/packages/hoppscotch-common/src/pages/realtime.vue
@@ -1,18 +1,18 @@
 <template>
-  <SmartTabs
+  <HoppSmartTabs
     v-model="currentTab"
     styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10"
     content-styles="h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)] !flex"
   >
-    <SmartTab
+    <HoppSmartTab
       v-for="{ target, title } in REALTIME_NAVIGATION"
       :id="target"
       :key="target"
       :label="title"
     >
       <RouterView />
-    </SmartTab>
-  </SmartTabs>
+    </HoppSmartTab>
+  </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/pages/realtime/mqtt.vue b/packages/hoppscotch-common/src/pages/realtime/mqtt.vue
index 46b9c1610..9e21490bb 100644
--- a/packages/hoppscotch-common/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/mqtt.vue
@@ -38,7 +38,7 @@
               @keyup.enter="isUrlValid ? toggleConnection() : null"
             />
           </div>
-          <ButtonPrimary
+          <HoppButtonPrimary
             id="connect"
             :disabled="!isUrlValid"
             class="w-32"
@@ -84,14 +84,14 @@
       />
     </template>
     <template #secondary>
-      <SmartWindows
+      <HoppSmartWindows
         :id="'communication_tab'"
         v-model="currentTabId"
         :can-add-new-tab="false"
         @remove-tab="removeTab"
         @sort="sortTabs"
       >
-        <SmartWindow
+        <HoppSmartWindow
           v-for="tab in tabs"
           :id="tab.id"
           :key="'removable_tab_' + tab.id"
@@ -111,22 +111,22 @@
             :log="((tab.id === 'all' ? logs : tab.logs) as LogEntryData[])"
             @delete="clearLogEntries()"
           />
-        </SmartWindow>
-      </SmartWindows>
+        </HoppSmartWindow>
+      </HoppSmartWindows>
     </template>
     <template #sidebar>
       <div
         class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
       >
         <div class="flex justify-between flex-1">
-          <ButtonSecondary
+          <HoppButtonSecondary
             :icon="IconPlus"
             :label="t('mqtt.new')"
             class="!rounded-none"
             @click="showSubscriptionModal(true)"
           />
           <span class="flex">
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               to="https://docs.hoppscotch.io/features/mqtt"
               blank
@@ -150,7 +150,7 @@
         <span class="pb-4 text-center">
           {{ t("empty.subscription") }}
         </span>
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('mqtt.new')"
           filled
           outline
@@ -181,7 +181,7 @@
                 {{ topic.name }}
               </span>
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :icon="IconTrash"
               color="red"
diff --git a/packages/hoppscotch-common/src/pages/realtime/socketio.vue b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
index 589e53f30..8f566150b 100644
--- a/packages/hoppscotch-common/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
@@ -34,7 +34,7 @@
                     tabindex="0"
                     @keyup.escape="hide()"
                   >
-                    <SmartItem
+                    <HoppSmartItem
                       v-for="version in SIOVersions"
                       :key="`client-${version}`"
                       :label="`Client ${version}`"
@@ -76,7 +76,7 @@
               @keyup.enter="isUrlValid ? toggleConnection() : null"
             />
           </div>
-          <ButtonPrimary
+          <HoppButtonPrimary
             id="connect"
             :disabled="!isUrlValid"
             name="connect"
@@ -93,12 +93,12 @@
           />
         </div>
       </div>
-      <SmartTabs
+      <HoppSmartTabs
         v-model="selectedTab"
         styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
         render-inactive-tabs
       >
-        <SmartTab
+        <HoppSmartTab
           :id="'communication'"
           :label="`${t('websocket.communication')}`"
           render-inactive-tabs
@@ -110,8 +110,11 @@
             sticky-header-styles="top-upperTertiaryStickyFold"
             @send-message="sendMessage($event)"
           />
-        </SmartTab>
-        <SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
+        </HoppSmartTab>
+        <HoppSmartTab
+          :id="'protocols'"
+          :label="`${t('request.authorization')}`"
+        >
           <div
             class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
@@ -126,7 +129,7 @@
                 :on-shown="() => authTippyActions.focus()"
               >
                 <span class="select-wrapper">
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     class="pr-8 ml-2 rounded-none"
                     :label="authType"
                   />
@@ -138,7 +141,7 @@
                     tabindex="0"
                     @keyup.escape="hide()"
                   >
-                    <SmartItem
+                    <HoppSmartItem
                       label="None"
                       :icon="authType === 'None' ? IconCircleDot : IconCircle"
                       :active="authType === 'None'"
@@ -149,7 +152,7 @@
                         }
                       "
                     />
-                    <SmartItem
+                    <HoppSmartItem
                       label="Bearer Token"
                       :icon="authType === 'Bearer' ? IconCircleDot : IconCircle"
                       :active="authType === 'Bearer'"
@@ -165,21 +168,21 @@
               </tippy>
             </span>
             <div class="flex">
-              <SmartCheckbox
+              <HoppSmartCheckbox
                 :on="authActive"
                 class="px-2"
                 @change="authActive = !authActive"
               >
                 {{ t("state.enabled") }}
-              </SmartCheckbox>
-              <ButtonSecondary
+              </HoppSmartCheckbox>
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io/features/authorization"
                 blank
                 :title="t('app.wiki')"
                 :icon="IconHelpCircle"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.clear')"
                 :icon="IconTrash2"
@@ -200,7 +203,7 @@
             <span class="pb-4 text-center">
               {{ t("socketio.connection_not_authorized") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               outline
               :label="t('app.documentation')"
               to="https://docs.hoppscotch.io/features/authorization"
@@ -226,7 +229,7 @@
                 <div class="pb-2 text-secondaryLight">
                   {{ t("helpers.authorization") }}
                 </div>
-                <SmartAnchor
+                <HoppSmartAnchor
                   class="link"
                   :label="t('authorization.learn')"
                   :icon="IconExternalLink"
@@ -237,8 +240,8 @@
               </div>
             </div>
           </div>
-        </SmartTab>
-      </SmartTabs>
+        </HoppSmartTab>
+      </HoppSmartTabs>
     </template>
     <template #secondary>
       <RealtimeLog
diff --git a/packages/hoppscotch-common/src/pages/realtime/sse.vue b/packages/hoppscotch-common/src/pages/realtime/sse.vue
index 11b7e1826..f3391f383 100644
--- a/packages/hoppscotch-common/src/pages/realtime/sse.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/sse.vue
@@ -36,7 +36,7 @@
               @keyup.enter="isUrlValid ? toggleSSEConnection() : null"
             />
           </div>
-          <ButtonPrimary
+          <HoppButtonPrimary
             id="start"
             :disabled="!isUrlValid"
             name="start"
diff --git a/packages/hoppscotch-common/src/pages/realtime/websocket.vue b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
index d40306002..52b993629 100644
--- a/packages/hoppscotch-common/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
@@ -20,7 +20,7 @@
             "
             @keyup.enter="isUrlValid ? toggleConnection() : null"
           />
-          <ButtonPrimary
+          <HoppButtonPrimary
             id="connect"
             :disabled="!isUrlValid"
             class="w-32"
@@ -37,12 +37,12 @@
           />
         </div>
       </div>
-      <SmartTabs
+      <HoppSmartTabs
         v-model="selectedTab"
         styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
         render-inactive-tabs
       >
-        <SmartTab
+        <HoppSmartTab
           :id="'communication'"
           :label="`${t('websocket.communication')}`"
         >
@@ -51,8 +51,8 @@
             sticky-header-styles="top-upperSecondaryStickyFold"
             @send-message="sendMessage($event)"
           />
-        </SmartTab>
-        <SmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
+        </HoppSmartTab>
+        <HoppSmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
           <div
             class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
@@ -60,13 +60,13 @@
               {{ t("websocket.protocols") }}
             </label>
             <div class="flex">
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.clear_all')"
                 :icon="IconTrash2"
                 @click="clearContent"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('add.new')"
                 :icon="IconPlus"
@@ -89,7 +89,7 @@
                 class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
               >
                 <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-tippy="{
                       theme: 'tooltip',
                       delay: [500, 20],
@@ -122,7 +122,7 @@
                   "
                 />
                 <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
                     :title="
                       protocol.hasOwnProperty('active')
@@ -148,7 +148,7 @@
                   />
                 </span>
                 <span>
-                  <ButtonSecondary
+                  <HoppButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
                     :title="t('action.remove')"
                     :icon="IconTrash"
@@ -173,8 +173,8 @@
               {{ t("empty.protocols") }}
             </span>
           </div>
-        </SmartTab>
-      </SmartTabs>
+        </HoppSmartTab>
+      </HoppSmartTabs>
     </template>
     <template #secondary>
       <RealtimeLog
@@ -194,7 +194,7 @@ import IconCheckCircle from "~icons/lucide/check-circle"
 import IconCircle from "~icons/lucide/circle"
 import IconGripVertical from "~icons/lucide/grip-vertical"
 import IconTrash from "~icons/lucide/trash"
-import draggable from "vuedraggable"
+import draggable from "vuedraggable-es"
 import {
   setWSEndpoint,
   WSEndpoint$,
diff --git a/packages/hoppscotch-common/src/pages/settings.vue b/packages/hoppscotch-common/src/pages/settings.vue
index 72e0ef25a..5e336cbac 100644
--- a/packages/hoppscotch-common/src/pages/settings.vue
+++ b/packages/hoppscotch-common/src/pages/settings.vue
@@ -58,7 +58,7 @@
             </h4>
             <div class="my-1 text-secondaryLight">
               {{ t("settings.experiments_notice") }}
-              <SmartAnchor
+              <HoppSmartAnchor
                 class="link"
                 to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
                 blank
@@ -67,30 +67,36 @@
             </div>
             <div class="py-4 space-y-4">
               <div class="flex items-center">
-                <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
+                <HoppSmartToggle
+                  :on="TELEMETRY_ENABLED"
+                  @change="showConfirmModal"
+                >
                   {{ t("settings.telemetry") }}
-                </SmartToggle>
+                </HoppSmartToggle>
               </div>
               <div class="flex items-center">
-                <SmartToggle
+                <HoppSmartToggle
                   :on="EXPAND_NAVIGATION"
                   @change="toggleSetting('EXPAND_NAVIGATION')"
                 >
                   {{ t("settings.expand_navigation") }}
-                </SmartToggle>
+                </HoppSmartToggle>
               </div>
               <div class="flex items-center">
-                <SmartToggle
+                <HoppSmartToggle
                   :on="SIDEBAR_ON_LEFT"
                   @change="toggleSetting('SIDEBAR_ON_LEFT')"
                 >
                   {{ t("settings.sidebar_on_left") }}
-                </SmartToggle>
+                </HoppSmartToggle>
               </div>
               <div class="flex items-center">
-                <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
+                <HoppSmartToggle
+                  :on="ZEN_MODE"
+                  @change="toggleSetting('ZEN_MODE')"
+                >
                   {{ t("layout.zen_mode") }}
-                </SmartToggle>
+                </HoppSmartToggle>
               </div>
             </div>
           </section>
@@ -126,7 +132,7 @@
             </div>
             <div class="flex flex-col py-4 space-y-2">
               <span>
-                <SmartItem
+                <HoppSmartItem
                   to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
                   blank
                   :icon="IconChrome"
@@ -137,7 +143,7 @@
                 />
               </span>
               <span>
-                <SmartItem
+                <HoppSmartItem
                   to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
                   blank
                   :icon="IconFirefox"
@@ -150,12 +156,12 @@
             </div>
             <div class="py-4 space-y-4">
               <div class="flex items-center">
-                <SmartToggle
+                <HoppSmartToggle
                   :on="EXTENSIONS_ENABLED"
                   @change="toggleInterceptor('extension')"
                 >
                   {{ t("settings.extensions_use_toggle") }}
-                </SmartToggle>
+                </HoppSmartToggle>
               </div>
             </div>
           </section>
@@ -169,7 +175,7 @@
                   "settings.read_the"
                 )}`
               }}
-              <SmartAnchor
+              <HoppSmartAnchor
                 class="link"
                 to="https://docs.hoppscotch.io/privacy"
                 blank
@@ -178,12 +184,12 @@
             </div>
             <div class="py-4 space-y-4">
               <div class="flex items-center">
-                <SmartToggle
+                <HoppSmartToggle
                   :on="PROXY_ENABLED"
                   @change="toggleInterceptor('proxy')"
                 >
                   {{ t("settings.proxy_use_toggle") }}
-                </SmartToggle>
+                </HoppSmartToggle>
               </div>
             </div>
             <div class="flex items-center py-4 space-x-2">
@@ -201,7 +207,7 @@
                   {{ t("settings.proxy_url") }}
                 </label>
               </div>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('settings.reset_default')"
                 :icon="clearIcon"
@@ -214,7 +220,7 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_telemetry')} ${t(
         'settings.telemetry_helps_us'
diff --git a/packages/hoppscotch-common/tsconfig.json b/packages/hoppscotch-common/tsconfig.json
index f97577f92..8b37ddb21 100644
--- a/packages/hoppscotch-common/tsconfig.json
+++ b/packages/hoppscotch-common/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+  "moduleResolution": "node",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
diff --git a/packages/hoppscotch-ui/README.md b/packages/hoppscotch-ui/README.md
index 3c90ec325..765dd7207 100644
--- a/packages/hoppscotch-ui/README.md
+++ b/packages/hoppscotch-ui/README.md
@@ -19,7 +19,7 @@ Welcome to hoppscotch-ui, a collection of presentational components for our web
 
 To use the components in project, simply name the component with `directory` name as alias:
 
-For example `Primary Button` component is in `button` directory and the file name is `Primary.vue`. So, use that you have to write `<ButtonPrimary />`
+For example `Primary Button` component is in `button` directory and the file name is `Primary.vue`. So, use that you have to write `<HoppButtonPrimary />`
 
 ## Histoire
 
diff --git a/packages/hoppscotch-ui/package.json b/packages/hoppscotch-ui/package.json
index 66dd846f1..be066920b 100644
--- a/packages/hoppscotch-ui/package.json
+++ b/packages/hoppscotch-ui/package.json
@@ -2,13 +2,20 @@
   "name": "@hoppscotch/ui",
   "private": true,
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
     "build": "vite build",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview",
+    "do-build-prod": "pnpm run build",
+    "postinstall": "pnpm run build",
     "do-build-ui": "pnpm run story:build"
   },
+  "peerDependencies": {
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.16"
+  },
   "dependencies": {
     "@hoppscotch/vue-toasted": "^0.1.0",
     "@lezer/highlight": "^1.0.0",
@@ -30,11 +37,10 @@
     "url": "^0.11.0",
     "util": "^0.12.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.2.25",
     "vue-github-button": "^3.0.3",
     "vue-router": "^4.0.16",
     "vue-tippy": "6.0.0-alpha.58",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable-es": "^4.1.1"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
@@ -60,10 +66,11 @@
     "rollup-plugin-polyfill-node": "^0.10.1",
     "sass": "^1.53.0",
     "typescript": "^4.5.4",
-    "unplugin-icons": "^0.14.9",
+    "unplugin-icons": "^0.15.3",
     "unplugin-vue-components": "^0.21.0",
-    "vite": "^3.2.3",
+    "vite": "^4.1.3",
     "vite-plugin-checker": "^0.5.1",
+    "vite-plugin-dts": "2.0.0-beta.3",
     "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
@@ -77,7 +84,13 @@
     "windicss": "^3.5.6"
   },
   "files": [
-    "src",
     "dist"
-  ]
+  ],
+  "module": "./dist/index.es.js",
+  "main": "./dist/index.es.js",
+  "exports": {
+    ".": "./dist/index.es.js",
+    "./style.css": "./dist/style.css"
+  },
+  "types": "./dist/index.d.ts"
 }
diff --git a/packages/hoppscotch-ui/src/assets/scss/styles.scss b/packages/hoppscotch-ui/src/assets/scss/styles.scss
index b38b0c9c7..8605dab2a 100644
--- a/packages/hoppscotch-ui/src/assets/scss/styles.scss
+++ b/packages/hoppscotch-ui/src/assets/scss/styles.scss
@@ -1,64 +1,3 @@
-* {
-  @apply backface-hidden;
-  @apply before:backface-hidden;
-  @apply after:backface-hidden;
-  @apply selection:bg-accentDark;
-  @apply selection:text-accentContrast;
-}
-
-:root {
-  @apply antialiased;
-  accent-color: var(--accent-color);
-  font-variant-ligatures: common-ligatures;
-}
-
-::-webkit-scrollbar-track {
-  @apply bg-transparent;
-  @apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-divider bg-clip-content;
-  @apply rounded-full;
-  @apply border-solid border-transparent border-4;
-  @apply hover:bg-dividerDark;
-  @apply hover:bg-clip-content;
-}
-
-::-webkit-scrollbar {
-  @apply w-4;
-  @apply h-0;
-}
-
-input::placeholder,
-textarea::placeholder,
-.cm-placeholder {
-  @apply text-secondary;
-  @apply opacity-50;
-}
-
-input,
-textarea {
-  @apply text-secondaryDark;
-  @apply font-medium;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  @apply bg-primary;
-  @apply text-secondary text-body;
-  @apply font-medium;
-  @apply select-none;
-  @apply overflow-x-hidden;
-  @apply leading-body;
-  animation: fade 300ms forwards;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-
 @keyframes fade {
   0% {
     @apply opacity-0;
@@ -130,89 +69,6 @@ a {
   }
 }
 
-.cm-tooltip {
-  .tippy-box {
-    @apply shadow-none;
-    @apply fixed;
-    @apply inline-flex;
-    @apply -mt-8;
-  }
-}
-
-.tippy-box[data-theme~="tooltip"] {
-  @apply bg-tooltip;
-  @apply border-solid border-tooltip;
-  @apply rounded;
-  @apply shadow;
-
-  .tippy-content {
-    @apply flex;
-    @apply text-tiny text-primary;
-    @apply font-semibold;
-    @apply py-1 px-2;
-    @apply truncate;
-    @apply leading-normal;
-    @apply items-center;
-
-    kbd {
-      @apply hidden;
-      @apply font-sans;
-      @apply bg-gray-500/45;
-      @apply text-primaryLight;
-      @apply rounded-sm;
-      @apply px-1;
-      @apply my-0 ml-1;
-      @apply truncate;
-      @apply sm:inline-flex;
-    }
-
-    .env-icon {
-      @apply transition;
-      @apply inline-flex;
-      @apply items-center;
-    }
-  }
-
-  .tippy-svg-arrow {
-    svg:first-child {
-      @apply fill-tooltip;
-    }
-
-    svg:last-child {
-      @apply fill-tooltip;
-    }
-  }
-}
-
-.tippy-box[data-theme~="popover"] {
-  @apply bg-popover;
-  @apply border-solid border-dividerDark;
-  @apply rounded;
-  @apply shadow-lg;
-
-  .tippy-content {
-    @apply flex flex-col;
-    @apply max-h-56;
-    @apply items-stretch;
-    @apply overflow-y-auto;
-    @apply text-secondary text-body;
-    @apply p-2;
-    @apply leading-normal;
-    @apply focus:outline-none;
-    scroll-behavior: smooth;
-  }
-
-  .tippy-svg-arrow {
-    svg:first-child {
-      @apply fill-dividerDark;
-    }
-
-    svg:last-child {
-      @apply fill-popover;
-    }
-  }
-}
-
 [data-v-tippy] {
   @apply flex flex-1;
 }
@@ -246,243 +102,6 @@ hr {
   @apply focus-visible:border-dividerDark;
 }
 
-input,
-select,
-textarea,
-button {
-  @apply truncate;
-  @apply transition;
-  @apply text-body;
-  @apply leading-body;
-  @apply focus:outline-none;
-  @apply disabled:cursor-not-allowed;
-}
-
-.input[type="file"],
-.input[type="radio"],
-#installPWA {
-  @apply hidden;
-}
-
-.floating-input ~ label {
-  @apply absolute;
-  @apply px-2 py-0.5;
-  @apply m-2;
-  @apply rounded;
-  @apply transition;
-  @apply origin-top-left;
-}
-
-.floating-input:focus-within ~ label,
-.floating-input:not(:placeholder-shown) ~ label {
-  @apply bg-primary;
-  @apply transform;
-  @apply origin-top-left;
-  @apply scale-75;
-  @apply translate-x-1 -translate-y-4;
-}
-
-.floating-input:focus-within ~ label {
-  @apply text-secondaryDark;
-}
-
-.floating-input ~ .end-actions {
-  @apply absolute;
-  @apply right-0.2;
-  @apply inset-y-0;
-  @apply flex;
-  @apply items-center;
-}
-
-.floating-input:has(~ .end-actions) {
-  @apply pr-12;
-}
-
-pre.ace_editor {
-  @apply font-mono;
-  @apply resize-none;
-  @apply z-0;
-}
-
-.select {
-  @apply appearance-none;
-  @apply cursor-pointer;
-
-  &::-ms-expand {
-    @apply hidden;
-  }
-}
-
-.select-wrapper {
-  @apply flex flex-1;
-  @apply relative;
-  @apply after:absolute;
-  @apply after:flex;
-  @apply after:inset-y-0;
-  @apply after:items-center;
-  @apply after:justify-center;
-  @apply after:pointer-events-none;
-  @apply after:font-icon;
-  @apply after:text-secondaryLight;
-  @apply after:right-3;
-  @apply after:content-["\e313"];
-}
-
-.info-response {
-  @apply text-pink-500;
-}
-
-.success-response {
-  @apply text-green-500;
-}
-
-.redir-response {
-  @apply text-yellow-500;
-}
-
-.cl-error-response {
-  @apply text-red-500;
-}
-
-.sv-error-response {
-  @apply text-red-600;
-}
-
-.missing-data-response {
-  @apply text-secondaryLight;
-}
-
-.toasted-container {
-  @apply max-w-md;
-
-  .toasted {
-    &.toasted-primary {
-      @apply px-4 py-2;
-      @apply bg-tooltip;
-      @apply border-secondaryDark;
-      @apply text-primary text-body;
-      @apply justify-between;
-      @apply shadow-lg;
-      @apply font-semibold;
-      @apply transition;
-      @apply leading-body;
-      @apply sm:rounded;
-      @apply sm:border;
-
-      .action {
-        @apply relative;
-        @apply flex flex-shrink-0;
-        @apply text-body;
-        @apply px-4;
-        @apply my-1;
-        @apply ml-auto;
-        @apply normal-case;
-        @apply font-semibold;
-        @apply leading-body;
-        @apply tracking-normal;
-        @apply rounded;
-        @apply last:ml-4;
-        @apply sm:ml-8;
-        @apply before:absolute;
-        @apply before:bg-current;
-        @apply before:opacity-10;
-        @apply before:inset-0;
-        @apply before:transition;
-        @apply before:content-DEFAULT;
-        @apply hover:no-underline;
-        @apply hover:before:opacity-20;
-      }
-    }
-
-    &.info {
-      @apply bg-accent;
-      @apply text-accentContrast;
-      @apply border-accentDark;
-    }
-
-    &.error {
-      @apply bg-red-200;
-      @apply text-red-800;
-      @apply border-red-400;
-    }
-
-    &.success {
-      @apply bg-green-200;
-      @apply text-green-800;
-      @apply border-green-400;
-    }
-  }
-}
-
-.smart-splitter .splitpanes__splitter {
-  @apply relative;
-  @apply before:absolute;
-  @apply before:inset-0;
-  @apply before:bg-accentLight;
-  @apply before:opacity-0;
-  @apply before:z-20;
-  @apply before:transition;
-  @apply before:content-DEFAULT;
-  @apply hover:before:opacity-100;
-}
-
-.no-splitter .splitpanes__splitter {
-  @apply relative;
-}
-
-.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
-  @apply w-0;
-  @apply before:-left-0.5;
-  @apply before:-right-0.5;
-  @apply before:h-full;
-  @apply bg-divider;
-}
-
-.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
-  @apply h-0;
-  @apply before:-top-0.5;
-  @apply before:-bottom-0.5;
-  @apply before:w-full;
-  @apply bg-divider;
-}
-
-.no-splitter.splitpanes--vertical > .splitpanes__splitter {
-  @apply w-0;
-  @apply pointer-events-none;
-  @apply bg-dividerLight;
-}
-
-.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
-  @apply h-0;
-  @apply pointer-events-none;
-  @apply bg-dividerLight;
-}
-
-.cm-focused {
-  @apply select-auto;
-  @apply outline-none #{!important};
-
-  .cm-activeLine {
-    @apply bg-primaryLight;
-  }
-
-  .cm-activeLineGutter {
-    @apply bg-primaryDark;
-  }
-}
-
-.cm-editor {
-  .cm-line::selection {
-    @apply bg-accentDark #{!important};
-    @apply text-accentContrast #{!important};
-  }
-
-  .cm-line ::selection {
-    @apply bg-accentDark #{!important};
-    @apply text-accentContrast #{!important};
-  }
-}
-
 .shortcut-key {
   @apply inline-flex;
   @apply font-sans;
@@ -499,62 +118,3 @@ pre.ace_editor {
   @apply shadow-sm;
   @apply <sm:hidden;
 }
-
-.capitalize-first {
-  @apply first-letter:capitalize;
-}
-
-details {
-  @apply select-none;
-}
-
-details summary::-webkit-details-marker {
-  @apply hidden;
-}
-
-details summary .indicator {
-  @apply transition;
-}
-
-details[open] summary .indicator {
-  @apply transform;
-  @apply rotate-90;
-}
-
-@media (max-width: 767px) {
-  main {
-    margin-bottom: env(safe-area-inset-bottom);
-  }
-}
-
-.env-highlight {
-  @apply text-accentContrast;
-
-  &.env-found {
-    @apply bg-accentDark;
-    @apply hover:bg-accent;
-  }
-
-  &.env-not-found {
-    @apply bg-red-500;
-    @apply hover:bg-red-600;
-  }
-}
-
-#nprogress .bar {
-  @apply bg-accent #{!important};
-}
-
-.color-picker[type="color"] {
-  @apply appearance-none;
-}
-
-.color-picker[type="color"]::-webkit-color-swatch-wrapper {
-  @apply rounded;
-  @apply p-0;
-}
-
-.color-picker[type="color"]::-webkit-color-swatch {
-  @apply rounded;
-  @apply border-0;
-}
diff --git a/packages/hoppscotch-ui/src/components.d.ts b/packages/hoppscotch-ui/src/components.d.ts
deleted file mode 100644
index e52ba9d2d..000000000
--- a/packages/hoppscotch-ui/src/components.d.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// 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'
-
-export {}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
-    ButtonSecondary: typeof import('./components/button/Secondary.vue')['default']
-    IconLucideLoader: typeof import('~icons/lucide/loader')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SmartAnchor: typeof import('./components/smart/Anchor.vue')['default']
-    SmartAutoComplete: typeof import('./components/smart/AutoComplete.vue')['default']
-    SmartCheckbox: typeof import('./components/smart/Checkbox.vue')['default']
-    SmartConfirmModal: typeof import('./components/smart/ConfirmModal.vue')['default']
-    SmartExpand: typeof import('./components/smart/Expand.vue')['default']
-    SmartFileChip: typeof import('./components/smart/FileChip.vue')['default']
-    SmartIntersection: typeof import('./components/smart/Intersection.vue')['default']
-    SmartItem: typeof import('./components/smart/Item.vue')['default']
-    SmartLink: typeof import('./components/smart/Link.vue')['default']
-    SmartModal: typeof import('./components/smart/Modal.vue')['default']
-    SmartProgressRing: typeof import('./components/smart/ProgressRing.vue')['default']
-    SmartRadio: typeof import('./components/smart/Radio.vue')['default']
-    SmartRadioGroup: typeof import('./components/smart/RadioGroup.vue')['default']
-    SmartSlideOver: typeof import('./components/smart/SlideOver.vue')['default']
-    SmartSpinner: typeof import('./components/smart/Spinner.vue')['default']
-    SmartTab: typeof import('./components/smart/Tab.vue')['default']
-    SmartTabs: typeof import('./components/smart/Tabs.vue')['default']
-    SmartToggle: typeof import('./components/smart/Toggle.vue')['default']
-    SmartWindow: typeof import('./components/smart/Window.vue')['default']
-    SmartWindows: typeof import('./components/smart/Windows.vue')['default']
-  }
-
-}
diff --git a/packages/hoppscotch-ui/src/components/button/Primary.vue b/packages/hoppscotch-ui/src/components/button/Primary.vue
index 5be5f6c21..89656dace 100644
--- a/packages/hoppscotch-ui/src/components/button/Primary.vue
+++ b/packages/hoppscotch-ui/src/components/button/Primary.vue
@@ -1,7 +1,5 @@
 <template>
-  <SmartLink
-    :to="to"
-    :blank="blank"
+  <HoppSmartLink :to="to" :blank="blank"
     class="relative inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
     :class="[
       color
@@ -21,45 +19,29 @@
         'border border-accent hover:border-accentDark focus-visible:border-accentDark':
           outline,
       },
-    ]"
-    :disabled="disabled"
-    :tabindex="loading ? '-1' : '0'"
-    role="button"
-  >
-    <span
-      class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]"
-    >
-      <component
-        :is="icon"
-        v-if="icon"
-        class="svg-icons"
-        :class="[
-          { '!text-2xl': large },
-          label ? (reverse ? 'ml-2' : 'mr-2') : '',
-        ]"
-      />
+    ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button">
+    <span class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="[{ 'flex-row-reverse': reverse }, { 'opacity-50': loading }]">
+      <component :is="icon" v-if="icon" class="svg-icons" :class="[
+        { '!text-2xl': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]" />
       {{ label }}
       <div v-if="shortcut.length" class="<sm:hidden">
-        <kbd
-          v-for="(key, index) in shortcut"
-          :key="`key-${index}`"
-          class="shortcut-key !bg-accentDark !border-accentLight"
-        >
+        <kbd v-for="(key, index) in shortcut" :key="`key-${index}`"
+          class="shortcut-key !bg-accentDark !border-accentLight">
           {{ key }}
         </kbd>
       </div>
     </span>
-    <span
-      v-if="loading"
-      class="absolute inset-0 flex items-center justify-center"
-    >
-      <SmartSpinner />
+    <span v-if="loading" class="absolute inset-0 flex items-center justify-center">
+      <HoppSmartSpinner />
     </span>
-  </SmartLink>
+  </HoppSmartLink>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartLink, HoppSmartSpinner } from "../smart"
 import type { Component } from "vue"
 
 interface Props {
@@ -80,6 +62,7 @@ interface Props {
   outline?: boolean
   shortcut?: string[]
 }
+
 withDefaults(defineProps<Props>(), {
   to: "",
   exact: true,
diff --git a/packages/hoppscotch-ui/src/components/button/Secondary.vue b/packages/hoppscotch-ui/src/components/button/Secondary.vue
index 2756b5370..5151424f2 100644
--- a/packages/hoppscotch-ui/src/components/button/Secondary.vue
+++ b/packages/hoppscotch-ui/src/components/button/Secondary.vue
@@ -1,8 +1,5 @@
 <template>
-  <SmartLink
-    :to="to"
-    :exact="exact"
-    :blank="blank"
+  <HoppSmartLink :to="to" :exact="exact" :blank="blank"
     class="inline-flex items-center justify-center py-2 font-semibold transition whitespace-nowrap focus:outline-none"
     :class="[
       color
@@ -22,41 +19,26 @@
         'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
           filled,
       },
-    ]"
-    :disabled="disabled"
-    :tabindex="loading ? '-1' : '0'"
-    role="button"
-  >
-    <span
-      v-if="!loading"
-      class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="{ 'flex-row-reverse': reverse }"
-    >
-      <component
-        :is="icon"
-        v-if="icon"
-        class="svg-icons"
-        :class="[
-          { '!text-2xl': large },
-          label ? (reverse ? 'ml-2' : 'mr-2') : '',
-        ]"
-      />
+    ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="button">
+    <span v-if="!loading" class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="{ 'flex-row-reverse': reverse }">
+      <component :is="icon" v-if="icon" class="svg-icons" :class="[
+        { '!text-2xl': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]" />
       {{ label }}
       <div v-if="shortcut.length" class="<sm:hidden">
-        <kbd
-          v-for="(key, index) in shortcut"
-          :key="`key-${index}`"
-          class="shortcut-key !bg-inherit"
-        >
+        <kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="shortcut-key !bg-inherit">
           {{ key }}
         </kbd>
       </div>
     </span>
-    <SmartSpinner v-else />
-  </SmartLink>
+    <HoppSmartSpinner v-else />
+  </HoppSmartLink>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartLink, HoppSmartSpinner } from "../smart";
 import type { Component } from "vue"
 
 interface Props {
diff --git a/packages/hoppscotch-ui/src/components/button/index.ts b/packages/hoppscotch-ui/src/components/button/index.ts
new file mode 100644
index 000000000..5da471222
--- /dev/null
+++ b/packages/hoppscotch-ui/src/components/button/index.ts
@@ -0,0 +1,2 @@
+export { default as HoppButtonPrimary } from "./Primary.vue"
+export { default as HoppButtonSecondary } from "./Secondary.vue"
diff --git a/packages/hoppscotch-ui/src/components/index.ts b/packages/hoppscotch-ui/src/components/index.ts
index 4faf9ca17..d9f6e9632 100644
--- a/packages/hoppscotch-ui/src/components/index.ts
+++ b/packages/hoppscotch-ui/src/components/index.ts
@@ -1,47 +1,2 @@
-import Primary from "./button/Primary.vue"
-import Secondary from "./button/Secondary.vue"
-import Anchor from "./smart/Anchor.vue"
-import AutoComplete from "./smart/AutoComplete.vue"
-import Checkbox from "./smart/Checkbox.vue"
-import ConfirmModal from "./smart/ConfirmModal.vue"
-import Expand from "./smart/Expand.vue"
-import FileChip from "./smart/FileChip.vue"
-import Intersection from "./smart/Intersection.vue"
-import Item from "./smart/Item.vue"
-import Link from "./smart/Link.vue"
-import Modal from "./smart/Modal.vue"
-import ProgressRing from "./smart/ProgressRing.vue"
-import Radio from "./smart/Radio.vue"
-import RadioGroup from "./smart/RadioGroup.vue"
-import SlideOver from "./smart/SlideOver.vue"
-import Spinner from "./smart/Spinner.vue"
-import Tab from "./smart/Tab.vue"
-import Tabs from "./smart/Tabs.vue"
-import Toggle from "./smart/Toggle.vue"
-import Window from "./smart/Window.vue"
-import Windows from "./smart/Windows.vue"
-
-export default {
-  Primary,
-  Secondary,
-  Anchor,
-  AutoComplete,
-  Checkbox,
-  ConfirmModal,
-  Expand,
-  FileChip,
-  Intersection,
-  Item,
-  Link,
-  Modal,
-  ProgressRing,
-  Radio,
-  RadioGroup,
-  SlideOver,
-  Spinner,
-  Tab,
-  Tabs,
-  Toggle,
-  Window,
-  Windows,
-}
+export * from "./button"
+export * from "./smart"
diff --git a/packages/hoppscotch-ui/src/components/smart/Anchor.vue b/packages/hoppscotch-ui/src/components/smart/Anchor.vue
index 034cd3cd0..3a18a7d70 100644
--- a/packages/hoppscotch-ui/src/components/smart/Anchor.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Anchor.vue
@@ -1,33 +1,25 @@
 <template>
-  <SmartLink
-    :to="to"
-    :exact="exact"
-    :blank="blank"
-    class="inline-flex items-center justify-center focus:outline-none"
+  <HoppSmartLink :to="to" :exact="exact" :blank="blank" class="inline-flex items-center justify-center focus:outline-none"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
-    ]"
-    :disabled="disabled"
-    tabindex="0"
-  >
-    <component
-      :is="icon"
-      v-if="icon"
-      class="svg-icons"
-      :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
-    />
+    ]" :disabled="disabled" tabindex="0">
+    <component :is="icon" v-if="icon" class="svg-icons" :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''" />
     {{ label }}
-  </SmartLink>
+  </HoppSmartLink>
 </template>
 
 <script lang="ts">
+import HoppSmartLink from "./Link.vue";
 import { Component, defineComponent, PropType } from "vue"
 
 export default defineComponent({
+  components: {
+    HoppSmartLink
+  },
   props: {
     to: {
       type: String,
diff --git a/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue b/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
index 85a6c7fe3..d8a8f5149 100644
--- a/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
+++ b/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
@@ -1,36 +1,17 @@
 <template>
   <div class="autocomplete-wrapper">
-    <input
-      ref="acInput"
-      :value="text"
-      type="text"
-      autocomplete="off"
-      :placeholder="placeholder"
-      :spellcheck="spellcheck"
-      :autocapitalize="autocapitalize"
-      :class="styles"
-      @input.stop="
+    <input ref="acInput" :value="text" type="text" autocomplete="off" :placeholder="placeholder" :spellcheck="spellcheck"
+      :autocapitalize="autocapitalize" :class="styles" @input.stop="
         (e) => {
           $emit('input', e.target.value)
           updateSuggestions(e)
         }
-      "
-      @keyup="updateSuggestions"
-      @click="updateSuggestions"
-      @keydown="handleKeystroke"
-      @change="$emit('change', $event)"
-    />
-    <ul
-      v-if="suggestions.length > 0 && suggestionsVisible"
-      class="suggestions"
-      :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
-    >
-      <li
-        v-for="(suggestion, index) in suggestions"
-        :key="`suggestion-${index}`"
-        :class="{ active: currentSuggestionIndex === index }"
-        @click.prevent="forceSuggestion(suggestion)"
-      >
+      " @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke"
+      @change="$emit('change', $event)" />
+    <ul v-if="suggestions.length > 0 && suggestionsVisible" class="suggestions"
+      :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
+      <li v-for="(suggestion, index) in suggestions" :key="`suggestion-${index}`"
+        :class="{ active: currentSuggestionIndex === index }" @click.prevent="forceSuggestion(suggestion)">
         {{ suggestion }}
       </li>
     </ul>
@@ -182,7 +163,7 @@ export default defineComponent({
         case "Tab": {
           const activeSuggestion =
             this.suggestions[
-              this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
+            this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
             ]
 
           if (!activeSuggestion) {
@@ -205,7 +186,7 @@ export default defineComponent({
   @apply relative;
   @apply contents;
 
-  input:focus + ul.suggestions,
+  input:focus+ul.suggestions,
   ul.suggestions:hover {
     @apply block;
   }
diff --git a/packages/hoppscotch-ui/src/components/smart/ConfirmModal.vue b/packages/hoppscotch-ui/src/components/smart/ConfirmModal.vue
index 9a599bbce..57d4c23a4 100644
--- a/packages/hoppscotch-ui/src/components/smart/ConfirmModal.vue
+++ b/packages/hoppscotch-ui/src/components/smart/ConfirmModal.vue
@@ -1,12 +1,6 @@
 <template>
-  <SmartModal
-    v-if="show"
-    dialog
-    :title="confirm ?? t?.('modal.confirm') ?? 'Confirm'"
-    role="dialog"
-    aria-modal="true"
-    @close="hideModal"
-  >
+  <HoppSmartModal v-if="show" dialog :title="confirm ?? t?.('modal.confirm') ?? 'Confirm'" role="dialog" aria-modal="true"
+    @close="hideModal">
     <template #body>
       <div class="flex flex-col items-center justify-center">
         {{ title }}
@@ -14,27 +8,19 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
-          v-focus
-          :label="yes ?? t?.('action.yes') ?? 'Yes'"
-          :loading="!!loadingState"
-          outline
-          @click="resolve"
-        />
-        <ButtonSecondary
-          :label="no ?? t?.('action.no') ?? 'No'"
-          filled
-          outline
-          @click="hideModal"
-        />
+        <HoppButtonPrimary v-focus :label="yes ?? t?.('action.yes') ?? 'Yes'" :loading="!!loadingState" outline
+          @click="resolve" />
+        <HoppButtonSecondary :label="no ?? t?.('action.no') ?? 'No'" filled outline @click="hideModal" />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
 import { inject } from "vue"
-import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
+import { HoppButtonPrimary, HoppButtonSecondary } from "../button"
+import { HoppSmartModal } from "."
+import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../plugin"
 
 const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
diff --git a/packages/hoppscotch-ui/src/components/smart/Expand.vue b/packages/hoppscotch-ui/src/components/smart/Expand.vue
index 241eb9d1f..51b97797a 100644
--- a/packages/hoppscotch-ui/src/components/smart/Expand.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Expand.vue
@@ -1,32 +1,22 @@
 <template>
-  <div
-    class="relative flex flex-col space-y-2 overflow-hidden"
-    :class="expand ? 'h-full' : 'max-h-32'"
-  >
+  <div class="relative flex flex-col space-y-2 overflow-hidden" :class="expand ? 'h-full' : 'max-h-32'">
     <slot name="body"></slot>
-    <div
-      class="sticky inset-x-0 bottom-0 flex items-center justify-center flex-shrink-0 overflow-x-auto"
-    >
-      <ButtonSecondary
-        :icon="expand ? IconChevronUp : IconChevronDown"
-        :label="
-          expand
-            ? less ?? t?.('action.less') ?? 'Less'
-            : more ?? t?.('action.more') ?? 'More'
-        "
-        filled
-        rounded
-        @click="expand = !expand"
-      />
+    <div class="sticky inset-x-0 bottom-0 flex items-center justify-center flex-shrink-0 overflow-x-auto">
+      <HoppButtonSecondary :icon="expand ? IconChevronUp : IconChevronDown" :label="
+        expand
+          ? less ?? t?.('action.less') ?? 'Less'
+          : more ?? t?.('action.more') ?? 'More'
+      " filled rounded @click="expand = !expand" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { HoppButtonSecondary } from "../button"
 import IconChevronUp from "~icons/lucide/chevron-up"
 import IconChevronDown from "~icons/lucide/chevron-down"
 import { inject, ref } from "vue"
-import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
+import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../plugin"
 
 const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
diff --git a/packages/hoppscotch-ui/src/components/smart/Item.vue b/packages/hoppscotch-ui/src/components/smart/Item.vue
index 9ecd84e28..ddef4eb5a 100644
--- a/packages/hoppscotch-ui/src/components/smart/Item.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Item.vue
@@ -1,8 +1,5 @@
 <template>
-  <SmartLink
-    :to="to"
-    :exact="exact"
-    :blank="blank"
+  <HoppSmartLink :to="to" :exact="exact" :blank="blank"
     class="inline-flex items-center flex-shrink-0 px-4 py-2 rounded transition hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
@@ -13,31 +10,15 @@
         'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
-    ]"
-    :disabled="disabled"
-    :tabindex="loading ? '-1' : '0'"
-    role="menuitem"
-  >
-    <span
-      v-if="!loading"
-      class="inline-flex items-center"
-      :class="{ 'self-start': !!infoIcon }"
-    >
-      <component
-        :is="icon"
-        v-if="icon"
-        class="opacity-75 svg-icons"
-        :class="[
-          label ? (reverse ? 'ml-4' : 'mr-4') : '',
-          { 'text-accent': active },
-        ]"
-      />
+    ]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="menuitem">
+    <span v-if="!loading" class="inline-flex items-center" :class="{ 'self-start': !!infoIcon }">
+      <component :is="icon" v-if="icon" class="opacity-75 svg-icons" :class="[
+        label ? (reverse ? 'ml-4' : 'mr-4') : '',
+        { 'text-accent': active },
+      ]" />
     </span>
-    <SmartSpinner v-else class="mr-4 text-secondaryDark" />
-    <div
-      class="inline-flex items-start flex-1 truncate"
-      :class="{ 'flex-col': description }"
-    >
+    <HoppSmartSpinner v-else class="mr-4 text-secondaryDark" />
+    <div class="inline-flex items-start flex-1 truncate" :class="{ 'flex-col': description }">
       <div class="font-semibold truncate">
         {{ label }}
       </div>
@@ -45,28 +26,26 @@
         {{ description }}
       </p>
     </div>
-    <component
-      :is="infoIcon"
-      v-if="infoIcon"
-      class="items-center self-center ml-4 svg-icons"
-      :class="{ 'text-accent': activeInfoIcon }"
-    />
+    <component :is="infoIcon" v-if="infoIcon" class="items-center self-center ml-4 svg-icons"
+      :class="{ 'text-accent': activeInfoIcon }" />
     <div v-if="shortcut.length" class="ml-4 <sm:hidden font-medium">
-      <kbd
-        v-for="(key, index) in shortcut"
-        :key="`key-${index}`"
-        class="-mr-2 shortcut-key"
-      >
+      <kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="-mr-2 shortcut-key">
         {{ key }}
       </kbd>
     </div>
-  </SmartLink>
+  </HoppSmartLink>
 </template>
 
 <script lang="ts">
+import HoppSmartLink from "./Link.vue"
+import HoppSmartSpinner from "./Spinner.vue"
 import { defineComponent } from "vue"
 
 export default defineComponent({
+  components: {
+    HoppSmartLink,
+    HoppSmartSpinner
+  },
   props: {
     to: {
       type: String,
diff --git a/packages/hoppscotch-ui/src/components/smart/Link.vue b/packages/hoppscotch-ui/src/components/smart/Link.vue
index be99d870b..5eca4ab0e 100644
--- a/packages/hoppscotch-ui/src/components/smart/Link.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Link.vue
@@ -1,30 +1,12 @@
 <template>
-  <button
-    v-if="renderedTag === 'BUTTON'"
-    aria-label="button"
-    role="button"
-    v-bind="$attrs"
-  >
+  <button v-if="renderedTag === 'BUTTON'" aria-label="button" role="button" v-bind="$attrs">
     <slot></slot>
   </button>
-  <a
-    v-else-if="renderedTag === 'ANCHOR' && !blank"
-    aria-label="Link"
-    :href="to"
-    role="link"
-    v-bind="updatedAttrs"
-  >
+  <a v-else-if="renderedTag === 'ANCHOR' && !blank" aria-label="Link" :href="to" role="link" v-bind="updatedAttrs">
     <slot></slot>
   </a>
-  <a
-    v-else-if="renderedTag === 'ANCHOR' && blank"
-    aria-label="Link"
-    :href="to"
-    role="link"
-    target="_blank"
-    rel="noopener"
-    v-bind="updatedAttrs"
-  >
+  <a v-else-if="renderedTag === 'ANCHOR' && blank" aria-label="Link" :href="to" role="link" target="_blank" rel="noopener"
+    v-bind="updatedAttrs">
     <slot></slot>
   </a>
   <RouterLink v-else :to="to" v-bind="updatedAttrs">
@@ -33,6 +15,7 @@
 </template>
 
 <script lang="ts">
+import { RouterLink } from "vue-router"
 /**
  * for preventing the automatic binding of $attrs.
  * we are manually binding $attrs or updatedAttrs.
diff --git a/packages/hoppscotch-ui/src/components/smart/Modal.vue b/packages/hoppscotch-ui/src/components/smart/Modal.vue
index 716a40d4d..1400d0edd 100644
--- a/packages/hoppscotch-ui/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Modal.vue
@@ -101,7 +101,7 @@ import {
   onBeforeUnmount,
   inject,
 } from "vue"
-import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
+import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../plugin"
 
 const { t, onModalOpen, onModalClose } =
   inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
diff --git a/packages/hoppscotch-ui/src/components/smart/Radio.vue b/packages/hoppscotch-ui/src/components/smart/Radio.vue
index 3f0a523b8..67437be25 100644
--- a/packages/hoppscotch-ui/src/components/smart/Radio.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Radio.vue
@@ -1,15 +1,10 @@
 <template>
-  <SmartItem
-    :label="label"
-    :icon="selected ? IconCircleDot : IconCircle"
-    :active="selected"
-    role="radio"
-    :aria-checked="selected"
-    @click="emit('change', value)"
-  />
+  <HoppSmartItem :label="label" :icon="selected ? IconCircleDot : IconCircle" :active="selected" role="radio"
+    :aria-checked="selected" @click="emit('change', value)" />
 </template>
 
 <script setup lang="ts">
+import { HoppSmartItem } from "."
 import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
 
diff --git a/packages/hoppscotch-ui/src/components/smart/RadioGroup.vue b/packages/hoppscotch-ui/src/components/smart/RadioGroup.vue
index 162bfa87d..6b136179e 100644
--- a/packages/hoppscotch-ui/src/components/smart/RadioGroup.vue
+++ b/packages/hoppscotch-ui/src/components/smart/RadioGroup.vue
@@ -1,17 +1,13 @@
 <template>
   <div class="flex flex-col">
-    <SmartRadio
-      v-for="(radio, index) in radios"
-      :key="`radio-${index}`"
-      :value="radio.value"
-      :label="radio.label"
-      :selected="modelValue === radio.value"
-      @change="emit('update:modelValue', radio.value)"
-    />
+    <HoppSmartRadio v-for="(radio, index) in radios" :key="`radio-${index}`" :value="radio.value" :label="radio.label"
+      :selected="modelValue === radio.value" @change="emit('update:modelValue', radio.value)" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartRadio } from '.';
+
 const emit = defineEmits<{
   (e: "update:modelValue", value: string): void
 }>()
diff --git a/packages/hoppscotch-ui/src/components/smart/SlideOver.vue b/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
index 2bc35ef9e..5685b488c 100644
--- a/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
+++ b/packages/hoppscotch-ui/src/components/smart/SlideOver.vue
@@ -1,30 +1,18 @@
 <template>
   <div>
     <Transition name="fade" appear>
-      <div
-        v-if="show"
-        class="fixed inset-0 z-20 transition-opacity"
-        @keydown.esc="close()"
-      >
-        <div
-          class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none"
-          tabindex="0"
-          @click="close()"
-        ></div>
+      <div v-if="show" class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
+        <div class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none" tabindex="0" @click="close()"></div>
       </div>
     </Transition>
     <Transition name="slide" appear>
-      <aside
-        v-if="show"
-        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96"
-      >
-        <div
-          class="flex items-center justify-between p-2 border-b border-dividerLight"
-        >
+      <aside v-if="show"
+        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96">
+        <div class="flex items-center justify-between p-2 border-b border-dividerLight">
           <h3 class="ml-4 heading">{{ title }}</h3>
           <span class="flex items-center">
             <kbd class="mr-2 shortcut-key">ESC</kbd>
-            <ButtonSecondary :icon="IconX" @click="close()" />
+            <HoppButtonSecondary :icon="IconX" @click="close()" />
           </span>
         </div>
         <slot name="content"></slot>
@@ -34,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+import { HoppButtonSecondary } from "../button"
 import { onMounted, watch } from "vue"
 import IconX from "~icons/lucide/x"
 
diff --git a/packages/hoppscotch-ui/src/components/smart/Spinner.vue b/packages/hoppscotch-ui/src/components/smart/Spinner.vue
index 4f36d40af..4b530af47 100644
--- a/packages/hoppscotch-ui/src/components/smart/Spinner.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Spinner.vue
@@ -1,9 +1,7 @@
 <template>
-  <icon-lucide-loader class="animate-spin svg-icons" />
+  <IconLucideLoader class="animate-spin svg-icons" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({})
+<script setup lang="ts">
+import IconLucideLoader from "~icons/lucide/loader"
 </script>
diff --git a/packages/hoppscotch-ui/src/components/smart/Windows.vue b/packages/hoppscotch-ui/src/components/smart/Windows.vue
index 9b142a554..5f7746219 100644
--- a/packages/hoppscotch-ui/src/components/smart/Windows.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Windows.vue
@@ -1,71 +1,37 @@
 <template>
   <div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
-    <div
-      class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto tabs bg-primaryLight"
-    >
+    <div class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto tabs bg-primaryLight">
       <div class="flex flex-1 flex-shrink-0 w-0 overflow-x-auto">
         <div class="flex justify-between divide-x divide-dividerLight">
           <div class="flex">
-            <draggable
-              v-bind="dragOptions"
-              :list="tabEntries"
-              :style="tabStyles"
-              :item-key="'window-'"
-              class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight"
-              @sort="sortTabs"
-            >
+            <draggable v-bind="dragOptions" :list="tabEntries" :style="tabStyles" :item-key="'window-'"
+              class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight" @sort="sortTabs">
               <template #item="{ element: [tabID, tabMeta] }">
-                <button
-                  :key="`removable-tab-${tabID}`"
-                  class="tab"
-                  :class="[{ active: modelValue === tabID }]"
-                  :aria-label="tabMeta.label || ''"
-                  role="button"
-                  @keyup.enter="selectTab(tabID)"
-                  @click="selectTab(tabID)"
-                >
+                <button :key="`removable-tab-${tabID}`" class="tab" :class="[{ active: modelValue === tabID }]"
+                  :aria-label="tabMeta.label || ''" role="button" @keyup.enter="selectTab(tabID)"
+                  @click="selectTab(tabID)">
                   <div class="flex items-stretch truncate">
-                    <span
-                      v-if="tabMeta.icon"
-                      class="flex items-center justify-center mx-4 cursor-pointer"
-                    >
+                    <span v-if="tabMeta.icon" class="flex items-center justify-center mx-4 cursor-pointer">
                       <component :is="tabMeta.icon" class="w-4 h-4 svg-icons" />
                     </span>
                     <span class="truncate">
                       {{ tabMeta.label }}
                     </span>
                   </div>
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
-                    :icon="IconX"
-                    :style="{
-                      visibility: tabMeta.isRemovable ? 'visible' : 'hidden',
-                    }"
-                    :title="closeText ?? t?.('action.close') ?? 'Close'"
-                    :class="[{ active: modelValue === tabID }, 'close']"
-                    class="mx-2 !p-0.5"
-                    @click.stop="emit('removeTab', tabID)"
-                  />
+                  <HoppButtonSecondary v-tippy="{ theme: 'tooltip', delay: [500, 20] }" :icon="IconX" :style="{
+                    visibility: tabMeta.isRemovable ? 'visible' : 'hidden',
+                  }" :title="closeText ?? t?.('action.close') ?? 'Close'"
+                    :class="[{ active: modelValue === tabID }, 'close']" class="mx-2 !p-0.5"
+                    @click.stop="emit('removeTab', tabID)" />
                 </button>
               </template>
             </draggable>
           </div>
-          <div
-            class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-8"
-          >
+          <div class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-8">
             <slot name="actions">
-              <span
-                v-if="canAddNewTab"
-                class="flex items-center justify-center px-2 py-1.5 bg-primaryLight z-8"
-              >
-                <ButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="newText ?? t?.('action.new') ?? 'New'"
-                  :icon="IconPlus"
-                  class="rounded !p-1"
-                  filled
-                  @click="addTab"
-                />
+              <span v-if="canAddNewTab" class="flex items-center justify-center px-2 py-1.5 bg-primaryLight z-8">
+                <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="newText ?? t?.('action.new') ?? 'New'"
+                  :icon="IconPlus" class="rounded !p-1" filled @click="addTab" />
               </span>
             </slot>
           </div>
@@ -79,15 +45,15 @@
 </template>
 
 <script setup lang="ts">
+import { HoppButtonSecondary } from "../button"
 import IconPlus from "~icons/lucide/plus"
 import IconX from "~icons/lucide/x"
 import { pipe } from "fp-ts/function"
 import { not } from "fp-ts/Predicate"
 import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
-import { ref, ComputedRef, computed, provide, inject } from "vue"
-import type { Slot } from "vue"
-import draggable from "vuedraggable"
+import { ref, ComputedRef, computed, provide, inject, Slot } from "vue"
+import draggable from "vuedraggable-es"
 import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
 
 export type TabMeta = {
@@ -213,13 +179,13 @@ const addTab = () => {
   @apply whitespace-nowrap;
   @apply overflow-auto;
   @apply flex-shrink-0;
-  @apply after:absolute;
-  @apply after:inset-x-0;
-  @apply after:bottom-0;
-  @apply after:bg-dividerLight;
-  @apply after:z-10;
-  @apply after:h-0.25;
-  @apply after:content-DEFAULT;
+  @apply after: absolute;
+  @apply after: inset-x-0;
+  @apply after: bottom-0;
+  @apply after: bg-dividerLight;
+  @apply after: z-10;
+  @apply after: h-0.25;
+  @apply after: content-DEFAULT;
 
   .tab {
     @apply relative;
@@ -232,23 +198,23 @@ const addTab = () => {
     @apply items-center;
     @apply justify-between;
     @apply text-secondaryLight;
-    @apply hover:bg-primaryDark;
-    @apply hover:text-secondary;
-    @apply focus-visible:text-secondaryDark;
-    @apply before:absolute;
-    @apply before:left-0;
-    @apply before:right-0;
-    @apply before:top-0;
-    @apply before:bg-transparent;
-    @apply before:z-2;
-    @apply before:h-0.5;
-    @apply before:content-DEFAULT;
+    @apply hover: bg-primaryDark;
+    @apply hover: text-secondary;
+    @apply focus-visible: text-secondaryDark;
+    @apply before: absolute;
+    @apply before: left-0;
+    @apply before: right-0;
+    @apply before: top-0;
+    @apply before: bg-transparent;
+    @apply before: z-2;
+    @apply before: h-0.5;
+    @apply before: content-DEFAULT;
     @apply focus: before: bg-divider;
 
     &.active {
       @apply text-secondaryDark;
       @apply bg-primary;
-      @apply before:bg-accent;
+      @apply before: bg-accent;
     }
 
     .close {
diff --git a/packages/hoppscotch-ui/src/components/smart/index.ts b/packages/hoppscotch-ui/src/components/smart/index.ts
new file mode 100644
index 000000000..d7f291c7c
--- /dev/null
+++ b/packages/hoppscotch-ui/src/components/smart/index.ts
@@ -0,0 +1,20 @@
+export { default as HoppSmartAnchor } from "./Anchor.vue"
+export { default as HoppSmartAutoComplete } from "./AutoComplete.vue"
+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 HoppSmartIntersection } from "./Intersection.vue"
+export { default as HoppSmartItem } from "./Item.vue"
+export { default as HoppSmartLink } from "./Link.vue"
+export { default as HoppSmartModal } from "./Modal.vue"
+export { default as HoppSmartProgressRing } from "./ProgressRing.vue"
+export { default as HoppSmartRadio } from "./Radio.vue"
+export { default as HoppSmartRadioGroup } from "./RadioGroup.vue"
+export { default as HoppSmartSlideOver } from "./SlideOver.vue"
+export { default as HoppSmartSpinner } from "./Spinner.vue"
+export { default as HoppSmartTab } from "./Tab.vue"
+export { default as HoppSmartTabs } from "./Tabs.vue"
+export { default as HoppSmartToggle } from "./Toggle.vue"
+export { default as HoppSmartWindow } from "./Window.vue"
+export { default as HoppSmartWindows } from "./Windows.vue"
diff --git a/packages/hoppscotch-ui/src/index.ts b/packages/hoppscotch-ui/src/index.ts
index c079349e4..137efa68a 100644
--- a/packages/hoppscotch-ui/src/index.ts
+++ b/packages/hoppscotch-ui/src/index.ts
@@ -1,33 +1,2 @@
-import { Plugin } from "vue"
-
-import "./assets/scss/styles.scss"
-import "virtual:windi.css"
-
-/**
-@constant HOPP_UI_OPTIONS
-@type {string}
-A constant representing the key for storing HoppUI plugin options in the global context.
-*/
-
-export const HOPP_UI_OPTIONS = "HOPP_UI_OPTIONS"
-
-/**
-@typedef {Object} HoppUIPluginOptions
-@property {Function} [t] - A function for handling translations for the plugin.
-@property {Function} [onModalOpen] - A callback function that is called when a modal is opened.
-@property {Function} [onModalClose] - A callback function that is called when a modal is closed.
-*/
-
-export type HoppUIPluginOptions = {
-  t?: (key: string) => string
-  onModalOpen?: () => void
-  onModalClose?: () => void
-}
-
-const plugin: Plugin = {
-  install(app, options: HoppUIPluginOptions = {}) {
-    app.provide(HOPP_UI_OPTIONS, options)
-  },
-}
-
-export default plugin
+export * from "./components"
+export * from "./plugin"
diff --git a/packages/hoppscotch-ui/src/plugin.ts b/packages/hoppscotch-ui/src/plugin.ts
new file mode 100644
index 000000000..120f21bd4
--- /dev/null
+++ b/packages/hoppscotch-ui/src/plugin.ts
@@ -0,0 +1,30 @@
+import type { Plugin, App } from "vue"
+
+import "./assets/scss/styles.scss"
+import "virtual:windi.css"
+
+/**
+@constant HOPP_UI_OPTIONS
+A constant representing the key for storing HoppUI plugin options in the global context.
+*/
+
+export const HOPP_UI_OPTIONS = "HOPP_UI_OPTIONS"
+
+/**
+@typedef {Object} HoppUIPluginOptions
+@property [t] - A function for handling translations for the plugin.
+@property [onModalOpen] - A callback function that is called when a modal is opened.
+@property [onModalClose] - A callback function that is called when a modal is closed.
+*/
+
+export type HoppUIPluginOptions = {
+  t?: (key: string) => string
+  onModalOpen?: () => void
+  onModalClose?: () => void
+}
+
+export const plugin: Plugin = {
+  install(app: App, options: HoppUIPluginOptions = {}) {
+    app.provide(HOPP_UI_OPTIONS, options)
+  },
+}
diff --git a/packages/hoppscotch-ui/src/stories/Anchor.story.vue b/packages/hoppscotch-ui/src/stories/Anchor.story.vue
index cbbc61246..3291b403a 100644
--- a/packages/hoppscotch-ui/src/stories/Anchor.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Anchor.story.vue
@@ -2,19 +2,14 @@
   <Story title="Anchor">
     <div class="text-secondaryLight text-tiny">
       By signing in, you are agreeing to our
-      <SmartAnchor
-        class="text-red-800 link"
-        to="https://docs.hoppscotch.io/terms"
-        blank
-        label="Terms of Service"
-      />
+      <HoppSmartAnchor class="text-red-800 link" to="https://docs.hoppscotch.io/terms" blank label="Terms of Service" />
       and
-      <SmartAnchor
-        class="text-red-600 link"
-        to="https://docs.hoppscotch.io/privacy"
-        blank
-        label="Privacy Policy"
-      />
+      <HoppSmartAnchor class="text-red-600 link" to="https://docs.hoppscotch.io/privacy" blank label="Privacy Policy" />
     </div>
   </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppSmartAnchor } from "../components/smart"
+</script>
+
diff --git a/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue b/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue
index 61be821fa..e4ee06227 100644
--- a/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue
+++ b/packages/hoppscotch-ui/src/stories/AutoComplete.story.vue
@@ -1,28 +1,21 @@
 <template>
   <Story title="Auto Complete">
     <div class="h-[50vh]">
-      <SmartAutoComplete
-        placeholder="Select a header"
-        :source="commonHeaders"
-        :spellcheck="false"
-        :value="header[0].key"
-        autofocus
-        styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-                truncate
-              "
-        class="flex-1 !flex"
-        @input="updateHeader()"
-      />
+      <HoppSmartAutoComplete placeholder="Select a header" :source="commonHeaders" :spellcheck="false"
+        :value="header[0].key" autofocus styles="
+                      bg-transparent
+                      flex
+                      flex-1
+                      py-1
+                      px-4
+                      truncate
+                    " class="flex-1 !flex" @input="updateHeader()" />
     </div>
   </Story>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartAutoComplete } from "../components/smart"
 import { ref } from "vue"
 
 type GQLHeader = {
diff --git a/packages/hoppscotch-ui/src/stories/Button.story.vue b/packages/hoppscotch-ui/src/stories/Button.story.vue
index e233967c8..e1dbead39 100644
--- a/packages/hoppscotch-ui/src/stories/Button.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Button.story.vue
@@ -1,10 +1,14 @@
 <template>
   <Story title="Button">
     <Variant title="Primary">
-      <ButtonPrimary label="Button" />
+      <HoppButtonPrimary label="Button" />
     </Variant>
     <Variant title="Secondary">
-      <ButtonSecondary label="Button" />
+      <HoppButtonSecondary label="Button" />
     </Variant>
   </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
+</script>
diff --git a/packages/hoppscotch-ui/src/stories/Checkbox.story.vue b/packages/hoppscotch-ui/src/stories/Checkbox.story.vue
index bfc1c37fa..77c7a898d 100644
--- a/packages/hoppscotch-ui/src/stories/Checkbox.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Checkbox.story.vue
@@ -1,12 +1,14 @@
 <template>
   <Story title="Checkbox">
     <Variant title="Single">
-      <SmartCheckbox :on="on" />
+      <HoppSmartCheckbox :on="on" />
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartCheckbox } from "../components/smart"
+
 import { ref } from "vue"
 
 const on = ref(true)
diff --git a/packages/hoppscotch-ui/src/stories/ConfirmModal.story.vue b/packages/hoppscotch-ui/src/stories/ConfirmModal.story.vue
index 186a9f6fc..8ac307b3a 100644
--- a/packages/hoppscotch-ui/src/stories/ConfirmModal.story.vue
+++ b/packages/hoppscotch-ui/src/stories/ConfirmModal.story.vue
@@ -1,16 +1,13 @@
 <template>
   <Story title="Confirm Modal">
-    <SmartConfirmModal
-      :show="show"
-      :title="'Confirm Modal'"
-      @hide-modal="show = false"
-      @resolve="resolveConfirmModal"
-    />
+    <HoppSmartConfirmModal :show="show" :title="'Confirm Modal'" @hide-modal="show = false"
+      @resolve="resolveConfirmModal" />
   </Story>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue"
+import { HoppSmartConfirmModal } from "../components/smart"
 
 const show = ref(true)
 
diff --git a/packages/hoppscotch-ui/src/stories/Expand.story.vue b/packages/hoppscotch-ui/src/stories/Expand.story.vue
new file mode 100644
index 000000000..5f5701a93
--- /dev/null
+++ b/packages/hoppscotch-ui/src/stories/Expand.story.vue
@@ -0,0 +1,20 @@
+<template>
+  <Story title="Expand">
+    <HoppSmartExpand>
+      <template #body>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quas culpa ea nesciunt, magni natus ex numquam perspiciatis,
+        reprehenderit reiciendis necessitatibus nostrum laudantium illum tempora ducimus! Dignissimos officiis sed nisi.
+      </template>
+    </HoppSmartExpand>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppSmartExpand } from "../components/smart"
+</script>
diff --git a/packages/hoppscotch-ui/src/stories/Item.story.vue b/packages/hoppscotch-ui/src/stories/Item.story.vue
index 875f460ef..1af65a19c 100644
--- a/packages/hoppscotch-ui/src/stories/Item.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Item.story.vue
@@ -1,7 +1,11 @@
 <template>
   <Story title="Item">
     <Variant title="Single">
-      <SmartItem :label="'Item'" :active-info-icon="false" />
+      <HoppSmartItem :label="'Item'" :active-info-icon="false" />
     </Variant>
   </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppSmartItem } from "../components/smart"
+</script>
diff --git a/packages/hoppscotch-ui/src/stories/Link.story.vue b/packages/hoppscotch-ui/src/stories/Link.story.vue
index 2c6af58db..e83d6feec 100644
--- a/packages/hoppscotch-ui/src/stories/Link.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Link.story.vue
@@ -1,17 +1,19 @@
 <template>
   <Story title="Link">
     <Variant title="Text Link">
-      <SmartLink :to="link" :blank="true"> Click here </SmartLink>
+      <HoppSmartLink :to="link" :blank="true"> Click here </HoppSmartLink>
     </Variant>
     <Variant title="Button Link">
-      <SmartLink :to="link" :blank="true">
-        <ButtonPrimary label="Click here" />
-      </SmartLink>
+      <HoppSmartLink :to="link" :blank="true">
+        <HoppButtonPrimary label="Click here" />
+      </HoppSmartLink>
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartLink } from "../components/smart"
+import { HoppButtonPrimary } from "../components/button"
 import { ref } from "vue"
 
 const link = ref("/")
diff --git a/packages/hoppscotch-ui/src/stories/Modal.story.vue b/packages/hoppscotch-ui/src/stories/Modal.story.vue
index ebfb081c5..34e50fcb0 100644
--- a/packages/hoppscotch-ui/src/stories/Modal.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Modal.story.vue
@@ -1,15 +1,11 @@
 <template>
   <Story title="Modal">
-    <SmartModal
-      :show="show"
-      :title="'Modal Title'"
-      @hide-modal="show = false"
-      @resolve="resolveConfirmModal"
-    />
+    <HoppSmartModal :show="show" :title="'Modal Title'" @hide-modal="show = false" @resolve="resolveConfirmModal" />
   </Story>
 </template>
 
 <script lang="ts" setup>
+import { HoppSmartModal } from "../components/smart"
 import { ref } from "vue"
 
 const show = ref(true)
diff --git a/packages/hoppscotch-ui/src/stories/ProgressRing.story.vue b/packages/hoppscotch-ui/src/stories/ProgressRing.story.vue
index 585699ff0..3cb4b3a04 100644
--- a/packages/hoppscotch-ui/src/stories/ProgressRing.story.vue
+++ b/packages/hoppscotch-ui/src/stories/ProgressRing.story.vue
@@ -1,15 +1,12 @@
 <template>
   <Story title="Progress Ring">
-    <SmartProgressRing
-      class="mr-2 text-red-500"
-      :radius="8"
-      :stroke="1.5"
-      :progress="(failedTests / totalTests) * 100"
-    />
+    <HoppSmartProgressRing class="mr-2 text-red-500" :radius="8" :stroke="1.5"
+      :progress="(failedTests / totalTests) * 100" />
   </Story>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartProgressRing } from "../components/smart"
 const totalTests = 10
 const failedTests = 2
 </script>
diff --git a/packages/hoppscotch-ui/src/stories/Radio.story.vue b/packages/hoppscotch-ui/src/stories/Radio.story.vue
index 778065843..1d9af6978 100644
--- a/packages/hoppscotch-ui/src/stories/Radio.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Radio.story.vue
@@ -1,16 +1,17 @@
 <template>
   <Story title="Radio">
     <Variant title="Single">
-      <SmartRadio />
+      <HoppSmartRadio />
     </Variant>
     <Variant title="Group">
-      <SmartRadioGroup :radios="radios" :model-value="selected" />
+      <HoppSmartRadioGroup :radios="radios" :model-value="selected" />
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue"
+import { HoppSmartRadio, HoppSmartRadioGroup } from "../components/smart"
 
 const selected = ref("option1")
 const radios = [
diff --git a/packages/hoppscotch-ui/src/stories/SlideOver.story.vue b/packages/hoppscotch-ui/src/stories/SlideOver.story.vue
index aef073dcb..dd15ae09d 100644
--- a/packages/hoppscotch-ui/src/stories/SlideOver.story.vue
+++ b/packages/hoppscotch-ui/src/stories/SlideOver.story.vue
@@ -1,14 +1,15 @@
 <template>
   <Story title="Slider Over">
-    <SmartSlideOver :show="show" :title="'Title'" @close="show = false">
+    <HoppSmartSlideOver :show="show" :title="'Title'" @close="show = false">
       <template #content>
         <h1>Content</h1>
       </template>
-    </SmartSlideOver>
+    </HoppSmartSlideOver>
   </Story>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
+import { HoppSmartSlideOver } from "../components/smart"
 import { ref } from "vue"
 
 const show = ref(true)
diff --git a/packages/hoppscotch-ui/src/stories/Spinner.story.vue b/packages/hoppscotch-ui/src/stories/Spinner.story.vue
index 0129f530f..3ffe9125c 100644
--- a/packages/hoppscotch-ui/src/stories/Spinner.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Spinner.story.vue
@@ -1,5 +1,9 @@
 <template>
   <Story title="Spinner">
-    <SmartSpinner />
+    <HoppSmartSpinner />
   </Story>
 </template>
+
+<script setup lang="ts">
+import { HoppSmartSpinner } from "../components/smart"
+</script>
diff --git a/packages/hoppscotch-ui/src/stories/Tab.story.vue b/packages/hoppscotch-ui/src/stories/Tab.story.vue
index 28415baec..dd0484073 100644
--- a/packages/hoppscotch-ui/src/stories/Tab.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Tab.story.vue
@@ -1,19 +1,20 @@
 <template>
   <Story title="Tab">
     <Variant title="Single">
-      <SmartTabs id="my-tab" v-model="selectedTab" render-inactive-tabs>
-        <SmartTab id="tab1" label="Tab 1">
+      <HoppSmartTabs id="my-tab" v-model="selectedTab" render-inactive-tabs>
+        <HoppSmartTab id="tab1" label="Tab 1">
           <h1>Tab 1 content</h1>
-        </SmartTab>
-        <SmartTab id="tab2" label="Tab 2">
+        </HoppSmartTab>
+        <HoppSmartTab id="tab2" label="Tab 2">
           <h1>Tab 2 content</h1>
-        </SmartTab>
-      </SmartTabs>
+        </HoppSmartTab>
+      </HoppSmartTabs>
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartTabs, HoppSmartTab } from "../components/smart"
 import { ref } from "vue"
 
 const selectedTab = ref("tab1")
diff --git a/packages/hoppscotch-ui/src/stories/Toggle.story.vue b/packages/hoppscotch-ui/src/stories/Toggle.story.vue
index e1decb8bf..9dd025f53 100644
--- a/packages/hoppscotch-ui/src/stories/Toggle.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Toggle.story.vue
@@ -1,10 +1,11 @@
 <template>
   <Story title="Toggle">
-    <SmartToggle :on="on" @change="change"> Turn on </SmartToggle>
+    <HoppSmartToggle :on="on" @change="change"> Turn on </HoppSmartToggle>
   </Story>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartToggle } from "../components/smart"
 import { ref } from "vue"
 
 const on = ref(true)
diff --git a/packages/hoppscotch-ui/src/stories/Window.story.vue b/packages/hoppscotch-ui/src/stories/Window.story.vue
index 69744ce9e..aa742b7ff 100644
--- a/packages/hoppscotch-ui/src/stories/Window.story.vue
+++ b/packages/hoppscotch-ui/src/stories/Window.story.vue
@@ -1,27 +1,18 @@
 <template>
   <Story title="Window">
     <Variant title="Single">
-      <SmartWindows
-        :id="'my-window'"
-        v-model="selectedWindow"
-        @add-tab="openNewTab"
-        @remove-tab="removeTab"
-        @sort="sortTabs"
-      >
-        <SmartWindow
-          v-for="window in tabs"
-          :id="window.id"
-          :key="'tab_' + window.id"
-          :label="window.name"
-          :is-removable="window.removable"
-        >
-        </SmartWindow>
-      </SmartWindows>
+      <HoppSmartWindows :id="'my-window'" v-model="selectedWindow" @add-tab="openNewTab" @remove-tab="removeTab"
+        @sort="sortTabs">
+        <HoppSmartWindow v-for="window in tabs" :id="window.id" :key="'tab_' + window.id" :label="window.name"
+          :is-removable="window.removable">
+        </HoppSmartWindow>
+      </HoppSmartWindows>
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
+import { HoppSmartWindows, HoppSmartWindow } from "../components/smart"
 import { ref } from "vue"
 
 const selectedWindow = ref("window1")
diff --git a/packages/hoppscotch-ui/tsconfig.json b/packages/hoppscotch-ui/tsconfig.json
index c37c3ba3a..248e3e74c 100644
--- a/packages/hoppscotch-ui/tsconfig.json
+++ b/packages/hoppscotch-ui/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
+    "allowJs": true,
     "useDefineForClassFields": true,
     "module": "ESNext",
     "moduleResolution": "Node",
@@ -10,17 +11,34 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
     "skipLibCheck": true,
     "noUnusedLocals": true,
     "paths": {
-      "~/*": ["./src/*"],
-      "@composables/*": ["./src/composables/*"],
-      "@components/*": ["./src/components/*"],
-      "@helpers/*": ["./src/helpers/*"],
-      "@modules/*": ["./src/modules/*"],
-      "@workers/*": ["./src/workers/*"],
-      "@functional/*": ["./src/helpers/functional/*"]
+      "~/*": [
+        "./src/*"
+      ],
+      "@composables/*": [
+        "./src/composables/*"
+      ],
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@helpers/*": [
+        "./src/helpers/*"
+      ],
+      "@modules/*": [
+        "./src/modules/*"
+      ],
+      "@workers/*": [
+        "./src/workers/*"
+      ],
+      "@functional/*": [
+        "./src/helpers/functional/*"
+      ]
     },
     "types": [
       "vite/client",
@@ -30,5 +48,10 @@
       "vite-plugin-pwa/client"
     ]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
 }
diff --git a/packages/hoppscotch-ui/vite.config.ts b/packages/hoppscotch-ui/vite.config.ts
index e9492e16f..cd5a15099 100644
--- a/packages/hoppscotch-ui/vite.config.ts
+++ b/packages/hoppscotch-ui/vite.config.ts
@@ -1,60 +1,40 @@
 import vue from "@vitejs/plugin-vue"
+import dts from "vite-plugin-dts"
 import path from "path"
-import { FileSystemIconLoader } from "unplugin-icons/loaders"
-import IconResolver from "unplugin-icons/resolver"
 import Icons from "unplugin-icons/vite"
-import Components from "unplugin-vue-components/vite"
 import { defineConfig } from "vite"
 import WindiCSS from "vite-plugin-windicss"
 
-module.exports = defineConfig({
+export default defineConfig({
   plugins: [
     vue(),
+    dts({
+      insertTypesEntry: true,
+      skipDiagnostics: true,
+      outputDir: ['dist']
+    }),
     WindiCSS({
       root: path.resolve(__dirname),
     }),
-    Components({
-      dts: "./src/components.d.ts",
-      dirs: ["./src/components"],
-      directoryAsNamespace: true,
-      resolvers: [
-        IconResolver({
-          prefix: "icon",
-          customCollections: ["hopp", "auth", "brands"],
-        }),
-      ],
-    }),
     Icons({
-      compiler: "vue3",
-      customCollections: {
-        hopp: FileSystemIconLoader("../hoppscotch-common/assets/icons"),
-        auth: FileSystemIconLoader("../hoppscotch-common/assets/icons/auth"),
-        brands: FileSystemIconLoader(
-          "../hoppscotch-common/assets/icons/brands"
-        ),
-      },
+      compiler: "vue3"
     }),
   ], // to process SFC
   build: {
+    sourcemap: true,
+    minify: false,
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "hopp-ui",
-      formats: ["es"], // adding 'umd' requires globals set to every external module
-      fileName: (format) => `hopp-ui.${format}.js`,
+      formats: ["es"],
+      fileName: (format, entry) => `${entry}.${format}.js`,
     },
     rollupOptions: {
-      // external modules won't be bundled into HoppUI library
-      external: ["vue"], // not every external has a global
+      external: ["vue", "vue-router"],
       output: {
-        // disable warning on src/index.ts using both default and named export
         exports: "named",
-        // Provide global variables to use in the UMD build
-        // for externalized deps (not useful if 'umd' is not in lib.formats)
-        globals: {
-          vue: "Vue",
-        },
       },
     },
-    emptyOutDir: false, // to retain the types folder generated by tsc
+    emptyOutDir: true
   },
 })
diff --git a/packages/hoppscotch-web/package.json b/packages/hoppscotch-web/package.json
index f80a42e5e..06607c0f8 100644
--- a/packages/hoppscotch-web/package.json
+++ b/packages/hoppscotch-web/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@hoppscotch/common": "workspace:^",
+    "@hoppscotch/ui": "workspace:^",
     "buffer": "^6.0.3",
     "firebase": "^9.8.4",
     "process": "^0.11.10",
diff --git a/packages/hoppscotch-web/vite.config.ts b/packages/hoppscotch-web/vite.config.ts
index e2ebbff90..3f9c63fbd 100644
--- a/packages/hoppscotch-web/vite.config.ts
+++ b/packages/hoppscotch-web/vite.config.ts
@@ -107,16 +107,18 @@ export default defineConfig({
     }),
     Components({
       dts: "../hoppscotch-common/src/components.d.ts",
-      dirs: [
-        "../hoppscotch-common/src/components",
-        "../hoppscotch-ui/src/components",
-      ],
+      dirs: ["../hoppscotch-common/src/components"],
       directoryAsNamespace: true,
       resolvers: [
         IconResolver({
           prefix: "icon",
           customCollections: ["hopp", "auth", "brands"],
         }),
+        (compName: string) => {
+          if (compName.startsWith("Hopp"))
+            return { name: compName, from: "@hoppscotch/ui" }
+          else return undefined
+        },
       ],
       types: [
         {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f5c64179..2cdd9fecc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -216,7 +216,7 @@ importers:
       vue-router: ^4.0.16
       vue-tippy: 6.0.0-alpha.58
       vue-tsc: ^0.38.2
-      vuedraggable: ^4.1.0
+      vuedraggable-es: ^4.1.1
       windicss: ^3.5.6
       wonka: ^4.0.15
       workbox-window: ^6.5.4
@@ -294,7 +294,7 @@ importers:
       vue-pdf-embed: 1.1.4_vue@3.2.37
       vue-router: 4.1.0_vue@3.2.37
       vue-tippy: 6.0.0-alpha.58_vue@3.2.37
-      vuedraggable: 4.1.0_vue@3.2.37
+      vuedraggable-es: 4.1.1_vue@3.2.37
       wonka: 4.0.15
       workbox-window: 6.5.4
       yargs-parser: 21.1.1
@@ -457,12 +457,13 @@ importers:
       timers: ^0.1.1
       tippy.js: ^6.3.7
       typescript: ^4.5.4
-      unplugin-icons: ^0.14.9
+      unplugin-icons: ^0.15.3
       unplugin-vue-components: ^0.21.0
       url: ^0.11.0
       util: ^0.12.4
-      vite: ^3.2.3
+      vite: ^4.1.3
       vite-plugin-checker: ^0.5.1
+      vite-plugin-dts: 2.0.0-beta.3
       vite-plugin-eslint: ^1.8.1
       vite-plugin-fonts: ^0.6.0
       vite-plugin-html-config: ^1.0.10
@@ -472,20 +473,19 @@ importers:
       vite-plugin-pwa: ^0.13.1
       vite-plugin-vue-layouts: ^0.7.0
       vite-plugin-windicss: ^1.8.8
-      vue: ^3.2.25
       vue-github-button: ^3.0.3
       vue-loader: ^16.8.3
       vue-router: ^4.0.16
       vue-tippy: 6.0.0-alpha.58
       vue-tsc: ^0.38.2
-      vuedraggable: ^4.1.0
+      vuedraggable-es: ^4.1.1
       windicss: ^3.5.6
     dependencies:
-      '@hoppscotch/vue-toasted': 0.1.0_vue@3.2.45
+      '@hoppscotch/vue-toasted': 0.1.0
       '@lezer/highlight': 1.0.0
-      '@vitejs/plugin-legacy': 2.3.0_vite@3.2.4
-      '@vueuse/core': 8.7.5_vue@3.2.45
-      '@vueuse/head': 0.7.9_vue@3.2.45
+      '@vitejs/plugin-legacy': 2.3.0_vite@4.1.3
+      '@vueuse/core': 8.7.5
+      '@vueuse/head': 0.7.9
       acorn-walk: 8.2.0
       esprima: 4.0.1
       events: 3.3.0
@@ -500,24 +500,23 @@ importers:
       tippy.js: 6.3.7
       url: 0.11.0
       util: 0.12.4
-      vite-plugin-eslint: 1.8.1_eslint@8.28.0+vite@3.2.4
-      vue: 3.2.45
+      vite-plugin-eslint: 1.8.1_eslint@8.28.0+vite@4.1.3
       vue-github-button: 3.0.3
-      vue-router: 4.1.0_vue@3.2.45
-      vue-tippy: 6.0.0-alpha.58_vue@3.2.45
-      vuedraggable: 4.1.0_vue@3.2.45
+      vue-router: 4.1.0
+      vue-tippy: 6.0.0-alpha.58
+      vuedraggable-es: 4.1.1
     devDependencies:
       '@esbuild-plugins/node-globals-polyfill': 0.1.1
       '@esbuild-plugins/node-modules-polyfill': 0.1.4
-      '@histoire/plugin-vue': 0.12.4_3ztk7oukhtctodvtf5427xwgjy
+      '@histoire/plugin-vue': 0.12.4_histoire@0.12.4+vite@4.1.3
       '@iconify-json/lucide': 1.1.40
-      '@intlify/vite-plugin-vue-i18n': 6.0.1_vite@3.2.4
+      '@intlify/vite-plugin-vue-i18n': 6.0.1_vite@4.1.3
       '@rushstack/eslint-patch': 1.1.4
       '@types/lodash-es': 4.17.6
       '@types/splitpanes': 2.2.1
       '@typescript-eslint/eslint-plugin': 5.30.6_tzuem642amzz36tmpo2cu7h24a
       '@typescript-eslint/parser': 5.30.6_tqvwk7sh3taph5wf7sr5z34mke
-      '@vitejs/plugin-vue': 3.2.0_vite@3.2.4+vue@3.2.45
+      '@vitejs/plugin-vue': 3.2.0_vite@4.1.3
       '@vue/compiler-sfc': 3.2.45
       '@vue/eslint-config-typescript': 11.0.1_mzvf2l7eswg27fegtooheusjzu
       '@vue/runtime-core': 3.2.45
@@ -525,30 +524,32 @@ importers:
       eslint: 8.28.0
       eslint-plugin-prettier: 4.2.1_eslint@8.28.0
       eslint-plugin-vue: 9.5.1_eslint@8.28.0
-      histoire: 0.12.4_sass@1.53.0+vite@3.2.4
+      histoire: 0.12.4_sass@1.53.0+vite@4.1.3
       npm-run-all: 4.1.5
       rollup-plugin-polyfill-node: 0.10.1
       sass: 1.53.0
       typescript: 4.7.4
-      unplugin-icons: 0.14.9_ucej6auec2vidlux2n3htzvxf4
-      unplugin-vue-components: 0.21.0_vite@3.2.4+vue@3.2.45
-      vite: 3.2.4_sass@1.53.0
-      vite-plugin-checker: 0.5.1_jrjwweurx77rgiqotz2vtz63ma
-      vite-plugin-fonts: 0.6.0_vite@3.2.4
-      vite-plugin-html-config: 1.0.10_vite@3.2.4
-      vite-plugin-inspect: 0.7.4_vite@3.2.4
-      vite-plugin-pages: 0.26.0_ucej6auec2vidlux2n3htzvxf4
+      unplugin-icons: 0.15.3_@vue+compiler-sfc@3.2.45
+      unplugin-vue-components: 0.21.0_vite@4.1.3
+      vite: 4.1.3_sass@1.53.0
+      vite-plugin-checker: 0.5.1_lqkfaoh65quuz5r6x77gky7rqa
+      vite-plugin-dts: 2.0.0-beta.3_vite@4.1.3
+      vite-plugin-fonts: 0.6.0_vite@4.1.3
+      vite-plugin-html-config: 1.0.10_vite@4.1.3
+      vite-plugin-inspect: 0.7.4_vite@4.1.3
+      vite-plugin-pages: 0.26.0_g7e6creq4bwjmknml2vtioo7yu
       vite-plugin-pages-sitemap: 1.4.0
-      vite-plugin-pwa: 0.13.1_vite@3.2.4
-      vite-plugin-vue-layouts: 0.7.0_x3isqn4gd6tlkzc66bnhwnhwbi
-      vite-plugin-windicss: 1.8.8_vite@3.2.4
-      vue-loader: 16.8.3_tfvhctuaqmmqnirfl65c47tqwu
+      vite-plugin-pwa: 0.13.1_vite@4.1.3
+      vite-plugin-vue-layouts: 0.7.0_xpcchvfxy4izd7ocado4zodsv4
+      vite-plugin-windicss: 1.8.8_vite@4.1.3
+      vue-loader: 16.8.3_@vue+compiler-sfc@3.2.45
       vue-tsc: 0.38.2_typescript@4.7.4
       windicss: 3.5.6
 
   packages/hoppscotch-web:
     specifiers:
       '@hoppscotch/common': workspace:^
+      '@hoppscotch/ui': workspace:^
       '@intlify/vite-plugin-vue-i18n': ^6.0.1
       '@rushstack/eslint-patch': ^1.1.4
       '@typescript-eslint/eslint-plugin': ^5.19.0
@@ -585,6 +586,7 @@ importers:
       workbox-window: ^6.5.4
     dependencies:
       '@hoppscotch/common': link:../hoppscotch-common
+      '@hoppscotch/ui': link:../hoppscotch-ui
       buffer: 6.0.3
       firebase: 9.8.4
       process: 0.11.10
@@ -638,10 +640,21 @@ packages:
       find-up: 5.0.0
     dev: true
 
+  /@antfu/install-pkg/0.1.1:
+    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: true
+
   /@antfu/utils/0.5.2:
     resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
     dev: true
 
+  /@antfu/utils/0.7.2:
+    resolution: {integrity: sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==}
+    dev: true
+
   /@apideck/better-ajv-errors/0.3.6_ajv@8.11.0:
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
     engines: {node: '>=10'}
@@ -1012,6 +1025,14 @@ packages:
     dependencies:
       '@babel/types': 7.18.7
 
+  /@babel/parser/7.21.1:
+    resolution: {integrity: sha512-JzhBFpkuhBNYUY7qs+wTzNmyCWUHEaAFpQQD2YfU1rPL38/L43Wvid0fFkiOCnHvsGncRZgEPyGnltABLcVDTg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.18.7
+    dev: true
+
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.18.6:
     resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
     engines: {node: '>=6.9.0'}
@@ -2299,6 +2320,87 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm/0.16.17:
+    resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/android-arm64/0.16.17:
+    resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/android-x64/0.16.17:
+    resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/darwin-arm64/0.16.17:
+    resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/darwin-x64/0.16.17:
+    resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/freebsd-arm64/0.16.17:
+    resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/freebsd-x64/0.16.17:
+    resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-arm/0.16.17:
+    resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-arm64/0.16.17:
+    resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-ia32/0.16.17:
+    resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-loong64/0.15.15:
@@ -2307,6 +2409,7 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /@esbuild/linux-loong64/0.15.7:
@@ -2317,6 +2420,102 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@esbuild/linux-loong64/0.16.17:
+    resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-mips64el/0.16.17:
+    resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-ppc64/0.16.17:
+    resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-riscv64/0.16.17:
+    resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-s390x/0.16.17:
+    resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-x64/0.16.17:
+    resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/netbsd-x64/0.16.17:
+    resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/openbsd-x64/0.16.17:
+    resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/sunos-x64/0.16.17:
+    resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-arm64/0.16.17:
+    resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-ia32/0.16.17:
+    resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-x64/0.16.17:
+    resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
   /@eslint/eslintrc/1.3.0:
     resolution: {integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3252,12 +3451,12 @@ packages:
       extract-files: 11.0.0
       graphql: 15.8.0
       graphql-ws: 5.9.1_graphql@15.8.0
-      isomorphic-ws: 5.0.0_ws@8.8.0
+      isomorphic-ws: 5.0.0_ws@8.12.0
       meros: 1.2.0
       sync-fetch: 0.4.1
       tslib: 2.4.0
       value-or-promise: 1.0.11
-      ws: 8.8.0
+      ws: 8.12.0
     transitivePeerDependencies:
       - '@types/node'
       - bufferutil
@@ -3311,11 +3510,11 @@ packages:
       yargs: 16.2.0
     dev: false
 
-  /@histoire/app/0.12.4_vite@3.2.4:
+  /@histoire/app/0.12.4_vite@4.1.3:
     resolution: {integrity: sha512-noemJQ3q5ofHbBJGJ9FgLIdoV4Feyn3zHMhOQjHZRPETdoAak2adALO4UWKVnFu75+R43SLtoV7HnK0TAPx5kw==}
     dependencies:
       '@histoire/controls': 0.12.4
-      '@histoire/shared': 0.12.4_vite@3.2.4
+      '@histoire/shared': 0.12.4_vite@4.1.3
       '@histoire/vendors': 0.12.4
       '@types/flexsearch': 0.7.3
       flexsearch: 0.7.21
@@ -3337,22 +3536,21 @@ packages:
       '@histoire/vendors': 0.12.4
     dev: true
 
-  /@histoire/plugin-vue/0.12.4_3ztk7oukhtctodvtf5427xwgjy:
+  /@histoire/plugin-vue/0.12.4_histoire@0.12.4+vite@4.1.3:
     resolution: {integrity: sha512-2xgBDwEHmiY053hPWy4rKnnMjntVcg8qfIYJGyITwFWSfNTq+6ez/HjWzUcHT6qwFMglUHq+rDlQb9gYZF+Edw==}
     peerDependencies:
       histoire: ^0.12.4
       vue: ^3.2.31
     dependencies:
       '@histoire/controls': 0.12.4
-      '@histoire/shared': 0.12.4_vite@3.2.4
+      '@histoire/shared': 0.12.4_vite@4.1.3
       '@histoire/vendors': 0.12.4
-      histoire: 0.12.4_sass@1.53.0+vite@3.2.4
-      vue: 3.2.45
+      histoire: 0.12.4_sass@1.53.0+vite@4.1.3
     transitivePeerDependencies:
       - vite
     dev: true
 
-  /@histoire/shared/0.12.4_vite@3.2.4:
+  /@histoire/shared/0.12.4_vite@4.1.3:
     resolution: {integrity: sha512-dVSrfsEu17KczjyHVW8yPvSlguhEV7hWjDSwsjlUrRdbe7hwztX4GbbcCIWvG5hy5gASpKpQq6FJa5uTs0HOsg==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0 || ^4.0.0
@@ -3362,13 +3560,19 @@ packages:
       chokidar: 3.5.3
       pathe: 0.2.0
       picocolors: 1.0.0
-      vite: 3.2.4_sass@1.53.0
+      vite: 4.1.3_sass@1.53.0
     dev: true
 
   /@histoire/vendors/0.12.4:
     resolution: {integrity: sha512-NIi0krz19iSjPHhIsGLrW4Q3tvrCLfvCet2kFA8crKPX6inaMZm8g/+pDQBqlh9DRCXVbxV5RWQKcumrIFbrmw==}
     dev: true
 
+  /@hoppscotch/vue-toasted/0.1.0:
+    resolution: {integrity: sha512-DIgmeTHxWwX5UeaHLEqDYNLJFGRosx/5N1fCHkaO8zt+sZv8GrHlkrIpjfKF2drmA3kKw5cY42Cw7WuCoabR3g==}
+    peerDependencies:
+      vue: ^3.2.37
+    dev: false
+
   /@hoppscotch/vue-toasted/0.1.0_vue@3.2.37:
     resolution: {integrity: sha512-DIgmeTHxWwX5UeaHLEqDYNLJFGRosx/5N1fCHkaO8zt+sZv8GrHlkrIpjfKF2drmA3kKw5cY42Cw7WuCoabR3g==}
     peerDependencies:
@@ -3377,14 +3581,6 @@ packages:
       vue: 3.2.37
     dev: false
 
-  /@hoppscotch/vue-toasted/0.1.0_vue@3.2.45:
-    resolution: {integrity: sha512-DIgmeTHxWwX5UeaHLEqDYNLJFGRosx/5N1fCHkaO8zt+sZv8GrHlkrIpjfKF2drmA3kKw5cY42Cw7WuCoabR3g==}
-    peerDependencies:
-      vue: ^3.2.37
-    dependencies:
-      vue: 3.2.45
-    dev: false
-
   /@humanwhocodes/config-array/0.10.7:
     resolution: {integrity: sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==}
     engines: {node: '>=10.10.0'}
@@ -3441,6 +3637,10 @@ packages:
     resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
     dev: true
 
+  /@iconify/types/2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
   /@iconify/utils/1.0.33:
     resolution: {integrity: sha512-vGeAqo7aGPxOQmGdVoXFUOuyN+0V7Lcrx2EvaiRjxUD1x6Om0Tvq2bdm7E24l2Pz++4S0mWMCVFXe/17EtKImQ==}
     dependencies:
@@ -3454,8 +3654,21 @@ packages:
       - supports-color
     dev: true
 
-  /@intlify/bundle-utils/3.4.0:
-    resolution: {integrity: sha512-2UQkqiSAOSPEHMGWlybqWm4G2K0X+FyYho5AwXz6QklSX1EY5EDmOSxZmwscn2qmKBnp6OYsme5kUrnN9xrWzQ==}
+  /@iconify/utils/2.1.4:
+    resolution: {integrity: sha512-7vzsYIvxv5Hng0MNEtSSnyMBD/+zqnORqmKiYsSgpMBGSz1r93URgBZHPYCZ1/gpoaVstYW4/SVLGCMJBNMCLQ==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.2
+      '@iconify/types': 2.0.0
+      debug: 4.3.4
+      kolorist: 1.7.0
+      local-pkg: 0.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@intlify/bundle-utils/4.0.0:
+    resolution: {integrity: sha512-klXrYT9VXyKEXsD6UY3pShg0O5MPC07n0TZ5RrSs5ry6T1eZVolIFGJi9c3qcDrh1qjJxgikRnPBmD7qGDqbjw==}
     engines: {node: '>= 12'}
     peerDependencies:
       petite-vue-i18n: '*'
@@ -3473,8 +3686,8 @@ packages:
       yaml-eslint-parser: 0.3.2
     dev: true
 
-  /@intlify/bundle-utils/3.4.0_vue-i18n@9.2.2:
-    resolution: {integrity: sha512-2UQkqiSAOSPEHMGWlybqWm4G2K0X+FyYho5AwXz6QklSX1EY5EDmOSxZmwscn2qmKBnp6OYsme5kUrnN9xrWzQ==}
+  /@intlify/bundle-utils/4.0.0_vue-i18n@9.2.2:
+    resolution: {integrity: sha512-klXrYT9VXyKEXsD6UY3pShg0O5MPC07n0TZ5RrSs5ry6T1eZVolIFGJi9c3qcDrh1qjJxgikRnPBmD7qGDqbjw==}
     engines: {node: '>= 12'}
     peerDependencies:
       petite-vue-i18n: '*'
@@ -3547,7 +3760,7 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 3.4.0_vue-i18n@9.2.2
+      '@intlify/bundle-utils': 4.0.0_vue-i18n@9.2.2
       '@intlify/shared': 9.3.0-beta.16
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
@@ -3574,13 +3787,39 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 3.4.0
+      '@intlify/bundle-utils': 4.0.0
       '@intlify/shared': 9.3.0-beta.16
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
       fast-glob: 3.2.11
       source-map: 0.6.1
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@intlify/vite-plugin-vue-i18n/6.0.1_vite@4.1.3:
+    resolution: {integrity: sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==}
+    engines: {node: '>= 14.6'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vite: ^2.9.0 || ^3.0.0
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vite:
+        optional: true
+      vue-i18n:
+        optional: true
+    dependencies:
+      '@intlify/bundle-utils': 4.0.0
+      '@intlify/shared': 9.3.0-beta.16
+      '@rollup/pluginutils': 4.2.1
+      debug: 4.3.4
+      fast-glob: 3.2.11
+      source-map: 0.6.1
+      vite: 4.1.3_sass@1.53.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3926,6 +4165,49 @@ packages:
     resolution: {integrity: sha512-EWUguj2kd7ldmrF9F+vI5hUOralPd+sdsUnYbRy33vZTuZkduC1shE9TtEMEjAQwyfyMb4ole5KtjF8MsnQOlA==}
     dev: true
 
+  /@microsoft/api-extractor-model/7.26.4:
+    resolution: {integrity: sha512-PDCgCzXDo+SLY5bsfl4bS7hxaeEtnXj7XtuzEE+BtALp7B5mK/NrS2kHWU69pohgsRmEALycQdaQPXoyT2i5MQ==}
+    dependencies:
+      '@microsoft/tsdoc': 0.14.2
+      '@microsoft/tsdoc-config': 0.16.2
+      '@rushstack/node-core-library': 3.55.2
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
+  /@microsoft/api-extractor/7.34.4:
+    resolution: {integrity: sha512-HOdcci2nT40ejhwPC3Xja9G+WSJmWhCUKKryRfQYsmE9cD+pxmBaKBKCbuS9jUcl6bLLb4Gz+h7xEN5r0QiXnQ==}
+    hasBin: true
+    dependencies:
+      '@microsoft/api-extractor-model': 7.26.4
+      '@microsoft/tsdoc': 0.14.2
+      '@microsoft/tsdoc-config': 0.16.2
+      '@rushstack/node-core-library': 3.55.2
+      '@rushstack/rig-package': 0.3.18
+      '@rushstack/ts-command-line': 4.13.2
+      colors: 1.2.5
+      lodash: 4.17.21
+      resolve: 1.22.1
+      semver: 7.3.7
+      source-map: 0.6.1
+      typescript: 4.8.4
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
+  /@microsoft/tsdoc-config/0.16.2:
+    resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
+    dependencies:
+      '@microsoft/tsdoc': 0.14.2
+      ajv: 6.12.6
+      jju: 1.4.0
+      resolve: 1.19.0
+    dev: true
+
+  /@microsoft/tsdoc/0.14.2:
+    resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
+    dev: true
+
   /@n1ru4l/graphql-live-query/0.9.0_graphql@15.8.0:
     resolution: {integrity: sha512-BTpWy1e+FxN82RnLz4x1+JcEewVdfmUhV1C6/XYD5AjS7PQp9QFF7K8bCD6gzPTr2l+prvqOyVueQhFJxB1vfg==}
     peerDependencies:
@@ -4098,10 +4380,57 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
+  /@rollup/pluginutils/5.0.2:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /@rushstack/eslint-patch/1.1.4:
     resolution: {integrity: sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==}
     dev: true
 
+  /@rushstack/node-core-library/3.55.2:
+    resolution: {integrity: sha512-SaLe/x/Q/uBVdNFK5V1xXvsVps0y7h1sN7aSJllQyFbugyOaxhNRF25bwEDnicARNEjJw0pk0lYnJQ9Kr6ev0A==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      colors: 1.2.5
+      fs-extra: 7.0.1
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.1
+      semver: 7.3.7
+      z-schema: 5.0.5
+    dev: true
+
+  /@rushstack/rig-package/0.3.18:
+    resolution: {integrity: sha512-SGEwNTwNq9bI3pkdd01yCaH+gAsHqs0uxfGvtw9b0LJXH52qooWXnrFTRRLG1aL9pf+M2CARdrA9HLHJys3jiQ==}
+    dependencies:
+      resolve: 1.22.1
+      strip-json-comments: 3.1.1
+    dev: true
+
+  /@rushstack/ts-command-line/4.13.2:
+    resolution: {integrity: sha512-bCU8qoL9HyWiciltfzg7GqdfODUeda/JpI0602kbN5YH22rzTxyqYvv7aRLENCM7XCQ1VRs7nMkEqgJUOU8Sag==}
+    dependencies:
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      colors: 1.2.5
+      string-argv: 0.3.1
+    dev: true
+
   /@sentry/browser/7.13.0:
     resolution: {integrity: sha512-WbgClHPYe8TKsdVVbuzd6alxwh3maFQNuljMkSTnYvPx2P+NT0wHljTs37D39FGfSmAwaqn7D/1ZHAtC+6mWxA==}
     engines: {node: '>=8'}
@@ -4344,6 +4673,15 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
+  /@ts-morph/common/0.18.1:
+    resolution: {integrity: sha512-RVE+zSRICWRsfrkAw5qCAK+4ZH9kwEFv5h0+/YeHTLieWP7F4wWq4JsKFuNWG+fYh/KF+8rAtgdj5zb2mm+DVA==}
+    dependencies:
+      fast-glob: 3.2.12
+      minimatch: 5.1.0
+      mkdirp: 1.0.4
+      path-browserify: 1.0.1
+    dev: true
+
   /@tsconfig/node10/1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
     dev: true
@@ -4360,6 +4698,10 @@ packages:
     resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
     dev: true
 
+  /@types/argparse/1.0.38:
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
+    dev: true
+
   /@types/axios/0.14.0:
     resolution: {integrity: sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==}
     deprecated: This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!
@@ -4432,6 +4774,10 @@ packages:
   /@types/estree/0.0.39:
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
 
+  /@types/estree/1.0.0:
+    resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
+    dev: true
+
   /@types/flexsearch/0.7.3:
     resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
     dev: true
@@ -4997,7 +5343,23 @@ packages:
       magic-string: 0.26.7
       regenerator-runtime: 0.13.10
       systemjs: 6.13.0
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
+    dev: true
+
+  /@vitejs/plugin-legacy/2.3.0_vite@4.1.3:
+    resolution: {integrity: sha512-Bh62i0gzQvvT8AeAAb78nOnqSYXypkRmQmOTImdPZ39meHR9e2une3AIFmVo4s1SDmcmJ6qj18Sa/lRc/14KaA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      terser: ^5.4.0
+      vite: ^3.0.0
+    dependencies:
+      '@babel/standalone': 7.20.0
+      core-js: 3.26.0
+      magic-string: 0.26.7
+      regenerator-runtime: 0.13.10
+      systemjs: 6.13.0
+      vite: 4.1.3_sass@1.53.0
+    dev: false
 
   /@vitejs/plugin-vue/3.1.0_vite@3.1.4+vue@3.2.37:
     resolution: {integrity: sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==}
@@ -5017,10 +5379,20 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
       vue: 3.2.45
     dev: true
 
+  /@vitejs/plugin-vue/3.2.0_vite@4.1.3:
+    resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.1.3_sass@1.53.0
+    dev: true
+
   /@volar/code-gen/0.38.2:
     resolution: {integrity: sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==}
     dependencies:
@@ -5139,7 +5511,7 @@ packages:
     resolution: {integrity: sha512-YQRE2uYhlvyFgHmKAqySCdLm7O37XZc+yG9dujwD3h8em+rD1qGOthxc0H3XcijOy50gj/pYHgBO6C3MjV+oug==}
     dependencies:
       '@babel/parser': 7.18.6
-      postcss: 8.4.19
+      postcss: 8.4.21
       source-map: 0.6.1
     dev: true
 
@@ -5154,7 +5526,7 @@ packages:
       '@vue/shared': 3.2.37
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      postcss: 8.4.19
+      postcss: 8.4.21
       source-map: 0.6.1
 
   /@vue/compiler-sfc/3.2.39:
@@ -5355,6 +5727,23 @@ packages:
   /@vue/shared/3.2.45:
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
 
+  /@vueuse/core/8.7.5:
+    resolution: {integrity: sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@types/web-bluetooth': 0.0.14
+      '@vueuse/metadata': 8.7.5
+      '@vueuse/shared': 8.7.5
+      vue-demi: 0.13.1
+    dev: false
+
   /@vueuse/core/8.7.5_vue@3.2.37:
     resolution: {integrity: sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==}
     peerDependencies:
@@ -5373,22 +5762,10 @@ packages:
       vue-demi: 0.13.1_vue@3.2.37
     dev: false
 
-  /@vueuse/core/8.7.5_vue@3.2.45:
-    resolution: {integrity: sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==}
+  /@vueuse/head/0.7.9:
+    resolution: {integrity: sha512-5wnRiH2XIUSLLXJDLDDTcpvAg5QXgTIVZl46AU7to/T91KHsdBLHSE4WhRO7kP0jbkAhlxnx64E29cQtwBrMjg==}
     peerDependencies:
-      '@vue/composition-api': ^1.1.0
-      vue: ^2.6.0 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      vue:
-        optional: true
-    dependencies:
-      '@types/web-bluetooth': 0.0.14
-      '@vueuse/metadata': 8.7.5
-      '@vueuse/shared': 8.7.5_vue@3.2.45
-      vue: 3.2.45
-      vue-demi: 0.13.1_vue@3.2.45
+      vue: '>=3'
     dev: false
 
   /@vueuse/head/0.7.9_vue@3.2.37:
@@ -5399,18 +5776,24 @@ packages:
       vue: 3.2.37
     dev: false
 
-  /@vueuse/head/0.7.9_vue@3.2.45:
-    resolution: {integrity: sha512-5wnRiH2XIUSLLXJDLDDTcpvAg5QXgTIVZl46AU7to/T91KHsdBLHSE4WhRO7kP0jbkAhlxnx64E29cQtwBrMjg==}
-    peerDependencies:
-      vue: '>=3'
-    dependencies:
-      vue: 3.2.45
-    dev: false
-
   /@vueuse/metadata/8.7.5:
     resolution: {integrity: sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==}
     dev: false
 
+  /@vueuse/shared/8.7.5:
+    resolution: {integrity: sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue-demi: 0.13.1
+    dev: false
+
   /@vueuse/shared/8.7.5_vue@3.2.37:
     resolution: {integrity: sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==}
     peerDependencies:
@@ -5426,21 +5809,6 @@ packages:
       vue-demi: 0.13.1_vue@3.2.37
     dev: false
 
-  /@vueuse/shared/8.7.5_vue@3.2.45:
-    resolution: {integrity: sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==}
-    peerDependencies:
-      '@vue/composition-api': ^1.1.0
-      vue: ^2.6.0 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      vue:
-        optional: true
-    dependencies:
-      vue: 3.2.45
-      vue-demi: 0.13.1_vue@3.2.45
-    dev: false
-
   /@wessberg/stringutil/1.0.19:
     resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==}
     engines: {node: '>=8.0.0'}
@@ -5498,7 +5866,7 @@ packages:
   /acorn-globals/7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.2
       acorn-walk: 8.2.0
     dev: true
 
@@ -5569,6 +5937,12 @@ packages:
     hasBin: true
     dev: true
 
+  /acorn/8.8.2:
+    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
   /after/0.8.2:
     resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
     dev: false
@@ -6298,6 +6672,10 @@ packages:
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
     dev: true
 
+  /code-block-writer/11.0.3:
+    resolution: {integrity: sha512-NiujjUFB4SwScJq2bwbYUtXbZhBSlY6vYzm++3Q6oC+U+injTqfPYFK8wS9COOmb2lueqp0ZRB4nK1VYeHgNyw==}
+    dev: true
+
   /collect-v8-coverage/1.0.1:
     resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
     dev: true
@@ -6322,6 +6700,11 @@ packages:
   /colorette/2.0.19:
     resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
 
+  /colors/1.2.5:
+    resolution: {integrity: sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==}
+    engines: {node: '>=0.1.90'}
+    dev: true
+
   /combined-stream/1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -6350,6 +6733,13 @@ packages:
     engines: {node: ^12.20.0 || >=14}
     dev: false
 
+  /commander/9.5.0:
+    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
+    engines: {node: ^12.20.0 || >=14}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /common-tags/1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -7086,6 +7476,7 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-android-64/0.15.7:
@@ -7110,6 +7501,7 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-android-arm64/0.15.7:
@@ -7134,6 +7526,7 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-darwin-64/0.15.7:
@@ -7158,6 +7551,7 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-darwin-arm64/0.15.7:
@@ -7182,6 +7576,7 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-freebsd-64/0.15.7:
@@ -7206,6 +7601,7 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-freebsd-arm64/0.15.7:
@@ -7230,6 +7626,7 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-32/0.15.7:
@@ -7254,6 +7651,7 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-64/0.15.7:
@@ -7278,6 +7676,7 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-arm/0.15.7:
@@ -7302,6 +7701,7 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-arm64/0.15.7:
@@ -7326,6 +7726,7 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-mips64le/0.15.7:
@@ -7350,6 +7751,7 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-ppc64le/0.15.7:
@@ -7374,6 +7776,7 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-riscv64/0.15.7:
@@ -7398,6 +7801,7 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-linux-s390x/0.15.7:
@@ -7422,6 +7826,7 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-netbsd-64/0.15.7:
@@ -7446,6 +7851,7 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-openbsd-64/0.15.7:
@@ -7470,6 +7876,7 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-sunos-64/0.15.7:
@@ -7494,6 +7901,7 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-windows-32/0.15.7:
@@ -7518,6 +7926,7 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-windows-64/0.15.7:
@@ -7542,6 +7951,7 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
+    dev: true
     optional: true
 
   /esbuild-windows-arm64/0.15.7:
@@ -7607,6 +8017,7 @@ packages:
       esbuild-windows-32: 0.15.15
       esbuild-windows-64: 0.15.15
       esbuild-windows-arm64: 0.15.15
+    dev: true
 
   /esbuild/0.15.7:
     resolution: {integrity: sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==}
@@ -7636,6 +8047,35 @@ packages:
       esbuild-windows-64: 0.15.7
       esbuild-windows-arm64: 0.15.7
 
+  /esbuild/0.16.17:
+    resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.16.17
+      '@esbuild/android-arm64': 0.16.17
+      '@esbuild/android-x64': 0.16.17
+      '@esbuild/darwin-arm64': 0.16.17
+      '@esbuild/darwin-x64': 0.16.17
+      '@esbuild/freebsd-arm64': 0.16.17
+      '@esbuild/freebsd-x64': 0.16.17
+      '@esbuild/linux-arm': 0.16.17
+      '@esbuild/linux-arm64': 0.16.17
+      '@esbuild/linux-ia32': 0.16.17
+      '@esbuild/linux-loong64': 0.16.17
+      '@esbuild/linux-mips64el': 0.16.17
+      '@esbuild/linux-ppc64': 0.16.17
+      '@esbuild/linux-riscv64': 0.16.17
+      '@esbuild/linux-s390x': 0.16.17
+      '@esbuild/linux-x64': 0.16.17
+      '@esbuild/netbsd-x64': 0.16.17
+      '@esbuild/openbsd-x64': 0.16.17
+      '@esbuild/sunos-x64': 0.16.17
+      '@esbuild/win32-arm64': 0.16.17
+      '@esbuild/win32-ia32': 0.16.17
+      '@esbuild/win32-x64': 0.16.17
+
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
@@ -8163,6 +8603,17 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
+  /fast-glob/3.2.12:
+    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
   /fast-json-stable-stringify/2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -8392,6 +8843,15 @@ packages:
       universalify: 2.0.0
     dev: true
 
+  /fs-extra/7.0.1:
+    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
+    engines: {node: '>=6 <7 || >=8'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+    dev: true
+
   /fs-extra/9.1.0:
     resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
     engines: {node: '>=10'}
@@ -8817,15 +9277,15 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
-  /histoire/0.12.4_sass@1.53.0+vite@3.2.4:
+  /histoire/0.12.4_sass@1.53.0+vite@4.1.3:
     resolution: {integrity: sha512-q20Zncdh+GI2jDXiry1JS1DrN5qprKpl452AnS/P06Vgowqf79aG85E0XmhNpX2r8HI2HmIntwZ5FLd6hxYobQ==}
     hasBin: true
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0 || ^4.0.0
     dependencies:
-      '@histoire/app': 0.12.4_vite@3.2.4
+      '@histoire/app': 0.12.4_vite@4.1.3
       '@histoire/controls': 0.12.4
-      '@histoire/shared': 0.12.4_vite@3.2.4
+      '@histoire/shared': 0.12.4_vite@4.1.3
       '@histoire/vendors': 0.12.4
       '@types/flexsearch': 0.7.3
       '@types/markdown-it': 12.2.3
@@ -8853,7 +9313,7 @@ packages:
       shiki-es: 0.1.2
       sirv: 2.0.2
       tinypool: 0.1.3
-      vite: 3.2.4_sass@1.53.0
+      vite: 4.1.3_sass@1.53.0
       vite-node: 0.26.0_sass@1.53.0
     transitivePeerDependencies:
       - '@types/node'
@@ -9046,6 +9506,11 @@ packages:
     engines: {node: '>=12.2'}
     dev: true
 
+  /import-lazy/4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /import-local/3.1.0:
     resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
     engines: {node: '>=8'}
@@ -9422,12 +9887,12 @@ packages:
       - encoding
     dev: true
 
-  /isomorphic-ws/5.0.0_ws@8.8.0:
+  /isomorphic-ws/5.0.0_ws@8.12.0:
     resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
     peerDependencies:
       ws: '*'
     dependencies:
-      ws: 8.8.0
+      ws: 8.12.0
 
   /istanbul-lib-coverage/3.2.0:
     resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
@@ -10022,6 +10487,10 @@ packages:
     hasBin: true
     dev: true
 
+  /jju/1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+    dev: true
+
   /joycon/3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
@@ -10055,7 +10524,7 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.1
+      acorn: 8.8.2
       acorn-globals: 6.0.0
       cssom: 0.4.4
       cssstyle: 2.3.0
@@ -10202,6 +10671,12 @@ packages:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: true
 
+  /jsonfile/4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+    optionalDependencies:
+      graceful-fs: 4.2.10
+    dev: true
+
   /jsonfile/6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -10283,6 +10758,10 @@ packages:
     resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
     dev: true
 
+  /kolorist/1.7.0:
+    resolution: {integrity: sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==}
+    dev: true
+
   /leven/3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -10401,6 +10880,11 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /local-pkg/0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+    dev: true
+
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -10439,7 +10923,6 @@ packages:
 
   /lodash.isequal/4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
-    dev: false
 
   /lodash.isinteger/4.0.4:
     resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
@@ -10545,6 +11028,13 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
+  /magic-string/0.29.0:
+    resolution: {integrity: sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
   /make-dir/3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -10756,7 +11246,7 @@ packages:
   /mlly/1.1.0:
     resolution: {integrity: sha512-cwzBrBfwGC1gYJyfcy8TcZU1f+dbH/T+TuOhtYP2wLv/Fb51/uV7HJQfBPtEupZ2ORLRU1EKFS/QfS3eo9+kBQ==}
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.2
       pathe: 1.0.0
       pkg-types: 1.0.1
       ufo: 1.0.1
@@ -11192,6 +11682,10 @@ packages:
       no-case: 3.0.4
       tslib: 2.4.0
 
+  /path-browserify/1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
+
   /path-case/3.0.4:
     resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
     dependencies:
@@ -11371,6 +11865,14 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss/8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /postman-collection/4.1.4:
     resolution: {integrity: sha512-3b/ZUrCIXRG3Eh3P6usiBYSZbCHTwMsJJ1l2RID/rdv/EC8YyhVS5PKGKdpYrRB69F/fETD9lOAuhvCwj0h71w==}
     engines: {node: '>=10'}
@@ -11759,6 +12261,13 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /resolve/1.19.0:
+    resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
+    dependencies:
+      is-core-module: 2.9.0
+      path-parse: 1.0.7
+    dev: true
+
   /resolve/1.22.1:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
@@ -11903,6 +12412,13 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /rollup/3.17.2:
+    resolution: {integrity: sha512-qMNZdlQPCkWodrAZ3qnJtvCAl4vpQ8q77uEujVCCbC/6CLB7Lcmvjq7HyiOSnf4fxTT9XgsE36oLHJBH49xjqA==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+
   /run-async/2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -12329,7 +12845,6 @@ packages:
   /string-argv/0.3.1:
     resolution: {integrity: sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==}
     engines: {node: '>=0.6.19'}
-    dev: false
 
   /string-env-interpolation/1.0.1:
     resolution: {integrity: sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==}
@@ -12626,7 +13141,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.1
+      acorn: 8.8.2
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true
@@ -12835,6 +13350,13 @@ packages:
     resolution: {integrity: sha512-DEQrfv6l7IvN2jlzc/VTdZJYsWUnQNCsueYjMkC/iXoEoi5fNan6MjeDqkvhfzbmHgdz9UxDUluX3V5HdjTydQ==}
     dev: true
 
+  /ts-morph/17.0.1:
+    resolution: {integrity: sha512-10PkHyXmrtsTvZSL+cqtJLTgFXkU43Gd0JCc0Rw6GchWbqKe0Rwgt1v3ouobTZwQzF1mGhDeAlWYBMGRV7y+3g==}
+    dependencies:
+      '@ts-morph/common': 0.18.1
+      code-block-writer: 11.0.3
+    dev: true
+
   /ts-node/10.8.2_x2utdhayajzrh747hktprshhby:
     resolution: {integrity: sha512-LYdGnoGddf1D6v8REPtIH+5iq/gTDuZqv2/UJUU7tKjuEU8xVZorBM+buCGNjj+pGEud+sOoM4CX3/YzINpENA==}
     hasBin: true
@@ -12855,7 +13377,7 @@ packages:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.3
       '@types/node': 17.0.45
-      acorn: 8.8.1
+      acorn: 8.8.2
       acorn-walk: 8.2.0
       arg: 4.1.3
       create-require: 1.1.1
@@ -13025,6 +13547,12 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
+  /typescript/4.8.4:
+    resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
   /ua-parser-js/0.7.31:
     resolution: {integrity: sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==}
     dev: true
@@ -13125,39 +13653,6 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /unplugin-icons/0.14.9_ucej6auec2vidlux2n3htzvxf4:
-    resolution: {integrity: sha512-vPyVfNREH88dP6gszdaoGkAEFPpiScXj1A8eWN905jQgT53A3tsiPEiqJjCHOUVcsUaREt2JSudzumFOsCA78A==}
-    peerDependencies:
-      '@svgr/core': '>=5.5.0'
-      '@vue/compiler-sfc': ^3.0.2
-      vue-template-compiler: ^2.6.12
-      vue-template-es2015-compiler: ^1.9.0
-    peerDependenciesMeta:
-      '@svgr/core':
-        optional: true
-      '@vue/compiler-sfc':
-        optional: true
-      vue-template-compiler:
-        optional: true
-      vue-template-es2015-compiler:
-        optional: true
-    dependencies:
-      '@antfu/install-pkg': 0.1.0
-      '@antfu/utils': 0.5.2
-      '@iconify/utils': 1.0.33
-      '@vue/compiler-sfc': 3.2.45
-      debug: 4.3.4
-      kolorist: 1.5.1
-      local-pkg: 0.4.2
-      unplugin: 0.9.5_vite@3.2.4
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - supports-color
-      - vite
-      - webpack
-    dev: true
-
   /unplugin-icons/0.14.9_vite@3.2.4:
     resolution: {integrity: sha512-vPyVfNREH88dP6gszdaoGkAEFPpiScXj1A8eWN905jQgT53A3tsiPEiqJjCHOUVcsUaREt2JSudzumFOsCA78A==}
     peerDependencies:
@@ -13223,6 +13718,35 @@ packages:
       - webpack
     dev: true
 
+  /unplugin-icons/0.15.3_@vue+compiler-sfc@3.2.45:
+    resolution: {integrity: sha512-YWgJqv5AahrokeOnta8uX/m1damZA6Rf6zPClgHg2Fa/45iyOe3Lj+Wn/Ba+CSsq9yBffn17YfKfJNyWCNZPvw==}
+    peerDependencies:
+      '@svgr/core': '>=5.5.0'
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.2
+      '@iconify/utils': 2.1.4
+      '@vue/compiler-sfc': 3.2.45
+      debug: 4.3.4
+      kolorist: 1.7.0
+      local-pkg: 0.4.3
+      unplugin: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /unplugin-vue-components/0.21.0_vite@3.1.4+vue@3.2.37:
     resolution: {integrity: sha512-U7uOMNmRJ2eAv9CNjP8QRvxs6nAe3FVQUEIUphC1FGguBp3BWSLgGAcSHaX2nQy0gFoDY2mLF2M52W/t/eDaKg==}
     engines: {node: '>=14'}
@@ -13281,6 +13805,34 @@ packages:
       - webpack
     dev: true
 
+  /unplugin-vue-components/0.21.0_vite@4.1.3:
+    resolution: {integrity: sha512-U7uOMNmRJ2eAv9CNjP8QRvxs6nAe3FVQUEIUphC1FGguBp3BWSLgGAcSHaX2nQy0gFoDY2mLF2M52W/t/eDaKg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.5.2
+      '@rollup/pluginutils': 4.2.1
+      chokidar: 3.5.3
+      debug: 4.3.4
+      fast-glob: 3.2.11
+      local-pkg: 0.4.2
+      magic-string: 0.26.7
+      minimatch: 5.1.0
+      resolve: 1.22.1
+      unplugin: 0.7.1_vite@4.1.3
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
   /unplugin/0.7.1_vite@3.1.4:
     resolution: {integrity: sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==}
     peerDependencies:
@@ -13324,7 +13876,31 @@ packages:
     dependencies:
       acorn: 8.8.0
       chokidar: 3.5.3
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.4
+    dev: true
+
+  /unplugin/0.7.1_vite@4.1.3:
+    resolution: {integrity: sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0 || ^3.0.0-0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      acorn: 8.8.0
+      chokidar: 3.5.3
+      vite: 4.1.3_sass@1.53.0
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.4
     dev: true
@@ -13372,11 +13948,20 @@ packages:
     dependencies:
       acorn: 8.8.0
       chokidar: 3.5.3
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.4
     dev: true
 
+  /unplugin/1.1.0:
+    resolution: {integrity: sha512-I8obQ8Rs/hnkxokRV6g8JKOQFgYNnTd9DL58vcSt5IJ9AkK8wbrtsnzD5hi4BJlvcY536JzfEXj9L6h7j559/A==}
+    dependencies:
+      acorn: 8.8.2
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.5.0
+    dev: true
+
   /upath/1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
@@ -13483,7 +14068,6 @@ packages:
   /validator/13.7.0:
     resolution: {integrity: sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==}
     engines: {node: '>= 0.10'}
-    dev: false
 
   /value-or-promise/1.0.11:
     resolution: {integrity: sha512-41BrgH+dIbCFXClcSapVs5M6GkENd3gQOJpEfPDNa71LsUGMXDL0jMWpI/Rh7WhX+Aalfz2TTS3Zt5pUsbnhLg==}
@@ -13510,45 +14094,6 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-checker/0.5.1_jrjwweurx77rgiqotz2vtz63ma:
-    resolution: {integrity: sha512-NFiO1PyK9yGuaeSnJ7Whw9fnxLc1AlELnZoyFURnauBYhbIkx9n+PmIXxSFUuC9iFyACtbJQUAEuQi6yHs2Adg==}
-    engines: {node: '>=14.16'}
-    peerDependencies:
-      eslint: '>=7'
-      typescript: '*'
-      vite: ^2.0.0 || ^3.0.0-0
-      vls: '*'
-      vti: '*'
-    peerDependenciesMeta:
-      eslint:
-        optional: true
-      typescript:
-        optional: true
-      vls:
-        optional: true
-      vti:
-        optional: true
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      chokidar: 3.5.3
-      commander: 8.3.0
-      eslint: 8.28.0
-      fast-glob: 3.2.11
-      lodash.debounce: 4.0.8
-      lodash.pick: 4.4.0
-      npm-run-path: 4.0.1
-      strip-ansi: 6.0.1
-      tiny-invariant: 1.2.0
-      typescript: 4.7.4
-      vite: 3.2.4_sass@1.53.0
-      vscode-languageclient: 7.0.0
-      vscode-languageserver: 7.0.0
-      vscode-languageserver-textdocument: 1.0.7
-      vscode-uri: 3.0.3
-    dev: true
-
   /vite-plugin-checker/0.5.1_kjjvnh3jl66vp4phsscdedqila:
     resolution: {integrity: sha512-NFiO1PyK9yGuaeSnJ7Whw9fnxLc1AlELnZoyFURnauBYhbIkx9n+PmIXxSFUuC9iFyACtbJQUAEuQi6yHs2Adg==}
     engines: {node: '>=14.16'}
@@ -13588,7 +14133,69 @@ packages:
       vscode-uri: 3.0.3
     dev: true
 
-  /vite-plugin-eslint/1.8.1_eslint@8.28.0+vite@3.2.4:
+  /vite-plugin-checker/0.5.1_lqkfaoh65quuz5r6x77gky7rqa:
+    resolution: {integrity: sha512-NFiO1PyK9yGuaeSnJ7Whw9fnxLc1AlELnZoyFURnauBYhbIkx9n+PmIXxSFUuC9iFyACtbJQUAEuQi6yHs2Adg==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      eslint: '>=7'
+      typescript: '*'
+      vite: ^2.0.0 || ^3.0.0-0
+      vls: '*'
+      vti: '*'
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      typescript:
+        optional: true
+      vls:
+        optional: true
+      vti:
+        optional: true
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      commander: 8.3.0
+      eslint: 8.28.0
+      fast-glob: 3.2.11
+      lodash.debounce: 4.0.8
+      lodash.pick: 4.4.0
+      npm-run-path: 4.0.1
+      strip-ansi: 6.0.1
+      tiny-invariant: 1.2.0
+      typescript: 4.7.4
+      vite: 4.1.3_sass@1.53.0
+      vscode-languageclient: 7.0.0
+      vscode-languageserver: 7.0.0
+      vscode-languageserver-textdocument: 1.0.7
+      vscode-uri: 3.0.3
+    dev: true
+
+  /vite-plugin-dts/2.0.0-beta.3_vite@4.1.3:
+    resolution: {integrity: sha512-QrsbTxyt0choSYXPxPfmN9XcSvxcVZk0zticxLrI5DkECs9KhDrSVGok1YP/UPkoKpfF9ThtOJcM5Rjuesxv/w==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: '>=2.9.0'
+    dependencies:
+      '@babel/parser': 7.21.1
+      '@microsoft/api-extractor': 7.34.4
+      '@rollup/pluginutils': 5.0.2
+      '@rushstack/node-core-library': 3.55.2
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      fs-extra: 10.1.0
+      kolorist: 1.7.0
+      magic-string: 0.29.0
+      ts-morph: 17.0.1
+      vite: 4.1.3_sass@1.53.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+    dev: true
+
+  /vite-plugin-eslint/1.8.1_eslint@8.28.0+vite@4.1.3:
     resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
     peerDependencies:
       eslint: '>=7'
@@ -13598,7 +14205,7 @@ packages:
       '@types/eslint': 8.4.10
       eslint: 8.28.0
       rollup: 2.79.1
-      vite: 3.2.4_sass@1.53.0
+      vite: 4.1.3_sass@1.53.0
     dev: false
 
   /vite-plugin-fonts/0.6.0_vite@3.1.4:
@@ -13616,7 +14223,16 @@ packages:
       vite: ^2.0.0 || ^3.0.0
     dependencies:
       fast-glob: 3.2.11
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
+    dev: true
+
+  /vite-plugin-fonts/0.6.0_vite@4.1.3:
+    resolution: {integrity: sha512-dV6nnLEju8k5EmvlBH6egxkVZ+rgc5zWsJr9+cNRXBMEDnpRGHcZPI260UEDNg2yB99wSTNER2eduEvZFbMIGw==}
+    peerDependencies:
+      vite: ^2.0.0 || ^3.0.0
+    dependencies:
+      fast-glob: 3.2.11
+      vite: 4.1.3_sass@1.53.0
     dev: true
 
   /vite-plugin-html-config/1.0.10_vite@3.1.4:
@@ -13634,7 +14250,16 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
     dependencies:
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
+    dev: true
+
+  /vite-plugin-html-config/1.0.10_vite@4.1.3:
+    resolution: {integrity: sha512-qJCVKC/mR4BIy4EG7AHQ3nGo1BF+3fOjVIka0kXKQMlxT12dl9G5YKmjhLohDzySijOb03R2PzYiAdavwKkqQQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      vite: 4.1.3_sass@1.53.0
     dev: true
 
   /vite-plugin-inspect/0.7.4_vite@3.1.4:
@@ -13666,7 +14291,24 @@ packages:
       kolorist: 1.5.1
       sirv: 2.0.2
       ufo: 0.8.5
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vite-plugin-inspect/0.7.4_vite@4.1.3:
+    resolution: {integrity: sha512-06uSil9CPWsGwICsXixx2O3vsIOLNTkQaiBijmJA84BuxYKIWJ3k0r4I96kX1WgdA3olxJxVBXOjzryzeHOSuQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      vite: ^3.1.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      debug: 4.3.4
+      fs-extra: 10.1.0
+      kolorist: 1.5.1
+      sirv: 2.0.2
+      ufo: 0.8.5
+      vite: 4.1.3_sass@1.53.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13675,7 +14317,7 @@ packages:
     resolution: {integrity: sha512-8GlmNSeObvDVUdmgutfWnGBZGsn3Zb8IXCjRODFB0tOhQqAQPZRwXrFha6ZLjvF4DgVJI3sW2FfiXa1wFxJvmg==}
     dev: true
 
-  /vite-plugin-pages/0.26.0_ucej6auec2vidlux2n3htzvxf4:
+  /vite-plugin-pages/0.26.0_g7e6creq4bwjmknml2vtioo7yu:
     resolution: {integrity: sha512-yJZvwHEt7puYIf19S89IvkDsWPjWleSied4H8hmdW6i8buCA93z1UAU1ipW1d8fNKrC4FzXsUHHbPm6+kl1p9w==}
     peerDependencies:
       '@vue/compiler-sfc': ^2.7.0 || ^3.0.0
@@ -13693,7 +14335,7 @@ packages:
       json5: 2.2.1
       local-pkg: 0.4.2
       picocolors: 1.0.0
-      vite: 3.2.4_sass@1.53.0
+      vite: 4.1.3_sass@1.53.0
       yaml: 2.1.1
     transitivePeerDependencies:
       - supports-color
@@ -13782,7 +14424,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa/0.13.1_vite@3.2.4:
+  /vite-plugin-pwa/0.13.1_vite@4.1.3:
     resolution: {integrity: sha512-NR3dIa+o2hzlzo4lF4Gu0cYvoMjSw2DdRc6Epw1yjmCqWaGuN86WK9JqZie4arNlE1ZuWT3CLiMdiX5wcmmUmg==}
     peerDependencies:
       vite: ^3.1.0
@@ -13792,7 +14434,7 @@ packages:
       fast-glob: 3.2.11
       pretty-bytes: 6.0.0
       rollup: 2.79.1
-      vite: 3.2.4_sass@1.53.0
+      vite: 4.1.3_sass@1.53.0
       workbox-build: 6.5.4
       workbox-window: 6.5.4
     transitivePeerDependencies:
@@ -13846,7 +14488,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-vue-layouts/0.7.0_x3isqn4gd6tlkzc66bnhwnhwbi:
+  /vite-plugin-vue-layouts/0.7.0_xpcchvfxy4izd7ocado4zodsv4:
     resolution: {integrity: sha512-k5XDmRNFo4M/GmUjhbRXj2WmJiFcGoVI8l/uZ72RHyRDQr4wE/6Zq/KFq0lqXomWQxTSzakQRUswzNwtvZLE8A==}
     peerDependencies:
       vite: ^2.5.0 || ^3.0.0-0
@@ -13856,9 +14498,8 @@ packages:
       '@vue/compiler-sfc': 3.2.45
       debug: 4.3.4
       fast-glob: 3.2.11
-      vite: 3.2.4_sass@1.53.0
-      vue: 3.2.45
-      vue-router: 4.1.0_vue@3.2.45
+      vite: 4.1.3_sass@1.53.0
+      vue-router: 4.1.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13885,7 +14526,21 @@ packages:
       '@windicss/plugin-utils': 1.8.8
       debug: 4.3.4
       kolorist: 1.5.1
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
+      windicss: 3.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vite-plugin-windicss/1.8.8_vite@4.1.3:
+    resolution: {integrity: sha512-iyu+ZX0NmhNEUaLPv7xtC+EFRBpWMmw0nhd9a9upayfuNG/thwslKiQKmRB7U/dG0k/2oWLvPDvN/B9i7oRgSA==}
+    peerDependencies:
+      vite: ^2.0.1 || ^3.0.0
+    dependencies:
+      '@windicss/plugin-utils': 1.8.8
+      debug: 4.3.4
+      kolorist: 1.5.1
+      vite: 4.1.3_sass@1.53.0
       windicss: 3.5.6
     transitivePeerDependencies:
       - supports-color
@@ -13983,6 +14638,40 @@ packages:
       sass: 1.53.0
     optionalDependencies:
       fsevents: 2.3.2
+    dev: true
+
+  /vite/4.1.3_sass@1.53.0:
+    resolution: {integrity: sha512-0Zqo4/Fr/swSOBmbl+HAAhOjrqNwju+yTtoe4hQX9UsARdcuc9njyOdr6xU0DDnV7YP0RT6mgTTOiRtZgxfCxA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.16.17
+      postcss: 8.4.21
+      resolve: 1.22.1
+      rollup: 3.17.2
+      sass: 1.53.0
+    optionalDependencies:
+      fsevents: 2.3.2
 
   /vscode-jsonrpc/6.0.0:
     resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==}
@@ -14028,6 +14717,19 @@ packages:
     resolution: {integrity: sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==}
     dev: true
 
+  /vue-demi/0.13.1:
+    resolution: {integrity: sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dev: false
+
   /vue-demi/0.13.1_vue@3.2.37:
     resolution: {integrity: sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==}
     engines: {node: '>=12'}
@@ -14043,21 +14745,6 @@ packages:
       vue: 3.2.37
     dev: false
 
-  /vue-demi/0.13.1_vue@3.2.45:
-    resolution: {integrity: sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.2.45
-    dev: false
-
   /vue-eslint-parser/9.1.0_eslint@8.24.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -14112,7 +14799,7 @@ packages:
       '@vue/devtools-api': 6.2.1
       vue: 3.2.37
 
-  /vue-loader/16.8.3_tfvhctuaqmmqnirfl65c47tqwu:
+  /vue-loader/16.8.3_@vue+compiler-sfc@3.2.45:
     resolution: {integrity: sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==}
     peerDependencies:
       '@vue/compiler-sfc': ^3.0.8
@@ -14128,7 +14815,6 @@ packages:
       chalk: 4.1.2
       hash-sum: 2.0.0
       loader-utils: 2.0.4
-      vue: 3.2.45
     dev: true
 
   /vue-pdf-embed/1.1.4_vue@3.2.37:
@@ -14139,6 +14825,13 @@ packages:
       vue: 3.2.37
     dev: false
 
+  /vue-router/4.1.0:
+    resolution: {integrity: sha512-A+dYO0ZXLJFZ40ebW3XtqehCW0Wv2xNH4lFddOByDja4NtItEdyirrShTlvD3UA4xc5a5mG2RRI30BusYpOb9g==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.2.1
+
   /vue-router/4.1.0_vue@3.2.37:
     resolution: {integrity: sha512-A+dYO0ZXLJFZ40ebW3XtqehCW0Wv2xNH4lFddOByDja4NtItEdyirrShTlvD3UA4xc5a5mG2RRI30BusYpOb9g==}
     peerDependencies:
@@ -14147,14 +14840,6 @@ packages:
       '@vue/devtools-api': 6.2.1
       vue: 3.2.37
 
-  /vue-router/4.1.0_vue@3.2.45:
-    resolution: {integrity: sha512-A+dYO0ZXLJFZ40ebW3XtqehCW0Wv2xNH4lFddOByDja4NtItEdyirrShTlvD3UA4xc5a5mG2RRI30BusYpOb9g==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      '@vue/devtools-api': 6.2.1
-      vue: 3.2.45
-
   /vue-template-compiler/2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:
@@ -14162,6 +14847,14 @@ packages:
       he: 1.2.0
     dev: true
 
+  /vue-tippy/6.0.0-alpha.58:
+    resolution: {integrity: sha512-kfpkFZMvua+nTn9Mqx3v5UrY8rlu3nHiOoGKO1bhSM0CUG8ISygfofSDwLDUW6wAcAHABkF7vcp5sPqhTb26CA==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      tippy.js: 6.3.7
+    dev: false
+
   /vue-tippy/6.0.0-alpha.58_vue@3.2.37:
     resolution: {integrity: sha512-kfpkFZMvua+nTn9Mqx3v5UrY8rlu3nHiOoGKO1bhSM0CUG8ISygfofSDwLDUW6wAcAHABkF7vcp5sPqhTb26CA==}
     peerDependencies:
@@ -14171,15 +14864,6 @@ packages:
       vue: 3.2.37
     dev: false
 
-  /vue-tippy/6.0.0-alpha.58_vue@3.2.45:
-    resolution: {integrity: sha512-kfpkFZMvua+nTn9Mqx3v5UrY8rlu3nHiOoGKO1bhSM0CUG8ISygfofSDwLDUW6wAcAHABkF7vcp5sPqhTb26CA==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      tippy.js: 6.3.7
-      vue: 3.2.45
-    dev: false
-
   /vue-tsc/0.38.2_typescript@4.7.4:
     resolution: {integrity: sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==}
     hasBin: true
@@ -14226,24 +14910,23 @@ packages:
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
 
-  /vuedraggable/4.1.0_vue@3.2.37:
-    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+  /vuedraggable-es/4.1.1:
+    resolution: {integrity: sha512-F35pjSwC8HS/lnaOd+B59nYR4FZmwuhWAzccK9xftRuWds8SU1TZh5myKVM86j5dFOI7S26O64Kwe7LUHnXjlA==}
     peerDependencies:
-      vue: ^3.0.1
+      vue: ^3.2.31
+    dependencies:
+      sortablejs: 1.14.0
+    dev: false
+
+  /vuedraggable-es/4.1.1_vue@3.2.37:
+    resolution: {integrity: sha512-F35pjSwC8HS/lnaOd+B59nYR4FZmwuhWAzccK9xftRuWds8SU1TZh5myKVM86j5dFOI7S26O64Kwe7LUHnXjlA==}
+    peerDependencies:
+      vue: ^3.2.31
     dependencies:
       sortablejs: 1.14.0
       vue: 3.2.37
     dev: false
 
-  /vuedraggable/4.1.0_vue@3.2.45:
-    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
-    peerDependencies:
-      vue: ^3.0.1
-    dependencies:
-      sortablejs: 1.14.0
-      vue: 3.2.45
-    dev: false
-
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     dependencies:
@@ -14317,6 +15000,10 @@ packages:
     resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
     dev: true
 
+  /webpack-virtual-modules/0.5.0:
+    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
+    dev: true
+
   /websocket-driver/0.7.4:
     resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
     engines: {node: '>=0.8.0'}
@@ -14664,18 +15351,6 @@ packages:
         optional: true
     dev: false
 
-  /ws/8.8.0:
-    resolution: {integrity: sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
   /xml-name-validator/3.0.0:
     resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
     dev: true
@@ -14853,3 +15528,15 @@ packages:
     optionalDependencies:
       commander: 2.20.3
     dev: false
+
+  /z-schema/5.0.5:
+    resolution: {integrity: sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==}
+    engines: {node: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      lodash.get: 4.4.2
+      lodash.isequal: 4.5.0
+      validator: 13.7.0
+    optionalDependencies:
+      commander: 9.5.0
+    dev: true