diff --git a/.gitignore b/.gitignore
index 43fcc33e38..1d2bd429e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 
 **/tests/e2e/videos/
 **/tests/e2e/screenshots/
+**/tests/e2e/downloads/
 
 # local env files
 .env.local
diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 521e723310..8003a068f7 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.51](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.50...vue3-migration-test@1.0.0-alpha.51) (2024-09-05)
+
+
+### Bug Fixes
+
+* **list-components:** fix list components, migrate infinite-scroll directive and deprecated layouts (#1576) ([4b57f19](https://github.com/empathyco/x/commit/4b57f19be601220a4dc6874dc1d5efa8fdbcf991))
+
+
+### Code Refactoring
+
+* **animation-factory:** fix Vue3 breaking changes (#1579) ([f915731](https://github.com/empathyco/x/commit/f915731cc8ea662a2066fee054f47885ee2154a9))
+* **base-switch:** decommission of value prop (#1589) ([35968eb](https://github.com/empathyco/x/commit/35968ebb69634984e867b03221d373efe4af96c8))
+* **base-switch:** migrate component to vue3 (#1588) ([875a6e2](https://github.com/empathyco/x/commit/875a6e2638885498396db362753550857ec8d7e2))
+* **staggered-fade-and-slide:** use Vue native staggered transition (#1578) ([79e136f](https://github.com/empathyco/x/commit/79e136f04b0b75ddea77c464b8f5ea0ed6602eb1))
+
+
+
 ## [1.0.0-alpha.50](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.49...vue3-migration-test@1.0.0-alpha.50) (2024-07-23)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 382a7b12e4..620805f50e 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.50",
+  "version": "1.0.0-alpha.51",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index b951da74a4..ca0d8338a1 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -5,3 +5,4 @@ export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
 export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
 export { default as TestAnimationFactory } from './test-animation-factory.vue';
+export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue b/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
index 3aa3de66cf..e27e830812 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
@@ -1,35 +1,5 @@
 <template>
   <div class="animate-modal">
-    <p>
-      BREAKING Vue3: `h()` hyperscript doesn't support rendering `'transition'` using strings.
-      Instead, replace it by `Transition` component of Vue 3 itself `import { Transition } from
-      'vue'`.
-      <br />
-      <a href="https://github.com/vuejs/core/issues/826#issuecomment-598207464">
-        https://github.com/vuejs/core/issues/826#issuecomment-598207464
-      </a>
-      <br />
-      <a href="https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181">
-        https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: Review Transition Class Change. Replace instances of `.v-enter` to
-      `.v-enter-from` Replace instances of `.v-leave` to `.v-leave-from`.
-      <br />
-      <a href="https://v3-migration.vuejs.org/breaking-changes/transition.html">
-        https://v3-migration.vuejs.org/breaking-changes/transition.html
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: VNodes now have a flat props structure.
-      <br />
-      <a
-        href="https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format"
-      >
-        https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format
-      </a>
-    </p>
     <button @click="openWithClipPath">Open modal with CLIP PATH animation</button>
     <button @click="openWithScale">Open modal with SCALE animation</button>
     <button @click="openWithTranslate">Open modal with TRANSLATE animation</button>
@@ -49,34 +19,37 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, shallowRef } from 'vue';
+  import { nextTick, ref, shallowRef } from 'vue';
   import BaseModal from '../../../../x-components/src/components/modals/base-modal.vue';
   import { animateClipPath } from '../../../../x-components/src/components/animations/animate-clip-path/animate-clip-path.factory';
   import { animateScale } from '../../../../x-components/src/components/animations/animate-scale/animate-scale.factory';
   import { animateTranslate } from '../../../../x-components/src/components/animations/animate-translate/animate-translate.factory';
 
-  const clipPathAnimation = animateClipPath('bottom');
+  const clipPathAnimation = animateClipPath('left');
   const scaleAnimation = animateScale('bottom');
-  const translateAnimation = animateTranslate('bottom');
+  const translateAnimation = animateTranslate('right');
 
-  const currentAnimation = shallowRef(clipPathAnimation);
+  const currentAnimation = shallowRef(scaleAnimation);
   const open = ref(false);
 
   /** Open modal with ClipPath animation. */
-  function openWithClipPath() {
+  async function openWithClipPath() {
     currentAnimation.value = clipPathAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Scale animation. */
-  function openWithScale() {
+  async function openWithScale() {
     currentAnimation.value = scaleAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Translate animation. */
-  function openWithTranslate() {
+  async function openWithTranslate() {
     currentAnimation.value = translateAnimation;
+    await nextTick();
     open.value = true;
   }
 </script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
new file mode 100644
index 0000000000..dadcd355f5
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -0,0 +1,68 @@
+<template>
+  <h1>Dinamic content:</h1>
+  <button @click="insert">Insert at random index</button>
+  <button @click="reset">Reset</button>
+
+  <StaggeredFadeAndSlide :stagger="500">
+    <li v-for="item in items" :key="item.id">
+      {{ item.id }} - {{ item.name }}
+      <button @click="remove(item)">x</button>
+    </li>
+  </StaggeredFadeAndSlide>
+
+  <br />
+  <h1>Animation as prop</h1>
+  <BaseSuggestions :suggestions="suggestions" :animation="StaggeredFadeAndSlide" :stagger="50">
+    <template #default="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </template>
+  </BaseSuggestions>
+
+  <br />
+  <h1>Static content:</h1>
+  <StaggeredFadeAndSlide :stagger="50">
+    <li key="1">Element to animate</li>
+    <li key="2">Element to animate</li>
+    <li key="3">Element to animate</li>
+  </StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
+  import BaseSuggestions from '../../../../x-components/src/components/suggestions/base-suggestions.vue';
+  import {
+    getQuerySuggestionsStub,
+    createResultStub,
+    getResultsStub
+  } from '../../../../x-components/src/__stubs__';
+  const suggestions = getQuerySuggestionsStub('chip', 5);
+  const getInitialItems = () => getResultsStub(5);
+  const items = ref(getInitialItems());
+  let id = items.value.length + 1;
+  /**
+   * Insert a new item at a random index.
+   */
+  function insert() {
+    const i = Math.round(Math.random() * items.value.length);
+    items.value.splice(i, 0, createResultStub(`Product ${id++}`));
+  }
+  /**
+   * Reset the list of items.
+   */
+  function reset() {
+    items.value = getInitialItems();
+    id = items.value.length + 1;
+  }
+  /**
+   * Remove an item from the list.
+   *
+   * @param item - The item to remove.
+   */
+  function remove(item: any) {
+    const i = items.value.indexOf(item);
+    if (i > -1) {
+      items.value.splice(i, 1);
+    }
+  }
+</script>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 77985e8f78..d9005ffb9a 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -6,7 +6,6 @@ export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
 export { default as TestBaseVariableColumnGrid } from './test-base-variable-column-grid.vue';
 export { default as TestSlidingPanel } from './test-sliding-panel.vue';
-export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
@@ -20,3 +19,4 @@ export { default as TestTagging } from './tagging/test-tagging.vue';
 export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';
 export { default as TestIcons } from './icons/test-icons.vue';
 export { default as TestDisplayEmitter } from './test-display-emitter.vue';
+export { default as TestBaseSwitch } from './test-base-switch.vue';
diff --git a/packages/_vue3-migration-test/src/components/test-base-switch.vue b/packages/_vue3-migration-test/src/components/test-base-switch.vue
new file mode 100644
index 0000000000..5ecb913878
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/test-base-switch.vue
@@ -0,0 +1,18 @@
+<template>
+  <p>Using props and events:</p>
+  <BaseSwitch @change="value = !value" :modelValue="value" />
+  {{ value }}
+  <br />
+  <p>Using the `v-model` directive:</p>
+  <BaseSwitch v-model="value2" />
+  {{ value2 }}
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import BaseSwitch from '../../../x-components/src/components/base-switch.vue';
+
+  const value = ref(true);
+  const value2 = ref(true);
+</script>
diff --git a/packages/_vue3-migration-test/src/components/test-use-layouts.vue b/packages/_vue3-migration-test/src/components/test-use-layouts.vue
deleted file mode 100644
index c925c8c5eb..0000000000
--- a/packages/_vue3-migration-test/src/components/test-use-layouts.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <button @click="devMode = !devMode">{{ devMode ? 'Hide slots' : 'Show slots' }}</button>
-  <header v-if="hasContent('header')">
-    <!-- @slot Slot that is used to insert content into the Header. -->
-    <slot name="header">
-      <span v-if="devMode">HEADER</span>
-    </slot>
-  </header>
-
-  <div v-if="hasContent('sub-header')">
-    <!-- @slot Slot that can be used to insert content into the Sub Header. -->
-    <slot name="sub-header">
-      <span v-if="devMode">SUB HEADER</span>
-    </slot>
-  </div>
-
-  <main v-if="hasContent('main')" class="x-layout__main">
-    <!-- @slot Slot that can be used to insert content into the Main. -->
-    <slot name="main">
-      <span v-if="devMode">MAIN</span>
-    </slot>
-  </main>
-</template>
-
-<script setup>
-  import { useSlots, ref } from 'vue';
-  import { useLayouts } from '../../../x-components/src/components/layouts/use-layouts';
-
-  const slots = useSlots();
-
-  const devMode = ref(true);
-
-  const { hasContent } = useLayouts(devMode.value, slots);
-</script>
-
-<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index c040f9f98c..9dd876ef80 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -22,7 +22,6 @@ import {
   TestSearchBox,
   TestBaseVariableColumnGrid,
   TestEmpathize,
-  TestUseLayouts,
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
@@ -50,7 +49,9 @@ import {
   TestRenderlessExtraParam,
   TestAnimationFactory,
   TestIcons,
-  TestDisplayEmitter
+  TestDisplayEmitter,
+  TestBaseSwitch,
+  TestStaggeredFadeAndSlide
 } from './';
 
 const routes = [
@@ -174,11 +175,6 @@ const routes = [
     name: 'BaseVariableColumnGrid',
     component: TestBaseVariableColumnGrid
   },
-  {
-    path: '/test-use-layouts',
-    name: 'UseLayouts',
-    component: TestUseLayouts
-  },
   {
     path: '/base-suggestions',
     name: 'BaseSuggestions',
@@ -308,6 +304,16 @@ const routes = [
     path: '/display-emitter',
     name: 'DisplayEmitter',
     component: TestDisplayEmitter
+  },
+  {
+    path: '/base-switch',
+    name: 'BaseSwitch',
+    component: TestBaseSwitch
+  },
+  {
+    path: '/staggered-fade-and-slide',
+    name: 'StaggeredFadeAndSlide',
+    component: TestStaggeredFadeAndSlide
   }
 ];
 
diff --git a/packages/x-archetype-utils/CHANGELOG.md b/packages/x-archetype-utils/CHANGELOG.md
index e326fed8eb..d3884d2e86 100644
--- a/packages/x-archetype-utils/CHANGELOG.md
+++ b/packages/x-archetype-utils/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-archetype-utils@1.1.0-alpha.2...@empathyco/x-archetype-utils@2.0.0-alpha.1) (2024-09-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* @empathyco/x-components v6 and @empathyco/x-archetype-utils v2 are only compatible with Vue 3 and if you are looking for the Vue 2 versions, take look at the main brach.
+* @empathyco/x-archetype-utils is only compatible with vue 3
+
+### Features
+
+* bump packages versions (#1611) ([eb7d377](https://github.com/empathyco/x/commit/eb7d377f0da3d09b78bc964de90529326889eb62))
+* bump vue18n version (#1604) ([9320c57](https://github.com/empathyco/x/commit/9320c57bd1aa2ff01fea8133238dc8fb809484c0))
+* **rollup:** update replace config to align CSS injector with Vue 3 (#1607) ([b98a31e](https://github.com/empathyco/x/commit/b98a31e488b788bab0a2fede87739e4cc9d1df57))
+
+
+
 ## [1.1.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-archetype-utils@1.1.0-alpha.1...@empathyco/x-archetype-utils@1.1.0-alpha.2) (2024-02-08)
 
 
diff --git a/packages/x-archetype-utils/package.json b/packages/x-archetype-utils/package.json
index 8cf14fe964..9e5403bd01 100644
--- a/packages/x-archetype-utils/package.json
+++ b/packages/x-archetype-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-archetype-utils",
-  "version": "1.1.0-alpha.2",
+  "version": "2.0.0-alpha.1",
   "description": "Utilities for x-archetype",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -39,12 +39,12 @@
     "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
     "@empathyco/x-utils": "workspace:^1.0.3-alpha.1",
     "tslib": "~2.6.0",
-    "vue-i18n": "~8.28.2"
+    "vue-i18n": "~9.14.0"
   },
   "devDependencies": {
     "@types/jest": "~27.5.0",
     "@types/node": "~18.19.0",
-    "@vue/test-utils": "~1.0.3",
+    "@vue/test-utils": "~2.4.6",
     "jest": "~27.5.0",
     "rimraf": "~3.0.2",
     "rollup": "~4.9.1",
@@ -53,11 +53,11 @@
     "rollup-plugin-typescript2": "~0.36.0",
     "ts-jest": "~27.1.0",
     "typescript": "~4.9.4",
-    "vue": "~2.7.14"
+    "vue": "~3.4.31"
   },
   "peerDependencies": {
-    "vue": "^2.7.0",
-    "vue-i18n": "^8.0.0"
+    "vue": "^3.4.31",
+    "vue-i18n": "^9.14.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/x-archetype-utils/rollup.config.mjs b/packages/x-archetype-utils/rollup.config.mjs
index 3173eb269e..d5b739bc33 100644
--- a/packages/x-archetype-utils/rollup.config.mjs
+++ b/packages/x-archetype-utils/rollup.config.mjs
@@ -24,7 +24,13 @@ export default {
     }),
     typescript({
       clean: true,
-      useTsconfigDeclarationDir: true
+      useTsconfigDeclarationDir: true,
+      tsconfigOverride: {
+        exclude: [
+          'node_modules',
+          '**/__tests__/**',
+        ]
+      }
     })
   ]
 };
diff --git a/packages/x-archetype-utils/src/__tests__/i18n.plugin.spec.ts b/packages/x-archetype-utils/src/__tests__/i18n.plugin.spec.ts
index 82becaa99f..a050a695a0 100644
--- a/packages/x-archetype-utils/src/__tests__/i18n.plugin.spec.ts
+++ b/packages/x-archetype-utils/src/__tests__/i18n.plugin.spec.ts
@@ -1,6 +1,5 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import Vue from 'vue';
-import { mount, createLocalVue, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { I18n } from '../i18n/i18n.plugin';
 import { Device, I18nOptions, Locale } from '../i18n/i18n.types';
 
@@ -24,10 +23,6 @@ describe('Test custom i18n plugin for several use cases', () => {
     i18nOptions: Partial<I18nOptions<DeepPartial<Messages>>> = {},
     key = 'testComponent.title'
   ): Promise<RenderComponentAPI> {
-    const TestComponent = Vue.component('testComponent', {
-      template: `<div>{{ $t("${key}") }}</div>`
-    });
-    const localVue = createLocalVue();
     const i18n = await I18n.create({
       locale: 'en',
       messages: {
@@ -43,11 +38,19 @@ describe('Test custom i18n plugin for several use cases', () => {
       fallbackLocale: 'en',
       ...i18nOptions
     });
-    localVue.use(i18n);
     const setLocale = i18n.setLocale.bind(i18n);
     const setLocaleDevice = i18n.setDevice.bind(i18n);
 
-    const wrapper = mount(TestComponent, { localVue, i18n: i18n.vueI18n });
+    const wrapper = mount(
+      {
+        template: `<div>{{ $t("${key}") }}</div>`
+      },
+      {
+        global: {
+          plugins: [i18n]
+        }
+      }
+    );
     return { wrapper, setLocale, setLocaleDevice };
   }
 
@@ -158,7 +161,7 @@ describe('Test custom i18n plugin for several use cases', () => {
 });
 
 interface RenderComponentAPI {
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   setLocale: (newLocale: Locale) => Promise<void>;
   setLocaleDevice: (newDevice: Device) => Promise<void>;
 }
diff --git a/packages/x-archetype-utils/src/build/rollup/rollup.config.ts b/packages/x-archetype-utils/src/build/rollup/rollup.config.ts
index cfc387a831..21218c4227 100644
--- a/packages/x-archetype-utils/src/build/rollup/rollup.config.ts
+++ b/packages/x-archetype-utils/src/build/rollup/rollup.config.ts
@@ -1,7 +1,8 @@
 export const rollupCssInjectorConfig = {
   replace: {
     // Replace X CSS injector by our custom one.
-    'addStyle(id, style);': 'window.xCSSInjector.addStyle(style);',
+    'export default injectCss;':
+      'export default (css) => window.xCSSInjector.addStyle({ source: css });',
     delimiters: ['', '']
   },
   styles: {
diff --git a/packages/x-archetype-utils/src/i18n/i18n.plugin.ts b/packages/x-archetype-utils/src/i18n/i18n.plugin.ts
index ec3b18440c..853b26f94d 100644
--- a/packages/x-archetype-utils/src/i18n/i18n.plugin.ts
+++ b/packages/x-archetype-utils/src/i18n/i18n.plugin.ts
@@ -1,6 +1,6 @@
 import { isObject } from '@empathyco/x-utils';
-import { VueConstructor } from 'vue';
-import VueI18n, { LocaleMessageObject, LocaleMessage } from 'vue-i18n';
+import { App } from 'vue';
+import { createI18n, LocaleMessageObject, I18n as VueI18n } from 'vue-i18n';
 import { deepMerge } from '@empathyco/x-deep-merge';
 import { AnyMessages, Device, I18nOptions, LoadLazyMessagesByDevice, Locale } from './i18n.types';
 
@@ -49,19 +49,20 @@ export class I18n<SomeMessages> {
    *
    * @param vue - The Vue instance.
    */
-  install(vue: VueConstructor): void {
-    vue.use(VueI18n);
-    this.vueI18n = new VueI18n({
+  install(vue: App): void {
+    this.vueI18n = createI18n({
       locale: this.locale,
-      messages: this.currentMessages ? { [this.locale]: this.currentMessages } : {},
       silentFallbackWarn: true,
-      missing: (locale, key) => {
+      messages: this.currentMessages ? ({ [this.locale]: this.currentMessages } as any) : {},
+      missing: (_, key: string) => {
         return (
           this.getMessageWithDotsInKey(key) ??
-          `[i18n] Key '${key}' is missing for locale: '${locale}'`
+          `[i18n] Key '${key}' is missing for locale: '${this.locale}'`
         );
       }
     });
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    vue.use(this.vueI18n);
   }
 
   /**
@@ -76,7 +77,7 @@ export class I18n<SomeMessages> {
     // TO-DO Support function or array messages
     const message = path
       .split('.')
-      .reduce<LocaleMessage>(
+      .reduce<any>(
         (messages, key, index, pathParts) =>
           isObject(messages)
             ? messages[key] ?? messages[pathParts.slice(index).join('.')]
@@ -98,7 +99,7 @@ export class I18n<SomeMessages> {
       this.locale = newLocale;
 
       await this.changeMessages();
-      this.vueI18n.locale = this.locale;
+      this.vueI18n.global.locale = this.locale;
     }
   }
 
@@ -123,7 +124,8 @@ export class I18n<SomeMessages> {
   protected async changeMessages(): Promise<void> {
     this.currentMessages = await this.getCurrentMessages();
 
-    this.vueI18n.setLocaleMessage(this.locale, this.currentMessages);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    this.vueI18n.global.setLocaleMessage(this.locale, this.currentMessages);
   }
 
   /**
diff --git a/packages/x-archetype-utils/src/i18n/i18n.types.ts b/packages/x-archetype-utils/src/i18n/i18n.types.ts
index 0b37a1974d..aa85223e4c 100644
--- a/packages/x-archetype-utils/src/i18n/i18n.types.ts
+++ b/packages/x-archetype-utils/src/i18n/i18n.types.ts
@@ -1,5 +1,5 @@
-import VueI18n from 'vue-i18n';
 import { DeepPartial } from '@empathyco/x-utils';
+import { I18n as VueI18n } from 'vue-i18n';
 
 /** Supported locales. */
 export type Locale = string;
diff --git a/packages/x-components/.eslintrc.js b/packages/x-components/.eslintrc.js
index 75aafd665d..91454f1566 100644
--- a/packages/x-components/.eslintrc.js
+++ b/packages/x-components/.eslintrc.js
@@ -8,8 +8,10 @@ module.exports = {
   rules: {
     'no-dupe-class-members': 'off',
     '@typescript-eslint/no-unused-vars-experimental': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
     'vue/require-default-prop': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off'
+    'vue/multi-word-component-names': 'off',
+    'vue/no-v-for-template-key': 'off'
   },
   overrides: [
     {
@@ -34,7 +36,9 @@ module.exports = {
     {
       files: ['*.spec.ts'],
       rules: {
-        'max-len': 'off'
+        'max-len': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        'vue/one-component-per-file': 'off'
       }
     }
   ]
diff --git a/packages/x-components/.gitignore b/packages/x-components/.gitignore
index e4ef8b47ee..a11c342ad7 100644
--- a/packages/x-components/.gitignore
+++ b/packages/x-components/.gitignore
@@ -8,6 +8,7 @@
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
+/tests/e2e/downloads/
 
 # local env files
 .env.local
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index f00aa03642..d0595b75ff 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.0-alpha.3](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.2...@empathyco/x-components@6.0.0-alpha.3) (2024-10-04)
+
+
+### Bug Fixes
+
+* **scroll:** scroll direction inconsistency (#1629) ([ad970ae](https://github.com/empathyco/x/commit/ad970ae8cd7898f23baa11d3a128d3251cd57cdb))
+
+
+
+## [6.0.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.1...@empathyco/x-components@6.0.0-alpha.2) (2024-09-25)
+
+
+### ⚠ BREAKING CHANGES
+
+* **history-queries-switch:** remove `change` event emission in favour of `update:modelValue` in `BaseSwitch` component. 
+
+### Bug Fixes
+
+* **history-queries-switch:** migrate value to modelValue (#1618) ([82a6e27](https://github.com/empathyco/x/commit/82a6e27b9a78388b6c0b42c57ce7ff6e63293686))
+
+
+### Testing
+
+* active and fix linter for tests (#1616) ([0f35e7c](https://github.com/empathyco/x/commit/0f35e7caf529e7a06252abe0ea64b119c1206566))
+* adjust test to vue3 (#1608) ([0f4bb97](https://github.com/empathyco/x/commit/0f4bb97dcba50b21c98575d51bda944bfe532b1f))
+* **e2e-components:** rewrite all e2e sheet components to accomplish vue3  (#1619) ([5a419b2](https://github.com/empathyco/x/commit/5a419b2d882c151f81d9921d591140e5471f5b05))
+* **e2e:** fix e2e tests (#1617) ([f81add6](https://github.com/empathyco/x/commit/f81add665e5b2f36ecedf25d14eb5f6573f0e0fb))
+
+
+
+## [6.0.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.81...@empathyco/x-components@6.0.0-alpha.1) (2024-09-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* @empathyco/x-components v6 and @empathyco/x-archetype-utils v2 are only compatible with Vue 3 and if you are looking for the Vue 2 versions, take look at the main brach.
+* refactors the GlobalXBus to use a prop to receive the listeners instead of relying on attributes.
+
+### Features
+
+* bump packages versions (#1611) ([eb7d377](https://github.com/empathyco/x/commit/eb7d377f0da3d09b78bc964de90529326889eb62))
+* make internal demo app functional (#1574) ([a485dea](https://github.com/empathyco/x/commit/a485dea768918280e2fec46cae0d5a3f4932002f))
+* **x-installer:** update to vue3 and adapt x-installer (#1572) ([c6b28e5](https://github.com/empathyco/x/commit/c6b28e5e9a07832e992f27a40d7513dbec90d2f2))
+
+
+### Bug Fixes
+
+* adjust to new vue render function API (#1596) ([7ec2b97](https://github.com/empathyco/x/commit/7ec2b9719f18275e7843544f26f94c393fef7090))
+* **infinite-scroll:** getting xBus from XPlugin instead useXBus ([b936ae5](https://github.com/empathyco/x/commit/b936ae585b4ef5ae390515cfc2c3a0dfc782ad39))
+* **layout:** avoid shared CSS classes between layouts with scoped (#1605) ([b3cc3f5](https://github.com/empathyco/x/commit/b3cc3f528f71b0877a406c65cadfbecda7aca756))
+* **list-components:** fix list components, migrate infinite-scroll directive and deprecated layouts (#1576) ([4b57f19](https://github.com/empathyco/x/commit/4b57f19be601220a4dc6874dc1d5efa8fdbcf991))
+* **search:** replace results state to append new results instead of pushing them (#1597) ([e64e3cb](https://github.com/empathyco/x/commit/e64e3cb9f3c046d1c30249fb56b0b3ad32f97925))
+
+
+### Testing
+
+* **auto-progress-bar:** fix test after Vue3 update (#1582) ([335c370](https://github.com/empathyco/x/commit/335c37021f9a0f6fefaec01714cc31fb6bf66391))
+* **components:** fix tests after Vue3 update BATCH 1 ([5d4dec8](https://github.com/empathyco/x/commit/5d4dec81b5b9ee99f1cbfc1d88bbf58cd5188602))
+* **vue-jest:** update vue-jest dependency (#1581) ([46ff08b](https://github.com/empathyco/x/commit/46ff08bb5834d790b0c6414fc549141b9a64f1d1))
+
+
+### Code Refactoring
+
+* **animation-factory:** fix Vue3 breaking changes (#1579) ([f915731](https://github.com/empathyco/x/commit/f915731cc8ea662a2066fee054f47885ee2154a9))
+* **base-switch:** decommission of value prop (#1589) ([35968eb](https://github.com/empathyco/x/commit/35968ebb69634984e867b03221d373efe4af96c8))
+* **base-switch:** migrate component to vue3 (#1588) ([875a6e2](https://github.com/empathyco/x/commit/875a6e2638885498396db362753550857ec8d7e2))
+* **components:** remove warnings first batch (#1575) ([1877da6](https://github.com/empathyco/x/commit/1877da61c2eb5aff5742387dc2285b3db86afda5))
+* get rid of NoElement component and useNoElementRender composable (#1583) ([059eecc](https://github.com/empathyco/x/commit/059eecc0fd5aa1612c1fc7b4d5ec08cfe5fc5b84))
+* **render-function:** clear void calls (#1580) ([7875ff5](https://github.com/empathyco/x/commit/7875ff5b8420ea1ed03edd3fee28a822582b4641))
+* **staggered-fade-and-slide:** use Vue native staggered transition (#1578) ([79e136f](https://github.com/empathyco/x/commit/79e136f04b0b75ddea77c464b8f5ea0ed6602eb1))
+* **v-deep:** replace by :deep() (#1577) ([71c08db](https://github.com/empathyco/x/commit/71c08dbc175093bbfc56160e3b07b8774fcbc683))
+
+
+### Build System
+
+* adjust rollup production build for Vue3 (#1603) ([ed587b1](https://github.com/empathyco/x/commit/ed587b16a56b32734e9cf3ff05311954627f3820))
+
+
+### Continuous Integration
+
+* **linter:** fix linter issues to pass the CI (#1606) ([aff3151](https://github.com/empathyco/x/commit/aff3151818c64885d7c28e69f511d33ae41b38f5))
+
+
+
 ## [5.0.0-alpha.81](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.80...@empathyco/x-components@5.0.0-alpha.81) (2024-08-20)
 
 
diff --git a/packages/x-components/build/build.ts b/packages/x-components/build/build.ts
index 42b28542fe..5bf2451666 100644
--- a/packages/x-components/build/build.ts
+++ b/packages/x-components/build/build.ts
@@ -1,35 +1,16 @@
-import * as path from 'path';
-import fs from 'fs';
-import { rollup } from 'rollup';
-import { cssDeprecatedComponentsRollupConfig, rollupConfig } from './rollup.config';
-
-const rootDir = path.resolve(__dirname, '../');
-
-// eslint-disable-next-line no-console
-build().catch(console.error);
+import { OutputOptions, rollup } from 'rollup';
+import { cssDeprecatedRollupConfig, rollupConfig } from './rollup.config';
 
 /**
  * Entry point for building the project.
  */
-async function build(): Promise<any> {
-  try {
-    const bundle = await rollup(rollupConfig);
-    await bundle.write(rollupConfig.output);
-
-    const bundleCssDeprecatedComponents = await rollup(cssDeprecatedComponentsRollupConfig);
-    await bundleCssDeprecatedComponents.write(cssDeprecatedComponentsRollupConfig.output);
+async function build() {
+  const bundle = await rollup(rollupConfig);
+  await bundle.write(rollupConfig.output as OutputOptions);
 
-    return removeTempFiles();
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('Build failed: ', (error as Error).message);
-    process.exit(1);
-  }
+  const bundleCssDeprecatedComponents = await rollup(cssDeprecatedRollupConfig);
+  await bundleCssDeprecatedComponents.write(cssDeprecatedRollupConfig.output as OutputOptions);
 }
 
-/**
- * Function for deleting useless folders.
- */
-function removeTempFiles(): void {
-  fs.rmSync(path.join(rootDir, 'temp'), { recursive: true });
-}
+// eslint-disable-next-line no-console
+build().catch(console.error);
diff --git a/packages/x-components/build/build.utils.ts b/packages/x-components/build/build.utils.ts
index 398eba5fb4..9cd88ad004 100644
--- a/packages/x-components/build/build.utils.ts
+++ b/packages/x-components/build/build.utils.ts
@@ -2,24 +2,24 @@ import fs from 'fs';
 import path from 'path';
 
 /**
- * Asserts a file path directory exists recursively, creating it if it does not.
+ * Asserts a directory exist recursively, creating it if it does not.
  *
- * @param filePath - The full path to the file, that may or may not exist.
+ * @param directoryPath - The full directory path, that may or may not exist.
  */
-export function ensureFilePathExists(filePath: string): void {
-  const dirName = path.dirname(filePath);
-  ensureDirectoryPathExists(dirName);
+export function ensureDirectoryPathExists(directoryPath: string) {
+  if (!fs.existsSync(directoryPath)) {
+    fs.mkdirSync(directoryPath, { recursive: true });
+  }
 }
 
 /**
- * Asserts a directory exist recursively, creating it if it does not.
+ * Asserts a file path directory exists recursively, creating it if it does not.
  *
- * @param directoryPath - The full directory path, that may or may not exists.
+ * @param filePath - The full path to the file, that may or may not exist.
  */
-export function ensureDirectoryPathExists(directoryPath: string): void {
-  if (!fs.existsSync(directoryPath)) {
-    fs.mkdirSync(directoryPath, { recursive: true });
-  }
+export function ensureFilePathExists(filePath: string) {
+  const dirName = path.dirname(filePath);
+  ensureDirectoryPathExists(dirName);
 }
 
 /**
@@ -28,7 +28,7 @@ export function ensureDirectoryPathExists(directoryPath: string): void {
  * @param sourceFolder - Source folder to be copied.
  * @param targetFolder - Target folder.
  */
-export function copyFolderSync(sourceFolder: string, targetFolder: string): void {
+export function copyFolderSync(sourceFolder: string, targetFolder: string) {
   if (!fs.existsSync(targetFolder)) {
     fs.mkdirSync(targetFolder);
   }
@@ -49,6 +49,6 @@ export function copyFolderSync(sourceFolder: string, targetFolder: string): void
  * @param path - The path to normalize.
  * @returns A normalized path.
  */
-export function normalizePath(path: string): string {
+export function normalizePath(path: string) {
   return path.replace(/\\/g, '/');
 }
diff --git a/packages/x-components/build/postcss-dir-pseudo-class.d.ts b/packages/x-components/build/postcss-dir-pseudo-class.d.ts
deleted file mode 100644
index 97c67b6cbc..0000000000
--- a/packages/x-components/build/postcss-dir-pseudo-class.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module 'postcss-dir-pseudo-class' {
-  import { Options } from './postcss-types/options';
-
-  function postcssDirPseudoClass(options?: Options = {}): Plugin<Options>;
-  export = postcssDirPseudoClass;
-}
diff --git a/packages/x-components/build/postcss-logical.d.ts b/packages/x-components/build/postcss-logical.d.ts
deleted file mode 100644
index 3e9b159118..0000000000
--- a/packages/x-components/build/postcss-logical.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module 'postcss-logical' {
-  import { Options } from './postcss-types/options';
-
-  function postcssLogical(options?: Options = {}): Plugin<Options>;
-  export = postcssLogical;
-}
diff --git a/packages/x-components/build/postcss-types/options.ts b/packages/x-components/build/postcss-types/options.ts
deleted file mode 100644
index 39996ec735..0000000000
--- a/packages/x-components/build/postcss-types/options.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Options {
-  dir?: 'rtl' | 'ltr';
-  preserve?: boolean;
-}
diff --git a/packages/x-components/build/rollup-plugins/design-system.rollup-plugin.ts b/packages/x-components/build/rollup-plugins/design-system.rollup-plugin.ts
index 19295040b1..18a73605dc 100644
--- a/packages/x-components/build/rollup-plugins/design-system.rollup-plugin.ts
+++ b/packages/x-components/build/rollup-plugins/design-system.rollup-plugin.ts
@@ -1,5 +1,4 @@
 import fs from 'fs';
-import path from 'path';
 import { Plugin } from 'rollup';
 import { normalizePath } from '../build.utils';
 
@@ -12,28 +11,13 @@ import { normalizePath } from '../build.utils';
  * returns `src/design-system/button/default.tokens.scss` if exists.
  * @internal
  */
-function getTokensFilePath(file: string): string | null {
+function getTokensFilePath(file: string) {
   const fileParts = file.split('.');
   const fileExtension = fileParts.pop() ?? '';
   const tokensFile = `${fileParts.join('.')}.tokens.${fileExtension}`;
   return fs.existsSync(tokensFile) ? normalizePath(tokensFile) : null;
 }
 
-/**
- * This function returns the name for the CSS file using the component name and the variant.
- * The component name is extracted from the folder name, and the variant name is extracted from
- * the file name.
- *
- * @param file - The path of the file processed.
- * @returns The name for the CSS file with the component and the variant.
- * @example For `src/style/components/button/pill.scss` file this function returns `button-pill`.
- * @internal
- */
-export function renameComponentCssFile(file: string): string {
-  const parentFolder = path.dirname(file).split(path.sep)?.pop() ?? '';
-  return `${parentFolder}-${path.basename(file).replace('.scss', '')}`;
-}
-
 /**
  * This function returns a {@link Plugin | RollupJS Plugin} to import the tokens files into the
  * components .scss files. For each `xxx.scss` processed, it looks for the `xxx.tokens.scss` tokens
diff --git a/packages/x-components/build/rollup-plugins/x-components.rollup-plugin.ts b/packages/x-components/build/rollup-plugins/x-components.rollup-plugin.ts
index 30719690bc..8de6bd9f38 100644
--- a/packages/x-components/build/rollup-plugins/x-components.rollup-plugin.ts
+++ b/packages/x-components/build/rollup-plugins/x-components.rollup-plugin.ts
@@ -17,9 +17,9 @@ export interface GenerateEntryFilesOptions {
   /** The path where the build will go. */
   buildPath: string;
   /** The path to the directory where generated js files are stored. */
-  jsOutputDirectory: string;
+  jsOutputDir: string;
   /** The path to the directory where generated .d.ts files are stored. */
-  typesOutputDirectory: string;
+  typesOutputDir: string;
 }
 
 /**
@@ -44,9 +44,9 @@ export function generateEntryFiles(options: GenerateEntryFilesOptions): Plugin {
      * - 1 Typings file per entry point.
      */
     writeBundle() {
-      generateEntryPoints(options.buildPath, options.jsOutputDirectory, 'js');
-      generateEntryPoints(options.buildPath, options.typesOutputDirectory, 'd.ts');
-      copyIndexSourcemap(options.buildPath, options.jsOutputDirectory);
+      generateEntryPoints(options.buildPath, options.jsOutputDir, 'js');
+      generateEntryPoints(options.buildPath, options.typesOutputDir, 'd.ts');
+      copyIndexSourcemap(options.buildPath, options.jsOutputDir);
     }
   };
 }
diff --git a/packages/x-components/build/rollup.config.ts b/packages/x-components/build/rollup.config.ts
index 7b3e71215e..bd23383a29 100644
--- a/packages/x-components/build/rollup.config.ts
+++ b/packages/x-components/build/rollup.config.ts
@@ -1,14 +1,12 @@
 import path from 'path';
-import commonjs from '@rollup/plugin-commonjs';
 import { sync as glob } from 'glob';
-import { RollupOptions } from 'rollup';
+import { RollupOptions, Plugin } from 'rollup';
 import copy from 'rollup-plugin-copy';
 import del from 'rollup-plugin-delete';
 import styles from 'rollup-plugin-styles';
 import typescript from 'rollup-plugin-typescript2';
-import vue, { VuePluginOptions } from 'rollup-plugin-vue';
-import packageJSON from '../package.json';
-import { normalizePath } from './build.utils';
+import vue3 from '@vitejs/plugin-vue';
+import { dependencies as pkgDeps, peerDependencies as pkgPeerDeps } from '../package.json';
 import { apiDocumentation } from './docgen/documentation.rollup-plugin';
 import { importTokens, omitJsFiles } from './rollup-plugins/design-system.rollup-plugin';
 import { generateEntryFiles } from './rollup-plugins/x-components.rollup-plugin';
@@ -16,17 +14,21 @@ import { generateEntryFiles } from './rollup-plugins/x-components.rollup-plugin'
 const rootDir = path.resolve(__dirname, '../');
 const buildPath = path.join(rootDir, 'dist');
 
-const dependencies = new Set(
-  Object.keys(packageJSON.dependencies).concat(Object.keys(packageJSON.peerDependencies))
-);
-const jsOutputDirectory = path.join(buildPath, 'js');
-const typesOutputDirectory = path.join(buildPath, 'types');
-const cssOutputDirectory = path.join(buildPath, 'design-system');
+const jsOutputDir = path.join(buildPath, 'js');
+const typesOutputDir = path.join(buildPath, 'types');
 
-export const rollupConfig = createRollupOptions({
+const dependencies = new Set(Object.keys(pkgDeps).concat(Object.keys(pkgPeerDeps)));
+
+const vueDocs = {
+  name: 'vue-docs',
+  transform: (_code: unknown, id: string) =>
+    !/vue&type=docs/.test(id) ? undefined : `export default ''`
+};
+
+export const rollupConfig: RollupOptions = {
   input: path.join(rootDir, 'src/index.ts'),
   output: {
-    dir: jsOutputDirectory,
+    dir: jsOutputDir,
     format: 'esm',
     sourcemap: true,
     preserveModules: true
@@ -36,7 +38,7 @@ export const rollupConfig = createRollupOptions({
      * Because of that, when rollup detects a circular dependency (it emits a warning), we stop
      * the build with an error */
     if (warning.code === 'CIRCULAR_DEPENDENCY') {
-      throw Error(`Circular dependency found: ${warning.ids?.join(' ') as string}`);
+      throw Error(`Circular dependency found: ${warning.ids?.join(' ') ?? ''}`);
     }
   },
   external(id) {
@@ -44,26 +46,28 @@ export const rollupConfig = createRollupOptions({
      Rollup treats by default all node_modules dependencies as external, but will launch a
      warning if you don't manually specify them. In our case apart from the package.json ones,
      we also need to add any dependency that starts with rxjs (due to rxjs having multiple
-     entry points), and the vue-runtime-helpers, which is a dependency added by the SFC compiler
+     entry points)
      */
     return (
       dependencies.has(id) || // Package.json dependencies
       /* As rxjs has multiple entry points, it needs to be declared this way */
-      id.startsWith('rxjs') ||
-      /* Vue SFC dependency. Needs to be here because rollup generates a relative import to the
-       node_modules folder */
-      id.includes('vue-runtime-helpers')
+      id.startsWith('rxjs')
     );
   },
   plugins: [
-    del({ targets: [`${buildPath}/*`, `${path.join(rootDir, 'docs')}/*`] }),
-    commonjs(),
+    del({
+      targets: [
+        `${buildPath}/*`,
+        `${path.join(rootDir, 'docs')}/*`,
+        `${path.join(rootDir, 'temp')}/*`
+      ]
+    }),
     typescript({
       useTsconfigDeclarationDir: true,
       tsconfig: path.resolve(rootDir, 'tsconfig.json'),
       tsconfigOverride: {
         compilerOptions: {
-          declarationDir: typesOutputDirectory,
+          declarationDir: typesOutputDir,
           target: 'es2020'
         },
         exclude: [
@@ -75,91 +79,50 @@ export const rollupConfig = createRollupOptions({
         ]
       }
     }),
-    vue({
-      css: false,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore Undocumented option to disable vue sourcemap generation because it breaks if
-      // lang is set to ts:
-      // https://github.com/vuejs/rollup-plugin-vue/issues/272#issuecomment-491721842
-      needMap: false,
+    vue3({
       template: {
         compilerOptions: {
           whitespace: 'condense'
         }
-      } as VuePluginOptions['template'],
-      style: {
-        postcssCleanOptions: { disabled: true }
       }
-    }),
+    }) as Plugin,
     styles({
+      minimize: true,
       mode: [
         'inject',
-        (varname: string, id: string) =>
-          `import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('${normalizePath(id)}',{source:${varname}});`
+        varname => {
+          const pathInjector = path.resolve('./tools/inject-css.js');
+          return `import injectCss from '${pathInjector}';injectCss(${varname});`;
+        }
       ]
     }),
-    generateEntryFiles({
-      buildPath,
-      jsOutputDirectory,
-      typesOutputDirectory
-    }),
-    apiDocumentation({
-      buildPath
-    }),
+    vueDocs,
+    generateEntryFiles({ buildPath, jsOutputDir, typesOutputDir }),
+    apiDocumentation({ buildPath }),
     copy({
       targets: [
-        {
-          src: ['CHANGELOG.md', 'package.json', 'README.md', 'docs'],
-          dest: buildPath
-        }
+        { src: ['build/tools'], dest: buildPath },
+        { src: ['CHANGELOG.md', 'package.json', 'README.md', 'docs'], dest: buildPath }
       ],
       hook: 'writeBundle'
     })
   ]
-});
+};
 
 // Design System CSS generation
+const cssOutputDir = path.join(buildPath, 'design-system');
 
-/**
- * Common options for all CSS Rollup configs.
- */
-const commonCssOptions = createRollupOptions({
+/** The config to generate one `.css` file with all the deprecated styles. */
+export const cssDeprecatedRollupConfig: RollupOptions = {
+  input: glob('src/design-system-deprecated/**/*.scss'),
   output: {
-    dir: cssOutputDirectory,
+    dir: cssOutputDir,
     assetFileNames: '[name][extname]',
     preserveModules: true
-  }
-});
-
-/**
- * The config to generate one `.css` file with all the deprecated styles.
- */
-export const cssDeprecatedComponentsRollupConfig = createRollupOptions({
-  ...commonCssOptions,
-  input: glob('src/design-system-deprecated/**/*.scss'),
+  },
   plugins: [
     importTokens(),
     styles({ mode: ['extract', 'deprecated-full-theme.css'] }),
     omitJsFiles()
   ]
-});
-
-/**
- * Util function to create type-safe Rollup options.
- *
- * @param options - The Rollup options to create.
- * @returns Type-safe Rollup options.
- */
-export function createRollupOptions<T extends RollupOptions>(options: T): T {
-  return options;
-}
+};
diff --git a/packages/x-components/build/tools/inject-css.js b/packages/x-components/build/tools/inject-css.js
new file mode 100644
index 0000000000..5de49db0ce
--- /dev/null
+++ b/packages/x-components/build/tools/inject-css.js
@@ -0,0 +1,13 @@
+/**
+ * Simple CSS injector to append styles to the head.
+ * This injector can be overwritten at build time.
+ *
+ * @params css - CSS code.
+ */
+function injectCss(css) {
+  const el = document.createElement('style');
+  el.textContent = css;
+  document.head.appendChild(el);
+}
+
+export default injectCss;
diff --git a/packages/x-components/cypress.config.ts b/packages/x-components/cypress.config.ts
index 03daafc26b..afb2975fd1 100644
--- a/packages/x-components/cypress.config.ts
+++ b/packages/x-components/cypress.config.ts
@@ -1,6 +1,7 @@
+import { defineConfig } from 'cypress';
+import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
 import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
 import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
-import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
@@ -9,34 +10,37 @@ export default defineConfig({
     requestTimeout: 7000,
     viewportHeight: 1080,
     viewportWidth: 1920,
-    screenshotOnRunFailure: false,
-    video: false,
+    specPattern: 'tests/e2e/**/*.feature',
     supportFile: 'tests/support/index.ts',
     fixturesFolder: 'tests/e2e/fixtures',
     screenshotsFolder: 'tests/e2e/screenshots',
+    downloadsFolder: 'tests/e2e/downloads',
+    experimentalRunAllSpecs: true,
+    screenshotOnRunFailure: false,
+    video: false,
     retries: {
       openMode: 0,
       runMode: 1
     },
+    // https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/quick-start.md
     async setupNodeEvents(on, config) {
+      // This is required for the preprocessor to be able to generate JSON reports after each run, and more.
       await addCucumberPreprocessorPlugin(on, config);
-      on(
-        'file:preprocessor',
-        require('@bahmutov/cypress-esbuild-preprocessor')({
-          plugins: [createEsbuildPlugin(config)]
-        })
-      );
+
+      on('file:preprocessor', createBundler({ plugins: [createEsbuildPlugin(config)] }));
+
+      // Make sure to return the config object as it might have been modified by the plugin.
       return config;
-    },
-    specPattern: 'tests/e2e/**/*.feature',
-    experimentalRunAllSpecs: true
+    }
   },
   component: {
     defaultCommandTimeout: 7000,
-    experimentalSingleTabRunMode: true,
+    viewportHeight: 1080,
+    viewportWidth: 1920,
     specPattern: 'tests/unit/**/*.spec.ts',
     supportFile: 'tests/support/index.ts',
     indexHtmlFile: 'tests/support/component-index.html',
+    experimentalSingleTabRunMode: true,
     screenshotOnRunFailure: false,
     video: false,
     retries: {
diff --git a/packages/x-components/jest.config.js b/packages/x-components/jest.config.js
index ceb4f32f37..fecc057095 100644
--- a/packages/x-components/jest.config.js
+++ b/packages/x-components/jest.config.js
@@ -1,9 +1,12 @@
 module.exports = {
   preset: 'ts-jest',
   transform: {
-    '^.+\\.vue$': '@vue/vue2-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
     '^.+\\.scss$': 'jest-scss-transform'
   },
+  moduleNameMapper: {
+    'vue-global-events': '<rootDir>/node_modules/vue-global-events/dist/index.cjs'
+  },
   testMatch: ['<rootDir>/src/**/*.spec.ts'],
   setupFilesAfterEnv: ['./jest.setup.ts'],
   // jest 27 changes the default environment to node instead of jsdom
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 576e8d6759..c7c967bbff 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.81",
+  "version": "6.0.0-alpha.3",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -30,8 +30,8 @@
     "./tests/**/*",
     "**/*.scss",
     "**/*.scss.js",
-    "**/*vue[0-9].js",
     "**/*.css",
+    "**/*vue[0-9].js",
     "**/*.vue"
   ],
   "repository": {
@@ -54,9 +54,9 @@
     "lint": "eslint . --ext .ts,.vue",
     "test:unit": "jest --silent",
     "test:unit-jest": "jest",
-    "test:unit-cypress": "cypress run --component --browser chrome",
     "test:unit-coverage": "jest --coverage",
     "test:unit-watch": "jest --watch",
+    "test:unit-cypress": "cypress run --component --browser chrome",
     "test:e2e": "start-server-and-test preview http://localhost:8080 cypress:open",
     "test:e2e:firefox": "start-server-and-test serve http://localhost:8080 cypress:open:firefox",
     "test:e2e:ci": "start-server-and-test serve http://localhost:8080 cypress:run:ci",
@@ -79,35 +79,30 @@
     "@empathyco/x-utils": "^1.0.3-alpha.1",
     "@vue/devtools-api": "~6.5.0",
     "@vueuse/core": "~10.7.1",
-    "js-md5": "^0.8.3",
+    "js-md5": "~0.8.3",
     "rxjs": "~7.8.0",
     "tslib": "~2.6.0",
-    "vue-class-component": "~7.2.6",
-    "vue-global-events": "~1.2.1",
-    "vue-property-decorator": "~8.5.0",
-    "vue-runtime-helpers": "~1.1.2"
+    "vue-global-events": "~3.0.1"
   },
   "peerDependencies": {
-    "vue": "~2.7.0",
-    "vuex": "^3.0.0"
+    "vue": "~3.4.31",
+    "vuex": "4.0.2"
   },
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "~20.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
-    "@cypress/vue2": "~2.0.1",
-    "@empathyco/x-tailwindcss": "^1.2.0-alpha.5",
+    "@empathyco/x-tailwindcss": "^1.2.0-alpha.6",
     "@microsoft/api-documenter": "~7.23.0",
     "@microsoft/api-extractor": "~7.39.0",
-    "@rollup/plugin-commonjs": "~25.0.7",
     "@testing-library/jest-dom": "~5.17.0",
     "@types/autoprefixer": "~10.2.0",
-    "@types/glob": "^8.0.1",
+    "@types/glob": "~8.0.1",
     "@types/jest": "~27.5.0",
     "@types/node": "~18.19.0",
     "@types/testing-library__jest-dom": "~5.14.5",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "@vue/test-utils": "~1.0.3",
-    "@vue/vue2-jest": "~27.0.0-alpha.3",
+    "@vitejs/plugin-vue": "~5.1.2",
+    "@vue/test-utils": "~2.4.6",
+    "@vue/vue3-jest": "~27.0.0",
     "autoprefixer": "~10.4.4",
     "convert-source-map": "~2.0.0",
     "cypress": "~13.6.0",
@@ -124,20 +119,19 @@
     "rollup-plugin-delete": "~2.0.0",
     "rollup-plugin-styles": "~4.0.0",
     "rollup-plugin-typescript2": "~0.36.0",
-    "rollup-plugin-vue": "~5.1.9",
+    "rollup-plugin-vue": "~6.0.0",
     "sass": "~1.70.0",
     "start-server-and-test": "~2.0.0",
     "tailwindcss": "~3.4.0",
     "ts-jest": "~27.1.0",
-    "ts-node": "~10.9.1",
+    "ts-node": "~10.9.2",
     "typescript": "~4.9.4",
-    "vite": "^4.5.0",
-    "vite-plugin-vue-inspector": "^4.0.0",
-    "vue": "~2.7.14",
-    "vue-docgen-cli": "~4.67.0",
-    "vue-router": "~3.6.5",
-    "vue-template-compiler": "~2.7.14",
-    "vuex": "~3.6.2"
+    "vite": "~4.5.0",
+    "vite-plugin-vue-inspector": "~5.1.2",
+    "vue": "~3.4.31",
+    "vue-docgen-cli": "~4.79.0",
+    "vue-router": "~4.4.0",
+    "vuex": "4.0.2"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/x-components/src/App.vue b/packages/x-components/src/App.vue
index ac2acc6692..38a0ad4873 100644
--- a/packages/x-components/src/App.vue
+++ b/packages/x-components/src/App.vue
@@ -10,11 +10,7 @@
   </div>
 </template>
 
-<script>
-  export default {};
-</script>
-
-<style lang="scss">
+<style lang="css">
   html,
   body {
     margin: 0;
@@ -22,7 +18,7 @@
   }
 </style>
 
-<style scoped lang="scss">
+<style lang="css" scoped>
   .app {
     min-height: 100%;
     display: flex;
diff --git a/packages/x-components/src/__tests__/utils.ts b/packages/x-components/src/__tests__/utils.ts
index 5e6fdd5152..4eceba7d5c 100644
--- a/packages/x-components/src/__tests__/utils.ts
+++ b/packages/x-components/src/__tests__/utils.ts
@@ -1,7 +1,6 @@
 import { deepMerge } from '@empathyco/x-deep-merge';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
+import { VueWrapper } from '@vue/test-utils';
 import { Store } from 'vuex';
 import {
   XComponentsAdapter,
@@ -69,7 +68,7 @@ export function getDataTestSelector(dataTest: string): string {
  *
  * @returns The wrappers matching the searched test data id.
  */
-export function findTestDataById(wrapper: Wrapper<Vue>, testDataId: string): WrapperArray<Vue> {
+export function findTestDataById(wrapper: VueWrapper, testDataId: string) {
   return wrapper.findAll(getDataTestSelector(testDataId));
 }
 
@@ -182,29 +181,26 @@ function mergeStates<State extends Dictionary>(
 }
 
 /**
- * Makes a clean installation of the {@link XPlugin} into the passed Vue object.
- * This also resets the bus, and all the hardcoded dependencies of the XPlugin.
+ * Creates a new instance of the {@link XPlugin}. This also resets the bus.
  *
  * @param options - The options for installing the {@link XPlugin}. The
  * {@link XComponentsAdapterDummy}  is added by default.
- * @param localVue - A clone of the Vue constructor to isolate tests.
  * @param bus - The event bus to use.
  * If not provided, one will be created.
- * @returns An array containing the `xPlugin` singleton and the `localVue` and objects.
+ * @returns An array containing the `xPlugin` singleton and an object with
+ * the plugin install options.
  */
 export function installNewXPlugin(
   options: Partial<XPluginOptions> = {},
-  localVue: typeof Vue = createLocalVue(),
   bus = new XDummyBus()
-): [XPlugin, typeof Vue] {
+): [XPlugin, XPluginOptions] {
   XPlugin.resetInstance();
   const xPlugin = new XPlugin(bus);
   const installOptions: XPluginOptions = {
     adapter: XComponentsAdapterDummy,
     ...options
   };
-  localVue.use(xPlugin, installOptions);
-  return [xPlugin, localVue];
+  return [xPlugin, installOptions];
 }
 
 /**
diff --git a/packages/x-components/src/components/__tests__/auto-progress-bar.spec.ts b/packages/x-components/src/components/__tests__/auto-progress-bar.spec.ts
index 0b0707c0aa..ab0e4dc660 100644
--- a/packages/x-components/src/components/__tests__/auto-progress-bar.spec.ts
+++ b/packages/x-components/src/components/__tests__/auto-progress-bar.spec.ts
@@ -1,74 +1,41 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { getDataTestSelector } from '../../__tests__/utils';
 import AutoProgressBar from '../auto-progress-bar.vue';
 
-function renderAutoProgressBar({
-  template = '<AutoProgressBar :durationInSeconds="durationInSeconds" :isLoading="isLoading"/>',
-  durationInSeconds = 1,
-  isLoading = true
-}: RenderBaseAutoProgressBarOptions = {}): RenderAutoProgressBarAPI {
-  const wrapper = mount(
-    {
-      components: { AutoProgressBar },
-      template
-    },
-    {
-      data() {
-        return {
-          durationInSeconds,
-          isLoading
-        };
-      }
-    }
-  );
+function render({ durationInSeconds = 1, isLoading = true } = {}) {
+  const wrapper = mount({
+    components: { AutoProgressBar },
+    data: () => ({ durationInSeconds, isLoading }),
+    template: '<AutoProgressBar :durationInSeconds="durationInSeconds" :isLoading="isLoading"/>'
+  });
 
   return {
-    wrapper
+    wrapper,
+    getProgressBarEl: () => wrapper.find(getDataTestSelector('progress-bar')),
+    getProgressBarLineEl: () => wrapper.find(getDataTestSelector('progress-bar-line'))
   };
 }
 
 describe('testing AutoProgressBar component', () => {
   it('renders a progress bar component', () => {
-    const { wrapper } = renderAutoProgressBar();
+    const { getProgressBarEl } = render();
 
-    expect(wrapper.find(getDataTestSelector('progress-bar')).exists()).toBe(true);
+    expect(getProgressBarEl().exists()).toBe(true);
   });
 
   it("doesn't render a progress bar component when is not loading", async () => {
-    const { wrapper } = renderAutoProgressBar();
+    const { wrapper, getProgressBarEl } = render();
 
-    expect(wrapper.find(getDataTestSelector('progress-bar')).exists()).toBe(true);
+    expect(getProgressBarEl().exists()).toBe(true);
 
     await wrapper.setData({ isLoading: false });
 
-    expect(wrapper.find(getDataTestSelector('progress-bar')).exists()).toBe(false);
+    expect(getProgressBarEl().exists()).toBe(false);
   });
 
   it('render a progress bar component with an animation', () => {
-    const { wrapper } = renderAutoProgressBar({ durationInSeconds: 2.5 });
+    const { getProgressBarLineEl } = render({ durationInSeconds: 2.5 });
 
-    expect(wrapper.find(getDataTestSelector('progress-bar-line')).attributes().style).toBe(
-      'animation-duration: 2.5s;'
-    );
+    expect(getProgressBarLineEl().attributes().style).toBe('animation-duration: 2.5s;');
   });
 });
-
-/**
- * Options to configure how the progress bar component should be rendered.
- */
-interface RenderBaseAutoProgressBarOptions {
-  /** The template to render.*/
-  template?: string;
-  /** The duration in seconds of the animation. */
-  durationInSeconds?: number;
-  /** A flag indicating if the progress bar is loading. */
-  isLoading?: boolean;
-}
-
-/**
- * Options to configure how the progress bar component should be rendered.
- */
-interface RenderAutoProgressBarAPI {
-  /** The wrapper for the progress bar component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/__tests__/base-dropdown.spec.ts b/packages/x-components/src/components/__tests__/base-dropdown.spec.ts
index 4c59fd563c..264ff6831f 100644
--- a/packages/x-components/src/components/__tests__/base-dropdown.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-dropdown.spec.ts
@@ -25,7 +25,7 @@ function renderDropdown({
       data: () => ({ value: initialValue })
     },
     {
-      propsData: { items }
+      props: { items }
     }
   );
 
@@ -42,7 +42,7 @@ function renderDropdown({
   }
 
   const clickToggleButton = () => getDropdownToggle().trigger('click');
-  const clickNthItem = (nth: number) => getListItems().at(nth).trigger('click');
+  const clickNthItem = (nth: number) => getListItems().at(nth)?.trigger('click');
   const pressKeyFromToggle = (key: Key) => getDropdownToggle().trigger(`keydown`, { key });
   const pressKeyFromFocusedItem = (key: Key) => getHighlightedItem().trigger(`keydown`, { key });
 
@@ -71,7 +71,7 @@ function renderDropdown({
   }
 
   function isListVisible() {
-    const element = dropdown.find(getDataTestSelector('dropdown-list')).element;
+    const element = dropdown.find(getDataTestSelector('dropdown-list')).element as HTMLElement;
     return element.style.display !== 'none';
   }
 
@@ -116,7 +116,7 @@ describe('testing Dropdown component', () => {
     const listItemWrappers = getListItems();
     expect(listItemWrappers).toHaveLength(4);
     items.forEach((item, index) => {
-      expect(listItemWrappers.at(index).text()).toBe(typeof item === 'string' ? item : item.id);
+      expect(listItemWrappers.at(index)?.text()).toBe(typeof item === 'string' ? item : item.id);
     });
   });
 
@@ -143,8 +143,8 @@ describe('testing Dropdown component', () => {
     const listItemWrappers = getListItems();
     expect(getDropdownToggle().text()).toBe('select something');
     expect(listItemWrappers.length).toBeGreaterThan(0);
-    expect(getHighlightedItem().text()).toBe(listItemWrappers.at(0).text());
-    expect(getSelectedItem().element).toBeUndefined();
+    expect(getHighlightedItem().text()).toBe(listItemWrappers.at(0)?.text());
+    expect(getSelectedItem().exists()).toBeFalsy();
   });
 
   it('allows to customize the toggle button', async () => {
@@ -177,7 +177,7 @@ describe('testing Dropdown component', () => {
       await pressKeyFromToggle('ArrowDown');
 
       const selectedElement = getListItems().at(selectedIndex);
-      expect(getHighlightedItem().text()).toBe(selectedElement.text());
+      expect(getHighlightedItem().text()).toBe(selectedElement?.text());
     });
 
     it('opens and focuses the selected element when the button has focus and arrow UP key is pressed', async () => {
@@ -189,7 +189,7 @@ describe('testing Dropdown component', () => {
       await pressKeyFromToggle('ArrowUp');
 
       const selectedElement = getListItems().at(selectedIndex);
-      expect(getHighlightedItem().text()).toBe(selectedElement.text());
+      expect(getHighlightedItem().text()).toBe(selectedElement?.text());
     });
   });
 
@@ -291,10 +291,10 @@ describe('testing Dropdown component', () => {
       const listItems = getListItems();
 
       await pressKeyFromFocusedItem('End');
-      expect(getHighlightedItem().text()).toBe(listItems.at(-1).text());
+      expect(getHighlightedItem().text()).toBe(listItems.at(-1)?.text());
 
       await pressKeyFromFocusedItem('Home');
-      expect(getHighlightedItem().text()).toBe(listItems.at(0).text());
+      expect(getHighlightedItem().text()).toBe(listItems.at(0)?.text());
     });
 
     it('focuses the first element starting to search from the focused one which its text starts with the typed characters', async () => {
diff --git a/packages/x-components/src/components/__tests__/base-event-button.spec.ts b/packages/x-components/src/components/__tests__/base-event-button.spec.ts
index 35e0a22757..931dbdffa2 100644
--- a/packages/x-components/src/components/__tests__/base-event-button.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-event-button.spec.ts
@@ -1,25 +1,18 @@
-import { mount } from '@vue/test-utils';
+import { ComponentMountingOptions, mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { XPlugin } from '../../plugins';
-import { WireMetadata } from '../../wiring/wiring.types';
+import { WireMetadata, XEventsTypes } from '../../wiring';
 import BaseEventButton from '../base-event-button.vue';
 
-function render() {
-  installNewXPlugin();
+const stubSlot = `<span class="test-msg">button text</span><i class="test-icon"></i>`;
 
-  const wrapper = mount(
-    {
-      template: `<BaseEventButton :events="events">
-        <span class="test-msg">button text</span>
-        <i class="test-icon"></i>
-      </BaseEventButton>`,
-      components: { BaseEventButton },
-      props: ['events']
-    },
-    {
-      propsData: { events: {} }
-    }
-  );
+function render(options: ComponentMountingOptions<typeof BaseEventButton> = {}) {
+  const wrapper = mount(BaseEventButton, {
+    props: { events: {} },
+    slots: { default: stubSlot },
+    global: { plugins: [installNewXPlugin()] },
+    ...options
+  });
 
   return {
     wrapper,
@@ -44,7 +37,9 @@ describe('testing Base Event Button Component', () => {
   it('emits an event with a payload', async () => {
     const { wrapper, emitSpy, expectedMetadata } = render();
 
-    await wrapper.setProps({ events: { testEvent: 'test-payload' } });
+    await wrapper.setProps({
+      events: { testEvent: 'test-payload' } as Partial<XEventsTypes>
+    } as any);
     await wrapper.trigger('click');
 
     expect(emitSpy).toHaveBeenCalledTimes(1);
@@ -54,7 +49,7 @@ describe('testing Base Event Button Component', () => {
   it('emits an event with no payload', async () => {
     const { wrapper, emitSpy, expectedMetadata } = render();
 
-    await wrapper.setProps({ events: { testEvent: undefined } });
+    await wrapper.setProps({ events: { testEvent: undefined } as Partial<XEventsTypes> } as any);
     await wrapper.trigger('click');
 
     expect(emitSpy).toHaveBeenCalledTimes(1);
@@ -68,8 +63,8 @@ describe('testing Base Event Button Component', () => {
       testEvent1: 'test-payload-1',
       testEvent2: 'test-payload-2',
       testEvent3: undefined
-    };
-    await wrapper.setProps({ events });
+    } as Partial<XEventsTypes>;
+    await wrapper.setProps({ events } as any);
     await wrapper.trigger('click');
 
     expect(emitSpy).toHaveBeenCalledTimes(3);
diff --git a/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts b/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts
index 8f10cde4b1..466b9a7011 100644
--- a/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts
@@ -1,26 +1,19 @@
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
 import { SearchInput } from '../../x-modules/search-box/components/index';
 import { installNewXPlugin } from '../../__tests__/utils';
 import BaseKeyboardNavigation from '../base-keyboard-navigation.vue';
 import { DirectionalFocusNavigationService } from '../../services/directional-focus-navigation.service';
+import { XPlugin } from '../../plugins/x-plugin';
 
 describe('testing keyboard navigation component', () => {
-  let localVue: typeof Vue;
-
-  beforeEach(() => {
-    [, localVue] = installNewXPlugin();
-  });
-
   it('takes control of the navigation when a defined condition is triggered', () => {
     const navigateToSpy = jest.spyOn(
       DirectionalFocusNavigationService.prototype as any,
       'navigateTo'
     );
-    const searchInput = mount(SearchInput, { localVue });
     mount(BaseKeyboardNavigation, {
-      localVue,
-      propsData: {
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         navigationHijacker: [
           {
             xEvent: 'UserPressedArrowKey',
@@ -30,6 +23,8 @@ describe('testing keyboard navigation component', () => {
         ]
       }
     });
+
+    const searchInput = mount(SearchInput);
     searchInput.trigger('keydown', { key: 'ArrowUp' });
     expect(navigateToSpy).not.toHaveBeenCalled();
 
@@ -44,15 +39,14 @@ describe('testing keyboard navigation component', () => {
       .spyOn(DirectionalFocusNavigationService.prototype as any, 'navigateTo')
       .mockReturnValue(undefined);
     const keyboardNavigation = mount(BaseKeyboardNavigation, {
-      localVue,
-      propsData: {
-        takeNavigationControl: [],
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         eventsForDirectionLimit: {
           ArrowUp: 'UserReachedEmpathizeTop'
         }
       }
     });
-    keyboardNavigation.vm.$x.on('UserReachedEmpathizeTop').subscribe(listener);
+    XPlugin.bus.on('UserReachedEmpathizeTop').subscribe(listener);
     keyboardNavigation.trigger('keydown', { key: 'ArrowUp' });
 
     expect(listener).toHaveBeenCalled();
diff --git a/packages/x-components/src/components/__tests__/base-rating.spec.ts b/packages/x-components/src/components/__tests__/base-rating.spec.ts
index 3e8858980d..44a8b15c3c 100644
--- a/packages/x-components/src/components/__tests__/base-rating.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-rating.spec.ts
@@ -1,4 +1,4 @@
-import { mount, WrapperArray } from '@vue/test-utils';
+import { mount, DOMWrapper } from '@vue/test-utils';
 import { getDataTestSelector } from '../../__tests__/utils';
 import BaseRating from '../base-rating.vue';
 
@@ -6,9 +6,9 @@ function renderBaseRating({ template }: RenderBaseRatingOptions): RenderBaseRati
   const wrapper = mount({ template }, { components: { BaseRating } });
 
   return {
-    getFilledIcons: (): WrapperArray<Vue> =>
+    getFilledIcons: (): DOMWrapper<Element>[] =>
       wrapper.find(getDataTestSelector('rating-filled')).findAll(':scope > *'),
-    getEmptyIcons: (): WrapperArray<Vue> =>
+    getEmptyIcons: (): DOMWrapper<Element>[] =>
       wrapper.find(getDataTestSelector('rating-empty')).findAll(':scope > *')
   };
 }
@@ -39,6 +39,6 @@ interface RenderBaseRatingOptions {
 }
 
 interface RenderBaseRatingApi {
-  getFilledIcons: () => WrapperArray<Vue>;
-  getEmptyIcons: () => WrapperArray<Vue>;
+  getFilledIcons: () => DOMWrapper<Element>[];
+  getEmptyIcons: () => DOMWrapper<Element>[];
 }
diff --git a/packages/x-components/src/components/__tests__/base-switch.spec.ts b/packages/x-components/src/components/__tests__/base-switch.spec.ts
index 99369a9465..14e78012eb 100644
--- a/packages/x-components/src/components/__tests__/base-switch.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-switch.spec.ts
@@ -1,4 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import BaseSwitch from '../base-switch.vue';
 
 function renderBaseSwitch({ template, value }: RenderBaseSwitchOptions): RenderBaseSwitchApi {
@@ -22,12 +22,12 @@ function renderBaseSwitch({ template, value }: RenderBaseSwitchOptions): RenderB
 describe('testing Switch component', () => {
   it('allows toggling the state', async () => {
     const { wrapper } = renderBaseSwitch({
-      template: `<BaseSwitch :value="value" @change="value = !value" />`,
+      template: `<BaseSwitch :modelValue="value" @update:modelValue="value = !value" />`,
       value: false
     });
 
     expect(wrapper.attributes('role')).toBe('switch');
-    expect(wrapper.attributes('aria-checked')).toBe('false');
+    expect(wrapper.attributes('aria-checked')).toBeFalsy();
     expect(wrapper.classes('x-switch--is-selected')).toBe(false);
     expect(wrapper.classes('x-selected')).toBe(false);
 
@@ -43,7 +43,7 @@ describe('testing Switch component', () => {
       value: false
     });
     expect(wrapper.attributes('role')).toBe('switch');
-    expect(wrapper.attributes('aria-checked')).toBe('false');
+    expect(wrapper.attributes('aria-checked')).toBeFalsy();
     expect(wrapper.classes('x-switch--is-selected')).toBe(false);
     expect(wrapper.classes('x-selected')).toBe(false);
 
@@ -69,5 +69,5 @@ interface RenderBaseSwitchApi {
   /**
    * The wrapper testing component instance.
    */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts b/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
index 8f4df9bb7d..2449d513c6 100644
--- a/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
@@ -1,10 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getSearchResponseStub } from '../../__stubs__/search-response-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../__tests__/utils';
-import { ListItem } from '../../utils/types';
 import BaseVariableColumnGrid from '../base-variable-column-grid.vue';
 import { XPlugin } from '../../plugins/x-plugin';
+import { XDummyBus } from '../../__tests__/bus.dummy';
 
 const searchResponse = getSearchResponseStub();
 const itemsStub = [
@@ -13,16 +13,16 @@ const itemsStub = [
   ...searchResponse.results
 ];
 
-function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
-  const [, localVue] = installNewXPlugin();
-  function mountComponent(): Wrapper<Vue> {
+const sharedBus = new XDummyBus();
+
+function renderComponent({ items = itemsStub } = {}) {
+  function mountComponent() {
     return mount(BaseVariableColumnGrid, {
-      props: ['items'],
-      propsData: {
+      global: { plugins: [installNewXPlugin({}, sharedBus)] },
+      props: {
         items
       },
-      localVue,
-      scopedSlots: {
+      slots: {
         default: '<span data-test="default-slot" slot-scope="{ item }">{{ item.id }}</span>',
         result: '<span data-test="result-slot" slot-scope="{ item }">{{ item.name }}</span>'
       }
@@ -34,12 +34,9 @@ function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
   return {
     wrapper: wrapper,
     mountComponent,
-    hasColumns(columns: number): boolean {
-      return wrapper.classes(`x-base-grid--cols-${columns}`);
-    },
-    isScopedSlotOverridden(selector): boolean {
-      return wrapper.find(getDataTestSelector(selector)).exists();
-    }
+    hasColumns: (columns: number) => wrapper.classes(`x-base-grid--cols-${columns}`),
+    isScopedSlotOverridden: (selector: string) =>
+      wrapper.find(getDataTestSelector(selector)).exists()
   };
 }
 
@@ -70,22 +67,9 @@ describe('testing BaseVariableColumnGrid component', () => {
     expect(hasColumns(6)).toBe(true);
 
     const wrapper2 = mountComponent();
+
+    await nextTick();
+
     expect(wrapper2.classes('x-base-grid--cols-6')).toBe(true);
   });
 });
-
-interface RenderOptions {
-  /** The array of items to render in the grid. */
-  items?: ListItem[];
-}
-
-interface RenderAPI {
-  /** The grid's wrapper. */
-  wrapper: Wrapper<Vue>;
-  /** Mounts the grid component. */
-  mountComponent: () => Wrapper<Vue>;
-  /** Checks if the grid has a certain number of columns. */
-  hasColumns: (columns: number) => boolean;
-  /** Check if a scoped slot is overridden. */
-  isScopedSlotOverridden: (selector: string) => boolean;
-}
diff --git a/packages/x-components/src/components/__tests__/display-emitter.spec.ts b/packages/x-components/src/components/__tests__/display-emitter.spec.ts
index 0a436d073d..d94f412ac8 100644
--- a/packages/x-components/src/components/__tests__/display-emitter.spec.ts
+++ b/packages/x-components/src/components/__tests__/display-emitter.spec.ts
@@ -24,7 +24,8 @@ function render({
   });
 
   return {
-    wrapper: wrapper.findComponent(DisplayEmitter),
+    wrapper,
+    displayEmiter: wrapper.findComponent(DisplayEmitter),
     element: wrapper.find(getDataTestSelector('child')).element,
     payload,
     eventMetadata
@@ -38,9 +39,9 @@ describe('testing DisplayEmitter component', () => {
   });
 
   it('renders everything passed to its default slot', () => {
-    const { wrapper } = render();
+    const { displayEmiter } = render();
 
-    expect(wrapper.find(getDataTestSelector('child')).exists()).toBeTruthy();
+    expect(displayEmiter.find(getDataTestSelector('child')).exists()).toBeTruthy();
   });
 
   it('executes `useEmitDisplayEvent` composable underneath', () => {
@@ -70,7 +71,7 @@ describe('testing DisplayEmitter component', () => {
   it('removes the watcher on unmount', async () => {
     const { wrapper } = render();
 
-    wrapper.destroy();
+    wrapper.unmount();
     await nextTick();
 
     expect(unwatchDisplaySpy).toHaveBeenCalled();
diff --git a/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts b/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts
deleted file mode 100644
index dd7011d226..0000000000
--- a/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Vue from 'vue';
-import { mount, Wrapper } from '@vue/test-utils';
-import { dynamicPropsMixin } from '../dynamic-props.mixin';
-
-const renderComponent = ({ props = ['list', 'button'] }: ComponentOptions = {}): ComponentAPI => {
-  const wrapper = mount({
-    mixins: [dynamicPropsMixin(props)],
-    render: h => h(),
-    props: ['data']
-  });
-  return { wrapper };
-};
-
-describe('dynamicPropsMixin', () => {
-  it('expects to have the defined props from the mixin', () => {
-    const { wrapper } = renderComponent();
-    const props = Object.keys(wrapper.props());
-    expect(props).toEqual(['list', 'button', 'data']);
-  });
-});
-
-/**
- * The options for the `renderComponent` function.
- */
-interface ComponentOptions {
-  props?: string[];
-}
-
-/**
- * Test API for the component.
- */
-interface ComponentAPI {
-  /** The wrapper for the component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/__tests__/global-x-bus.spec.ts b/packages/x-components/src/components/__tests__/global-x-bus.spec.ts
index 79ddbf4652..df08e641f4 100644
--- a/packages/x-components/src/components/__tests__/global-x-bus.spec.ts
+++ b/packages/x-components/src/components/__tests__/global-x-bus.spec.ts
@@ -4,10 +4,11 @@ import { XPlugin } from '../../plugins/index';
 import GlobalXBus from '../global-x-bus.vue';
 
 function renderGlobalXBus({ listeners = {} } = {}) {
-  installNewXPlugin();
-
   return {
-    wrapper: mount(GlobalXBus, { listeners })
+    wrapper: mount(GlobalXBus, {
+      props: { listeners },
+      global: { plugins: [installNewXPlugin()] }
+    })
   } as const;
 }
 
@@ -41,7 +42,7 @@ describe('testing GlobalXBus component', () => {
     await XPlugin.bus.emit('UserClickedColumnPicker');
     expect(clickedColumnPickerCallback).toHaveBeenCalledTimes(1);
 
-    wrapper.destroy();
+    wrapper.unmount();
 
     await XPlugin.bus.emit('UserClickedColumnPicker');
     expect(clickedColumnPickerCallback).toHaveBeenCalledTimes(1);
diff --git a/packages/x-components/src/components/__tests__/highlight.spec.ts b/packages/x-components/src/components/__tests__/highlight.spec.ts
index 43fee3bd02..f96c12cf72 100644
--- a/packages/x-components/src/components/__tests__/highlight.spec.ts
+++ b/packages/x-components/src/components/__tests__/highlight.spec.ts
@@ -1,47 +1,31 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Highlight from '../highlight.vue';
 import { getDataTestSelector } from '../../__tests__/utils';
 
 function renderHighlight({
-  template = '<Highlight v-bind="$attrs"/>',
-  text,
-  highlight,
-  noMatchClass,
-  matchingPartClass,
-  matchClass
-}: RenderHighlightOptions): RenderHighlightAPI {
-  const wrapper = mount(
-    {
-      inheritAttrs: false,
-      components: {
-        Highlight
-      },
-      template
+  slots = {},
+  text = '',
+  highlight = '',
+  noMatchClass = '',
+  matchingPartClass = '',
+  matchClass = ''
+} = {}) {
+  const wrapper = mount(Highlight, {
+    props: {
+      text,
+      highlight,
+      noMatchClass,
+      matchingPartClass,
+      matchClass
     },
-    {
-      propsData: {
-        text,
-        highlight,
-        noMatchClass,
-        matchingPartClass,
-        matchClass
-      }
-    }
-  );
+    slots: { ...slots }
+  });
   return {
     wrapper,
-    getStartPart() {
-      return wrapper.find(getDataTestSelector('highlight-start'));
-    },
-    getMatchingPart() {
-      return wrapper.find(getDataTestSelector('matching-part'));
-    },
-    getEndPart() {
-      return wrapper.find(getDataTestSelector('highlight-end'));
-    },
-    async setHighlight(highlight) {
-      return await wrapper.setProps({ highlight });
-    }
+    getStartPart: () => wrapper.find(getDataTestSelector('highlight-start')),
+    getMatchingPart: () => wrapper.find(getDataTestSelector('matching-part')),
+    getEndPart: () => wrapper.find(getDataTestSelector('highlight-end')),
+    setHighlight: (highlight: string) => wrapper.setProps({ highlight } as any)
   };
 }
 
@@ -119,6 +103,7 @@ describe('testing Highlight component', () => {
       matchClass: 'custom-match-class',
       matchingPartClass: 'custom-matching-part-class'
     });
+
     expect(wrapper.classes('custom-match-class')).toBe(true);
     expect(getMatchingPart().classes('custom-matching-part-class')).toBe(true);
   });
@@ -133,14 +118,13 @@ describe('testing Highlight component', () => {
   });
 
   it('allows customising the HTML', async () => {
+    const customHtml = `
+        <span v-if="hasMatch" class="match-custom-layout">
+          <strong>{{ start }}</strong>{{ match }}<strong>{{ end }}</strong>
+        </span>
+        <span v-else class="no-match-custom">{{ text }}</span>`;
     const { wrapper, setHighlight } = renderHighlight({
-      template: `
-        <Highlight v-bind="$attrs" #default="{ hasMatch, start, match, end, text }">
-          <span v-if="hasMatch" class="match-custom-layout">
-            <strong>{{ start }}</strong>{{ match }}<strong>{{ end }}</strong>
-          </span>
-          <span v-else class="no-match-custom">{{ text }}</span>
-        </Highlight>`,
+      slots: { default: customHtml },
       text: 'churrasco',
       highlight: 'chur'
     });
@@ -154,31 +138,3 @@ describe('testing Highlight component', () => {
     );
   });
 });
-
-interface RenderHighlightOptions {
-  /** The template to render. */
-  template?: string;
-  /** The text to be highlighted. */
-  text: string;
-  /** The part of the text to highlight. */
-  highlight: string;
-  /** Class to add to the root node when the given text doesn't contain the part to highlight. */
-  noMatchClass?: string;
-  /** Class to add to the node wrapping the matching text. */
-  matchingPartClass?: string;
-  /** Class to add to the root node when the given text contains the part to highlight. */
-  matchClass?: string;
-}
-
-interface RenderHighlightAPI {
-  /** Testing wrapper component. */
-  wrapper: Wrapper<Vue>;
-  /** Only the start node wrapper. */
-  getStartPart: () => Wrapper<Vue>;
-  /** Only the matching node wrapper. */
-  getMatchingPart: () => Wrapper<Vue>;
-  /** Only the end node wrapper. */
-  getEndPart: () => Wrapper<Vue>;
-  /** Sets the part of the text to highlight. */
-  setHighlight: (highlight: string) => Promise<void>;
-}
diff --git a/packages/x-components/src/components/__tests__/items-list.spec.ts b/packages/x-components/src/components/__tests__/items-list.spec.ts
index c38d5ded80..abd7d5f3ff 100644
--- a/packages/x-components/src/components/__tests__/items-list.spec.ts
+++ b/packages/x-components/src/components/__tests__/items-list.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { ListItem } from '../../utils/types';
 import { getDataTestSelector } from '../../__tests__/utils';
 import { getBannersStub } from '../../__stubs__/banners-stubs.factory';
@@ -13,20 +12,13 @@ import { getPromotedsStub } from '../../__stubs__/promoteds-stubs.factory';
  * @param options - The options to render the component with.
  * @returns The API for testing the `BannersList` component.
  */
-function renderItemsList({
-  items = [],
-  scopedSlots
-}: RenderItemsListOptions = {}): RendersItemsListAPI {
+function renderItemsList({ items = [], slots }: RenderItemsListOptions = {}): RendersItemsListAPI {
   const wrapper = mount(ItemsList, {
-    propsData: {
-      items
-    },
-    scopedSlots
+    props: { items },
+    slots
   });
 
-  return {
-    wrapper
-  };
+  return { wrapper };
 }
 
 describe('testing ItemsList component', () => {
@@ -50,7 +42,7 @@ describe('testing ItemsList component', () => {
     const itemsWrapperArray = wrapper.findAll('.x-items-list__item');
     expect(itemsWrapperArray).toHaveLength(resultsStub.length);
     resultsStub.forEach((result, index: number) => {
-      expect(itemsWrapperArray.at(index).text()).toBe(result.id);
+      expect(itemsWrapperArray.at(index)?.text()).toBe(result.id);
     });
   });
 
@@ -74,7 +66,7 @@ describe('testing ItemsList component', () => {
 
   it('allows to customize each item using the slot', () => {
     const { wrapper } = renderItemsList({
-      scopedSlots: {
+      slots: {
         result: `<template #result="{ item }">Result: {{ item.name }}</template>`,
         banner: `<template #banner="{ item }">Banner: {{ item.id }}</template>`,
         promoted: `<template #promoted="{ item }">Promoted: {{ item.title }}</template>`
@@ -100,10 +92,10 @@ interface RenderItemsListOptions {
   /** Items to be passed to the component. */
   items?: ListItem[];
   /** Scoped slots to be passed to the mount function. */
-  scopedSlots?: Record<string, string>;
+  slots?: Record<string, string>;
 }
 
 interface RendersItemsListAPI {
   /** The `wrapper` wrapper component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/__tests__/location-provider.spec.ts b/packages/x-components/src/components/__tests__/location-provider.spec.ts
index 21acafb1f5..5e8fd75f3c 100644
--- a/packages/x-components/src/components/__tests__/location-provider.spec.ts
+++ b/packages/x-components/src/components/__tests__/location-provider.spec.ts
@@ -1,18 +1,13 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { Component, Inject } from 'vue-property-decorator';
+import { mount } from '@vue/test-utils';
+import { defineComponent, inject } from 'vue';
 import { FeatureLocation } from '../../types';
 import LocationProvider from '../location-provider.vue';
 
-@Component({
-  template: `
-    <button />
-  `
-})
-class Child extends Vue {
-  @Inject('location')
-  public location!: FeatureLocation;
-}
+const Child = defineComponent({
+  name: 'ChildItem',
+  setup: () => ({ injectedLocation: inject<FeatureLocation>('location') }),
+  template: `{{ injectedLocation }}`
+});
 
 /**
  * Renders the {@link LocationProvider} component, exposing a basic API for testing.
@@ -21,9 +16,7 @@ class Child extends Vue {
  *
  * @returns The API for testing the `LocationProvider` component.
  */
-function renderLocationProvider({
-  location
-}: RenderLocationProviderOptions): RenderLocationProviderAPI {
+function renderLocationProvider({ location = '' } = {}) {
   const wrapper = mount(
     {
       components: {
@@ -33,37 +26,22 @@ function renderLocationProvider({
       template: `
         <LocationProvider :location="location">
           <Child />
-        </LocationProvider>`,
-      props: ['location']
+        </LocationProvider>`
     },
     {
-      propsData: {
-        location
-      }
+      props: { location }
     }
   );
 
   return {
-    child: wrapper.findComponent<Child>(Child)
+    child: wrapper.findComponent(Child)
   };
 }
 
 describe('testing LocationProvider component', () => {
   it('provides a location to its child', () => {
-    const { child } = renderLocationProvider({
-      location: 'external'
-    });
+    const { child } = renderLocationProvider({ location: 'external' });
 
-    expect(child.vm.location).toBe('external');
+    expect(child.html()).toBe('external');
   });
 });
-
-interface RenderLocationProviderOptions {
-  /** The location to provide. */
-  location: FeatureLocation;
-}
-
-interface RenderLocationProviderAPI {
-  /** The wrapper for the child component inside the location provider. */
-  child: Wrapper<Child>;
-}
diff --git a/packages/x-components/src/components/__tests__/no-element.spec.ts b/packages/x-components/src/components/__tests__/no-element.spec.ts
deleted file mode 100644
index e9febd19d5..0000000000
--- a/packages/x-components/src/components/__tests__/no-element.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { getDataTestSelector } from '../../__tests__/utils';
-import { NoElement } from '../no-element';
-
-describe('testing no component', () => {
-  it('renders the first node passed in the default slot and bind the css classes', () => {
-    const wrapper = mount({
-      template: `
-          <NoElement class="test">
-            <div data-test="node">test</div>
-          </NoElement>`,
-      components: {
-        NoElement
-      }
-    });
-    expect(wrapper.find(getDataTestSelector('node')).element).toBeDefined();
-    expect(wrapper.find(getDataTestSelector('node')).classes()).toEqual(['test']);
-  });
-});
diff --git a/packages/x-components/src/components/__tests__/page-loader-button.spec.ts b/packages/x-components/src/components/__tests__/page-loader-button.spec.ts
index 5ee2816a60..5428d8ad45 100644
--- a/packages/x-components/src/components/__tests__/page-loader-button.spec.ts
+++ b/packages/x-components/src/components/__tests__/page-loader-button.spec.ts
@@ -1,26 +1,23 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { Result } from '@empathyco/x-types';
 import { getDataTestSelector, installNewXPlugin } from '../../__tests__/utils';
 import PageLoaderButton from '../page-loader-button.vue';
 import { getResultsStub } from '../../__stubs__/index';
-import { bus } from '../../plugins/index';
+import { XPlugin } from '../../plugins/index';
 
 function renderPageLoaderButton({
   query = 'dress',
   results = getResultsStub(48),
   totalResults = 100,
-  scopedSlots
+  slots
 }: RenderPageLoaderButtonOptions = {}): RenderPageLoaderButtonAPI {
-  const [, localVue] = installNewXPlugin();
-
-  const wrapper = mount(PageLoaderButton as ComponentOptions<Vue>, {
-    propsData: {
+  const wrapper = mount(PageLoaderButton, {
+    props: {
       buttonClasses: '',
       buttonEvents: {}
     },
-    localVue,
-    scopedSlots,
+    global: { plugins: [installNewXPlugin()] },
+    slots,
     data() {
       return {
         query,
@@ -32,7 +29,7 @@ function renderPageLoaderButton({
 
   return {
     wrapper,
-    emitSpy: jest.spyOn(bus, 'emit')
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit')
   };
 }
 
@@ -56,7 +53,7 @@ describe('testing PageLoaderButton component', () => {
 
   it('allows customizing its slots', () => {
     const { wrapper } = renderPageLoaderButton({
-      scopedSlots: {
+      slots: {
         textContent: `<p data-test="replaced-slot">Click to see more results</p>`,
         buttonContent: `<span>Load More</span>`
       }
@@ -78,9 +75,7 @@ describe('testing PageLoaderButton component', () => {
     expect(wrapper.find('.x-rounded-full').exists()).toBe(true);
   });
 
-  // TODO: Enable test when BaseEventButton component is migrated
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('emits the event UserReachedResultsListEnd when the button is clicked', () => {
+  it('emits the event UserReachedResultsListEnd when the button is clicked', () => {
     const { wrapper, emitSpy } = renderPageLoaderButton();
     const baseEventButton = wrapper.find(getDataTestSelector('load-content'));
 
@@ -95,9 +90,7 @@ describe('testing PageLoaderButton component', () => {
     });
   });
 
-  // TODO: Enable test when BaseEventButton component is migrated
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('emits an event passed via prop', async () => {
+  it('emits an event passed via prop', async () => {
     const { wrapper, emitSpy } = renderPageLoaderButton();
     const baseEventButton = wrapper.find(getDataTestSelector('load-content'));
 
@@ -134,7 +127,7 @@ interface RenderPageLoaderButtonOptions {
   /** The total number of results. */
   totalResults?: number;
   /** Scoped slots to be passed to the mount function. */
-  scopedSlots?: Record<string, string>;
+  slots?: Record<string, string>;
 }
 
 /**
@@ -142,7 +135,7 @@ interface RenderPageLoaderButtonOptions {
  */
 interface RenderPageLoaderButtonAPI {
   /** The wrapper for the page loader button component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /* A jest spy of the X emit method. */
   emitSpy: ReturnType<typeof jest.spyOn>;
 }
diff --git a/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts b/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts
index c84077d76c..0edca06fc5 100644
--- a/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts
+++ b/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts
@@ -1,19 +1,19 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { baseSnippetConfig } from '../../views/base-config';
-import { XEventListeners } from '../../x-installer/api/api.types';
 import SnippetCallbacks from '../snippet-callbacks.vue';
 import { bus } from '../../plugins/x-bus';
 import { dummyCreateEmitter } from '../../__tests__/bus.dummy';
 
 // Making bus not repeat subjects
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 jest.spyOn(bus, 'createEmitter' as any).mockImplementation(dummyCreateEmitter.bind(bus) as any);
 
-function renderSnippetCallbacks({
-  callbacks = {}
-}: RenderSnippetCallbacksOptions = {}): RenderSnippetCallbacksAPI {
+function renderSnippetCallbacks({ callbacks = {} } = {}) {
   const wrapper = mount(SnippetCallbacks, {
-    provide: {
-      snippetConfig: { ...baseSnippetConfig, callbacks }
+    global: {
+      provide: {
+        snippetConfig: { ...baseSnippetConfig, callbacks }
+      }
     }
   });
 
@@ -54,7 +54,7 @@ describe('testing SnippetCallbacks component', () => {
     expect(clickedColumnPickerCallback).toHaveBeenCalledWith(1, expect.any(Object));
 
     // Force unsubscribing
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('emits a SnippetCallbackExecuted event when a callback is executed', () => {
@@ -93,19 +93,3 @@ describe('testing SnippetCallbacks component', () => {
     });
   });
 });
-
-/**
- * Options to configure how the snippet callbacks component should be rendered.
- */
-interface RenderSnippetCallbacksOptions {
-  /** The callbacks value to be provided. */
-  callbacks?: XEventListeners;
-}
-
-/**
- * Tools to test how the snippet callbacks component behaves.
- */
-interface RenderSnippetCallbacksAPI {
-  /** The wrapper of the container element. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/__tests__/x-component-mixin.spec.ts b/packages/x-components/src/components/__tests__/x-component-mixin.spec.ts
deleted file mode 100644
index 18eae29abe..0000000000
--- a/packages/x-components/src/components/__tests__/x-component-mixin.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { RootXStoreState } from '../../store/store.types';
-import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { installNewXPlugin } from '../../__tests__/utils';
-import { xComponentMixin } from '../x-component.mixin';
-import { isXComponent } from '../x-component.utils';
-
-describe('testing XComponent Mixin', () => {
-  const xComponent: ComponentOptions<Vue> = {
-    mixins: [xComponentMixin(searchBoxXModule)],
-    render: h => h()
-  };
-  let xComponentWrapper: Wrapper<Vue>;
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store: Store<RootXStoreState> = new Store({});
-  installNewXPlugin({ store }, localVue);
-
-  beforeEach(() => {
-    xComponentWrapper = mount(xComponent, { localVue, store });
-  });
-
-  describe('testing XComponentMixin initializing a component as an XComponent', () => {
-    it('registers the x-module', () => {
-      expect(store.state.x.searchBox).toBeDefined();
-    });
-
-    it('flags components as x-components', () => {
-      const normalComponentWrapper = mount({
-        render: h => h()
-      });
-      expect(isXComponent(xComponentWrapper.vm)).toEqual(true);
-      expect(isXComponent(normalComponentWrapper.vm)).toEqual(false);
-    });
-  });
-});
diff --git a/packages/x-components/src/components/__tests__/x-component-utils.spec.ts b/packages/x-components/src/components/__tests__/x-component-utils.spec.ts
index 12dbf3553a..aae3a7d3a5 100644
--- a/packages/x-components/src/components/__tests__/x-component-utils.spec.ts
+++ b/packages/x-components/src/components/__tests__/x-component-utils.spec.ts
@@ -1,15 +1,13 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, h } from 'vue';
 import { XModuleName } from '../../x-modules/x-modules.types';
 import { getXComponentXModuleName, isXComponent, getRootXComponent } from '../x-component.utils';
 
 describe('testing the x-component utils', () => {
-  function renderComponent(xModule?: XModuleName): Wrapper<Vue> {
+  function renderComponent(xModule?: XModuleName): VueWrapper {
     return mount({
       xModule,
-      render(h) {
-        return h();
-      }
+      render: () => ''
     });
   }
 
@@ -48,15 +46,13 @@ describe('testing the x-component utils', () => {
     });
 
     it('returns the first root x component ancestor of a non x component', () => {
-      const nonXComponent = Vue.extend({
+      const nonXComponent = defineComponent({
         template: '<div>This is the child component</div>'
       });
 
       const ancestorXComponent = mount({
         xModule: 'searchBox',
-        render(h) {
-          return h(nonXComponent);
-        }
+        render: () => h(nonXComponent)
       });
 
       const nonXComponentVm = ancestorXComponent.findComponent(nonXComponent).vm;
diff --git a/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts b/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts
index 16f78d8752..edb88c5d53 100644
--- a/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import { createDirectionalAnimationFactory } from '../create-directional-animation-factory';
 
@@ -26,7 +25,7 @@ describe('testing animation abstract factory', () => {
       open(): void | Promise<void> {
         return wrapper.setProps({ open: true });
       },
-      getContentWrapper(): Wrapper<Vue> {
+      getContentWrapper(): DOMWrapper<Element> {
         return wrapper.find(getDataTestSelector('animation-content'));
       }
     };
@@ -43,5 +42,5 @@ describe('testing animation abstract factory', () => {
 
 interface RenderApi {
   open: () => void | Promise<void>;
-  getContentWrapper: () => Wrapper<Vue>;
+  getContentWrapper: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
new file mode 100644
index 0000000000..08285a229f
--- /dev/null
+++ b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import { ref, TransitionGroup } from 'vue';
+import StaggeredFadeAndSlide from '../staggered-fade-and-slide.vue';
+import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
+
+function render({ appear = true, tag = 'div', stagger = 25, disableAnimation = false } = {}) {
+  const wrapper = mount(StaggeredFadeAndSlide, {
+    props: { appear, tag, stagger },
+    global: {
+      provide: {
+        [DISABLE_ANIMATIONS_KEY as string]: ref(disableAnimation)
+      },
+      stubs: {
+        'transition-group': false
+      }
+    },
+    slots: {
+      default: `
+        <p key="1">Fist paragraph</p>
+        <p key="2">Second paragraph</p>
+        <p key="3">Third paragraph</p>
+      `
+    }
+  });
+
+  return {
+    wrapper,
+    transitionGroup: wrapper.findComponent(TransitionGroup)
+  };
+}
+
+describe('testing StaggeredFadeAndSlide component', () => {
+  beforeAll(jest.useFakeTimers);
+  afterEach(jest.clearAllTimers);
+
+  it('renders the TransitionGroup with correct props', () => {
+    const appear = false;
+    const tag = 'ul';
+
+    const { transitionGroup } = render({ appear, tag });
+
+    expect(transitionGroup.exists()).toBeTruthy();
+    expect(transitionGroup.props('appear')).toBe(appear);
+    expect(transitionGroup.props('tag')).toBe(tag);
+    expect(transitionGroup.props('name')).toBe('x-staggered-fade-and-slide');
+  });
+
+  it('disables the animation when required', () => {
+    const { transitionGroup } = render({ disableAnimation: true });
+
+    expect(transitionGroup.props('name')).toBe('__no-animation__');
+  });
+
+  it('renders the animation component with the expected tag wrapping all slotted elements', () => {
+    const { wrapper } = render();
+
+    expect(wrapper.find('div')).toBeTruthy();
+    expect(wrapper.findAll('p')).toHaveLength(3);
+  });
+
+  it('renders each element with the expected delay', () => {
+    const transitionDuration = 250;
+    const stagger = 75;
+    const { wrapper } = render({ stagger });
+    const elements = wrapper.findAll('p');
+
+    for (const [i, el] of elements.entries()) {
+      expect(el.element.style.transitionDelay).toBe(`${i * stagger}ms`);
+    }
+
+    // Wait for the first transition to finish
+    jest.advanceTimersByTime(transitionDuration);
+
+    expect(elements[0].element.style.transitionDelay).toBe('0ms');
+    expect(elements[1].element.style.transitionDelay).not.toBe('0ms');
+    expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
+
+    // Once the previous transition is finished wait for the stagger delay
+    jest.advanceTimersByTime(stagger);
+
+    expect(elements[1].element.style.transitionDelay).toBe('0ms');
+    expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
+
+    // Once the previous transition is finished wait for the stagger delay
+    jest.advanceTimersByTime(stagger);
+
+    for (const el of elements) {
+      expect(el.element.style.transitionDelay).toBe('0ms');
+    }
+  });
+});
diff --git a/packages/x-components/src/components/animations/__tests__/staggering-transition-group.spec.ts b/packages/x-components/src/components/animations/__tests__/staggering-transition-group.spec.ts
deleted file mode 100644
index 28b8ff9ed9..0000000000
--- a/packages/x-components/src/components/animations/__tests__/staggering-transition-group.spec.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import { getDataTestSelector } from '../../../__tests__/utils';
-import StaggeringTransitionGroup from '../staggering-transition-group.vue';
-
-describe('testing Staggering Transition Group component', () => {
-  const wrapper: ComponentOptions<Vue> = {
-    components: {
-      StaggeringTransitionGroup
-    },
-    template: `
-       <StaggeringTransitionGroup name="staggering-test" :appear="appear" :staggering="staggering">
-          <div v-for="index in children"
-               :key="index"
-               data-test="children">
-            Child {{ index }}
-          </div>
-       </StaggeringTransitionGroup>`,
-    props: {
-      children: Array,
-      appear: Boolean,
-      staggering: Number
-    }
-  };
-
-  function renderStaggeringTransitionGroup(
-    propsData: StaggeringTransitionGroupWrapper
-  ): StaggeringTransitionGroupAPI {
-    const component = mount(wrapper, {
-      propsData
-    });
-
-    return {
-      component,
-      getChildren() {
-        return component.findAll(getDataTestSelector('children'));
-      },
-      setChildren(children) {
-        component.setProps({ children });
-      }
-    };
-  }
-
-  it('applies enter classes when appear is set to true', () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren } = renderStaggeringTransitionGroup({
-      appear: true,
-      children: [1, 2, 3],
-      staggering
-    });
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach((child, index) => {
-      expect(child.classes()).toContain('staggering-test-enter-active');
-      expect(child.element.style.transitionDelay).toEqual(`${staggering * index}ms`);
-    });
-  });
-
-  it('applies enter classes when a new element enters.', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [],
-      staggering
-    });
-    setChildren([1, 2, 3]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach((child, index) => {
-      expect(child.classes()).toContain('staggering-test-enter-active');
-      expect(child.element.style.transitionDelay).toEqual(`${staggering * index}ms`);
-    });
-  });
-
-  it('applies move classes if child nodes change position', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [3],
-      staggering
-    });
-    const childrenToMove = getChildren().at(0);
-    fakeIncrementalMovement(childrenToMove.element);
-    setChildren([1, 2, 3]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-
-    childrenWrapper.wrappers.forEach((child, index) => {
-      if (index < 2) {
-        expect(child.classes()).toContain('staggering-test-enter-active');
-        expect(child.element.style.transitionDelay).toEqual(`${staggering * (index + 1)}ms`);
-      }
-    });
-    expect(childrenWrapper.at(2).classes()).toContain('staggering-test-move');
-  });
-
-  it('applies leave classes when a node leaves.', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [1, 2, 3],
-      staggering
-    });
-    setChildren([]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach((child, index) => {
-      expect(child.classes()).toContain('staggering-test-leave-active');
-      expect(child.element.style.transitionDelay).toEqual(`${staggering * index}ms`);
-    });
-  });
-
-  it('disables pointer-events when a node leaves.', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [1, 2, 3],
-      staggering
-    });
-    setChildren([]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach(child => {
-      expect(child.element.style.pointerEvents).toEqual('none');
-    });
-  });
-
-  it(
-    'applies enter classes when a new element enters and one element stay in ' +
-      'same position after doing a search',
-    async () => {
-      const staggering = 100;
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-        appear: true,
-        children: ['stay', 'move', 'leave0', 'leave1'],
-        staggering
-      });
-
-      // eslint-disable-next-line max-len
-      // Wait to `after` hooks to be executed. As there are 4 nodes, then after 4 times the staggering
-      // time they should have finished executing.
-      await waitFor(4 * staggering);
-
-      const childrenToMove = getChildren().at(1);
-      fakeIncrementalMovement(childrenToMove.element);
-      setChildren(['stay', 'enter0', 'move', 'enter1', 'enter2']);
-
-      await Vue.nextTick();
-      const childrenWrapper = getChildren();
-      expect(childrenWrapper).toHaveLength(5);
-      const [stay, enter0, move, enter1, enter2] = childrenWrapper.wrappers;
-      // Note that leave nodes can't be retrieved. That's why the transitionDelay starts at 200ms
-      // instead of 0ms.
-      expect(stay.element.style.transitionDelay).toEqual('');
-      expect(enter0.element.style.transitionDelay).toEqual(`${staggering * 3}ms`);
-      expect(move.element.style.transitionDelay).toEqual(`${staggering * 2}ms`);
-      expect(enter1.element.style.transitionDelay).toEqual(`${staggering * 4}ms`);
-      expect(enter2.element.style.transitionDelay).toEqual(`${staggering * 5}ms`);
-
-      expect(stay.classes()).toHaveLength(0);
-      expect(enter0.classes()).toContain('staggering-test-enter-active');
-      expect(move.classes()).toContain('staggering-test-move');
-      expect(enter1.classes()).toContain('staggering-test-enter-active');
-      expect(enter2.classes()).toContain('staggering-test-enter-active');
-    }
-  );
-});
-
-// For fake move position and enter in applyTranslation and get new position
-function fakeIncrementalMovement(element: HTMLElement): void {
-  let position = 0;
-  element.getBoundingClientRect = () =>
-    ({
-      left: position++,
-      top: position++
-    } as DOMRect);
-}
-
-// Method for enter in hooks of component afterEnter
-function waitFor(ms: number): Promise<void> {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-interface StaggeringTransitionGroupWrapper {
-  appear: boolean;
-  children: (string | number)[];
-  staggering: number;
-}
-
-interface StaggeringTransitionGroupAPI {
-  component: Wrapper<Vue>;
-  getChildren(): WrapperArray<Vue>;
-  setChildren(children: (string | number)[]): void;
-}
diff --git a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
index 91a642a215..7cb10b12b9 100644
--- a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
@@ -1,75 +1,58 @@
 import { mount } from '@vue/test-utils';
-import { defineComponent, provide, ref } from 'vue';
+import { defineComponent, provide, ref, h, TransitionGroup } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
 import { useDisableAnimation } from '../use-disable-animation';
 
+// eslint-disable-next-line vue/one-component-per-file
 const Provider = defineComponent({
   props: {
     disableAnimation: Boolean
   },
-  setup(props) {
+  setup(props, { slots }) {
     provide(DISABLE_ANIMATIONS_KEY as string, ref(props.disableAnimation));
-  },
-  render(h) {
-    return this.$slots.default?.[0] ?? h();
+    return () => (slots.default ? slots.default() : h('div'));
   }
 });
 
-/**
- * Animation component.
- */
+// eslint-disable-next-line vue/one-component-per-file
 const Animation = defineComponent({
   setup() {
     return useDisableAnimation('x-animation');
   },
   template: `
-    <transition-group :name="name">
+    <TransitionGroup :name="name">
      <p>Animation</p>
-    </transition-group>
+    </TransitionGroup>
   `
 });
 
-/**
- * Function that returns an Animation wrapper.
- *
- * @param disableAnimation - Flag to disable the animation.
- * @returns Animation wrapper.
- */
-function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOptions = {}) {
+function renderDisableAnimation({ disableAnimation = true } = {}) {
   const wrapper = mount({
     template: `
-        <Provider :disableAnimation="disableAnimation">
-          <Animation/>
-        </Provider>
-      `,
+      <Provider :disableAnimation="disableAnimation">
+        <Animation/>
+      </Provider>
+    `,
     components: { Provider, Animation },
-    data() {
-      return {
-        disableAnimation
-      };
-    }
+    data: () => ({ disableAnimation })
   });
 
   return {
-    wrapper
+    wrapper,
+    transitionGroup: wrapper.findComponent(TransitionGroup)
   };
 }
 
 describe('testing disable animation', () => {
   it('should disable the animations', () => {
-    const { wrapper } = renderDisableAnimation();
+    const { transitionGroup } = renderDisableAnimation();
 
-    expect(wrapper.attributes('name')).toBe('__no-animation__');
+    expect(transitionGroup.attributes('name')).toBe('__no-animation__');
   });
 
   it('should enable the animations', () => {
-    const { wrapper } = renderDisableAnimation({ disableAnimation: false });
+    const { transitionGroup } = renderDisableAnimation({ disableAnimation: false });
 
-    expect(wrapper.attributes('name')).toBe('x-animation');
+    expect(transitionGroup.attributes('name')).toBe('x-animation');
   });
 });
-
-interface DisableAnimationOptions {
-  /** Flag to disable the animation. */
-  disableAnimation?: boolean;
-}
diff --git a/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss b/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
index 4aebee8a07..319fd773a9 100644
--- a/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
+++ b/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
@@ -8,21 +8,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -31,7 +31,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -40,21 +40,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -63,7 +63,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
diff --git a/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss b/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss
index 6712b99f7c..ac17affc57 100644
--- a/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss
+++ b/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss
@@ -7,21 +7,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(-100%);
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(100%);
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(-100%);
     }
     &#{$p}--leave-to {
@@ -30,7 +30,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(100%);
     }
     &#{$p}--leave-to {
@@ -39,21 +39,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(-100%);
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(100%);
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(-100%);
     }
     &#{$p}--leave-to {
@@ -62,7 +62,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(100%);
     }
     &#{$p}--leave-to {
diff --git a/packages/x-components/src/components/animations/animate-width.vue b/packages/x-components/src/components/animations/animate-width.vue
index 835d43604c..964e303c8d 100644
--- a/packages/x-components/src/components/animations/animate-width.vue
+++ b/packages/x-components/src/components/animations/animate-width.vue
@@ -1,6 +1,5 @@
 <template>
-  <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-animate-width-">
+  <transition name="x-animate-width-">
     <!-- @slot (Required) Transition content -->
     <slot />
   </transition>
@@ -15,23 +14,20 @@
    * @public
    */
   export default defineComponent({
-    name: 'AnimateWidth',
-    inheritAttrs: false
+    name: 'AnimateWidth'
   });
 </script>
 
-<style lang="scss" scoped>
-  .x-animate-width {
-    &--enter-active,
-    &--leave-active {
-      transition: width 0.3s ease-out;
-      overflow-x: hidden;
-    }
+<style lang="css">
+  .x-animate-width--enter-active,
+  .x-animate-width--leave-active {
+    transition: width 0.3s ease-out;
+    overflow-x: hidden;
+  }
 
-    &--enter,
-    &--leave-to {
-      width: 0 !important;
-    }
+  .x-animate-width--enter-from,
+  .x-animate-width--leave-to {
+    width: 0 !important;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue
index 7c512b4871..3bb53e95ce 100644
--- a/packages/x-components/src/components/animations/collapse-height.vue
+++ b/packages/x-components/src/components/animations/collapse-height.vue
@@ -1,8 +1,5 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
   <transition
-    v-bind="$attrs"
-    v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
@@ -26,7 +23,6 @@
    */
   export default defineComponent({
     name: 'CollapseHeight',
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.
@@ -43,13 +39,11 @@
   });
 </script>
 
-<style lang="scss" scoped>
-  .x-collapse-height {
-    &--enter-active,
-    &--leave-active {
-      transition: height 0.3s ease-out;
-      overflow: hidden;
-    }
+<style lang="css">
+  .x-collapse-height--enter-active,
+  .x-collapse-height--leave-active {
+    transition: height 0.3s ease-out;
+    overflow: hidden;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/collapse-width.vue b/packages/x-components/src/components/animations/collapse-width.vue
index ca59254b75..ae0a63bb33 100644
--- a/packages/x-components/src/components/animations/collapse-width.vue
+++ b/packages/x-components/src/components/animations/collapse-width.vue
@@ -1,8 +1,5 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
   <transition
-    v-bind="$attrs"
-    v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
@@ -26,7 +23,6 @@
    */
   export default defineComponent({
     name: 'CollapseWidth',
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.
@@ -43,13 +39,11 @@
   });
 </script>
 
-<style lang="scss" scoped>
-  .x-collapse-width {
-    &--enter-active,
-    &--leave-active {
-      transition: width 0.3s ease-out;
-      overflow: hidden;
-    }
+<style lang="css">
+  .x-collapse-width--enter-active,
+  .x-collapse-width--leave-active {
+    transition: width 0.3s ease-out;
+    overflow: hidden;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/create-directional-animation-factory.ts b/packages/x-components/src/components/animations/create-directional-animation-factory.ts
index 06969117ef..68c1919ffd 100644
--- a/packages/x-components/src/components/animations/create-directional-animation-factory.ts
+++ b/packages/x-components/src/components/animations/create-directional-animation-factory.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue';
+import { DefineComponent, defineComponent, h, Transition } from 'vue';
 
 export type AnimationOrigin =
   | 'top'
@@ -19,23 +19,21 @@ export type AnimationOrigin =
  *
  * @internal
  */
-export function createDirectionalAnimationFactory(animationName: string) {
-  return (animationOrigin: AnimationOrigin = 'top') =>
+export function createDirectionalAnimationFactory(
+  animationName: string
+): (animationOrigin?: AnimationOrigin) => DefineComponent {
+  return (animationOrigin = 'top') =>
     defineComponent({
       name: `transition-${animationName}-${animationOrigin}`,
-      inheritAttrs: false,
-      setup(_, { attrs, listeners, slots }) {
+      setup(_, { slots }) {
         return () =>
           h(
-            'transition',
+            Transition,
             {
-              props: {
-                name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
-                ...attrs
-              },
-              on: listeners
+              name: `x-${animationName}--${animationOrigin} x-${animationName}-`
             },
-            slots.default?.() ?? []
+            // Vue recommends using function for better performance.
+            () => slots.default?.() ?? ''
           );
       }
     });
diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
index f61f14c711..d53a2b3dc3 100644
--- a/packages/x-components/src/components/animations/cross-fade.vue
+++ b/packages/x-components/src/components/animations/cross-fade.vue
@@ -1,6 +1,5 @@
 <template>
-  <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
+  <transition name="x-cross-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
@@ -17,7 +16,6 @@
    */
   export default defineComponent({
     name: 'CrossFade',
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.
@@ -30,22 +28,20 @@
   });
 </script>
 
-<style lang="scss" scoped>
-  .x-cross-fade {
-    &--enter-active,
-    &--leave-active {
-      transition: opacity 0.25s ease-in-out;
-      mix-blend-mode: multiply;
-    }
+<style lang="css">
+  .x-cross-fade--enter-active,
+  .x-cross-fade--leave-active {
+    transition: opacity 0.25s ease-in-out;
+    mix-blend-mode: multiply;
+  }
 
-    &--leave-active {
-      position: absolute;
-    }
+  .x-cross-fade--leave-active {
+    position: absolute;
+  }
 
-    &--leave-to,
-    &--enter {
-      opacity: 0;
-    }
+  .x-cross-fade--leave-to,
+  .x-cross-fade--enter-from {
+    opacity: 0 !important;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/fade-and-slide.vue b/packages/x-components/src/components/animations/fade-and-slide.vue
index d49de3320a..387eeefb4a 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -1,13 +1,5 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
-  <transition-group
-    v-bind="$attrs"
-    v-on="$listeners"
-    class="x-fade-and-slide"
-    :name="name"
-    :tag="tag"
-    :appear="appear"
-  >
+  <transition-group class="x-fade-and-slide" :name="name" :tag="tag" :appear="appear">
     <!-- @slot (Required) Transition-group content -->
     <slot />
   </transition-group>
@@ -25,7 +17,6 @@
    */
   export default defineComponent({
     name: 'FadeAndSlide',
-    inheritAttrs: false,
     props: {
       /**
        * HTML Element that the transition-group children will be wrapped in.
@@ -52,27 +43,21 @@
   });
 </script>
 
-<style lang="scss">
-  $transition-opacity-duration: 0.2s;
-  $transition-transform-duration: 0.3s;
-
-  .x-fade-and-slide {
-    &--move,
-    &--enter-active,
-    &--leave-active {
-      transition: opacity $transition-opacity-duration ease-out,
-        transform $transition-transform-duration ease-out;
-    }
+<style lang="css">
+  .x-fade-and-slide--move,
+  .x-fade-and-slide--enter-active,
+  .x-fade-and-slide--leave-active {
+    transition: opacity 0.2s ease-out, transform 0.3s ease-out;
+  }
 
-    &--enter,
-    &--leave-to {
-      transform: translate(-20%, 0);
-      opacity: 0;
-    }
+  .x-fade-and-slide--enter-from,
+  .x-fade-and-slide--leave-to {
+    transform: translate(-20%, 0);
+    opacity: 0;
+  }
 
-    &--leave-active {
-      position: absolute;
-    }
+  .x-fade-and-slide--leave-active {
+    position: absolute;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
index a1bc38bb99..eea5070a37 100644
--- a/packages/x-components/src/components/animations/fade.vue
+++ b/packages/x-components/src/components/animations/fade.vue
@@ -1,6 +1,5 @@
 <template>
-  <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-fade-" :appear="appear">
+  <transition name="x-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
@@ -17,7 +16,6 @@
    */
   export default defineComponent({
     name: 'Fade',
-    inheritAttrs: false,
     props: {
       /** Indicates if the transition must be applied on the initial render of the node. */
       appear: {
@@ -28,17 +26,15 @@
   });
 </script>
 
-<style lang="scss" scoped>
-  .x-fade {
-    &--enter-active,
-    &--leave-active {
-      transition: opacity 0.25s ease-in-out;
-    }
+<style lang="css">
+  .x-fade--enter-active,
+  .x-fade--leave-active {
+    transition: opacity 0.25s ease-in-out;
+  }
 
-    &--leave-to,
-    &--enter {
-      opacity: 0 !important;
-    }
+  .x-fade--leave-to,
+  .x-fade--enter-from {
+    opacity: 0 !important;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/index.ts b/packages/x-components/src/components/animations/index.ts
index 26240a7f04..b095f0e128 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -4,8 +4,8 @@ export { default as CollapseWidth } from './collapse-width.vue';
 export { default as CrossFade } from './cross-fade.vue';
 export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
+export { default as NoAnimation } from './no-animation.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
-export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
 export { animateScale } from './animate-scale/animate-scale.factory';
diff --git a/packages/x-components/src/components/animations/no-animation.vue b/packages/x-components/src/components/animations/no-animation.vue
new file mode 100644
index 0000000000..86034a9501
--- /dev/null
+++ b/packages/x-components/src/components/animations/no-animation.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  /**
+   * Component to be used as `default` for animation props together with dynamic components
+   * `<component :is="animation">` in the template.
+   */
+  export default defineComponent({
+    name: 'NoAnimation',
+    setup(_, { slots }) {
+      return () => slots.default?.()[0] ?? '';
+    }
+  });
+</script>
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 033f8ec17e..fd46700548 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -1,20 +1,17 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
-  <StaggeringTransitionGroup
-    v-bind="$attrs"
-    v-on="$listeners"
-    class="x-staggered-fade-and-slide"
-    :name="name"
+  <TransitionGroup
+    @enter="onEnter"
+    @afterEnter="onAfterEnter"
     :appear="appear"
+    :name="name"
+    :tag="tag"
   >
-    <!-- @slot (Required) Transition-group content -->
     <slot />
-  </StaggeringTransitionGroup>
+  </TransitionGroup>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import StaggeringTransitionGroup from './staggering-transition-group.vue';
+  import { defineComponent, onUpdated } from 'vue';
   import { useDisableAnimation } from './use-disable-animation';
 
   /**
@@ -25,54 +22,122 @@
    */
   export default defineComponent({
     name: 'StaggeredFadeAndSlide',
-    components: { StaggeringTransitionGroup },
-    inheritAttrs: false,
     props: {
-      /**
-       * Indicates if the transition must be applied on the initial render of the node.
-       */
+      /** Indicates if the transition must be applied on the initial render of the node. */
       appear: {
         type: Boolean,
         default: true
+      },
+      /** The tag of the node to render to the DOM. */
+      tag: {
+        type: String,
+        default: 'div'
+      },
+      /** The time in ms to stagger each item. */
+      stagger: {
+        type: Number,
+        default: 25
       }
     },
-    setup: function () {
+    setup(props) {
+      /** The duration of the transition in ms. */
+      const transitionDuration = 250;
+      /** Indicates if there are new elements to animate. */
+      let isNewSet = true;
+      /** The new elements to animate. */
+      let elementsToAnimate: Element[] = [];
+      /** The name of the animation. */
+      const { name } = useDisableAnimation('x-staggered-fade-and-slide');
+
       /**
-       * The name of the animation.
+       * When the component is updated, we are considering that
+       * a new set of elements is being inserted, so we need
+       * to refresh the elements to animate.
        */
-      const animationName = 'x-staggered-fade-and-slide-';
-
-      const { name } = useDisableAnimation(animationName);
+      onUpdated(() => {
+        isNewSet = true;
+      });
 
-      return { name };
-    }
-  });
-</script>
-
-<style lang="scss" scoped>
-  $transition-duration: 0.25s;
+      /**
+       * Listener called when one frame the element is inserted.
+       * This calculates the stagger delay to be used as `transitionDelay` and finally resolve
+       * the transition end after the CSS transition duration plus stagger delay.
+       *
+       * @param el - Element inserted.
+       * @param done - Callback to indicate the transition end.
+       */
+      function onEnter(el: Element, done: () => void) {
+        if (isNewSet) {
+          refreshElementsToAnimate(el);
+        }
 
-  .x-staggered-fade-and-slide {
-    z-index: 0;
+        const elIndex = elementsToAnimate.indexOf(el);
+        const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0;
 
-    &::v-deep .x-staggered-fade-and-slide {
-      &--enter-active,
-      &--leave-active {
-        transition: $transition-duration ease-out;
-        transition-property: opacity, transform;
+        (el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`;
+        setTimeout(done, transitionDuration + staggerDelay);
       }
 
-      &--move {
-        transition: transform $transition-duration ease-out;
+      /**
+       * Finds he parent's children subset of new elements entering the DOM.
+       * This is achieved by filtering out the elements that are already animated.
+       * Those with 'transition-delay' equal to '0ms' are considered already animated.
+       *
+       * Also marks isNewSet as false as the elements are already updated.
+       *
+       * @param el - Current element.
+       */
+      function refreshElementsToAnimate(el: Element) {
+        elementsToAnimate = [...el.parentElement!.children].filter(
+          c => (c as HTMLElement).style.transitionDelay !== '0ms'
+        );
+        isNewSet = false;
       }
 
-      &--enter,
-      &--leave-to {
-        transform: translate3d(0, 50%, 0);
-        opacity: 0;
-        z-index: -1;
+      /**
+       * Listener called when the enter transition has finished.
+       * This resets the `transitionDelay`.
+       *
+       * @param el - Element inserted.
+       */
+      function onAfterEnter(el: Element) {
+        (el as HTMLElement).style.transitionDelay = '0ms';
       }
+
+      return {
+        name,
+        onEnter,
+        onAfterEnter,
+        transitionDurationInMs: `${transitionDuration}ms`
+      };
     }
+  });
+</script>
+
+<style lang="css">
+  /* 1. Declare transitions */
+  .x-staggered-fade-and-slide-enter-active,
+  .x-staggered-fade-and-slide-leave-active {
+    transition: v-bind(transitionDurationInMs) ease-out;
+    transition-property: opacity, transform;
+  }
+
+  .x-staggered-fade-and-slide-move {
+    transition: transform v-bind(transitionDurationInMs) ease-out;
+  }
+
+  /* 2. Declare enter, from and leave to state */
+  .x-staggered-fade-and-slide-enter,
+  .x-staggered-fade-and-slide-enter-from,
+  .x-staggered-fade-and-slide-leave-to {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+
+  /* 3. Ensure leaving items are taken out of layout flow so that moving animations can be
+        calculated correctly. */
+  .x-staggered-fade-and-slide-leave-active {
+    position: absolute;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/staggering-transition-group.vue b/packages/x-components/src/components/animations/staggering-transition-group.vue
deleted file mode 100644
index 5e84c1b6bd..0000000000
--- a/packages/x-components/src/components/animations/staggering-transition-group.vue
+++ /dev/null
@@ -1,472 +0,0 @@
-<script lang="ts">
-  import {
-    computed,
-    defineComponent,
-    h,
-    onBeforeUpdate,
-    onMounted,
-    onUpdated,
-    ref,
-    VNode
-  } from 'vue';
-  import { noOp } from '../../utils/function';
-
-  /* eslint-disable @typescript-eslint/unbound-method */
-  /**
-   * A replacement component for Vue's transition-group, that also adds the option to stagger
-   * the animations.
-   *
-   * @public
-   */
-  export default defineComponent({
-    name: 'StaggeringTransitionGroup',
-    props: {
-      /**
-       * The name of the transition. Used to generate the CSS classes.
-       */
-      name: {
-        type: String,
-        default: 'v'
-      },
-      /**
-       * The CSS move class name.
-       */
-      moveClass: String,
-      /**
-       * The tag of the node to render to the DOM.
-       */
-      tag: {
-        type: String,
-        default: 'div'
-      },
-      /**
-       * The time in ms to stagger each item.
-       */
-      staggering: {
-        type: Number,
-        default: 25
-      }
-    },
-    setup(props, { attrs, listeners, slots }) {
-      /**
-       * The reference to the element rendered by the component.
-       * Passed to the 'h' render function which will set the ref when the element is created.
-       */
-      const el = ref<HTMLElement>();
-
-      /**
-       * The CSS class for the moving transitions.
-       *
-       * @returns The move transition name.
-       */
-      const moveClassName = computed<string>(() => {
-        return props.moveClass ?? `${props.name}-move`;
-      });
-
-      /**
-       * The transition data contains the needed events and props to perform a transition using Vue
-       * virtual node's API.
-       *
-       * The `beforeLeave` hook is extended to also restore the previous position of the element using
-       * the position absolute.
-       * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
-       * applied by the stagger.
-       *
-       * @returns The transition data for Vue virtual nodes.
-       */
-      const transitionData = computed<TransitionData>(() => {
-        const transitionData: TransitionData = { ...props, ...attrs, ...listeners };
-
-        transitionData.beforeLeave = addRestorePositionHook(transitionData.beforeLeave);
-        transitionData.afterEnter = addClearStaggeringCall(transitionData.afterEnter);
-        transitionData.afterLeave = addClearStaggeringCall(transitionData.afterLeave);
-
-        return transitionData;
-      });
-
-      // Initialize properties here to avoid making them reactive, which would cause infinite loops.
-      /**
-       * The list of old virtual nodes, generated by the previous called render method.
-       */
-      let oldChildren: TransitionVNode[] = [];
-      /**
-       * The list of new virtual nodes, generated by the last called render method.
-       */
-      let newChildren: TransitionVNode[] = [];
-      /**
-       * A map containing the previous positions relative to the container, for each item
-       * rendered inside the slot of this component.
-       * This is used together with the `newPositions` to calculate the move transition.
-       */
-      const oldPositions: WeakMap<Element, Bounds> = new WeakMap();
-      /**
-       * A map containing the new positions relative to the container, for each item
-       * rendered inside the slot of this component.
-       * This is used together with the `newPositions` to calculate the move transition.
-       */
-      const newPositions: WeakMap<Element, Bounds> = new WeakMap();
-      /**
-       * A map containing the move cleanup functions pending to have been called. When invoked
-       * this functions remove all the styles and classes associated to the move transition.
-       */
-      const pendingCleanupMoveCallbacks: WeakMap<Element, () => void> = new WeakMap<
-        Element,
-        () => void
-      >();
-      /**
-       * The counter for the stagger, used to calculate the delay for the transition of each child
-       * element. It is reset every time the render method is triggered.
-       */
-      let staggerCounter = 0;
-      /**
-       * The bounds of the container rendered using the `tag` prop. This is used to calculate the
-       * relative positions of each leaving child, which are then applied with the position absolute.
-       */
-      let wrapperBounds: DOMRect;
-
-      onMounted(() => {
-        newChildren.forEach(applyStagger);
-      });
-
-      onBeforeUpdate(() => {
-        wrapperBounds = el.value!.getBoundingClientRect();
-      });
-
-      onUpdated(() => {
-        wrapperBounds = el.value!.getBoundingClientRect();
-        newChildren.forEach(recordNewPosition);
-        const { leavingNodes, stayingNodes, enteringNodes } = getNodesByTransitionType();
-
-        leavingNodes.forEach(vNode => {
-          applyStagger(vNode);
-          disableClickingEvents(vNode);
-        });
-        const movedChildren = stayingNodes.filter(applyTranslation);
-        const movedStagger = movedChildren.map(getNextTransitionDelay);
-        enteringNodes.forEach(applyStagger);
-
-        // force reflow to put everything in position
-        document.body.getBoundingClientRect();
-
-        movedChildren.forEach(startMoveAnimation(movedStagger));
-      });
-
-      /**
-       * Extends the provided leave transition hook restoring the position of the element with an
-       * absolute position.
-       * Additionally, it removes the element position from the maps of positions.
-       *
-       * @param transitionHook - The leave transition hook to extend.
-       * @returns The new leave transition hook extended.
-       */
-      function addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
-        return element => {
-          const { top, left, width, height } = oldPositions.get(element)!;
-          const { marginTop, marginLeft } = window.getComputedStyle(element);
-          const style = element.style;
-          style.position = 'absolute';
-          style.top = `${top - parseFloat(marginTop)}px`;
-          style.left = `${left - parseFloat(marginLeft)}px`;
-          style.width = `${width}px`;
-          style.height = `${height}px`;
-          newPositions.delete(element);
-          oldPositions.delete(element);
-          const pendingCallback = pendingCleanupMoveCallbacks.get(element);
-          pendingCallback?.();
-          transitionHook(element);
-        };
-      }
-
-      /**
-       * Extends the provided transition hook clearing the transition delay.
-       *
-       * @param transitionHook - The transition hook to extend.
-       * @returns The new transition hook, that also clears the transitionDelay from the element.
-       */
-      function addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
-        return element => {
-          element.style.transitionDelay = '';
-          transitionHook(element);
-        };
-      }
-
-      /**
-       * Returns if the vNode contains a non empty key, and a non empty tag.
-       *
-       * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
-       * `key` property.
-       * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
-       */
-      function isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
-        // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
-        return !!vNode.key && !!vNode.tag;
-      }
-
-      /**
-       * Adds the generated transition data to the vNode, creating the `data` property if necessary.
-       *
-       * @param vNode - The VNode to add the transition data to.
-       */
-      function addTransitionData(vNode: TransitionVNode): void {
-        if (!vNode.data) {
-          vNode.data = {};
-        }
-        vNode.data.transition = transitionData.value;
-      }
-
-      /**
-       * Re-applies the transition data to an old node, just in case it changed from the previous
-       * render call. It also records the position of the node, to then calculate the move
-       * transitions.
-       *
-       * @param vNode - The vNode to add the transition data to, and record his current position as
-       * old.
-       */
-      function syncOldNodes(vNode: TransitionVNode): void {
-        // Synchronize transition data, in case it changed in the last frame.
-        // We can trust data to be defined because each new node has the transition applied
-        vNode.data!.transition = transitionData.value;
-        recordOldPosition(vNode);
-      }
-
-      /**
-       * Saves the position of the vNode in the map of old positions.
-       *
-       * @param vNode - The node to store its position.
-       */
-      function recordOldPosition(vNode: TransitionVNode): void {
-        oldPositions.set(vNode.elm, createRelativeBounds(vNode));
-      }
-
-      /**
-       * Saves the position of the vNode in the map of new positions.
-       *
-       * @param vNode - The node to store its position.
-       */
-      function recordNewPosition(vNode: TransitionVNode): void {
-        newPositions.set(vNode.elm, createRelativeBounds(vNode));
-      }
-
-      /**
-       * Creates an object containing the position of the vNode relative to its container.
-       *
-       * @param vNode - The virtual node to store its relative position.
-       * @returns The relative bounds of the provided virtual node.
-       */
-      function createRelativeBounds(vNode: TransitionVNode): Bounds {
-        const { left, top, width, height } = vNode.elm.getBoundingClientRect();
-        const { left: wrapperLeft, top: wrapperTop } = wrapperBounds;
-        return {
-          left: left - wrapperLeft,
-          top: top - wrapperTop,
-          width,
-          height
-        };
-      }
-
-      /**
-       * Splits the children of the component into three groups:
-       * - Nodes that are leaving.
-       * - Nodes that are entering.
-       * - Nodes that stay.
-       *
-       * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
-       *
-       * @returns The children nodes, divided in different groups depending on if they are leaving,
-       * staying or entering.
-       */
-      function getNodesByTransitionType(): TransitionTypeNodes {
-        const leave = oldChildren.filter(child => !newPositions.has(child.elm));
-        const enter = newChildren.filter(child => !oldPositions.has(child.elm));
-        const stay = oldChildren.filter(child => newPositions.has(child.elm));
-        return {
-          leavingNodes: leave,
-          enteringNodes: enter,
-          stayingNodes: stay
-        };
-      }
-
-      /**
-       * Applies an incremental delay to the virtual node element.
-       *
-       * @param vNode - The virtual node to apply the stagger to.
-       */
-      function applyStagger(vNode: TransitionVNode): void {
-        vNode.elm.style.transitionDelay = getNextTransitionDelay();
-      }
-
-      /**
-       * Disables listening to click events in a virtual node element.
-       *
-       * @remarks This is done to avoid letting the user click elements that are performing the moving
-       * animation to leave the DOM but are still rendered.
-       *
-       * @param vNode - The virtual node to disable listening to click events.
-       */
-      function disableClickingEvents(vNode: TransitionVNode): void {
-        vNode.elm.style.pointerEvents = 'none';
-      }
-
-      /**
-       * Calculates the next transition delay property, incrementing the `staggerCounter` property
-       * each time it is called.
-       *
-       * @returns The value for the next element `style.transitionDelay` property.
-       */
-      function getNextTransitionDelay(): string {
-        return `${staggerCounter++ * props.staggering}ms`;
-      }
-
-      /**
-       * Calculates if the virtual node should have a move transition. If its has it, then it
-       * applies it immediately using the `style.transform`.
-       *
-       * @param vNode - The virtual node to calculate if it should have a move transition.
-       * @returns True when a move transition was applied to the virtual node.
-       */
-      function applyTranslation(vNode: TransitionVNode): boolean {
-        const oldPosition = oldPositions.get(vNode.elm as Element)!;
-        const newPosition = newPositions.get(vNode.elm as Element)!;
-        const dx = oldPosition.left - newPosition.left;
-        const dy = oldPosition.top - newPosition.top;
-        if (dx !== 0 || dy !== 0) {
-          const style = vNode.elm.style;
-          style.transform = `translate3d(${dx}px,${dy}px,0)`;
-          style.transitionDuration = '0s';
-          return true;
-        }
-        return false;
-      }
-
-      /**
-       * Generates a function to start the moving animations to each node that it needs them with the
-       * provided stagger.
-       *
-       * @param moveStagger - A list containing the delay to add to each node.
-       * @returns A function that starts the moving animation with the provided stagger to a single
-       * virtual node.
-       */
-      function startMoveAnimation(
-        moveStagger: string[]
-      ): (vNode: TransitionVNode, index: number) => void {
-        return (vNode, index) => {
-          const element = vNode.elm;
-          const style = element.style;
-          element.classList.add(moveClassName.value);
-          style.transform = style.transitionDuration = '';
-          style.transitionDelay = moveStagger[index];
-          const cleanMoveTransition = (event?: TransitionEvent): void => {
-            if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
-              element.removeEventListener('transitionend', cleanMoveTransition);
-              element.style.transitionDelay = '';
-              element.classList.remove(moveClassName.value);
-              pendingCleanupMoveCallbacks.delete(element);
-            }
-          };
-          pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
-          element.addEventListener('transitionend', cleanMoveTransition);
-        };
-      }
-
-      return () => {
-        staggerCounter = 0;
-        // New children are now the old ones
-        oldChildren = newChildren;
-        // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
-        newChildren = (
-          (typeof slots.default === 'function' ? slots.default() : slots.default) ?? []
-        ).filter(isTransitionValidVNode);
-
-        // Apply transition data to both new and old nodes & store the position of the old nodes.
-        newChildren.forEach(addTransitionData);
-        oldChildren.forEach(syncOldNodes);
-
-        return h(props.tag, { ref: el, class: 'x-staggering-transition-group' }, newChildren);
-      };
-    }
-  });
-
-  /**
-   * Contains arrays of nodes, splitted by the action they should have.
-   */
-  interface TransitionTypeNodes {
-    leavingNodes: TransitionVNode[];
-    stayingNodes: TransitionVNode[];
-    enteringNodes: TransitionVNode[];
-  }
-
-  /**
-   * Safe transition version of the VNode type, with the required non optional properties.
-   */
-  interface TransitionVNode extends VNode {
-    elm: HTMLElement;
-    tag: string;
-    key: string;
-  }
-
-  /**
-   * Vue's VNode {@link https://vuejs.org/v2/api/#transition} data props and events.
-   */
-  interface TransitionData {
-    name?: string;
-    appear?: boolean;
-    css?: boolean;
-    type?: 'transition' | 'animation'; // Unused
-    mode?: 'out-in' | 'in-out'; // Unused
-    duration?: number;
-    enterClass?: string;
-    leaveClass?: string;
-    appearClass?: string;
-    enterToClass?: string;
-    leaveToClass?: string;
-    appearToClass?: string;
-    enterActiveClass?: string;
-    leaveActiveClass?: string;
-    appearActiveClass?: string;
-    beforeEnter?: TransitionHook;
-    enter?: TransitionHook;
-    afterEnter?: TransitionHook;
-    beforeLeave?: TransitionHook;
-    leave?: TransitionHook;
-    afterLeave?: TransitionHook;
-  }
-
-  /**
-   * A function that receives an HTMLElement. Used to perform actions when the different phases
-   * of Vue transitions happens.
-   */
-  type TransitionHook = (element: HTMLElement) => void;
-
-  /**
-   * Represents the dimensions and positions of an element.
-   */
-  interface Bounds {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  }
-</script>
-
-<style lang="scss" scoped>
-  .x-staggering-transition-group {
-    position: relative;
-  }
-</style>
-
-<docs lang="mdx">
-## Examples
-
-### Basic example
-
-Apart from all the props and events that the classic transition group has, the staggering transition
-group also exposes a new `staggering` property, which allows to configure the delay for each one of
-the nodes when animating.
-
-```vue
-<staggering-transition-group appear :staggering="50" name="staggered-fade-slide-">
-  <!-- @slot (Required) Transition-group content -->
-  <slot />
-</staggering-transition-group>
-```
-</docs>
diff --git a/packages/x-components/src/components/auto-progress-bar.vue b/packages/x-components/src/components/auto-progress-bar.vue
index b148720c05..1548feb8ee 100644
--- a/packages/x-components/src/components/auto-progress-bar.vue
+++ b/packages/x-components/src/components/auto-progress-bar.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent } from 'vue';
+  import { computed, defineComponent, StyleValue } from 'vue';
 
   /**
    * The auto progress bar component is useful for displaying a visual indicator of numerical data
@@ -14,6 +14,7 @@
    * @public
    */
   export default defineComponent({
+    name: 'AutoProgressBar',
     props: {
       /**
        * A boolean flag indicating if the bar is loading.
@@ -42,7 +43,7 @@
        *
        * @internal
        */
-      const cssStyles = computed<Partial<CSSStyleDeclaration>>(() => ({
+      const cssStyles = computed<StyleValue>(() => ({
         animationDuration: `${props.durationInSeconds}s`
       }));
 
@@ -53,20 +54,21 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="css" scoped>
   .x-progress-bar {
     display: inline-block;
     overflow: hidden;
     background-color: #dbe2e5;
     border-radius: 4px;
+  }
 
-    &-fill {
-      height: 4px;
-      background-color: #283034;
-      animation: slide linear;
-      transform-origin: left;
-    }
+  .x-progress-bar-fill {
+    height: 4px;
+    background-color: #283034;
+    animation: slide linear;
+    transform-origin: left;
   }
+
   @keyframes slide {
     0% {
       transform: translateX(-100%);
diff --git a/packages/x-components/src/components/base-dropdown.vue b/packages/x-components/src/components/base-dropdown.vue
index b40341033d..6608048770 100644
--- a/packages/x-components/src/components/base-dropdown.vue
+++ b/packages/x-components/src/components/base-dropdown.vue
@@ -80,11 +80,8 @@
   import { Identifiable } from '@empathyco/x-types';
   import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';
   import { AnimationProp } from '../types';
-  import { getTargetElement } from '../utils/html';
-  import { normalizeString } from '../utils/normalize';
-  import { isInRange } from '../utils/number';
-  import { debounce as debounceFunction } from '../utils/debounce';
-  import { NoElement } from './no-element';
+  import { debounceFunction, normalizeString, getTargetElement, isInRange } from '../utils';
+  import { NoAnimation } from './animations';
 
   type DropdownItem = string | number | Identifiable;
   let dropdownCount = 0;
@@ -95,7 +92,6 @@
    */
   export default defineComponent({
     name: 'BaseDropdown',
-    components: { NoElement },
     props: {
       /** List of items to display.*/
       items: {
@@ -117,7 +113,7 @@
        */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /** Time to wait without receiving any keystroke before resetting the items search query. */
       searchTimeoutMs: {
@@ -400,18 +396,18 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-dropdown {
     position: relative;
+  }
 
-    &__items-list {
-      z-index: 1;
-      list-style: none;
-      position: absolute;
-      padding: 0;
-      margin: 0;
-      top: calc(100% + var(--x-size-gap-dropdown-default, 0));
-    }
+  .x-dropdown__items-list {
+    z-index: 1;
+    list-style: none;
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    top: calc(100% + var(--x-size-gap-dropdown-default, 0));
   }
 </style>
 
diff --git a/packages/x-components/src/components/base-event-button.vue b/packages/x-components/src/components/base-event-button.vue
index 5562214271..b04901cd5e 100644
--- a/packages/x-components/src/components/base-event-button.vue
+++ b/packages/x-components/src/components/base-event-button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button ref="rootRef" v-on="$listeners" @click="emitEvents" data-test="event-button">
+  <button ref="rootRef" @click="emitEvents" data-test="event-button">
     <!-- @slot (Required) Button content with a text, an icon or both -->
     <slot />
   </button>
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 1d4a096948..6f57d626e4 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -9,7 +9,7 @@
     data-test="grid"
   >
     <li
-      v-for="{ slotName, item, cssClass } in gridItems"
+      v-for="{ item, cssClass, slotName } in gridItems"
       :key="item.id"
       :class="cssClass"
       class="x-base-grid__item"
@@ -36,12 +36,17 @@
     defineComponent,
     inject,
     onBeforeUnmount,
+    onMounted,
     PropType,
     Ref,
     ref,
     watch
   } from 'vue';
-  import { MaybeComputedElementRef, useResizeObserver } from '@vueuse/core';
+  import {
+    MaybeComputedElementRef,
+    useResizeObserver,
+    UseResizeObserverReturn
+  } from '@vueuse/core';
   import { toKebabCase } from '../utils/string';
   import { ListItem, VueCSSClasses } from '../utils/types';
   import { AnimationProp } from '../types/animation-prop';
@@ -51,8 +56,6 @@
   /**
    * The type returned by the gridItems function. Basically it's a list of items with its CSS
    * classes and a slotName.
-   *
-   * @internal
    */
   interface GridItem {
     slotName: string;
@@ -73,11 +76,7 @@
   export default defineComponent({
     name: 'BaseGrid',
     props: {
-      /**
-       * Animation component that will be used to animate the base grid.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the base grid. */
       animation: {
         type: AnimationProp,
         default: 'ul'
@@ -85,8 +84,6 @@
       /**
        * Number of columns the grid is divided into. By default, its value is 0, setting the grid
        * columns mode to auto-fill.
-       *
-       * @public
        */
       columns: {
         type: Number,
@@ -95,9 +92,7 @@
       /**
        * The list of items to be rendered.
        *
-       * @remarks The items must have an id property.
-       *
-       * @public
+       * @remarks The items must have an ID property.
        */
       items: {
         type: Array as PropType<ListItem[]>
@@ -109,41 +104,28 @@
       };
 
       const xBus = useXBus();
-      /**
-       * It injects {@link ListItem} provided by an ancestor.
-       *
-       * @internal
-       */
-      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
-        LIST_ITEMS_KEY as string,
-        undefined
-      );
-
-      const gridEl = ref<ElementRef | HTMLElement | null>(null);
 
+      /** It injects {@link ListItem} provided by an ancestor. */
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+      const gridEl = ref<ElementRef | HTMLElement>();
       let renderedColumnsNumber = ref(0);
+
       /**
        * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}
        * event whenever the number of columns rendered inside the grid changes.
-       *
-       * @internal
        */
       watch(
         renderedColumnsNumber,
         () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),
-        {
-          immediate: false
-        }
+        { immediate: false }
       );
 
       /**
        * It returns the items passed as props or the injected ones.
        *
        * @returns List of grid items.
-       *
-       * @public
        */
-      const computedItems = computed((): ListItem[] | void => {
+      const computedItems = computed<ListItem[] | void>(() => {
         return (
           props.items ??
           injectedListItems?.value ??
@@ -158,38 +140,27 @@
        * amount of columns or rows based on how many columns the grid is divided into.
        *
        * @returns CSS class with the column property value.
-       *
-       * @internal
        */
-      const cssClasses = computed(
-        (): VueCSSClasses =>
-          props.columns ? `x-base-grid--cols-${props.columns}` : 'x-base-grid--cols-auto'
-      );
+      const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`);
 
       /**
        * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on
        * the column property value.
        *
        * @returns A CSSStyleDeclaration to use as the style attribute.
-       *
-       * @internal
        */
-      const style = computed((): Partial<CSSStyleDeclaration> => {
-        return {
-          gridTemplateColumns: props.columns
-            ? `repeat(${props.columns}, minmax(0, 1fr))`
-            : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'
-        };
-      });
+      const style = computed<Partial<CSSStyleDeclaration>>(() => ({
+        gridTemplateColumns: props.columns
+          ? `repeat(${props.columns}, minmax(0, 1fr))`
+          : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'
+      }));
 
       /**
        * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.
        *
        * @returns An array of objects containing the item and its CSS class.
-       *
-       * @internal
        */
-      const gridItems = computed((): GridItem[] =>
+      const gridItems = computed<GridItem[]>(() =>
         (computedItems.value as ListItem[]).map(item => {
           const slotName = toKebabCase(item.modelName);
           return {
@@ -205,35 +176,28 @@
        *
        * @param value - The value to check.
        * @returns `true` if the value is an `ElementRef` object, `false` otherwise.
-       *
-       * @internal
        */
       const isElementRef = (value: any): value is ElementRef => {
         return value && value.$el instanceof HTMLElement;
       };
 
-      /**
-       * Updates the number of columns rendered inside the grid.
-       *
-       * @internal
-       */
-      const updateRenderedColumnsNumber = (): void => {
+      /** Updates the number of columns rendered inside the grid. */
+      function updateRenderedColumnsNumber() {
         const { gridTemplateColumns } = getComputedStyle(
           isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element)
         );
         renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
-      };
+      }
 
-      /**
-       * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.
-       *
-       * @internal
-       */
-      const resizeObserver = useResizeObserver(
-        gridEl as MaybeComputedElementRef,
-        updateRenderedColumnsNumber
-      );
-      onBeforeUnmount(() => resizeObserver.stop());
+      /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */
+      let resizeObserver: UseResizeObserverReturn;
+      onMounted(() => {
+        resizeObserver = useResizeObserver(
+          gridEl as MaybeComputedElementRef,
+          updateRenderedColumnsNumber
+        );
+      });
+      onBeforeUnmount(() => resizeObserver?.stop());
 
       return {
         gridItems,
@@ -246,32 +210,31 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-base-grid {
     display: grid;
     grid-auto-flow: dense;
     list-style: none;
     align-items: stretch;
+  }
 
-    &__banner,
-    &__next-queries-group {
-      grid-column-start: 1;
-      grid-column-end: -1;
-    }
+  .x-base-grid__banner,
+  .x-base-grid__next-queries-group {
+    grid-column-start: 1;
+    grid-column-end: -1;
+  }
 
-    &__item {
-      display: flex;
-      flex-flow: column nowrap;
+  .x-base-grid__item {
+    display: flex;
+    flex-flow: column nowrap;
+  }
 
-      > * {
-        flex-grow: 1;
-      }
-    }
+  .x-base-grid__item > * {
+    flex-grow: 1;
+  }
 
-    &--cols-auto .x-base-grid__item {
-      // layout
-      min-width: var(--x-size-min-width-grid-item);
-    }
+  .x-base-grid--cols-auto .x-base-grid__item {
+    min-width: var(--x-size-min-width-grid-item);
   }
 </style>
 
diff --git a/packages/x-components/src/components/base-rating.vue b/packages/x-components/src/components/base-rating.vue
index 6bebc7e83b..4836ec3b30 100644
--- a/packages/x-components/src/components/base-rating.vue
+++ b/packages/x-components/src/components/base-rating.vue
@@ -89,38 +89,38 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-rating {
     position: relative;
     display: inline-block;
     max-width: fit-content;
+  }
 
-    &--empty {
-      overflow: hidden;
-      display: flex;
-      flex-flow: row nowrap;
-      white-space: nowrap;
-    }
+  .x-rating--empty {
+    overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    white-space: nowrap;
+  }
 
-    &--filled {
-      display: flex;
-      flex-flow: row nowrap;
-      white-space: nowrap;
-      position: absolute;
-      overflow: hidden;
-      top: 0;
-      left: 0;
-      height: 100%;
-    }
+  .x-rating--filled {
+    display: flex;
+    flex-flow: row nowrap;
+    white-space: nowrap;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
 
-    &__default-icon {
-      fill: currentColor;
-      stroke: currentColor;
+  .x-rating__default-icon {
+    fill: currentColor;
+    stroke: currentColor;
+  }
 
-      &--empty {
-        fill: none;
-      }
-    }
+  .x-rating__default-icon--empty {
+    fill: none;
   }
 </style>
 
diff --git a/packages/x-components/src/components/base-switch.vue b/packages/x-components/src/components/base-switch.vue
index d6c305db12..94d65bb0a6 100644
--- a/packages/x-components/src/components/base-switch.vue
+++ b/packages/x-components/src/components/base-switch.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     @click="toggle"
-    :aria-checked="value.toString()"
+    :aria-checked="modelValue || undefined"
     :class="cssClasses"
     class="x-switch"
     role="switch"
@@ -30,12 +30,12 @@
      * @public
      */
     props: {
-      value: {
+      modelValue: {
         type: Boolean,
-        required: true
+        default: false
       }
     },
-    emits: ['change', 'input'],
+    emits: ['update:modelValue'],
     setup(props, { emit }) {
       /**
        * Dynamic CSS classes to add to the switch component
@@ -45,23 +45,22 @@
        * @internal
        */
       const cssClasses = ref<VueCSSClasses>({
-        'x-switch--is-selected x-selected': props.value
+        'x-switch--is-selected x-selected': props.modelValue
       });
 
       /**
-       * Emits a change and input event with the desired value of the switch.
+       * Emits an event with the new value of the switch.
        *
        * @internal
        */
       const toggle = (): void => {
-        const newValue = !props.value;
+        const newValue = !props.modelValue;
         cssClasses.value = {
           'x-switch--is-selected': newValue,
           'x-selected': newValue
         };
 
-        emit('input', newValue);
-        emit('change', newValue);
+        emit('update:modelValue', newValue);
       };
 
       return {
@@ -72,7 +71,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-switch {
     --x-switch-height: 16px;
     --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));
@@ -88,28 +87,28 @@
     border: none;
     transition: 0.25s ease-out background-color;
     cursor: pointer;
+  }
 
-    &__handle {
-      background: #ffffff;
-      border-radius: 50%;
-      height: var(--x-switch-handle-size);
-      width: var(--x-switch-handle-size);
-      transition: 0.25s ease-out transform;
-      transform: translateX(var(--x-switch-translate-x, 0%));
-    }
+  .x-switch__handle {
+    background: #ffffff;
+    border-radius: 50%;
+    height: var(--x-switch-handle-size);
+    width: var(--x-switch-handle-size);
+    transition: 0.25s ease-out transform;
+    transform: translateX(var(--x-switch-translate-x, 0%));
+  }
 
-    &--is-selected {
-      --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);
-      --x-switch-background: #1a1a1a;
-    }
+  .x-switch--is-selected {
+    --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);
+    --x-switch-background: #1a1a1a;
+  }
 
-    &--sm {
-      --x-switch-height: 12px;
-    }
+  .x-switch--sm {
+    --x-switch-height: 12px;
+  }
 
-    &--lg {
-      --x-switch-height: 24px;
-    }
+  .x-switch--lg {
+    --x-switch-height: 24px;
   }
 </style>
 
@@ -126,7 +125,7 @@ _Try clicking it to see how it changes its state_
 
 ```vue live
 <template>
-  <BaseSwitch @change="value = !value" :value="value" />
+  <BaseSwitch @update:modelValue="value = !value" :modelValue="value" />
 </template>
 
 <script>
diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
index 9333b07a2e..44398a9071 100644
--- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
+++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
@@ -1,17 +1,19 @@
-import { mount } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XPlugin } from '../../../plugins/x-plugin';
 import BaseColumnPickerDropdown from '../base-column-picker-dropdown.vue';
+import { XDummyBus } from '../../../__tests__/bus.dummy';
+let bus = new XDummyBus();
 
 function render({
   selectedColumns,
   columns = [2, 4, 6],
   template = `
     <BaseColumnPickerDropdown
+      @update:modelValue="col => selectedColumns = col"
       :columns="columns"
       :modelValue="selectedColumns"
-      @update:modelValue="col => selectedColumns = col"
     >
       <template #item="{ item, isSelected, isHighlighted }">
         <span v-if="isHighlighted">🟢</span>
@@ -20,26 +22,28 @@ function render({
       </template>
     </BaseColumnPickerDropdown>`
 }: { selectedColumns?: number; columns?: number[]; template?: string } = {}) {
-  const [, localVue] = installNewXPlugin();
-
-  const mountComponent = (options: { selectedColumns?: number } = {}) =>
-    mount(
+  const mountComponent = (options: { selectedColumns?: number } = {}): VueWrapper => {
+    return mount(
       {
-        components: { BaseColumnPickerDropdown },
-        template,
-        data: () => ({
-          columns,
-          selectedColumns: options.selectedColumns ?? selectedColumns
-        })
+        components: {
+          BaseColumnPickerDropdown
+        },
+        data() {
+          return {
+            columns,
+            selectedColumns: options.selectedColumns ?? selectedColumns
+          };
+        },
+        template
       },
       {
-        propsData: { columns },
-        localVue
+        global: { plugins: [installNewXPlugin({}, bus)] }
       }
     );
+  };
 
   const columnPickerDropdownWrapper = mountComponent();
-  const wrapper = columnPickerDropdownWrapper.findComponent(BaseColumnPickerDropdown);
+  const wrapper: VueWrapper = columnPickerDropdownWrapper.findComponent(BaseColumnPickerDropdown);
   const toggleWrapper = wrapper.find(getDataTestSelector('dropdown-toggle'));
   const toggleDropdown = async () => await toggleWrapper.trigger('click');
 
@@ -53,18 +57,22 @@ function render({
     },
     toggleDropdown,
     setWrapperSelectedColumns: async (column: number) => {
-      await wrapper.setData({ selectedColumns: column });
+      await columnPickerDropdownWrapper.setData({ selectedColumns: column });
       await nextTick();
     },
     clickNthItem: async (nth: number) => {
       await toggleDropdown();
-      await wrapper.findAll(getDataTestSelector('dropdown-item')).at(nth).trigger('click');
+      await wrapper.findAll(getDataTestSelector('dropdown-item')).at(nth)?.trigger('click');
       await nextTick();
     }
   } as const;
 }
 
 describe('testing BaseColumnPickerDropdown component', () => {
+  beforeEach(() => {
+    bus = new XDummyBus();
+  });
+
   it('emits ColumnsNumberProvided event with the column number on init', () => {
     render();
 
@@ -163,9 +171,9 @@ describe('testing BaseColumnPickerDropdown component', () => {
 
     const itemWrapperArray = wrapper.findAll(getDataTestSelector('dropdown-item'));
 
-    expect(itemWrapperArray.at(0).text()).toEqual('🟢 ✅ 2');
-    expect(itemWrapperArray.at(1).text()).toEqual('4');
-    expect(itemWrapperArray.at(2).text()).toEqual('6');
+    expect(itemWrapperArray.at(0)?.text()).toEqual('🟢✅2');
+    expect(itemWrapperArray.at(1)?.text()).toEqual('4');
+    expect(itemWrapperArray.at(2)?.text()).toEqual('6');
   });
 
   it('renders the item slot as toggle when its slot is not defined', () => {
diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
index 9c852c1936..e329eabc18 100644
--- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
+++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
@@ -1,9 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XPlugin } from '../../../plugins/x-plugin';
 import BaseColumnPickerList from '../base-column-picker-list.vue';
-
+import { XDummyBus } from '../../../__tests__/bus.dummy';
+let bus = new XDummyBus();
 function render({
   selectedColumns,
   columns,
@@ -22,8 +23,6 @@ function render({
       ${customItemSlot ?? ''}
    </BaseColumnPickerList>`
 }: BaseColumnPickerListRenderOptions = {}) {
-  const [, localVue] = installNewXPlugin();
-
   function mountComponent(options: { selectedColumns?: number } = {}) {
     return mount(
       {
@@ -36,8 +35,8 @@ function render({
         })
       },
       {
-        propsData: { columns, buttonClass },
-        localVue
+        props: { columns, buttonClass },
+        global: { plugins: [installNewXPlugin({}, bus)] }
       }
     );
   }
@@ -57,7 +56,7 @@ function render({
       await nextTick();
     },
     clickNthItem: async (nth: number) => {
-      await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth).trigger('click');
+      await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth)?.trigger('click');
       await nextTick();
     },
     getSelectedItem: () => wrapper.find('[aria-pressed=true]')
@@ -65,6 +64,9 @@ function render({
 }
 
 describe('testing BaseColumnPickerList component', () => {
+  beforeEach(() => {
+    bus = new XDummyBus();
+  });
   it('emits ColumnsNumberProvided event with the column number on init', () => {
     render({ columns: [1, 3, 6] });
 
@@ -100,7 +102,7 @@ describe('testing BaseColumnPickerList component', () => {
       eventPayload: columns[index],
       metadata: {
         moduleName: null, // no module registered for this base component
-        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
+        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index)?.element,
         location: 'none',
         replaceable: true
       }
@@ -114,7 +116,7 @@ describe('testing BaseColumnPickerList component', () => {
       eventPayload: columns[index],
       metadata: {
         moduleName: null, // no module registered for this base component
-        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
+        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index)?.element,
         location: 'none',
         replaceable: true
       }
@@ -127,7 +129,7 @@ describe('testing BaseColumnPickerList component', () => {
     const columnPickerListWrapper = wrapper.findAll(getDataTestSelector('column-picker-button'));
 
     columns.forEach((column, index) => {
-      expect(columnPickerListWrapper.at(index).classes()).toContain(
+      expect(columnPickerListWrapper.at(index)?.classes()).toContain(
         `x-column-picker-list__button--${column}-cols`
       );
     });
@@ -144,7 +146,7 @@ describe('testing BaseColumnPickerList component', () => {
 
     expect(columnsSlots).toHaveLength(columns.length);
     columns.forEach((column, index) => {
-      expect(columnsSlots.at(index).text()).toEqual(column.toString());
+      expect(columnsSlots.at(index)?.text()).toEqual(column.toString());
     });
   });
 
@@ -173,7 +175,7 @@ describe('testing BaseColumnPickerList component', () => {
   });
 
   it('updates selected value on fresh mounts correctly', async () => {
-    const getSelectedItem = (wrapper: Wrapper<Vue>): string =>
+    const getSelectedItem = (wrapper: VueWrapper): string =>
       wrapper.get('[aria-pressed=true]').text();
     const { wrapper, mountComponent, clickNthItem, setWrapperSelectedColumns } = render({
       columns: [4, 6, 0]
@@ -210,7 +212,7 @@ describe('testing BaseColumnPickerList component', () => {
       buttonClass: 'custom-class'
     });
 
-    wrapper.findAll('button').wrappers.forEach(button => {
+    wrapper.findAll('button').forEach(button => {
       expect(button.classes()).toContain('custom-class');
     });
   });
diff --git a/packages/x-components/src/components/column-picker/base-column-picker-list.vue b/packages/x-components/src/components/column-picker/base-column-picker-list.vue
index dc2c66bc1c..3fec2e3480 100644
--- a/packages/x-components/src/components/column-picker/base-column-picker-list.vue
+++ b/packages/x-components/src/components/column-picker/base-column-picker-list.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="x-column-picker-list x-button-group" data-test="column-picker-list" role="list">
-    <template v-for="({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses">
+    <template
+      v-for="({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses"
+      :key="column"
+    >
       <BaseEventButton
-        :key="column"
         class="x-column-picker-list__button x-button"
         :class="[buttonClass, cssClasses]"
         data-test="column-picker-button"
diff --git a/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts b/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts
index 040abb128d..20192918b3 100644
--- a/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts
+++ b/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts
@@ -1,8 +1,8 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { defineComponent, provide, ref } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, provide, ref } from 'vue';
 import BaseCurrency from '../base-currency.vue';
 
-function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper {
   return mount(
     {
       components: { BaseCurrency },
@@ -10,7 +10,7 @@ function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapp
       props: ['value', 'format']
     },
     {
-      propsData: {
+      props: {
         value,
         format
       }
@@ -18,7 +18,7 @@ function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapp
   );
 }
 
-function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper {
   const Provider = defineComponent({
     setup() {
       const providedFormat = ref('$i,iii.ddd');
diff --git a/packages/x-components/src/components/decorators/__tests__/bus.decorators.spec.ts b/packages/x-components/src/components/decorators/__tests__/bus.decorators.spec.ts
deleted file mode 100644
index 85f6d86e89..0000000000
--- a/packages/x-components/src/components/decorators/__tests__/bus.decorators.spec.ts
+++ /dev/null
@@ -1,390 +0,0 @@
-import { createLocalVue, mount, VueClass, Wrapper } from '@vue/test-utils';
-import Vue, { CreateElement, VNode, VueConstructor } from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
-import Vuex, { Store } from 'vuex';
-import {
-  createHierarchicalFilter,
-  createSimpleFilter
-} from '../../../__stubs__/filters-stubs.factory';
-import { installNewXPlugin } from '../../../__tests__/utils';
-import { XEvent, XEventPayload } from '../../../wiring/events.types';
-import { searchBoxXStoreModule } from '../../../x-modules/search-box/store/module';
-import { searchBoxXModule } from '../../../x-modules/search-box/x-module';
-import { xComponentMixin } from '../../x-component.mixin';
-import { XEmit, XOn } from '../bus.decorators';
-import Mock = jest.Mock;
-
-describe('testing @XOn decorator', () => {
-  const createdListener = jest.fn();
-  const dataListener = jest.fn();
-  const multipleListener = jest.fn();
-  const singleListener = jest.fn();
-  const optionsListener = jest.fn();
-  const filteredOptionsListener = jest.fn();
-  const filteredWithMultipleOptionsListener = jest.fn();
-
-  @Component({
-    mixins: [xComponentMixin(searchBoxXModule)]
-  })
-  class TestingComponent extends Vue {
-    protected events: XEvent[] = ['UserIsTypingAQuery', 'UserTalked'];
-
-    created(): void {
-      createdListener(this);
-    }
-
-    render(createElement: CreateElement): VNode {
-      return createElement();
-    }
-
-    @XOn(component => (component as TestingComponent).events)
-    testingXOnData(payload: unknown): void {
-      dataListener(this, payload);
-    }
-
-    @XOn(['UserClickedOpenEventsModal', 'UserClickedCloseEventsModal'])
-    testingXOnMultiple(): void {
-      multipleListener(this);
-    }
-
-    @XOn('UserClickedCloseEventsModal', { moduleName: 'searchBox', feature: 'search_box' })
-    testingXOnMultipleOptionsFiltered(): void {
-      filteredWithMultipleOptionsListener(this);
-    }
-
-    @XOn('UserClickedOpenEventsModal', { moduleName: 'searchBox' })
-    testingXOnOptions(): void {
-      optionsListener(this);
-    }
-
-    @XOn('UserClickedCloseEventsModal', { moduleName: 'empathize' })
-    testingXOnOptionsFiltered(): void {
-      filteredOptionsListener(this);
-    }
-
-    @XOn('UserAcceptedAQuery')
-    testingXOnSingle(payload: string): void {
-      singleListener(this, payload);
-    }
-  }
-
-  let component: Wrapper<TestingComponent>;
-  let localVue: VueConstructor;
-
-  beforeEach(() => {
-    component?.vm.$destroy();
-    jest.clearAllMocks();
-    localVue = createLocalVue();
-    localVue.use(Vuex);
-    const store = new Store({
-      modules: {
-        x: {
-          namespaced: true,
-          modules: {
-            searchBox: { namespaced: true, ...searchBoxXStoreModule } as any
-          }
-        }
-      }
-    });
-    installNewXPlugin({}, localVue);
-
-    component = mount(TestingComponent, {
-      localVue,
-      store
-    });
-  });
-
-  it('calls original created hook', () => {
-    expect(createdListener).toHaveBeenCalledWith(component.vm);
-  });
-
-  it('subscribes to a defined event', () => {
-    component.vm.$x.emit('UserAcceptedAQuery', 'algo grasioso');
-
-    expect(singleListener).toHaveBeenCalled();
-    expect(singleListener).toHaveBeenCalledWith(component.vm, 'algo grasioso');
-  });
-
-  it('subscribes to a defined array of events', () => {
-    component.vm.$x.emit('UserClickedOpenEventsModal');
-    component.vm.$x.emit('UserClickedCloseEventsModal');
-
-    expect(multipleListener).toHaveBeenCalledTimes(2);
-  });
-
-  it('subscribes dynamically to the events defined in a data property', async () => {
-    component.vm.$x.emit('UserIsTypingAQuery', 'algo grasioso');
-    component.vm.$x.emit('UserTalked', 'algo chistoso');
-
-    expect(dataListener).toHaveBeenNthCalledWith(1, component.vm, 'algo grasioso');
-    expect(dataListener).toHaveBeenNthCalledWith(2, component.vm, 'algo chistoso');
-
-    (component.vm as any).events = ['UserClearedQuery'];
-    await localVue.nextTick();
-    dataListener.mockClear();
-
-    component.vm.$x.emit('UserIsTypingAQuery', 'algo grasioso');
-    component.vm.$x.emit('UserTalked', 'algo chistoso');
-    expect(dataListener).not.toHaveBeenCalled();
-
-    component.vm.$x.emit('UserClearedQuery', '');
-    expect(dataListener).toHaveBeenCalled();
-  });
-
-  it('un-subscribes to any subscribed event when destroying the component', () => {
-    component.vm.$destroy();
-    component.vm.$x.emit('UserAcceptedAQuery', 'que pasara que misterios habra');
-    component.vm.$x.emit('UserIsTypingAQuery', 'estare escribiendo?');
-    component.vm.$x.emit('UserTalked', 'no he dicho nada');
-    component.vm.$x.emit('UserClickedOpenEventsModal');
-    component.vm.$x.emit('UserClickedCloseEventsModal');
-
-    expect(singleListener).not.toHaveBeenCalled();
-    expect(multipleListener).not.toHaveBeenCalled();
-    expect(dataListener).not.toHaveBeenCalled();
-  });
-
-  it('filters out callback based on options passed to the decorator', () => {
-    component.vm.$x.emit('UserClickedOpenEventsModal');
-    expect(optionsListener).toHaveBeenCalled();
-    component.vm.$x.emit('UserClickedCloseEventsModal');
-    expect(filteredOptionsListener).not.toHaveBeenCalled();
-  });
-
-  it('filters out callback based on multiple options passed to the decorator', () => {
-    component.vm.$x.emit('UserClickedCloseEventsModal', undefined, { feature: 'url' });
-    expect(filteredWithMultipleOptionsListener).not.toHaveBeenCalled();
-    component.vm.$x.emit('UserClickedCloseEventsModal', undefined, { feature: 'search_box' });
-    expect(filteredWithMultipleOptionsListener).toHaveBeenCalled();
-  });
-});
-
-describe('testing @XEmit decorator', () => {
-  interface RenderXEmitTestOptions {
-    propsData?: Record<string, unknown>;
-  }
-
-  interface RenderXEmitTestAPI<Component extends VueClass<any>> {
-    emit: Mock<void, [XEvent, XEventPayload<XEvent>]>;
-    wrapper: Wrapper<InstanceType<Component>>;
-  }
-
-  function renderXEmitTest<Component extends VueClass<any>>(
-    component: Component,
-    { propsData }: RenderXEmitTestOptions = {}
-  ): RenderXEmitTestAPI<Component> {
-    const emit = jest.fn();
-    const localVue = createLocalVue();
-    const wrapper = mount<InstanceType<Component>>(component, {
-      localVue,
-      propsData,
-      mocks: {
-        $x: {
-          emit
-        }
-      }
-    });
-
-    return {
-      wrapper,
-      emit
-    };
-  }
-
-  it('emits the provided event when a prop changes', async () => {
-    @Component
-    class PropsTest extends Vue {
-      @XEmit('UserAcceptedAQuery')
-      @Prop({ required: true })
-      public someProp!: string;
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(PropsTest, {
-      propsData: { someProp: 'first' }
-    });
-
-    expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenNthCalledWith(1, 'UserAcceptedAQuery', 'first');
-
-    await wrapper.setProps({ someProp: 'second' });
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenNthCalledWith(2, 'UserAcceptedAQuery', 'second');
-  });
-
-  it('emits the provided event when a data property changes', async () => {
-    @Component
-    class DataPropertyTest extends Vue {
-      @XEmit('UserAcceptedAQuery')
-      public someData = 'first';
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(DataPropertyTest);
-
-    expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenNthCalledWith(1, 'UserAcceptedAQuery', 'first');
-
-    wrapper.vm.someData = 'second';
-    await wrapper.vm.$nextTick();
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenNthCalledWith(2, 'UserAcceptedAQuery', 'second');
-  });
-
-  it('emits the provided event when a computed property changes', async () => {
-    @Component
-    class ComputedPropertyTest extends Vue {
-      public someData = 'first';
-
-      @XEmit('UserAcceptedAQuery')
-      public get computedProperty(): string {
-        return `computed: ${this.someData}`;
-      }
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(ComputedPropertyTest);
-
-    expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenNthCalledWith(1, 'UserAcceptedAQuery', 'computed: first');
-
-    wrapper.vm.someData = 'second';
-    await wrapper.vm.$nextTick();
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenNthCalledWith(2, 'UserAcceptedAQuery', 'computed: second');
-  });
-
-  it('clones the observed property if it is an array', async () => {
-    @Component
-    class CloningNotPrimitivesTest extends Vue {
-      @XEmit('SelectedFiltersChanged')
-      public someData = [createSimpleFilter('category', 'food')];
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(CloningNotPrimitivesTest);
-
-    expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenNthCalledWith(1, 'SelectedFiltersChanged', wrapper.vm.someData);
-    expect(emit.mock.calls[0][1]).not.toBe(wrapper.vm.someData);
-
-    wrapper.vm.someData = [];
-    await wrapper.vm.$nextTick();
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenNthCalledWith(2, 'SelectedFiltersChanged', wrapper.vm.someData);
-    expect(emit.mock.calls[1][1]).not.toBe(wrapper.vm.someData);
-  });
-
-  it('clones the observed property if it is an object', async () => {
-    @Component
-    class CloningNotPrimitivesTest extends Vue {
-      @XEmit('UserClickedAFilter')
-      public someData = createSimpleFilter('category', 'food');
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(CloningNotPrimitivesTest);
-
-    expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenNthCalledWith(1, 'UserClickedAFilter', wrapper.vm.someData);
-    expect(emit.mock.calls[0][1]).not.toBe(wrapper.vm.someData); // Checking for reference equality
-
-    wrapper.vm.someData = createSimpleFilter('category', 'beverages');
-    await wrapper.vm.$nextTick();
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenNthCalledWith(2, 'UserClickedAFilter', wrapper.vm.someData);
-    expect(emit.mock.calls[1][1]).not.toBe(wrapper.vm.someData); // Checking for reference equality
-  });
-
-  it('allows to deep watch objects', async () => {
-    @Component
-    class CloningNotPrimitivesTest extends Vue {
-      @XEmit('UserClickedAHierarchicalFilter', { deep: true })
-      public hierarchical = createHierarchicalFilter('category', 'food');
-
-      @XEmit('UserClickedASimpleFilter')
-      public simple = createSimpleFilter('brand', 'pepechuleton');
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(CloningNotPrimitivesTest);
-
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenNthCalledWith(
-      1,
-      'UserClickedAHierarchicalFilter',
-      wrapper.vm.hierarchical
-    );
-    expect(emit).toHaveBeenNthCalledWith(2, 'UserClickedASimpleFilter', wrapper.vm.simple);
-
-    wrapper.vm.hierarchical.selected = true;
-    wrapper.vm.simple.selected = true;
-    await wrapper.vm.$nextTick();
-    expect(emit).toHaveBeenCalledTimes(3);
-    expect(emit).toHaveBeenNthCalledWith(
-      3,
-      'UserClickedAHierarchicalFilter',
-      wrapper.vm.hierarchical
-    );
-  });
-
-  it('allows to ignore initial value', async () => {
-    @Component
-    class CloningNotPrimitivesTest extends Vue {
-      @XEmit('UserClickedAFilter', { immediate: false })
-      public someData = createSimpleFilter('category', 'food');
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(CloningNotPrimitivesTest);
-
-    expect(emit).toHaveBeenCalledTimes(0);
-
-    wrapper.vm.someData = createSimpleFilter('category', 'beer');
-    await wrapper.vm.$nextTick();
-    expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenNthCalledWith(1, 'UserClickedAFilter', wrapper.vm.someData);
-  });
-
-  it('does not emit anything if the initial value is undefined', async () => {
-    @Component
-    class UndefinedValueTest extends Vue {
-      @XEmit('UserAcceptedAQuery')
-      @Prop()
-      public someProp!: string | undefined;
-
-      render(h: CreateElement): VNode {
-        return h();
-      }
-    }
-
-    const { wrapper, emit } = renderXEmitTest(UndefinedValueTest);
-
-    expect(emit).toHaveBeenCalledTimes(0);
-
-    wrapper.setProps({ someProp: 'nope' });
-    await wrapper.vm.$nextTick();
-    expect(emit).toHaveBeenCalledTimes(0);
-  });
-});
diff --git a/packages/x-components/src/components/decorators/__tests__/debounce.decorators.spec.ts b/packages/x-components/src/components/decorators/__tests__/debounce.decorators.spec.ts
deleted file mode 100644
index aca2275fde..0000000000
--- a/packages/x-components/src/components/decorators/__tests__/debounce.decorators.spec.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { CreateElement, VNode } from 'vue';
-import { Component } from 'vue-property-decorator';
-import { DebounceOptions } from '../../../utils/types';
-import { Debounce } from '../debounce.decorators';
-
-function renderDebounceDecoratorComponent(
-  debounceTime: number,
-  debounceOptions?: DebounceOptions
-): DebounceDecoratorComponentAPI {
-  const mockedDebouncedFunction = jest.fn();
-
-  @Component
-  class TestingComponent extends Vue {
-    @Debounce(debounceTime, debounceOptions)
-    debounceTest(mockArgument?: any): void {
-      mockedDebouncedFunction(mockArgument);
-    }
-
-    render(createElement: CreateElement): VNode {
-      return createElement();
-    }
-  }
-
-  const component = mount(TestingComponent);
-
-  return {
-    component,
-    debounceTest(mockArgument?: any) {
-      return component.vm.debounceTest(mockArgument);
-    },
-    mockedDebouncedFunction
-  };
-}
-
-const defaultDebounceTime = 100;
-
-describe('testing debounce decorator', () => {
-  jest.useFakeTimers();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('debounces the method for the provided time', () => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { debounceTest, mockedDebouncedFunction } =
-      renderDebounceDecoratorComponent(defaultDebounceTime);
-
-    debounceTest();
-    expect(mockedDebouncedFunction).not.toHaveBeenCalled();
-    debounceTest();
-    debounceTest();
-    jest.advanceTimersByTime(defaultDebounceTime);
-    expect(mockedDebouncedFunction).toHaveBeenCalledTimes(1);
-  });
-
-  it('debounces the method for the provided time and options', () => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { debounceTest, mockedDebouncedFunction } = renderDebounceDecoratorComponent(
-      defaultDebounceTime,
-      { leading: true, trailing: false }
-    );
-
-    debounceTest();
-    expect(mockedDebouncedFunction).toHaveBeenCalledTimes(1);
-    debounceTest();
-    debounceTest();
-    jest.advanceTimersByTime(defaultDebounceTime);
-    expect(mockedDebouncedFunction).toHaveBeenCalledTimes(1);
-  });
-
-  it('applies the arguments correctly to the decorated method', () => {
-    const mockedArgument = 'potatoe';
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { debounceTest, mockedDebouncedFunction } =
-      renderDebounceDecoratorComponent(defaultDebounceTime);
-
-    debounceTest(mockedArgument);
-    jest.advanceTimersByTime(defaultDebounceTime);
-    expect(mockedDebouncedFunction).toHaveBeenCalledWith(mockedArgument);
-  });
-
-  it('cancels pending debounced execution when the component is destroyed', () => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { component, debounceTest, mockedDebouncedFunction } =
-      renderDebounceDecoratorComponent(defaultDebounceTime);
-
-    debounceTest();
-    expect(mockedDebouncedFunction).not.toHaveBeenCalled();
-
-    component.destroy();
-    jest.advanceTimersByTime(defaultDebounceTime);
-    expect(mockedDebouncedFunction).not.toHaveBeenCalled();
-  });
-});
-
-interface DebounceDecoratorComponentAPI {
-  component: Wrapper<Vue>;
-  debounceTest(mockArgument?: any): void;
-  mockedDebouncedFunction(): jest.Mock;
-}
diff --git a/packages/x-components/src/components/decorators/__tests__/injection.decorators.spec.ts b/packages/x-components/src/components/decorators/__tests__/injection.decorators.spec.ts
deleted file mode 100644
index a190f28cb8..0000000000
--- a/packages/x-components/src/components/decorators/__tests__/injection.decorators.spec.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { mount, VueClass, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
-import { XInject, XProvide } from '../injection.decorators';
-
-@Component({
-  template: `
-    <div><slot /></div>
-  `,
-  provide: {
-    defaultInjectWayValue: 'DefaultInjectValue'
-  }
-})
-class Provider extends Vue {
-  @Prop()
-  @XProvide('items')
-  public items!: string[];
-
-  @Prop()
-  @XProvide('value')
-  public simpleValue!: string;
-
-  @XInject('notProvidedKey', 'DefaultValue')
-  public notProvided!: string;
-}
-
-@Component({
-  template: `
-    <div><slot /></div>
-  `,
-  inject: ['defaultInjectWayValue']
-})
-class FilterItems extends Vue {
-  public defaultInjectWayValue!: string;
-
-  @XInject('items')
-  public items!: string[];
-
-  @XProvide('items')
-  public get evenItems(): string[] {
-    return this.items.filter((_, index) => index % 2 === 0);
-  }
-}
-
-@Component({
-  template: `
-    <div><slot /></div>
-  `,
-  inject: ['defaultInjectWayValue']
-})
-class Child extends Vue {
-  public defaultInjectWayValue!: string;
-
-  @XInject('items')
-  public items!: string[];
-
-  @XInject('value')
-  public simpleValue!: string;
-}
-
-describe('testing inject decorators', () => {
-  function mountComponent(
-    { items = [] as string[], simpleValue = '' } = {},
-    template = `
-    <Provider v-bind="$attrs">
-      <FilterItems>
-        <Child/>
-      </FilterItems>
-    </Provider>`
-  ): RenderInjectionComponentsAPI {
-    const wrapper = mount(
-      {
-        template,
-        components: { Provider, FilterItems, Child }
-      },
-      { propsData: { items, simpleValue } }
-    );
-
-    return {
-      providerWrapper: wrapper.findComponent(Provider as VueClass<Provider>),
-      filterItemsWrapper: wrapper.findComponent(FilterItems as VueClass<FilterItems>),
-      childWrapper: wrapper.findComponent(Child as VueClass<Child>)
-    };
-  }
-
-  it('renders the injected values from a parent', () => {
-    const items = ['a', 'b', 'c'];
-    const simpleValue = 'Test Value';
-    const { childWrapper } = mountComponent(
-      {
-        items,
-        simpleValue
-      },
-      '<Provider v-bind="$attrs"><Child/></Provider>'
-    );
-
-    expect(childWrapper.vm.items).toEqual(items);
-    expect(childWrapper.vm.simpleValue).toEqual(simpleValue);
-  });
-
-  it(`renders the overridden injected value from a grandparent with a component
-            in the middle that overrides that injection`, () => {
-    const items = ['a', 'b', 'c'];
-    const expectedItems = ['a', 'c'];
-    const { childWrapper } = mountComponent({ items });
-
-    expect(childWrapper.vm.items).toEqual(expectedItems);
-  });
-
-  it('renders the injected value even when it overrides it for the children', () => {
-    const items = ['a', 'b', 'c'];
-    const { filterItemsWrapper } = mountComponent({ items });
-
-    expect(filterItemsWrapper.vm.items).toEqual(items);
-  });
-
-  it(`renders an injected value provided from grandparent component with a component
-            in the middle that doesn't inject neither provide that value`, () => {
-    const simpleValue = 'Test Value';
-    const { childWrapper } = mountComponent({
-      simpleValue
-    });
-
-    expect(childWrapper.vm.simpleValue).toEqual(simpleValue);
-  });
-
-  it(`reacts to updates from an injected value provided by grandparent component with a component
-            in the middle that doesn't inject neither provide that value`, async () => {
-    const simpleValue = 'Test Value';
-    const newSimpleValue = 'New Test Value';
-    const { childWrapper, providerWrapper } = mountComponent({
-      simpleValue
-    });
-
-    expect(childWrapper.vm.simpleValue).toEqual(simpleValue);
-    await providerWrapper.setProps({ simpleValue: newSimpleValue });
-    expect(childWrapper.vm.simpleValue).toEqual(newSimpleValue);
-  });
-
-  it(`reacts to updates from an injected value provided by grandparent component with a component
-            in the middle that overrides that injection`, async () => {
-    const items = ['a', 'b', 'c', 'd'];
-    const expectedItems = ['a', 'c'];
-    const newItems = ['1', '2', '3', '4', '5'];
-    const newExpectedItems = ['1', '3', '5'];
-    const { childWrapper, providerWrapper } = mountComponent({
-      items
-    });
-
-    expect(childWrapper.vm.items).toEqual(expectedItems);
-    await providerWrapper.setProps({ items: newItems });
-    expect(childWrapper.vm.items).toEqual(newExpectedItems);
-  });
-
-  it('keeps the default injection working', () => {
-    const { filterItemsWrapper, childWrapper } = mountComponent({
-      items: ['a', 'b', 'c', 'd'],
-      simpleValue: 'SimpleValue'
-    });
-    expect(filterItemsWrapper.vm.defaultInjectWayValue).toEqual('DefaultInjectValue');
-    expect(childWrapper.vm.defaultInjectWayValue).toEqual('DefaultInjectValue');
-  });
-
-  it('injects default value if the inject key is not provided', () => {
-    const { providerWrapper } = mountComponent({}, '<Provider/>');
-    expect(providerWrapper.vm.notProvided).toEqual('DefaultValue');
-  });
-});
-
-interface RenderInjectionComponentsAPI {
-  providerWrapper: Wrapper<Provider>;
-  filterItemsWrapper: Wrapper<FilterItems>;
-  childWrapper: Wrapper<Child>;
-}
diff --git a/packages/x-components/src/components/decorators/__tests__/store.decorators.spec.ts b/packages/x-components/src/components/decorators/__tests__/store.decorators.spec.ts
deleted file mode 100644
index ea2cc911cb..0000000000
--- a/packages/x-components/src/components/decorators/__tests__/store.decorators.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { CreateElement, VNode } from 'vue';
-import { Component } from 'vue-property-decorator';
-import Vuex, { Store } from 'vuex';
-import { installNewXPlugin } from '../../../__tests__/utils';
-import { searchBoxXStoreModule } from '../../../x-modules/search-box/store/module';
-import { searchBoxXModule } from '../../../x-modules/search-box/x-module';
-import { xComponentMixin } from '../../x-component.mixin';
-import { Getter, State } from '../store.decorators';
-
-@Component({
-  mixins: [xComponentMixin(searchBoxXModule)]
-})
-class TestingComponent extends Vue {
-  @State('searchBox', 'query')
-  public query!: string;
-  @Getter('searchBox', 'trimmedQuery')
-  public trimmedQuery!: string;
-
-  render(createElement: CreateElement): VNode {
-    return createElement();
-  }
-}
-
-describe('testing store decorators', () => {
-  let component: Wrapper<TestingComponent>;
-
-  beforeEach(() => {
-    component?.vm.$destroy();
-    jest.clearAllMocks();
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-    const store = new Store({
-      modules: {
-        x: {
-          namespaced: true,
-          modules: {
-            searchBox: { namespaced: true, ...searchBoxXStoreModule } as any
-          }
-        }
-      }
-    });
-    installNewXPlugin({}, localVue);
-
-    component = mount(TestingComponent, {
-      localVue,
-      store
-    });
-  });
-
-  it('maps store state', () => {
-    expect(component.vm.query).toEqual('');
-
-    component.vm.$store.commit('x/searchBox/setQuery', 'pork shoulder ');
-
-    expect(component.vm.query).toEqual('pork shoulder ');
-  });
-
-  it('maps store getters', () => {
-    expect(component.vm.trimmedQuery).toEqual('');
-
-    component.vm.$store.commit('x/searchBox/setQuery', 'short ribs ');
-
-    expect(component.vm.trimmedQuery).toEqual('short ribs');
-  });
-});
diff --git a/packages/x-components/src/components/decorators/bus.decorators.ts b/packages/x-components/src/components/decorators/bus.decorators.ts
deleted file mode 100644
index aaa99bc52d..0000000000
--- a/packages/x-components/src/components/decorators/bus.decorators.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { AnyFunction } from '@empathyco/x-utils';
-import { Observable, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import Vue, { WatchOptions } from 'vue';
-import { createDecorator } from 'vue-class-component';
-import { EventPayload, SubjectPayload } from '@empathyco/x-bus';
-import { clone } from '../../utils/clone';
-import { DecoratorFor } from '../../utils/types';
-import { XEvent, XEventPayload, XEventsTypes } from '../../wiring/events.types';
-import { WireMetadata } from '../../wiring/wiring.types';
-
-/**
- * Creates a subscription to an {@link XEvent}, an array of {@link XEvent} or a component property (
- * reacting to its changes via a watcher) filtering out the passed metadata, if any, and
- * un-subscribes on the beforeDestroy hook.
- *
- * @remarks
- * The decorated property needs to be public for type inference to work.
- *
- * @param xEvent - The {@link XEvent}, an array of {@link XEvent} or a component property.
- * @param metadataFilteringOptions - The {@link WireMetadata} options to filter out a callback
- * execution.
- * @returns Decorator that creates a subscription to an {@link XEvent} and un-subscribes on the
- * beforeDestroy hook.
- *
- * @public
- * @deprecated Use {@link useXBus} composable instead.
- */
-export function XOn<Event extends XEvent>(
-  xEvent: Event | Event[] | ((component: Vue) => Event | Event[]),
-  metadataFilteringOptions: Partial<WireMetadata> = {}
-): DecoratorFor<(payload: XEventPayload<Event>, metadata: WireMetadata) => void> {
-  return createDecorator((options, key) => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalCreated = options.created;
-    Object.assign(options, {
-      created(this: Vue) {
-        originalCreated?.apply(this);
-        const componentCreateSubscription = createSubscription.bind(this);
-        const subscriptionMetadata: SubscriptionMetadata<Event> = {
-          event: [],
-          callback: (this as any)[key], // `this` isn't correctly typed here
-          metadataFilteringOptions
-        };
-
-        let subscription: Subscription;
-        if (typeof xEvent === 'function') {
-          this.$watch(
-            () => xEvent(this),
-            newEvents => {
-              subscription?.unsubscribe();
-              subscriptionMetadata.event = newEvents;
-              subscription = componentCreateSubscription(subscriptionMetadata);
-            },
-            { immediate: true }
-          );
-        } else {
-          subscriptionMetadata.event = xEvent;
-          subscription = componentCreateSubscription(subscriptionMetadata);
-        }
-
-        this.$on('hook:beforeDestroy', () => subscription.unsubscribe()); // Using Vue
-        // bus to subscribe to the lifecycle hook 'beforeDestroy' instead of 'capturing' the
-        // original component's 'beforeDestroy' method to override it plus calling
-        // originalBeforeDestroy.apply(this) to preserve the existing original hook functionality
-      }
-    });
-  });
-}
-
-/**
- * Create a subscription for the given events executing the passed callback and filtering out based
- * on the passed metadata options.
- *
- * @param this - The vue component.
- * @param subscriptionMetadata - The {@link SubscriptionMetadata}.
- * @returns A
- * {@link https://www.learnrxjs.io/learn-rxjs/concepts/rxjs-primer#subscription | subscription}.
- * @internal
- */
-function createSubscription<Event extends XEvent>(
-  this: Vue,
-  subscriptionMetadata: SubscriptionMetadata<Event>
-): Subscription {
-  const { event, callback, metadataFilteringOptions } = subscriptionMetadata;
-  const eventArray = Array.isArray(event) ? event : [event];
-  const subscription = new Subscription();
-  eventArray.forEach(xEvent => {
-    subscription.add(
-      (
-        this.$x.on(xEvent, true) as unknown as Observable<
-          SubjectPayload<EventPayload<XEventsTypes, Event>, WireMetadata>
-        >
-      )
-        .pipe(filter(({ metadata }) => filterMetadataOptions(metadataFilteringOptions, metadata)))
-        .subscribe(({ eventPayload, metadata }) => callback(eventPayload, metadata))
-    );
-  });
-  return subscription;
-}
-
-/**
- * Checks if the metadata options passed to the decorator match the metadata of the emitted event.
- *
- * @param filteringOptions - The decorator options.
- * @param eventOptions - The emitted event metadata.
- * @returns True if options are empty or match the metadata.
- * @internal
- */
-function filterMetadataOptions<WireMetadataKey extends keyof WireMetadata>(
-  filteringOptions: Partial<WireMetadata>,
-  eventOptions: WireMetadata
-): boolean {
-  return (Object.keys(filteringOptions) as WireMetadataKey[])
-    .filter(key => filteringOptions[key] !== undefined)
-    .every(key => filteringOptions[key] === eventOptions[key]);
-}
-
-/**
- * The subscription metadata containing an/a list of {@link XEvent}, the callback function to
- * execute and the metadataOptions to filter out the execution of the callback.
- *
- * @internal
- */
-interface SubscriptionMetadata<Event extends XEvent> {
-  /**
-   * An {@link XEvent} or a list of them.
-   */
-  event: Event | Event[];
-  /**
-   * A callback function to execute in the subscription.
-   */
-  callback: AnyFunction;
-  /**
-   * The metadataFilteringOptions to filter out the execution of the callback.
-   */
-  metadataFilteringOptions: Partial<WireMetadata>;
-}
-
-/**
- * Emits the provided event whenever the decorated property changes.
- *
- * @param xEvent - The event to emit.
- * @param watcherOptions - Options for Vue's watcher.
- * @returns Decorator that makes the component emit an event when the decorated property changes.
- *
- * @public
- * @deprecated Use {@link useXBus} composable instead.
- */
-export function XEmit<Event extends XEvent>(
-  xEvent: Event,
-  { immediate = true, deep = false }: WatchOptions = {}
-): DecoratorFor<XEventPayload<Event> | undefined> {
-  return createDecorator((options, key) => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalCreated = options.created;
-    options.created = function (this: Vue) {
-      originalCreated?.apply(this);
-      if ((this as any)[key] !== undefined) {
-        this.$watch(
-          key,
-          newValue => {
-            this.$x.emit(
-              xEvent,
-              typeof newValue === 'object' && newValue !== null ? clone(newValue) : newValue
-            );
-          },
-          { immediate, deep }
-        );
-      }
-    };
-  });
-}
diff --git a/packages/x-components/src/components/decorators/debounce.decorators.ts b/packages/x-components/src/components/decorators/debounce.decorators.ts
deleted file mode 100644
index b7f951a25d..0000000000
--- a/packages/x-components/src/components/decorators/debounce.decorators.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { AnyFunction } from '@empathyco/x-utils';
-import { createDecorator } from 'vue-class-component';
-import { debounce } from '../../utils/debounce';
-import { DebounceOptions, DecoratorFor } from '../../utils/types';
-
-/**
- * Adds debounce to the method that the decorator is applied to.
- *
- * @remarks Pending debounced execution is cancelled when the component is destroyed.
- *
- * @param debounceTimeInMs - The time of debounce in ms.
- * @param debounceOptions - The options for the debounce strategy.
- *
- * @returns Decorator that applies debounce.
- *
- * @public
- * @deprecated Use {@link useDebounce} composable instead.
- */
-export function Debounce(
-  debounceTimeInMs: number,
-  debounceOptions: DebounceOptions = {}
-): DecoratorFor<AnyFunction> {
-  return createDecorator((options, key) => {
-    const originalMethod = options.methods![key];
-    const debouncedMethod = debounce(
-      (context: Vue, args: unknown[]) => originalMethod.call(context, ...args),
-      debounceTimeInMs,
-      debounceOptions
-    );
-
-    options.methods![key] = function debouncedWrapper(...args: unknown[]) {
-      debouncedMethod(this, args);
-    };
-
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalBeforeDestroy = options.beforeDestroy;
-    Object.assign(options, {
-      beforeDestroy(this: Vue) {
-        originalBeforeDestroy?.apply(this);
-        debouncedMethod.cancel();
-      }
-    });
-  });
-}
diff --git a/packages/x-components/src/components/decorators/injection.consts.ts b/packages/x-components/src/components/decorators/injection.consts.ts
index 91207af292..8fd80e6f42 100644
--- a/packages/x-components/src/components/decorators/injection.consts.ts
+++ b/packages/x-components/src/components/decorators/injection.consts.ts
@@ -1,6 +1,18 @@
 import { Result, ResultVariant } from '@empathyco/x-types';
 import { ListItem } from '../../utils/types';
-import { XInjectKey } from './injection.decorators';
+
+/**
+ * Type of the key passed to `provide` and `inject` to be type-safe. With this type
+ * you can declare the type of the injected value directly in the injection key.
+ *
+ * @example
+ * `const myKey: XInjectKey<Filter> = 'myFilter';`
+ * `inject(myKey)`
+ *
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export interface XInjectKey<Type> extends String {}
 
 /**
  * It's used to identify the provided and injected `disable-animations`.
diff --git a/packages/x-components/src/components/decorators/injection.decorators.ts b/packages/x-components/src/components/decorators/injection.decorators.ts
deleted file mode 100644
index 30bec45210..0000000000
--- a/packages/x-components/src/components/decorators/injection.decorators.ts
+++ /dev/null
@@ -1,254 +0,0 @@
-import Vue, { ComponentOptions } from 'vue';
-import { createDecorator } from 'vue-class-component';
-import { arrayToObject } from '../../utils/array';
-import { DecoratorFor } from '../../utils/types';
-
-/**
- * The type of the Vue Component provide configuration, narrowed to the object type.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-type ProvideObjectConfig = Exclude<ComponentOptions<Vue>['provide'], (() => object) | undefined>;
-
-/**
- * The type of the Vue Component inject configuration, narrowed to the object type.
- *
- * @internal
- */
-type InjectObjectConfig = Exclude<ComponentOptions<Vue>['inject'], string[] | undefined>;
-
-/**
- * Type of the key passed to {@link XProvide} and {@link XInject} to be type-safe. With this type
- * you can declare the type of the injected value directly in the injection key.
- *
- * @example
- * `const myKey: XInjectKey<Filter> = 'myFilter';`
- * `@XInject(myKey)`
- *
- * @public
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export interface XInjectKey<Type> extends String {}
-
-/**
- * The union type for the different functions in this module.
- *
- * @internal
- */
-type AnyInjectKey<Type> = XInjectKey<Type> | string;
-
-/**
- * Generates a provide function that returns an object with the injectable value returned in a
- * getter to keep its reactivity, using the default
- * {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. It overrides the provide key if
- * the parent provides the same key.
- *
- * @remarks The decorated property needs to be public for type inference to work.
- *
- * @param provideKey - The key used to provide. This key can be a 'string' or a 'XInject<Type>'.
- * This last type is to support type-safe injection. When this decorator is used, it is possible
- * to specify the type of the injected value. Take a look to the example below.
- * @returns Decorator with the provide configuration.
- *
- * @example
- * Type unsafe injection (but allowed):
- *     \@XProvide('myKey')
- *
- * Type safe injection (recommended):
- *     const myKey: XInjectKey<Date> = 'myKey';
- *     \@XProvide(myKey)
- *
- * This last one, you are specifying that the injected value with the key 'myKey' has the Date
- * type.
- *
- * @public
- * @deprecated Use native Vue `provide` instead.
- */
-export function XProvide<Type>(provideKey: AnyInjectKey<Type>): DecoratorFor<Type> {
-  return createDecorator((options, componentKey) => {
-    const previousProvide = options.provide;
-    options.provide = function <ComponentInstance extends Vue>(this: ComponentInstance) {
-      const previousProvideObject = getPreviousProvideObject(previousProvide, this);
-      const newProvideObject = getNewProvideObject(provideKey, componentKey, this);
-      return Object.assign(previousProvideObject, newProvideObject);
-    };
-  });
-}
-
-/**
- * Generates an inject configuration object to inject a value provided by {@link XProvide}.
- * This function injects the value into a private property of the component instance using the
- * default {@link https://vuejs.org/v2/api/#provide-inject | Vue inject}. This private property
- * is named as the decorated property but prefixed with `_x-inject_`.
- *
- * Why is this private property necessary? Well, the {@link XProvide} decorator, provides an object
- * with the shape \{ value: any \} being that value a getter to keep reactivity of the injected
- * value. This private property is to "shortcut" that object and directly inject the value itself.
- * Otherwise, you should access to the actual value using `.value`.
- *
- * The final step is done by a computed property. This has the same name as the decorated property.
- * This computed returns the inner value getter of the injected object. This way the decorated
- * property has finally the initial injected value.
- *
- * @remarks The decorated property needs to be public for type inference to work.
- *
- * @param injectKey - The key used to inject. This key can be a 'string' or a 'XInject<Type>'.
- * This last type is to support type-safe injection. When this decorator is used, it is possible
- * to specify the type of the injected value. Take a look to the example below.
- * @returns Decorator with the provide configuration.
- *
- * @param defaultValue - The default value to use if there is not value provided.
- *
- * @example
- * Type unsafe injection (but allowed):
- *     \@XInject('myKey')
- *
- * Type safe injection (recommended):
- *     const myKey: XInjectKey<Date> = 'myKey';
- *     \@XInject(myKey)
- *
- * @public
- * @deprecated Use native Vue `inject` instead.
- */
-export function XInject<Type>(
-  injectKey: AnyInjectKey<Type>,
-  defaultValue?: Type
-): DecoratorFor<Type> {
-  return createDecorator((options, componentKey) => {
-    const privateComponentKey = `_x-inject_${componentKey}`;
-    const previousInjectObject = getPreviousInjectObject(options.inject);
-    const newInjectObject = getNewInjectObject(injectKey, privateComponentKey, defaultValue);
-    options.inject = Object.assign(previousInjectObject, newInjectObject);
-    const computedToPrivateProperty = getComputedProperty(componentKey, privateComponentKey);
-    options.computed = Object.assign(options.computed ?? {}, computedToPrivateProperty);
-  });
-}
-
-/**
- * This function receives the previous provide of the component instance.
- * If the provide is a function, then returns it as an object invoking it with the component
- * instance.
- * If the provide is an object then it is returned directly.
- * If the provide is undefined, then an empty object returned.
- *
- * @param previousProvide - The {@link ComponentOptions.provide } configuration that exist before
- * applying this decorator.
- * @param componentInstance - A Vue Component instance to invoke the provide function.
- *
- * @returns {@link ProvideObjectConfig} With the provide configuration as an object.
- */
-function getPreviousProvideObject<ComponentInstance extends Vue>(
-  previousProvide: ComponentOptions<Vue>['provide'],
-  componentInstance: ComponentInstance
-): ProvideObjectConfig {
-  if (isProvideFunction(previousProvide)) {
-    return previousProvide.call(componentInstance);
-  } else {
-    return previousProvide ?? {};
-  }
-}
-
-/**
- * This function creates a new provide configuration, wrapping the value to provide inside a getter
- * called `value`. This is done to keep the reactivity of the injected value.
- *
- * @param provideKey - The key of the provide value.
- * @param componentKey - The name of the property decorated with {@link XProvide}.
- * @param componentInstance - The {@link Vue} instance of the component to invoke the provide
- * function.
- *
- * @returns {@link ProvideObjectConfig} The object with the key of the provideKey and the `value`
- * getter.
- */
-function getNewProvideObject<ComponentInstance extends Vue>(
-  provideKey: AnyInjectKey<unknown>,
-  componentKey: string,
-  componentInstance: ComponentInstance
-): ProvideObjectConfig {
-  return {
-    [provideKey as string]: {
-      get value() {
-        return componentInstance[componentKey as keyof ComponentInstance];
-      }
-    }
-  };
-}
-
-/**
- * This function returns the previous inject config as an object. This will be used to merge it with
- * the new inject configuration.
- * If the previous inject config of the component instance is an Array, then it converts it into an
- * object.
- * If the previous inject config of the component instance is an object, then it returns it
- * directly.
- * If the previous inject config of the component instance is undefined, then an empty object is
- * returned.
- *
- * @param previousInject - The previous inject configuration of the component instance.
- *
- * @returns {@link InjectObjectConfig} The object with the previous inject config in form of object.
- */
-function getPreviousInjectObject(
-  previousInject: ComponentOptions<Vue>['inject']
-): InjectObjectConfig {
-  if (Array.isArray(previousInject)) {
-    return arrayToObject(previousInject);
-  } else {
-    return previousInject ?? {};
-  }
-}
-
-/**
- * This function returns the new inject configuration. This will be merged with the previous inject
- * configuration.
- * It returns an object with the key and a string if no `defaultValue` is passed. Otherwise it
- * returns an object with `from` and `default` keys.
- *
- * @param injectKey - The key of the injected value.
- * @param componentKey - The name of the component key where the value will be injected.
- * @param defaultValue - The default value of the injection if the `injectKey` has no provide.
- *
- * @returns The object with the inject configuration.
- */
-function getNewInjectObject<DefaultValue>(
-  injectKey: AnyInjectKey<unknown>,
-  componentKey: string,
-  defaultValue?: DefaultValue
-): InjectObjectConfig {
-  return { [componentKey]: { from: injectKey as string, default: { value: defaultValue } } };
-}
-
-/**
- * This function returns the computed configuration for bypass the `value` of the provide
- * of {@link XProvide}. This will be used to override the property decorated with {@link XInject}
- * with the computed.
- *
- * @param computedKey - The key used for the computed.
- * @param privateComponentKey - The "private" component property where the value is actually
- * injected.
- *
- * @returns The computed config to assign/merge with the component options.
- */
-function getComputedProperty(
-  computedKey: string,
-  privateComponentKey: string
-): ComponentOptions<Vue>['computed'] {
-  return {
-    [computedKey]: function (): unknown {
-      return (this as unknown as Record<string, { value: unknown }>)[privateComponentKey].value;
-    }
-  };
-}
-
-/**
- * Type guard to check if a provide configuration is a function.
- *
- * @param provide - The provide configuration.
- * @returns A boolean indicating if the passed provide is a function.
- */
-function isProvideFunction(
-  provide: ComponentOptions<Vue>['provide']
-): provide is (this: Vue) => ProvideObjectConfig {
-  return typeof provide === 'function';
-}
diff --git a/packages/x-components/src/components/decorators/store.decorators.ts b/packages/x-components/src/components/decorators/store.decorators.ts
deleted file mode 100644
index 91f3810b45..0000000000
--- a/packages/x-components/src/components/decorators/store.decorators.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import Vue, { ComponentOptions } from 'vue';
-import { createDecorator } from 'vue-class-component';
-import { getGetterPath } from '../../plugins/x-plugin.utils';
-import { DecoratorFor } from '../../utils/index';
-import { ExtractGetters, ExtractState, XModuleName } from '../../x-modules/x-modules.types';
-
-/**
- * Generates a computed property which returns the selected state.
- *
- * The decorated property needs to be public for type inference to work.
- *
- * @param module - The {@link XModuleName} of the getter.
- * @param path - The state path.
- * @returns Decorator with the state properties of the module.
- *
- * @public
- * @deprecated Use {@link useState} composable instead.
- */
-export function State<Module extends XModuleName, Path extends keyof ExtractState<Module>>(
-  module: Module,
-  path: Path
-): DecoratorFor<ExtractState<Module>[Path]> {
-  return createDecorator((options, key) => {
-    if (!options.computed) {
-      options.computed = {};
-    }
-    Object.assign(options.computed, {
-      [key]() {
-        return this.$store.state.x[module][path];
-      }
-    } as ThisType<Vue>);
-  });
-}
-
-/**
- * Generates a computed property which returns the selected getter value.
- *
- * The decorated property needs to be public for type inference to work.
- *
- * @param module - The {@link XModuleName} of the getter.
- * @param getter - The getter name.
- * @returns Decorator with the getters of the module.
- *
- * @public
- * @deprecated Use {@link useGetter} composable instead.
- */
-export function Getter<Module extends XModuleName, GetterName extends keyof ExtractGetters<Module>>(
-  module: Module,
-  getter: GetterName
-): DecoratorFor<ExtractGetters<Module>[GetterName]> {
-  return createDecorator((options: ComponentOptions<Vue>, key: string) => {
-    if (!options.computed) {
-      options.computed = {};
-    }
-    const getterPath = getGetterPath(module, getter);
-    Object.assign(options.computed, {
-      [key]() {
-        return this.$store.getters[getterPath];
-      }
-    } as ThisType<Vue>);
-  });
-}
diff --git a/packages/x-components/src/components/display-emitter.vue b/packages/x-components/src/components/display-emitter.vue
index ee55f2881c..59a9d1e667 100644
--- a/packages/x-components/src/components/display-emitter.vue
+++ b/packages/x-components/src/components/display-emitter.vue
@@ -2,7 +2,6 @@
   import {
     defineComponent,
     getCurrentInstance,
-    h,
     onMounted,
     onUnmounted,
     PropType,
@@ -30,7 +29,7 @@
       let unwatchDisplay: WatchStopHandle | undefined;
 
       onMounted(() => {
-        const element = getCurrentInstance()?.proxy.$el as HTMLElement | undefined;
+        const element = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined;
         if (element) {
           unwatchDisplay = useEmitDisplayEvent({
             element,
@@ -50,7 +49,7 @@
        * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to
        * retrieve the HTML element in both versions.
        */
-      return () => slots.default?.()[0] ?? h();
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/components/dynamic-props.mixin.ts b/packages/x-components/src/components/dynamic-props.mixin.ts
deleted file mode 100644
index 73d9168c1a..0000000000
--- a/packages/x-components/src/components/dynamic-props.mixin.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import Vue from 'vue';
-import { PropValidator } from 'vue/types/options';
-import { ExtendedVue } from 'vue/types/vue';
-
-/**
- * Mixin that creates a string prop in the component for each element
- * within the array passed as `propNames` argument.
- *
- * @param propNames - Array with the names of the props to create.
- * @example
- * ```typescript
- *
- *   @Component({
- *     components: { RelatedTag },
- *     mixins: [xComponentMixin(relatedTagsXModule)]
- *   })
- *   export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {
- *   // This component will have available 3 props: 'list', 'li' and 'tag'
- *   }
- * ```
- * @returns Mixin for the component.
- * @deprecated Use props.
- */
-export function dynamicPropsMixin<PropNames extends string>(
-  propNames: PropNames[]
-): ExtendedVue<Vue, unknown, unknown, unknown, Partial<Record<PropNames, string>>> {
-  return Vue.extend({
-    props: propNames.reduce(
-      (props, propName) => ({ ...props, [propName]: { type: String } }),
-      {} as Record<PropNames, PropValidator<string>>
-    )
-  });
-}
diff --git a/packages/x-components/src/components/filters/labels/__tests__/base-price-label.spec.ts b/packages/x-components/src/components/filters/labels/__tests__/base-price-label.spec.ts
index 0c0f98711a..8801224f04 100644
--- a/packages/x-components/src/components/filters/labels/__tests__/base-price-label.spec.ts
+++ b/packages/x-components/src/components/filters/labels/__tests__/base-price-label.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { NumberRangeFilter } from '@empathyco/x-types';
 import { getNumberRangeFilterStub } from '../../../../__stubs__/filters-stubs.factory';
 import BasePriceFilterLabel from '../base-price-filter-label.vue';
@@ -10,7 +9,7 @@ function renderBasePriceLabel({
   lessThan = 'Less than {max}',
   from = 'More than {min}',
   fromTo = 'From {min} to {max}'
-}: RenderBasePriceLabelOptions): Wrapper<Vue> {
+}: RenderBasePriceLabelOptions): VueWrapper {
   return mount(
     {
       components: { BasePriceFilterLabel },
diff --git a/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts b/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts
index 0baf21f899..cc32ce4487 100644
--- a/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts
+++ b/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts
@@ -1,6 +1,5 @@
 import { SimpleFilter } from '@empathyco/x-types';
-import Vue from 'vue';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getSimpleFilterStub } from '../../../../__stubs__/filters-stubs.factory';
 import { getDataTestSelector } from '../../../../__tests__/utils';
 import BaseRatingFilterLabel from '../base-rating-filter-label.vue';
@@ -8,7 +7,7 @@ import BaseRatingFilterLabel from '../base-rating-filter-label.vue';
 function renderBaseRatingLabel({
   template = '<BaseRatingFilterLabel :filter="filter"/>',
   filter = getSimpleFilterStub({ label: '3' })
-}: RenderBaseRatingLabelOptions = {}): Wrapper<Vue> {
+}: RenderBaseRatingLabelOptions = {}): VueWrapper {
   return mount(
     {
       components: { BaseRatingFilterLabel },
@@ -37,23 +36,27 @@ describe('testing Base Rating Filter Label component', () => {
     const widthFilledWrapper = `${(parseFloat(value) * 100) / max}%`;
     const wrapper = renderBaseRatingLabel({ filter });
 
-    expect(wrapper.find(getDataTestSelector('rating-filled')).element.style.width).toEqual(
-      widthFilledWrapper
-    );
+    expect(
+      (wrapper.find(getDataTestSelector('rating-filled')).element as HTMLElement).style.width
+    ).toEqual(widthFilledWrapper);
   });
 
   it('renders the default value 0 if the filter label is a negative number', () => {
     const filter = getSimpleFilterStub({ label: '-2' });
     const wrapper = renderBaseRatingLabel({ filter });
 
-    expect(wrapper.find(getDataTestSelector('rating-filled')).element.style.width).toEqual('0%');
+    expect(
+      (wrapper.find(getDataTestSelector('rating-filled')).element as HTMLElement).style.width
+    ).toEqual('0%');
   });
 
   it('renders the default value 0 if the filter label is a not valid number string', () => {
     const filter = getSimpleFilterStub({ label: 'abc' });
     const wrapper = renderBaseRatingLabel({ filter });
 
-    expect(wrapper.find(getDataTestSelector('rating-filled')).element.style.width).toEqual('0%');
+    expect(
+      (wrapper.find(getDataTestSelector('rating-filled')).element as HTMLElement).style.width
+    ).toEqual('0%');
   });
 
   it('renders the content overriding rating-icon-filled slot', () => {
diff --git a/packages/x-components/src/components/filters/labels/base-price-filter-label.vue b/packages/x-components/src/components/filters/labels/base-price-filter-label.vue
index 40de7cfa04..fbdc5e6d1f 100644
--- a/packages/x-components/src/components/filters/labels/base-price-filter-label.vue
+++ b/packages/x-components/src/components/filters/labels/base-price-filter-label.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { computed, defineComponent, h, PropType, VNode, VNodeChildren } from 'vue';
+  import { computed, defineComponent, h, PropType } from 'vue';
   import { RangeValue } from '@empathyco/x-types';
   import BaseCurrency from '../../currency/base-currency.vue';
 
@@ -64,23 +64,19 @@
           : props.fromTo;
       });
 
-      const render = (): VNode => {
+      return () => {
         const labelParts = label.value.split(/({min}|{max})/);
 
-        const children: VNodeChildren = labelParts.map(partMessage => {
+        const children = labelParts.map(partMessage => {
           if (partMessage === '{min}') {
-            return h('BaseCurrency', {
-              props: {
-                value: props.filter.range.min,
-                format: props.format
-              }
+            return h(BaseCurrency, {
+              value: props.filter.range.min as number,
+              format: props.format
             });
           } else if (partMessage === '{max}') {
-            return h('BaseCurrency', {
-              props: {
-                value: props.filter.range.max,
-                format: props.format
-              }
+            return h(BaseCurrency, {
+              value: props.filter.range.max as number,
+              format: props.format
             });
           }
           return partMessage;
@@ -88,8 +84,6 @@
 
         return h('span', { class: 'x-price-filter-label' }, children);
       };
-
-      return render;
     }
   });
 </script>
diff --git a/packages/x-components/src/components/global-x-bus.vue b/packages/x-components/src/components/global-x-bus.vue
index b816054fb5..eefae60612 100644
--- a/packages/x-components/src/components/global-x-bus.vue
+++ b/packages/x-components/src/components/global-x-bus.vue
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, PropType } from 'vue';
   import { XEventListeners } from '../x-installer/api/api.types';
   import { XEvent } from '../wiring/events.types';
-  import { useNoElementRender } from '../composables/use-no-element-render';
   import { useXBus } from '../composables/use-x-bus';
 
   /**
@@ -13,20 +12,26 @@
    */
   export default defineComponent({
     name: 'GlobalXBus',
-    setup(_, { listeners, slots }) {
+    props: {
+      listeners: {
+        type: Object as PropType<XEventListeners>,
+        required: true
+      }
+    },
+    setup(props) {
       const xBus = useXBus();
 
       /**
        * Handles a subscription to all the events provided in the listeners with the function that
        * will execute the callback.
        */
-      Object.entries(listeners as XEventListeners).forEach(([eventName, callback]) => {
+      Object.entries(props.listeners as XEventListeners).forEach(([eventName, callback]) => {
         xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {
           callback(eventPayload as never, metadata);
         });
       });
 
-      return () => useNoElementRender(slots);
+      return () => '';
     }
   });
 </script>
@@ -39,11 +44,11 @@ This component emits no own events, but you can subscribe to any X Event using V
 ## See it in action
 
 This component does not render anything. Its only responsibility is to facilitate listening to any X
-Event by using Vue component listeners.
+Event by using the prop `listeners`
 
 ```vue
 <template>
-  <GlobalXBus @UserAcceptedAQuery="printQuery" />
+  <GlobalXBus :listeners="{ UserAcceptedAQuery: printQuery }" />
 </template>
 
 <script>
diff --git a/packages/x-components/src/components/highlight.vue b/packages/x-components/src/components/highlight.vue
index bcf0965523..f6df1c2a64 100644
--- a/packages/x-components/src/components/highlight.vue
+++ b/packages/x-components/src/components/highlight.vue
@@ -1,36 +1,30 @@
 <template>
-  <NoElement>
-    <slot v-bind="{ text, hasMatch, ...matchParts }">
-      <span class="x-highlight" :class="dynamicCSSClasses">
-        <span
-          v-if="matchParts.start"
-          v-text="matchParts.start"
-          class="x-highlight__text"
-          data-test="highlight-start"
-        />
-        <span
-          v-if="hasMatch"
-          v-text="matchParts.match"
-          class="x-highlight__text x-highlight-text-match"
-          :class="matchingPartClass"
-          data-test="matching-part"
-        />
-        <span
-          v-if="matchParts.end"
-          v-text="matchParts.end"
-          class="x-highlight__text"
-          data-test="highlight-end"
-        />
-      </span>
-    </slot>
-  </NoElement>
+  <span class="x-highlight" :class="dynamicCSSClasses">
+    <span
+      v-if="matchParts.start"
+      v-text="matchParts.start"
+      class="x-highlight__text"
+      data-test="highlight-start"
+    />
+    <span
+      v-if="hasMatch"
+      v-text="matchParts.match"
+      class="x-highlight__text x-highlight-text-match"
+      :class="matchingPartClass"
+      data-test="matching-part"
+    />
+    <span
+      v-if="matchParts.end"
+      v-text="matchParts.end"
+      class="x-highlight__text"
+      data-test="highlight-end"
+    />
+  </span>
 </template>
 
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
-  import { normalizeString } from '../utils/normalize';
-  import { VueCSSClasses } from '../utils/types';
-  import { NoElement } from './no-element';
+  import { normalizeString } from '../utils';
 
   /**
    * Highlights the given part of the text. The component is smart enough to do matches
@@ -40,58 +34,59 @@
    */
   export default defineComponent({
     name: 'Highlight',
-    components: { NoElement },
     props: {
-      /**
-       * The text to highlight some part of it.
-       *
-       * @public
-       */
+      /** The text to highlight some part of it. */
       text: {
         type: String,
         default: ''
       },
-      /**
-       * The part of the text to be highlighted.
-       *
-       * @public
-       */
+      /** The part of the text to be highlighted. */
       highlight: {
         type: String,
         default: ''
       },
-      /**
-       * CSS Class to add when the `text` string contains the `highlight` string.
-       */
+      /** CSS Class to add when the `text` string contains the `highlight` string. */
       matchClass: {
         type: String,
         default: ''
       },
-      /**
-       * CSS Class to add when the given `text` doesn't contain the `highlight` string.
-       */
+      /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */
       noMatchClass: {
         type: String,
         default: ''
       },
-      /**
-       * CSS Class to add to the matching text.
-       */
+      /** CSS Class to add to the matching text. */
       matchingPartClass: {
         type: String,
         default: ''
       }
     },
-    setup: function (props) {
+    setup(props, { slots }) {
+      /**
+       * Splits the label in three parts based on two indexes.
+       *
+       * @param label - The string that will be divided in three parts.
+       * @param start - The first index that the label will be divided by.
+       * @param end - The second index that the label will be divided by.
+       *
+       * @returns The three parts of the divided label.
+       */
+      function splitAt(label: string, start: number, end: number) {
+        return {
+          start: label.substring(0, start),
+          match: label.substring(start, end),
+          end: label.substring(end)
+        };
+      }
+
       /**
        * Splits the text to highlight into 3 parts: a starting part, the matching part
        * and the ending part. If there is no match between the text and the highlight, the `start`
        * property will contain the whole text.
        *
        * @returns An object containing the different parts of the text.
-       * @internal
        */
-      const matchParts = computed((): HighlightMatch => {
+      const matchParts = computed(() => {
         const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));
         return matcherIndex !== -1 && props.highlight
           ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)
@@ -103,11 +98,8 @@
        * matching part.
        *
        * @returns True if there is a match between the text and the highlight strings.
-       * @internal
        */
-      const hasMatch = computed((): boolean => {
-        return !!matchParts.value.match;
-      });
+      const hasMatch = computed(() => !!matchParts.value.match);
 
       /**
        * CSS classes to add depending on the component state.
@@ -117,11 +109,10 @@
        * `[matchClass]`: When there is a match between the text and
        * the part to highlight.
        * `[noMatchClass]`: when there is no match between the text to highlight.
-       * @returns The {@link VueCSSClasses} classes.
-       * @internal
+       * @returns The CSS classes.
        */
-      const dynamicCSSClasses = computed((): VueCSSClasses => {
-        const classes: VueCSSClasses = {
+      const dynamicCSSClasses = computed(() => {
+        const classes = {
           'x-highlight--has-match': hasMatch.value,
           'x-highlight-text': hasMatch.value,
           [props.matchClass]: hasMatch.value
@@ -133,45 +124,29 @@
       });
 
       /**
-       * Splits the label in three parts based on two indexes.
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
        *
-       * @param label - The string that will be divided in three parts.
-       * @param start - The first index that the label will be divided by.
-       * @param end - The second index that the label will be divided by.
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
        *
-       * @returns The three parts of the divided label.
-       * @internal
+       * @returns The root `vNode` of the `default` slot.
        */
-      function splitAt(label: string, start: number, end: number): HighlightMatch {
-        return {
-          start: label.substring(0, start),
-          match: label.substring(start, end),
-          end: label.substring(end)
+      function renderDefaultSlot() {
+        const slotProps = {
+          text: props.text,
+          hasMatch: hasMatch.value,
+          ...matchParts.value
         };
+        return slots.default?.(slotProps)[0];
       }
 
-      return { hasMatch, matchParts, dynamicCSSClasses };
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { hasMatch, matchParts, dynamicCSSClasses };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
-
-  /**
-   * Contains the different parts of a string match.
-   */
-  interface HighlightMatch {
-    /**
-     * When the match does not happen from the beginning of the string, the initial unmatched
-     * part.
-     */
-    start: string;
-    /**
-     * The part of the text that is matching.
-     */
-    match: string;
-    /**
-     * When the match does not extend until the end, the remaining unmatched string.
-     */
-    end: string;
-  }
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/index.ts b/packages/x-components/src/components/index.ts
index cfa6e7a4f0..3f751fbb89 100644
--- a/packages/x-components/src/components/index.ts
+++ b/packages/x-components/src/components/index.ts
@@ -24,16 +24,10 @@ export { default as GlobalXBus } from './global-x-bus.vue';
 export { default as Highlight } from './highlight.vue';
 export { default as ItemsList } from './items-list.vue';
 export { default as LocationProvider } from './location-provider.vue';
-export { NoElement } from './no-element';
 export { default as SlidingPanel } from './sliding-panel.vue';
 export { default as SnippetCallbacks } from './snippet-callbacks.vue';
 export { default as PageLoaderButton } from './page-loader-button.vue';
 
 // Utils
-export * from './decorators/bus.decorators';
-export * from './decorators/debounce.decorators';
 export * from './decorators/injection.consts';
-export * from './decorators/injection.decorators';
-export * from './decorators/store.decorators';
-export * from './x-component.mixin';
 export * from './x-component.utils';
diff --git a/packages/x-components/src/components/items-list.vue b/packages/x-components/src/components/items-list.vue
index 4634c4cdd3..206beb7fa2 100644
--- a/packages/x-components/src/components/items-list.vue
+++ b/packages/x-components/src/components/items-list.vue
@@ -37,58 +37,35 @@
   export default defineComponent({
     name: 'ItemsList',
     props: {
-      /**
-       * Animation component that will be used to animate the list.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the list. */
       animation: {
         type: animationProp,
         default: 'ul'
       },
-
-      /**
-       * List of items.
-       *
-       * @public
-       */
+      /** List of items. */
       items: {
         type: Array as PropType<ListItem[]>,
         required: true
       },
-
-      /**
-       * Item's classes.
-       *
-       * @public
-       */
-      itemClass: {
-        type: String
-      }
+      /** Item's classes. */
+      itemClass: String
     },
     setup(props) {
       /**
        * The list of the items with additional properties.
        *
        * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
-       *
-       * @internal
        */
-      const computedItems = computed(
-        (): {
-          dataTest: string;
-          class: Array<string | undefined>;
-        }[] => {
-          return props.items.map(item => {
-            const modelName = toKebabCase(item.modelName);
-            return {
-              ...item,
-              dataTest: `${modelName}s-list-item`,
-              class: [`x-${modelName}s-list-item`, props.itemClass],
-              slotName: modelName
-            };
-          });
-        }
+      const computedItems = computed(() =>
+        props.items.map(item => {
+          const modelName = toKebabCase(item.modelName);
+          return {
+            ...item,
+            dataTest: `${modelName}s-list-item`,
+            class: [`x-${modelName}s-list-item`, props.itemClass],
+            slotName: modelName
+          };
+        })
       );
 
       return { computedItems };
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index 18737d8819..c9bee85d8c 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -13,7 +13,7 @@
       />
 
       <header
-        v-if="hasContent('header')"
+        v-if="devMode || $slots['header']"
         key="header"
         class="x-layout__header x-list x-list--horizontal"
       >
@@ -23,7 +23,7 @@
         </slot>
       </header>
 
-      <div v-if="hasContent('sub-header')" key="sub-header" class="x-layout__sub-header">
+      <div v-if="devMode || $slots['sub-header']" key="sub-header" class="x-layout__sub-header">
         <div class="x-layout__sub-header-content">
           <!-- @slot Slot that can be used to insert content into below the header. -->
           <slot name="sub-header">
@@ -32,14 +32,18 @@
         </div>
       </div>
 
-      <section v-if="hasContent('toolbar')" key="toolbar" class="x-layout__toolbar">
+      <section v-if="devMode || $slots['toolbar']" key="toolbar" class="x-layout__toolbar">
         <slot name="toolbar">
           <!-- @slot Slot that can be used to insert content above the main. -->
           <span v-if="devMode" class="slot-helper">TOOLBAR</span>
         </slot>
       </section>
 
-      <main v-if="hasContent('main')" key="main" class="x-layout__main x-list x-list--vertical">
+      <main
+        v-if="devMode || $slots['main']"
+        key="main"
+        class="x-layout__main x-list x-list--vertical"
+      >
         <!-- @slot Slot that is be used for insert content into the Main. -->
         <slot name="main">
           <span v-if="devMode" class="slot-helper">MAIN</span>
@@ -47,7 +51,7 @@
       </main>
 
       <BaseIdModal
-        v-if="hasContent('left-aside')"
+        v-if="devMode || $slots['left-aside']"
         key="left-aside"
         :animation="leftAsideAnimation"
         modalId="left-aside"
@@ -60,7 +64,7 @@
       </BaseIdModal>
 
       <BaseIdModal
-        v-if="hasContent('right-aside')"
+        v-if="devMode || $slots['right-aside']"
         key="right-aside"
         :animation="rightAsideAnimation"
         modalId="right-aside"
@@ -76,7 +80,11 @@
         <span v-if="devMode" class="slot-helper">EXTRA ASIDE</span>
       </slot>
 
-      <div v-if="hasContent('scroll-to-top')" key="scroll-to-top" class="x-layout__scroll-to-top">
+      <div
+        v-if="devMode || $slots['scroll-to-top']"
+        key="scroll-to-top"
+        class="x-layout__scroll-to-top"
+      >
         <slot name="scroll-to-top">
           <span v-if="devMode" class="slot-helper">SCROLL TO TOP</span>
         </slot>
@@ -86,13 +94,11 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { computed, defineComponent, ref } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import BaseIdModal from '../modals/base-id-modal.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
-  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the components.
@@ -103,37 +109,23 @@
    */
   export default defineComponent({
     name: 'FixedHeaderAndAsidesLayout',
-    components: {
-      BaseIdModal,
-      MainScroll,
-      Scroll
-    },
+    components: { BaseIdModal, MainScroll, Scroll },
     props: {
-      /**
-       * Enables the devMode, which shows the available slots to use with its names.
-       *
-       * @public
-       */
-      devMode: {
-        type: Boolean,
-        default: false
-      }
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     },
-    setup: function (props, { slots }) {
-      const { hasContent } = useLayouts(props.devMode, slots);
-
+    setup() {
       const scrollPosition = ref(0);
 
       const rightAsideAnimation = animateTranslate('right');
       const leftAsideAnimation = animateTranslate('left');
 
-      const setPosition = (position: number): void => {
+      const setPosition = (position: number) => {
         scrollPosition.value = position;
       };
       const isBackdropVisible = computed(() => scrollPosition.value > 0);
 
       return {
-        hasContent,
         rightAsideAnimation,
         leftAsideAnimation,
         setPosition,
@@ -143,16 +135,16 @@
   });
 </script>
 
-<style scoped lang="scss">
-  @import '../../design-system-deprecated/utilities/dev-mode';
+<style lang="css" scoped>
+  @import url('../../design-system-deprecated/utilities/dev-mode.css');
 
   .x-layout {
-    // custom properties
+    /* custom properties */
     display: grid;
     align-content: stretch;
     min-height: 100%;
 
-    // layout
+    /* layout */
     max-height: 100%;
     --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);
     --x-size-margin-layout: max(
@@ -179,112 +171,110 @@
       [max-width-end]
       var(--x-size-margin-layout)
       [page-end];
+  }
 
-    &__header {
-      // layout
-      position: sticky;
-      top: -0.5px;
-      z-index: 2;
-      grid-row: header;
-      grid-column: page;
-      max-height: var(--x-size-max-height-layout-header, auto);
-      padding: 0 var(--x-size-margin-layout);
-
-      //color
-      background: var(--x-color-background-layout-header, transparent);
-      border-color: var(--x-size-border-color-layout-header, transparent);
-
-      // border
-      border-width: var(--x-size-border-width-layout-header, 0);
-      border-style: solid;
-    }
+  .x-layout__header {
+    /* layout */
+    position: sticky;
+    top: -0.5px;
+    z-index: 2;
+    grid-row: header;
+    grid-column: page;
+    max-height: var(--x-size-max-height-layout-header, auto);
+    padding: 0 var(--x-size-margin-layout);
+
+    /* color */
+    background: var(--x-color-background-layout-header, transparent);
+    border-color: var(--x-size-border-color-layout-header, transparent);
+
+    /* border */
+    border-width: var(--x-size-border-width-layout-header, 0);
+    border-style: solid;
+  }
 
-    &__sub-header {
-      // layout
-      grid-row: sub-header;
-      grid-column: page;
-      padding: 0 var(--x-size-margin-layout);
+  .x-layout__sub-header {
+    /* layout */
+    grid-row: sub-header;
+    grid-column: page;
+    padding: 0 var(--x-size-margin-layout);
 
-      //color
-      background: var(--x-color-background-layout-sub-header, transparent);
-      border-color: var(--x-size-border-color-layout-sub-header, transparent);
+    /* color */
+    background: var(--x-color-background-layout-sub-header, transparent);
+    border-color: var(--x-size-border-color-layout-sub-header, transparent);
 
-      // border
-      border-width: var(--x-size-border-width-layout-sub-header, 0);
-      border-style: solid;
-    }
+    /* border */
+    border-width: var(--x-size-border-width-layout-sub-header, 0);
+    border-style: solid;
+  }
 
-    &__toolbar {
-      // layout
-      grid-row: toolbar;
-      grid-column: max-width;
-    }
+  .x-layout__toolbar {
+    /* layout */
+    grid-row: toolbar;
+    grid-column: max-width;
+  }
 
-    &__main {
-      // layout
-      grid-row: main;
-      grid-column: max-width;
-    }
+  .x-layout__main {
+    /* layout */
+    grid-row: main;
+    grid-column: max-width;
+  }
 
-    ::v-deep .x-layout__aside {
-      &.x-modal {
-        // layout
-        z-index: 3;
-        flex-flow: row nowrap;
-      }
-
-      // others
-      pointer-events: none;
-      > *:not(.slot-helper) {
-        pointer-events: all;
-      }
-
-      &--right.x-modal {
-        justify-content: flex-end;
-      }
-    }
+  /* layout */
+  .x-layout :deep(.x-layout__aside.x-modal) {
+    z-index: 3;
+    flex-flow: row nowrap;
+  }
 
-    &__scroll-to-top {
-      position: fixed;
-      z-index: 1;
-      bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);
-      right: var(--x-size-margin-right-layout-scroll-to-top, 16px);
-    }
+  /* layout */
+  .x-layout :deep(.x-layout__aside--right.x-modal) {
+    justify-content: flex-end;
+  }
 
-    &__header-backdrop {
-      // layout
-      grid-row: page;
-      grid-column: page;
-      position: sticky;
-      top: -0.5px;
-      z-index: 1;
-      height: var(--x-size-height-layout-backdrop, 40vh);
-      width: 100%;
-      pointer-events: none;
-
-      // color
-      background-color: var(
-        --x-color-background-layout-header-backdrop,
-        var(--x-color-base-neutral-100, white)
-      );
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
-
-      // transition
-      opacity: 0;
-      transition: opacity 0.2s ease-out;
-
-      &--is-visible {
-        opacity: 1;
-      }
-    }
+  /* others */
+  .x-layout :deep(.x-layout__aside) {
+    pointer-events: none;
+  }
+  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {
+    pointer-events: all;
   }
 
-  ::v-deep .x-layout__aside {
-    .x-modal__content {
-      background-color: transparent;
-      height: 100%;
-      width: var(--x-size-width-layout-aside, 300px);
-    }
+  .x-layout__scroll-to-top {
+    position: fixed;
+    z-index: 1;
+    bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);
+    right: var(--x-size-margin-right-layout-scroll-to-top, 16px);
+  }
+
+  .x-layout__header-backdrop {
+    /* layout */
+    grid-row: page;
+    grid-column: page;
+    position: sticky;
+    top: -0.5px;
+    z-index: 1;
+    height: var(--x-size-height-layout-backdrop, 40vh);
+    width: 100%;
+    pointer-events: none;
+
+    /* color */
+    background-color: var(
+      --x-color-background-layout-header-backdrop,
+      var(--x-color-base-neutral-100, white)
+    );
+    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+
+    /* transition */
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+  }
+  .x-layout__header-backdrop--is-visible {
+    opacity: 1;
+  }
+
+  .x-layout :deep(.x-layout__aside .x-modal__content) {
+    background-color: transparent;
+    height: 100%;
+    width: var(--x-size-width-layout-aside, 300px);
   }
 </style>
 
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index d8e2e08f9c..bb53627668 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -2,24 +2,24 @@
   <div
     class="x-layout x-layout--columns"
     :class="{ 'dev-mode': devMode }"
-    :style="{ height: hasContent('main-body') ? '100%' : 'auto' }"
+    :style="{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }"
   >
     <header class="x-layout__header">
-      <div v-if="hasContent('header-start')" class="x-list x-layout__header-start">
+      <div v-if="devMode || $slots['header-start']" class="x-list x-layout__header-start">
         <!-- @slot Slot that can be used to insert content into the left part of the header. -->
         <slot name="header-start">
           <span v-if="devMode" class="slot-helper">HEADER START</span>
         </slot>
       </div>
 
-      <div v-if="hasContent('header-middle')" class="x-list x-layout__header-middle">
+      <div v-if="devMode || $slots['header-middle']" class="x-list x-layout__header-middle">
         <!-- @slot Slot that can be used to insert content into the center part of the header. -->
         <slot name="header-middle">
           <span v-if="devMode" class="slot-helper">HEADER MIDDLE</span>
         </slot>
       </div>
 
-      <div v-if="hasContent('header-end')" class="x-list x-layout__header-end">
+      <div v-if="devMode || $slots['header-end']" class="x-list x-layout__header-end">
         <!-- @slot Slot that can be used to insert content into the right part of the header. -->
         <slot name="header-end">
           <span v-if="devMode" class="slot-helper">HEADER END</span>
@@ -27,7 +27,7 @@
       </div>
     </header>
 
-    <div v-if="hasContent('sub-header')" class="x-layout__sub-header">
+    <div v-if="devMode || $slots['sub-header']" class="x-layout__sub-header">
       <div class="x-layout__sub-header-content">
         <!-- @slot Slot that can be used to insert content into below the header. -->
         <slot name="sub-header">
@@ -36,7 +36,10 @@
       </div>
     </div>
 
-    <section v-if="hasContent('toolbar-aside', 'toolbar-body')" class="x-layout__toolbar">
+    <section
+      v-if="devMode || $slots['toolbar-aside'] || $slots['toolbar-body']"
+      class="x-layout__toolbar"
+    >
       <aside class="x-list x-layout__toolbar-aside">
         <slot name="toolbar-aside">
           <!-- @slot Slot that can be used to insert content above the left aside. -->
@@ -54,7 +57,7 @@
 
     <main class="x-layout__main">
       <BaseIdTogglePanel
-        v-if="hasContent('main-aside')"
+        v-if="devMode || $slots['main-aside']"
         panelId="aside-panel"
         :animation="asideAnimation"
         class="x-layout__collapse-aside"
@@ -70,7 +73,11 @@
       </BaseIdTogglePanel>
 
       <MainScroll class="x-flex x-flex-auto">
-        <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
+        <Scroll
+          v-if="devMode || $slots['main-body']"
+          id="main-scroll"
+          class="x-layout__body-scroll"
+        >
           <section class="x-layout__main-body x-list x-list--vertical">
             <!-- @slot Slot that can be used to insert the body content. -->
             <slot name="main-body">
@@ -81,7 +88,7 @@
       </MainScroll>
     </main>
 
-    <div v-if="hasContent('scroll-to-top')" class="x-layout__scroll-to-top">
+    <div v-if="devMode || $slots['scroll-to-top']" class="x-layout__scroll-to-top">
       <div class="x-layout__scroll-to-top-content">
         <slot name="scroll-to-top">
           <span v-if="devMode" class="slot-helper" style="height: 50px">SCROLL TO TOP</span>
@@ -92,14 +99,12 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { defineComponent } from 'vue';
+  import { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import AnimateWidth from '../animations/animate-width.vue';
   import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';
   import { AnimationProp } from '../../types';
-  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the Components.
@@ -112,54 +117,38 @@
     name: 'MultiColumnMaxWidthLayout',
     components: { BaseIdTogglePanel, MainScroll, Scroll },
     props: {
-      /**
-       * The animation used for the Main Aside.
-       *
-       * @public
-       */
+      /** The animation used for the Main Aside. */
       asideAnimation: {
         type: AnimationProp,
         default: () => AnimateWidth
       },
-      /**
-       * Enables the devMode, which shows the available slots to use with its names.
-       *
-       * @public
-       */
-      devMode: {
-        type: Boolean,
-        default: false
-      }
-    },
-    setup: function (props, { slots }) {
-      const { hasContent } = useLayouts(props.devMode, slots);
-
-      return { hasContent };
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     }
   });
 </script>
 
-<style lang="scss">
+<style lang="css">
   :root {
-    //layout
+    /* layout */
     --x-size-min-margin-layout-columns: var(--x-size-base-06);
     --x-size-column-gap-layout-columns: var(--x-size-base-06);
 
-    //spacing
+    /* spacing */
 
-    // size - header
+    /* size - header */
     --x-size-padding-top-layout-columns-header: var(--x-size-base-07);
     --x-size-padding-bottom-layout-columns-header: var(--x-size-base-05);
 
-    // size - toolbar
+    /* size - toolbar */
     --x-size-padding-top-layout-columns-toolbar: var(--x-size-base-05);
     --x-size-padding-bottom-layout-columns-toolbar: var(--x-size-base-03);
 
-    // size- scroll-to-top
+    /* size- scroll-to-top */
     --x-size-margin-bottom-layout-columns-scroll-to-top: var(--x-size-base-03);
     --x-size-margin-left-layout-columns-scroll-to-top: var(--x-size-base-03);
 
-    // color
+    /* color */
     --x-color-background-layout-columns: var(--x-color-base-neutral-100);
     --x-color-border-layout-columns: var(--x-color-base-neutral-70);
     --x-color-border-layout-columns-header: var(--x-color-border-layout-columns);
@@ -169,17 +158,17 @@
     --x-color-border-layout-columns-main-aside: var(--x-color-border-layout-columns);
     --x-color-border-layout-columns-main-body: var(--x-color-border-layout-columns);
 
-    // border
+    /* border */
     --x-size-border-width-layout-columns-header: 0;
     --x-size-border-width-layout-columns-toolbar: 1px 0 0;
   }
 </style>
 
-<style lang="scss" scoped>
-  @import '../../design-system-deprecated/utilities/dev-mode';
+<style lang="css" scoped>
+  @import url('../../design-system-deprecated/utilities/dev-mode.css');
 
   .x-layout {
-    // custom properties
+    /* custom properties */
     --x-size-gap-default: var(--x-size-column-gap-layout-columns, 20px);
     --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout-columns, 1440px)) / 2);
     --x-size-margin-layout-columns: max(
@@ -190,7 +179,7 @@
     --x-number-columns-sub-header-content: var(--x-number-columns-header-middle);
     --x-number-columns-toolbar-body: calc(var(--x-number-columns-layout-columns, 5) - 1);
 
-    // layout
+    /* layout */
     display: grid;
     align-content: stretch;
     max-height: 100%;
@@ -214,244 +203,235 @@
       [scroll-to-top-start]
       auto
       [main-end scroll-to-top-end page-end];
+  }
 
-    &__header {
-      // layout
-      grid-column: page;
-      grid-row: header;
-      display: grid;
-      column-gap: var(--x-size-gap-default);
-
-      grid-template-columns:
-        [header-start]
-        var(--x-size-margin-layout-columns)
-        [start-content-start]
-        1fr
-        [start-content-end middle-content-start]
-        repeat(var(--x-number-columns-header-middle), 1fr)
-        [middle-content-end end-content-start]
-        1fr
-        [end-content-end]
-        var(--x-size-margin-layout-columns)
-        [header-end];
-
-      // size
-      padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);
-      margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);
-
-      // color
-      background-color: var(--x-color-background-layout-columns-header, transparent);
-      border-color: var(--x-color-border-layout-columns-header, transparent);
-
-      // border
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-header, 0);
-    }
-
-    &__header-start {
-      // layout
-      grid-column: start-content;
-
-      &.x-list {
-        // space
-        flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-header-start, flex start);
-        align-items: var(--x-size-align-layout-columns-header-start, flex start);
-      }
-    }
-
-    &__header-middle {
-      // layout
-      grid-column: middle-content;
-
-      &.x-list {
-        // space
-        flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-header-middle, center);
-        align-items: var(--x-size-align-layout-columns-header-middle, flex start);
-      }
-    }
-
-    &__header-end {
-      // layout
-      grid-column: end-content;
-
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);
-        align-items: var(--x-size-align-layout-columns-header-end, flex-start);
-      }
-    }
+  .x-layout__header {
+    /* layout */
+    grid-column: page;
+    grid-row: header;
+    display: grid;
+    column-gap: var(--x-size-gap-default);
 
-    &__sub-header {
-      // layout
-      grid-column: page;
-      grid-row: sub-header;
-      display: grid;
-      column-gap: var(--x-size-gap-default);
-
-      grid-template-columns:
-        [sub-header-start]
-        var(--x-size-margin-layout-columns)
-        1fr
-        [sub-header-content-start]
-        repeat(var(--x-number-columns-sub-header-content), 1fr)
-        [sub-header-content-end]
-        1fr
-        var(--x-size-margin-layout-columns)
-        [sub-header-end];
-
-      // size
-      padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;
-      margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);
-
-      // color
-      background-color: var(--x-color-background-layout-columns-sub-header, transparent);
-      border-color: var(--x-color-border-layout-columns-sub-header, transparent);
-
-      // border
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-sub-header, 0);
-    }
+    grid-template-columns:
+      [header-start]
+      var(--x-size-margin-layout-columns)
+      [start-content-start]
+      1fr
+      [start-content-end middle-content-start]
+      repeat(var(--x-number-columns-header-middle), 1fr)
+      [middle-content-end end-content-start]
+      1fr
+      [end-content-end]
+      var(--x-size-margin-layout-columns)
+      [header-end];
+
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);
+    margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);
+
+    /* color */
+    background-color: var(--x-color-background-layout-columns-header, transparent);
+    border-color: var(--x-color-border-layout-columns-header, transparent);
+
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-header, 0);
+  }
 
-    &__sub-header-content {
-      // layout
-      grid-column: sub-header-content;
+  .x-layout__header-start {
+    /* layout */
+    grid-column: start-content;
+  }
+  .x-layout__header-start.x-list {
+    /* space */
+    flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-header-start, flex start);
+    align-items: var(--x-size-align-layout-columns-header-start, flex start);
+  }
 
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);
-        align-items: var(--x-size-align-layout-columns-sub-header, flex-start);
-      }
-    }
+  .x-layout__header-middle {
+    /* layout */
+    grid-column: middle-content;
+  }
+  .x-layout__header-middle.x-list {
+    /* space */
+    flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-header-middle, center);
+    align-items: var(--x-size-align-layout-columns-header-middle, flex start);
+  }
 
-    &__toolbar {
-      // layout
-      grid-column: page;
-      grid-row: toolbar;
-      display: grid;
-      column-gap: var(--x-size-gap-default);
-
-      grid-template-columns:
-        [toolbar-start]
-        var(--x-size-margin-layout-columns)
-        [toolbar-aside-start]
-        1fr
-        [toolbar-aside-end toolbar-body-start]
-        repeat(var(--x-number-columns-toolbar-body), 1fr)
-        [toolbar-body-end]
-        var(--x-size-margin-layout-columns)
-        [toolbar-end];
-
-      // size
-      padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);
-      margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);
-
-      // color
-      background-color: var(--x-color-background-layout-columns-toolbar, transparent);
-      border-color: var(--x-color-border-layout-columns-toolbar, transparent);
-
-      // border
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-toolbar, 0);
-    }
+  .x-layout__header-end {
+    /* layout */
+    grid-column: end-content;
+  }
+  .x-layout__header-end.x-list {
+    flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);
+    align-items: var(--x-size-align-layout-columns-header-end, flex-start);
+  }
 
-    &__toolbar-aside {
-      // layout
-      grid-column: toolbar-aside;
+  .x-layout__sub-header {
+    /* layout */
+    grid-column: page;
+    grid-row: sub-header;
+    display: grid;
+    column-gap: var(--x-size-gap-default);
 
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);
-        align-items: var(--x-size-align-layout-columns-toolbar-aside, center);
-      }
-    }
+    grid-template-columns:
+      [sub-header-start]
+      var(--x-size-margin-layout-columns)
+      1fr
+      [sub-header-content-start]
+      repeat(var(--x-number-columns-sub-header-content), 1fr)
+      [sub-header-content-end]
+      1fr
+      var(--x-size-margin-layout-columns)
+      [sub-header-end];
+
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;
+    margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);
+
+    /* color */
+    background-color: var(--x-color-background-layout-columns-sub-header, transparent);
+    border-color: var(--x-color-border-layout-columns-sub-header, transparent);
+
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-sub-header, 0);
+  }
 
-    &__toolbar-body {
-      // layout
-      grid-column: toolbar-body;
+  .x-layout__sub-header-content {
+    /* layout */
+    grid-column: sub-header-content;
+  }
+  .x-layout__sub-header-content.x-list {
+    flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);
+    align-items: var(--x-size-align-layout-columns-sub-header, flex-start);
+  }
 
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);
-        align-items: var(--x-size-align-layout-columns-toolbar-body, center);
-      }
-    }
+  .x-layout__toolbar {
+    /* layout */
+    grid-column: page;
+    grid-row: toolbar;
+    display: grid;
+    column-gap: var(--x-size-gap-default);
 
-    &__main {
-      // layout
-      grid-column: page;
-      grid-row: main;
-      min-height: 0;
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: stretch;
-      padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));
-
-      // size
-      padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);
-      margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);
-
-      // color
-      background-color: var(--x-color-background-layout-columns-main, transparent);
-      border-color: var(--x-color-border-layout-columns-main, transparent);
-
-      // border
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-main, 0);
-    }
+    grid-template-columns:
+      [toolbar-start]
+      var(--x-size-margin-layout-columns)
+      [toolbar-aside-start]
+      1fr
+      [toolbar-aside-end toolbar-body-start]
+      repeat(var(--x-number-columns-toolbar-body), 1fr)
+      [toolbar-body-end]
+      var(--x-size-margin-layout-columns)
+      [toolbar-end];
+
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);
+    margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);
+
+    /* color */
+    background-color: var(--x-color-background-layout-columns-toolbar, transparent);
+    border-color: var(--x-color-border-layout-columns-toolbar, transparent);
+
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-toolbar, 0);
+  }
 
-    &__collapse-aside {
-      width: calc(
-        (
-            100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -
-              var(--x-size-margin-layout-columns)
-          ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)
-      );
-    }
+  .x-layout__toolbar-aside {
+    /* layout */
+    grid-column: toolbar-aside;
+  }
+  .x-layout__toolbar-aside.x-list {
+    flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);
+    align-items: var(--x-size-align-layout-columns-toolbar-aside, center);
+  }
 
-    &__aside-scroll {
-      height: 100%;
-      margin-right: var(--x-size-gap-default);
-    }
+  .x-layout__toolbar-body {
+    /* layout */
+    grid-column: toolbar-body;
+  }
+  .x-layout__toolbar-body.x-list {
+    flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);
+    align-items: var(--x-size-align-layout-columns-toolbar-body, center);
+  }
 
-    &__body-scroll {
-      flex: 1 1 auto;
-      width: 0;
-      padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);
+  .x-layout__main {
+    /* layout */
+    grid-column: page;
+    grid-row: main;
+    min-height: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: stretch;
+    padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));
+
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);
+    margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);
+
+    /* color */
+    background-color: var(--x-color-background-layout-columns-main, transparent);
+    border-color: var(--x-color-border-layout-columns-main, transparent);
+
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-main, 0);
+  }
 
-      &.x-scroll {
-        overflow-y: scroll;
-      }
-    }
+  .x-layout__collapse-aside {
+    width: calc(
+      (
+          100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -
+            var(--x-size-margin-layout-columns)
+        ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)
+    );
+  }
 
-    &__scroll-to-top {
-      //layout
-      grid-area: scroll-to-top;
-      justify-content: flex-end;
-      width: 100%;
-      display: flex;
-      z-index: 1;
-      pointer-events: none;
-    }
+  .x-layout__aside-scroll {
+    height: 100%;
+    margin-right: var(--x-size-gap-default);
+  }
 
-    &__scroll-to-top-content {
-      flex: 1 0 auto;
-      padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);
-      padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);
+  .x-layout__body-scroll {
+    flex: 1 1 auto;
+    width: 0;
+    padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);
+  }
+  .x-layout__body-scroll.x-scroll {
+    overflow-y: scroll;
+  }
 
-      ::v-deep > * {
-        pointer-events: all;
-      }
-    }
+  .x-layout__scroll-to-top {
+    /* layout */
+    grid-area: scroll-to-top;
+    justify-content: flex-end;
+    width: 100%;
+    display: flex;
+    z-index: 1;
+    pointer-events: none;
+  }
+  .x-layout__scroll-to-top-content {
+    flex: 1 0 auto;
+    padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);
+    padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);
+  }
+  .x-layout__scroll-to-top-content > * {
+    pointer-events: all;
   }
 </style>
 
diff --git a/packages/x-components/src/components/layouts/single-column-layout.vue b/packages/x-components/src/components/layouts/single-column-layout.vue
index b974f7dbf6..7a077638e8 100644
--- a/packages/x-components/src/components/layouts/single-column-layout.vue
+++ b/packages/x-components/src/components/layouts/single-column-layout.vue
@@ -1,27 +1,33 @@
 <template>
   <div class="x-layout x-layout--single-column" :class="{ 'dev-mode': devMode }">
-    <header v-if="hasContent('header')" class="x-layout__header x-list x-list--horizontal">
+    <header v-if="devMode || $slots['header']" class="x-layout__header x-list x-list--horizontal">
       <!-- @slot Slot that is used to insert content into the Header. -->
       <slot name="header">
         <span v-if="devMode" class="slot-helper">HEADER</span>
       </slot>
     </header>
 
-    <div v-if="hasContent('sub-header')" class="x-layout__sub-header x-list x-list--horizontal">
+    <div
+      v-if="devMode || $slots['sub-header']"
+      class="x-layout__sub-header x-list x-list--horizontal"
+    >
       <!-- @slot Slot that can be used to insert content into the Sub Header. -->
       <slot name="sub-header">
         <span v-if="devMode" class="slot-helper">SUB HEADER</span>
       </slot>
     </div>
 
-    <div v-if="hasContent('toolbar')" class="x-layout__toolbar x-list x-list--horizontal">
+    <div v-if="devMode || $slots['toolbar']" class="x-layout__toolbar x-list x-list--horizontal">
       <!-- @slot Slot that can be used to insert content into the Toolbar. -->
       <slot name="toolbar">
         <span v-if="devMode" class="slot-helper">TOOLBAR</span>
       </slot>
     </div>
 
-    <div v-if="hasContent('predictive')" class="x-layout__predictive x-list x-list--vertical">
+    <div
+      v-if="devMode || $slots['predictive']"
+      class="x-layout__predictive x-list x-list--vertical"
+    >
       <BaseScroll class="x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand">
         <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->
         <slot name="predictive">
@@ -30,7 +36,7 @@
       </BaseScroll>
     </div>
 
-    <main v-if="hasContent('main')" class="x-layout__main">
+    <main v-if="devMode || $slots['main']" class="x-layout__main">
       <MainScroll>
         <Scroll id="main-scroll" class="x-layout__main-scroll x-list x-list--vertical">
           <!-- @slot Slot that can be used to insert content into the Main. -->
@@ -41,14 +47,14 @@
       </MainScroll>
     </main>
 
-    <div v-if="hasContent('floating')" class="x-layout__floating x-list x-list--horizontal">
+    <div v-if="devMode || $slots['floating']" class="x-layout__floating x-list x-list--horizontal">
       <!-- @slot Slot that can be used to insert content into the Floating. -->
       <slot name="floating">
         <span v-if="devMode" class="slot-helper">FLOATING</span>
       </slot>
     </div>
 
-    <footer v-if="hasContent('footer')" class="x-layout__footer x-list x-list--horizontal">
+    <footer v-if="devMode || $slots['footer']" class="x-layout__footer x-list x-list--horizontal">
       <!-- @slot Slot that can be used to insert content into the Footer. -->
       <slot name="footer">
         <span v-if="devMode" class="slot-helper">FOOTER</span>
@@ -56,7 +62,7 @@
     </footer>
 
     <BaseIdModal
-      v-if="hasContent('aside')"
+      v-if="devMode || $slots['aside']"
       :animation="asideAnimation"
       modalId="aside-modal"
       class="x-layout__aside"
@@ -74,15 +80,13 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { defineComponent } from 'vue';
+  import { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import BaseIdModal from '../modals/base-id-modal.vue';
   import BaseScroll from '../scroll/base-scroll.vue';
   import { AnimationProp } from '../../types';
-  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the Components.
@@ -95,35 +99,19 @@
     name: 'SingleColumnLayout',
     components: { BaseIdModal, BaseScroll, MainScroll, Scroll },
     props: {
-      /**
-       * The animation used for the Main Aside.
-       *
-       * @public
-       */
+      /** The animation used for the Main Aside. */
       asideAnimation: {
         type: AnimationProp,
         default: () => animateTranslate('right')
       },
-      /**
-       * Enables the devMode, which shows the available slots to use with its names.
-       *
-       * @public
-       */
-      devMode: {
-        type: Boolean,
-        default: false
-      }
-    },
-    setup: function (props, { slots }) {
-      const { hasContent } = useLayouts(props.devMode, slots);
-
-      return { hasContent };
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     }
   });
 </script>
 
-<style scoped lang="scss">
-  @import '../../design-system-deprecated/utilities/dev-mode';
+<style lang="css" scoped>
+  @import url('../../design-system-deprecated/utilities/dev-mode.css');
 
   .x-layout {
     display: grid;
@@ -147,77 +135,63 @@
       [footer-end page-end];
 
     grid-template-columns: 1fr;
+  }
 
-    > * {
-      grid-column: 1/-1;
-      min-width: 0;
-      min-height: 0;
-      display: flex;
-    }
-
-    &__header {
-      grid-row: header;
-      z-index: 1;
-    }
-
-    &__sub-header {
-      grid-row: sub-header;
-      z-index: 1;
-    }
-
-    &__toolbar {
-      grid-row: toolbar;
-      z-index: 1;
-    }
+  .x-layout > * {
+    grid-column: 1/-1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+  }
 
-    &__predictive {
-      grid-row-start: header-end;
-      grid-row-end: page-end;
-      flex-flow: column nowrap;
-      z-index: 2;
-    }
+  .x-layout__header {
+    grid-row: header;
+    z-index: 1;
+  }
 
-    &__main {
-      grid-row: main;
-      flex-flow: column nowrap;
-    }
+  .x-layout__sub-header {
+    grid-row: sub-header;
+    z-index: 1;
+  }
 
-    &__floating {
-      grid-row: floating;
-      z-index: 1;
-    }
+  .x-layout__toolbar {
+    grid-row: toolbar;
+    z-index: 1;
+  }
 
-    &__footer {
-      grid-row: footer;
-    }
+  .x-layout__predictive {
+    grid-row-start: header-end;
+    grid-row-end: page-end;
+    flex-flow: column nowrap;
+    z-index: 2;
+  }
 
-    ::v-deep .x-layout__aside {
-      grid-row: page;
-      z-index: 3;
+  .x-layout__main {
+    grid-row: main;
+    flex-flow: column nowrap;
+  }
 
-      .x-modal__content {
-        width: 100%;
-        height: 100%;
-        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);
-      }
-    }
+  .x-layout__floating {
+    grid-row: floating;
+    z-index: 1;
+  }
 
-    &__predictive ::v-deep,
-    &__floating ::v-deep,
-    .slot-helper ::v-deep {
-      pointer-events: none;
+  .x-layout__footer {
+    grid-row: footer;
+  }
 
-      > * {
-        pointer-events: all;
-      }
+  .x-layout__aside {
+    grid-row: page;
+    z-index: 3;
+  }
 
-      > .x-list {
-        pointer-events: none;
+  .x-layout :deep(.x-layout__aside .x-modal__content) {
+    width: 100%;
+    height: 100%;
+    margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);
+  }
 
-        > * {
-          pointer-events: all;
-        }
-      }
-    }
+  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {
+    pointer-events: all;
   }
 </style>
diff --git a/packages/x-components/src/components/layouts/use-layouts.ts b/packages/x-components/src/components/layouts/use-layouts.ts
deleted file mode 100644
index 903c7f71f4..0000000000
--- a/packages/x-components/src/components/layouts/use-layouts.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { VNode } from 'vue';
-import { Slots } from 'vue/types/v3-setup-context';
-/**
- * Composable to share Layout logic.
- *
- * @param devMode - Shows the available slots to use with its names if it is enabled.
- * @param slots - Slots to show.
- *
- * @returns True if the slot has rendered content or false otherwise.
- * @public
- */
-export function useLayouts(devMode: boolean, slots: Slots) {
-  /**
-   * Function to check if an slot has rendered content or not.
-   *
-   * @param slotNames - A VNode Array with of each slot.
-   * @returns True if the slot has rendered content or false otherwise.
-   *
-   * @internal
-   */
-  const hasContent = (...slotNames: string[]): boolean => {
-    return (
-      (devMode ||
-        slotNames.some(slotName =>
-          slots[slotName]?.(undefined)?.some((vNode: VNode) => vNode.tag !== undefined)
-        )) ??
-      false
-    );
-  };
-
-  return { hasContent };
-}
diff --git a/packages/x-components/src/components/location-provider.vue b/packages/x-components/src/components/location-provider.vue
index 0dc38d159b..74568b3d77 100644
--- a/packages/x-components/src/components/location-provider.vue
+++ b/packages/x-components/src/components/location-provider.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { defineComponent, PropType, provide, toRef } from 'vue';
   import { FeatureLocation } from '../types';
-  import { useNoElementRender } from '../composables/use-no-element-render';
 
   /**
    * Location Provider component.
@@ -26,7 +25,7 @@
       const featureLocation = toRef(props, 'location');
       provide('location', featureLocation);
 
-      return () => useNoElementRender(slots);
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts
index 2888480826..f53a9beebb 100644
--- a/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseEventsModalClose from '../base-events-modal-close.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link BaseEventsModalClose} with the provided options.
@@ -11,36 +12,39 @@ import BaseEventsModalClose from '../base-events-modal-close.vue';
  * @returns An small API to test the component.
  */
 function renderBaseEventsModalClose({
-  template = '<BaseEventsModalClose v-bind="$attrs"/>',
+  template = '<BaseEventsModalClose :closingEvent="closingEvent"/>',
   closingEvent
 }: RenderBaseEventsModalCloseOptions = {}): RenderBaseEventsModalCloseAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseEventsModalClose
-      },
-      template
+  const modalComponent = defineComponent({
+    components: {
+      BaseEventsModalClose
     },
-    { propsData: { closingEvent }, localVue }
-  );
-
-  const wrapper = containerWrapper.findComponent(BaseEventsModalClose);
+    props: {
+      closingEvent: {
+        type: String
+      }
+    },
+    template
+  });
 
+  const wrapper = mount(modalComponent, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { closingEvent }
+  });
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(BaseEventsModalClose),
     async click() {
-      wrapper.trigger('click');
-      await localVue.nextTick();
+      await wrapper.trigger('click');
+      await nextTick();
     }
   };
 }
 
 describe('testing Close Button component', () => {
   it('emits UserClickedCloseEventsModal by default when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalClose();
+    const { click } = renderBaseEventsModalClose();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedCloseEventsModal').subscribe(listener);
+    XPlugin.bus.on('UserClickedCloseEventsModal').subscribe(listener);
 
     await click();
 
@@ -48,11 +52,11 @@ describe('testing Close Button component', () => {
   });
 
   it('emits the defined closingEvent when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalClose({
+    const { click } = renderBaseEventsModalClose({
       closingEvent: 'UserClickedAFilter'
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedAFilter').subscribe(listener);
+    XPlugin.bus.on('UserClickedAFilter').subscribe(listener);
 
     await click();
 
@@ -77,7 +81,7 @@ interface RenderBaseEventsModalCloseOptions {
 
 interface RenderBaseEventsModalCloseAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts
index 6e54e1ccdf..862772b14c 100644
--- a/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts
@@ -1,9 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseEventsModalOpen from '../base-events-modal-open.vue';
-
+import { XPlugin } from '../../../plugins/index';
 /**
  * Renders the {@link BaseEventsModalOpen} with the provided options.
  *
@@ -11,36 +11,39 @@ import BaseEventsModalOpen from '../base-events-modal-open.vue';
  * @returns An small API to test the component.
  */
 function renderBaseEventsModalOpen({
-  template = '<BaseEventsModalOpen v-bind="$attrs"/>',
+  template = '<BaseEventsModalOpen :openingEvent="openingEvent"/>',
   openingEvent
 }: RenderBaseEventsModalOpenOptions = {}): RenderBaseEventsModalOpenAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseEventsModalOpen
-      },
-      template
+  const containerWrapper = defineComponent({
+    components: {
+      BaseEventsModalOpen
     },
-    { propsData: { openingEvent }, localVue }
-  );
-
-  const wrapper = containerWrapper.findComponent(BaseEventsModalOpen);
+    props: {
+      openingEvent: {
+        type: String
+      }
+    },
+    template
+  });
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { openingEvent }
+  });
 
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(BaseEventsModalOpen),
     async click() {
       wrapper.trigger('click');
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
 
 describe('testing Open Button component', () => {
   it('emits UserClickedOpenX by default when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalOpen();
+    const { click } = renderBaseEventsModalOpen();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedOpenEventsModal').subscribe(listener);
+    XPlugin.bus.on('UserClickedOpenEventsModal').subscribe(listener);
 
     await click();
 
@@ -48,11 +51,11 @@ describe('testing Open Button component', () => {
   });
 
   it('emits the defined openingEvent when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalOpen({
+    const { click } = renderBaseEventsModalOpen({
       openingEvent: 'UserClickedAFilter'
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedAFilter').subscribe(listener);
+    XPlugin.bus.on('UserClickedAFilter').subscribe(listener);
 
     await click();
 
@@ -61,7 +64,7 @@ describe('testing Open Button component', () => {
 
   it('renders the default slot contents', () => {
     const { wrapper } = renderBaseEventsModalOpen({
-      template: '<BaseEventsModalOpen v-bind="$attrs">Open</BaseEventsModalOpen>'
+      template: '<BaseEventsModalOpen :openingEvent="openingEvent">Open</BaseEventsModalOpen>'
     });
 
     expect(wrapper.text()).toEqual('Open');
@@ -77,7 +80,7 @@ interface RenderBaseEventsModalOpenOptions {
 
 interface RenderBaseEventsModalOpenAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts
index bb00b4caac..cc66bdb1f2 100644
--- a/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts
@@ -1,9 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseEventsModal from '../base-events-modal.vue';
 import { PropsWithType } from '../../../utils/types';
 import { XEventsTypes, XEvent } from '../../../wiring/events.types';
+import { XPlugin } from '../../../plugins';
 
 /**
  * Mounts a {@link BaseEventsModal} component with the provided options and offers an API to easily
@@ -19,17 +20,16 @@ function mountBaseEventsModal({
   eventsToOpenModal,
   contentClass
 }: MountBaseEventsModalOptions = {}): MountBaseEventsModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
   const wrapper = mount(BaseEventsModal, {
     attachTo: parent,
-    localVue,
-    propsData: { bodyClickEvent, eventsToCloseModal, eventsToOpenModal, contentClass },
+    props: { bodyClickEvent, eventsToCloseModal, eventsToOpenModal, contentClass },
     slots: {
       default: defaultSlot
-    }
+    },
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
@@ -38,8 +38,8 @@ function mountBaseEventsModal({
       await wrapper.find(getDataTestSelector('modal-overlay'))?.trigger('click');
     },
     async emit(event) {
-      wrapper.vm.$x.emit(event);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event);
+      await nextTick();
     },
     getModalContent() {
       return wrapper.find(getDataTestSelector('modal-content'));
@@ -47,7 +47,7 @@ function mountBaseEventsModal({
     async fakeFocusIn() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -109,15 +109,15 @@ describe('testing Base Events Modal  component', () => {
   it('allows to customize the events listened for opening & closing', async () => {
     const eventToOpen = 'UserFocusedSearchBox';
     const eventToClose = 'UserPressedClearSearchBoxButton';
-    const { emit, getModalContent, wrapper } = mountBaseEventsModal({
+    const { emit, getModalContent } = mountBaseEventsModal({
       eventsToOpenModal: [eventToOpen],
       eventsToCloseModal: [eventToClose]
     });
 
     const openListener = jest.fn();
-    wrapper.vm.$x.on(eventToOpen).subscribe(openListener);
+    XPlugin.bus.on(eventToOpen).subscribe(openListener);
     const closeListener = jest.fn();
-    wrapper.vm.$x.on(eventToClose).subscribe(closeListener);
+    XPlugin.bus.on(eventToClose).subscribe(closeListener);
 
     await emit(eventToOpen);
     expect(getModalContent().exists()).toBe(true);
@@ -130,12 +130,12 @@ describe('testing Base Events Modal  component', () => {
 
   it('allows to customize the event emitted when clicking out of the modal', async () => {
     const bodyClickEvent = 'UserClickedASimpleFilter';
-    const { wrapper, clickModalOverlay, emit, getModalContent } = mountBaseEventsModal({
+    const { clickModalOverlay, emit, getModalContent } = mountBaseEventsModal({
       bodyClickEvent,
       eventsToCloseModal: [bodyClickEvent]
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on(bodyClickEvent).subscribe(listener);
+    XPlugin.bus.on(bodyClickEvent).subscribe(listener);
 
     await emit('UserClickedOpenEventsModal');
     expect(getModalContent().exists()).toBe(true);
@@ -170,7 +170,7 @@ interface MountBaseEventsModalOptions {
 
 interface MountBaseEventsModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Fakes a click on the modal overlay. */
   clickModalOverlay: () => Promise<void>;
   /** Emits the provided event. */
@@ -178,5 +178,5 @@ interface MountBaseEventsModalAPI {
   /** Fakes a focusin event in another HTMLElement of the body. */
   fakeFocusIn: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts
index 6ee98d3f9d..562e3c251e 100644
--- a/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts
@@ -1,5 +1,5 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseIdModalClose from '../base-id-modal-close.vue';
 import { XPlugin } from '../../../plugins/index';
@@ -12,25 +12,28 @@ import { XPlugin } from '../../../plugins/index';
  */
 function renderBaseIdModalClose({
   id = 'random',
-  template = `<BaseIdModalClose modalId="${id}" v-bind="$attrs"/>`
+  template = `<BaseIdModalClose modalId="${id}" :modalId="modalId"/>`
 }: RenderBaseIdModalCloseOptions = {}): RenderBaseIdModalCloseAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseIdModalClose
-      },
-      template
+  const containerWrapper = defineComponent({
+    components: {
+      BaseIdModalClose
     },
-    { propsData: { modalId: id }, localVue }
-  );
+    props: {
+      modalId: {
+        type: String
+      }
+    },
+    template
+  });
 
-  const wrapper = containerWrapper.findComponent(BaseIdModalClose);
-  const modalId = wrapper.props('modalId');
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { modalId: id }
+  });
 
   return {
-    wrapper,
-    modalId,
+    wrapper: wrapper.findComponent(BaseIdModalClose),
+    modalId: id,
     async click() {
       await wrapper.trigger('click');
     }
@@ -51,7 +54,7 @@ describe('testing Close Button component', () => {
 
   it('renders the default slot contents', () => {
     const { wrapper } = renderBaseIdModalClose({
-      template: '<BaseIdModalClose modalId="modal" v-bind="$attrs">Close</BaseIdModalClose>'
+      template: '<BaseIdModalClose modalId="modal" >Close</BaseIdModalClose>'
     });
 
     expect(wrapper.text()).toEqual('Close');
@@ -60,7 +63,7 @@ describe('testing Close Button component', () => {
   // eslint-disable-next-line max-len
   it('renders custom content replacing the default exposing the function that closes the modal', async () => {
     const { wrapper, click, modalId } = renderBaseIdModalClose({
-      template: `<BaseIdModalClose modalId="modal" v-bind="$attrs">
+      template: `<BaseIdModalClose :modalId="modalId">
                     <template #closing-element="{ closeModal }">
                       <div>
                         Close <span data-test="custom-close-modal" @click="closeModal">HERE</span>
@@ -92,7 +95,7 @@ interface RenderBaseIdModalCloseOptions {
 
 interface RenderBaseIdModalCloseAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Clicks the button. */
diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts
index 2bcf83ed30..3acb121715 100644
--- a/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseIdModalOpen from '../base-id-modal-open.vue';
 import { bus } from '../../../plugins/x-bus';
@@ -13,35 +12,31 @@ import { XPlugin } from '../../../plugins/index';
  * @returns An small API to test the component.
  */
 function renderBaseIdModalOpen({
-  id = 'myModal',
-  template = `<BaseIdModalOpen modalId="${id}" v-bind="$attrs"/>`
-}: RenderBaseIdModalOpenOptions = {}): RenderBaseIdModalOpenAPI {
+  template = `<BaseIdModalOpen :modalId="modalId" v-bind="$attrs"/>`
+} = {}) {
   // Making bus not repeat subjects
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   jest.spyOn(bus, 'createEmitter' as any).mockImplementation(dummyCreateEmitter.bind(bus) as any);
 
-  const [, localVue] = installNewXPlugin();
+  const modalId = 'myModal';
+
   const containerWrapper = mount(
     {
-      components: {
-        BaseIdModalOpen
-      },
+      components: { BaseIdModalOpen },
       template
     },
     {
-      propsData: { modalId: id },
-      localVue
+      props: { modalId },
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
   const wrapper = containerWrapper.findComponent(BaseIdModalOpen);
-  const modalId = wrapper.props('modalId');
 
   return {
     wrapper,
     modalId,
-    async click() {
-      await wrapper.trigger('click');
-    }
+    click: async () => await wrapper.trigger('click')
   };
 }
 
@@ -65,16 +60,16 @@ describe('testing Open Button component', () => {
     expect(wrapper.text()).toEqual('Open');
   });
 
-  // eslint-disable-next-line max-len
   it('renders custom content replacing the default exposing the function that opens the modal', async () => {
     const { wrapper, click, modalId } = renderBaseIdModalOpen({
-      template: `<BaseIdModalOpen modalId="modal" v-bind="$attrs">
-                    <template #opening-element="{ openModal }">
-                      <div>
-                        Open <span data-test="custom-open-modal" @click="openModal">HERE</span>
-                      </div>
-                    </template>
-                  </BaseIdModalOpen>`
+      template: `
+        <BaseIdModalOpen modalId="modal" v-bind="$attrs">
+          <template #opening-element="{ openModal }">
+            <div>
+              Open <span data-test="custom-open-modal" @click="openModal">HERE</span>
+            </div>
+          </template>
+        </BaseIdModalOpen>`
     });
 
     const listener = jest.fn();
@@ -84,25 +79,9 @@ describe('testing Open Button component', () => {
 
     expect(listener).toHaveBeenCalledTimes(0);
 
-    wrapper.find(getDataTestSelector('custom-open-modal')).trigger('click');
+    await wrapper.find(getDataTestSelector('custom-open-modal')).trigger('click');
 
     expect(listener).toHaveBeenCalledTimes(1);
     expect(listener).toHaveBeenCalledWith(modalId);
   });
 });
-
-interface RenderBaseIdModalOpenOptions {
-  /** The id of the modal to open. */
-  id?: string;
-  /** The template to render. */
-  template?: string;
-}
-
-interface RenderBaseIdModalOpenAPI {
-  /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
-  /** The modal id. */
-  modalId: string;
-  /** Clicks the button. */
-  click: () => Promise<void>;
-}
diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts
index 8314b713d0..eccee166d6 100644
--- a/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseIdModal from '../base-id-modal.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Mounts a {@link BaseIdModal} component with the provided options and offers an API to easily
@@ -16,25 +17,24 @@ function mountBaseIdModal({
   defaultSlot = `<span data-test="default-slot">Modal: ${modalId}</span>`,
   contentClass
 }: MountBaseIdModalOptions = {}): MountBaseIdModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
   const wrapper = mount(BaseIdModal, {
     attachTo: parent,
-    localVue,
-    propsData: { modalId, contentClass },
+    props: { modalId, contentClass },
     slots: {
       default: defaultSlot
-    }
+    },
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
     wrapper,
     modalId,
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, modalId);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, modalId);
+      await nextTick();
     },
     async click(string) {
       await wrapper.get(getDataTestSelector(string))?.trigger('click');
@@ -45,7 +45,7 @@ function mountBaseIdModal({
     async fakeFocusIn() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -140,7 +140,7 @@ interface MountBaseIdModalOptions {
 
 interface MountBaseIdModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Emits the provided event. */
@@ -150,5 +150,5 @@ interface MountBaseIdModalAPI {
   /** Fakes a focusin event in another HTMLElement of the body. */
   fakeFocusIn: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts
index ddb5a374d6..a43ae54ff7 100644
--- a/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent } from 'vue';
 import { AnyFunction } from '@empathyco/x-utils';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import CloseMainModal from '../close-main-modal.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link CloseMainModal} with the provided options.
@@ -14,33 +15,28 @@ function renderCloseMainModal({
   template = '<CloseMainModal />',
   methods
 }: RenderCloseMainModalOptions = {}): RenderCloseMainModalAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        CloseMainModal
-      },
-      template,
-      methods
+  const containerWrapper = defineComponent({
+    components: {
+      CloseMainModal
     },
-    { localVue }
-  );
-
-  const wrapper = containerWrapper.findComponent(CloseMainModal);
+    methods,
+    template
+  });
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] }
+  });
 
   return {
-    wrapper,
-    async click() {
-      await wrapper.trigger('click');
-    }
+    wrapper: wrapper.findComponent(CloseMainModal),
+    click: async () => await wrapper.trigger('click')
   };
 }
 
 describe('testing Close Main Modal button component', () => {
   it('emits UserClickedCloseX by default when clicked', async () => {
-    const { wrapper, click } = renderCloseMainModal();
+    const { click } = renderCloseMainModal();
     const onUserClickedCloseX = jest.fn();
-    wrapper.vm.$x.on('UserClickedCloseX').subscribe(onUserClickedCloseX);
+    XPlugin.bus.on('UserClickedCloseX').subscribe(onUserClickedCloseX);
 
     await click();
 
@@ -77,7 +73,7 @@ interface RenderCloseMainModalOptions {
 
 interface RenderCloseMainModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts
index 648c307273..5140da9dfd 100644
--- a/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts
@@ -1,9 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import MainModal from '../main-modal.vue';
 import { PropsWithType } from '../../../utils/types';
-import { XEventsTypes } from '../../../wiring/events.types';
+import { XEventsTypes } from '../../../wiring';
+import { XPlugin } from '../../../plugins';
 
 /**
  * Renders a {@link MainModal} component with the provided options and offers an API to easily
@@ -15,20 +16,20 @@ import { XEventsTypes } from '../../../wiring/events.types';
 function renderMainModal({
   template = '<MainModal/>'
 }: RenderMainModalOptions = {}): RenderMainModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
-
-  const wrapper = mount(
-    {
-      template,
-      components: { MainModal }
+  const containerWrapper = defineComponent({
+    components: {
+      MainModal
     },
-    {
-      attachTo: parent, // necessary to make the focus on body event to work in some environments.
-      localVue
-    }
-  );
+
+    template,
+    global: { plugins: [installNewXPlugin()] },
+    attachTo: parent // necessary to make the focus on body event to work in some environments.
+  });
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] }
+  });
 
   return {
     wrapper,
@@ -36,8 +37,8 @@ function renderMainModal({
       await wrapper.find(getDataTestSelector('modal-overlay'))?.trigger('click');
     },
     async emit(event) {
-      wrapper.vm.$x.emit(event);
-      await localVue.nextTick();
+      await XPlugin.bus.emit(event);
+      await nextTick();
     },
     getModalContent() {
       return wrapper.find(getDataTestSelector('modal-content'));
@@ -45,7 +46,7 @@ function renderMainModal({
     async focusOutOfModal() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -127,7 +128,7 @@ interface RenderMainModalOptions {
 
 interface RenderMainModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Fakes a click on the modal overlay. */
   clickModalOverlay: () => Promise<void>;
   /** Emits the provided event. */
@@ -135,5 +136,5 @@ interface RenderMainModalAPI {
   /** Fakes a focusin event in another HTMLElement of the body. */
   focusOutOfModal: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts
index 4471a4fe8f..adca0920ca 100644
--- a/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent } from 'vue';
 import { AnyFunction } from '@empathyco/x-utils';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import OpenMainModal from '../open-main-modal.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link OpenMainModal} with the provided options.
@@ -14,22 +15,20 @@ function renderOpenMainModal({
   template = '<OpenMainModal />',
   methods
 }: RenderOpenMainModalOptions = {}): RenderOpenMainModalAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        OpenMainModal
-      },
-      template,
-      methods
+  const containerWrapper = defineComponent({
+    components: {
+      OpenMainModal
     },
-    { localVue }
-  );
+    methods,
+    template
+  });
 
-  const wrapper = containerWrapper.findComponent(OpenMainModal);
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] }
+  });
 
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(OpenMainModal),
     async click() {
       await wrapper.trigger('click');
     }
@@ -38,9 +37,9 @@ function renderOpenMainModal({
 
 describe('testing Open Main Modal button component', () => {
   it('emits UserClickedOpenX by default when clicked', async () => {
-    const { wrapper, click } = renderOpenMainModal();
+    const { click } = renderOpenMainModal();
     const onUserClickedOpenX = jest.fn();
-    wrapper.vm.$x.on('UserClickedOpenX').subscribe(onUserClickedOpenX);
+    XPlugin.bus.on('UserClickedOpenX').subscribe(onUserClickedOpenX);
 
     await click();
 
@@ -77,7 +76,7 @@ interface RenderOpenMainModalOptions {
 
 interface RenderOpenMainModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/base-events-modal-close.vue b/packages/x-components/src/components/modals/base-events-modal-close.vue
index 85588bc2ca..322665893a 100644
--- a/packages/x-components/src/components/modals/base-events-modal-close.vue
+++ b/packages/x-components/src/components/modals/base-events-modal-close.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-events-modal-close-button x-button"
     data-test="close-modal"
diff --git a/packages/x-components/src/components/modals/base-events-modal-open.vue b/packages/x-components/src/components/modals/base-events-modal-open.vue
index 8133275e5d..b6f83243cc 100644
--- a/packages/x-components/src/components/modals/base-events-modal-open.vue
+++ b/packages/x-components/src/components/modals/base-events-modal-open.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-events-modal-open-button x-button"
     data-test="open-modal"
diff --git a/packages/x-components/src/components/modals/base-events-modal.vue b/packages/x-components/src/components/modals/base-events-modal.vue
index 4d4a7fe449..db99852842 100644
--- a/packages/x-components/src/components/modals/base-events-modal.vue
+++ b/packages/x-components/src/components/modals/base-events-modal.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseModal
-    v-bind="$attrs"
     ref="baseModalEl"
     @click:overlay="emitBodyClickEvent"
     @focusin:body="emitBodyClickEvent"
diff --git a/packages/x-components/src/components/modals/base-id-modal-close.vue b/packages/x-components/src/components/modals/base-id-modal-close.vue
index 7b06609c19..38d7c13954 100644
--- a/packages/x-components/src/components/modals/base-id-modal-close.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-close.vue
@@ -1,27 +1,17 @@
 <template>
-  <NoElement>
-    <!--
-      @slot closing-element. It's the element that will trigger the modal closing. It's a
-      button by default.
-        @binding {Function} closeModal - The function to close the modal.
-    -->
-    <slot :closeModal="emitCloseModalEvent" name="closing-element">
-      <button
-        @click="emitCloseModalEvent"
-        class="x-events-modal-id-close-button x-button"
-        data-test="close-modal-id"
-      >
-        <!-- @slot (Required) Button content with a text, an icon or both -->
-        <slot />
-      </button>
-    </slot>
-  </NoElement>
+  <button
+    @click="closeModal"
+    class="x-events-modal-id-close-button x-button"
+    data-test="close-modal-id"
+  >
+    <!-- @slot (Required) Button content with a text, an icon or both -->
+    <slot />
+  </button>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { NoElement } from '../no-element';
-  import { use$x } from '../../composables/use-$x';
+  import { use$x } from '../../composables';
 
   /**
    * Component that allows to close a modal by emitting
@@ -32,36 +22,32 @@
    * @public
    */
   export default defineComponent({
-    components: {
-      NoElement
-    },
+    name: 'BaseIdModalClose',
     props: {
-      /**
-       * The modalId of the modal that will be closed.
-       *
-       * @public
-       */
+      /** The modalId of the modal that will be closed. */
       modalId: {
         type: String,
         required: true
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const $x = use$x();
 
       /**
        * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.
        *
        * @param event - The event triggering the function.
-       * @public
        */
-      const emitCloseModalEvent = ({ target }: Event): void => {
+      function closeModal({ target }: Event) {
         $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement });
-      };
+      }
 
-      return {
-        emitCloseModalEvent
-      };
+      /* Hack to render through a render-function, the `closing-element` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const innerProps = { closeModal };
+      return (
+        slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps
+      ) as typeof innerProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/components/modals/base-id-modal-open.vue b/packages/x-components/src/components/modals/base-id-modal-open.vue
index 0c4e201c57..acc11f96a7 100644
--- a/packages/x-components/src/components/modals/base-id-modal-open.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-open.vue
@@ -1,27 +1,17 @@
 <template>
-  <NoElement>
-    <!--
-      @slot opening-element. It's the element that will trigger the modal opening. It's a
-      button by default.
-        @binding {Function} openModal - The function to open the modal.
-    -->
-    <slot :openModal="emitOpenModalEvent" name="opening-element">
-      <button
-        @click="emitOpenModalEvent"
-        class="x-events-modal-id-open-button x-button"
-        data-test="open-modal-id"
-      >
-        <!-- @slot (Required) Button content with a text, an icon or both -->
-        <slot />
-      </button>
-    </slot>
-  </NoElement>
+  <button
+    @click="openModal"
+    class="x-events-modal-id-open-button x-button"
+    data-test="open-modal-id"
+  >
+    <!-- @slot (Required) Button content with a text, an icon or both -->
+    <slot />
+  </button>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { NoElement } from '../no-element';
-  import { use$x } from '../../composables/index';
+  import { use$x } from '../../composables';
 
   /**
    * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}
@@ -31,34 +21,32 @@
    * @public
    */
   export default defineComponent({
-    components: { NoElement },
+    name: 'BaseIdModalOpen',
     props: {
-      /**
-       * The modalId of the modal that will be opened.
-       *
-       * @public
-       */
+      /** The modalId of the modal that will be opened. */
       modalId: {
         type: String,
         required: true
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const $x = use$x();
 
       /**
        * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.
        *
        * @param event - The event triggering the function.
-       * @public
        */
-      const emitOpenModalEvent = ({ target }: Event): void => {
+      function openModal({ target }: Event) {
         $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });
-      };
+      }
 
-      return {
-        emitOpenModalEvent
-      };
+      /* Hack to render through a render-function, the `opening-element` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const innerProps = { openModal };
+      return (
+        slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps
+      ) as typeof innerProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/components/modals/base-id-modal.vue b/packages/x-components/src/components/modals/base-id-modal.vue
index 4525b49d41..e52d10d1e1 100644
--- a/packages/x-components/src/components/modals/base-id-modal.vue
+++ b/packages/x-components/src/components/modals/base-id-modal.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseModal
-    v-bind="$attrs"
     :ref="el"
     @click:overlay="emitClickOutOfModal"
     @focusin:body="emitClickOutOfModal"
diff --git a/packages/x-components/src/components/modals/base-modal.vue b/packages/x-components/src/components/modals/base-modal.vue
index fd58190382..0711ffe34e 100644
--- a/packages/x-components/src/components/modals/base-modal.vue
+++ b/packages/x-components/src/components/modals/base-modal.vue
@@ -31,14 +31,11 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-  import { useDebounce } from '../../composables/use-debounce';
+  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { useDebounce } from '../../composables';
   import { AnimationProp } from '../../types';
-  import { getTargetElement } from '../../utils/html';
-  import Fade from '../animations/fade.vue';
-  import { NoElement } from '../no-element';
-  import { FOCUSABLE_SELECTORS } from '../../utils/focus';
+  import { getTargetElement, FOCUSABLE_SELECTORS } from '../../utils';
+  import { Fade, NoAnimation } from '../animations';
 
   /**
    * Base component with no XPlugin dependencies that serves as a utility for constructing more
@@ -48,7 +45,6 @@
    */
   export default defineComponent({
     name: 'BaseModal',
-    components: { NoElement },
     props: {
       /** Determines if the modal is open or not. */
       open: {
@@ -72,7 +68,7 @@
       /** Animation to use for opening/closing the modal.This animation only affects the content. */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * Animation to use for the overlay (backdrop) part of the modal. By default, it uses
@@ -121,7 +117,7 @@
        *
        * @param event - The click event.
        */
-      function emitOverlayClicked(event: MouseEvent) {
+      function emitOverlayClicked(event: Event) {
         emit('click:overlay', event);
       }
 
@@ -242,7 +238,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-modal {
     position: fixed;
     top: 0;
@@ -253,20 +249,20 @@
     width: 100%;
     height: 100%;
     z-index: 1;
+  }
 
-    &__content {
-      display: flex;
-      flex-flow: column nowrap;
-      z-index: 1;
-    }
+  .x-modal__content {
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 1;
+  }
 
-    &__overlay {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background-color: rgb(0, 0, 0);
-      opacity: 0.3;
-    }
+  .x-modal__overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: rgb(0, 0, 0);
+    opacity: 0.3;
   }
 </style>
 
diff --git a/packages/x-components/src/components/modals/close-main-modal.vue b/packages/x-components/src/components/modals/close-main-modal.vue
index 6923482830..468077578e 100644
--- a/packages/x-components/src/components/modals/close-main-modal.vue
+++ b/packages/x-components/src/components/modals/close-main-modal.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseEventsModalClose
-    v-on="$listeners"
     class="x-close-main-modal"
     data-test="close-main-modal"
     :closingEvent="closingEvent"
diff --git a/packages/x-components/src/components/modals/main-modal.vue b/packages/x-components/src/components/modals/main-modal.vue
index c1d1a20ddd..f7f03f9798 100644
--- a/packages/x-components/src/components/modals/main-modal.vue
+++ b/packages/x-components/src/components/modals/main-modal.vue
@@ -7,7 +7,6 @@
     :bodyClickEvent="outOfModalClickEvent"
     :animation="animation"
     :focusOnOpen="focusOnOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseEventsModal>
diff --git a/packages/x-components/src/components/modals/open-main-modal.vue b/packages/x-components/src/components/modals/open-main-modal.vue
index 74f7d48c24..441ae7c55f 100644
--- a/packages/x-components/src/components/modals/open-main-modal.vue
+++ b/packages/x-components/src/components/modals/open-main-modal.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseEventsModalOpen
-    v-on="$listeners"
     class="x-open-main-modal"
     data-test="open-main-modal"
     :openingEvent="openingEvent"
diff --git a/packages/x-components/src/components/no-element.ts b/packages/x-components/src/components/no-element.ts
deleted file mode 100644
index daaf905801..0000000000
--- a/packages/x-components/src/components/no-element.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineComponent } from 'vue';
-import { useNoElementRender } from '../composables/use-no-element-render';
-
-/**
- * The purpose of this Component is to use as default value for props that receive a Component that
- * doesn't render any DOM element. For example the animations with `Transition` component.
- *
- * @internal
- */
-export const NoElement = defineComponent({
-  name: 'NoElement',
-  setup(_, { slots }) {
-    return () => useNoElementRender(slots);
-  }
-});
diff --git a/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
index 3bdff9e84b..c7a373ad36 100644
--- a/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseHeaderTogglePanel from '../base-header-toggle-panel.vue';
 
@@ -131,7 +130,7 @@ interface RenderBaseTogglePanelOptions {
 
 interface RenderBaseHeaderTogglePanelAPI {
   /** The Vue testing utils wrapper for the {@link BaseHeaderTogglePanelComponent}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Function that toggles panel visibility. */
   toggleOpen: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
index 89297144af..61deb1334c 100644
--- a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
@@ -1,8 +1,10 @@
 import { AnyFunction } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring';
 import BaseIdTogglePanelButton from '../base-id-toggle-panel-button.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link BaseIdTogglePanelButton} with the provided options.
@@ -12,15 +14,14 @@ import BaseIdTogglePanelButton from '../base-id-toggle-panel-button.vue';
  */
 function renderBaseIdToggleButton({
   panelId = 'myToggle',
-  scopedSlots = {
+  slots = {
     default: `<span data-test="default-slot">Panel: ${panelId}</span>`
   }
 }: RenderBaseIdToggleButtonOptions = {}): RenderBaseIdToggleButtonAPI {
-  const [, localVue] = installNewXPlugin();
   const containerWrapper = mount(BaseIdTogglePanelButton, {
-    localVue,
-    propsData: { panelId },
-    scopedSlots
+    props: { panelId },
+    global: { plugins: [installNewXPlugin()] },
+    slots
   });
 
   const wrapper = containerWrapper.findComponent(BaseIdTogglePanelButton);
@@ -32,17 +33,17 @@ function renderBaseIdToggleButton({
       await wrapper.trigger('click');
     },
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, true, { id: panelId });
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, true, { id: panelId, moduleName: null });
+      await nextTick();
     }
   };
 }
 
 describe('testing BaseIdTogglePanelButton component', () => {
   it('emits UserClickedPanelToggleButton with the panel id as payload', async () => {
-    const { wrapper, panelId, click } = renderBaseIdToggleButton();
+    const { panelId, click } = renderBaseIdToggleButton();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedPanelToggleButton').subscribe(listener);
+    XPlugin.bus.on('UserClickedPanelToggleButton').subscribe(listener);
 
     await click();
 
@@ -52,7 +53,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
 
   it('renders a custom slot content', () => {
     const { wrapper } = renderBaseIdToggleButton({
-      scopedSlots: { default: `<span data-test="custom-slot">Custom slot</span>` }
+      slots: { default: `<span data-test="custom-slot">Custom slot</span>` }
     });
 
     expect(wrapper.find(getDataTestSelector('custom-slot')).text()).toEqual('Custom slot');
@@ -60,7 +61,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
 
   it('renders a custom slot using the isPanelOpen property', async () => {
     const { wrapper, emit } = renderBaseIdToggleButton({
-      scopedSlots: {
+      slots: {
         default: `
           <template #default="{ isPanelOpen }">
             <span data-test="custom-slot" v-if="isPanelOpen">Close aside</span>
@@ -82,12 +83,12 @@ interface RenderBaseIdToggleButtonOptions {
   /** Id of the panel to toggle. */
   panelId?: string;
   /** The scoped slots to render. */
-  scopedSlots?: Record<string, string | AnyFunction>;
+  slots?: Record<string, string | AnyFunction>;
 }
 
 interface RenderBaseIdToggleButtonAPI {
   /** The wrapper for the toggle button component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The panel id. */
   panelId: string;
   /** Emits the provided event. */
diff --git a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts
index 7e08c22bc3..d1cdfdc932 100644
--- a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts
@@ -1,3 +1,10 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
+import { XEvent } from '../../../wiring';
+import BaseIdTogglePanel from '../base-id-toggle-panel.vue';
+import { XPlugin } from '../../../plugins/index';
+
 /**
  * Mounts a {@link BaseIdTogglePanel} component with the provided options and offers an API to
  * easily test it.
@@ -5,21 +12,14 @@
  * @param options - The options to render the component with.
  * @returns An API to test the component.
  */
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
-import { XEvent } from '../../../wiring';
-import BaseIdTogglePanel from '../base-id-toggle-panel.vue';
-
 function mountBaseIdTogglePanel({
   panelId = 'myToggle',
   defaultSlot = `<span data-test="default-slot">Panel: ${panelId}</span>`,
   startOpen = true
 }: MountBaseIdToggleOptions = {}): MountBaseIdTogglePanelAPI {
-  const [, localVue] = installNewXPlugin();
   const wrapper = mount(BaseIdTogglePanel, {
-    localVue,
-    propsData: { panelId, startOpen },
+    props: { panelId, startOpen },
+    global: { plugins: [installNewXPlugin()] },
     slots: {
       default: defaultSlot
     }
@@ -31,8 +31,8 @@ function mountBaseIdTogglePanel({
     panelId,
     baseTogglePanelWrapper,
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, panelId);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, panelId);
+      await nextTick();
     }
   };
 }
@@ -76,7 +76,7 @@ describe('testing BaseIdTogglePanel component', () => {
 
 interface MountBaseIdTogglePanelAPI {
   /** The wrapper for the panel toggle component. */
-  baseTogglePanelWrapper: Wrapper<Vue>;
+  baseTogglePanelWrapper: VueWrapper;
   /** Emits the provided event. */
   emit: (event: XEvent) => Promise<void>;
   /** The panel id. */
diff --git a/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts
index 5b32d0f445..3ecaf546ce 100644
--- a/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts
@@ -1,5 +1,5 @@
-import Vue from 'vue';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseTabsPanel from '../base-tabs-panel.vue';
 
@@ -21,11 +21,8 @@ function renderBaseTabsPanel({
   tabClass,
   tabsListClass
 }: RenderBaseTabsPanelOptions = {}): RenderBaseTabsPanelAPI {
-  const localVue = createLocalVue();
-
   const wrapper = mount(BaseTabsPanel, {
-    localVue,
-    propsData: {
+    props: {
       activeTabClass,
       allowTabDeselect,
       contentClass,
@@ -33,7 +30,7 @@ function renderBaseTabsPanel({
       tabClass,
       tabsListClass
     },
-    scopedSlots: {
+    slots: {
       ...slots,
       ...tabs
     }
@@ -42,8 +39,8 @@ function renderBaseTabsPanel({
   return {
     wrapper,
     clickNthTab: (nth: number) => {
-      wrapper.findAll(getDataTestSelector('base-tabs-panel-button')).at(nth).trigger('click');
-      return localVue.nextTick();
+      wrapper.findAll(getDataTestSelector('base-tabs-panel-button')).at(nth)?.trigger('click');
+      return nextTick();
     },
     getBaseTabsPanel: () => wrapper.find(getDataTestSelector('base-tabs-panel')),
     getTabPanel: () => wrapper.find(getDataTestSelector('base-tabs-panel-content')),
@@ -55,7 +52,6 @@ function renderBaseTabsPanel({
 describe('testing BaseTabsPanel', () => {
   it('does not render anything when no tabs are defined in the template', () => {
     const { getBaseTabsPanel } = renderBaseTabsPanel();
-
     expect(getBaseTabsPanel().exists()).toBe(false);
   });
 
@@ -140,7 +136,7 @@ describe('testing BaseTabsPanel', () => {
     });
 
     expect(getTabsButtons()).toHaveLength(1);
-    expect(getTabsButtons().at(0).text()).toBe('summer');
+    expect(getTabsButtons().at(0)?.text()).toBe('summer');
   });
 
   it('renders a custom `tab` slot properly', async () => {
@@ -158,11 +154,11 @@ describe('testing BaseTabsPanel', () => {
     });
 
     expect(getTabsButtons()).toHaveLength(1);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab');
 
     // Select first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab ✅');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab ✅');
   });
 
   it('renders a custom `tab-content` slot properly', async () => {
@@ -178,11 +174,11 @@ describe('testing BaseTabsPanel', () => {
     });
 
     expect(getTabsButtons()).toHaveLength(1);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab content');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab content');
 
     // Select first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab content ✅');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab content ✅');
   });
 
   it('changes the selected tab on click', async () => {
@@ -197,13 +193,13 @@ describe('testing BaseTabsPanel', () => {
     });
 
     // First tab is selected initially
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // Select third tab
     await clickNthTab(2);
-    expect(getTabsButtons().at(2).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(2).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(2)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(2)?.element).toHaveAttribute('aria-selected', 'true');
 
     // The third panel is the rendered one
     expect(getTabPanel().text()).toBe('Top Outlet sales');
@@ -221,13 +217,13 @@ describe('testing BaseTabsPanel', () => {
     });
 
     // First tab is selected initially
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // Select again first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // The first panel is the rendered one
     expect(getTabPanel().text()).toBe('Top Summer sales');
@@ -246,13 +242,13 @@ describe('testing BaseTabsPanel', () => {
     });
 
     // First tab is selected initially
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // Select again first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).element).not.toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).not.toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).not.toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).not.toHaveAttribute('aria-selected', 'true');
 
     // The panel is not rendered
     expect(getTabPanel().exists()).toBe(false);
@@ -271,8 +267,8 @@ describe('testing BaseTabsPanel', () => {
       tabsListClass: 'tabs-list'
     });
 
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(1).element).toHaveClass('tab-button');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(1)?.element).toHaveClass('tab-button');
     expect(getTabPanel().element).toHaveClass('tab-panel');
     expect(getTabsList().element).toHaveClass('tabs-list');
   });
@@ -299,15 +295,15 @@ interface RenderBaseTabsPanelOptions {
 
 interface RenderBaseTabsPanelAPI {
   /** The Vue testing utils wrapper for the {@link BaseTabsPanel}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the nth tab button and waits for the view to update. */
   clickNthTab: (nth: number) => Promise<void>;
   /** Returns the BaseTabsPanel. */
-  getBaseTabsPanel: () => Wrapper<Vue>;
+  getBaseTabsPanel: () => DOMWrapper<Element>;
   /** Returns the selected tab panel. */
-  getTabPanel: () => Wrapper<Vue>;
+  getTabPanel: () => DOMWrapper<Element>;
   /** Returns the tabs buttons. */
-  getTabsButtons: () => WrapperArray<Vue>;
+  getTabsButtons: () => DOMWrapper<Element>[];
   /** Returns the tabs list. */
-  getTabsList: () => Wrapper<Vue>;
+  getTabsList: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts
index e0ff622d55..68d88e9fe0 100644
--- a/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseTogglePanelComponent from '../base-toggle-panel.vue';
 
@@ -15,8 +15,6 @@ function renderBaseTogglePanel({
   open = true,
   template = '<BaseTogglePanel :open="openTogglePanel"></BaseTogglePanel>'
 }: RenderBaseTogglePanelOptions = {}): RenderBaseTogglePanelAPI {
-  const localVue = createLocalVue();
-
   const wrapperContainer = mount(
     {
       components: {
@@ -25,7 +23,6 @@ function renderBaseTogglePanel({
       template
     },
     {
-      localVue,
       data() {
         return { openTogglePanel: open };
       }
@@ -37,8 +34,10 @@ function renderBaseTogglePanel({
   return {
     wrapper,
     toggleOpen() {
-      wrapperContainer.setData({ openTogglePanel: !wrapperContainer.vm.$data.openTogglePanel });
-      return Vue.nextTick();
+      (wrapperContainer.vm as unknown as TogglePanelState).openTogglePanel = !(
+        wrapperContainer.vm as unknown as TogglePanelState
+      ).openTogglePanel;
+      return nextTick();
     }
   };
 }
@@ -84,7 +83,10 @@ interface RenderBaseTogglePanelOptions {
 
 interface RenderBaseTogglePanelAPI {
   /** The Vue testing utils wrapper for the {@link BaseTogglePanelComponent}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Function that toggles panel visibility. */
   toggleOpen: () => Promise<void>;
 }
+interface TogglePanelState {
+  openTogglePanel: boolean;
+}
diff --git a/packages/x-components/src/components/panels/base-header-toggle-panel.vue b/packages/x-components/src/components/panels/base-header-toggle-panel.vue
index add00425f4..a7ad0bd223 100644
--- a/packages/x-components/src/components/panels/base-header-toggle-panel.vue
+++ b/packages/x-components/src/components/panels/base-header-toggle-panel.vue
@@ -23,8 +23,8 @@
 
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
-  import { AnimationProp } from '../../types/animation-prop';
-  import { NoElement } from '../no-element';
+  import { AnimationProp } from '../../types';
+  import { NoAnimation } from '../animations';
   import BaseTogglePanel from './base-toggle-panel.vue';
 
   /**
@@ -37,18 +37,13 @@
     name: 'BaseHeaderTogglePanel',
     components: { BaseTogglePanel },
     props: {
-      /**
-       * Animation component that will be used to animate the base-toggle-panel.
-       *
-       * @public
-       */
-      animation: { type: AnimationProp, default: () => NoElement },
-      /**
-       * Handles if the panel is open by default.
-       *
-       * @public
-       */
-      startCollapsed: { type: Boolean, default: false },
+      /** Animation component that will be used to animate the base-toggle-panel. */
+      animation: {
+        type: AnimationProp,
+        default: () => NoAnimation
+      },
+      /** Handles if the panel is open by default. */
+      startCollapsed: Boolean,
       /** Class inherited by content element. */
       headerClass: String
     },
@@ -87,7 +82,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-header-toggle-panel__header {
     cursor: pointer;
   }
diff --git a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
index e3b875c08d..2022538679 100644
--- a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
+++ b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-base-id-toggle-panel-button x-button"
     data-test="base-id-toggle-button"
diff --git a/packages/x-components/src/components/panels/base-id-toggle-panel.vue b/packages/x-components/src/components/panels/base-id-toggle-panel.vue
index 18b089cf34..714e65b4b2 100644
--- a/packages/x-components/src/components/panels/base-id-toggle-panel.vue
+++ b/packages/x-components/src/components/panels/base-id-toggle-panel.vue
@@ -7,9 +7,9 @@
 
 <script lang="ts">
   import { defineComponent, ref, watch } from 'vue';
-  import { NoElement } from '../no-element';
   import { AnimationProp } from '../../types';
   import { use$x } from '../../composables';
+  import { NoAnimation } from '../animations';
   import BaseTogglePanel from './base-toggle-panel.vue';
 
   /**
@@ -26,27 +26,17 @@
    */
   export default defineComponent({
     name: 'BaseIdTogglePanel',
-    components: {
-      BaseTogglePanel
-    },
+    components: { BaseTogglePanel },
     props: {
-      /**
-       * Shows the panel open at the beginning or not, depending on its state.
-       *
-       * @public
-       */
+      /** Shows the panel open at the beginning or not, depending on its state. */
       startOpen: {
         type: Boolean,
         default: true
       },
-      /**
-       * Animation component that will be used to animate the panel content.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the panel content. */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * The id to link with the BaseIdTogglePanelButton.
diff --git a/packages/x-components/src/components/panels/base-tabs-panel.vue b/packages/x-components/src/components/panels/base-tabs-panel.vue
index 11d72b1df6..7645d79a56 100644
--- a/packages/x-components/src/components/panels/base-tabs-panel.vue
+++ b/packages/x-components/src/components/panels/base-tabs-panel.vue
@@ -66,8 +66,8 @@
 
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
-  import { NoElement } from '../no-element';
   import { AnimationProp } from '../../types';
+  import { NoAnimation } from '../animations';
 
   /**
    * Base Tabs Panel.
@@ -93,7 +93,7 @@
        */
       contentAnimation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * The tab to be initially selected.
@@ -177,7 +177,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-tabs-panel__items-list {
     display: flex;
   }
diff --git a/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts
index 96aa0953e4..eeefdcf923 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts
@@ -1,48 +1,40 @@
-import { Result } from '@empathyco/x-types';
-import { Dictionary } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
-import { XBus } from '@empathyco/x-bus';
+import { mount } from '@vue/test-utils';
 import { createResultStub } from '../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseResultAddToCart from '../base-result-add-to-cart.vue';
-import { WireMetadata, XEventsTypes } from '../../../wiring/index';
+import { XPlugin } from '../../../plugins';
 
-describe('testing BaseResultAddToCart component', () => {
-  function renderAddToCart({
-    result = createResultStub('Result Test'),
-    template = '<BaseResultAddToCart :result="result"/>',
-    methods = {}
-  }: RenderAddToCartOptions): RenderAddToCartApi {
-    const [, localVue] = installNewXPlugin();
-    const wrapper = mount(
-      { template, data: () => ({ result }), methods },
-      {
-        components: { BaseResultAddToCart },
-        localVue
-      }
-    );
-    return {
-      clickAddToCart(): Promise<void> {
-        return wrapper
-          .find(getDataTestSelector('result-add-to-cart'))
-          .trigger('click') as Promise<void>;
-      },
-      on: wrapper.vm.$x.on,
-      addToCartWrapper: wrapper.find(getDataTestSelector('result-add-to-cart'))
-    };
-  }
+function render({
+  result = createResultStub('Result Test'),
+  template = '<BaseResultAddToCart :result="result"/>',
+  methods = {}
+} = {}) {
+  const wrapper = mount(
+    { template, data: () => ({ result }), methods },
+    {
+      components: { BaseResultAddToCart },
+      global: { plugins: [installNewXPlugin()] }
+    }
+  );
+  return {
+    clickAddToCart: () => wrapper.find(getDataTestSelector('result-add-to-cart')).trigger('click'),
+    addToCartWrapper: wrapper.find(getDataTestSelector('result-add-to-cart'))
+  };
+}
 
+describe('testing BaseResultAddToCart component', () => {
   it('emits UserClickedResultAddToCart when the user click on the component', () => {
     const testResult = createResultStub('My Result');
-    const { clickAddToCart, on } = renderAddToCart({ result: testResult });
+    const { clickAddToCart } = render({ result: testResult });
     const listener = jest.fn();
-    on('UserClickedResultAddToCart').subscribe(listener);
+    XPlugin.bus.on('UserClickedResultAddToCart').subscribe(listener);
     clickAddToCart();
+
     expect(listener).toHaveBeenCalledWith(testResult);
   });
 
   it('renders the content overriding default slot', () => {
-    const { addToCartWrapper } = renderAddToCart({
+    const { addToCartWrapper } = render({
       template: `
         <BaseResultAddToCart :result="result">
           <img data-test="result-add-to-cart-icon" src="./add-to-cart.svg" />
@@ -60,7 +52,7 @@ describe('testing BaseResultAddToCart component', () => {
 
   it('uses the listeners passed', () => {
     const listener = jest.fn();
-    const { clickAddToCart } = renderAddToCart({
+    const { clickAddToCart } = render({
       template: '<BaseResultAddToCart @click="miClick" :result="result"/>',
       methods: {
         miClick: listener
@@ -72,26 +64,3 @@ describe('testing BaseResultAddToCart component', () => {
     expect(listener).toHaveBeenCalledWith(expect.any(MouseEvent));
   });
 });
-
-/**
- * The options for the `renderAddToCart` function.
- */
-interface RenderAddToCartOptions {
-  /** The result to pass to `BaseResultAddToCart` as prop. A stub is used by default.*/
-  result?: Result;
-  /**
-   * The template to render. Remember to use `:result="result"` as prop of the
-   * `BaseResultAddToCart`.
-   */
-  template?: string;
-  /** The methods to add to mounted component to test listeners in the `BaseResultAddToCart`. */
-  methods?: Dictionary<() => void>;
-}
-interface RenderAddToCartApi {
-  /** Triggers the click on the `BaseResultAddToCart`. */
-  clickAddToCart: () => Promise<void>;
-  /** The `XBus.on` method to subscribe to any `XEvent`. */
-  on: XBus<XEventsTypes, WireMetadata>['on'];
-  /** The `BaseResultAddToCart` wrapper to use it for testing. */
-  addToCartWrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts
index 39578bf2da..de86e80a0b 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts
@@ -1,6 +1,5 @@
 import { Result } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseCurrency from '../../currency/base-currency.vue';
 import BaseResultCurrentPrice from '../base-result-current-price.vue';
@@ -19,7 +18,7 @@ function renderBaseCurrentPrice({
   template = `<BaseResultCurrentPrice :result="result" :format="format" />`,
   result = mockedResult
 }: RenderBaseCurrentPriceOptions = {}): RenderBaseCurrentPriceAPI {
-  const wrapperComponent: ComponentOptions<Vue> = {
+  const wrapperComponent = {
     template,
     components: {
       BaseResultCurrentPrice
@@ -110,5 +109,5 @@ interface RenderBaseCurrentPriceOptions {
 
 interface RenderBaseCurrentPriceAPI {
   /** The Vue testing utils wrapper for the {@link BaseResultCurrentPrice}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts
index 355a51a73e..c9acd91584 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { Result } from '@empathyco/x-types';
 import { createResultStub } from '../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
@@ -14,11 +13,9 @@ describe('testing BaseResultLink component', () => {
   const result = createResultStub('Product 001', {
     images: ['https://picsum.photos/seed/1/200/300', 'https://picsum.photos/seed/2/200/300']
   });
-  let localVue: typeof Vue;
-  let resultLinkWrapper: Wrapper<Vue>;
+  let resultLinkWrapper: VueWrapper;
   const template = '<BaseResultLink :result="result"/>';
   beforeEach(() => {
-    [, localVue] = installNewXPlugin();
     resultLinkWrapper = mount(
       {
         components: { BaseResultLink },
@@ -26,8 +23,8 @@ describe('testing BaseResultLink component', () => {
         template
       },
       {
-        localVue,
-        propsData: { result }
+        global: { plugins: [installNewXPlugin()] },
+        props: { result }
       }
     );
   });
@@ -61,8 +58,7 @@ describe('testing BaseResultLink component', () => {
           resultClickExtraEvents: <XEvent[]>['UserClickedResultAddToCart'],
           location: <FeatureLocation>'no_query'
         },
-        localVue,
-        propsData: { result }
+        props: { result }
       }
     );
 
@@ -105,8 +101,8 @@ describe('testing BaseResultLink component', () => {
           resultClickExtraEvents: <XEvent[]>['UserClickedResultAddToCart'],
           resultLinkMetadataPerEvent: injectedResultLinkMetadataPerEvent
         },
-        localVue,
-        propsData: { result }
+
+        props: { result }
       }
     );
 
@@ -162,8 +158,7 @@ describe('testing BaseResultLink component', () => {
     };
 
     const customResultLinkWrapper = mount(wrapperComponent, {
-      localVue,
-      propsData: { result }
+      props: { result }
     });
     expect(customResultLinkWrapper.find(getDataTestSelector('result-link')).element).toBeDefined();
     expect(
diff --git a/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts
index 481baec51e..391d4dc21a 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts
@@ -1,7 +1,6 @@
 import { Result } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import { getDataTestSelector } from '../../../__tests__/utils';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseCurrency from '../../currency/base-currency.vue';
 import BaseResultPreviousPrice from '../base-result-previous-price.vue';
 
@@ -21,12 +20,13 @@ function renderBasePreviousPrice({
       :format="format" />`,
   result = mockedResult
 }: RenderBasePreviousPriceOptions = {}): RenderBasePreviousPriceAPI {
-  const wrapperComponent: ComponentOptions<Vue> = {
+  const wrapperComponent = {
     template,
     components: {
       BaseResultPreviousPrice
     },
-    props: ['format', 'result']
+    props: ['format', 'result'],
+    global: { plugins: [installNewXPlugin()] }
   };
 
   const wrapper = mount(wrapperComponent, {
@@ -75,7 +75,7 @@ describe('testing BaseResultPreviousPrice component', () => {
       }
     });
 
-    expect(wrapper.html()).toBe('');
+    expect(wrapper.find('.x-result-previous-price').exists()).toBe(false);
   });
 
   it('renders custom content when overriding the default slot', () => {
@@ -105,5 +105,5 @@ interface RenderBasePreviousPriceOptions {
 
 interface RenderBasePreviousPriceAPI {
   /** The Vue testing utils wrapper for the {@link BaseResultPreviousPrice}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts
index 77cf72c6d1..fa397f5776 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts
@@ -1,5 +1,5 @@
 import { Result } from '@empathyco/x-types';
-import { mount, WrapperArray } from '@vue/test-utils';
+import { mount, DOMWrapper, VueWrapper } from '@vue/test-utils';
 import { createResultStub } from '../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseResultRating from '../base-result-rating.vue';
@@ -15,13 +15,11 @@ function renderBaseResultRating({
   template,
   result
 }: RenderBaseResultRatingOptions): RenderBaseResultRatingApi {
-  const [, localVue] = installNewXPlugin();
-
   const wrapper = mount(
     { template },
     {
-      localVue,
       components: { BaseResultRating },
+      global: { plugins: [installNewXPlugin()] },
       data() {
         return {
           result
@@ -31,10 +29,11 @@ function renderBaseResultRating({
   );
 
   return {
+    wrapper,
     getHtml: (): string => wrapper.html(),
-    getFilledIcons: (): WrapperArray<Vue> =>
+    getFilledIcons: (): DOMWrapper<Element>[] =>
       wrapper.find(getDataTestSelector('rating-filled')).findAll(':scope > *'),
-    getEmptyIcons: (): WrapperArray<Vue> =>
+    getEmptyIcons: (): DOMWrapper<Element>[] =>
       wrapper.find(getDataTestSelector('rating-empty')).findAll(':scope > *'),
     clickRating: async () => {
       await wrapper.findComponent(BaseResultRating).trigger('click');
@@ -67,11 +66,12 @@ describe('testing BaserResultRating component', () => {
   it('does not render anything if result has no rating', () => {
     const resultWithNoRating = createResultStub('No Rating Result', { rating: undefined });
 
-    const { getHtml } = renderBaseResultRating({
+    const { wrapper } = renderBaseResultRating({
       template: `<BaseResultRating :result="result" :max="10" />`,
       result: resultWithNoRating
     });
-    expect(getHtml()).toEqual('');
+
+    expect(wrapper.find('.x-result-rating').exists()).toBe(false);
   });
 
   it('emits event when clicked with the result as payload', async () => {
@@ -98,9 +98,11 @@ interface RenderBaseResultRatingApi {
   /** Retrieves the wrapper with the main html content. */
   getHtml: () => string;
   /** Retrieves the wrapper that matches the rating filled icons. */
-  getFilledIcons: () => WrapperArray<Vue>;
+  getFilledIcons: () => DOMWrapper<Element>[];
   /** Retrieves the wrapper that matches the rating empty icons. */
-  getEmptyIcons: () => WrapperArray<Vue>;
+  getEmptyIcons: () => DOMWrapper<Element>[];
   /** Clicks the rating icons and waits for the view to update. */
   clickRating: () => Promise<void>;
+  /** The Vue testing utils wrapper for the {@link BaseResultRating}. */
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts b/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
index d5afcf6d72..6b95f67c71 100644
--- a/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
@@ -1,11 +1,11 @@
 import { mount } from '@vue/test-utils';
 import { Result } from '@empathyco/x-types';
-import { nextTick } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 import { createResultStub } from '../../../__stubs__/index';
 import { findTestDataById, getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import ResultVariantsProvider from '../result-variants-provider.vue';
 import ResultVariantSelector from '../result-variant-selector.vue';
-import { XPlugin } from '../../../plugins/index';
+import { XPlugin } from '../../../plugins';
 
 const variants = [
   {
@@ -36,17 +36,7 @@ const render = ({
   autoSelectDepth = Number.POSITIVE_INFINITY,
   queryPreviewHash = null as string | null
 } = {}) => {
-  installNewXPlugin();
-  const emitSpy = jest.spyOn(XPlugin.bus, 'emit');
-
-  const wrapper = mount({
-    template: `
-      <ResultVariantsProvider
-        :result="result"
-        :autoSelectDepth="autoSelectDepth"
-        #default="{ result: newResult }">
-        ${template}
-      </ResultVariantsProvider>`,
+  const resultComponent = defineComponent({
     components: {
       ResultVariantsProvider,
       ResultVariantSelector
@@ -54,23 +44,36 @@ const render = ({
     provide: {
       queryPreviewHash
     },
-    data: () => ({
-      result,
-      autoSelectDepth
-    })
+    data() {
+      return {
+        result,
+        autoSelectDepth
+      };
+    },
+    template: `
+      <ResultVariantsProvider
+        :result="result"
+        :autoSelectDepth="autoSelectDepth"
+        #default="{ result: newResult }">
+        ${template}
+      </ResultVariantsProvider>`
+  });
+
+  const wrapper = mount(resultComponent, {
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
     wrapper: wrapper.findComponent(ResultVariantsProvider),
-    emitSpy,
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     findSelectorButtonByLevel: (level: number) =>
       findTestDataById(wrapper, 'variants-list')
         .at(level)
-        .findAll(getDataTestSelector('variant-button')),
+        ?.findAll(getDataTestSelector('variant-button')),
     findSelectorItemByLevel: (level: number) =>
       findTestDataById(wrapper, 'variants-list')
         .at(level)
-        .findAll(getDataTestSelector('variant-item')),
+        ?.findAll(getDataTestSelector('variant-item')),
     setResult: (result: Result) => {
       (wrapper.vm as any).result = result;
       return nextTick();
@@ -114,25 +117,25 @@ describe('results with variants', () => {
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('jacket');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');
 
-    await firstLevelVariantButtons.at(0).trigger('click');
+    await firstLevelVariantButtons?.at(0)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');
 
     const secondLevelVariantButtons = findSelectorButtonByLevel(1);
 
-    await secondLevelVariantButtons.at(1).trigger('click');
+    await secondLevelVariantButtons?.at(1)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');
 
     // It won't deselect the child variant if the parent is clicked.
 
-    await firstLevelVariantButtons.at(0).trigger('click');
+    await firstLevelVariantButtons?.at(0)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');
 
-    await firstLevelVariantButtons.at(1).trigger('click');
+    await firstLevelVariantButtons?.at(1)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('blue jacket');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');
@@ -203,11 +206,11 @@ describe('results with variants', () => {
       result
     });
 
-    const firstVariant = findSelectorItemByLevel(0).at(0);
-    const secondSelectorFirstVariant = findSelectorItemByLevel(1).at(0);
+    const firstVariant = findSelectorItemByLevel(0)?.at(0);
+    const secondSelectorFirstVariant = findSelectorItemByLevel(1)?.at(0);
 
-    expect(firstVariant.element.className).toContain('--is-selected');
-    expect(secondSelectorFirstVariant.element.className).toContain('--is-selected');
+    expect(firstVariant?.element.className).toContain('--is-selected');
+    expect(secondSelectorFirstVariant?.element.className).toContain('--is-selected');
   });
 
   it('selects variants on init up to the level set in the autoSelectDepth prop', () => {
@@ -221,11 +224,11 @@ describe('results with variants', () => {
       autoSelectDepth: 1
     });
 
-    const firstVariant = findSelectorItemByLevel(0).at(0);
-    const secondSelectorFirstVariant = findSelectorItemByLevel(1).at(0);
+    const firstVariant = findSelectorItemByLevel(0)?.at(0);
+    const secondSelectorFirstVariant = findSelectorItemByLevel(1)?.at(0);
 
-    expect(firstVariant.element.className).toContain('--is-selected');
-    expect(secondSelectorFirstVariant.element.className).not.toContain('--is-selected');
+    expect(firstVariant?.element.className).toContain('--is-selected');
+    expect(secondSelectorFirstVariant?.element.className).not.toContain('--is-selected');
   });
 
   it('wont select any variant by default if autoSelectDepth is 0', () => {
@@ -280,10 +283,10 @@ describe('results with variants', () => {
 
       await firstVariantButton.trigger('click');
 
-      expect(variantWrappers.at(0).element).toHaveClass(className);
-      variantWrappers.wrappers
-        .slice(1)
-        .forEach(wrapper => expect(wrapper.element).not.toHaveClass(className));
+      expect(variantWrappers.at(0)?.element).toHaveClass(className);
+      variantWrappers.slice(1).forEach(wrapper => {
+        expect(wrapper.element.classList.contains(className)).toBe(false);
+      });
     });
 
     it('renders all the variants of each level', async () => {
@@ -310,25 +313,25 @@ describe('results with variants', () => {
       const firstLevelVariantButtons = findSelectorButtonByLevel(0);
 
       expect(firstLevelVariantButtons).toHaveLength(2);
-      expect(firstLevelVariantButtons.at(0).text()).toEqual('red jacket');
-      expect(firstLevelVariantButtons.at(1).text()).toEqual('blue jacket');
+      expect(firstLevelVariantButtons?.at(0)?.text()).toEqual('red jacket');
+      expect(firstLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket');
 
-      await firstLevelVariantButtons.at(1).trigger('click');
+      await firstLevelVariantButtons?.at(1)?.trigger('click');
 
       const secondLevelVariantButtons = findSelectorButtonByLevel(1);
 
       expect(secondLevelVariantButtons).toHaveLength(2);
-      expect(secondLevelVariantButtons.at(0).text()).toEqual('blue jacket L');
-      expect(secondLevelVariantButtons.at(1).text()).toEqual('blue jacket S');
+      expect(secondLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L');
+      expect(secondLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket S');
 
-      await secondLevelVariantButtons.at(0).trigger('click');
+      await secondLevelVariantButtons?.at(0)?.trigger('click');
 
       const thirdLevelVariantButtons = findSelectorButtonByLevel(2);
 
       expect(thirdLevelVariantButtons).toHaveLength(3);
-      expect(thirdLevelVariantButtons.at(0).text()).toEqual('blue jacket L1');
-      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
-      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
+      expect(thirdLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L1');
+      expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
+      expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
     });
 
     it('wont render if no result is injected', () => {
@@ -372,12 +375,12 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0).text()).toEqual('red jacket');
-      expect(variants.at(1).text()).toEqual('blue jacket');
+      expect(variants.at(0)?.text()).toEqual('red jacket');
+      expect(variants.at(1)?.text()).toEqual('blue jacket');
 
-      await variants.at(0).trigger('click');
+      await variants.at(0)?.trigger('click');
 
-      expect(variants.at(0).element).toHaveClass('isSelected');
+      expect(variants.at(0)?.element).toHaveClass('isSelected');
     });
 
     it('exposes variant, isSelected and selectVariant in the variant slot', async () => {
@@ -398,11 +401,11 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0).text()).toEqual('red jacket');
-      expect(variants.at(1).text()).toEqual('blue jacket');
+      expect(variants.at(0)?.text()).toEqual('red jacket');
+      expect(variants.at(1)?.text()).toEqual('blue jacket');
 
-      await variants.at(1).trigger('click');
-      expect(variants.at(1).element).toHaveClass('isSelected');
+      await variants.at(1)?.trigger('click');
+      expect(variants.at(1)?.element).toHaveClass('isSelected');
     });
 
     it('exposes variant and isSelected in the variant-content slot', async () => {
@@ -418,10 +421,10 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      await variants.at(0).trigger('click');
+      await variants.at(0)?.trigger('click');
 
-      expect(variants.at(0).text()).toContain('red jacket SELECTED!');
-      expect(variants.at(1).text()).toEqual('blue jacket');
+      expect(variants.at(0)?.text()).toContain('red jacket SELECTED!');
+      expect(variants.at(1)?.text()).toEqual('blue jacket');
     });
   });
 });
diff --git a/packages/x-components/src/components/result/base-result-add-to-cart.vue b/packages/x-components/src/components/result/base-result-add-to-cart.vue
index 4db2ca6593..c8017c532e 100644
--- a/packages/x-components/src/components/result/base-result-add-to-cart.vue
+++ b/packages/x-components/src/components/result/base-result-add-to-cart.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-result-add-to-cart x-button"
     data-test="result-add-to-cart"
diff --git a/packages/x-components/src/components/result/base-result-image.vue b/packages/x-components/src/components/result/base-result-image.vue
index ea637ad255..22b0e55bef 100644
--- a/packages/x-components/src/components/result/base-result-image.vue
+++ b/packages/x-components/src/components/result/base-result-image.vue
@@ -42,8 +42,8 @@
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
   import { computed, DefineComponent, defineComponent, PropType, Ref, ref, watch } from 'vue';
-  import { NoElement } from '../no-element';
   import { animationProp } from '../../utils/options-api';
+  import { NoAnimation } from '../animations';
 
   /**
    * Component to be reused that renders an `<img>`.
@@ -51,40 +51,25 @@
    * @public
    */
   export default defineComponent({
-    components: {
-      NoElement
-    },
+    name: 'BaseResultImage',
     props: {
-      /**
-       * (Required) The {@link @empathyco/x-types#Result} information.
-       *
-       * @public
-       */
+      /** (Required) The {@link @empathyco/x-types#Result} information. */
       result: {
         type: Object as PropType<Result>,
         required: true
       },
-
       /**
        * Animation to use when switching between the placeholder, the loaded image, or the failed
        * image fallback.
-       *
-       * @public
        */
       loadAnimation: {
         type: animationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
-
-      /**
-       * Animation to use when switching between the loaded image and the hover image.
-       *
-       * @public
-       */
+      /** Animation to use when switching between the loaded image and the hover image. */
       hoverAnimation: {
         type: animationProp
       },
-
       /**
        * Indicates if the next valid image should be displayed on hover.
        *
@@ -95,7 +80,6 @@
         default: false
       }
     },
-
     setup(props) {
       /**
        * Copy of the images of the result.
@@ -234,16 +218,16 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-result-picture {
     position: relative;
     min-width: 1px;
     min-height: 1px;
+  }
 
-    &-image {
-      max-width: 100%;
-      max-height: 100%;
-    }
+  .x-result-picture-image {
+    max-width: 100%;
+    max-height: 100%;
   }
 </style>
 
diff --git a/packages/x-components/src/components/result/base-result-link.vue b/packages/x-components/src/components/result/base-result-link.vue
index 00dfbdd173..f62d326430 100644
--- a/packages/x-components/src/components/result/base-result-link.vue
+++ b/packages/x-components/src/components/result/base-result-link.vue
@@ -103,7 +103,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-result-link {
     text-decoration: none;
   }
diff --git a/packages/x-components/src/components/result/base-result-rating.vue b/packages/x-components/src/components/result/base-result-rating.vue
index 42c5fbb5b0..71b6346cf1 100644
--- a/packages/x-components/src/components/result/base-result-rating.vue
+++ b/packages/x-components/src/components/result/base-result-rating.vue
@@ -46,6 +46,7 @@
     components: {
       BaseRating
     },
+    inheritAttrs: false,
     props: {
       /**
        * The {@link @empathyco/x-types#Result} to render its rating.
@@ -89,7 +90,7 @@
   });
 </script>
 
-<style scoped lang="scss">
+<style lang="css" scoped>
   .x-result-rating {
     color: inherit;
     text-decoration: none;
diff --git a/packages/x-components/src/components/result/result-variant-selector.vue b/packages/x-components/src/components/result/result-variant-selector.vue
index 445bb66174..0c8ded49f6 100644
--- a/packages/x-components/src/components/result/result-variant-selector.vue
+++ b/packages/x-components/src/components/result/result-variant-selector.vue
@@ -1,57 +1,42 @@
 <template>
-  <NoElement v-if="result && variants">
-    <!--
-      @slot Variants list
-        @binding {ResultVariant[]} variants - Array containing the available variants
-        @binding {ResultVariant | undefined} selectedVariant - The selected variant
-        @binding {(variant: ResultVariant) => void} selectVariant - Callback to select a variant
-    -->
-    <slot :variants="variants" :selectedVariant="selectedVariant" :selectVariant="selectVariant">
-      <ul class="x-result-variant-selector__list" data-test="variants-list">
-        <li
-          v-for="(variant, index) in variants"
-          :key="index"
-          class="x-result-variant-selector__item"
-          :class="{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }"
-          data-test="variant-item"
-        >
+  <ul v-if="result && variants" class="x-result-variant-selector__list" data-test="variants-list">
+    <li
+      v-for="(variant, index) in variants"
+      :key="index"
+      class="x-result-variant-selector__item"
+      :class="{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }"
+      data-test="variant-item"
+    >
+      <!--
+        @slot Variant item
+        @binding {ResultVariant} variant - The variant item
+        @binding {boolean} isSelected - Indicates if the variant is selected
+        @binding {() => void} selectVariant - Callback to select the variant
+      -->
+      <slot
+        name="variant"
+        :variant="variant"
+        :isSelected="variantIsSelected(variant)"
+        :selectVariant="() => selectVariant(variant)"
+      >
+        <button @click="selectVariant(variant)" data-test="variant-button" class="x-button">
           <!--
-            @slot Variant item
-              @binding {ResultVariant} variant - The variant item
-              @binding {boolean} isSelected - Indicates if the variant is selected
-              @binding {() => void} selectVariant - Callback to select the variant
+            @slot Variant content
+            @binding {ResultVariant} variant - The variant item
+            @binding {boolean} isSelected - Indicates if the variant is selected
           -->
-          <slot
-            name="variant"
-            :variant="variant"
-            :isSelected="variantIsSelected(variant)"
-            :selectVariant="() => selectVariant(variant)"
-          >
-            <button @click="selectVariant(variant)" data-test="variant-button" class="x-button">
-              <!--
-                @slot Variant content
-                  @binding {ResultVariant} variant - The variant item
-                  @binding {boolean} isSelected - Indicates if the variant is selected
-              -->
-              <slot
-                name="variant-content"
-                :variant="variant"
-                :isSelected="variantIsSelected(variant)"
-              >
-                {{ variant }}
-              </slot>
-            </button>
+          <slot name="variant-content" :variant="variant" :isSelected="variantIsSelected(variant)">
+            {{ variant }}
           </slot>
-        </li>
-      </ul>
-    </slot>
-  </NoElement>
+        </button>
+      </slot>
+    </li>
+  </ul>
 </template>
 
 <script lang="ts">
   import { computed, defineComponent, inject, Ref } from 'vue';
   import { Result, ResultVariant } from '@empathyco/x-types';
-  import { NoElement } from '../no-element';
   import {
     RESULT_WITH_VARIANTS_KEY,
     SELECTED_VARIANTS_KEY,
@@ -66,19 +51,14 @@
    */
   export default defineComponent({
     name: 'ResultVariantSelector',
-    components: { NoElement },
     props: {
-      /**
-       * The nest level of the variants to be rendered.
-       *
-       * @public
-       */
+      /** The nest level of the variants to be rendered. */
       level: {
         type: Number,
         default: 0
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       /**
        * Callback to be called when a variant is selected.
        *
@@ -89,25 +69,16 @@
         SELECT_RESULT_VARIANT_KEY as string
       );
 
-      /**
-       * The original result, used to retrieve the available variants for the level.
-       *
-       * @public
-       */
+      /** The original result, used to retrieve the available variants for the level. */
       const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string);
 
-      /**
-       * Array containing the selected variants.
-       *
-       * @public
-       */
+      /** Array containing the selected variants. */
       const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string);
 
       /**
        * It retrieves the available variants from the result.
        *
        * @returns - The variants of the result for the current level.
-       * @internal
        */
       const variants = computed<ResultVariant[] | undefined>(() => {
         if (props.level === 0) {
@@ -120,19 +91,17 @@
        * Gets the selected variant of the current level.
        *
        * @returns - The selected variant.
-       * @internal
        */
-      const selectedVariant = computed<ResultVariant | undefined>(() => {
-        return variants.value?.find(variant => variant === selectedVariants!.value[props.level]);
-      });
+      const selectedVariant = computed<ResultVariant | undefined>(() =>
+        variants.value?.find(variant => variant === selectedVariants!.value[props.level])
+      );
 
       /**
        * Calls the provided method to select a variant.
        *
        * @param variant - Variant to select.
-       * @internal
        */
-      const selectVariant = (variant: ResultVariant): void => {
+      const selectVariant = (variant: ResultVariant) => {
         selectResultVariant!(variant, props.level);
       };
 
@@ -141,24 +110,40 @@
        *
        * @param variant - Variant to check.
        * @returns True if the variant is selected, false if not.
-       * @internal
        */
-      const variantIsSelected = (variant: ResultVariant): boolean => {
+      const variantIsSelected = (variant: ResultVariant) => {
         return selectedVariant.value === variant;
       };
 
-      return {
-        result,
-        selectedVariant,
-        selectVariant,
-        variantIsSelected,
-        variants
-      };
+      /**
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no result or variants, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `default` slot or empty string if there are
+       * no result or variants.
+       */
+      function renderDefaultSlot() {
+        const slotProps = {
+          variants: variants.value,
+          selectedVariant: selectedVariant.value,
+          selectVariant
+        };
+        return result && variants.value ? slots.default?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { result, variants, variantIsSelected, selectVariant };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-result-variant-selector__list {
     display: flex;
   }
diff --git a/packages/x-components/src/components/result/result-variants-provider.vue b/packages/x-components/src/components/result/result-variants-provider.vue
index 14607f6d98..9cbec8942c 100644
--- a/packages/x-components/src/components/result/result-variants-provider.vue
+++ b/packages/x-components/src/components/result/result-variants-provider.vue
@@ -7,7 +7,6 @@
     provide,
     Ref,
     PropType,
-    h,
     inject,
     ComputedRef
   } from 'vue';
@@ -151,7 +150,7 @@
         { immediate: true }
       );
 
-      return () => slots.default?.({ result: resultToProvide.value })[0] ?? h();
+      return () => slots.default?.({ result: resultToProvide.value })[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts b/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts
index 10fd10a086..c453215009 100644
--- a/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts
+++ b/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts
@@ -1,7 +1,8 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
-import { XEvent } from '../../../wiring/events.types';
 import BaseScroll from '../base-scroll.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * {@link HTMLElement} `scrollTo` is not implemented in JSDOM. This function sets the `scrollTop`
@@ -19,11 +20,9 @@ async function renderBaseScroll({
   scrollHeight = 800,
   clientHeight = 200,
   distanceToBottom = 100,
-  resetOnChange,
-  resetOn
-}: RenderBaseScrollOptions = {}): Promise<RenderBaseScrollAPI> {
-  const [, localVue] = installNewXPlugin();
-
+  resetOnChange = true,
+  resetOn = ['UserAcceptedAQuery']
+} = {}) {
   const wrapperContainer = mount(
     {
       components: {
@@ -33,32 +32,31 @@ async function renderBaseScroll({
       inheritAttrs: false
     },
     {
-      propsData: {
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         throttleMs,
         distanceToBottom,
         resetOnChange,
         resetOn
-      },
-      localVue
+      }
     }
   );
 
   const wrapper = wrapperContainer.findComponent(BaseScroll);
-  const scrollElement: HTMLElement = wrapperContainer.find(
-    getDataTestSelector('base-scroll')
-  ).element;
+  const scrollElement: HTMLElement = wrapperContainer.find(getDataTestSelector('base-scroll'))
+    .element as HTMLElement;
   jest.spyOn(scrollElement, 'clientHeight', 'get').mockImplementation(() => clientHeight);
   jest.spyOn(scrollElement, 'scrollHeight', 'get').mockImplementation(() => scrollHeight);
 
-  await localVue.nextTick();
+  await nextTick();
 
   return {
     wrapper,
-    async scroll({ to, durationMs }) {
+    scroll: async ({ to = 0, durationMs = 0 }) => {
       scrollElement.scrollTop = to;
-      wrapper.trigger('scroll');
+      await wrapper.trigger('scroll');
       jest.advanceTimersByTime(durationMs);
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -104,7 +102,6 @@ describe('testing Base Scroll Component', () => {
     expect(wrapper.emitted('scroll')).toEqual([[150]]);
   });
 
-  // eslint-disable-next-line max-len
   it('emits the `scroll:direction-change` event when the user changes scrolling direction', async () => {
     const { wrapper, scroll } = await renderBaseScroll({
       throttleMs: 200
@@ -161,7 +158,6 @@ describe('testing Base Scroll Component', () => {
     expect(wrapper.emitted('scroll:direction-change')).toEqual([['DOWN'], ['UP']]);
   });
 
-  // eslint-disable-next-line max-len
   it('emits `scroll:almost-at-end` and `scroll:at-end` when the user scrolls to the bottom', async () => {
     const { wrapper, scroll } = await renderBaseScroll({
       throttleMs: 200,
@@ -207,7 +203,7 @@ describe('testing Base Scroll Component', () => {
     });
     expect(wrapper.element.scrollTop).toEqual(300);
 
-    wrapper.vm.$x.emit('UserAcceptedAQuery', 'milk');
+    XPlugin.bus.emit('UserAcceptedAQuery', 'milk');
     await wrapper.vm.$nextTick();
     expect(wrapper.element.scrollTop).toEqual(0);
   });
@@ -224,33 +220,8 @@ describe('testing Base Scroll Component', () => {
     });
     expect(wrapper.element.scrollTop).toEqual(300);
 
-    wrapper.vm.$x.emit('UserAcceptedAQuery', 'milk');
+    XPlugin.bus.emit('UserAcceptedAQuery', 'milk');
     await wrapper.vm.$nextTick();
     expect(wrapper.element.scrollTop).toEqual(300);
   });
 });
-
-interface RenderBaseScrollOptions {
-  /** The template to be rendered. */
-  template?: string;
-  /** Number for throttle of scroll. */
-  throttleMs?: number;
-  /** Number of scroll height of scroll. */
-  scrollHeight?: number;
-  /** Number of client height of scroll. */
-  clientHeight?: number;
-  /** Distance to the end of the scroll. */
-  distanceToBottom?: number;
-  /** Flag to enable or disable resetting the scroll when the events at {@link BaseScroll.resetOn}
-   * are emitted. */
-  resetOnChange?: boolean;
-  /** List of events to reset the scroll when they are emitted. */
-  resetOn?: XEvent[];
-}
-
-interface RenderBaseScrollAPI {
-  /** The wrapper for the base scroll component. */
-  wrapper: Wrapper<Vue>;
-  /** Function that launch the trigger scroll. */
-  scroll: (options: { to: number; durationMs: number }) => Promise<void>;
-}
diff --git a/packages/x-components/src/components/scroll/base-scroll.vue b/packages/x-components/src/components/scroll/base-scroll.vue
index 43ae5b7cc1..724153c3ff 100644
--- a/packages/x-components/src/components/scroll/base-scroll.vue
+++ b/packages/x-components/src/components/scroll/base-scroll.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, PropType, ref } from 'vue';
+  import { defineComponent, PropType, ref, SetupContext } from 'vue';
   import { XEvent } from '../../wiring/events.types';
   import { useScroll } from './use-scroll';
 
@@ -88,7 +88,11 @@
     setup(props, context) {
       const baseScrollEl = ref<HTMLElement>();
 
-      const { throttledStoreScrollData } = useScroll(props, context, baseScrollEl);
+      const { throttledStoreScrollData } = useScroll(
+        props,
+        context as SetupContext<any>,
+        baseScrollEl
+      );
 
       return {
         throttledStoreScrollData,
diff --git a/packages/x-components/src/components/scroll/use-scroll.ts b/packages/x-components/src/components/scroll/use-scroll.ts
index 63efcca59b..e83b01aedf 100644
--- a/packages/x-components/src/components/scroll/use-scroll.ts
+++ b/packages/x-components/src/components/scroll/use-scroll.ts
@@ -113,9 +113,9 @@ export function useScroll(
    */
   const storeScrollData = () => {
     if (scrollEl.value) {
-      currentPosition.value = scrollEl.value.scrollTop;
       scrollHeight.value = scrollEl.value.scrollHeight;
       clientHeight.value = scrollEl.value.clientHeight;
+      currentPosition.value = scrollEl.value.scrollTop;
     }
   };
 
diff --git a/packages/x-components/src/components/sliding-panel.vue b/packages/x-components/src/components/sliding-panel.vue
index d6c6e6ffd9..a2d7289af2 100644
--- a/packages/x-components/src/components/sliding-panel.vue
+++ b/packages/x-components/src/components/sliding-panel.vue
@@ -191,60 +191,57 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-sliding-panel {
     align-items: center;
     display: flex;
     flex-flow: row nowrap;
     position: relative;
+  }
 
-    &__button {
-      opacity: 0;
-      pointer-events: none;
-      position: absolute;
-      transition: all ease-out 0.2s;
-      z-index: 2; /* To overlay the design system gradient with z-index:1 */
-    }
-    .x-sliding-panel-button-left {
-      left: 0;
-    }
+  .x-sliding-panel__button {
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: all ease-out 0.2s;
+    z-index: 2; /* To overlay the design system gradient with z-index:1 */
+  }
+  .x-sliding-panel-button-left {
+    left: 0;
+  }
+  .x-sliding-panel-button-right {
+    right: 0;
+  }
 
-    .x-sliding-panel-button-right {
-      right: 0;
-    }
+  .x-sliding-panel__scroll {
+    display: flex;
+    flex: 100%;
+    flex-flow: row nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE */
+  }
 
-    &__scroll {
-      display: flex;
-      flex: 100%;
-      flex-flow: row nowrap;
-      overflow-x: auto;
-      overflow-y: hidden;
-      scrollbar-width: none; // Firefox
-      -ms-overflow-style: none; // IE
-
-      // Chrome, Edge & Safari
-      &::-webkit-scrollbar {
-        display: none;
-      }
+  /* Chrome, Edge & Safari */
+  .x-sliding-panel__scroll::-webkit-scrollbar {
+    display: none;
+  }
 
-      > * {
-        flex: 0 0 auto;
-      }
-    }
+  .x-sliding-panel__scroll > * {
+    flex: 0 0 auto;
+  }
 
-    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) {
-      .x-sliding-panel-button-left {
-        opacity: 1;
-        pointer-events: all;
-      }
-    }
+  /* prettier-ignore */
+  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
+    opacity: 1;
+    pointer-events: all;
+  }
 
-    &:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) {
-      .x-sliding-panel-button-right {
-        opacity: 1;
-        pointer-events: all;
-      }
-    }
+  /* prettier-ignore */
+  .x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
+    opacity: 1;
+    pointer-events: all;
   }
 </style>
 
diff --git a/packages/x-components/src/components/snippet-callbacks.vue b/packages/x-components/src/components/snippet-callbacks.vue
index e6f7913602..c8dea2811b 100644
--- a/packages/x-components/src/components/snippet-callbacks.vue
+++ b/packages/x-components/src/components/snippet-callbacks.vue
@@ -1,5 +1,5 @@
 <template>
-  <GlobalXBus v-on="eventListeners" />
+  <GlobalXBus :listeners="eventListeners" />
 </template>
 
 <script lang="ts">
diff --git a/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts b/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts
index fc479014b7..6b8c80267c 100644
--- a/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts
+++ b/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts
@@ -1,23 +1,21 @@
 import { Suggestion } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { createQuerySuggestion } from '../../../__stubs__/index';
-import { normalizeString } from '../../../utils/normalize';
-import { XEventsTypes } from '../../../wiring/events.types';
-import { WireMetadata } from '../../../wiring/wiring.types';
+import { mount } from '@vue/test-utils';
+import { normalizeString } from '../../../utils';
+import { XEventsTypes, WireMetadata } from '../../../wiring';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseSuggestion from '../base-suggestion.vue';
-import { createSimpleFacetStub } from '../../../__stubs__/facets-stubs.factory';
-import { createPopularSearch } from '../../../__stubs__/popular-searches-stubs.factory';
-import { XPlugin } from '../../../plugins/index';
+import {
+  createQuerySuggestion,
+  createPopularSearch,
+  createSimpleFacetStub
+} from '../../../__stubs__';
+import { XPlugin } from '../../../plugins';
 
 function renderBaseSuggestion({
   query = 'bebe',
   suggestion = createPopularSearch('bebe lloron'),
   suggestionSelectedEvents = {}
-}: BaseSuggestionOptions = {}): BaseSuggestionAPI {
-  const [, localVue] = installNewXPlugin();
-  const emit = jest.spyOn(XPlugin.bus, 'emit');
+}: BaseSuggestionOptions = {}) {
   const wrapper = mount(
     {
       components: { BaseSuggestion },
@@ -27,8 +25,8 @@ function renderBaseSuggestion({
         ':suggestion-selected-events="suggestionSelectedEvents" />'
     },
     {
-      localVue,
-      propsData: {
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         query,
         suggestion,
         suggestionSelectedEvents
@@ -36,6 +34,8 @@ function renderBaseSuggestion({
     }
   );
 
+  const emit = jest.spyOn(XPlugin.bus, 'emit');
+
   const wireMetadata = expect.objectContaining<Partial<WireMetadata>>({
     target: wrapper.element
   });
@@ -46,12 +46,8 @@ function renderBaseSuggestion({
     query,
     wireMetadata,
     emit,
-    getEndingPart() {
-      return wrapper.get(getDataTestSelector('highlight-end'));
-    },
-    getMatchingPart() {
-      return wrapper.get(getDataTestSelector('matching-part'));
-    }
+    getEndingPart: () => wrapper.get(getDataTestSelector('highlight-end')),
+    getMatchingPart: () => wrapper.get(getDataTestSelector('matching-part'))
   };
 }
 
@@ -171,23 +167,3 @@ interface BaseSuggestionOptions {
 
   template?: string;
 }
-
-/**
- * Test API for the {@link BaseSuggestion} component.
- */
-interface BaseSuggestionAPI {
-  /** The wrapper for base suggestion component. */
-  wrapper: Wrapper<Vue>;
-  /** The rendered suggestion. */
-  suggestion: Suggestion;
-  /** The query introduced to find the suggestion. */
-  query: string;
-  /** Metadata used to keep track of the events fired to the bus. */
-  wireMetadata: Partial<WireMetadata>;
-  /** Mock for the `$x.emit` function. Can be used to check the emitted events. */
-  emit: jest.SpyInstance;
-  /** Retrieves the last non-matching part. */
-  getEndingPart: () => Wrapper<Vue>;
-  /** When there is a query matching, retrieves the matching part of the text. */
-  getMatchingPart: () => Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts b/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts
index d662413efa..0d3a382a9f 100644
--- a/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts
+++ b/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts
@@ -1,5 +1,5 @@
 import { Suggestion } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
 import {
   createPopularSearch,
   getPopularSearchesStub
@@ -20,7 +20,7 @@ function renderBaseSuggestions({
   showPlainSuggestion = false,
   suggestionItemClass
 }: BaseSuggestionsOptions = {}): BaseSuggestionsAPI {
-  const wrapper = mount(
+  const wrapperContainer = mount(
     {
       template,
       components: {
@@ -28,27 +28,27 @@ function renderBaseSuggestions({
       }
     },
     {
-      propsData: { suggestions, showFacets, showPlainSuggestion, suggestionItemClass }
+      props: { suggestions, showFacets, showPlainSuggestion, suggestionItemClass }
     }
   );
 
+  const wrapper = wrapperContainer.findComponent(BaseSuggestions);
+
   return {
-    wrapper: wrapper.findComponent(BaseSuggestions),
+    wrapper,
+    wrapperContainer,
     suggestions,
     getSuggestionsWrappers() {
-      return wrapper.findAll(getDataTestSelector('suggestion-item')).wrappers;
+      return wrapper.findAll(getDataTestSelector('suggestion-item'));
     }
   };
 }
 
 describe('testing Base Suggestions component', () => {
   it('renders the passed suggestions', () => {
-    const { wrapper, suggestions, getSuggestionsWrappers } = renderBaseSuggestions();
+    const { suggestions, getSuggestionsWrappers } = renderBaseSuggestions();
 
     expect(getSuggestionsWrappers()).toHaveLength(suggestions.length);
-    // Expect generated keys to be unique
-    const listItemKeys = new Set((wrapper.vm as any).suggestionsKeys);
-    expect(listItemKeys.size).toEqual(suggestions.length);
   });
 
   it('renders the content passed to the default slot', () => {
@@ -60,9 +60,8 @@ describe('testing Base Suggestions component', () => {
     );
   });
 
-  // eslint-disable-next-line max-len
   it('renders at most the number of suggestions defined by `maxItemsToRender` prop, including those with facets', async () => {
-    const { wrapper, getSuggestionsWrappers } = renderBaseSuggestions({
+    const { wrapperContainer, getSuggestionsWrappers } = renderBaseSuggestions({
       defaultSlot: `<span>{{suggestion.query}}{{filter ?  ' - ' + filter.label : ''}}</span>`,
       showFacets: true,
       showPlainSuggestion: true,
@@ -86,13 +85,13 @@ describe('testing Base Suggestions component', () => {
     expect(suggestionsWrappers[2].text()).toEqual('t-shirt - woman');
     expect(suggestionsWrappers[3].text()).toEqual('jeans');
 
-    await wrapper.setProps({ maxItemsToRender: 2 });
+    await wrapperContainer.setProps({ maxItemsToRender: 2 });
     const updatedSuggestionsWrappers = getSuggestionsWrappers();
     expect(updatedSuggestionsWrappers).toHaveLength(2);
     expect(updatedSuggestionsWrappers[0].text()).toEqual('t-shirt');
     expect(updatedSuggestionsWrappers[1].text()).toEqual('t-shirt - man');
 
-    await wrapper.setProps({ maxItemsToRender: 0 });
+    await wrapperContainer.setProps({ maxItemsToRender: 0 });
     expect(getSuggestionsWrappers()).toHaveLength(0);
   });
 
@@ -128,7 +127,6 @@ describe('testing Base Suggestions component', () => {
     });
   });
 
-  // eslint-disable-next-line max-len
   it('renders the plain suggestion when `showFacets` and `showPlainSuggestion` are set to true', () => {
     const { getSuggestionsWrappers } = renderBaseSuggestions({
       defaultSlot: `<span>{{suggestion.query}}{{filter ?  ' - ' + filter.label : ''}}</span>`,
@@ -197,9 +195,11 @@ interface BaseSuggestionsOptions {
  */
 interface BaseSuggestionsAPI {
   /** The wrapper for base suggestions component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
+  /** The wrapper container for the mounted component. */
+  wrapperContainer: VueWrapper;
   /** The rendered suggestions. */
   suggestions: Suggestion[];
   /** The wrappers of the rendered suggestions. */
-  getSuggestionsWrappers: () => Wrapper<Vue>[];
+  getSuggestionsWrappers: () => DOMWrapper<Element>[];
 }
diff --git a/packages/x-components/src/components/suggestions/base-suggestion.vue b/packages/x-components/src/components/suggestions/base-suggestion.vue
index f0f6a8437f..f80ece9b80 100644
--- a/packages/x-components/src/components/suggestions/base-suggestion.vue
+++ b/packages/x-components/src/components/suggestions/base-suggestion.vue
@@ -1,5 +1,5 @@
 <template>
-  <button ref="el" @click="emitEvents" v-on="$listeners" :class="dynamicCSSClasses">
+  <button ref="el" @click="emitEvents" :class="dynamicCSSClasses">
     <!--
       @slot Button content
           @binding {Suggestion} suggestion - Suggestion data
diff --git a/packages/x-components/src/components/suggestions/base-suggestions.vue b/packages/x-components/src/components/suggestions/base-suggestions.vue
index f7138f3f67..9fd0032a6c 100644
--- a/packages/x-components/src/components/suggestions/base-suggestions.vue
+++ b/packages/x-components/src/components/suggestions/base-suggestions.vue
@@ -164,15 +164,15 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-suggestions {
     list-style-type: none;
+  }
 
-    &,
-    &__item {
-      display: flex;
-      flex-flow: column nowrap;
-    }
+  .x-suggestions,
+  .x-suggestions__item {
+    display: flex;
+    flex-flow: column nowrap;
   }
 </style>
 
diff --git a/packages/x-components/src/components/x-component.mixin.ts b/packages/x-components/src/components/x-component.mixin.ts
deleted file mode 100644
index e879c17b1b..0000000000
--- a/packages/x-components/src/components/x-component.mixin.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import Vue, { ComponentOptions } from 'vue';
-import { XPlugin } from '../plugins/x-plugin';
-import { AnyXModule } from '../x-modules/x-modules.types';
-
-/**
- * Initializes a component as an X-Component:
- * * Registers the module passed as parameter.
- * * Flags the component as X-Component, so then it can be detected with the {@link isXComponent}
- * function.
- *
- * @param module - The module associated to the X-Component using this mixin.
- * @returns Mixin for the module.
- * @public
- * @deprecated Use `XPlugin.registerXModule(xModule)` or `initialXModules` in
- * {@link InstallXOptions | x-installer} instead.
- */
-export function xComponentMixin(module: AnyXModule): ComponentOptions<Vue> {
-  XPlugin.registerXModule(module);
-  return {
-    xModule: module.name
-  };
-}
diff --git a/packages/x-components/src/components/x-component.utils.ts b/packages/x-components/src/components/x-component.utils.ts
index ee6a25ae59..3b44646e8a 100644
--- a/packages/x-components/src/components/x-component.utils.ts
+++ b/packages/x-components/src/components/x-component.utils.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { ComponentPublicInstance } from 'vue';
 import { XModuleName } from '../x-modules/x-modules.types';
 
 /**
@@ -9,7 +9,9 @@ import { XModuleName } from '../x-modules/x-modules.types';
  * x-component.
  * @internal
  */
-export function getXComponentXModuleName(component: Vue | undefined): XModuleName | null {
+export function getXComponentXModuleName(
+  component: ComponentPublicInstance | undefined
+): XModuleName | null {
   return component?.$options.xModule ?? null;
 }
 
@@ -21,7 +23,7 @@ export function getXComponentXModuleName(component: Vue | undefined): XModuleNam
  * @returns A boolean which flags if a component is a X-Component.
  * @public
  */
-export function isXComponent(component: Vue): boolean {
+export function isXComponent(component: ComponentPublicInstance): boolean {
   return !!getXComponentXModuleName(component);
 }
 
@@ -32,9 +34,11 @@ export function isXComponent(component: Vue): boolean {
  * @returns The root XComponent or undefined if it has not.
  * @public
  */
-export function getRootXComponent(component: Vue | null): Vue | undefined {
-  let xComponent: Vue | undefined;
-  let currentComponent: Vue | null = component;
+export function getRootXComponent(
+  component: ComponentPublicInstance | null
+): ComponentPublicInstance | undefined {
+  let xComponent: ComponentPublicInstance | undefined;
+  let currentComponent = component;
   while (currentComponent != null) {
     if (isXComponent(currentComponent)) {
       xComponent = currentComponent;
diff --git a/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts b/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts
index bf30279753..03734a370b 100644
--- a/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts
@@ -1,6 +1,6 @@
-import Vue, { defineComponent } from 'vue';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { defineComponent } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { AnyXStoreModule } from '../../store/index';
 import { UseAliasAPI, useAliasApi, UseAliasQueryAPI, UseAliasStatusAPI } from '../use-alias-api';
 import { searchBoxXStoreModule } from '../../x-modules/search-box/index';
@@ -13,6 +13,7 @@ import { identifierResultsXStoreModule } from '../../x-modules/identifier-result
 import { popularSearchesXStoreModule } from '../../x-modules/popular-searches/index';
 import { recommendationsXStoreModule } from '../../x-modules/recommendations/index';
 import { historyQueriesXStoreModule } from '../../x-modules/history-queries/index';
+import { installNewXPlugin } from '../../__tests__/utils';
 
 const renderUseAliasApiTest = (registerXModules = true): renderUseAliasApiTestAPI => {
   const testComponent = defineComponent({
@@ -29,9 +30,6 @@ const renderUseAliasApiTest = (registerXModules = true): renderUseAliasApiTestAP
     template: '<div></div>'
   });
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store = new Store({
     modules: {
       x: {
@@ -70,8 +68,7 @@ const renderUseAliasApiTest = (registerXModules = true): renderUseAliasApiTestAP
   });
 
   const wrapper = mount(testComponent, {
-    localVue,
-    store
+    global: { plugins: [installNewXPlugin(), store] }
   });
 
   return {
@@ -223,7 +220,7 @@ describe('testing useAliasApi composable', () => {
 
 type renderUseAliasApiTestAPI = {
   store: Store<any>;
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   query: UseAliasQueryAPI;
   status: UseAliasStatusAPI;
   xAliasAPI: UseAliasAPI;
diff --git a/packages/x-components/src/composables/__tests__/use-debounce.spec.ts b/packages/x-components/src/composables/__tests__/use-debounce.spec.ts
index 5ddbbbc2c0..028146de6e 100644
--- a/packages/x-components/src/composables/__tests__/use-debounce.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-debounce.spec.ts
@@ -68,7 +68,7 @@ describe('testing useDebounce composable', () => {
 
     await runDebouncedFnMock();
     jest.advanceTimersByTime(100);
-    wrapper.destroy();
+    wrapper.unmount();
     jest.advanceTimersByTime(500);
     expect(fnMock).toHaveBeenCalledTimes(0);
   });
diff --git a/packages/x-components/src/composables/__tests__/use-getter.spec.ts b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
index 70019a0803..4519a6b22b 100644
--- a/packages/x-components/src/composables/__tests__/use-getter.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
@@ -3,28 +3,27 @@ import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { useGetter } from '../use-getter';
 import { ExtractGetters } from '../../x-modules/x-modules.types';
-import { useStore } from '../use-store';
 import { XPlugin } from '../../plugins';
 import { historyQueriesXModule } from '../../x-modules/history-queries/x-module';
 
-jest.mock('../use-store');
-
 function render(modulePaths: (keyof ExtractGetters<'historyQueries'>)[]) {
-  installNewXPlugin();
-  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
-
   const component = defineComponent({
-    xModule: 'historyQueries',
+    xModule: historyQueriesXModule.name,
     setup: () => {
-      XPlugin.registerXModule(historyQueriesXModule);
       const historyQueriesGetter = useGetter('historyQueries', modulePaths);
       return { historyQueriesGetter };
     },
     template: `<div/>`
   });
 
-  const wrapper = mount(component);
-
+  const wrapper = mount(component, {
+    global: {
+      plugins: [installNewXPlugin()],
+      mocks: {
+        $store: {}
+      }
+    }
+  });
   return (wrapper as any).vm.historyQueriesGetter;
 }
 
diff --git a/packages/x-components/src/composables/__tests__/use-no-element-render.spec.ts b/packages/x-components/src/composables/__tests__/use-no-element-render.spec.ts
deleted file mode 100644
index 412f18fdc1..0000000000
--- a/packages/x-components/src/composables/__tests__/use-no-element-render.spec.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import Vue, { ComponentOptions, defineComponent } from 'vue';
-import { mount, Wrapper } from '@vue/test-utils';
-import { Dictionary } from '@empathyco/x-utils';
-import { useNoElementRender } from '../use-no-element-render';
-import { getDataTestSelector } from '../../__tests__/utils';
-
-const renderUseNoElementRender = ({
-  slots,
-  component
-}: RenderUseNoElementRenderOptions = {}): Wrapper<Vue> => {
-  const wrapper = mount(
-    component ??
-      (defineComponent({
-        setup(props, { slots }) {
-          return () => useNoElementRender(slots);
-        }
-      }) as ComponentOptions<Vue>),
-    {
-      slots
-    }
-  );
-
-  return wrapper;
-};
-
-describe('testing useNoElementRender composable', () => {
-  it('renders as empty if there are no slots', () => {
-    let wrapper = renderUseNoElementRender();
-
-    expect(wrapper.html()).toBe('');
-
-    wrapper = renderUseNoElementRender({
-      slots: {
-        nonDefault: '<div data-test="non-default-slot"></div>'
-      }
-    });
-
-    expect(wrapper.html()).toBe('');
-  });
-
-  it('renders the default slot if there is any', () => {
-    const wrapper = renderUseNoElementRender({
-      slots: {
-        default: '<div data-test="default-slot"></div>',
-        nonDefault: '<div data-test="non-default-slot"></div>'
-      }
-    });
-
-    expect(wrapper.find(getDataTestSelector('default-slot')).exists()).toBe(true);
-  });
-
-  it('also works from the `setup` function', () => {
-    const component = defineComponent({
-      setup(_, { slots }) {
-        return () => useNoElementRender(slots);
-      }
-    });
-
-    let wrapper = renderUseNoElementRender({
-      component
-    });
-
-    expect(wrapper.html()).toBe('');
-
-    wrapper = renderUseNoElementRender({
-      slots: {
-        default: '<div data-test="default-slot"></div>'
-      },
-      component
-    });
-
-    expect(wrapper.find(getDataTestSelector('default-slot')).exists()).toBe(true);
-  });
-});
-
-type RenderUseNoElementRenderOptions = {
-  slots?: Dictionary<string>;
-  component?: ComponentOptions<Vue>;
-};
diff --git a/packages/x-components/src/composables/__tests__/use-state.spec.ts b/packages/x-components/src/composables/__tests__/use-state.spec.ts
index ef124b8559..a1631556a8 100644
--- a/packages/x-components/src/composables/__tests__/use-state.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-state.spec.ts
@@ -5,25 +5,25 @@ import { XPlugin } from '../../plugins';
 import { ExtractState } from '../../x-modules/x-modules.types';
 import { useState } from '../use-state';
 import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { useStore } from '../use-store';
-
-jest.mock('../use-store');
 
 function render(modulePaths: (keyof ExtractState<'searchBox'> & string)[]) {
-  installNewXPlugin();
-  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
-
   const component = defineComponent({
-    xModule: 'searchBox',
+    xModule: searchBoxXModule.name,
     setup: () => {
-      XPlugin.registerXModule(searchBoxXModule);
       const searchBoxUseState = useState('searchBox', modulePaths);
       return { searchBoxUseState };
     },
     template: `<div/>`
   });
 
-  const wrapper = mount(component);
+  const wrapper = mount(component, {
+    global: {
+      plugins: [installNewXPlugin()],
+      mocks: {
+        $store: {}
+      }
+    }
+  });
 
   return (wrapper as any).vm.searchBoxUseState;
 }
diff --git a/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts b/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts
index 579bfbd9a6..84de606847 100644
--- a/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts
@@ -1,21 +1,16 @@
 import { mount } from '@vue/test-utils';
 import { defineComponent } from 'vue';
+import { XDummyBus } from '../../__tests__/bus.dummy';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { XPlugin } from '../../plugins';
 import { useXBus } from '../use-x-bus';
 
-function install() {
-  installNewXPlugin();
-
-  return {
-    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
-    onSpy: jest.spyOn(XPlugin.bus, 'on')
-  };
-}
-
-let onColumnsNumberProvidedMock = jest.fn();
+let dummyBus = new XDummyBus();
+const onColumnsNumberProvidedMock = jest.fn();
 
 function render(withMetadata = true) {
+  const emitSpy = jest.spyOn(dummyBus, 'emit');
+  const onSpy = jest.spyOn(dummyBus, 'on');
   const component = defineComponent({
     xModule: 'searchBox',
     setup: () => {
@@ -27,18 +22,25 @@ function render(withMetadata = true) {
   });
 
   return {
-    wrapper: mount(component, { provide: { location: 'Magrathea' } })
+    wrapper: mount(component, {
+      global: {
+        plugins: [installNewXPlugin({}, dummyBus)],
+        provide: { location: 'Magrathea' }
+      }
+    }),
+    emitSpy,
+    onSpy
   };
 }
 
 describe('testing useXBus', () => {
   beforeEach(() => {
-    onColumnsNumberProvidedMock = jest.fn();
+    dummyBus = new XDummyBus();
+    onColumnsNumberProvidedMock.mockReset();
   });
 
   it('should emit and on subscription in the bus for registered events', () => {
-    const { onSpy, emitSpy } = install();
-    render();
+    const { emitSpy, onSpy } = render();
     const metadata = {
       customMetadata: 'custom',
       moduleName: 'searchBox',
@@ -50,25 +52,24 @@ describe('testing useXBus', () => {
     expect(emitSpy).toHaveBeenCalledWith('ColumnsNumberProvided', 10, metadata);
     expect(onSpy).toHaveBeenCalledTimes(1);
     expect(onSpy).toHaveBeenCalledWith('ColumnsNumberProvided', true);
+    expect(onColumnsNumberProvidedMock).toHaveBeenCalledTimes(1);
     expect(onColumnsNumberProvidedMock).toHaveBeenCalledWith({ eventPayload: 10, metadata });
   });
 
   it('should not emit metadata if it was not configured for', () => {
-    install();
     render(false);
 
+    expect(onColumnsNumberProvidedMock).toHaveBeenCalledTimes(1);
     expect(onColumnsNumberProvidedMock).toHaveBeenCalledWith(10);
   });
 
   it('should emit events natively in Vue', () => {
-    install();
     const { wrapper } = render();
 
     expect(wrapper.emitted()).toEqual({ ColumnsNumberProvided: [[10]] });
   });
 
   it('should unsubscribe from events when component is unmounted', async () => {
-    install();
     const { wrapper } = render();
     const payloadGenerator = (eventPayload: number) => expect.objectContaining({ eventPayload });
 
@@ -78,7 +79,7 @@ describe('testing useXBus', () => {
     expect(onColumnsNumberProvidedMock).toHaveBeenCalledTimes(2); // Bus emission
     expect(onColumnsNumberProvidedMock).toHaveBeenNthCalledWith(2, payloadGenerator(50));
 
-    wrapper.destroy();
+    wrapper.unmount();
 
     await XPlugin.bus.emit('ColumnsNumberProvided', 60);
     expect(onColumnsNumberProvidedMock).toHaveBeenCalledTimes(2); // No listener on unmounted
diff --git a/packages/x-components/src/composables/index.ts b/packages/x-components/src/composables/index.ts
index 755102e32b..951fdacb52 100644
--- a/packages/x-components/src/composables/index.ts
+++ b/packages/x-components/src/composables/index.ts
@@ -3,7 +3,6 @@ export * from './use-$x';
 export * from './use-alias-api';
 export * from './use-debounce';
 export * from './use-getter';
-export * from './use-no-element-render';
 export * from './use-on-display';
 export * from './use-state';
 export * from './use-store';
diff --git a/packages/x-components/src/composables/use-no-element-render.ts b/packages/x-components/src/composables/use-no-element-render.ts
deleted file mode 100644
index 04c418d3df..0000000000
--- a/packages/x-components/src/composables/use-no-element-render.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { h, SetupContext } from 'vue';
-import { VNode } from 'vue/types/vnode';
-
-/**
- * Returns a render function that returns the default slot or nothing if it's not defined.
- *
- * @param slots - The slots object from the component.
- * @returns The result of the rendering function to use.
- *
- * @public
- */
-export function useNoElementRender(
-  slots: { [key: string]: VNode[] | undefined } | SetupContext['slots']
-): VNode | VNode[] {
-  const defaultSlotContent = typeof slots.default === 'function' ? slots.default() : slots.default;
-
-  return defaultSlotContent ?? h();
-}
diff --git a/packages/x-components/src/composables/use-store.ts b/packages/x-components/src/composables/use-store.ts
index dfb7bcb67d..f4d53fb54b 100644
--- a/packages/x-components/src/composables/use-store.ts
+++ b/packages/x-components/src/composables/use-store.ts
@@ -1,6 +1,4 @@
-import { getCurrentInstance } from 'vue';
-import { Store } from 'vuex';
-
+import { useStore as useStoreVuex, Store } from 'vuex';
 /**
  * Function which returns the `$store` object from the current component instance.
  *
@@ -9,5 +7,5 @@ import { Store } from 'vuex';
  * @public
  */
 export function useStore(): Store<any> {
-  return (getCurrentInstance()?.proxy as { $store: Store<any> }).$store;
+  return useStoreVuex();
 }
diff --git a/packages/x-components/src/composables/use-x-bus.ts b/packages/x-components/src/composables/use-x-bus.ts
index 3909d795a7..8eb74abf04 100644
--- a/packages/x-components/src/composables/use-x-bus.ts
+++ b/packages/x-components/src/composables/use-x-bus.ts
@@ -1,5 +1,12 @@
 import { Subscription } from 'rxjs';
-import Vue, { getCurrentInstance, inject, isRef, onBeforeUnmount, Ref } from 'vue';
+import {
+  ComponentPublicInstance,
+  getCurrentInstance,
+  inject,
+  isRef,
+  onBeforeUnmount,
+  Ref
+} from 'vue';
 import { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';
 import { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types';
 import { WireMetadata } from '../wiring/wiring.types';
@@ -8,8 +15,8 @@ import { FeatureLocation } from '../types/origin';
 import { XPlugin } from '../plugins/x-plugin';
 import { bus as xBus } from '../plugins/x-bus';
 
-interface PrivateExtendedVueComponent extends Vue {
-  xComponent?: Vue;
+interface PrivateExtendedVueComponent extends ComponentPublicInstance {
+  xComponent?: ComponentPublicInstance;
 }
 
 /**
@@ -26,10 +33,10 @@ interface PrivateExtendedVueComponent extends Vue {
 export function useXBus() {
   const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none');
 
-  const component = getCurrentInstance()?.proxy;
+  const component = getCurrentInstance()?.proxy as PrivateExtendedVueComponent;
   const xComponent = getRootXComponent(component ?? null);
   if (component && xComponent) {
-    (component as PrivateExtendedVueComponent).xComponent = xComponent;
+    component.xComponent = xComponent;
   }
 
   let bus: XBus<XEventsTypes, WireMetadata>;
@@ -55,6 +62,7 @@ export function useXBus() {
             payload: Metadata extends true ? SubjectPayload<Payload, WireMetadata> : Payload
           ) => void
           // Cast to any because bus.on doesn't infer conditional type referencing `withMetadata`
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         ) => subscription.add(observable.subscribe(callback as any))
       };
     },
diff --git a/packages/x-components/src/design-system-deprecated/utilities/dev-mode.css b/packages/x-components/src/design-system-deprecated/utilities/dev-mode.css
new file mode 100644
index 0000000000..8b4b9f0eb9
--- /dev/null
+++ b/packages/x-components/src/design-system-deprecated/utilities/dev-mode.css
@@ -0,0 +1,12 @@
+.dev-mode .slot-helper {
+  font-family: inherit;
+  color: grey;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  border: dashed 1px grey;
+  border-radius: 10px;
+}
diff --git a/packages/x-components/src/design-system-deprecated/utilities/dev-mode.scss b/packages/x-components/src/design-system-deprecated/utilities/dev-mode.scss
deleted file mode 100644
index 46871cd3ae..0000000000
--- a/packages/x-components/src/design-system-deprecated/utilities/dev-mode.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.dev-mode {
-  .slot-helper {
-    font-family: inherit;
-    color: grey;
-    box-sizing: border-box;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-    border: dashed 1px grey;
-    border-radius: 10px;
-  }
-}
diff --git a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.ts b/packages/x-components/src/directives/infinite-scroll.ts
similarity index 53%
rename from packages/x-components/src/directives/infinite-scroll/infinite-scroll.ts
rename to packages/x-components/src/directives/infinite-scroll.ts
index 5a2a376253..88afcb3e1d 100644
--- a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.ts
+++ b/packages/x-components/src/directives/infinite-scroll.ts
@@ -1,15 +1,34 @@
-import { DirectiveOptions } from 'vue';
-import { Vue } from 'vue/types/vue';
-import { InfiniteScroll, ObserverOptions } from './infinite-scroll.types';
+import { Directive } from 'vue';
+import { XPlugin } from '../plugins';
 
 const VIEWPORT_ID = 'viewport';
 
 /**
- * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable
+ * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable
  * container.
  */
 const state: Record<string, IntersectionObserver> = {};
 
+/**
+ * Retrieves the root element for the provided ID.
+ *
+ * @param element - Target element where directive is set.
+ * @param id - String identifier.
+ * @returns HTMLElement or null.
+ */
+function getRoot(element: HTMLElement, id: string): HTMLElement | null {
+  switch (id) {
+    case 'html':
+      return null;
+    case 'body':
+      return document.body;
+    case VIEWPORT_ID:
+      return null;
+    default:
+      return element.closest(`#${id}`)!;
+  }
+}
+
 /**
  * Custom Vue directive for infinite scroll.
  *
@@ -19,10 +38,9 @@ const state: Record<string, IntersectionObserver> = {};
  *
  * How it works.
  *
- * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function
- * implemented by the component which imports the directive, is executed. If you provide a margin in
- * the directive options, this function is triggered when the scroll reaches the end minus that
- * amount of pixels. A default margin of 200px is set.
+ * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the
+ * xBus. If you provide a margin in the directive options, this function is triggered when the
+ * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.
  *
  * Usage.
  *
@@ -56,75 +74,35 @@ const state: Record<string, IntersectionObserver> = {};
  *
  * @public
  */
-export const infiniteScroll: DirectiveOptions = {
-  inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {
+export const infiniteScroll: Directive<HTMLElement, { margin: number }> = {
+  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {
+    /*
+     * This hack allows the root element to always contain the observed element.
+     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome
+     */
+    const rootMargin = `1000000% 0px ${margin}px 0px`;
     const root = getRoot(element, id);
+    const xBus = XPlugin.bus;
 
-    state[id] = createIntersectionObserver({
-      root,
-      margin,
-      vNode
-    });
+    state[id] = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          xBus.emit('UserReachedResultsListEnd');
+        }
+      },
+      {
+        threshold: 0.99,
+        rootMargin,
+        root
+      }
+    );
 
     state[id].observe(element);
   },
-
-  unbind(_element, { arg: id = VIEWPORT_ID }) {
+  unmounted(_, { arg: id = VIEWPORT_ID }) {
     if (state[id]) {
       state[id].disconnect();
       delete state[id];
     }
   }
 };
-
-/**
- * Retrieves the root element for the provided id.
- *
- * @param element - Target element where directive is set.
- * @param id - String identifier.
- * @returns HTMLElement or null.
- */
-function getRoot(element: HTMLElement, id: string): HTMLElement | null {
-  switch (id) {
-    case 'html':
-      return null;
-    case 'body':
-      return document.body;
-    case VIEWPORT_ID:
-      return null;
-    default:
-      return element.closest(`#${id}`)!;
-  }
-}
-
-/**
- * Creates an IntersectionObserver.
- *
- * When the observer is fired, it will execute the {@link InfiniteScroll.onInfiniteScrollEnd}
- * function implemented in the provided vNode component instance.
- *
- * @param options - ObserverOptions.
- * @returns IntersectionObserver.
- */
-function createIntersectionObserver({
-  root,
-  margin,
-  vNode
-}: ObserverOptions): IntersectionObserver {
-  // This hack allows the root element to always contain the observed element.
-  // Not overpass the top margin more than 1700000 because it doesn't work in Android chrome
-  const rootMargin = `1000000% 0px ${margin}px 0px`;
-
-  return new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting) {
-        (vNode.componentInstance as Vue & InfiniteScroll)?.onInfiniteScrollEnd();
-      }
-    },
-    {
-      threshold: 0.99,
-      rootMargin,
-      root
-    }
-  );
-}
diff --git a/packages/x-components/src/directives/infinite-scroll/index.ts b/packages/x-components/src/directives/infinite-scroll/index.ts
deleted file mode 100644
index d9f789e115..0000000000
--- a/packages/x-components/src/directives/infinite-scroll/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './infinite-scroll';
-export * from './infinite-scroll.types';
diff --git a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.types.ts b/packages/x-components/src/directives/infinite-scroll/infinite-scroll.types.ts
deleted file mode 100644
index 1f946d9ffc..0000000000
--- a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { VNode } from 'vue';
-
-/**
- * Interface to be implemented by the component which uses the infinite scroll directive.
- * If the component wants to trigger an action when the scroll is about to end it needs to implement
- * the `onInfiniteScrollEnd` method.
- *
- * @public
- */
-export interface InfiniteScroll {
-  onInfiniteScrollEnd: () => void;
-}
-
-/**
- * Options used by the IntersectionObserver.
- *
- * @internal
- */
-export interface ObserverOptions {
-  /** The parent container used by the IntersectionObserver. If null, viewport will be observed. */
-  root: HTMLElement | null;
-  /** Amount of pixels that is used in the computed margin passed to the IntersectionObserver. */
-  margin: number;
-  /** VNode which contents the `onInfiniteScrollEnd` method within the context. */
-  vNode: VNode;
-}
diff --git a/packages/x-components/src/main.ts b/packages/x-components/src/main.ts
index 8fb49616d8..37774f5136 100644
--- a/packages/x-components/src/main.ts
+++ b/packages/x-components/src/main.ts
@@ -1,5 +1,5 @@
-import Vue from 'vue';
-import App from './App.vue';
+import type { App } from 'vue';
+import { default as AppComponent } from './App.vue';
 import { setupDevtools } from './plugins/devtools/devtools.plugin';
 import router from './router';
 import { baseInstallXOptions, baseSnippetConfig } from './views/base-config';
@@ -9,7 +9,6 @@ import { SingleSelectModifier } from './x-modules/facets/entities/single-select.
 import { StickyModifier } from './x-modules/facets/entities/sticky.modifier';
 import './tailwind/index.css';
 
-Vue.config.productionTip = false;
 FilterEntityFactory.instance.registerModifierByFacetId('age_facet', SingleSelectModifier);
 FilterEntityFactory.instance.registerModifierByFacetId(
   'brand_facet',
@@ -24,12 +23,12 @@ FilterEntityFactory.instance.registerModifierByFilterModelName(
 
 const installer = new XInstaller({
   ...baseInstallXOptions,
-  app: App,
-  vueOptions: {
-    router
-  },
+  rootComponent: AppComponent,
   domElement: '#app',
-  onCreateApp: initDevtools
+  onCreateApp: initDevtools,
+  installExtraPlugins({ app }) {
+    app.use(router);
+  }
 });
 
 if (window.initX) {
@@ -41,9 +40,9 @@ if (window.initX) {
 /**
  * If an app is provided, initialise the devtools.
  *
- * @param app - The root Vue instance of the application.
+ * @param app - The Vue application instance of the application.
  */
-function initDevtools(app: Vue): void {
+function initDevtools(app: App): void {
   if (process.env.NODE_ENV !== 'production') {
     setupDevtools(app);
   }
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
deleted file mode 100644
index 23e2ec1da4..0000000000
--- a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
-import { ComponentOptions, default as Vue } from 'vue';
-import { installNewXPlugin } from '../../__tests__/utils';
-import { identifierResultsXModule } from '../../x-modules/identifier-results/x-module';
-import { nextQueriesXModule } from '../../x-modules/next-queries/x-module';
-import { popularSearchesXModule } from '../../x-modules/popular-searches/x-module';
-import { querySuggestionsXModule } from '../../x-modules/query-suggestions/x-module';
-import { recommendationsXModule } from '../../x-modules/recommendations/x-module';
-import { relatedTagsXModule } from '../../x-modules/related-tags/x-module';
-import { searchXModule } from '../../x-modules/search/x-module';
-import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { XPlugin } from '../x-plugin';
-import { getAliasAPI } from '../x-plugin.alias';
-import { XComponentAliasAPI } from '../x-plugin.types';
-import { facetsXModule } from '../../x-modules/facets/index';
-
-describe('testing plugin alias', () => {
-  const component: ComponentOptions<Vue> & ThisType<Vue> = {
-    render(createElement) {
-      return createElement();
-    }
-  };
-
-  let localVue: typeof Vue;
-  let componentInstance: Wrapper<Vue>;
-
-  beforeEach(() => {
-    [, localVue] = installNewXPlugin();
-    componentInstance = shallowMount(component, { localVue });
-  });
-
-  afterEach(() => {
-    componentInstance.destroy();
-    jest.clearAllMocks();
-  });
-
-  it('returns default values when no module is registered', () => {
-    const defaultValues: XComponentAliasAPI = {
-      query: {
-        facets: '',
-        searchBox: '',
-        nextQueries: '',
-        querySuggestions: '',
-        relatedTags: '',
-        search: ''
-      },
-      status: {
-        identifierResults: 'initial', // It is already registered by the `identifierResultsXModule` import itself
-        nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
-        popularSearches: 'initial', // It is already registered by the `popularSearchesXModule` import itself
-        querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
-        recommendations: 'initial', // It is already registered by the `recommendationsXModule` import itself
-        relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself
-        search: 'initial' // It is already registered by the `searchXModule` import itself
-      },
-      device: null,
-      facets: {},
-      historyQueries: [],
-      historyQueriesWithResults: [],
-      fullHistoryQueries: [],
-      isHistoryQueriesEnabled: false,
-      fromNoResultsWithFilters: false,
-      identifierResults: [],
-      searchBoxStatus: 'initial', // It is already registered by the `searchBoxXModule` import itself
-      isEmpathizeOpen: false,
-      nextQueries: [],
-      noResults: false,
-      partialResults: [],
-      popularSearches: [],
-      querySuggestions: [],
-      fullQuerySuggestions: [],
-      recommendations: [],
-      redirections: [],
-      relatedTags: [],
-      results: [],
-      scroll: {},
-      selectedFilters: [],
-      selectedRelatedTags: [],
-      semanticQueries: [],
-      spellcheckedQuery: '', // It is already registered by the `searchXModule` import itself
-      totalResults: 0,
-      selectedSort: ''
-    };
-    expect(componentInstance.vm.$x).toMatchObject(defaultValues);
-  });
-
-  it('updates the query values when the module is registered', () => {
-    XPlugin.registerXModule(nextQueriesXModule);
-    XPlugin.registerXModule(querySuggestionsXModule);
-    XPlugin.registerXModule(relatedTagsXModule);
-    XPlugin.registerXModule(searchBoxXModule);
-    XPlugin.registerXModule(searchXModule);
-    XPlugin.registerXModule(facetsXModule);
-
-    componentInstance.vm.$store.commit('x/searchBox/setQuery', 'this');
-    componentInstance.vm.$store.commit('x/nextQueries/setQuery', 'is');
-    componentInstance.vm.$store.commit('x/querySuggestions/setQuery', 'working');
-    componentInstance.vm.$store.commit('x/relatedTags/setQuery', 'properly');
-    componentInstance.vm.$store.commit('x/search/setQuery', 'nice');
-    componentInstance.vm.$store.commit('x/facets/setQuery', '!');
-
-    expect(componentInstance.vm.$x.query).toEqual({
-      searchBox: 'this',
-      nextQueries: 'is',
-      querySuggestions: 'working',
-      relatedTags: 'properly',
-      search: 'nice',
-      facets: '!'
-    });
-  });
-
-  it('updates the status values when the module is registered', () => {
-    const REQUEST_STATUS_REGEX = /success|loading|error|initial/;
-
-    XPlugin.registerXModule(identifierResultsXModule);
-    XPlugin.registerXModule(popularSearchesXModule);
-    XPlugin.registerXModule(recommendationsXModule);
-
-    expect(componentInstance.vm.$x.status).toEqual({
-      identifierResults: expect.stringMatching(REQUEST_STATUS_REGEX),
-      popularSearches: expect.stringMatching(REQUEST_STATUS_REGEX),
-      recommendations: expect.stringMatching(REQUEST_STATUS_REGEX)
-    });
-
-    XPlugin.registerXModule(nextQueriesXModule);
-    XPlugin.registerXModule(querySuggestionsXModule);
-    XPlugin.registerXModule(relatedTagsXModule);
-    XPlugin.registerXModule(searchBoxXModule);
-    XPlugin.registerXModule(searchXModule);
-
-    expect(componentInstance.vm.$x.status).toEqual({
-      identifierResults: expect.stringMatching(REQUEST_STATUS_REGEX),
-      popularSearches: expect.stringMatching(REQUEST_STATUS_REGEX),
-      recommendations: expect.stringMatching(REQUEST_STATUS_REGEX),
-      nextQueries: expect.stringMatching(REQUEST_STATUS_REGEX),
-      querySuggestions: expect.stringMatching(REQUEST_STATUS_REGEX),
-      relatedTags: expect.stringMatching(REQUEST_STATUS_REGEX),
-      search: expect.stringMatching(REQUEST_STATUS_REGEX)
-    });
-  });
-
-  it('has every property defined as a getter', () => {
-    /**
-     * Checks that every property defined by the object and keys is a getter or an object that
-     * only contains getters.
-     *
-     * @param obj - The object to check.
-     * @param keys - The subset of keys from the object to check.
-     * @returns True when the object properties defined by the keys are getters or object with
-     * getters.
-     */
-    function isJSGetterOrDictionaryOfJSGetters(
-      // object and string[] are the parameters used by getOwnPropertyDescriptor.
-      // eslint-disable-next-line @typescript-eslint/ban-types
-      obj: object,
-      keys: string[]
-    ): boolean {
-      return keys.every(key => {
-        const descriptor = Object.getOwnPropertyDescriptor(obj, key);
-        const value = obj[key as keyof typeof obj];
-        return (
-          (descriptor?.set === undefined &&
-            descriptor?.value === undefined &&
-            descriptor?.get !== undefined) ||
-          (typeof value === 'object' &&
-            isJSGetterOrDictionaryOfJSGetters(value, Object.keys(value)))
-        );
-      });
-    }
-
-    const aliasKeys = Object.keys(getAliasAPI(componentInstance.vm));
-
-    expect(isJSGetterOrDictionaryOfJSGetters(componentInstance.vm.$x, aliasKeys)).toEqual(true);
-  });
-});
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts
index e03bd502d5..89c9054f09 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts
@@ -1,13 +1,12 @@
-import { createLocalVue } from '@vue/test-utils';
-import { default as Vue, VueConstructor } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { createStore, Store } from 'vuex';
 import { setQuery } from '../../store/utils/query.utils';
 import { createWireFromFunction } from '../../wiring/wires.factory';
 import { XComponentsAdapterDummy } from '../../__tests__/adapter.dummy';
-import { createXModule } from '../../__tests__/utils';
+import { createXModule, installNewXPlugin } from '../../__tests__/utils';
 import { XPlugin } from '../x-plugin';
 import { XPluginOptions } from '../x-plugin.types';
-import { XDummyBus } from '../../__tests__/bus.dummy';
 
 const wireInstance = jest.fn();
 const usedClearedWireInstance = jest.fn();
@@ -41,8 +40,6 @@ const xModule = createXModule({
   }
 });
 
-let plugin: XPlugin;
-let localVue: VueConstructor<Vue>;
 let store: Store<any>; // Any to handle creation of new properties
 
 describe('testing X Plugin emitters', () => {
@@ -55,11 +52,9 @@ describe('testing X Plugin emitters', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    plugin = new XPlugin(new XDummyBus());
     XPlugin.resetInstance();
-    localVue = createLocalVue();
-    localVue.use(Vuex);
-    store = new Store({});
+    store = createStore({});
+    mount({}, { global: { plugins: [store] } });
   });
 
   describe('install XPlugin overriding store emitters', () => {
@@ -79,13 +74,13 @@ describe('testing X Plugin emitters', () => {
 
     it('overrides before installing plugin', () => {
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
 
       expectModuleToHaveBeenReplaced();
     });
 
     it('overrides after installing plugin', () => {
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
       XPlugin.registerXModule(xModule);
 
       expectModuleToHaveBeenReplaced();
@@ -116,20 +111,29 @@ describe('testing X Plugin emitters', () => {
     const expectedQuery = 'lego';
     beforeEach(() => {
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, {
-        adapter: XComponentsAdapterDummy,
-        __PRIVATE__xModules: {
-          searchBox: {
-            storeEmitters: {
-              UserClearedQuery: {
-                selector: state => state.query,
-                filter: newValue => newValue === expectedQuery
-              }
-            }
+      mount(
+        {},
+        {
+          global: {
+            plugins: [
+              installNewXPlugin({
+                adapter: XComponentsAdapterDummy,
+                __PRIVATE__xModules: {
+                  searchBox: {
+                    storeEmitters: {
+                      UserClearedQuery: {
+                        selector: state => state.query,
+                        filter: newValue => newValue === expectedQuery
+                      }
+                    }
+                  }
+                },
+                store
+              })
+            ]
           }
-        },
-        store
-      });
+        }
+      );
     });
 
     // eslint-disable-next-line max-len
@@ -175,7 +179,7 @@ describe('testing X Plugin emitters', () => {
       };
 
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
 
       /* Emitters relies on Vue watcher that are async. We need to wait a cycle before testing if
          they have emitted or not. */
@@ -205,7 +209,7 @@ describe('testing X Plugin emitters', () => {
         store
       };
 
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
       XPlugin.registerXModule(xModule);
 
       /* Emitters relies on Vue watcher that are async. We need to wait a cycle before testing if
@@ -246,7 +250,7 @@ describe('testing X Plugin emitters', () => {
       };
 
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
 
       store.commit('x/searchBox/setQuery', 'wheat');
       await waitNextTick();
@@ -289,6 +293,6 @@ describe('testing X Plugin emitters', () => {
  * have been run.
  */
 async function waitNextTick(): Promise<void> {
-  await localVue.nextTick();
+  await nextTick();
   jest.runAllTimers();
 }
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-mixin.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-mixin.spec.ts
deleted file mode 100644
index 40918a0679..0000000000
--- a/packages/x-components/src/plugins/__tests__/x-plugin-mixin.spec.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import { ComponentOptions, default as Vue } from 'vue';
-import { installNewXPlugin } from '../../__tests__/utils';
-import { xComponentMixin } from '../../components/x-component.mixin';
-import { FeatureLocation, QueryFeature } from '../../types/origin';
-import { WireMetadata } from '../../wiring/wiring.types';
-import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { XPlugin } from '../x-plugin';
-
-describe('testing $x component API global mixin', () => {
-  describe('testing origin', () => {
-    /** Options to render the component to test component's bus origin functionality. */
-    interface RenderOriginComponentOptions {
-      /** The feature to be emitted. */
-      feature?: QueryFeature;
-      /** The location to be emitted. */
-      location?: FeatureLocation;
-    }
-
-    /** API returned by the component to test component's bus origin functionality. */
-    interface RenderOriginComponentAPI {
-      /** The bus emit, to assert that it has been called with a proper origin. */
-      busListener: jest.SpyInstance;
-      /** The component testing wrapper. Will emit a {@link XEvent} when clicked. */
-      wrapper: Wrapper<Vue>;
-    }
-
-    function renderOriginComponent({
-      feature,
-      location
-    }: RenderOriginComponentOptions = {}): RenderOriginComponentAPI {
-      const [, localVue] = installNewXPlugin();
-      const busListener = jest.spyOn(XPlugin.bus, 'emit');
-      const wrapper = mount(
-        {
-          template: `
-            <MyButton/>`,
-          components: {
-            MyButton: {
-              template: '<button @click="emit">Click me</button>',
-              methods: {
-                emit(this: Vue) {
-                  this.$x.emit('UserIsTypingAQuery', 'So awesome, much quality, such skill', {
-                    feature
-                  });
-                }
-              }
-            }
-          },
-          provide: {
-            location
-          }
-        },
-        {
-          localVue
-        }
-      );
-      return { wrapper, busListener };
-    }
-
-    it('emits location and feature in the metadata when they are available', () => {
-      const { wrapper, busListener } = renderOriginComponent({
-        location: 'predictive_layer',
-        feature: 'search_box'
-      });
-      wrapper.trigger('click');
-
-      expect(busListener).toHaveBeenCalledTimes(1);
-      expect(busListener).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.anything(),
-        expect.objectContaining<Partial<WireMetadata>>({
-          location: 'predictive_layer',
-          feature: 'search_box'
-        })
-      );
-    });
-  });
-
-  describe('testing $x API', () => {
-    it('allows emitting and subscribing to events via $x object', () => {
-      const [, localVue] = installNewXPlugin();
-      const wrapper = mount(
-        {
-          render(createElement) {
-            return createElement();
-          }
-        },
-        { localVue }
-      );
-      const listener = jest.fn();
-
-      wrapper.vm.$x.on('UserIsTypingAQuery').subscribe(listener);
-      wrapper.vm.$x.emit('UserIsTypingAQuery', 'So awesome, much quality, such skill');
-
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith('So awesome, much quality, such skill');
-    });
-
-    it('emits the event metadata', () => {
-      const [, localVue] = installNewXPlugin();
-      const listener = jest.fn();
-      const testTarget = document.createElement('div');
-
-      const emitterComponent: ComponentOptions<any> & ThisType<Vue> = {
-        mounted() {
-          this.$x.emit('UserIsTypingAQuery', 'Sexy Lego', { target: testTarget });
-        },
-        render(createElement) {
-          return createElement('input');
-        }
-      };
-
-      mount(
-        {
-          mixins: [xComponentMixin(searchBoxXModule)],
-          created() {
-            this.$x.on('UserIsTypingAQuery', true).subscribe(listener);
-          },
-          render(createElement) {
-            return createElement(emitterComponent);
-          }
-        } as ComponentOptions<any> & ThisType<Vue>,
-        { localVue }
-      );
-
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith({
-        eventPayload: 'Sexy Lego',
-        metadata: {
-          moduleName: 'searchBox',
-          target: testTarget,
-          location: undefined,
-          replaceable: true
-        }
-      });
-    });
-
-    it('smart components emits the event metadata', () => {
-      const listener = jest.fn();
-      const testTarget = document.createElement('div');
-      const [, localVue] = installNewXPlugin();
-      mount(
-        {
-          mixins: [xComponentMixin(searchBoxXModule)],
-          created() {
-            this.$x.on('UserIsTypingAQuery', true).subscribe(listener);
-          },
-          mounted() {
-            this.$x.emit('UserIsTypingAQuery', 'Sexy Lego', { target: testTarget });
-          },
-          render(createElement) {
-            return createElement('input');
-          }
-        } as ComponentOptions<any> & ThisType<Vue>,
-        { localVue }
-      );
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith({
-        eventPayload: 'Sexy Lego',
-        metadata: {
-          moduleName: 'searchBox',
-          target: testTarget,
-          location: undefined,
-          replaceable: true
-        }
-      });
-    });
-
-    it('finds the root x-component and emits the bus events as Vue events', () => {
-      const [, localVue] = installNewXPlugin();
-      const listener = jest.fn();
-      const emitterComponent: ComponentOptions<any> & ThisType<Vue> = {
-        mixins: [xComponentMixin(searchBoxXModule)], // Flag it as x-component
-        mounted() {
-          this.$x.emit('UserIsTypingAQuery', 'Sexy Playmobil');
-        },
-        render(createElement) {
-          return createElement('input');
-        }
-      };
-
-      const parentComponent: ComponentOptions<any> & ThisType<Vue> = {
-        mixins: [xComponentMixin(searchBoxXModule)], // Flag it as x-component
-        render(createElement) {
-          return createElement(emitterComponent);
-        }
-      };
-
-      mount(
-        {
-          render(createElement) {
-            return createElement(parentComponent, {
-              on: {
-                UserIsTypingAQuery: listener
-              }
-            });
-          }
-        },
-        { localVue }
-      );
-
-      expect(listener).toHaveBeenCalledTimes(1);
-    });
-
-    it('can access the $x API from an immediate watcher', () => {
-      const [, localVue] = installNewXPlugin();
-      const queryCallback = jest.fn();
-      const wrapper = mount(
-        {
-          computed: {
-            query(): string {
-              return this.$x.query.search;
-            }
-          },
-          watch: {
-            query: {
-              handler(query: string): void {
-                this.$x.emit('UserAcceptedAQuery', query);
-              },
-              immediate: true
-            }
-          },
-          render(h) {
-            return h();
-          }
-        } as ComponentOptions<Vue> & ThisType<Vue>,
-        { localVue }
-      );
-      wrapper.vm.$x.on('UserAcceptedAQuery').subscribe(queryCallback);
-
-      expect(queryCallback).toHaveBeenCalledTimes(1);
-    });
-  });
-});
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts
index 74a86fdb64..a4d4020b80 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts
@@ -1,19 +1,16 @@
-import { createLocalVue } from '@vue/test-utils';
-import { VueConstructor } from 'vue';
+import { mount } from '@vue/test-utils';
 import { XPlugin } from '../x-plugin';
 import { XDummyBus } from '../../__tests__/bus.dummy';
 
 describe('testing adapter configuration', () => {
   let xPlugin: XPlugin;
-  let localVue: VueConstructor;
 
   beforeEach(() => {
     jest.clearAllMocks();
     xPlugin = new XPlugin(new XDummyBus());
-    localVue = createLocalVue();
   });
 
   it('throws an error if no adapter is passed', () => {
-    expect(() => localVue.use(xPlugin, {})).toThrow();
+    expect(() => mount({}, { global: { plugins: [xPlugin] } })).toThrow();
   });
 });
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts
index 4378718051..2f892048b0 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts
@@ -1,7 +1,7 @@
 import { Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, shallowMount, Wrapper } from '@vue/test-utils';
-import { default as Vue, VueConstructor } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount, shallowMount } from '@vue/test-utils';
+import { createStore, Store } from 'vuex';
+import { nextTick } from 'vue';
 import { createStoreEmitters, XStoreModule } from '../../store';
 import { createWireFromFunction, wireCommit } from '../../wiring/wires.factory';
 import { AnyWire } from '../../wiring/wiring.types';
@@ -73,44 +73,57 @@ const xModule: AnyXModule = {
   }
 };
 
-let localVue: VueConstructor;
 let store: Store<any>; // Any to handle creation of new properties
 
 describe('testing X Plugin', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     XPlugin.resetInstance();
-    localVue = createLocalVue();
-    localVue.use(Vuex);
-    store = new Store({});
+    store = createStore({});
+    mount({}, { global: { plugins: [store] } });
   });
 
   describe('install XPlugin without overriding options', () => {
     it('throws an error if no options are passed', () => {
       const plugin = new XPlugin(new XDummyBus());
-      expect(() => localVue.use(plugin)).toThrow();
+      expect(() => mount({}, { global: { plugins: [plugin] } })).toThrow();
     });
 
     it('allows registering a x-module before installing', () => {
       XPlugin.registerXModule(xModule);
       expectDefaultModuleToBeNotRegistered();
 
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+      mount(
+        {},
+        { global: { plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })] } }
+      );
       expectDefaultModuleToBeRegisteredOnce();
     });
 
     it('allows registering a initial x-module when installing', () => {
-      installNewXPlugin({
-        store,
-        adapter: XComponentsAdapterDummy,
-        initialXModules: [xModule]
-      });
+      mount(
+        {},
+        {
+          global: {
+            plugins: [
+              installNewXPlugin({
+                store,
+                adapter: XComponentsAdapterDummy,
+                initialXModules: [xModule]
+              })
+            ]
+          }
+        }
+      );
 
       expectDefaultModuleToBeRegisteredOnce();
     });
 
     it('allows registering a x-module after installing', () => {
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+      mount(
+        {},
+        { global: { plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })] } }
+      );
       XPlugin.registerXModule(xModule);
 
       expectDefaultModuleToBeRegisteredOnce();
@@ -118,7 +131,10 @@ describe('testing X Plugin', () => {
 
     it('does not re-register a module', () => {
       XPlugin.registerXModule(xModule);
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+      mount(
+        {},
+        { global: { plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })] } }
+      );
       XPlugin.registerXModule(xModule);
 
       expectDefaultModuleToBeRegisteredOnce();
@@ -256,12 +272,21 @@ describe('testing X Plugin', () => {
     describe('override before installing plugin', () => {
       beforeEach(() => {
         XPlugin.registerXModule(xModule);
-        installNewXPlugin({
-          __PRIVATE__xModules: privateXModulesOptions,
-          xModules: xModulesOptions,
-          store,
-          adapter: XComponentsAdapterDummy
-        });
+        mount(
+          {},
+          {
+            global: {
+              plugins: [
+                installNewXPlugin({
+                  __PRIVATE__xModules: privateXModulesOptions,
+                  xModules: xModulesOptions,
+                  store,
+                  adapter: XComponentsAdapterDummy
+                })
+              ]
+            }
+          }
+        );
       });
 
       it('overrides state', () => expectStoreStateToBeModified());
@@ -272,12 +297,22 @@ describe('testing X Plugin', () => {
 
     describe('override after installing plugin', () => {
       beforeEach(() => {
-        installNewXPlugin({
-          __PRIVATE__xModules: privateXModulesOptions,
-          xModules: xModulesOptions,
-          store,
-          adapter: XComponentsAdapterDummy
-        });
+        mount(
+          {},
+          {
+            global: {
+              plugins: [
+                installNewXPlugin({
+                  __PRIVATE__xModules: privateXModulesOptions,
+                  xModules: xModulesOptions,
+                  store,
+                  adapter: XComponentsAdapterDummy
+                })
+              ]
+            }
+          }
+        );
+
         XPlugin.registerXModule(xModule);
       });
 
@@ -299,7 +334,16 @@ describe('testing X Plugin', () => {
           mutations: {}
         }
       };
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+
+      mount(
+        {},
+        {
+          global: {
+            plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })]
+          }
+        }
+      );
+
       XPlugin.registerXModule(xModuleWithoutConfig);
 
       expect(store.state.x.searchBox.config).not.toBeDefined();
@@ -329,12 +373,26 @@ describe('testing X Plugin', () => {
 
     it('overrides before installing plugin', () => {
       XPlugin.registerXModule(xModule);
-      installNewXPlugin(pluginOptions);
+      mount(
+        {},
+        {
+          global: {
+            plugins: [installNewXPlugin(pluginOptions)]
+          }
+        }
+      );
 
       expectModuleToHaveBeenReplaced();
     });
     it('overrides after installing plugin', () => {
-      installNewXPlugin(pluginOptions);
+      mount(
+        {},
+        {
+          global: {
+            plugins: [installNewXPlugin(pluginOptions)]
+          }
+        }
+      );
       XPlugin.registerXModule(xModule);
 
       expectModuleToHaveBeenReplaced();
@@ -350,7 +408,6 @@ describe('testing X Plugin', () => {
   });
 
   describe('x-Modules system', () => {
-    let component: Wrapper<Vue>;
     const searchBoxQueryChangedSubscriber = jest.fn();
     const storeModule: XStoreModule<
       { query: string },
@@ -396,22 +453,21 @@ describe('testing X Plugin', () => {
         wiring,
         storeEmitters
       });
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy }, localVue);
-      component = shallowMount(
+      shallowMount(
+        {},
         {
-          render(h) {
-            return h();
+          global: {
+            plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })]
           }
-        },
-        { store, localVue }
+        }
       );
     });
 
     it('store-emitters emit a changed event when the observed store state changes', async () => {
-      component.vm.$x.emit('UserIsTypingAQuery', 'New York strip steak');
+      XPlugin.bus.emit('UserIsTypingAQuery', 'New York strip steak');
 
-      await localVue.nextTick(); // Needed so Vue has updated the reactive dependencies.
-      jest.runAllTimers(); // Needed for the debounce of the emitters.
+      await nextTick(); // Needed so Vue has updated the reactive dependencies.
+      jest.runAllTimers(); // Needed for debounce of the emitters.
 
       expect(searchBoxQueryChangedSubscriber).toHaveBeenCalledTimes(1);
       expect(searchBoxQueryChangedSubscriber).toHaveBeenCalledWith({
@@ -427,9 +483,9 @@ describe('testing X Plugin', () => {
       "store-emitters don't emit multiple events if the events that are modifying the observed" +
         ' value are emitted synchronously',
       async () => {
-        component.vm.$x.emit('UserIsTypingAQuery', 'New York strip steak');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Prime rib');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Tomahawk steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'New York strip steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Prime rib');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Tomahawk steak');
 
         await waitNextTick();
 
@@ -448,9 +504,9 @@ describe('testing X Plugin', () => {
       "store-emitters don't emit multiple events if the events that are modifying the observed" +
         ' value are emitted asynchronously but consecutively',
       async () => {
-        component.vm.$x.emit('UserIsTypingAQuery', 'New York strip steak');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Prime rib');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Tomahawk steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'New York strip steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Prime rib');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Tomahawk steak');
 
         await waitNextTick();
 
@@ -467,8 +523,8 @@ describe('testing X Plugin', () => {
     );
 
     it("store-emitters don't emit an event if value is reset synchronously", async () => {
-      component.vm.$x.emit('UserIsTypingAQuery', 'chinchulines');
-      component.vm.$x.emit('UserIsTypingAQuery', '');
+      XPlugin.bus.emit('UserIsTypingAQuery', 'chinchulines');
+      XPlugin.bus.emit('UserIsTypingAQuery', '');
 
       await waitNextTick();
 
@@ -485,6 +541,6 @@ describe('testing X Plugin', () => {
  * have been run.
  */
 async function waitNextTick(): Promise<void> {
-  await localVue.nextTick();
+  await nextTick();
   jest.runAllTimers();
 }
diff --git a/packages/x-components/src/plugins/devtools/devtools.plugin.ts b/packages/x-components/src/plugins/devtools/devtools.plugin.ts
index 4f782ad19b..bf61a0c803 100644
--- a/packages/x-components/src/plugins/devtools/devtools.plugin.ts
+++ b/packages/x-components/src/plugins/devtools/devtools.plugin.ts
@@ -1,5 +1,4 @@
 import { setupDevtoolsPlugin, App } from '@vue/devtools-api';
-import Vue from 'vue';
 import { setupTimelinePlugin } from './timeline.devtools';
 import { setupWiringDevtools } from './wiring.devtools';
 
@@ -9,10 +8,10 @@ import { setupWiringDevtools } from './wiring.devtools';
  * inspected.
  * - Wiring inspector. Events and its wires can be viewed and disabled.
  *
- * @param app - The Vue application the devtools should track.
+ * @param app - The Vue application instance the devtools should track.
  * @beta
  */
-export function setupDevtools(app: Vue): void {
+export function setupDevtools(app: App): void {
   setupDevtoolsPlugin(
     {
       id: 'x-components-devtools-plugin',
@@ -20,7 +19,7 @@ export function setupDevtools(app: Vue): void {
       packageName: '@empathyco/x-components',
       homepage: 'https://empathy.co',
       enableEarlyProxy: true,
-      app: app as App // FIXME: Infinite loop with types when inferred as a Vue2 app.
+      app
     },
     api => {
       if (api) {
diff --git a/packages/x-components/src/plugins/index.ts b/packages/x-components/src/plugins/index.ts
index 0b10c1e395..bc0a003cbc 100644
--- a/packages/x-components/src/plugins/index.ts
+++ b/packages/x-components/src/plugins/index.ts
@@ -1,8 +1,6 @@
 export * from './devtools/devtools.plugin';
 export * from './x-bus';
 export * from './x-emitters';
-export * from './x-plugin.alias';
-export * from './x-plugin.mixin';
 export * from './x-plugin';
 export * from './x-plugin.types';
 export * from './x-plugin.utils';
diff --git a/packages/x-components/src/plugins/x-emitters.ts b/packages/x-components/src/plugins/x-emitters.ts
index c9502b0621..b722299549 100644
--- a/packages/x-components/src/plugins/x-emitters.ts
+++ b/packages/x-components/src/plugins/x-emitters.ts
@@ -1,5 +1,5 @@
 import { XBus } from '@empathyco/x-bus';
-import { forEach } from '@empathyco/x-utils';
+import { Dictionary, forEach } from '@empathyco/x-utils';
 import { Store } from 'vuex';
 import { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils';
 import { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-emitters.utils';
@@ -22,7 +22,11 @@ export function registerStoreEmitters(
   bus: XBus<XEventsTypes, WireMetadata>,
   store: Store<any>
 ): void {
-  const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);
+  const safeGettersProxy = getGettersProxyFromModule(
+    store.getters as Dictionary,
+    name,
+    storeModule
+  );
   forEach(storeEmitters, (event, stateSelector: AnySimpleStateSelector | AnyStateSelector) => {
     const { selector, immediate, filter, metadata, ...options } =
       normalizeStateSelector(stateSelector);
@@ -55,9 +59,7 @@ export function registerStoreEmitters(
  *
  * @internal
  */
-function normalizeStateSelector(
-  stateSelector: AnySimpleStateSelector | AnyStateSelector
-): Required<AnyStateSelector> {
+function normalizeStateSelector(stateSelector: AnySimpleStateSelector | AnyStateSelector) {
   const selectorOptions = isSimpleSelector(stateSelector)
     ? { selector: stateSelector }
     : stateSelector;
diff --git a/packages/x-components/src/plugins/x-plugin.alias.ts b/packages/x-components/src/plugins/x-plugin.alias.ts
deleted file mode 100644
index e070660666..0000000000
--- a/packages/x-components/src/plugins/x-plugin.alias.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import Vue from 'vue';
-import { RequestStatus } from '../store/utils/status-store.utils';
-import {
-  XComponentAliasAPI,
-  XComponentAliasQueryAPI,
-  XComponentAliasStatusAPI
-} from './x-plugin.types';
-import { getGetterPath } from './x-plugin.utils';
-
-/**
- * Creates an object containing the alias part of {@link XComponentAPI}.
- *
- * @param component - The component with the store from which retrieve the data.
- * @returns An object containing the alias part of the {@link XComponentAPI}.
- *
- * @internal
- */
-export function getAliasAPI(component: Vue): XComponentAliasAPI {
-  const queryModules = [
-    'facets',
-    'searchBox',
-    'nextQueries',
-    'querySuggestions',
-    'relatedTags',
-    'search'
-  ] as const;
-  const statusModules = [
-    'identifierResults',
-    'nextQueries',
-    'popularSearches',
-    'querySuggestions',
-    'recommendations',
-    'relatedTags',
-    'search'
-  ] as const;
-
-  const query = queryModules.reduce((acc, moduleName) => {
-    return Object.defineProperty(acc, moduleName, {
-      get(): string {
-        return component.$store.state.x[moduleName]?.query ?? '';
-      },
-      enumerable: true
-    });
-  }, {} as XComponentAliasQueryAPI);
-  const status = statusModules.reduce((acc, moduleName) => {
-    return Object.defineProperty(acc, moduleName, {
-      get(): RequestStatus | undefined {
-        return component.$store.state.x[moduleName]?.status;
-      },
-      enumerable: true
-    });
-  }, {} as XComponentAliasStatusAPI);
-
-  return {
-    query,
-    status,
-    get device() {
-      return component.$store.state.x.device?.name ?? null;
-    },
-    get facets() {
-      return component.$store.getters[getGetterPath('facets', 'facets')] ?? {};
-    },
-    get historyQueries() {
-      return component.$store.getters[getGetterPath('historyQueries', 'historyQueries')] ?? [];
-    },
-    get historyQueriesWithResults() {
-      return (
-        component.$store.getters[getGetterPath('historyQueries', 'historyQueriesWithResults')] ?? []
-      );
-    },
-    get fullHistoryQueries() {
-      return component.$store.state.x.historyQueries?.historyQueries ?? [];
-    },
-    get isHistoryQueriesEnabled() {
-      return component.$store.state.x.historyQueries?.isEnabled ?? false;
-    },
-    get fromNoResultsWithFilters() {
-      return component.$store.state.x.search?.fromNoResultsWithFilters ?? false;
-    },
-    get identifierResults() {
-      return component.$store.state.x.identifierResults?.identifierResults ?? [];
-    },
-    get searchBoxStatus() {
-      return component.$store.state.x.searchBox?.inputStatus ?? undefined;
-    },
-    get isEmpathizeOpen() {
-      return component.$store.state.x.empathize?.isOpen ?? false;
-    },
-    get nextQueries() {
-      return component.$store.getters[getGetterPath('nextQueries', 'nextQueries')] ?? [];
-    },
-    get noResults() {
-      return component.$store.state.x.search?.isNoResults ?? false;
-    },
-    get partialResults() {
-      return component.$store.state.x.search?.partialResults ?? [];
-    },
-    get popularSearches() {
-      return component.$store.state.x.popularSearches?.popularSearches ?? [];
-    },
-    get querySuggestions() {
-      return component.$store.getters[getGetterPath('querySuggestions', 'querySuggestions')] ?? [];
-    },
-    get fullQuerySuggestions() {
-      return component.$store.state.x.querySuggestions?.suggestions ?? [];
-    },
-    get recommendations() {
-      return component.$store.state.x.recommendations?.recommendations ?? [];
-    },
-    get redirections() {
-      return component.$store.state.x.search?.redirections ?? [];
-    },
-    get relatedTags() {
-      return component.$store.getters[getGetterPath('relatedTags', 'relatedTags')] ?? [];
-    },
-    get results() {
-      return component.$store.state.x.search?.results ?? [];
-    },
-    get scroll() {
-      return component.$store.state.x.scroll?.data ?? {};
-    },
-    get selectedFilters() {
-      return component.$store.getters[getGetterPath('facets', 'selectedFilters')] ?? [];
-    },
-    get selectedRelatedTags() {
-      return component.$store.state.x.relatedTags?.selectedRelatedTags ?? [];
-    },
-    get semanticQueries() {
-      return component.$store.state.x.semanticQueries?.semanticQueries ?? [];
-    },
-    get spellcheckedQuery() {
-      return component.$store.state.x.search?.spellcheckedQuery ?? null;
-    },
-    get totalResults() {
-      return component.$store.state.x.search?.totalResults ?? 0;
-    },
-    get selectedSort() {
-      return component.$store.state.x.search?.sort ?? '';
-    }
-  };
-}
diff --git a/packages/x-components/src/plugins/x-plugin.mixin.ts b/packages/x-components/src/plugins/x-plugin.mixin.ts
deleted file mode 100644
index 512781ce68..0000000000
--- a/packages/x-components/src/plugins/x-plugin.mixin.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import Vue, { ComponentOptions } from 'vue';
-import { Store } from 'vuex';
-import { XBus } from '@empathyco/x-bus';
-import { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils';
-import { RootXStoreState } from '../store/store.types';
-import { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types';
-import { WireMetadata } from '../wiring/wiring.types';
-import { FeatureLocation } from '../types/origin';
-import { XModuleName } from '../x-modules/x-modules.types';
-import { getAliasAPI } from './x-plugin.alias';
-import { XComponentAPI, XComponentBusAPI } from './x-plugin.types';
-
-declare module 'vue/types/vue' {
-  export interface Vue {
-    $x: XComponentAPI;
-  }
-}
-
-declare module 'vue/types/options' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  export interface ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> {
-    xModule?: XModuleName;
-  }
-}
-
-interface PrivateExtendedVueComponent extends Vue {
-  $location?: FeatureLocation;
-  $store: Store<{ x: Partial<RootXStoreState['x']> }>;
-  xComponent: Vue | undefined;
-}
-
-/**
- * Vue global mixin that adds a `$x` object to every component with the {@link XComponentAPI}.
- *
- * @remarks It adds an injection property `origin` which value is included in the metadata of each
- * event emitted with `$x.emit`.
- *
- * @param bus - The {@link @empathyco/x-bus#XBus} to use inside the components for emitting events.
- * @returns Mixin options which registers the component as X-Component and the $x.
- * @internal
- */
-export const createXComponentAPIMixin = (
-  bus: XBus<XEventsTypes, WireMetadata>
-): ComponentOptions<Vue> & ThisType<PrivateExtendedVueComponent> => ({
-  inject: {
-    $location: {
-      from: 'location',
-      default: undefined
-    }
-  },
-  beforeCreate(this: PrivateExtendedVueComponent) {
-    this.xComponent = getRootXComponent(this);
-    const aliasAPI = getAliasAPI(this);
-    const busAPI = getBusAPI(bus, this);
-    this.$x = Object.assign(aliasAPI, busAPI);
-  }
-});
-
-/**
- * Creates an object containing the API related to the {@link @empathyco/x-bus#XBus}.
- *
- * @param bus - The global {@link @empathyco/x-bus#XBus}.
- * @param component - The component instance.
- *
- * @returns An object containing the {@link XComponentBusAPI}.
- * @internal
- */
-export function getBusAPI(
-  bus: XBus<XEventsTypes, WireMetadata>,
-  component: PrivateExtendedVueComponent
-): XComponentBusAPI {
-  return {
-    emit: <Event extends XEvent>(
-      event: Event,
-      payload?: XEventPayload<Event>,
-      metadata: Omit<WireMetadata, 'moduleName'> = {}
-    ) => {
-      bus.emit(event, payload as XEventPayload<Event>, createWireMetadata(component, metadata));
-      component.xComponent?.$emit(event, payload);
-    },
-    on: bus.on.bind(bus)
-  };
-}
-
-/**
- * Creates a wire metadata object based on the component and the provided metadata.
- *
- * @param component - The component this metadata belongs to.
- * @param metadata - Additional metadata emitted by the component.
- * @returns A {@link WireMetadata} object.
- * @internal
- */
-function createWireMetadata(
-  component: PrivateExtendedVueComponent,
-  metadata: Partial<WireMetadata>
-): WireMetadata {
-  return Object.defineProperties(
-    {
-      replaceable: true,
-      moduleName: getXComponentXModuleName(component.xComponent),
-      location: component.$location,
-      ...metadata
-    },
-    {
-      component: {
-        value: component,
-        /* FIX-ME: defining component as a non-enumerable property to ease tests changes due to
-         * cyclic dependencies in Vue component instances. */
-        enumerable: false
-      }
-    }
-  );
-}
diff --git a/packages/x-components/src/plugins/x-plugin.ts b/packages/x-components/src/plugins/x-plugin.ts
index 3b5fdb708b..fb1e8b124d 100644
--- a/packages/x-components/src/plugins/x-plugin.ts
+++ b/packages/x-components/src/plugins/x-plugin.ts
@@ -1,7 +1,7 @@
 import { deepMerge } from '@empathyco/x-deep-merge';
 import { forEach, Dictionary } from '@empathyco/x-utils';
-import { PluginObject, VueConstructor } from 'vue';
-import Vuex, { Module, Store } from 'vuex';
+import { App } from 'vue';
+import { createStore, Module, Store } from 'vuex';
 import { XComponentsAdapter } from '@empathyco/x-types';
 import { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';
 import { Observable } from 'rxjs';
@@ -14,7 +14,6 @@ import { AnyXModule, XModuleName } from '../x-modules/x-modules.types';
 import { sendWiringToDevtools } from './devtools/wiring.devtools';
 import { bus } from './x-bus';
 import { registerStoreEmitters } from './x-emitters';
-import { createXComponentAPIMixin } from './x-plugin.mixin';
 import { AnyXStoreModuleOption, XModuleOptions, XPluginOptions } from './x-plugin.types';
 import { assertXPluginOptionsAreValid } from './x-plugin.utils';
 
@@ -24,7 +23,7 @@ import { assertXPluginOptionsAreValid } from './x-plugin.utils';
  *
  * @public
  */
-export class XPlugin implements PluginObject<XPluginOptions> {
+export class XPlugin {
   /**
    * {@link @empathyco/x-typesm#XComponentsAdapter | XComponentsAdapter} Is the middleware
    * between the components and our API where data can be mapped to client needs.
@@ -138,14 +137,13 @@ export class XPlugin implements PluginObject<XPluginOptions> {
    * @internal
    */
   protected store!: Store<any>;
+
   /**
-   * The global Vue, passed by the installation method. Used to apply the global mixin
-   * {@link createXComponentAPIMixin}, and install the {@link https://vuex.vuejs.org/ | Vuex}
-   * plugin.
+   * The Vue application instance, passed by the installation method.
    *
    * @internal
    */
-  protected vue!: VueConstructor;
+  protected app!: App;
 
   /**
    * Creates a new instance of the XPlugin with the given bus passed as parameter.
@@ -201,23 +199,22 @@ export class XPlugin implements PluginObject<XPluginOptions> {
   /**
    * Installs the plugin into the Vue instance.
    *
-   * @param vue - The GlobalVue object.
+   * @param app - The Vue application instance.
    * @param options - The options to install this plugin with.
    * @throws If the XPlugin has already been installed, or the options are not valid.
    *
    * @internal
    */
-  install(vue: VueConstructor, options?: XPluginOptions): void {
+  install(app: App, options?: XPluginOptions): void {
     if (this.isInstalled) {
       throw new Error('XPlugin has already been installed');
     }
     assertXPluginOptionsAreValid(options);
     XPlugin.instance = this;
-    this.vue = vue;
+    this.app = app;
     this.options = options;
     this.adapter = options.adapter;
     this.registerStore();
-    this.applyMixins();
     this.registerInitialModules();
     this.registerPendingXModules();
     this.isInstalled = true;
@@ -356,28 +353,10 @@ export class XPlugin implements PluginObject<XPluginOptions> {
    * @internal
    */
   protected registerStore(): void {
-    this.vue.use(Vuex); // We can safely install Vuex because if it is already installed Vue
-    // will simply ignore it
-    this.store =
-      this.options.store ??
-      new Store({
-        strict: process.env.NODE_ENV !== 'production'
-      });
-    if (!this.options.store) {
-      this.vue.prototype.$store = this.store;
-    }
+    this.store = this.options.store ?? createStore({});
+    this.app.use(this.store);
     this.store.registerModule('x', RootXStoreModule);
   }
-
-  /**
-   * Applies the {@link createXComponentAPIMixin} mixin in the global Vue.
-   *
-   * @internal
-   */
-  protected applyMixins(): void {
-    this.vue.mixin(createXComponentAPIMixin(this.bus));
-  }
-
   /**
    * Registers the initial {@link XModule | XModules} during the {@link XPlugin} installation.
    *
diff --git a/packages/x-components/src/router.ts b/packages/x-components/src/router.ts
index 3d38c4d3e7..0d76b62c1e 100644
--- a/packages/x-components/src/router.ts
+++ b/packages/x-components/src/router.ts
@@ -1,9 +1,6 @@
-import Vue from 'vue';
-import VueRouter, { RouteConfig } from 'vue-router';
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
-Vue.use(VueRouter);
-
-const routes: RouteConfig[] = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'Home',
@@ -18,11 +15,6 @@ const routes: RouteConfig[] = [
 
 if (process.env.NODE_ENV !== 'production') {
   routes.push(
-    {
-      path: '/xds',
-      name: 'XDS',
-      component: () => import('@empathyco/x-tailwindcss/showcase').then(m => m.XdsShowcase)
-    },
     {
       path: '/result-app',
       name: 'result-app',
@@ -53,8 +45,8 @@ if (process.env.NODE_ENV !== 'production') {
   );
 }
 
-const router = new VueRouter({
-  mode: 'history',
+const router = createRouter({
+  history: createWebHistory(),
   routes
 });
 
diff --git a/packages/x-components/src/shims-tsx.d.ts b/packages/x-components/src/shims-tsx.d.ts
deleted file mode 100644
index 335c815769..0000000000
--- a/packages/x-components/src/shims-tsx.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Vue, { VNode } from 'vue';
-
-declare global {
-  namespace JSX {
-    interface Element extends VNode {}
-    interface ElementClass extends Vue {}
-  }
-}
diff --git a/packages/x-components/src/shims-vue.d.ts b/packages/x-components/src/shims-vue.d.ts
index 8f6f410263..40f3f4bdf7 100644
--- a/packages/x-components/src/shims-vue.d.ts
+++ b/packages/x-components/src/shims-vue.d.ts
@@ -1,4 +1,5 @@
 declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent;
+  export default component;
 }
diff --git a/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts b/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts
index 3462ad055b..8223e47de0 100644
--- a/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts
+++ b/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts
@@ -1,13 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Module, Store } from 'vuex';
-
-/**
- * When dynamically registering modules, Vuex re-executes watchers, if the watcher is over a
- * primitive value, it is stopped due to a simple === comparison, but when it is over a complex
- * object or array, the comparison fails, and it emits that the value has changed. Looks like
- * this behavior is intended. Vuex store is reset when registering a new module.
- * {@link https://github.com/vuejs/vuex/issues/524#issuecomment-267715183}.
- */
+import { createStore, Module, Store } from 'vuex';
+import { nextTick } from 'vue';
+
 interface StoreRootState {
   first: FirstState;
   second: SecondState;
@@ -56,10 +49,8 @@ const secondModule: Module<SecondState, StoreRootState> = {
     count: 0
   }
 };
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
 let store: Store<StoreRootState>;
+store = createStore<StoreRootState>({});
 const watchCallback = jest.fn();
 
 describe('testing Vuex watcher hacks', () => {
@@ -69,7 +60,7 @@ describe('testing Vuex watcher hacks', () => {
 
   describe('vuex watchers standard behavior', () => {
     beforeEach(() => {
-      store = new Store({});
+      store = createStore<StoreRootState>({});
     });
 
     it('does not trigger simple state watchers when registering modules', simpleValuesWatchers);
@@ -86,30 +77,30 @@ describe('testing Vuex watcher hacks', () => {
       doesNotEagerExecuteGettersWatchers
     );
 
-    it('triggers object state watchers when registering modules', async () => {
+    it('does not trigger object state watchers when registering other modules', async () => {
       expect.assertions(1);
       store.registerModule('first', firstModule);
       store.watch(state => state.first.object, watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
-      expect(watchCallback).toHaveBeenCalledTimes(1); // But it should not be called
+      await nextTick();
+      expect(watchCallback).toHaveBeenCalledTimes(0);
     });
 
-    it('triggers object getter watchers when registering modules', async () => {
+    it('does not trigger object getter watchers when registering new modules', async () => {
       expect.assertions(1);
       store.registerModule('first', firstModule);
       store.watch((_, getters) => getters['first/objectCopy'], watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
-      expect(watchCallback).toHaveBeenCalledTimes(1); // But it should not be called
+      await nextTick();
+      expect(watchCallback).toHaveBeenCalledTimes(0);
     });
   });
 
   describe('vuex watchers hack', () => {
     beforeEach(() => {
-      store = new Store({
+      store = createStore({
         state: {
           first: null as any, // `any` to prevent TS from complaining
           second: null as any
@@ -137,7 +128,7 @@ describe('testing Vuex watcher hacks', () => {
       store.watch(state => state.first.object, watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
+      await nextTick();
       expect(watchCallback).not.toHaveBeenCalled();
     });
 
@@ -147,7 +138,7 @@ describe('testing Vuex watcher hacks', () => {
       store.watch((_, getters) => getters['first/objectCopy'], watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
+      await nextTick();
       expect(watchCallback).not.toHaveBeenCalled();
     });
   });
@@ -158,7 +149,7 @@ describe('testing Vuex watcher hacks', () => {
     store.watch(state => state.first.flag, watchCallback);
     store.registerModule('second', secondModule);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 
@@ -168,7 +159,7 @@ describe('testing Vuex watcher hacks', () => {
     store.watch((_, getters) => getters['first/notFlag'], watchCallback);
     store.registerModule('second', secondModule);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 
@@ -177,7 +168,7 @@ describe('testing Vuex watcher hacks', () => {
     store.registerModule('first', firstModule);
     store.watch(state => state.first.object, watchCallback);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 
@@ -186,7 +177,7 @@ describe('testing Vuex watcher hacks', () => {
     store.registerModule('first', firstModule);
     store.watch((_, getters) => getters['first/objectCopy'], watchCallback);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 });
diff --git a/packages/x-components/src/store/store.types.ts b/packages/x-components/src/store/store.types.ts
index 1b0c524a2f..67521444b2 100644
--- a/packages/x-components/src/store/store.types.ts
+++ b/packages/x-components/src/store/store.types.ts
@@ -1,3 +1,4 @@
+import { Dictionary } from '@empathyco/x-utils';
 import { Store } from 'vuex';
 import {
   AnyXModule,
@@ -28,7 +29,9 @@ export interface RootXStoreState {
  *
  * @public
  */
-export type RootStoreStateAndGetters = Pick<Store<RootXStoreState>, 'state' | 'getters'>;
+export type RootStoreStateAndGetters = Pick<Store<RootXStoreState>, 'state'> & {
+  getters: Dictionary;
+};
 
 /**
  * Type safe which allows the access to the State and the Getters of a {@link XStoreModule}.
diff --git a/packages/x-components/src/store/utils/__tests__/getters-proxy.spec.ts b/packages/x-components/src/store/utils/__tests__/getters-proxy.spec.ts
index d5654ab67a..164f8bb70e 100644
--- a/packages/x-components/src/store/utils/__tests__/getters-proxy.spec.ts
+++ b/packages/x-components/src/store/utils/__tests__/getters-proxy.spec.ts
@@ -1,5 +1,4 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { AnyXStoreModule, RootXStoreState } from '../../store.types';
 import { getGettersProxy, getGettersProxyFromModule } from '../getters-proxy.utils';
 
@@ -24,8 +23,6 @@ const storeModuleTest: AnyXStoreModule = {
   namespaced: true
 } as any;
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
 const storeMock = new Store<RootXStoreState>({
   modules: {
     x: {
diff --git a/packages/x-components/src/store/utils/config-store.utils.ts b/packages/x-components/src/store/utils/config-store.utils.ts
index ee6210fcee..94ee801d80 100644
--- a/packages/x-components/src/store/utils/config-store.utils.ts
+++ b/packages/x-components/src/store/utils/config-store.utils.ts
@@ -1,5 +1,3 @@
-import Vue from 'vue';
-
 /**
  * Config mutations, containing a method to change the current config and other to merge
  * a new one.
@@ -30,7 +28,7 @@ export interface ConfigMutations<T extends { config: T['config'] }> {
  * @public
  */
 export function setConfig<T extends { config: T['config'] }>(state: T, config: T['config']): void {
-  Vue.set(state, 'config', config);
+  state.config = config;
 }
 
 /**
diff --git a/packages/x-components/src/store/utils/getters-proxy.utils.ts b/packages/x-components/src/store/utils/getters-proxy.utils.ts
index 4cdf803a23..ed8c48f867 100644
--- a/packages/x-components/src/store/utils/getters-proxy.utils.ts
+++ b/packages/x-components/src/store/utils/getters-proxy.utils.ts
@@ -1,5 +1,4 @@
 import { reduce, Dictionary } from '@empathyco/x-utils';
-import { Store } from 'vuex';
 import { ExtractGetters, XModuleName } from '../../x-modules/x-modules.types';
 import { AnyXStoreModule } from '../store.types';
 
@@ -24,7 +23,7 @@ let cache: Getters = {};
  *
  */
 export function getGettersProxyFromModule<ModuleName extends XModuleName>(
-  getters: Pick<Store<any>, 'getters'>,
+  getters: Dictionary,
   moduleName: ModuleName,
   storeModule: AnyXStoreModule
 ): ExtractGetters<ModuleName> {
@@ -57,7 +56,7 @@ export function getGettersProxyFromModule<ModuleName extends XModuleName>(
  * that will return the payload to commit the mutation.
  */
 export function getGettersProxy<ModuleName extends XModuleName>(
-  getters: Pick<Store<any>, 'getters'>,
+  getters: Dictionary,
   moduleName: ModuleName
 ): ExtractGetters<ModuleName> {
   /* TODO: Review why TS is not able to exclude undefined types from the Getters cache */
@@ -103,10 +102,11 @@ function defineGetterProxy<ModuleName extends XModuleName>(
   });
 }
 
-/** Clean the cache (This is for testing purpose).
+/**
+ * Clean the cache (This is for testing purpose).
  *
  * @internal
- * */
+ */
 export function cleanGettersProxyCache(): void {
   cache = {};
 }
diff --git a/packages/x-components/src/store/utils/query.utils.ts b/packages/x-components/src/store/utils/query.utils.ts
index 0e44eee7d3..a38c080a8c 100644
--- a/packages/x-components/src/store/utils/query.utils.ts
+++ b/packages/x-components/src/store/utils/query.utils.ts
@@ -6,8 +6,7 @@ import { RelatedTag } from '@empathyco/x-types';
  * @public
  */
 export interface QueryState {
-  /** The query of the module. Different modules may have queries that differ in value
-   * or time. */
+  /** The query of the module. Different modules may have queries that differ in value or time. */
   query: string;
 }
 
diff --git a/packages/x-components/src/store/utils/status-store.utils.ts b/packages/x-components/src/store/utils/status-store.utils.ts
index cd4f14ec99..823d7cb76d 100644
--- a/packages/x-components/src/store/utils/status-store.utils.ts
+++ b/packages/x-components/src/store/utils/status-store.utils.ts
@@ -4,8 +4,10 @@
  * @public
  */
 export interface StatusState {
-  /** The request status. Useful for changing the displayed component depending on whether the
-   * request has succeeded, has not been fulfilled or has failed. */
+  /**
+   * The request status. Useful for changing the displayed component depending on whether the
+   * request has succeeded, has not been fulfilled or has failed.
+   */
   status: RequestStatus;
 }
 
diff --git a/packages/x-components/src/store/x.module.ts b/packages/x-components/src/store/x.module.ts
index f8e5aab97e..5a8f3925fb 100644
--- a/packages/x-components/src/store/x.module.ts
+++ b/packages/x-components/src/store/x.module.ts
@@ -16,27 +16,7 @@ export type XModuleState = { [Key in keyof RootXStoreState['x']]: null };
  *
  * @internal
  */
-export const RootXStoreModule: Module<XModuleState, any> = {
-  state: () => ({
-    device: null,
-    empathize: null,
-    extraParams: null,
-    facets: null,
-    historyQueries: null,
-    identifierResults: null,
-    nextQueries: null,
-    popularSearches: null,
-    queriesPreview: null,
-    querySuggestions: null,
-    recommendations: null,
-    relatedTags: null,
-    scroll: null,
-    search: null,
-    searchBox: null,
-    semanticQueries: null,
-    tagging: null,
-    url: null,
-    experienceControls: null
-  }),
+export const RootXStoreModule: Module<any, any> = {
+  state: () => ({}),
   namespaced: true
 };
diff --git a/packages/x-components/src/utils/currency-formatter.ts b/packages/x-components/src/utils/currency-formatter.ts
index 03a325c441..c6dd6a9f19 100644
--- a/packages/x-components/src/utils/currency-formatter.ts
+++ b/packages/x-components/src/utils/currency-formatter.ts
@@ -9,8 +9,10 @@ const FORMAT_REGEX = /(i([^id]+))?i+(([^id?]+)(d+)(\?)?)?/;
 interface CurrencyConfig {
   /** The character between a group of three integer 'i's and the following one. */
   integerSeparator: string;
-  /** The character between a group of three integer 'i's and the following one. It also
-   * supports more than one single character. */
+  /**
+   * The character between a group of three integer 'i's and the following one. It also
+   * supports more than one single character.
+   */
   decimalSeparator: string;
   /** Length of decimals numbers. It counts the number of 'd's after the integer part. */
   decimalsNumber: number;
diff --git a/packages/x-components/src/views/ResultApp.vue b/packages/x-components/src/views/ResultApp.vue
index 14ba6f8bfc..37ea764ea6 100644
--- a/packages/x-components/src/views/ResultApp.vue
+++ b/packages/x-components/src/views/ResultApp.vue
@@ -98,7 +98,7 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="css">
   .x-components-images {
     position: absolute;
     top: 1500px;
@@ -109,29 +109,29 @@
   .x-base-grid {
     column-gap: 10px;
     row-gap: 10px;
+  }
 
-    &__item {
-      border: 1px solid black;
-      padding: 20px;
-      text-align: center;
-    }
+  .x-base-grid__item {
+    border: 1px solid black;
+    padding: 20px;
+    text-align: center;
+  }
 
-    &__next-queries {
-      border-color: red;
-      border-radius: 50px;
-    }
+  .x-base-grid__next-queries {
+    border-color: red;
+    border-radius: 50px;
+  }
 
-    &__x-result {
-      border-color: deepskyblue;
-    }
+  .x-base-grid__result {
+    border-color: deepskyblue;
+  }
 
-    &__banner {
-      border-color: blueviolet;
-      grid-column: -1/1;
-    }
+  .x-base-grid__banner {
+    border-color: blueviolet;
+    grid-column: -1/1;
+  }
 
-    &__promoted {
-      border-color: orange;
-    }
+  .x-base-grid__promoted {
+    border-color: orange;
   }
 </style>
diff --git a/packages/x-components/src/views/accessibility/wai-base-event-button.vue b/packages/x-components/src/views/accessibility/wai-base-event-button.vue
index 8042ba0551..37afc4eb6d 100644
--- a/packages/x-components/src/views/accessibility/wai-base-event-button.vue
+++ b/packages/x-components/src/views/accessibility/wai-base-event-button.vue
@@ -27,7 +27,7 @@
 
       <div>
         <h1>BaseResultAddToCart</h1>
-        <BaseResultAddToCart result="">
+        <BaseResultAddToCart :result="{ id: 1, modelName: 'Result' }">
           <img src="https://picsum.photos/seed/200/50/50" alt="Add to cart" />
         </BaseResultAddToCart>
       </div>
@@ -127,7 +127,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-scroll {
     height: 600px;
   }
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 99552e3a1d..9de9623b72 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -102,7 +102,10 @@
     <MainModal :animation="modalAnimation">
       <MultiColumnMaxWidthLayout class="x-bg-neutral-0">
         <template #header-middle>
-          <div class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto">
+          <div
+            class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto"
+            :data-test="`main-scroll-${mainScrollDirection}`"
+          >
             <div class="x-input-group x-input-group-lead x-rounded-sm">
               <div class="x-input x-search-input-placeholder-container x-flex">
                 <SearchInputPlaceholder :messages="searchInputPlaceholderMessages" />
@@ -131,11 +134,16 @@
               </template>
             </Spellcheck>
 
-            <SlidingPanel v-if="$x.relatedTags.length">
+            <!-- Related Tags -->
+            <SlidingPanel v-if="x.relatedTags.length">
               <template #sliding-panel-left-button>
                 <ChevronLeft />
               </template>
-              <RelatedTags class="x-gap-8" itemClass="x-tag-outlined" />
+              <RelatedTags
+                :animation="resultsAnimation"
+                class="x-gap-8"
+                itemClass="x-tag-outlined"
+              />
               <template #sliding-panel-right-button>
                 <ChevronRight />
               </template>
@@ -155,7 +163,7 @@
 
         <template #toolbar-aside>
           <BaseIdTogglePanelButton
-            v-if="$x.totalResults > 0"
+            v-if="x.totalResults > 0"
             class="x-button--ghost x-button"
             panelId="aside-panel"
           >
@@ -164,8 +172,8 @@
         </template>
 
         <template #toolbar-body>
-          <div v-if="$x.totalResults > 0" class="x-flex x-items-center x-gap-12">
-            <span class="x-text1">{{ $x.totalResults }} Results</span>
+          <div v-if="x.totalResults > 0" class="x-flex x-items-center x-gap-12">
+            <span class="x-text1">{{ x.totalResults }} Results</span>
             <BaseColumnPickerList
               @update:modelValue="col => (selectedColumns = col)"
               :modelValue="selectedColumns"
@@ -204,7 +212,7 @@
         </template>
 
         <template #main-aside>
-          <Aside v-if="$x.totalResults > 0" />
+          <Aside v-if="x.totalResults > 0" />
         </template>
 
         <template #main-body>
@@ -229,23 +237,24 @@
             <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
           </Redirection>
 
-          <template v-if="!$x.redirections.length">
+          <template v-if="!x.redirections.length">
             <FallbackDisclaimer class="x-message" />
 
             <!--  No Results Message  -->
             <div
-              v-if="$x.noResults && !$x.fromNoResultsWithFilters"
+              v-if="x.noResults && !x.fromNoResultsWithFilters"
               class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
               data-test="no-results-message"
             >
               <p>
                 There are no results for
-                <span class="x-font-bold">{{ $x.query.search }}</span>
+                <span class="x-font-bold">{{ x.query.search }}</span>
               </p>
               <p>You may be interested in these:</p>
             </div>
 
-            <template v-if="!$x.query.searchBox">
+            <template v-if="!x.query.searchBox">
+              <!-- Brand Recommendations -->
               <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
               <LocationProvider location="no_results">
                 <QueryPreviewList
@@ -294,17 +303,23 @@
 
             <!-- Results -->
             <LocationProvider location="results">
-              <ResultsList v-infinite-scroll:main-scroll>
-                <PromotedsList>
-                  <BannersList>
+              <ResultsList
+                v-infinite-scroll:main-scroll="{ margin: 600 }"
+                class="x-mot-results-list"
+                data-test="results-list"
+                data-wysiwyg="results"
+              >
+                <PromotedsList class="x-mot-promoteds-list">
+                  <BannersList class="x-mot-banners-list">
                     <NextQueriesList
                       :show-only-after-offset="controls.nextQueriesList.showOnlyAfterOffset"
+                      class="x-mot-next-queries-list"
                     >
                       <BaseVariableColumnGrid
                         style="--x-size-min-width-grid-item: 150px"
                         class="x-gap-12"
                         :animation="resultsAnimation"
-                        :columns="$x.device === 'mobile' ? 2 : 4"
+                        :columns="x.device === 'mobile' ? 2 : 4"
                       >
                         <template #result="{ item: result }">
                           <MainScrollItem :item="result">
@@ -364,12 +379,13 @@
               </ResultsList>
             </LocationProvider>
 
+            <!-- Semantic Queries -->
             <SemanticQueries #default="{ queries, findSemanticQuery }">
               <section class="x-mt-28">
                 <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
                   Similar Semantic Queries
                 </h1>
-                <LocationProvider :location="$x.noResults ? 'no_results' : 'low_results'">
+                <LocationProvider :location="x.noResults ? 'no_results' : 'low_results'">
                   <QueryPreviewList
                     :queries-preview-info="queries.map(q => ({ query: q }))"
                     #default="{ queryPreviewInfo: { query }, results, queryTagging }"
@@ -408,18 +424,15 @@
 
             <!-- Partials -->
             <PartialResultsList
-              v-if="!$x.fromNoResultsWithFilters && ($x.totalResults <= 4 || $x.noResults)"
+              v-if="!x.fromNoResultsWithFilters && (x.totalResults <= 4 || x.noResults)"
               :animation="resultsAnimation"
             >
               <template #default="{ partialResult }">
                 <span data-test="partial-query">{{ partialResult.query }}</span>
-                <BaseGrid
-                  #result="{ item }"
-                  :animation="resultsAnimation"
-                  :columns="4"
-                  :items="partialResult.results"
-                >
-                  <Result :result="item" data-test="partial-result-item" />
+                <BaseGrid :animation="resultsAnimation" :columns="4" :items="partialResult.results">
+                  <template #result="{ item }">
+                    <Result :result="item" data-test="partial-result-item" />
+                  </template>
                 </BaseGrid>
                 <PartialQueryButton :query="partialResult.query">
                   <template #default="{ query }">Ver todos {{ query }}</template>
@@ -428,14 +441,16 @@
             </PartialResultsList>
 
             <!-- Recommendations -->
-            <Recommendations v-if="!$x.query.search || $x.noResults" #layout="{ recommendations }">
-              <BaseVariableColumnGrid
-                #default="{ item: result }"
-                :animation="resultsAnimation"
-                :items="recommendations"
-              >
-                <Result :result="result" data-test="recommendation-item" />
-              </BaseVariableColumnGrid>
+            <Recommendations v-if="!x.query.search || x.noResults">
+              <template #layout="{ recommendations }">
+                <BaseVariableColumnGrid
+                  #default="{ item: result }"
+                  :animation="resultsAnimation"
+                  :items="recommendations"
+                >
+                  <Result :result="result" data-test="recommendation-item" />
+                </BaseVariableColumnGrid>
+              </template>
             </Recommendations>
           </template>
         </template>
@@ -464,6 +479,9 @@
   import ChevronRight from '../../components/icons/chevron-right.vue';
   import ChevronUp from '../../components/icons/chevron-up.vue';
   import CrossIcon from '../../components/icons/cross.vue';
+  import { use$x } from '../../composables/use-$x';
+  import { useState } from '../../composables/use-state';
+  import { infiniteScroll } from '../../directives/infinite-scroll';
   import ExperienceControls from '../../x-modules/experience-controls/components/experience-controls.vue';
   import Grid2Col from '../../components/icons/grid-2-col.vue';
   import Grid4Col from '../../components/icons/grid-4-col.vue';
@@ -474,7 +492,6 @@
   import PreselectedFilters from '../../x-modules/facets/components/preselected-filters.vue';
   import SlidingPanel from '../../components/sliding-panel.vue';
   import SnippetCallbacks from '../../components/snippet-callbacks.vue';
-  import { infiniteScroll } from '../../directives/infinite-scroll/infinite-scroll';
   import RenderlessExtraParams from '../../x-modules/extra-params/components/renderless-extra-param.vue';
   import SnippetConfigExtraParams from '../../x-modules/extra-params/components/snippet-config-extra-params.vue';
   import NextQueriesList from '../../x-modules/next-queries/components/next-queries-list.vue';
@@ -524,11 +541,6 @@
       infiniteScroll
     },
     components: {
-      DisplayEmitter,
-      QueryPreviewButton,
-      DisplayResultProvider,
-      FallbackDisclaimer,
-      QueryPreviewList,
       Aside,
       AutoProgressBar,
       Banner,
@@ -544,15 +556,19 @@
       ClearSearchInput,
       CloseMainModal,
       CrossIcon,
+      DisplayEmitter,
+      DisplayResultProvider,
       ExperienceControls,
+      FallbackDisclaimer,
       Grid2Col,
       Grid4Col,
       LocationProvider,
+      MainModal,
       MainScrollItem,
       MultiColumnMaxWidthLayout,
       NextQueriesList,
-      NextQueryPreview,
       NextQuery,
+      NextQueryPreview,
       OpenMainModal,
       PartialQueryButton,
       PartialResultsList,
@@ -560,6 +576,8 @@
       PreselectedFilters,
       Promoted,
       PromotedsList,
+      QueryPreviewButton,
+      QueryPreviewList,
       Recommendations,
       Redirection,
       RelatedTags,
@@ -580,8 +598,7 @@
       Spellcheck,
       SpellcheckButton,
       Tagging,
-      UrlHandler,
-      MainModal
+      UrlHandler
     },
     setup() {
       const stores = ['Spain', 'Portugal', 'Italy'];
@@ -600,6 +617,9 @@
       const sortValues = ['', 'price asc', 'price desc'];
       const isAnyQueryLoadedInPreview = useQueriesPreview().isAnyQueryLoadedInPreview;
 
+      const scrollData = useState('scroll', ['data']).data;
+      const mainScrollDirection = computed(() => scrollData.value['main-scroll']?.direction);
+
       const controls: ComputedRef<HomeControls> = computed(() => {
         return {
           searchInput: {
@@ -668,16 +688,18 @@
         isAnyQueryLoadedInPreview,
         queries,
         toggleE2EAdapter,
-        controls
+        controls,
+        x: use$x(),
+        mainScrollDirection
       };
     }
   });
 </script>
 
-<style lang="scss" scoped>
-  .x-modal::v-deep .x-modal__content {
+<style lang="css">
+  .x-modal .x-modal__content {
     overflow: hidden;
-    // Following is needed for closing the modal in base-events-modal.feature
+    /* Following is needed for closing the modal in base-events-modal.feature */
     width: calc(100% - 20px);
     height: calc(100% - 20px);
     margin: 10px;
diff --git a/packages/x-components/src/views/home/aside.vue b/packages/x-components/src/views/home/aside.vue
index 6b3ffade0e..8862223b3e 100644
--- a/packages/x-components/src/views/home/aside.vue
+++ b/packages/x-components/src/views/home/aside.vue
@@ -4,7 +4,7 @@
     <ClearFilters />
     <SelectedFiltersList>
       <template #default="{ filter }">
-        <SimpleFilter :filter="filter" class="x-facet-filter-success">
+        <SimpleFilter :filter="filter" :cssClasses="['x-facet-filter-success']">
           <template #label>{{ filter.label ?? filter.id }}</template>
         </SimpleFilter>
       </template>
@@ -67,15 +67,17 @@
                   </span>
                 </SelectedFilters>
                 <FiltersList v-slot="{ filter }">
-                  <SimpleFilter #label :filter="filter" :data-test="`${facet.label}-filter`">
-                    <BasePriceFilterLabel
-                      v-if="facet.id === 'price'"
-                      :filter="filter"
-                      format="ii.dd €"
-                      lessThan="Less than {max}"
-                      fromTo="From {min} to {max}"
-                      from="More than {min}"
-                    />
+                  <SimpleFilter :filter="filter" :data-test="`${facet.label}-filter`">
+                    <template #label>
+                      <BasePriceFilterLabel
+                        v-if="facet.id === 'price'"
+                        :filter="filter"
+                        format="ii.dd €"
+                        lessThan="Less than {max}"
+                        fromTo="From {min} to {max}"
+                        from="More than {min}"
+                      />
+                    </template>
                   </SimpleFilter>
                 </FiltersList>
               </SlicedFilters>
@@ -107,15 +109,13 @@
                       filter
                     }"
                   >
-                    <SimpleFilter
-                      #label="{ filter }"
-                      :filter="filter"
-                      :data-test="`${facet.label}-filter`"
-                    >
-                      {{ filter.label }}
-                      <span :data-test="`${facet.label}-filter-total-results`">
-                        {{ filter.totalResults }}
-                      </span>
+                    <SimpleFilter :filter="filter" :data-test="`${facet.label}-filter`">
+                      <template #label="{ filter }">
+                        {{ filter.label }}
+                        <span :data-test="`${facet.label}-filter-total-results`">
+                          {{ filter.totalResults }}
+                        </span>
+                      </template>
                     </SimpleFilter>
                   </FiltersList>
                 </SlicedFilters>
@@ -215,5 +215,3 @@
     }
   });
 </script>
-
-<style scoped lang="scss"></style>
diff --git a/packages/x-components/src/views/home/display-result-provider.vue b/packages/x-components/src/views/home/display-result-provider.vue
index 4df6d9e39c..a69e424b6e 100644
--- a/packages/x-components/src/views/home/display-result-provider.vue
+++ b/packages/x-components/src/views/home/display-result-provider.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { defineComponent, h, PropType, provide } from 'vue';
+  import { defineComponent, PropType, provide } from 'vue';
   import { TaggingRequest } from '@empathyco/x-types';
 
   export default defineComponent({
@@ -16,7 +16,7 @@
         }
       });
 
-      return () => slots.default?.()[0] ?? h();
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/views/home/result.vue b/packages/x-components/src/views/home/result.vue
index 5bdf5e1396..dba9bcfa95 100644
--- a/packages/x-components/src/views/home/result.vue
+++ b/packages/x-components/src/views/home/result.vue
@@ -1,11 +1,7 @@
 <template>
   <article class="x-result" style="max-width: 300px; overflow: hidden">
     <BaseResultLink :result="result">
-      <BaseResultImage
-        :result="result"
-        class="x-result__picture x-picture-zoom"
-        :loadAnimation="crossFade"
-      >
+      <BaseResultImage :result="result" :loadAnimation="crossFade">
         <template #placeholder>
           <div style="padding-top: 100%; background-color: lightgray"></div>
         </template>
@@ -57,12 +53,10 @@
         required: true
       }
     },
-    data() {
+    setup() {
       return {
         crossFade: CrossFade
       };
     }
   });
 </script>
-
-<style scoped lang="scss"></style>
diff --git a/packages/x-components/src/views/pdp.vue b/packages/x-components/src/views/pdp.vue
index fb41a4ed06..0842225740 100644
--- a/packages/x-components/src/views/pdp.vue
+++ b/packages/x-components/src/views/pdp.vue
@@ -42,5 +42,3 @@
     }
   });
 </script>
-
-<style scoped></style>
diff --git a/packages/x-components/src/vue-global-events.d.ts b/packages/x-components/src/vue-global-events.d.ts
deleted file mode 100644
index c2b88af256..0000000000
--- a/packages/x-components/src/vue-global-events.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module 'vue-global-events' {
-  import Vue from 'vue';
-  export default Vue;
-}
diff --git a/packages/x-components/src/wiring/__tests__/namespaced-wires-factory.spec.ts b/packages/x-components/src/wiring/__tests__/namespaced-wires-factory.spec.ts
index e83ab7094c..6c6289db6c 100644
--- a/packages/x-components/src/wiring/__tests__/namespaced-wires-factory.spec.ts
+++ b/packages/x-components/src/wiring/__tests__/namespaced-wires-factory.spec.ts
@@ -1,3 +1,5 @@
+import { Store } from 'vuex';
+import { RootXStoreState } from '../../store/index';
 import {
   namespacedWireCommit,
   namespacedWireCommitWithoutPayload,
@@ -9,7 +11,7 @@ import { createQuerySuggestionsStoreMock, SubjectHandler } from './utils';
 
 describe('testing namespaced wires factory', () => {
   const moduleName = 'querySuggestions';
-  const storeMock = createQuerySuggestionsStoreMock();
+  const storeMock = createQuerySuggestionsStoreMock() as Store<RootXStoreState>;
   const busMock = new XDummyBus();
   const busOnMock = busMock.on.bind(busMock);
 
diff --git a/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts b/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts
index 96eebfabb3..b3402d43c3 100644
--- a/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts
+++ b/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts
@@ -1,6 +1,6 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { createStore, Store } from 'vuex';
 import { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';
 import { Observable } from 'rxjs';
 import { RootXStoreState } from '../../store/index';
@@ -19,16 +19,15 @@ export function createWire<SomeEvent extends XEvent = 'UserIsTypingAQuery'>({
   event = 'UserIsTypingAQuery' as SomeEvent,
   state
 }: CreateWireOptions<SomeEvent> = {}): CreateWireAPI<XEventPayload<SomeEvent>> {
-  const vue = createLocalVue();
-  vue.use(Vuex);
+  const store = createStore({
+    state: { x: state }
+  }) as Store<RootXStoreState>;
+  mount({}, { global: { plugins: [store] } });
   const bus = new XDummyBus();
   const callback = jest.fn();
   const wire = createWireFromFunction<XEventPayload<SomeEvent>>(({ eventPayload }) => {
     callback(eventPayload);
   });
-  const store = new Store<DeepPartial<RootXStoreState>>({
-    state: { x: state }
-  }) as Store<RootXStoreState>;
 
   return {
     store,
diff --git a/packages/x-components/src/wiring/__tests__/utils.ts b/packages/x-components/src/wiring/__tests__/utils.ts
index 2879e97cd6..dcff1126e0 100644
--- a/packages/x-components/src/wiring/__tests__/utils.ts
+++ b/packages/x-components/src/wiring/__tests__/utils.ts
@@ -1,6 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { Subject } from 'rxjs';
-import Vuex, { Store } from 'vuex';
+import { createStore, Store } from 'vuex';
 import { RootXStoreState } from '../../store/store.types';
 import { XModuleName } from '../../x-modules/x-modules.types';
 import { WireParams, WirePayload } from '../wiring.types';
@@ -13,9 +13,7 @@ import { WireParams, WirePayload } from '../wiring.types';
  * @internal
  */
 export function createQuerySuggestionsStoreMock(): Store<any> {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store = new Store<any>({
+  const store = createStore<any>({
     state: () => ({
       x: {
         querySuggestions: {
@@ -31,6 +29,7 @@ export function createQuerySuggestionsStoreMock(): Store<any> {
         state.x.querySuggestions.query.trim()
     }
   });
+  mount({}, { global: { plugins: [store] } });
   store.commit = jest.fn();
   store.dispatch = jest.fn();
   return store;
diff --git a/packages/x-components/src/wiring/__tests__/wires-factory.spec.ts b/packages/x-components/src/wiring/__tests__/wires-factory.spec.ts
index fbb88a47f8..16775ef0e8 100644
--- a/packages/x-components/src/wiring/__tests__/wires-factory.spec.ts
+++ b/packages/x-components/src/wiring/__tests__/wires-factory.spec.ts
@@ -1,3 +1,5 @@
+import { Store } from 'vuex';
+import { RootXStoreState } from '../../store/index';
 import { noOp } from '../../utils/function';
 import {
   createWireFromFunction,
@@ -12,7 +14,7 @@ import { XDummyBus } from '../../__tests__/bus.dummy';
 import { createQuerySuggestionsStoreMock, getExpectedWirePayload, SubjectHandler } from './utils';
 
 describe('testing wires factory', () => {
-  const storeMock = createQuerySuggestionsStoreMock();
+  const storeMock = createQuerySuggestionsStoreMock() as Store<RootXStoreState>;
   const subjectHandler = new SubjectHandler();
   const busMock = new XDummyBus();
   const busOnMock = busMock.on.bind(busMock);
diff --git a/packages/x-components/src/wiring/__tests__/wires-operators.spec.ts b/packages/x-components/src/wiring/__tests__/wires-operators.spec.ts
index bde815d5c3..366960ed9d 100644
--- a/packages/x-components/src/wiring/__tests__/wires-operators.spec.ts
+++ b/packages/x-components/src/wiring/__tests__/wires-operators.spec.ts
@@ -1,3 +1,5 @@
+import { Store } from 'vuex';
+import { RootXStoreState } from '../../store/index';
 import { createWireFromFunction } from '../wires.factory';
 import {
   filter,
@@ -12,7 +14,7 @@ import { XDummyBus } from '../../__tests__/bus.dummy';
 import { createQuerySuggestionsStoreMock, getExpectedWirePayload, SubjectHandler } from './utils';
 
 describe('testing wires operators', () => {
-  const storeMock = createQuerySuggestionsStoreMock();
+  const storeMock = createQuerySuggestionsStoreMock() as Store<RootXStoreState>;
   const subjectHandler = new SubjectHandler();
   const executeFunction = jest.fn();
   const wire = createWireFromFunction(executeFunction);
diff --git a/packages/x-components/src/wiring/namespaced-wires.operators.ts b/packages/x-components/src/wiring/namespaced-wires.operators.ts
index 2aa157dacb..8850125bdd 100644
--- a/packages/x-components/src/wiring/namespaced-wires.operators.ts
+++ b/packages/x-components/src/wiring/namespaced-wires.operators.ts
@@ -1,3 +1,4 @@
+import { Dictionary } from '@empathyco/x-utils';
 import { XModuleName } from '../x-modules/x-modules.types';
 import { NamespacedTimeWireOperator } from './namespaced-wiring.types';
 import { debounce, throttle } from './wires.operators';
@@ -55,7 +56,7 @@ function createNamespacedTimeWireOperator<ModuleName extends XModuleName>(
     timingOperator(
       wire,
       ({ state, getters }) =>
-        timeSelector(getStateAndGettersFromModule(state, getters, moduleName)),
+        timeSelector(getStateAndGettersFromModule(state, getters as Dictionary, moduleName)),
       options
     );
 }
diff --git a/packages/x-components/src/wiring/wiring.types.ts b/packages/x-components/src/wiring/wiring.types.ts
index ba0b466c95..f7b3740ead 100644
--- a/packages/x-components/src/wiring/wiring.types.ts
+++ b/packages/x-components/src/wiring/wiring.types.ts
@@ -2,6 +2,7 @@ import { Priority, SubjectPayload, XPriorityBus } from '@empathyco/x-bus';
 import { Dictionary } from '@empathyco/x-utils';
 import { Observable, Subscription } from 'rxjs';
 import { Store } from 'vuex';
+import { Component } from 'vue';
 import { RootStoreStateAndGetters, RootXStoreState } from '../store/store.types';
 import { FeatureLocation, QueryFeature, ResultFeature } from '../types/origin';
 import { FirstParameter, MaybeArray, MonadicFunction, NiladicFunction } from '../utils/types';
@@ -45,7 +46,7 @@ export interface WireMetadata {
   /** The DOM element that triggered the event emission. */
   target?: HTMLElement;
   /** The component instance that triggered the event emission. */
-  component?: Vue;
+  component?: Component;
   /** The event priority to use when sorting the bus queue for event batching. */
   priority?: Priority;
   /**
diff --git a/packages/x-components/src/wiring/wiring.utils.ts b/packages/x-components/src/wiring/wiring.utils.ts
index f8047ddc32..f259c7aaba 100644
--- a/packages/x-components/src/wiring/wiring.utils.ts
+++ b/packages/x-components/src/wiring/wiring.utils.ts
@@ -1,4 +1,4 @@
-import { Store } from 'vuex';
+import { Dictionary } from '@empathyco/x-utils';
 import { RootXStoreState, StoreModuleStateAndGetters } from '../store/store.types';
 import { getGettersProxy } from '../store/utils/getters-proxy.utils';
 import { ExtractState, XModuleName } from '../x-modules/x-modules.types';
@@ -31,7 +31,7 @@ export function createWiring<T extends Partial<Wiring>>(wiring: T): T {
  */
 export function getStateAndGettersFromModule<ModuleName extends XModuleName>(
   state: RootXStoreState,
-  getters: Pick<Store<any>, 'getters'>,
+  getters: Dictionary,
   moduleName: ModuleName
 ): StoreModuleStateAndGetters<ModuleName> {
   return {
diff --git a/packages/x-components/src/x-installer/api/__tests__/default-api.spec.ts b/packages/x-components/src/x-installer/api/__tests__/default-api.spec.ts
index bd1f4ccf8b..027ded3301 100644
--- a/packages/x-components/src/x-installer/api/__tests__/default-api.spec.ts
+++ b/packages/x-components/src/x-installer/api/__tests__/default-api.spec.ts
@@ -1,6 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
+import { computed, defineComponent, inject, nextTick } from 'vue';
 import { XComponentsAdapterDummy } from '../../../__tests__/adapter.dummy';
-import { XInstaller } from '../../x-installer/x-installer';
+import { XInstaller } from '../../x-installer';
 import { NormalisedSnippetConfig, SnippetConfig } from '../api.types';
 import { BaseXAPI } from '../base-api';
 import { XDummyBus } from '../../../__tests__/bus.dummy';
@@ -66,43 +66,42 @@ describe('testing default X API', () => {
   });
 
   it('changes the `SnippetConfig` when calling the `setSnippetConfig` function', async () => {
-    const vue = createLocalVue();
     const snippetConfig: SnippetConfig = {
       instance: 'test',
       scope: 'test',
       lang: 'es'
     };
-    const installerApp = vue.extend({
-      inject: ['snippetConfig'],
-      render(h) {
-        // Vue does not provide type safety for inject
-        const lang = (this as any).snippetConfig.lang;
-        const store = (this as any).snippetConfig.store;
-        return h('div', [
-          h('h1', { class: 'lang-test' }, [lang]),
-          h('h1', { class: 'store-test' }, [store])
-        ]);
-      }
+    const rootComponent = defineComponent({
+      setup: () => {
+        const snippetConfig = inject<SnippetConfig>('snippetConfig');
+        const lang = computed(() => snippetConfig?.lang ?? '');
+        const store = computed(() => snippetConfig?.store ?? '');
+        return { lang, store };
+      },
+      template: `<div>
+        <h1 class="lang-test">{{ lang }}</h1>
+        <h1 class="store-test">{{ store }}</h1>
+      </div>`
     });
 
-    const { api, app } = await new XInstaller({
+    const { api } = await new XInstaller({
+      rootComponent,
       adapter: XComponentsAdapterDummy,
-      api: defaultXAPI,
-      app: installerApp
+      api: defaultXAPI
     }).init(snippetConfig);
 
-    const langElement = app?.$el.getElementsByClassName('lang-test')[0];
-    const storeElement = app?.$el.getElementsByClassName('store-test')[0];
+    const langElement = document.querySelector('.lang-test');
+    const storeElement = document.querySelector('.store-test');
 
-    expect(langElement).toHaveTextContent(snippetConfig.lang);
+    expect(langElement?.textContent).toEqual(snippetConfig.lang);
     api?.setSnippetConfig({ lang: 'en' });
-    await vue.nextTick();
-    expect(langElement).toHaveTextContent('en');
+    await nextTick();
+    expect(langElement?.textContent).toEqual('en');
 
-    expect(storeElement).toHaveTextContent('');
+    expect(storeElement?.textContent).toEqual('');
     api?.setSnippetConfig({ store: 'Portugal' });
-    await vue.nextTick();
-    expect(storeElement).toHaveTextContent('Portugal');
+    await nextTick();
+    expect(storeElement?.textContent).toEqual('Portugal');
   });
 
   it('should allow set the snippetConfig getter', () => {
diff --git a/packages/x-components/src/x-installer/x-installer/__tests__/x-installer.spec.ts b/packages/x-components/src/x-installer/x-installer/__tests__/x-installer.spec.ts
index f0c11b4244..2ede7a056a 100644
--- a/packages/x-components/src/x-installer/x-installer/__tests__/x-installer.spec.ts
+++ b/packages/x-components/src/x-installer/x-installer/__tests__/x-installer.spec.ts
@@ -1,74 +1,78 @@
-import { createLocalVue } from '@vue/test-utils';
-import { ComponentOptions, default as Vue, VueConstructor } from 'vue';
-import VueRouter from 'vue-router';
+import { computed, defineComponent, inject, nextTick } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
 import { Store } from 'vuex';
-import { XPlugin } from '../../../plugins/x-plugin';
-import { PrivateXModulesOptions, XModulesOptions } from '../../../plugins/x-plugin.types';
+import { PrivateXModulesOptions, XModulesOptions, XPlugin } from '../../../plugins';
 import { XComponentsAdapterDummy } from '../../../__tests__/adapter.dummy';
 import { AnyXModule } from '../../../x-modules/x-modules.types';
 import { InitWrapper, InstallXOptions } from '../types';
 import { XInstaller } from '../x-installer';
 import { SnippetConfig } from '../../api/index';
 
-describe('testing `XInstaller` utility', () => {
-  const adapter = XComponentsAdapterDummy;
-  const xPluginMock = { install: jest.fn() };
-  const plugin = xPluginMock as unknown as XPlugin;
-  const store = {} as unknown as Store<any>;
-  const xModules = {} as unknown as XModulesOptions;
-  const __PRIVATE__xModules = {} as unknown as PrivateXModulesOptions;
-  const initialXModule = {} as unknown as AnyXModule;
-
-  const component: ComponentOptions<Vue> = {
-    render(h) {
-      return h('div');
-    },
-    mounted: jest.fn()
-  };
+const adapter = XComponentsAdapterDummy;
+const xPluginMock = { install: jest.fn() };
+const plugin = xPluginMock as unknown as XPlugin;
+const store = {} as unknown as Store<any>;
+const xModules = {} as unknown as XModulesOptions;
+const __PRIVATE__xModules = {} as unknown as PrivateXModulesOptions;
+const initialXModule = {} as unknown as AnyXModule;
+
+const getMinimumSnippetConfig = (): SnippetConfig => ({
+  instance: 'test',
+  lang: 'test',
+  scope: 'test'
+});
+
+const component = defineComponent({
+  setup: () => {
+    // empty setup
+  },
+  mounted: jest.fn(),
+  template: '<h1/>'
+});
 
-  const getMinimumSnippetConfig = (): SnippetConfig => ({
-    instance: 'test',
-    lang: 'test',
-    scope: 'test'
+/**
+ * Creates a Vue component injecting the snippet config.
+ *
+ * @param snippetProperty - Property of {@link SnippetConfig} to be rendered.
+ * @returns A Vue component with the injected snippet config.
+ */
+function createSnippetConfigComponent(snippetProperty: keyof SnippetConfig = 'instance') {
+  return defineComponent({
+    setup: () => {
+      const snippetConfig = inject<SnippetConfig>('snippetConfig');
+      const snippetConfigValue = computed(() => snippetConfig?.[snippetProperty] ?? '');
+      return { snippetConfigValue };
+    },
+    template: '<h1 id="snippet-config-value">{{ snippetConfigValue }}</h1>'
   });
+}
 
-  /**
-   * Creates a Vue component injecting the snippet config.
-   *
-   * @param snippetProperty - Property of {@link SnippetConfig} to be rendered.
-   * @returns A Vue component with the injected snippet config.
-   *
-   * @internal
-   */
-  function createSnippetConfigComponent(
-    snippetProperty: keyof SnippetConfig = 'instance'
-  ): VueConstructor {
-    return Vue.extend({
-      inject: ['snippetConfig'],
-      render(h) {
-        return h('h1', [(this as any).snippetConfig[snippetProperty]]);
-      }
-    });
-  }
+function getSnippetConfigComponentTextContent() {
+  return document.querySelector('#snippet-config-value')?.textContent;
+}
 
+describe('testing `XInstaller` utility', () => {
   beforeEach(() => {
     delete window.initX;
+    delete window.InterfaceX;
     jest.clearAllMocks();
+    document.body.innerHTML = '';
   });
 
-  it('installs the XPlugin with all the passed plugin parameters', () => {
-    new XInstaller({
+  it('installs the XPlugin with all the passed plugin parameters', async () => {
+    await new XInstaller({
+      rootComponent: component,
       adapter,
       plugin,
       store,
       xModules,
       __PRIVATE__xModules,
-      initialXModules: [initialXModule],
-      vue: createLocalVue()
+      initialXModules: [initialXModule]
     }).init(getMinimumSnippetConfig());
-    const params = xPluginMock.install.mock.calls[0][1];
 
     expect(xPluginMock.install).toHaveBeenCalledTimes(1);
+
+    const params = xPluginMock.install.mock.calls[0][1];
     expect(params.adapter).toEqual(adapter);
     expect(params.store).toEqual(store);
     expect(params.xModules).toEqual(xModules);
@@ -78,125 +82,77 @@ describe('testing `XInstaller` utility', () => {
   });
 
   it('creates the public API in global scope by default', () => {
-    delete window.InterfaceX;
-    new XInstaller({ adapter, plugin, vue: createLocalVue() }).init(getMinimumSnippetConfig());
+    new XInstaller({ rootComponent: component, adapter, plugin }).init(getMinimumSnippetConfig());
 
     expect(window.InterfaceX).toBeDefined();
-    delete window.InterfaceX;
   });
 
   it('does not create the public API passing the api parameter to false', () => {
-    new XInstaller({ adapter, plugin, api: false, vue: createLocalVue() }).init(
+    new XInstaller({ rootComponent: component, adapter, plugin, api: false }).init(
       getMinimumSnippetConfig()
     );
 
     expect(window.InterfaceX).not.toBeDefined();
   });
 
-  it('installs the XPlugin using the passed vue', () => {
-    const localVue = createLocalVue();
-    new XInstaller({ adapter, plugin, vue: localVue }).init(getMinimumSnippetConfig());
-    const vueParam = xPluginMock.install.mock.calls[0][0];
-
-    expect(xPluginMock.install).toHaveBeenCalledTimes(1);
-    expect(vueParam).toBe(localVue);
-  });
-
   it('creates a Vue application using the component passed in the app option', async () => {
-    await new XInstaller({ adapter, plugin, app: component, vue: createLocalVue() }).init(
+    await new XInstaller({ rootComponent: component, adapter, plugin }).init(
       getMinimumSnippetConfig()
     );
 
-    // eslint-disable-next-line  @typescript-eslint/unbound-method
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(component?.mounted).toHaveBeenCalledTimes(1);
   });
 
-  it('creates a Vue application using the `vueOptions` passed', async () => {
-    const testMethod = jest.fn();
-    const vue = createLocalVue();
-    vue.use(VueRouter);
-    const vueOptions: InstallXOptions['vueOptions'] = {
-      router: new VueRouter({}),
-      methods: { testMethod }
-    };
-    const { app } = await new XInstaller({
-      adapter,
-      vue,
-      vueOptions,
-      app: component
-    }).init(getMinimumSnippetConfig());
-
-    expect(app).toHaveProperty('testMethod');
-    expect(app).toHaveProperty('$router');
-  });
-
   it('allows to install more plugins', async () => {
-    const vue = createLocalVue();
     const { app } = await new XInstaller({
+      rootComponent: component,
       adapter,
-      vue,
-      installExtraPlugins({ bus, vue, snippet }) {
-        vue.use(VueRouter);
-        return {
-          // Installing the Vue Router plugin
-          router: new VueRouter({}),
-          data() {
-            // Adding some data variables to check that we correctly receive them
-            return {
-              bus,
-              snippet
-            };
-          }
-        };
-      },
-      app: component
+      installExtraPlugins({ app }) {
+        const router = createRouter({ history: createWebHistory(), routes: [] });
+        app.use(router);
+      }
     }).init(getMinimumSnippetConfig());
 
-    expect(app).toHaveProperty('$router');
-    expect(app).toHaveProperty('bus');
-    expect(app).toHaveProperty('snippet', { ...getMinimumSnippetConfig(), uiLang: 'test' });
+    expect(app?.config.globalProperties).toHaveProperty('$router');
   });
 
   it('initializes the app with the provided snippet config', async () => {
-    const vue = createLocalVue();
-    const { app, api } = await new XInstaller({
-      adapter,
-      vue,
-      app: createSnippetConfigComponent()
+    const rootComponent = createSnippetConfigComponent();
+    const { api } = await new XInstaller({
+      rootComponent,
+      adapter
     }).init(getMinimumSnippetConfig());
 
-    expect(app?.$el).toHaveTextContent(getMinimumSnippetConfig().instance);
+    expect(getSnippetConfigComponentTextContent()).toEqual(getMinimumSnippetConfig().instance);
 
     api?.setSnippetConfig({ instance: 'test-2' });
-    await vue.nextTick();
-    expect(app?.$el).toHaveTextContent('test-2');
+    await nextTick();
+    expect(getSnippetConfigComponentTextContent()).toEqual('test-2');
   });
 
   it('initializes the app when window.initX has the snippet config object', async () => {
-    const vue = createLocalVue();
     window.initX = getMinimumSnippetConfig();
-    const { app, api } = (await new XInstaller({
-      adapter,
-      vue,
-      app: createSnippetConfigComponent()
+    const { api } = (await new XInstaller({
+      rootComponent: createSnippetConfigComponent(),
+      adapter
     }).init()) as InitWrapper;
 
-    expect(app?.$el).toHaveTextContent(getMinimumSnippetConfig().instance);
+    expect(getSnippetConfigComponentTextContent()).toEqual(getMinimumSnippetConfig().instance);
 
     api?.setSnippetConfig({ instance: 'test-2' });
-    await vue.nextTick();
-    expect(app?.$el).toHaveTextContent('test-2');
+    await nextTick();
+    expect(getSnippetConfigComponentTextContent()).toEqual('test-2');
   });
 
   it('should set the snippetConfig getter', async () => {
-    const vue = createLocalVue();
     window.initX = getMinimumSnippetConfig();
     await new XInstaller({
-      adapter,
-      vue,
-      app: createSnippetConfigComponent()
+      rootComponent: createSnippetConfigComponent(),
+      adapter
     }).init();
     const snippetConfig = window.InterfaceX?.getSnippetConfig();
+
     expect(snippetConfig).toEqual({
       instance: 'test',
       lang: 'test',
@@ -205,98 +161,95 @@ describe('testing `XInstaller` utility', () => {
     });
   });
 
-  // eslint-disable-next-line max-len
   it('initializes the app when window.initX is a function retrieving the snippet config', async () => {
-    const vue = createLocalVue();
     window.initX = () => getMinimumSnippetConfig();
-    const { app, api } = (await new XInstaller({
-      adapter,
-      vue,
-      app: createSnippetConfigComponent()
+    const { api } = (await new XInstaller({
+      rootComponent: createSnippetConfigComponent(),
+      adapter
     }).init()) as InitWrapper;
 
-    expect(app?.$el).toHaveTextContent(getMinimumSnippetConfig().instance);
+    expect(getSnippetConfigComponentTextContent()).toEqual(getMinimumSnippetConfig().instance);
 
     api?.setSnippetConfig({ instance: 'test-2' });
-    await vue.nextTick();
-    expect(app?.$el).toHaveTextContent('test-2');
+    await nextTick();
+    expect(getSnippetConfigComponentTextContent()).toEqual('test-2');
   });
 
-  // eslint-disable-next-line max-len
   it('does not initialize XComponents when no snippet config is passed and no window.initX is not defined', async () => {
-    expect(await new XInstaller({ adapter, plugin, vue: createLocalVue() }).init()).toBeUndefined();
+    expect(await new XInstaller({ adapter, plugin }).init()).toBeUndefined();
   });
 
   describe('`lang` & `uiLang`', () => {
     it('provides a `uiLang` by default', async () => {
-      const { app } = await new XInstaller({
+      await new XInstaller({
+        rootComponent: createSnippetConfigComponent('uiLang'),
         adapter,
-        plugin,
-        vue: createLocalVue(),
-        app: createSnippetConfigComponent('uiLang')
+        plugin
       }).init({ ...getMinimumSnippetConfig(), lang: 'en' });
 
-      expect(app?.$el).toHaveTextContent('en');
+      expect(getSnippetConfigComponentTextContent()).toEqual('en');
     });
 
     it('respects user `uiLang` value', async () => {
-      const { app } = await new XInstaller({
+      await new XInstaller({
+        rootComponent: createSnippetConfigComponent('uiLang'),
         adapter,
-        plugin,
-        vue: createLocalVue(),
-        app: createSnippetConfigComponent('uiLang')
+        plugin
       }).init({ ...getMinimumSnippetConfig(), lang: 'en', uiLang: 'it' });
-      expect(app?.$el).toHaveTextContent('it');
+
+      expect(getSnippetConfigComponentTextContent()).toEqual('it');
     });
 
     it('updates `uiLang` when `lang` is changed', async () => {
-      const vue = createLocalVue();
-      const { app, api } = await new XInstaller({
+      const { api } = await new XInstaller({
+        rootComponent: createSnippetConfigComponent('uiLang'),
         adapter,
-        plugin,
-        vue,
-        app: createSnippetConfigComponent('uiLang')
+        plugin
       }).init({ ...getMinimumSnippetConfig(), lang: 'en', uiLang: 'it' });
-      expect(app?.$el).toHaveTextContent('it');
+
+      expect(getSnippetConfigComponentTextContent()).toEqual('it');
 
       api!.setSnippetConfig({ lang: 'es' });
-      await vue.nextTick();
-      expect(app?.$el).toHaveTextContent('es');
+      await nextTick();
+      expect(getSnippetConfigComponentTextContent()).toEqual('es');
 
       api!.setSnippetConfig({ uiLang: 'en' });
-      await vue.nextTick();
-      expect(app?.$el).toHaveTextContent('en');
+      await nextTick();
+      expect(getSnippetConfigComponentTextContent()).toEqual('en');
 
       api!.setSnippetConfig({ lang: 'fr', uiLang: 'it' });
-      await vue.nextTick();
-      expect(app?.$el).toHaveTextContent('it');
+      await nextTick();
+      expect(getSnippetConfigComponentTextContent()).toEqual('it');
     });
   });
 
   describe('mounting target element', () => {
-    const componentApp: ComponentOptions<Vue> = {
-      render(h) {
-        return h('section', { class: 'root-element' });
-      }
-    };
+    /**
+     * In Vue 2.x, when mounting an application that has a template, the rendered content replaces
+     * the element we mount to.
+     * In Vue 3.x, the rendered application is appended as a child of such an element, replacing
+     * element's innerHTML.
+     */
+
+    const componentApp = defineComponent({
+      setup: () => {
+        // emtpy setup
+      },
+      template: '<section class="root-element" />'
+    });
 
     function installX(
       domElement?: InstallXOptions['domElement'],
       snippetConfig = getMinimumSnippetConfig()
     ): Promise<InitWrapper> {
-      const vue = createLocalVue();
-      return new XInstaller({ adapter, plugin, vue, domElement, app: componentApp }).init(
+      return new XInstaller({ rootComponent: componentApp, adapter, plugin, domElement }).init(
         snippetConfig
       );
     }
 
-    beforeEach(() => {
-      document.body.innerHTML = '';
-    });
-
     it('creates an element if there is no target element indicated', async () => {
       await installX();
-      expect(document.body.querySelector('div')).toBeNull();
+      expect(document.body.querySelector('div')).not.toBeNull();
       expect(document.body.querySelector('section')).not.toBeNull();
     });
 
@@ -306,7 +259,7 @@ describe('testing `XInstaller` utility', () => {
       document.body.appendChild(domElement);
 
       await installX(domElement);
-      expect(document.body.querySelector('.target-element')).toBeNull();
+      expect(document.body.querySelector('.target-element')).not.toBeNull();
       expect(document.body.querySelector('.root-element')).not.toBeNull();
     });
 
@@ -316,7 +269,7 @@ describe('testing `XInstaller` utility', () => {
       document.body.appendChild(domElement);
 
       await installX('.target-element');
-      expect(document.body.querySelector('.target-element')).toBeNull();
+      expect(document.body.querySelector('.target-element')).not.toBeNull();
       expect(document.body.querySelector('.root-element')).not.toBeNull();
     });
 
@@ -341,7 +294,7 @@ describe('testing `XInstaller` utility', () => {
       }
 
       await installX(domElement, snippetConfig);
-      expect(document.body.querySelector('.target-element')).toBeNull();
+      expect(document.body.querySelector('.target-element')).not.toBeNull();
       expect(document.body.querySelector('.container-element')).not.toBeNull();
       expect(document.body.querySelector('.root-element')).not.toBeNull();
     });
diff --git a/packages/x-components/src/x-installer/x-installer/types.ts b/packages/x-components/src/x-installer/x-installer/types.ts
index 18515c2e7c..dedf6e3a5d 100644
--- a/packages/x-components/src/x-installer/x-installer/types.ts
+++ b/packages/x-components/src/x-installer/x-installer/types.ts
@@ -1,4 +1,4 @@
-import { ComponentOptions, PluginObject, VueConstructor } from 'vue';
+import { App, Component, Plugin } from 'vue';
 import { XBus } from '@empathyco/x-bus';
 import { XPluginOptions } from '../../plugins/x-plugin.types';
 import { NormalisedSnippetConfig, XAPI } from '../api/api.types';
@@ -15,7 +15,7 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
    * The Vue component used as root of the application. If it is not passed, no Vue Application is
    * initialized, only plugin installed.
    */
-  app?: VueConstructor | ComponentOptions<Vue>;
+  rootComponent?: Component;
   /**
    * The API to expose globally. If is not passed the default {@link BaseXAPI} will be used. If
    * a `false` value is passed then the API is not created.
@@ -35,46 +35,21 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
    * The XPlugin which will be installed. If not passed, an instance of {@link XPlugin} will be
    * installed.
    */
-  plugin?: PluginObject<XPluginOptions>;
-  /**
-   * The Vue instance used to install the plugin and to create the Application. If not
-   * passed the default Vue instance is used. This can be useful to use the `localVue`
-   * in the unit tests.
-   */
-  vue?: VueConstructor;
-  /**
-   * This object can contain any option to pass to Vue instance at the moment of creating the App
-   * instance.
-   *
-   * @example
-   * ```typescript
-   * {
-   *   vueOptions:{
-   *     i18n,
-   *     router
-   *   }
-   * }
-   * ```
-   */
-  vueOptions?: VueConstructorPartialArgument;
-
+  plugin?: Plugin<XPluginOptions>;
   /**
    * Callback to invoke after instantiating the app.
    *
-   * @param app - The root vue instance containing the just created app.
+   * @param app - The vue application instance.
    */
-  onCreateApp?: (app: Vue) => void;
+  onCreateApp?: (app: App) => void;
   /**
    * Adds the option to install more Vue plugins, giving access to the {@link SnippetConfig} and
    * the {@link @empathyco/x-bus#XBus}.
    *
    * @param options - An object that contains utilities that might be helpful for installing Vue
    * plugins.
-   * @returns An object containing objects that will be passed to the Vue instance when constructed.
    */
-  installExtraPlugins?(
-    options: ExtraPluginsOptions
-  ): VueConstructorPartialArgument | Promise<VueConstructorPartialArgument>;
+  installExtraPlugins?(options: ExtraPluginsOptions): void;
 }
 
 /**
@@ -83,8 +58,8 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
  * @public
  */
 export interface ExtraPluginsOptions {
-  /** The Vue instance that is being used. */
-  vue: VueConstructor;
+  /** The Vue application instance that is being used. */
+  app: App;
   /** The events bus instance used to communicate different part of the x-components. */
   bus: XBus<XEventsTypes, WireMetadata>;
   /**
@@ -94,25 +69,18 @@ export interface ExtraPluginsOptions {
   snippet: NormalisedSnippetConfig;
 }
 
-/**
- * First parameter of the Vue constructor.
- *
- * @public
- */
-export type VueConstructorPartialArgument = Partial<ConstructorParameters<VueConstructor>[0]>;
-
 /**
  * Interface for the returned type of the {@link XInstaller.(init:1)} function.
  *
  * @public
  */
 export interface InitWrapper {
-  /** The root Vue instance of the application. */
-  app?: Vue;
+  /** The Vue application instance. */
+  app?: App;
   /** The {@link XAPI} to expose globally. */
   api?: XAPI;
   /** The {@link @empathyco/x-bus#XBus} used in the {@link XPlugin}. */
   bus: XBus<XEventsTypes, WireMetadata>;
   /** The installed {@link XPlugin} instance. */
-  plugin: PluginObject<XPluginOptions>;
+  plugin: Plugin<XPluginOptions>;
 }
diff --git a/packages/x-components/src/x-installer/x-installer/x-installer.ts b/packages/x-components/src/x-installer/x-installer/x-installer.ts
index 611e09d2a1..5e03672ee7 100644
--- a/packages/x-components/src/x-installer/x-installer/x-installer.ts
+++ b/packages/x-components/src/x-installer/x-installer/x-installer.ts
@@ -1,5 +1,5 @@
 import { forEach, isFunction } from '@empathyco/x-utils';
-import Vue, { PluginObject, VueConstructor } from 'vue';
+import { App, createApp, reactive, Plugin } from 'vue';
 import { XBus } from '@empathyco/x-bus';
 import { XPlugin } from '../../plugins/x-plugin';
 import { XPluginOptions } from '../../plugins/x-plugin.types';
@@ -7,7 +7,7 @@ import { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';
 import { BaseXAPI } from '../api/base-api';
 import { WireMetadata, XEventsTypes } from '../../wiring/index';
 import { bus } from '../../plugins/x-bus';
-import { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';
+import { InitWrapper, InstallXOptions } from './types';
 
 declare global {
   interface Window {
@@ -88,6 +88,7 @@ declare global {
  * @public
  */
 export class XInstaller {
+  private app!: App;
   private api?: XAPI;
 
   /**
@@ -154,7 +155,7 @@ export class XInstaller {
    *
    * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,
    * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}
-   * and the Vue App used in the application. Else, a rejected promise is returned.
+   * and the Vue application instance. Else, a rejected promise is returned.
    *
    * @public
    */
@@ -162,17 +163,18 @@ export class XInstaller {
   init(): Promise<InitWrapper | void>;
   async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {
     if (snippetConfig) {
-      this.snippetConfig = this.normaliseSnippetConfig(snippetConfig);
+      this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));
+      this.createApp();
       const bus = this.createBus();
       const pluginOptions = this.getPluginOptions();
       const plugin = this.installPlugin(pluginOptions, bus);
-      const extraPlugins = await this.installExtraPlugins(bus);
-      const app = this.createApp(extraPlugins);
+      await this.installExtraPlugins(bus);
       this.api?.setBus(bus);
+      this.app.mount(this.getMountingTarget(this.options.domElement));
 
       return {
         api: this.api,
-        app,
+        app: this.app,
         bus,
         plugin
       };
@@ -212,22 +214,6 @@ export class XInstaller {
     return this.options.bus ?? bus;
   }
 
-  /**
-   * This method returns the VueConstructor to use to create the App instance.
-   * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then
-   * returns the default Vue.
-   *
-   * @remarks The purpose of this option is mainly the testing. In a test we can use this option
-   * to pass the local vue instance created by `createLocalVue` method.
-   *
-   * @returns VueConstructor - The vue constructor to create the App instance.
-   *
-   * @internal
-   */
-  protected getVue(): VueConstructor {
-    return this.options.vue ?? Vue;
-  }
-
   /**
    * Creates and install the Vue Plugin. If `plugin` parameter is passed in the
    * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is
@@ -237,59 +223,43 @@ export class XInstaller {
    * of the plugin.
    * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.
    *
-   * @returns PluginObject<XPluginOption> - The plugin instance.
+   * @returns Plugin<XPluginOption> - The plugin instance.
    * @internal
    */
   protected installPlugin(
     pluginOptions: XPluginOptions,
     bus: XBus<XEventsTypes, WireMetadata>
-  ): PluginObject<XPluginOptions> {
+  ): Plugin<XPluginOptions> {
     const plugin = this.options.plugin ?? new XPlugin(bus);
-    const vue = this.getVue();
-    vue.use(plugin, pluginOptions);
+    this.app.use(plugin, pluginOptions);
     return plugin;
   }
 
   /**
-   * Install more plugins to Vue defined by the user.
+   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}
+   * to allow the user to install more plugins to the App.
    *
    * @param bus - The events bus used in the application.
-   * @returns The arguments from the plugins installation to be used in Vue's constructor.
+   * @returns An empty promise.
    * @internal
    */
-  protected installExtraPlugins(
-    bus: XBus<XEventsTypes, WireMetadata>
-  ): Promise<VueConstructorPartialArgument> {
-    const vue = this.getVue();
+  protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {
     return Promise.resolve(
-      this.options.installExtraPlugins?.({ vue, snippet: this.snippetConfig!, bus })
+      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })
     );
   }
 
   /**
-   * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue
-   * application is created using that app.
-   *
-   * @param extraPlugins - Vue plugins initialisation data.
-   * @returns The Created Vue application or undefined if not created.
+   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},
+   * then a new Vue application is created using that component as root.
    *
    * @internal
    */
-  protected createApp(extraPlugins: VueConstructorPartialArgument): Vue | undefined {
-    if (this.options.app !== undefined) {
-      const vue = this.getVue();
-      const app = new vue({
-        ...extraPlugins,
-        ...this.options.vueOptions,
-        provide: {
-          snippetConfig: (this.snippetConfig = vue.observable(this.snippetConfig))
-        },
-        store: this.options.store,
-        el: this.getMountingTarget(this.options.domElement),
-        render: h => h(this.options.app)
-      });
-      this.options.onCreateApp?.(app);
-      return app;
+  protected createApp(): void {
+    if (this.options.rootComponent !== undefined) {
+      this.app = createApp(this.options.rootComponent);
+      this.app.provide('snippetConfig', this.snippetConfig);
+      this.options.onCreateApp?.(this.app);
     }
   }
 
@@ -353,7 +323,7 @@ export class XInstaller {
       return;
     }
     forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {
-      this.getVue().set(this.snippetConfig!, name, value);
+      this.snippetConfig![name] = value;
     });
   }
 
diff --git a/packages/x-components/src/x-modules/device/components/__tests__/device-detector.spec.ts b/packages/x-components/src/x-modules/device/components/__tests__/device-detector.spec.ts
index 636b518691..99752092a6 100644
--- a/packages/x-components/src/x-modules/device/components/__tests__/device-detector.spec.ts
+++ b/packages/x-components/src/x-modules/device/components/__tests__/device-detector.spec.ts
@@ -1,14 +1,12 @@
-import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { XDummyBus } from '../../../../__tests__/bus.dummy';
 import { installNewXPlugin } from '../../../../__tests__/utils';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { RootXStoreState } from '../../../../store/store.types';
-import { deviceXModule } from '../../x-module';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
 import DeviceDetector from '../device-detector.vue';
 
+const metadata = { location: 'none', moduleName: 'device', replaceable: true };
+
 /**
  * Renders the {@link DeviceDetector} component, exposing a basic API for testing.
  *
@@ -16,47 +14,40 @@ import DeviceDetector from '../device-detector.vue';
  * @returns The API for testing the {@link DeviceDetector} component.
  */
 async function renderDeviceDetector({
-  force,
+  force = '',
   throttleMs = 30,
   initialWidth = 1024,
   breakpoints = {
     mobile: 600,
+    tablet: 1000,
     desktop: Number.POSITIVE_INFINITY
   }
-}: RenderDeviceDetectorOptions = {}): Promise<RenderDeviceDetectorAPI> {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store = new Store<DeepPartial<RootXStoreState>>({});
-  XPlugin.resetInstance();
-
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(deviceXModule);
-
+} = {}) {
   Object.assign(window, { innerWidth: initialWidth });
+  const xBus = new XDummyBus();
+  const emitSpy = jest.spyOn(xBus, 'emit');
+
   const wrapper = mount(DeviceDetector, {
-    store,
-    localVue,
-    propsData: {
+    props: {
       breakpoints,
       throttleMs,
       force
-    }
+    },
+    global: { plugins: [installNewXPlugin({}, xBus)] }
   });
 
   await nextTick();
 
   return {
     wrapper,
-    resize(width) {
+    emitSpy,
+    resize: (width: any) => {
       Object.assign(window, { innerWidth: width });
       window.dispatchEvent(new UIEvent('resize'));
     },
-    waitForThrottle() {
+    waitForThrottle: () => {
       jest.advanceTimersByTime(throttleMs);
       return nextTick();
-    },
-    getDevice() {
-      return XPlugin.store.state.x.device.name;
     }
   };
 }
@@ -71,7 +62,9 @@ describe('testing DeviceDetector component', () => {
 
   it('is an x-component', async () => {
     const { wrapper } = await renderDeviceDetector();
+
     expect(isXComponent(wrapper.vm)).toEqual(true);
+    expect(getXComponentXModuleName(wrapper.vm)).toEqual('device');
   });
 
   it('belongs to the `device` x-module', async () => {
@@ -81,7 +74,7 @@ describe('testing DeviceDetector component', () => {
   });
 
   it('detects the device with the provided breakpoints', async () => {
-    const { resize, getDevice, waitForThrottle } = await renderDeviceDetector({
+    const { resize, emitSpy, waitForThrottle } = await renderDeviceDetector({
       initialWidth: 600,
       breakpoints: {
         // Intentionally unordered breakpoints
@@ -91,21 +84,21 @@ describe('testing DeviceDetector component', () => {
       }
     });
 
-    expect(getDevice()).toBe('mobile');
+    expect(emitSpy).toHaveBeenLastCalledWith('DeviceProvided', 'mobile', metadata);
 
     resize(601);
     // The resize should be throttled, so no change should happen yet
-    expect(getDevice()).toBe('mobile');
+    expect(emitSpy).toHaveBeenLastCalledWith('DeviceProvided', 'mobile', metadata);
     await waitForThrottle();
-    expect(getDevice()).toBe('tablet');
+    expect(emitSpy).toHaveBeenLastCalledWith('DeviceProvided', 'tablet', metadata);
 
     resize(1001);
     await waitForThrottle();
-    expect(getDevice()).toBe('desktop');
+    expect(emitSpy).toHaveBeenLastCalledWith('DeviceProvided', 'desktop', metadata);
   });
 
   it('allows to force a device', async () => {
-    const { resize, getDevice, waitForThrottle } = await renderDeviceDetector({
+    const { resize, emitSpy, waitForThrottle } = await renderDeviceDetector({
       force: 'not-standard-device',
       initialWidth: 600,
       breakpoints: {
@@ -115,40 +108,10 @@ describe('testing DeviceDetector component', () => {
       }
     });
 
-    expect(getDevice()).toBe('not-standard-device');
+    expect(emitSpy).toHaveBeenLastCalledWith('DeviceProvided', 'not-standard-device', metadata);
 
     resize(1001);
     await waitForThrottle();
-    expect(getDevice()).toBe('not-standard-device');
+    expect(emitSpy).toHaveBeenLastCalledWith('DeviceProvided', 'not-standard-device', metadata);
   });
 });
-
-interface RenderDeviceDetectorOptions {
-  /** The {@link DeviceDetector.force } prop. */
-  force?: string;
-  /** The {@link DeviceDetector.throttleMs } prop. */
-  throttleMs?: number;
-  /** The {@link DeviceDetector.breakpoints } prop. */
-  breakpoints?: Record<string, number>;
-  /** The initial width of the window. */
-  initialWidth?: number;
-}
-
-interface RenderDeviceDetectorAPI {
-  /** Test wrapper of the {@link DeviceDetector} instance. */
-  wrapper: Wrapper<Vue>;
-  /** Retrieves the detected device. */
-  getDevice: () => string | null;
-  /**
-   * Resizes the window to the provided width.
-   *
-   * @param width - The new window width.
-   */
-  resize: (width: number) => void;
-  /**
-   * Waits for the throttle time to complete.
-   *
-   * @returns A promise that resolves after the throttle has completed.
-   */
-  waitForThrottle: () => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/device/components/device-detector.vue b/packages/x-components/src/x-modules/device/components/device-detector.vue
index 5428c671c1..6a6bceb930 100644
--- a/packages/x-components/src/x-modules/device/components/device-detector.vue
+++ b/packages/x-components/src/x-modules/device/components/device-detector.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
   import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';
-  import GlobalEvents from 'vue-global-events';
+  import { GlobalEvents } from 'vue-global-events';
   import { throttle } from '../../../utils/throttle';
   import { deviceXModule } from '../x-module';
   import { useXBus } from '../../../composables/use-x-bus';
diff --git a/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts b/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts
index a0efee4fcb..e294705a93 100644
--- a/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts
+++ b/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts
@@ -15,8 +15,6 @@ function render({
       </template>
     </Empathize>`
 } = {}) {
-  installNewXPlugin();
-
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
@@ -27,9 +25,12 @@ function render({
     },
     {
       attachTo: parent,
-      propsData: {
+      props: {
         eventsToOpenEmpathize,
         eventsToCloseEmpathize
+      },
+      global: {
+        plugins: [installNewXPlugin()]
       }
     }
   );
diff --git a/packages/x-components/src/x-modules/empathize/components/empathize.vue b/packages/x-components/src/x-modules/empathize/components/empathize.vue
index 4d1b83828f..9d68ec39e3 100644
--- a/packages/x-components/src/x-modules/empathize/components/empathize.vue
+++ b/packages/x-components/src/x-modules/empathize/components/empathize.vue
@@ -17,9 +17,8 @@
 
 <script lang="ts">
   import { defineComponent, PropType, ref } from 'vue';
-  import { NoElement } from '../../../components/no-element';
-  import { useDebounce } from '../../../composables/use-debounce';
-  import { use$x } from '../../../composables/use-$x';
+  import { NoAnimation } from '../../../components';
+  import { use$x, useDebounce } from '../../../composables';
   import { AnimationProp } from '../../../types';
   import { XEvent } from '../../../wiring';
   import { empathizeXModule } from '../x-module';
@@ -34,7 +33,6 @@
   export default defineComponent({
     name: 'Empathize',
     xModule: empathizeXModule.name,
-    components: { NoElement },
     props: {
       /** Array of {@link XEvent} to open the empathize. */
       eventsToOpenEmpathize: {
@@ -54,7 +52,7 @@
       /** Animation component that will be used to animate the empathize. */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       }
     },
     setup(props) {
diff --git a/packages/x-components/src/x-modules/experience-controls/components/__tests__/experience-controls.spec.ts b/packages/x-components/src/x-modules/experience-controls/components/__tests__/experience-controls.spec.ts
index d3ac544a25..70482e7e34 100644
--- a/packages/x-components/src/x-modules/experience-controls/components/__tests__/experience-controls.spec.ts
+++ b/packages/x-components/src/x-modules/experience-controls/components/__tests__/experience-controls.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { XPlugin } from '../../../../plugins/index';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { experienceControlsXModule } from '../../x-module';
@@ -7,11 +6,10 @@ import { getXComponentXModuleName, isXComponent } from '../../../../components/i
 import ExperienceControls from '../experience-controls.vue';
 
 function renderExperienceControls(): RenderExperienceControlsApi {
-  const [, localVue] = installNewXPlugin();
   XPlugin.registerXModule(experienceControlsXModule);
 
   const wrapper = mount(ExperienceControls, {
-    localVue
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
@@ -26,9 +24,8 @@ describe('testing experience controls component', () => {
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('experienceControls');
   });
 
-  // eslint-disable-next-line max-len
   it('listens to the event ExperienceControlsEventsChanged and emits the events on the payload', () => {
-    const { wrapper } = renderExperienceControls();
+    renderExperienceControls();
 
     const eventsFromExperienceControls = {
       ExtraParamsProvided: {
@@ -38,12 +35,12 @@ describe('testing experience controls component', () => {
     };
 
     const extraParamsProvidedListener = jest.fn();
-    wrapper.vm.$x.on('ExtraParamsProvided').subscribe(extraParamsProvidedListener);
+    XPlugin.bus.on('ExtraParamsProvided').subscribe(extraParamsProvidedListener);
 
     const sortChangedListener = jest.fn();
-    wrapper.vm.$x.on('SortChanged').subscribe(sortChangedListener);
+    XPlugin.bus.on('SortChanged').subscribe(sortChangedListener);
 
-    wrapper.vm.$x.emit('ExperienceControlsEventsChanged', eventsFromExperienceControls);
+    XPlugin.bus.emit('ExperienceControlsEventsChanged', eventsFromExperienceControls);
 
     expect(extraParamsProvidedListener).toHaveBeenCalledTimes(1);
     expect(extraParamsProvidedListener).toHaveBeenCalledWith({
@@ -57,5 +54,5 @@ describe('testing experience controls component', () => {
 
 interface RenderExperienceControlsApi {
   /** The wrapper for the experience controls component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/x-modules/experience-controls/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/experience-controls/store/__tests__/actions.spec.ts
index 0c058d79de..258059309b 100644
--- a/packages/x-components/src/x-modules/experience-controls/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/experience-controls/store/__tests__/actions.spec.ts
@@ -1,5 +1,4 @@
-import Vuex from 'vuex';
-import { createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
 import { getExperienceControlsStub } from '../../../../__stubs__/experience-controls-stubs.factory';
 import { createExperienceControlsStore, resetExperienceControlsStateWith } from './utils';
@@ -11,11 +10,15 @@ describe('testing experience controls module actions', () => {
     experienceControls: mockedResponse
   });
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
   const store = createExperienceControlsStore();
-  installNewXPlugin({ adapter, store }, localVue);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   beforeEach(() => {
     resetExperienceControlsStateWith(store);
diff --git a/packages/x-components/src/x-modules/experience-controls/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/experience-controls/store/__tests__/getters.spec.ts
index 3cd5e9c8db..b135d7303f 100644
--- a/packages/x-components/src/x-modules/experience-controls/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/experience-controls/store/__tests__/getters.spec.ts
@@ -1,12 +1,7 @@
-import Vuex from 'vuex';
 import { ExperienceControlsRequest } from '@empathyco/x-types';
-import { createLocalVue } from '@vue/test-utils';
 import { createExperienceControlsStore, resetExperienceControlsStateWith } from './utils';
 
 describe('testing experience controls module getters', () => {
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false;
-  localVue.use(Vuex);
   const store = createExperienceControlsStore();
 
   beforeEach(() => {
diff --git a/packages/x-components/src/x-modules/experience-controls/store/module.ts b/packages/x-components/src/x-modules/experience-controls/store/module.ts
index 7daf294de9..8c3475399e 100644
--- a/packages/x-components/src/x-modules/experience-controls/store/module.ts
+++ b/packages/x-components/src/x-modules/experience-controls/store/module.ts
@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-import Vue from 'vue';
 import { setStatus } from '../../../store/utils/status-store.utils';
 import {
   cancelFetchAndSaveControls,
@@ -27,10 +26,10 @@ export const experienceControlsXStoreModule: ExperienceControlsXStoreModule = {
   },
   mutations: {
     setControls(state, controls) {
-      Vue.set(state, 'controls', controls);
+      state.controls = controls;
     },
     setEvents(state, events) {
-      Vue.set(state, 'events', events);
+      state.events = events;
     },
     setParams(state, params) {
       state.params = params;
diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
index a226e19003..8391b3eafd 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
@@ -1,6 +1,5 @@
 import { Dictionary } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components';
 import { XPlugin } from '../../../../plugins';
@@ -11,14 +10,15 @@ import ExtraParams from '../extra-params.vue';
 describe('testing extra params component', () => {
   function renderExtraParams(values: Dictionary<unknown>): RenderExtraParamsApi {
     XPlugin.resetInstance();
-    const [, localVue] = installNewXPlugin();
     XPlugin.registerXModule(extraParamsXModule);
 
     const wrapper = mount(ExtraParams, {
-      propsData: {
+      props: {
         values
       },
-      localVue
+      global: {
+        plugins: [installNewXPlugin()]
+      }
     });
 
     return {
@@ -36,7 +36,7 @@ describe('testing extra params component', () => {
     const { wrapper } = renderExtraParams({ warehouse: 1234 });
     const extraParamsProvidedCallback = jest.fn();
 
-    wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 1234 },
@@ -56,5 +56,5 @@ describe('testing extra params component', () => {
 
 interface RenderExtraParamsApi {
   /** The wrapper for the extra params component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts
index 07e2471fc0..7d72cbf9e1 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts
@@ -8,21 +8,21 @@ import { extraParamsXModule } from '../../x-module';
 import RenderlessExtraParam from '../renderless-extra-param.vue';
 import { resetXExtraParamStateWith } from './utils';
 
-function render({
-  template = `<RenderlessExtraParam :name="name" />`,
-  name = 'warehouse',
-  params = {}
-} = {}) {
-  installNewXPlugin({ initialXModules: [extraParamsXModule] });
-  resetXExtraParamStateWith(XPlugin.store, { params });
-
-  const wrapper = mount({
-    template,
-    components: {
-      RenderlessExtraParam
+function render({ template = `<RenderlessExtraParam :name="name" />`, name = 'warehouse' } = {}) {
+  const wrapper = mount(
+    {
+      template,
+      components: {
+        RenderlessExtraParam
+      },
+      data: () => ({ name })
     },
-    data: () => ({ name })
-  });
+    {
+      global: {
+        plugins: [installNewXPlugin({ initialXModules: [extraParamsXModule] })]
+      }
+    }
+  );
 
   return {
     wrapper: wrapper.findComponent(RenderlessExtraParam)
@@ -39,10 +39,10 @@ describe('testing RenderlessExtraParam component', () => {
 
   it("doesn't emit ExtraParamsProvided event when the component receives a default value if it's in the store", () => {
     const extraParamsProvidedCallback = jest.fn();
-    render({ params: { warehouse: 1234 } });
-
+    render();
     XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
+    resetXExtraParamStateWith(XPlugin.store, { params: { warehouse: 1234 } });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(0);
   });
 
@@ -58,8 +58,7 @@ describe('testing RenderlessExtraParam component', () => {
     XPlugin.bus.on('UserChangedExtraParams', true).subscribe(userChangedExtraParamsCallback);
 
     expect(userChangedExtraParamsCallback).toHaveBeenCalledTimes(0);
-
-    wrapper.find(getDataTestSelector('custom-slot')).element.click();
+    wrapper.find(getDataTestSelector('custom-slot')).trigger('click');
 
     expect(userChangedExtraParamsCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>(
       {
diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts
index ca0b628a6e..fd231a23ff 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts
@@ -1,11 +1,10 @@
 import { Dictionary } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { reactive, nextTick } from 'vue';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components';
 import { XPlugin } from '../../../../plugins';
 import { WirePayload } from '../../../../wiring';
-import { extraParamsXModule } from '../../x-module';
 import SnippetConfigExtraParams from '../snippet-config-extra-params.vue';
 import { SnippetConfig } from '../../../../x-installer/api/api.types';
 
@@ -14,10 +13,7 @@ describe('testing snippet config extra params component', () => {
     values,
     excludedExtraParams
   }: RenderSnippetConfigExtraParamsOptions = {}): RenderSnippetConfigExtraParamsApi {
-    XPlugin.resetInstance();
-    const [, localVue] = installNewXPlugin();
-    XPlugin.registerXModule(extraParamsXModule);
-    const snippetConfig = Vue.observable({ warehouse: 1234, callbacks: {} });
+    const snippetConfig = reactive({ warehouse: 1234, callbacks: {} });
 
     const wrapper = mount(
       {
@@ -35,8 +31,10 @@ describe('testing snippet config extra params component', () => {
         }
       },
       {
-        localVue,
-        propsData: {
+        global: {
+          plugins: [installNewXPlugin()]
+        },
+        props: {
           values,
           excludedExtraParams
         }
@@ -45,19 +43,20 @@ describe('testing snippet config extra params component', () => {
 
     function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
       Object.assign(snippetConfig, newValue);
-      return localVue.nextTick();
+      return nextTick();
     }
 
     return {
-      wrapper: wrapper.findComponent(SnippetConfigExtraParams),
+      wrapper,
       setSnippetConfig
     };
   }
 
   it('is an XComponent which has an XModule', () => {
     const { wrapper } = renderSnippetConfigExtraParams();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(wrapper.vm)).toEqual('extraParams');
+    const component = wrapper.findComponent(SnippetConfigExtraParams);
+    expect(isXComponent(component.vm)).toEqual(true);
+    expect(getXComponentXModuleName(component.vm)).toEqual('extraParams');
   });
 
   // eslint-disable-next-line max-len
@@ -65,7 +64,7 @@ describe('testing snippet config extra params component', () => {
     const { wrapper, setSnippetConfig } = renderSnippetConfigExtraParams();
     const extraParamsProvidedCallback = jest.fn();
 
-    wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload<Dictionary<unknown>>]>(
       1,
@@ -95,11 +94,11 @@ describe('testing snippet config extra params component', () => {
 
   // eslint-disable-next-line max-len
   it('emits the ExtraParamsProvided event with the values from the snippet config and the extra params', () => {
-    const { wrapper } = renderSnippetConfigExtraParams({ values: { scope: 'mobile' } });
+    renderSnippetConfigExtraParams({ values: { scope: 'mobile' } });
 
     const extraParamsProvidedCallback = jest.fn();
 
-    wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload<Dictionary<unknown>>]>(
       1,
@@ -111,10 +110,10 @@ describe('testing snippet config extra params component', () => {
 
   // eslint-disable-next-line max-len
   it('does not emit ExtraParamsProvided when any no extra params in the snippet config changes', async () => {
-    const { wrapper, setSnippetConfig } = renderSnippetConfigExtraParams();
+    const { setSnippetConfig } = renderSnippetConfigExtraParams();
     const extraParamsProvidedCallback = jest.fn();
 
-    wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload<Dictionary<unknown>>]>(
       1,
@@ -123,14 +122,18 @@ describe('testing snippet config extra params component', () => {
       })
     );
 
-    await setSnippetConfig({ uiLang: 'es' });
+    await setSnippetConfig({ warehouse: 1234 });
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1);
 
+    await setSnippetConfig({ uiLang: 'es' });
+
+    expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2);
+
     await setSnippetConfig({ warehouse: 45678 });
 
     expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload<Dictionary<unknown>>]>(
-      2,
+      3,
       expect.objectContaining({
         eventPayload: { warehouse: 45678 }
       })
@@ -138,10 +141,10 @@ describe('testing snippet config extra params component', () => {
   });
 
   it('not includes the callback configuration as extra params', () => {
-    const { wrapper } = renderSnippetConfigExtraParams();
+    renderSnippetConfigExtraParams();
     const extraParamsProvidedCallback = jest.fn();
 
-    wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload<Dictionary<unknown>>]>(
       1,
@@ -152,7 +155,7 @@ describe('testing snippet config extra params component', () => {
   });
 
   it('allows to configure excluded params', () => {
-    const { wrapper } = renderSnippetConfigExtraParams({
+    renderSnippetConfigExtraParams({
       values: {
         xEngineId: 'motive',
         currency: 'EUR'
@@ -161,7 +164,7 @@ describe('testing snippet config extra params component', () => {
     });
 
     const extraParamsProvidedCallback = jest.fn();
-    wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload<Dictionary<unknown>>]>(
       1,
@@ -188,7 +191,7 @@ interface RenderSnippetConfigExtraParamsOptions {
 
 interface RenderSnippetConfigExtraParamsApi {
   /** The wrapper for the snippet config component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Helper method to change the snippet config. */
   setSnippetConfig: (newSnippetConfig: Dictionary<unknown>) => void | Promise<void>;
 }
diff --git a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
index 4d96cddc97..14d79c2cbf 100644
--- a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Dictionary } from '@empathyco/x-utils';
-  import { defineComponent, PropType, watch } from 'vue';
+  import { ComputedRef, defineComponent, PropType, watch } from 'vue';
   import { extraParamsXModule } from '../x-module';
   import { use$x } from '../../../composables/use-$x';
   import { useState } from '../../../composables/use-state';
@@ -22,7 +22,7 @@
       }
     },
     setup(props) {
-      const { params } = useState('extraParams', ['params']);
+      const params: ComputedRef<Dictionary> = useState('extraParams', ['params']).params;
       const $x = use$x();
 
       $x.emit('ExtraParamsInitialized', { ...props.values });
diff --git a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
index a680dff9e0..e298f8a0f0 100644
--- a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { computed, defineComponent, h } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { extraParamsXModule } from '../x-module';
   import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
@@ -26,7 +26,7 @@
       const stateParams = useState('extraParams', ['params']).params;
 
       /** It returns the value of the extra param from the store. */
-      const value = computed(() => stateParams.value[props.name]);
+      const extraParam = computed(() => stateParams.value[props.name]);
 
       /**
        * It sets the new value to the store.
@@ -37,7 +37,7 @@
         xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
       }
 
-      return () => slots.default?.({ value, updateValue })[0] ?? h();
+      return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts
index a6f4ea811d..5778c81152 100644
--- a/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts
@@ -1,8 +1,8 @@
 import { Facet } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { Store } from 'vuex';
 import {
   createHierarchicalFacetStub,
   createSimpleFacetStub
@@ -43,13 +43,7 @@ function renderClearFilters({
     ])
   };
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store: Store<DeepPartial<RootXStoreState>> = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(facetsXModule);
-
-  resetXFacetsStateWith(store, facets);
   const wrapper = mount(
     {
       components: {
@@ -59,11 +53,16 @@ function renderClearFilters({
       props: ['facetsIds']
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [facetsXModule] })]
+      },
       store
     }
   );
 
+  XPlugin.registerXModule(facetsXModule);
+  resetXFacetsStateWith(store, facets);
+
   const clearFiltersWrapper = wrapper.findComponent(ClearFilters);
 
   return {
@@ -71,11 +70,11 @@ function renderClearFilters({
     clearFiltersWrapper,
     setCategoryFacetFiltersAsSelected() {
       facets.category.filters.forEach(filter => DefaultFacetsService.instance.select(filter));
-      return localVue.nextTick();
+      return nextTick();
     },
     setFacetsIds(facetsIds) {
       wrapper.setProps({ facetsIds });
-      return localVue.nextTick();
+      return nextTick();
     }
   };
 }
@@ -154,7 +153,7 @@ describe('testing ClearFilters component', () => {
     const listenerClearFilterFacets = jest.fn();
     const facetsIds = ['category'];
     const { wrapper, setCategoryFacetFiltersAsSelected, setFacetsIds } = renderClearFilters();
-    wrapper.vm.$x.on('UserClickedClearAllFilters', true).subscribe(listenerClearFilterFacets);
+    XPlugin.bus.on('UserClickedClearAllFilters', true).subscribe(listenerClearFilterFacets);
 
     await setCategoryFacetFiltersAsSelected();
     await setFacetsIds(facetsIds);
@@ -176,7 +175,7 @@ describe('testing ClearFilters component', () => {
   it('emits UserClickedClearAllFilters event', async () => {
     const listenerClearFilter = jest.fn();
     const { wrapper, setCategoryFacetFiltersAsSelected } = renderClearFilters();
-    wrapper.vm.$x.on('UserClickedClearAllFilters', true).subscribe(listenerClearFilter);
+    XPlugin.bus.on('UserClickedClearAllFilters', true).subscribe(listenerClearFilter);
 
     await setCategoryFacetFiltersAsSelected();
     wrapper.trigger('click');
@@ -202,7 +201,7 @@ interface RenderFiltersOptions {
 
 interface RenderFiltersAPI {
   /** The `clearFilters` wrapper component. */
-  clearFiltersWrapper: Wrapper<Vue>;
+  clearFiltersWrapper: VueWrapper;
   /**
    * Change value property "selected" of some specifics filters.
    *
@@ -216,5 +215,5 @@ interface RenderFiltersAPI {
    */
   setFacetsIds: (facetsIds: Array<Facet['id']>) => Promise<void>;
   /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
index 50ea5e8915..a90cd7c61f 100644
--- a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
@@ -1,6 +1,5 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import Vuex from 'vuex';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick, reactive, defineComponent, h, inject } from 'vue'; // Correct imports
 import { Dictionary } from '@empathyco/x-utils';
 import { createRawFilters } from '../../../../utils/filters';
 import { baseSnippetConfig } from '../../../../views/base-config';
@@ -12,28 +11,23 @@ function renderPreselectedFilters({
   snippetFilters
 }: RenderPreselectedFiltersOptions = {}): RenderPreselectedFiltersAPI {
   const emit = jest.spyOn(bus, 'emit');
-  const localVue = createLocalVue();
-  const snippetConfig = Vue.observable({ ...baseSnippetConfig, filters: snippetFilters });
-  localVue.use(Vuex);
 
-  const wrapper = mount(PreselectedFilters as ComponentOptions<Vue>, {
-    provide: {
-      snippetConfig: snippetConfig
+  const snippetConfig = reactive({ ...baseSnippetConfig, filters: snippetFilters });
+
+  const wrapper = mount(PreselectedFilters, {
+    global: {
+      provide: {
+        snippetConfig: snippetConfig
+      }
     },
-    propsData: {
+    props: {
       filters
-    },
-    localVue,
-    mocks: {
-      emit: {
-        emit
-      }
     }
   });
 
   function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
     Object.assign(snippetConfig, newValue);
-    return localVue.nextTick();
+    return nextTick();
   }
 
   return {
@@ -150,12 +144,34 @@ describe('testing Preselected filters component', () => {
 
     // Prop filters remains the same while the provided SnippetConfig is updated with new filters
     expect(wrapper.props()).toEqual({ filters: filters });
-    expect(wrapper.vm.$options.provide).toEqual({
-      snippetConfig: { ...baseSnippetConfig, filters: newFilters }
+
+    // Create a test component to check the injected provide value
+    const TestComponent = defineComponent({
+      setup() {
+        const snippetConfig = inject('snippetConfig');
+        return { snippetConfig };
+      },
+      template: '<div id="provide-test">{{ snippetConfig.filters.join(\',\') }}</div>'
     });
 
+    // Mount the original component with TestComponent inside the slot to test provide
+    const wrapperWithTest = mount(PreselectedFilters, {
+      global: {
+        provide: {
+          snippetConfig: { ...baseSnippetConfig, filters: newFilters }
+        }
+      },
+      props: { filters },
+      slots: {
+        default: () => h(TestComponent)
+      }
+    });
+
+    // Ensure the TestComponent receives the updated filters
+    expect(wrapperWithTest.find('#provide-test').text()).toBe(newFilters.join(','));
+
     // The event is called again with the newFilters provided
-    expect(emit).toHaveBeenCalledTimes(2);
+    expect(emit).toHaveBeenCalledTimes(3);
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(newFilters),
@@ -181,7 +197,7 @@ interface RenderPreselectedFiltersAPI {
   /** Mock of the {@link XBus.emit} function. */
   emit: jest.SpyInstance;
   /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Helper method to change the snippet config. */
   setSnippetConfig: (newSnippetConfig: Dictionary<unknown>) => void | Promise<void>;
 }
diff --git a/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets-provider.spec.ts b/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets-provider.spec.ts
index cb338f6fed..49c946c07d 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets-provider.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets-provider.spec.ts
@@ -1,8 +1,8 @@
 import { Facet, Filter } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { Store } from 'vuex';
 import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
 import { installNewXPlugin } from '../../../../../__tests__/utils';
 import {
@@ -56,7 +56,7 @@ describe('testing Facets component', () => {
     expect(getStateFacets()).toEqual(stateFacets);
   });
 
-  it('renders the provided facets keeping the state facets', () => {
+  it('renders the provided facets keeping the state facets', async () => {
     const stateFacets = {
       color_facet: createSimpleFacetStub('color', createSimpleFilter => [
         createSimpleFilter('Red', false),
@@ -77,18 +77,20 @@ describe('testing Facets component', () => {
         createSimpleFilter('with stock', false)
       ])
     ];
-    const { getStateFacets } = renderFacetsProviderComponent({
-      stateFacets,
-      providedFacets
+    const { getStateFacets, facetWrapper } = renderFacetsProviderComponent({
+      stateFacets
     });
 
+    await facetWrapper.setProps({ facets: providedFacets });
+
     expect(getStateFacets()).toEqual(
       Object.assign(stateFacets, arrayToObject(providedFacets, 'id'))
     );
   });
 
   it('emits the `UserChangedSelectedFilters` event when a filter is changed', async () => {
-    const { wrapper, deselectFilters, selectFilters } = renderFacetsProviderComponent();
+    const { wrapper, facetWrapper, deselectFilters, selectFilters } =
+      renderFacetsProviderComponent();
 
     const colorFacet = createSimpleFacetStub('color', createSimpleFilter => [
       createSimpleFilter('Red', false),
@@ -102,18 +104,18 @@ describe('testing Facets component', () => {
     const [bigFilter, smallFilter] = sizeFacet.filters;
 
     // Setting facets with selected filters does not trigger UserChangedSelectedFilters
-    await wrapper.setProps({ facets: [colorFacet, sizeFacet] });
+    await facetWrapper.setProps({ facets: [colorFacet, sizeFacet] });
     expect(wrapper.emitted('UserChangedSelectedFilters')).toBeUndefined();
 
     // Selecting a filter triggers UserChangedSelectedFilters
     await selectFilters([redFilter, bigFilter]);
     let emittedEvents = wrapper.emitted('UserChangedSelectedFilters');
     expect(emittedEvents).toHaveLength(1);
-    let emittedFilters: Filter[] = emittedEvents?.[0][0];
+    let emittedFilters = emittedEvents?.[0][0] as Filter[];
     expect(areFiltersDifferent(emittedFilters, [redFilter, bigFilter, smallFilter])).toBe(false);
 
     // Modifying the prop again with selected filters does not trigger UserChangedSelectedFilters
-    await wrapper.setProps({ facets: [colorFacet, sizeFacet] });
+    await facetWrapper.setProps({ facets: [colorFacet, sizeFacet] });
     expect(wrapper.emitted('UserChangedSelectedFilters')).toHaveLength(1);
 
     await selectFilters([smallFilter]);
@@ -122,7 +124,7 @@ describe('testing Facets component', () => {
     await deselectFilters([smallFilter]);
     emittedEvents = wrapper.emitted('UserChangedSelectedFilters');
     expect(emittedEvents).toHaveLength(2);
-    emittedFilters = emittedEvents?.[1][0];
+    emittedFilters = emittedEvents?.[1][0] as Filter[];
     expect(areFiltersDifferent(emittedFilters, [])).toBe(false);
   });
 });
@@ -133,13 +135,7 @@ function renderFacetsProviderComponent({
 }: FacetsRenderOptions = {}): FacetsComponentAPI {
   resetFacetsService();
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<RootXStoreState>({});
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(facetsXModule);
-  resetXFacetsStateWith(store, stateFacets);
-
   const facetWrapper = mount(
     {
       template: '<FacetsProvider :facets="providedFacets" />',
@@ -149,17 +145,23 @@ function renderFacetsProviderComponent({
       props: ['providedFacets']
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store })]
+      },
       store,
-      propsData: {
+      props: {
         providedFacets
       }
     }
   );
+
+  XPlugin.registerXModule(facetsXModule);
+  resetXFacetsStateWith(store, stateFacets);
   const wrapper = facetWrapper.findComponent(FacetsProvider);
 
   return {
     wrapper,
+    facetWrapper,
     getStateFacets(): Record<Facet['id'], Facet> {
       return store.getters['x/facets/facets'];
     },
@@ -168,7 +170,7 @@ function renderFacetsProviderComponent({
         // The provided filters should not be mutated. That's why we search for them in the state.
         DefaultFacetsService.instance.select(getStoreFilter(store, filter.id));
       });
-      await localVue.nextTick();
+      await nextTick();
       jest.runAllTimers();
     },
     async deselectFilters(filters: Filter[]): Promise<void> {
@@ -176,7 +178,7 @@ function renderFacetsProviderComponent({
         // The provided filters should not be mutated. That's why we search for them in the state.
         DefaultFacetsService.instance.deselect(getStoreFilter(store, filter.id))
       );
-      await localVue.nextTick();
+      await nextTick();
       jest.runAllTimers();
     }
   };
@@ -219,5 +221,6 @@ interface FacetsComponentAPI {
   /**
    * The testing wrapper of the {@link FacetsProvider} component.
    */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
+  facetWrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets.spec.ts b/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets.spec.ts
index 28ac7ee8a0..ef05d5e086 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/facets/__tests__/facets.spec.ts
@@ -1,8 +1,8 @@
 import { Facet } from '@empathyco/x-types';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { DOMWrapper, mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import { Store } from 'vuex';
 import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import {
@@ -32,7 +32,8 @@ describe('testing Facets component', () => {
     expect(wrapper.find('facets').exists()).toBe(false);
   });
 
-  it('renders the state facets', () => {
+  it('renders the state facets', async () => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { getDefaultFacets, getStateFacets, getDefaultSelectedFilters } = renderFacetsComponent({
       facets: {
         color_facet: createSimpleFacetStub('color_facet', createSimpleFilter => [
@@ -45,23 +46,25 @@ describe('testing Facets component', () => {
         ])
       }
     });
+    await nextTick();
     const facetWrappers = getDefaultFacets();
     const stateFacets = getStateFacets();
     const facetLabels = stateFacets.map(facet => facet.label);
     const selectedFiltersWrappers = getDefaultSelectedFilters();
 
-    expect(facetWrappers.wrappers).toHaveLength(stateFacets.length);
-    facetWrappers.wrappers.forEach((facetWrapper: Wrapper<Vue>) => {
+    expect(facetWrappers).toHaveLength(stateFacets.length);
+    facetWrappers.forEach(facetWrapper => {
       expect(facetLabels).toContain(facetWrapper.element.innerHTML);
     });
 
-    expect(selectedFiltersWrappers.wrappers).toHaveLength(1);
-    expect(selectedFiltersWrappers.wrappers[0].text()).toEqual('Blue');
+    expect(selectedFiltersWrappers).toHaveLength(1);
+    expect(selectedFiltersWrappers[0].text()).toEqual('Blue');
   });
 
-  it('allows customizing a facet using a slot named with the facet.id', () => {
+  it('allows customizing a facet using a slot named with the facet.id', async () => {
     const customFacetId = 'color_facet';
 
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { wrapper, getDefaultFacets } = renderFacetsComponent({
       customFacetSlot: `
           <template #${toKebabCase(customFacetId)}="{ facet, selectedFilters }">
@@ -81,14 +84,17 @@ describe('testing Facets component', () => {
         ])
       }
     });
-    const customFacetWrapper = wrapper.get(getDataTestSelector('custom-facet'));
+    await nextTick();
+    const customFacetWrapper = wrapper.get(
+      getDataTestSelector('custom-facet')
+    ) as DOMWrapper<Element>;
     const customSelectedFiltersWrapper = wrapper.get(
       getDataTestSelector('custom-facet-selected-filters')
     );
 
     expect(customFacetWrapper.exists()).toBe(true);
     expect(customFacetWrapper.text()).toBe(customFacetId);
-    getDefaultFacets().wrappers.forEach(facet => {
+    getDefaultFacets().forEach(facet => {
       expect(facet.text()).not.toBe(customFacetId);
     });
     expect(customSelectedFiltersWrapper.text()).toEqual('RedBlue');
@@ -97,7 +103,7 @@ describe('testing Facets component', () => {
   it(
     'allows customizing a facet using a slot named with the facet.modelName together with' +
       'the slots with the facet.id',
-    () => {
+    async () => {
       const color_facet = createSimpleFacetStub('color_facet', createSimpleFilter => [
         createSimpleFilter('Red', true),
         createSimpleFilter('Blue', false)
@@ -123,11 +129,16 @@ describe('testing Facets component', () => {
           </template>`,
         facets: { brand_facet, color_facet }
       });
-      const facetByModelNameWrapper = wrapper.get(getDataTestSelector('facet-by-model-name'));
+      await nextTick();
+      const facetByModelNameWrapper = wrapper.get(
+        getDataTestSelector('facet-by-model-name')
+      ) as DOMWrapper<Element>;
       const selectedFiltersByModelNameWrapper = wrapper.get(
         getDataTestSelector('selected-filters-by-model-name')
       );
-      const facetByIdWrapper = wrapper.get(getDataTestSelector('facet-by-id'));
+      const facetByIdWrapper = wrapper.get(
+        getDataTestSelector('facet-by-id')
+      ) as DOMWrapper<Element>;
       const selectedFiltersByIdWrapper = wrapper.get(getDataTestSelector('selected-filters-by-id'));
 
       expect(facetByModelNameWrapper.exists()).toBe(true);
@@ -141,7 +152,8 @@ describe('testing Facets component', () => {
   );
 
   describe('filters facets based on renderableFacets prop', () => {
-    it('renders all facets when its value is omitted', () => {
+    it('renders all facets when its value is omitted', async () => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       const { getDefaultFacets } = renderFacetsComponent({
         facets: {
           color: createSimpleFacetStub('color', createSimpleFilter => [
@@ -154,15 +166,17 @@ describe('testing Facets component', () => {
           ])
         }
       });
+      await nextTick();
 
       const facetWrappers = getDefaultFacets();
       expect(facetWrappers).toHaveLength(2);
-      getDefaultFacets().wrappers.forEach(facetWrapper => {
+      getDefaultFacets().forEach(facetWrapper => {
         expect(['color', 'size']).toContain(facetWrapper.text());
       });
     });
 
-    it('renders only included facets', () => {
+    it('renders only included facets', async () => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       const { getDefaultFacets } = renderFacetsComponent({
         facets: {
           color_facet: createSimpleFacetStub('color_facet', createSimpleFilter => [
@@ -180,15 +194,16 @@ describe('testing Facets component', () => {
         },
         renderableFacets: 'color_facet'
       });
-
+      await nextTick();
       const facetWrappers = getDefaultFacets();
       expect(facetWrappers).toHaveLength(1);
-      getDefaultFacets().wrappers.forEach(facetWrapper => {
+      getDefaultFacets().forEach(facetWrapper => {
         expect(['color_facet']).toContain(facetWrapper.text());
       });
     });
 
-    it('does not render excluded facets', () => {
+    it('does not render excluded facets', async () => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       const { getDefaultFacets } = renderFacetsComponent({
         facets: {
           color: createSimpleFacetStub('color', createSimpleFilter => [
@@ -206,15 +221,16 @@ describe('testing Facets component', () => {
         },
         renderableFacets: '!color'
       });
-
+      await nextTick();
       const facetWrappers = getDefaultFacets();
       expect(facetWrappers).toHaveLength(2);
-      getDefaultFacets().wrappers.forEach(facetWrapper => {
+      getDefaultFacets().forEach(facetWrapper => {
         expect(['size', 'price']).toContain(facetWrapper.text());
       });
     });
 
-    it('renders only included facets when combining with excluded ones', () => {
+    it('renders only included facets when combining with excluded ones', async () => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       const { getDefaultFacets } = renderFacetsComponent({
         facets: {
           color: createSimpleFacetStub('color', createSimpleFilter => [
@@ -232,10 +248,10 @@ describe('testing Facets component', () => {
         },
         renderableFacets: 'color,!price'
       });
-
+      await nextTick();
       const facetWrappers = getDefaultFacets();
       expect(facetWrappers).toHaveLength(1);
-      getDefaultFacets().wrappers.forEach(facetWrapper => {
+      getDefaultFacets().forEach(facetWrapper => {
         expect(['color']).toContain(facetWrapper.text());
       });
     });
@@ -261,13 +277,8 @@ function renderFacetsComponent({
             </div>
           </template>
        </Facets>`
-}: FacetsRenderOptions = {}): FacetsComponentAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+}: FacetsRenderOptions = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(facetsXModule);
-  resetXFacetsStateWith(store, facets);
 
   const facetWrapper = mount(
     {
@@ -279,17 +290,23 @@ function renderFacetsComponent({
       template
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [facetsXModule] })]
+      },
       store,
-      propsData: {
+      props: {
         renderableFacets
       }
     }
   );
+
+  XPlugin.registerXModule(facetsXModule);
+  resetXFacetsStateWith(store, facets);
   const wrapper = facetWrapper.findComponent(Facets);
 
   return {
     wrapper,
+    facetWrapper,
     getStateFacets() {
       return Object.values(facets);
     },
@@ -309,10 +326,3 @@ interface FacetsRenderOptions {
   renderableFacets?: string;
   template?: string;
 }
-
-interface FacetsComponentAPI {
-  getDefaultFacets: () => WrapperArray<Vue>;
-  getDefaultSelectedFilters: () => WrapperArray<Vue>;
-  getStateFacets: () => Facet[];
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue b/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
index 63ab6d9000..425ce5427c 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
+++ b/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Facet, Filter, isHierarchicalFacet } from '@empathyco/x-types';
-  import { computed, defineComponent, h, PropType, Ref, ref, watch } from 'vue';
+  import { computed, defineComponent, PropType, Ref, ref, watch } from 'vue';
   import { clone } from '../../../../utils';
   import { areFiltersDifferent } from '../../../../utils/filters';
   import { GroupId } from '../../store/types';
@@ -110,14 +110,12 @@
         { immediate: true }
       );
 
-      return () => {
-        return h();
-      };
+      return () => '';
     }
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-facets-list {
     list-style-type: none;
   }
diff --git a/packages/x-components/src/x-modules/facets/components/facets/facets.vue b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
index 7cb66653b1..77e380e379 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/facets.vue
+++ b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
@@ -56,8 +56,9 @@
 <script lang="ts">
   import { Facet } from '@empathyco/x-types';
   import { Dictionary, map, objectFilter } from '@empathyco/x-utils';
-  import Vue, { computed, ComputedRef, defineComponent, PropType } from 'vue';
+  import { computed, ComputedRef, defineComponent, PropType } from 'vue';
   import { useGetter } from '../../../../composables/use-getter';
+  import { animationProp } from '../../../../utils/options-api';
   import { toKebabCase } from '../../../../utils/string';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
@@ -92,7 +93,7 @@
       alwaysVisible: Boolean,
       /** Animation component that will be used to animate the facets. */
       animation: {
-        type: [String, Object] as PropType<string | Vue>,
+        type: animationProp,
         default: 'ul'
       },
       /**
@@ -211,7 +212,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-facets-list {
     display: flex;
     flex-flow: column nowrap;
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts
index a40438712b..60726466e4 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts
@@ -1,7 +1,6 @@
-import { Facet } from '@empathyco/x-types';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
 import { installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
@@ -9,6 +8,7 @@ import { RootXStoreState } from '../../../../../store/store.types';
 import { facetsXModule } from '../../../x-module';
 import { resetXFacetsStateWith } from '../../__tests__/utils';
 import AllFilter from '../all-filter.vue';
+import { XPlugin } from '../../../../../plugins/index';
 
 /**
  * Renders the `AllFilter` component, exposing a basic API for testing.
@@ -16,19 +16,13 @@ import AllFilter from '../all-filter.vue';
  * @param options - The options to render the component with.
  * @returns The API for testing the `AllFilter` component.
  */
-function renderAllFilter({
-  template = `<AllFilter :facet="facet"></AllFilter>`
-}: RenderAllFilterOptions = {}): RenderAllFilterAPI {
+function renderAllFilter({ template = `<AllFilter :facet="facet"></AllFilter>` } = {}) {
   const facet = createSimpleFacetStub('category', createFilter => [
     createFilter('men'),
     createFilter('women')
   ]);
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<RootXStoreState>({});
-  installNewXPlugin({ store, initialXModules: [facetsXModule] }, localVue);
-  resetXFacetsStateWith(store, { category: facet });
 
   const wrapper = mount(
     {
@@ -40,26 +34,30 @@ function renderAllFilter({
     },
     {
       store,
-      localVue,
-      propsData: {
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [facetsXModule] })]
+      },
+      props: {
         facet
       }
     }
   );
 
+  resetXFacetsStateWith(store, { category: facet });
+
   const allFilterWrapper = wrapper.findComponent(AllFilter);
 
   return {
     wrapper,
     allFilterWrapper,
     facet,
-    toggleFirstFilter() {
-      wrapper.vm.$x.emit('UserClickedAFilter', store.state.x.facets.filters[facet.filters[0].id]);
-      return wrapper.vm.$nextTick();
+    toggleFirstFilter: () => {
+      XPlugin.bus.emit('UserClickedAFilter', store.state.x.facets.filters[facet.filters[0].id]);
+      return nextTick();
     },
-    clickAllFilter() {
+    clickAllFilter: () => {
       allFilterWrapper.trigger('click');
-      return wrapper.vm.$nextTick();
+      return nextTick();
     }
   };
 }
@@ -91,7 +89,7 @@ describe('testing AllFilter component', () => {
   it('emits `UserClickedAllFilter` event with the facet id as payload', async () => {
     const { wrapper, toggleFirstFilter, clickAllFilter, facet } = renderAllFilter();
     const listenerAllFilter = jest.fn();
-    wrapper.vm.$x.on('UserClickedAllFilter', true).subscribe(listenerAllFilter);
+    XPlugin.bus.on('UserClickedAllFilter', true).subscribe(listenerAllFilter);
     await toggleFirstFilter();
     expect(listenerAllFilter).toHaveBeenCalledTimes(0);
 
@@ -118,27 +116,8 @@ describe('testing AllFilter component', () => {
       template: `
         <AllFilter v-slot="{ facet }" :facet="facet" >
           Select all {{ facet.label }}
-        </AllFilter>
-      `
+        </AllFilter>`
     });
     expect(allFilterWrapper.text()).toBe(`Select all ${facet.label}`);
   });
 });
-
-interface RenderAllFilterOptions {
-  /** The template to be rendered. */
-  template?: string;
-}
-
-interface RenderAllFilterAPI {
-  /** The `AllFilter` wrapper component. */
-  allFilterWrapper: Wrapper<Vue>;
-  /** Function that clicks all filter button. */
-  clickAllFilter: () => Promise<void>;
-  /** Current facet passed as prop to the AllFilter component. */
-  facet: Facet;
-  /** Function that toggles first filter selected property. */
-  toggleFirstFilter: () => Promise<void>;
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/editable-number-range-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/editable-number-range-filter.spec.ts
index fc7b7bda50..41c2df1515 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/editable-number-range-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/editable-number-range-filter.spec.ts
@@ -1,18 +1,13 @@
-import { EditableNumberRangeFilter, RangeValue } from '@empathyco/x-types';
-import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { Ref, ref } from 'vue';
-import Vuex, { Store } from 'vuex';
-// eslint-disable-next-line max-len
+import { RangeValue } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
 import { createEditableNumberRangeFilter } from '../../../../../__stubs__/filters-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import {
   getXComponentXModuleName,
   isXComponent
 } from '../../../../../components/x-component.utils';
-import { RootXStoreState } from '../../../../../store/store.types';
-import { facetsXModule } from '../../../x-module';
-import { resetXFacetsStateWith } from '../../__tests__/utils';
+import { XPlugin } from '../../../../../plugins';
 import EditableNumberRangeFilterComponent from '../editable-number-range-filter.vue';
 
 Object.defineProperty(HTMLInputElement.prototype, 'valueAsNumber', {
@@ -33,34 +28,28 @@ function renderEditableNumberRangeFilter({
       :inputsClass="inputsClass"
     />
   `,
-  range,
-  filter = ref(createEditableNumberRangeFilter('age', range)),
+  range = { min: null, max: null } as RangeValue,
   isInstant = false,
   hasClearButton = true,
-  buttonsClass,
-  inputsClass
-}: EditableNumberRangeFilterOptions = {}): EditableNumberRangeFilterAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [facetsXModule] }, localVue);
-
-  resetXFacetsStateWith(store, {});
-  const wrapper = mount<EditableNumberRangeFilterComponent>(
+  buttonsClass = '',
+  inputsClass = ''
+} = {}) {
+  const filter = ref(createEditableNumberRangeFilter('age', range));
+
+  const wrapper = mount(
     {
       components: { EditableNumberRangeFilterComponent },
-      props: ['filter', 'isInstant', 'hasClearButton', 'buttonsClass', 'inputsClass'],
       template
     },
     {
-      propsData: {
+      data: () => ({
         filter,
         isInstant,
         hasClearButton,
         buttonsClass,
         inputsClass
-      },
-      localVue
+      }),
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
@@ -77,15 +66,13 @@ function renderEditableNumberRangeFilter({
     applyButtonWrapper,
     clearButtonWrapper,
     filter,
-    typeMin: value => {
-      minInputWrapper.setValue(value);
-      minInputWrapper.trigger('change');
-      return localVue.nextTick();
+    typeMin: async (value: any) => {
+      await minInputWrapper.setValue(value);
+      await minInputWrapper.trigger('change');
     },
-    typeMax: value => {
-      maxInputWrapper.setValue(value);
-      maxInputWrapper.trigger('change');
-      return localVue.nextTick();
+    typeMax: async (value: any) => {
+      await maxInputWrapper.setValue(value);
+      await maxInputWrapper.trigger('change');
     }
   };
 }
@@ -118,13 +105,13 @@ describe('testing BaseNumberRangeFilter component', () => {
 
   // eslint-disable-next-line max-len
   it('does not emit UserModifiedEditableNumberRangeFilter event when values are invalid', async () => {
-    const { filterWrapper, typeMin } = renderEditableNumberRangeFilter({
+    const { typeMin } = renderEditableNumberRangeFilter({
       range: { min: 1, max: 5 },
       isInstant: true
     });
 
     const listener = jest.fn();
-    filterWrapper.vm.$x.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
+    XPlugin.bus.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
 
     await typeMin(6);
     expect(listener).not.toHaveBeenCalled();
@@ -132,13 +119,13 @@ describe('testing BaseNumberRangeFilter component', () => {
 
   // eslint-disable-next-line max-len
   it('emits UserModifiedEditableNumberRangeFilter event when isInstant is true and an input is changed', async () => {
-    const { filterWrapper, typeMin, typeMax } = renderEditableNumberRangeFilter({
+    const { typeMin, typeMax } = renderEditableNumberRangeFilter({
       range: { min: 1, max: 5 },
       isInstant: true
     });
 
     const listener = jest.fn();
-    filterWrapper.vm.$x.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
+    XPlugin.bus.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
 
     await typeMin(2);
 
@@ -169,12 +156,12 @@ describe('testing BaseNumberRangeFilter component', () => {
 
   // eslint-disable-next-line max-len
   it('does not emit UserModifiedEditableNumberRangeFilter event when isInstant is false and an input is changed', async () => {
-    const { filterWrapper, typeMin, typeMax } = renderEditableNumberRangeFilter({
+    const { typeMin, typeMax } = renderEditableNumberRangeFilter({
       range: { min: 1, max: 5 }
     });
 
     const listener = jest.fn();
-    filterWrapper.vm.$x.on('UserModifiedEditableNumberRangeFilter', true).subscribe(listener);
+    XPlugin.bus.on('UserModifiedEditableNumberRangeFilter', true).subscribe(listener);
 
     await typeMin(2);
     await typeMax(5);
@@ -183,11 +170,12 @@ describe('testing BaseNumberRangeFilter component', () => {
 
   describe('clear button testing', () => {
     it('sets min and max component values to null on clear button click', () => {
-      const { filterWrapper, clearButtonWrapper, applyButtonWrapper } =
-        renderEditableNumberRangeFilter({ range: { min: 1, max: 5 } });
+      const { clearButtonWrapper, applyButtonWrapper } = renderEditableNumberRangeFilter({
+        range: { min: 1, max: 5 }
+      });
 
       const listener = jest.fn();
-      filterWrapper.vm.$x.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
+      XPlugin.bus.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
 
       clearButtonWrapper.trigger('click');
       applyButtonWrapper.trigger('click');
@@ -222,9 +210,10 @@ describe('testing BaseNumberRangeFilter component', () => {
   describe('slots testing', () => {
     it('allows to customize apply-content slot', () => {
       const { applyButtonWrapper } = renderEditableNumberRangeFilter({
-        template: `<EditableNumberRangeFilterComponent :filter="filter">
-                     <template slot="apply-content">Apply</template>
-                   </EditableNumberRangeFilterComponent>`,
+        template: `
+          <EditableNumberRangeFilterComponent :filter="filter">
+            <template #apply-content>Apply</template>
+          </EditableNumberRangeFilterComponent>`,
         range: { min: 1, max: 5 }
       });
 
@@ -233,9 +222,10 @@ describe('testing BaseNumberRangeFilter component', () => {
 
     it('allows to customize clear-content slot', () => {
       const { clearButtonWrapper } = renderEditableNumberRangeFilter({
-        template: `<EditableNumberRangeFilterComponent :filter="filter">
-                     <template slot="clear-content">Clear</template>
-                   </EditableNumberRangeFilterComponent>`,
+        template: `
+          <EditableNumberRangeFilterComponent :filter="filter">
+            <template #clear-content>Clear</template>
+          </EditableNumberRangeFilterComponent>`,
         range: { min: 1, max: 5 }
       });
 
@@ -265,40 +255,40 @@ describe('testing BaseNumberRangeFilter component', () => {
       const { filterWrapper, applyButtonWrapper, clearButtonWrapper, typeMin, typeMax } =
         renderEditableNumberRangeFilter({
           template: `
-                    <EditableNumberRangeFilterComponent
-                      :filter="filter"
-                      #default="{
-                        min,
-                        max,
-                        setMin,
-                        setMax,
-                        emitUserModifiedFilter,
-                        clearValues,
-                        hasError
-                      }"
-                    >
-                      <button @click="emitUserModifiedFilter" data-test="range-apply">
-                        ✅ Apply!
-                      </button>
-                      <button @click="clearValues" data-test="range-clear">🗑 Clear!</button>
-                      <input
-                        :value="min"
-                        @change="setMin($event.target.valueAsNumber)"
-                        data-test="range-min"
-                      />
-                      <input
-                        :value="max"
-                        @change="setMax($event.target.valueAsNumber)"
-                        data-test="range-max"
-                      />
-                      <div data-test="has-error" v-if="hasError">⚠️ Invalid range values</div>
-                    </EditableNumberRangeFilterComponent>
-                  `,
+            <EditableNumberRangeFilterComponent
+              :filter="filter"
+              #default="{
+                min,
+                max,
+                setMin,
+                setMax,
+                emitUserModifiedFilter,
+                clearValues,
+                hasError
+              }"
+            >
+              <button @click="emitUserModifiedFilter" data-test="range-apply">
+                ✅ Apply!
+              </button>
+              <button @click="clearValues" data-test="range-clear">🗑 Clear!</button>
+              <input
+                :value="min"
+                @change="setMin($event.target.valueAsNumber)"
+                data-test="range-min"
+              />
+              <input
+                :value="max"
+                @change="setMax($event.target.valueAsNumber)"
+                data-test="range-max"
+              />
+              <div data-test="has-error" v-if="hasError">⚠️ Invalid range values</div>
+            </EditableNumberRangeFilterComponent>
+          `,
           range: { min: 7, max: 4 }
         });
 
       const listener = jest.fn();
-      filterWrapper.vm.$x.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
+      XPlugin.bus.on('UserModifiedEditableNumberRangeFilter').subscribe(listener);
 
       expect(applyButtonWrapper.text()).toBe('✅ Apply!');
       expect(clearButtonWrapper.text()).toBe('🗑 Clear!');
@@ -336,42 +326,3 @@ describe('testing BaseNumberRangeFilter component', () => {
     });
   });
 });
-
-interface EditableNumberRangeFilterOptions {
-  /**
-   * The {@link @empathyco/x-types#EditableNumberRangeFilter | EditableNumberRangeFilter} object
-   * to be passed to the component.
-   */
-  filter?: Ref<EditableNumberRangeFilter>;
-  /** `hasClearButton` property to init the component. */
-  hasClearButton?: boolean;
-  /** `isInstant` property to init the component. */
-  isInstant?: boolean;
-  /** The {@link @empathyco/x-types#RangeValue | RangeValue} object to init the filter. */
-  range?: RangeValue;
-  /** The class to be applied to the buttons. */
-  buttonsClass?: string;
-  /** The class to be applied to the inputs. */
-  inputsClass?: string;
-  /** The template to be rendered. */
-  template?: string;
-}
-
-interface EditableNumberRangeFilterAPI {
-  /** Apply button wrapper. */
-  applyButtonWrapper: Wrapper<Vue>;
-  /** Clear button wrapper. */
-  clearButtonWrapper: Wrapper<Vue>;
-  /** The filter passed to the component. */
-  filter: Ref<EditableNumberRangeFilter>;
-  /** Filter component wrapper. */
-  filterWrapper: Wrapper<Vue>;
-  /** Max input element wrapper. */
-  maxInputWrapper: Wrapper<Vue>;
-  /** Min input element wrapper. */
-  minInputWrapper: Wrapper<Vue>;
-  /** It sets max value and triggers change event in the wrapper. */
-  typeMax: (value: number) => Promise<any>;
-  /** It sets min value and triggers change event in the wrapper. */
-  typeMin: (value: number) => Promise<any>;
-}
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
index aff85c72e7..1481fc1a3a 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
@@ -1,12 +1,11 @@
 import { HierarchicalFilter as HierarchicalFilterModel } from '@empathyco/x-types';
-import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
 import { createHierarchicalFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import { XPlugin } from '../../../../../plugins/x-plugin';
 import { flatHierarchicalFilters } from '../../../utils';
-import { facetsXModule } from '../../../x-module';
-import { resetXFacetsStateWith } from '../../__tests__/utils';
 import HierarchicalFilter from '../hierarchical-filter.vue';
 
 const metadata = {
@@ -38,70 +37,61 @@ function render({
   filterItemClass = '',
   clickEvents = {}
 } = {}) {
-  const [, localVue] = installNewXPlugin({ initialXModules: [facetsXModule] });
-  const store = XPlugin.store;
-  resetXFacetsStateWith(store, { category: facet });
+  const facetRef = ref(facet);
+
   const wrapper = mount(
     {
       components: { HierarchicalFilter },
-      template,
-      computed: {
-        filter() {
-          return store.state.x.facets.filters['category:root'];
-        },
-        clickEvents() {
-          return clickEvents;
-        }
-      },
-      data() {
-        return {
-          childrenFiltersClass,
-          filterItemClass
-        };
-      }
+      template
     },
     {
-      store,
-      localVue
+      computed: {
+        filter: () => facetRef.value.filters[0]
+      },
+      data: () => ({
+        childrenFiltersClass,
+        filterItemClass,
+        clickEvents
+      }),
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
   const hierarchicalFilterWrapper = wrapper.findComponent(HierarchicalFilter);
-
-  const getFilterWrapper = (): Wrapper<Vue> =>
-    hierarchicalFilterWrapper.find(getDataTestSelector('filter'));
-
-  const getFiltersWrappers = (): WrapperArray<Vue> =>
-    hierarchicalFilterWrapper.findAll(getDataTestSelector('filter'));
+  const getFilterWrapper = () => hierarchicalFilterWrapper.find(getDataTestSelector('filter'));
+  const getFiltersWrappers = () => hierarchicalFilterWrapper.findAll(getDataTestSelector('filter'));
 
   async function mutateFilter(
     filter: HierarchicalFilterModel,
     newFilterState: Partial<HierarchicalFilterModel>
-  ): Promise<void> {
-    store.commit('x/facets/mutateFilter', { filter, newFilterState });
-    await localVue.nextTick();
+  ) {
+    const newFilter = Object.assign(filter, newFilterState);
+    facetRef.value.filters = facetRef.value.filters.map(currentFilter =>
+      currentFilter.id !== newFilter.id ? currentFilter : newFilter
+    );
+    await nextTick();
   }
 
-  async function clickFilter(): Promise<void> {
+  async function clickFilter() {
     await getFilterWrapper().trigger('click');
   }
 
-  function getFilters(): HierarchicalFilterModel[] {
-    return flatHierarchicalFilters(store.getters['x/facets/facets'][facet.id].filters);
+  function getFilters() {
+    return flatHierarchicalFilters(facetRef.value.filters);
   }
 
-  function getRootFilter(): HierarchicalFilterModel {
+  function getRootFilter() {
     return getFilters().find(filter => filter.parentId === null)!;
   }
 
-  function getPartiallySelectedFilters(): HierarchicalFilterModel[] {
+  function getPartiallySelectedFilters() {
     return getFilters().filter(filter =>
       ['category:root', 'category:child-0'].includes(String(filter.id))
     );
   }
 
-  function getFilterWrapperByText(text: string): Wrapper<Vue> | undefined {
-    return getFiltersWrappers().wrappers.find(filter => filter.text().trim() === text);
+  function getFilterWrapperByText(text: string) {
+    return getFiltersWrappers().find(filter => filter.text().trim() === text);
   }
 
   return {
@@ -202,7 +192,7 @@ describe('testing `HierarchicalFilter` component', () => {
         </HierarchicalFilter>`
     });
 
-    const defaultButton = getFilterWrapper().find(getDataTestSelector('filter'));
+    const defaultButton = getFilterWrapper();
     const customLabel = getFilterWrapper().find(getDataTestSelector('custom-label'));
     expect(defaultButton.exists()).toBe(true);
     expect(customLabel.text()).toEqual(getRootFilter().label);
@@ -277,8 +267,8 @@ describe('testing `HierarchicalFilter` component', () => {
 
       const numberOfFilters = getFilters().length;
       expect(getFiltersWrappers()).toHaveLength(numberOfFilters);
-      getFiltersWrappers().wrappers.forEach(filterWrapper => {
-        const filterLabel: string = (filterWrapper.vm as any).filter.label;
+      getFiltersWrappers().forEach((filterWrapper, index) => {
+        const filterLabel: string = getFilters()[index].label;
         expect(filterWrapper.text()).toContain(`Custom - ${filterLabel}`);
       });
     });
@@ -292,20 +282,20 @@ describe('testing `HierarchicalFilter` component', () => {
         getDataTestSelector('children-filters')
       );
 
-      expect(childrenFiltersWrapper.element).toBeUndefined();
-      expect(getFiltersWrappers().wrappers).toHaveLength(1);
-      getFiltersWrappers().wrappers.forEach(filterWrapper =>
+      expect(childrenFiltersWrapper.exists()).toBeFalsy();
+      expect(getFiltersWrappers()).toHaveLength(1);
+      getFiltersWrappers().forEach(filterWrapper =>
         expect(filterWrapper.text()).toEqual(filter.label)
       );
     });
 
     it('emits `UserClickedAFilter` and `UserClickedAHierarchicalFilter` events when a child is clicked', () => {
-      const { getFiltersWrappers, emitSpy } = render();
-      expect(getFiltersWrappers().wrappers.length).toBeGreaterThan(1);
-      getFiltersWrappers().wrappers.forEach(filterWrapper => {
+      const { getFiltersWrappers, getFilters, emitSpy } = render();
+      expect(getFiltersWrappers().length).toBeGreaterThan(1);
+      getFiltersWrappers().forEach((filterWrapper, index) => {
         emitSpy.mockClear();
+        const filter = getFilters()[index];
         filterWrapper.trigger('click');
-        const filter = (filterWrapper.vm as any).filter;
 
         expect(emitSpy).toHaveBeenCalledTimes(2);
         expect(emitSpy).toHaveBeenCalledWith('UserClickedAFilter', filter, metadata);
@@ -314,17 +304,17 @@ describe('testing `HierarchicalFilter` component', () => {
     });
 
     it('emits configured events when a child is clicked', () => {
-      const { getFiltersWrappers, emitSpy } = render({
+      const { getFiltersWrappers, getFilters, emitSpy } = render({
         clickEvents: {
           UserAcceptedAQuery: 'potato',
           UserBlurredSearchBox: undefined
         }
       });
-      expect(getFiltersWrappers().wrappers.length).toBeGreaterThan(1);
-      getFiltersWrappers().wrappers.forEach(filterWrapper => {
+      expect(getFiltersWrappers().length).toBeGreaterThan(1);
+      getFiltersWrappers().forEach((filterWrapper, index) => {
         emitSpy.mockClear();
+        const filter = getFilters()[index];
         filterWrapper.trigger('click');
-        const filter = (filterWrapper.vm as any).filter;
 
         expect(emitSpy).toHaveBeenCalledTimes(4);
         ['UserClickedAFilter', 'UserClickedAHierarchicalFilter'].forEach(event => {
@@ -336,40 +326,39 @@ describe('testing `HierarchicalFilter` component', () => {
     });
 
     it('adds a CSS class when the filter is partially selected', () => {
-      const { getFiltersWrappers, getPartiallySelectedFilters } = render();
+      const { getFiltersWrappers, getFilters, getPartiallySelectedFilters } = render();
       const partiallySelectedIds = getPartiallySelectedFilters().map(filter => filter.id);
 
       expect(getFiltersWrappers().length).toBeGreaterThan(0);
 
-      getFiltersWrappers().wrappers.forEach(filterWrapper => {
-        const filter = (filterWrapper.vm as any).filter;
+      getFiltersWrappers().forEach((filterWrapper, index) => {
+        const filter = getFilters()[index];
+        const classes = ['x-facet-filter', 'x-hierarchical-filter'];
         if (partiallySelectedIds.includes(filter.id)) {
-          expect(filterWrapper.classes()).toContain('x-hierarchical-filter--is-partially-selected');
-        } else {
-          expect(filterWrapper.classes()).not.toContain(
-            'x-hierarchical-filter--is-partially-selected'
-          );
+          classes.push('x-hierarchical-filter--is-partially-selected');
+          classes.push('x-facet-filter--is-partially-selected');
         }
+        expect(filterWrapper.classes()).toEqual(expect.arrayContaining(classes));
       });
     });
 
     it('exposes proper css classes and attributes in the default slot to children', async () => {
       const { mutateFilter, getFilterWrapperByText, getFilters } = render({
         template: `
-           <HierarchicalFilter
-             :filter="filter"
-             :clickEvents="clickEvents"
-             v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
+          <HierarchicalFilter
+           :filter="filter"
+           :clickEvents="clickEvents"
+           v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
+           >
+             <button
+             data-test="filter"
+             :class="cssClasses"
+             @click="clickFilter"
+             :disabled="isDisabled"
              >
-               <button
-               data-test="filter"
-               :class="cssClasses"
-               @click="clickFilter"
-               :disabled="isDisabled"
-               >
-                 {{ filter.label }}
-               </button>
-           </HierarchicalFilter>`
+               {{ filter.label }}
+             </button>
+          </HierarchicalFilter>`
       });
 
       const grandChild0Wrapper = getFilterWrapperByText('grand-child-0')!;
@@ -442,7 +431,7 @@ describe('testing `HierarchicalFilter` component', () => {
       const wrappers = hierarchicalFilterWrapper.findAll(getDataTestSelector('children-filters'));
       expect(wrappers).toHaveLength(2);
 
-      wrappers.wrappers.forEach(wrapper => {
+      wrappers.forEach(wrapper => {
         expect(wrapper.classes('custom-class')).toBe(true);
       });
     });
@@ -461,7 +450,7 @@ describe('testing `HierarchicalFilter` component', () => {
       const wrappers = hierarchicalFilterWrapper.findAll(getDataTestSelector('filter'));
       expect(wrappers).toHaveLength(4);
 
-      wrappers.wrappers.forEach(wrapper => {
+      wrappers.forEach(wrapper => {
         expect(wrapper.classes('custom-class')).toBe(true);
       });
     });
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
index afef730476..ffce3102e6 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
@@ -4,7 +4,7 @@ import { createNumberRangeFilter } from '../../../../../__stubs__/filters-stubs.
 import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import NumberRangeFilter from '../number-range-filter.vue';
-import { XPlugin } from '../../../../../plugins/index';
+import { XPlugin } from '../../../../../plugins';
 
 const metadata = {
   moduleName: 'facets',
@@ -17,29 +17,26 @@ function render({
   filter = ref(createNumberRangeFilter('price', { min: 0, max: 20 })),
   clickEvents = {}
 } = {}) {
-  installNewXPlugin();
-
   const wrapper = mount(
     {
       components: { NumberRangeFilter },
-      props: ['filter', 'clickEvents'],
       template
     },
     {
-      propsData: {
-        filter,
-        clickEvents
-      }
+      data: () => ({ filter, clickEvents }),
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
   const filterWrapper = wrapper.findComponent(NumberRangeFilter);
+  const buttonWrapper = filterWrapper.find(getDataTestSelector('filter'));
 
   return {
     wrapper: filterWrapper,
     emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter: () => wrapper.trigger('click'),
+    buttonWrapper,
+    clickFilter: () => buttonWrapper.trigger('click'),
     selectFilter: () => {
       filter.value.selected = true;
       return nextTick();
@@ -99,14 +96,14 @@ describe('testing NumberRangeFilter component', () => {
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
-    const { wrapper, selectFilter } = render();
+    const { buttonWrapper, selectFilter } = render();
 
-    expect(wrapper.classes()).not.toContain('x-selected');
-    expect(wrapper.classes()).not.toContain('x-number-range-filter--is-selected');
+    expect(buttonWrapper.classes()).not.toContain('x-selected');
+    expect(buttonWrapper.classes()).not.toContain('x-number-range-filter--is-selected');
 
     await selectFilter();
 
-    expect(wrapper.classes()).toContain('x-selected');
-    expect(wrapper.classes()).toContain('x-number-range-filter--is-selected');
+    expect(buttonWrapper.classes()).toContain('x-selected');
+    expect(buttonWrapper.classes()).toContain('x-number-range-filter--is-selected');
   });
 });
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts
index 1827d83a42..bbfdd29162 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts
@@ -7,7 +7,7 @@ import {
 } from '../../../../../__stubs__/filters-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import RenderlessFilter from '../renderless-filter.vue';
-import { XPlugin } from '../../../../../plugins/x-plugin';
+import { XPlugin } from '../../../../../plugins';
 
 function render({
   filter = ref(createSimpleFilter('category', 'food')),
@@ -27,26 +27,26 @@ function render({
         </button>
     </RenderlessFilter>`
 } = {}) {
-  installNewXPlugin();
-
   const wrapper = mount(
     {
       components: { RenderlessFilter },
-      props: ['filter', 'clickEvents'],
       template
     },
     {
-      propsData: { filter, clickEvents }
+      data: () => ({ filter, clickEvents }),
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
   const renderlessFilterWrapper = wrapper.findComponent(RenderlessFilter);
+  const buttonWrapper = renderlessFilterWrapper.find(getDataTestSelector('custom-label'));
 
   return {
     wrapper: renderlessFilterWrapper,
     emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter: () => renderlessFilterWrapper.trigger('click'),
+    buttonWrapper,
+    clickFilter: () => buttonWrapper.trigger('click'),
     selectFilter: async () => {
       filter.value.selected = true;
       await nextTick();
@@ -89,24 +89,24 @@ describe('testing Renderless Filter component', () => {
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
-    const { wrapper, selectFilter } = render();
+    const { buttonWrapper, selectFilter } = render();
 
-    expect(wrapper.classes()).not.toContain('x-selected');
+    expect(buttonWrapper.classes()).not.toContain('x-selected');
 
     await selectFilter();
 
-    expect(wrapper.classes()).toContain('x-selected');
+    expect(buttonWrapper.classes()).toContain('x-selected');
   });
 
   it('disables the filter when it has no results', async () => {
     const filter = ref(createSimpleFilter('category', 'men', false));
-    const { wrapper } = render({ filter });
+    const { buttonWrapper } = render({ filter });
 
-    expect(wrapper.attributes('disabled')).toBeUndefined();
+    expect(buttonWrapper.attributes()).not.toHaveProperty('disabled');
 
     filter.value.totalResults = 0;
     await nextTick();
 
-    expect(wrapper.attributes('disabled')).toEqual('disabled');
+    expect(buttonWrapper.attributes()).toHaveProperty('disabled');
   });
 });
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts
index c220c6b397..25e09aaf39 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts
@@ -17,26 +17,26 @@ function render({
   filter = ref(createSimpleFilter('category', 'women')),
   clickEvents = {}
 } = {}) {
-  installNewXPlugin();
-
   const wrapper = mount(
     {
       components: { SimpleFilter },
-      props: ['filter', 'clickEvents'],
       template
     },
     {
-      propsData: { filter, clickEvents }
+      data: () => ({ filter, clickEvents }),
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
   const filterWrapper = wrapper.findComponent(SimpleFilter);
+  const buttonWrapper = filterWrapper.find(getDataTestSelector('filter'));
 
   return {
     wrapper: filterWrapper,
     emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter: () => wrapper.trigger('click'),
+    buttonWrapper,
+    clickFilter: () => buttonWrapper.trigger('click'),
     selectFilter: () => {
       filter.value.selected = true;
       return nextTick();
@@ -169,14 +169,14 @@ describe('testing SimpleFilter component', () => {
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
-    const { wrapper, selectFilter } = render();
+    const { buttonWrapper, selectFilter } = render();
 
-    expect(wrapper.classes()).not.toContain('x-selected');
-    expect(wrapper.classes()).not.toContain('x-simple-filter--is-selected');
+    expect(buttonWrapper.classes()).not.toContain('x-selected');
+    expect(buttonWrapper.classes()).not.toContain('x-simple-filter--is-selected');
 
     await selectFilter();
 
-    expect(wrapper.classes()).toContain('x-selected');
-    expect(wrapper.classes()).toContain('x-simple-filter--is-selected');
+    expect(buttonWrapper.classes()).toContain('x-selected');
+    expect(buttonWrapper.classes()).toContain('x-simple-filter--is-selected');
   });
 });
diff --git a/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue
index 4d7772eb91..917ffdf7cb 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue
@@ -340,13 +340,9 @@
   });
 </script>
 
-<style lang="scss">
-  .x-editable-number-range-filter {
-    &--error {
-      .x-editable-number-range-filter__input {
-        border-color: red;
-      }
-    }
+<style lang="css" scoped>
+  .x-editable-number-range-filter--error .x-editable-number-range-filter__input {
+    border-color: red;
   }
 </style>
 
diff --git a/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue
index ea10339f3a..214c958169 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue
@@ -2,9 +2,9 @@
   <div class="x-hierarchical-filter-container" data-test="hierarchical-filter-container">
     <RenderlessFilter
       v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
-      :cssClasses="innerCssClasses"
-      :clickEvents="innerClickEvents"
       :filter="filter"
+      :clickEvents="innerClickEvents"
+      :cssClasses="innerCssClasses"
     >
       <!--
         @slot The content to render inside the button.
diff --git a/packages/x-components/src/x-modules/facets/components/filters/number-range-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/number-range-filter.vue
index 3558312df7..018defa3a3 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/number-range-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/number-range-filter.vue
@@ -29,6 +29,7 @@
         :disabled="isDisabled"
         data-test="filter"
         role="checkbox"
+        v-bind="$attrs"
       >
         <!--
           @slot The content to render inside the button
@@ -57,6 +58,7 @@
     name: 'NumberRangeFilter',
     xModule: facetsXModule.name,
     components: { RenderlessFilter },
+    inheritAttrs: false,
     props: {
       /** The filter data to render. */
       filter: {
diff --git a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
index 7ca88d17bd..f81de8c7dd 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Dictionary } from '@empathyco/x-utils';
-  import { computed, defineComponent, h, PropType } from 'vue';
+  import { computed, defineComponent, PropType } from 'vue';
   import { BooleanFilter } from '@empathyco/x-types';
   import { useXBus } from '../../../../composables/use-x-bus';
   import { XEvent, XEventsTypes } from '../../../../wiring/events.types';
@@ -20,6 +20,7 @@
   export default defineComponent({
     name: 'RenderlessFilter',
     xModule: facetsXModule.name,
+    inheritAttrs: false,
     props: {
       /** The filter data to render. */
       filter: {
@@ -66,7 +67,7 @@
           clickFilter: emitClickEvents,
           cssClasses: innerCssClasses.value,
           isDisabled: isDisabled.value
-        }) ?? h();
+        }) ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index 6eab6bbbb9..4936d6922a 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -29,6 +29,7 @@
         :disabled="isDisabled"
         data-test="filter"
         role="checkbox"
+        v-bind="$attrs"
       >
         <!--
           @slot The content to render inside the button
@@ -57,6 +58,7 @@
     name: 'SimpleFilter',
     xModule: facetsXModule.name,
     components: { RenderlessFilter },
+    inheritAttrs: false,
     props: {
       /** The filter data to render. */
       filter: {
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/exclude-filters-with-no-results.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/exclude-filters-with-no-results.spec.ts
index 14acbfbc12..5533548297 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/exclude-filters-with-no-results.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/exclude-filters-with-no-results.spec.ts
@@ -1,29 +1,18 @@
-import { Filter } from '@empathyco/x-types';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import { getSimpleFilterStub } from '../../../../../__stubs__/filters-stubs.factory';
+import { SimpleFilter } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
+import { getSimpleFilterStub } from '../../../../../__stubs__';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import ExcludeFiltersWithNoResults from '../exclude-filters-with-no-results.vue';
 
-/**
- * Renders a {@link ExcludeFiltersWithNoResults} component with the provided options, and returns
- * a small API to test it.
- *
- * @param options - Options to test the {@link ExcludeFiltersWithNoResults} component with.
- * @returns A {@link RenderExcludeFiltersWithNoResultsAPI} object to test the
- * {@link ExcludeFiltersWithNoResults}.
- */
 function renderExcludeFiltersWithNoResults({
-  filters = [],
+  filters = [] as SimpleFilter[],
   template = `
     <ExcludeFiltersWithNoResults :filters="filters" v-slot="{ filters }">
       <div>
         <span class="filter" v-for="filter in filters">{{ filter.label }}</span>
       </div>
     </ExcludeFiltersWithNoResults>`
-}: RenderExcludeFiltersWithNoResultsOptions = {}): RenderExcludeFiltersWithNoResultsAPI {
-  const localVue = createLocalVue();
-
+} = {}) {
   const templateWrapper = mount(
     {
       props: ['filters'],
@@ -33,17 +22,14 @@ function renderExcludeFiltersWithNoResults({
       template
     },
     {
-      localVue,
-      propsData: { filters }
+      props: { filters }
     }
   );
 
   const wrapper = templateWrapper.findComponent(ExcludeFiltersWithNoResults);
   return {
     wrapper,
-    getRenderedFilters() {
-      return templateWrapper.findAll('.filter');
-    }
+    getRenderedFilters: () => templateWrapper.findAll('.filter')
   };
 }
 
@@ -70,21 +56,6 @@ describe('testing Filters component', () => {
     });
     const renderedFilters = getRenderedFilters();
     expect(renderedFilters).toHaveLength(2);
-    expect(renderedFilters.wrappers.map(wrapper => wrapper.text())).toEqual(['Women', 'Kids']);
+    expect(renderedFilters.map(wrapper => wrapper.text())).toEqual(['Women', 'Kids']);
   });
 });
-
-interface RenderExcludeFiltersWithNoResultsOptions {
-  /** The filters data to render. */
-  filters?: Filter[];
-  /** The template to render. Receives the `filters` via prop, and has registered the
-   * {@link ExcludeFiltersWithNoResults} component. */
-  template?: string;
-}
-
-interface RenderExcludeFiltersWithNoResultsAPI {
-  /** Retrieves the testing wrappers of the filters. */
-  getRenderedFilters: () => WrapperArray<Vue>;
-  /** The Vue testing utils wrapper for the {@link ExcludeFiltersWithNoResults} component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-list.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-list.spec.ts
index 106fef513b..be3fe3e06b 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-list.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-list.spec.ts
@@ -1,23 +1,14 @@
-import { Filter } from '@empathyco/x-types';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
+import { SimpleFilter } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
+import { createSimpleFacetStub } from '../../../../../__stubs__';
 import { getDataTestSelector } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import FiltersList from '../filters-list.vue';
 
-/**
- * Function that returns a Filters wrapper.
- *
- * @param filters - Filters filters props.
- * @returns FiltersList vue-test-utils wrapper.
- */
 function renderFilters({
-  filters = [],
+  filters = [] as SimpleFilter[],
   template = '<Filters :filters="filters"></Filters>'
-}: RenderFiltersOptions = {}): RenderFiltersAPI {
-  const localVue = createLocalVue();
-
+} = {}) {
   const wrapperTemplate = mount(
     {
       props: ['filters'],
@@ -27,8 +18,7 @@ function renderFilters({
       template
     },
     {
-      localVue,
-      propsData: { filters }
+      props: { filters }
     }
   );
 
@@ -68,29 +58,14 @@ describe('testing Filters component', () => {
       filters,
       template: `
         <Filters :filters="filters" #default="{ filter }">
-        <p>{{ filter.label }}</p>
+          <p>{{ filter.label }}</p>
         </Filters>
       `
     });
 
     const liWrappers = wrapper.findAll(getDataTestSelector('base-filters-item'));
     filters.forEach((filter, index) => {
-      expect(liWrappers.at(index).text()).toContain(filter.label);
+      expect(liWrappers.at(index)?.text()).toContain(filter.label);
     });
   });
 });
-
-interface RenderFiltersOptions {
-  /** The filters data to render. */
-  filters?: Filter[];
-  /** The template to render. Receives the `filters` via prop, and has registered the
-   * {@link FiltersComponent} as `Filters`. */
-  template?: string;
-}
-
-interface RenderFiltersAPI {
-  /** The rendered filters data. */
-  filters: Filter[];
-  /** The Vue testing utils wrapper for the {@link FiltersComponent}. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-search.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-search.spec.ts
index 05254ddbd0..05a2ebfac3 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-search.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-search.spec.ts
@@ -1,7 +1,7 @@
 import { Filter } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
-import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import { getSimpleFilterStub } from '../../../../../__stubs__/filters-stubs.factory';
 import { getDataTestSelector } from '../../../../../__tests__/utils';
@@ -49,7 +49,7 @@ function renderFiltersSearch(
         `
     },
     {
-      propsData: {
+      props: {
         filters: filtersMock
       }
     }
@@ -109,13 +109,13 @@ describe('testing FiltersSearch', () => {
       expect(filtersSearch.wrapper.classes()).not.toContain('x-filters-search--is-sifted');
 
       jest.advanceTimersByTime(1800);
-      await Vue.nextTick();
+      await nextTick();
       expect(filtersSearch.getFiltersWrapper()).toHaveLength(occurrences);
       expect(filtersSearch.wrapper.classes()).toContain('x-filters-search--is-sifted');
 
       await filtersSearch.inputWrapper.setValue('');
       jest.advanceTimersByTime(2000);
-      await Vue.nextTick();
+      await nextTick();
       expect(filtersSearch.getFiltersWrapper()).toHaveLength(filtersMock.length);
     }
   });
@@ -161,15 +161,15 @@ async function expectFiltersSearch(
   await inputWrapper.setValue(query);
   expect((inputWrapper.element as HTMLInputElement).value).toEqual(query);
   jest.advanceTimersByTime(200);
-  await Vue.nextTick();
+  await nextTick();
   expect((inputWrapper.element as HTMLInputElement).value).toEqual(query);
   expect(getFiltersWrapper()).toHaveLength(occurrences);
 }
 
 interface FiltersSearchAPI {
-  wrapper: Wrapper<Vue>;
-  filterWrapper: Wrapper<Vue>;
-  componentWrapper: Wrapper<Vue>;
-  inputWrapper: Wrapper<Vue>;
-  getFiltersWrapper: () => WrapperArray<Vue>;
+  wrapper: VueWrapper;
+  filterWrapper: VueWrapper;
+  componentWrapper: DOMWrapper<Element>;
+  inputWrapper: DOMWrapper<Element>;
+  getFiltersWrapper: () => DOMWrapper<Element>[];
 }
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters-list.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters-list.spec.ts
index 9cb989521c..df329b0211 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters-list.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters-list.spec.ts
@@ -1,9 +1,9 @@
 import { BooleanFilter, Facet } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
-import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { Store } from 'vuex';
+import { createSimpleFacetStub } from '../../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import { XPlugin } from '../../../../../plugins';
@@ -20,8 +20,8 @@ import SelectedFiltersList from '../../lists/selected-filters-list.vue';
  */
 function renderSelectedFiltersList({
   template = '<SelectedFiltersList :facetsIds="facetsIds" />',
-  facetsIds = undefined
-}: RenderSelectedFiltersListOptions = {}): RenderSelectedFiltersAPI {
+  facetsIds = undefined as undefined | string[]
+} = {}) {
   const facets: Record<Facet['id'], Facet> = {
     gender: createSimpleFacetStub('gender', createFilter => [
       createFilter('Men', false),
@@ -37,12 +37,7 @@ function renderSelectedFiltersList({
     ])
   };
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(facetsXModule);
-  resetXFacetsStateWith(store, facets);
 
   const wrapper = mount(
     {
@@ -57,27 +52,30 @@ function renderSelectedFiltersList({
       }
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [facetsXModule] })]
+      },
       store,
-      propsData: {
+      props: {
         facetsIds
       }
     }
   );
-
+  installNewXPlugin({ store });
+  XPlugin.registerXModule(facetsXModule);
+  resetXFacetsStateWith(store, facets);
   const selectedFiltersListWrapper = wrapper.findComponent(SelectedFiltersList);
 
   return {
     wrapper,
     selectedFiltersListWrapper,
-    toggleFacetNthFilter(facetId, nth) {
+    toggleFacetNthFilter: (facetId: string, nth: number) => {
       const filter = (store.getters['x/facets/facets']![facetId].filters as BooleanFilter[])[nth];
       filter.selected = !filter.selected;
-      return localVue.nextTick();
+      return nextTick();
     },
-    selectedFiltersItems() {
-      return selectedFiltersListWrapper.findAll(getDataTestSelector('selected-filters-list-item'));
-    }
+    selectedFiltersItems: () =>
+      selectedFiltersListWrapper.findAll(getDataTestSelector('selected-filters-list-item'))
   };
 }
 
@@ -106,8 +104,8 @@ describe('testing SelectedFiltersList component', () => {
       getDataTestSelector('selected-filters-list-item')
     );
 
-    expect(selectedFiltersItems.at(0).text()).toBe('Men');
-    expect(selectedFiltersItems.at(1).text()).toBe('BMW');
+    expect(selectedFiltersItems.at(0)?.text()).toEqual('Men');
+    expect(selectedFiltersItems.at(1)?.text()).toEqual('BMW');
   });
 
   it('renders custom default slot and custom facetId slot', async () => {
@@ -129,9 +127,9 @@ describe('testing SelectedFiltersList component', () => {
       getDataTestSelector('selected-filters-list-item')
     );
 
-    expect(selectedFiltersItems.at(0).text()).toBe('Men selected!');
-    expect(selectedFiltersItems.at(1).text()).toBe('Which one? BMW');
-    expect(selectedFiltersItems.at(2).text()).toBe('Much better: Meat');
+    expect(selectedFiltersItems.at(0)?.text()).toEqual('Men selected!');
+    expect(selectedFiltersItems.at(1)?.text()).toEqual('Which one? BMW');
+    expect(selectedFiltersItems.at(2)?.text()).toEqual('Much better: Meat');
     expect(selectedFiltersItems).toHaveLength(3);
   });
 
@@ -141,15 +139,15 @@ describe('testing SelectedFiltersList component', () => {
         facetsIds: ['brand', 'gender']
       });
 
-    expect(selectedFiltersListWrapper.text()).toBe('');
+    expect(selectedFiltersListWrapper.text()).toEqual('');
 
     await toggleFacetNthFilter('brand', 0);
     await toggleFacetNthFilter('rootCategories', 1);
     await toggleFacetNthFilter('gender', 1);
 
     expect(selectedFiltersItems()).toHaveLength(2);
-    expect(selectedFiltersItems().at(0).text()).toBe('Audi');
-    expect(selectedFiltersItems().at(1).text()).toBe('Women');
+    expect(selectedFiltersItems().at(0)?.text()).toEqual('Audi');
+    expect(selectedFiltersItems().at(1)?.text()).toEqual('Women');
   });
 
   it('renders the component if alwaysVisible is true and no selected filters', () => {
@@ -167,22 +165,3 @@ describe('testing SelectedFiltersList component', () => {
     expect(selectedFiltersListWrapper.html()).toBe('');
   });
 });
-
-interface RenderSelectedFiltersListOptions {
-  /** The template to be rendered. */
-  template?: string;
-  /** Array of facets ids. */
-  facetsIds?: Array<Facet['id']>;
-}
-
-interface RenderSelectedFiltersAPI {
-  /** The wrapper of the container element. */
-  wrapper: Wrapper<Vue>;
-  /** The `selectedFilters` wrapper component. */
-  selectedFiltersListWrapper: Wrapper<Vue>;
-  /** Toggle nth filter of the facet provided. */
-  toggleFacetNthFilter: (facetId: string, nth: number) => Promise<void>;
-  /** Retrieves the wrapper for the items of the list rendered by the {@link SelectedFiltersList}
-   * component. */
-  selectedFiltersItems: () => WrapperArray<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts
index 513234da1d..348205389a 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts
@@ -1,75 +1,70 @@
-import { Facet, Filter } from '@empathyco/x-types';
+import { Facet } from '@empathyco/x-types';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { Store } from 'vuex';
+import { DeepPartial } from '@empathyco/x-utils';
 import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
 import { installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
-import { useStore } from '../../../../../composables/use-store';
-import { XPlugin } from '../../../../../plugins';
-import { resetFacetsService } from '../../../__tests__/utils';
-import { DefaultFacetsService } from '../../../service/facets.service';
 import { facetsXModule } from '../../../x-module';
 import { resetXFacetsStateWith } from '../../__tests__/utils';
 import SelectedFilters from '../selected-filters.vue';
+import { resetFacetsService } from '../../../__tests__/utils';
+import { RootXStoreState } from '../../../../../store/index';
 
-jest.mock('../../../../../composables/use-store');
-
-const facets: Record<Facet['id'], Facet> = {
-  gender: createSimpleFacetStub('gender', createFilter => [
-    createFilter('Men', false),
-    createFilter('Women', false)
-  ]),
-  brand: createSimpleFacetStub('brand', createFilter => [
-    createFilter('Audi', false),
-    createFilter('BMW', false)
-  ]),
-  color: createSimpleFacetStub('color', createFilter => [
-    createFilter('red', false),
-    createFilter('blue', false)
-  ])
-};
-
-function render({ template = '<SelectedFilters />', facetsIds = [] as string[] } = {}) {
+async function render({ template = '<SelectedFilters />', facetsIds = [] as string[] } = {}) {
   resetFacetsService();
 
-  installNewXPlugin({ initialXModules: [facetsXModule] });
-  resetXFacetsStateWith(XPlugin.store, facets);
-  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
-
-  const wrapper = mount({
-    components: { SelectedFilters },
-    template,
-    data: () => ({ facetsIds })
-  });
+  const facets: Record<Facet['id'], Facet> = {
+    gender: createSimpleFacetStub('gender', createFilter => [
+      createFilter('Men', false),
+      createFilter('Women', false)
+    ]),
+    brand: createSimpleFacetStub('brand', createFilter => [
+      createFilter('Audi', false),
+      createFilter('BMW', false)
+    ]),
+    color: createSimpleFacetStub('color', createFilter => [
+      createFilter('red', false),
+      createFilter('blue', false)
+    ])
+  };
 
-  const selectedFiltersWrapper = wrapper.findComponent(SelectedFilters);
+  const store = new Store<DeepPartial<RootXStoreState>>({});
+  const wrapper = mount(
+    {
+      components: { SelectedFilters },
+      template
+    },
+    {
+      global: { plugins: [installNewXPlugin({ store, initialXModules: [facetsXModule] })] },
+      data: () => ({ facetsIds })
+    }
+  );
+  resetXFacetsStateWith(store, facets);
+  await nextTick();
 
   return {
     wrapper,
-    selectedFiltersWrapper,
-    toggleFacetNthFilter: (facetId: string, nth: number) => {
-      const filter: Filter = XPlugin.store.getters['x/facets/facets'][facetId].filters[nth];
-      DefaultFacetsService.instance.toggle(filter);
-      return nextTick();
+    selectedFiltersWrapper: wrapper.findComponent(SelectedFilters),
+    toggleFacetNthFilter: async (facetId: string, nth: number) => {
+      const filter = store.getters['x/facets/facets'][facetId].filters[nth];
+      filter.selected = !filter.selected;
+      return await nextTick();
     }
   };
 }
 
 describe('testing SelectedFilters component', () => {
-  it('is an x-component', () => {
-    const { selectedFiltersWrapper } = render();
-
-    expect(isXComponent(selectedFiltersWrapper.vm)).toBeTruthy();
-  });
-
-  it('belongs to the `facets` x-module', () => {
-    const { selectedFiltersWrapper } = render();
+  it('is an x-component as belongs to the `facets` x-module', async () => {
+    const { selectedFiltersWrapper } = await render();
 
+    expect(isXComponent(selectedFiltersWrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(selectedFiltersWrapper.vm)).toEqual('facets');
   });
 
   it('renders "nth" by default', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = await render({
       template: '<SelectedFilters :alwaysVisible="true" />'
     });
 
@@ -86,7 +81,7 @@ describe('testing SelectedFilters component', () => {
   });
 
   it('renders "nth selected" in its customized slot', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = await render({
       template: `
         <SelectedFilters :alwaysVisible="true" #default="{ selectedFilters }">
           {{ selectedFilters.length }} selected
@@ -106,7 +101,7 @@ describe('testing SelectedFilters component', () => {
   });
 
   it('renders "nth" by default of the facet ids provided', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = await render({
       template: '<SelectedFilters :facetsIds="facetsIds" :alwaysVisible="true" />',
       facetsIds: ['brand', 'gender']
     });
@@ -127,7 +122,7 @@ describe('testing SelectedFilters component', () => {
   });
 
   it('renders "nth selected" in its customized slot of the facet id provided', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = await render({
       template: `
         <SelectedFilters :facetsIds="facetsIds" :alwaysVisible="true" #default="{ selectedFilters }">
           {{ selectedFilters.length }} selected
@@ -148,7 +143,7 @@ describe('testing SelectedFilters component', () => {
   });
 
   it('always renders the component if alwaysVisible is true without selected filters', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = await render({
       template: '<SelectedFilters :alwaysVisible="true" />'
     });
 
@@ -159,7 +154,7 @@ describe('testing SelectedFilters component', () => {
   });
 
   it("doesn't render the component if alwaysVisible is false and no selected filters", async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = render();
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = await render();
 
     expect(selectedFiltersWrapper.html()).toEqual('');
 
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/sliced-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/sliced-filters.spec.ts
index 95aa0db2b1..4404d2c80f 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/sliced-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/sliced-filters.spec.ts
@@ -1,7 +1,6 @@
 import { Filter } from '@empathyco/x-types';
-import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import { createSimpleFilter } from '../../../../../__stubs__/filters-stubs.factory';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
+import { createSimpleFilter } from '../../../../../__stubs__';
 import { getDataTestSelector } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import SlicedFilters from '../sliced-filters.vue';
@@ -44,7 +43,7 @@ function renderBaseShowMoreFilters({
         `
     },
     {
-      propsData: {
+      props: {
         filters: filtersMock,
         max,
         buttonClass
@@ -144,13 +143,13 @@ interface BaseShowMoreFiltersOptions {
 
 interface BaseShowMoreFiltersAPI {
   /** The wrapper of the container element. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The wrapper of the container element. */
-  filterWrapper: Wrapper<Vue>;
+  filterWrapper: VueWrapper;
   /** The filters of the wrapper element. */
-  getFiltersWrapper: () => WrapperArray<Vue>;
+  getFiltersWrapper: () => DOMWrapper<Element>[];
   /** The show more button of the wrapper element. */
-  getShowMoreButton: () => Wrapper<Vue>;
+  getShowMoreButton: () => DOMWrapper<Element>;
   /** The show less button of the wrapper element. */
-  getShowLessButton: () => Wrapper<Vue>;
+  getShowLessButton: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/sorted-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/sorted-filters.spec.ts
index 7688cebaaf..8f7bf51baf 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/sorted-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/sorted-filters.spec.ts
@@ -1,6 +1,6 @@
 import { BooleanFilter, Filter } from '@empathyco/x-types';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
+import { nextTick, reactive } from 'vue';
 import { getSimpleFilterStub } from '../../../../../__stubs__/filters-stubs.factory';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import SortedFilters from '../sorted-filters.vue';
@@ -21,8 +21,7 @@ function getFiltersMock(): Filter[] {
 }
 
 function renderBaseSortedFilters(filters: Filter[]): BaseSortedFiltersAPI {
-  const localVue = createLocalVue();
-  Vue.observable(filters);
+  filters = reactive(filters);
 
   const wrapper = mount(
     {
@@ -45,8 +44,7 @@ function renderBaseSortedFilters(filters: Filter[]): BaseSortedFiltersAPI {
         </SortedFilters>`
     },
     {
-      localVue,
-      propsData: {
+      props: {
         filters
       }
     }
@@ -57,7 +55,7 @@ function renderBaseSortedFilters(filters: Filter[]): BaseSortedFiltersAPI {
     getSortedFiltersWrapper: () => wrapper.findComponent(SortedFilters),
     selectFilter: index => {
       (filters[index] as BooleanFilter).selected = true;
-      return Vue.nextTick();
+      return nextTick();
     }
   };
 }
@@ -90,22 +88,22 @@ describe('testing SortedFilters', () => {
     const expectedLabel = 'Lego CITY 2';
 
     const filterToSelect = getFiltersWrapperArray().at(1);
-    expect(filterToSelect.text()).toEqual(expectedLabel);
-    expect(filterToSelect.attributes()).toHaveProperty('aria-checked', 'false');
+    expect(filterToSelect?.text()).toEqual(expectedLabel);
+    expect(filterToSelect?.attributes()).toHaveProperty('aria-checked', 'false');
 
     await selectFilter(1);
 
     const selectedFilter = getFiltersWrapperArray().at(0);
-    expect(selectedFilter.text()).toEqual(expectedLabel);
-    expect(selectedFilter.attributes()).toHaveProperty('aria-checked', 'true');
+    expect(selectedFilter?.text()).toEqual(expectedLabel);
+    expect(selectedFilter?.attributes()).toHaveProperty('aria-checked', 'true');
   });
 });
 
 interface BaseSortedFiltersAPI {
   /** The filters of the wrapper element. */
-  getFiltersWrapperArray: () => WrapperArray<Vue>;
+  getFiltersWrapperArray: () => DOMWrapper<Element>[];
   /** The wrapper of the component. */
-  getSortedFiltersWrapper: () => Wrapper<Vue>;
+  getSortedFiltersWrapper: () => VueWrapper;
   /** Sets the index filter selected property to true. */
   selectFilter: (index: number) => Promise<void>;
 }
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index eba758f822..14dcf09b07 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, defineComponent, PropType, provide, h } from 'vue';
+  import { computed, defineComponent, PropType, provide } from 'vue';
   import { facetsXModule } from '../../x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
 
@@ -44,7 +44,7 @@
       );
       provide('filters', filtersWithResults);
 
-      return () => slots.default?.({ filters: filtersWithResults.value }) ?? h();
+      return () => slots.default?.({ filters: filtersWithResults.value })[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index 41b7be589a..55f40b4245 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -114,7 +114,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-filters {
     list-style-type: none;
   }
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index e67e47874e..c93b35269e 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -142,31 +142,29 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-filters-search {
     display: flex;
     flex-flow: column nowrap;
+  }
 
-    &__input {
-      &::-ms-clear {
-        display: none;
-        width: 0;
-        height: 0;
-      }
+  .x-filters-search__input::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+  }
 
-      &::-ms-reveal {
-        display: none;
-        width: 0;
-        height: 0;
-      }
+  .x-filters-search__input::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+  }
 
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-results-button,
-      &::-webkit-search-results-decoration {
-        display: none;
-      }
-    }
+  .x-filters-search__input::-webkit-search-decoration,
+  .x-filters-search__input::-webkit-search-cancel-button,
+  .x-filters-search__input::-webkit-search-results-button,
+  .x-filters-search__input::-webkit-search-results-decoration {
+    display: none;
   }
 </style>
 
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
index 98f123fb14..ed70086442 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
@@ -39,7 +39,8 @@
 
 <script lang="ts">
   import { Facet, Filter, isFacetFilter } from '@empathyco/x-types';
-  import Vue, { defineComponent, PropType } from 'vue';
+  import { defineComponent, PropType } from 'vue';
+  import { animationProp } from '../../../../utils/options-api';
   import { toKebabCase } from '../../../../utils/string';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
@@ -77,7 +78,7 @@
       alwaysVisible: Boolean,
       /** Animation component that will be used to animate the selected filters list. */
       animation: {
-        type: [String, Object] as PropType<string | Vue>,
+        type: animationProp,
         default: 'ul'
       }
     },
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
index 8fde465624..70da3ffeb4 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
@@ -29,7 +29,7 @@
         isVisible.value
           ? slots.default?.({ selectedFilters: selectedFilters.value })[0] ??
             h('span', `${selectedFilters.value.length}`)
-          : h();
+          : '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index b69b707569..33a888a9bc 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, defineComponent, PropType, provide, h } from 'vue';
+  import { computed, defineComponent, PropType, provide } from 'vue';
   import { isArrayEmpty } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
@@ -52,7 +52,7 @@
       });
       provide('filters', sortedFilters);
 
-      return () => slots.default?.({ filters: sortedFilters.value }) ?? h();
+      return () => slots.default?.({ filters: sortedFilters.value })[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
index 6c4c3b879e..2fe31022e6 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -4,7 +4,6 @@
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { useXBus } from '../../../composables/use-x-bus';
-  import { useNoElementRender } from '../../../composables';
   import { facetsXModule } from '../x-module';
 
   /**
@@ -70,7 +69,7 @@
        */
       watch(preselectedFilters, emitPreselectedFilters, { immediate: true });
 
-      return () => useNoElementRender(slots);
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts b/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
index b92e0464e6..c3d63f94a9 100644
--- a/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
+++ b/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
@@ -1,6 +1,6 @@
-import Vue, { ComponentOptions, defineComponent, PropType, provide, ref } from 'vue';
+import { ComponentOptions, defineComponent, PropType, provide, ref } from 'vue';
 import { Filter } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import {
   createHierarchicalFilter,
   createSimpleFilter
@@ -25,7 +25,7 @@ const Provider = defineComponent({
   `
 });
 
-const Filters: ComponentOptions<Vue> = {
+const Filters: ComponentOptions = {
   props: {
     filters: Array as PropType<Filter[]>,
     parentId: {
@@ -77,7 +77,8 @@ describe('test filters injection composable', () => {
     return {
       wrapper,
       getRenderedFilterIds(): string[] {
-        return wrapper.findAll('li').wrappers.map(element => element.text());
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        return wrapper.findAll('li').map(element => element.text());
       },
       async setPropFilters(propFilters: Filter[]) {
         await wrapper.setData({ propFilters });
@@ -195,7 +196,7 @@ describe('test filters injection composable', () => {
  */
 type TestFilterInjectionAPI = {
   /** The wrapper of the mounted component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** It returns an array with the filter ids rendered in the mounted component. */
   getRenderedFilterIds: () => string[];
   /** Changes the propFilters of the mounted component. */
diff --git a/packages/x-components/src/x-modules/facets/composables/use-facets.ts b/packages/x-components/src/x-modules/facets/composables/use-facets.ts
index 3ba860d889..ffa19ff59e 100644
--- a/packages/x-components/src/x-modules/facets/composables/use-facets.ts
+++ b/packages/x-components/src/x-modules/facets/composables/use-facets.ts
@@ -40,7 +40,9 @@ export function useFacets(props: {
       return (props.facetsIds as string[]).reduce(
         (selectedFilters, facetId) => [
           ...selectedFilters,
-          ...selectedFiltersByFacet.value[facetId]
+          ...(Array.isArray(selectedFiltersByFacet.value[facetId])
+            ? selectedFiltersByFacet.value[facetId]
+            : [])
         ],
         [] as Filter[]
       );
diff --git a/packages/x-components/src/x-modules/facets/entities/__tests__/utils.ts b/packages/x-components/src/x-modules/facets/entities/__tests__/utils.ts
index 0413164e58..93b4b36f38 100644
--- a/packages/x-components/src/x-modules/facets/entities/__tests__/utils.ts
+++ b/packages/x-components/src/x-modules/facets/entities/__tests__/utils.ts
@@ -1,6 +1,5 @@
 import { EditableNumberRangeFilter, Filter, Facet, isHierarchicalFilter } from '@empathyco/x-types';
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { resetStoreXModuleState } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { arrayToObject } from '../../../../utils/array';
@@ -15,8 +14,6 @@ import { flatHierarchicalFilters } from '../../utils';
  * @returns A store with the {@link facetsXStoreModule} registered.
  */
 export function prepareFacetsStore(filters?: Filter[]): Store<RootXStoreState> {
-  const vue = createLocalVue();
-  vue.use(Vuex);
   const store = new Store({
     modules: {
       x: {
diff --git a/packages/x-components/src/x-modules/facets/service/__tests__/facets-service.spec.ts b/packages/x-components/src/x-modules/facets/service/__tests__/facets-service.spec.ts
index c1d9440063..9c57555487 100644
--- a/packages/x-components/src/x-modules/facets/service/__tests__/facets-service.spec.ts
+++ b/packages/x-components/src/x-modules/facets/service/__tests__/facets-service.spec.ts
@@ -1,4 +1,5 @@
 import { EditableNumberRangeFilter, Filter, Facet } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
 import {
   createEditableNumberRangeFacetStub,
   createHierarchicalFacetStub,
@@ -40,8 +41,10 @@ function prepareFacetsService(
   filterEntityFactory: FilterEntityFactory = new FilterEntityFactory()
 ): FacetsServiceTestAPI {
   XPlugin.resetInstance();
-  installNewXPlugin();
   XPlugin.registerXModule(facetsXModule);
+  const plugin = installNewXPlugin();
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  mount({}, { global: { plugins: [plugin] } });
 
   return {
     service: new DefaultFacetsService(filterEntityFactory),
@@ -736,9 +739,10 @@ interface FacetsServiceTestAPI {
 /**
  * Excludes the filters property from the given facet.
  *
- * @param facet - The full facet from whom exclude its filter property.
+ * @param facet - The full facet.
  * @returns The given facet without the `filters` property.
  */
-function omitFiltersProperty({ filters, ...facet }: Facet): Omit<Facet, 'filters'> {
-  return facet;
+function omitFiltersProperty(facet: Facet): Omit<Facet, 'filters'> {
+  const { filters, ...rest } = facet;
+  return rest;
 }
diff --git a/packages/x-components/src/x-modules/facets/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/facets/store/__tests__/getters.spec.ts
index c9ed2c34da..c46cbd0da6 100644
--- a/packages/x-components/src/x-modules/facets/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/store/__tests__/getters.spec.ts
@@ -1,6 +1,5 @@
 import { Facet, Filter } from '@empathyco/x-types';
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import {
   createEditableNumberRangeFacetStub,
   createHierarchicalFacetStub,
@@ -28,8 +27,6 @@ describe('testing facets module getters', () => {
     facets: Omit<Facet, 'filters'>[] = [],
     stickyFilters: Filter[] = []
   ): SafeStore<FacetsState, FacetsGetters, FacetsMutations, FacetsActions> {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
     const store = new Store<FacetsState>(facetsXStoreModule as any);
     resetFacetsStateWith(store, {
       filters: arrayToObject(filters, 'id'),
diff --git a/packages/x-components/src/x-modules/facets/store/module.ts b/packages/x-components/src/x-modules/facets/store/module.ts
index c4e6a0df50..4c258baf8e 100644
--- a/packages/x-components/src/x-modules/facets/store/module.ts
+++ b/packages/x-components/src/x-modules/facets/store/module.ts
@@ -1,5 +1,4 @@
 import { Facet } from '@empathyco/x-types';
-import Vue from 'vue';
 import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import { setQuery } from '../../../store/utils/query.utils';
 import { facets } from './getters/facets.getter';
@@ -9,7 +8,7 @@ import { FacetGroupEntry, FacetsXStoreModule } from './types';
 import { selectedFiltersForRequest } from './getters/selected-filters-for-request.getter';
 
 /**
- * {@link XStoreModule} For the facets module.
+ * {@link XStoreModule} For the facets' module.
  *
  * @internal
  */
@@ -34,39 +33,39 @@ export const facetsXStoreModule: FacetsXStoreModule = {
   mutations: {
     mutateFilter(state, { filter, newFilterState }) {
       const newFilter = Object.assign(filter, newFilterState);
-      Vue.set(state.filters, newFilter.id, newFilter);
+      state.filters[newFilter.id] = newFilter;
     },
     setFilters(state, filters) {
-      filters.forEach(filter => Vue.set(state.filters, filter.id, filter));
+      filters.forEach(filter => (state.filters[filter.id] = filter));
     },
     setPreselectedFilters(state, filters) {
       state.preselectedFilters = filters;
     },
     removeFilter(state, { id }) {
-      Vue.delete(state.filters, id);
+      delete state.filters[id];
     },
     removeFilters(state, filters) {
-      filters.forEach(({ id }) => Vue.delete(state.filters, id));
+      filters.forEach(({ id }) => delete state.filters[id]);
     },
     setFacetGroup(state, { facetId, groupId }: FacetGroupEntry) {
-      Vue.set(state.groups, facetId, groupId);
+      state.groups[facetId] = groupId;
     },
     removeFacet(state, { id }) {
-      Vue.delete(state.facets, id);
+      delete state.facets[id];
     },
     setFacet(state, facet: Facet) {
-      Vue.set(state.facets, facet.id, facet);
+      state.facets[facet.id] = facet;
     },
     setConfig,
     mergeConfig,
     setQuery,
     setStickyFilter(state, filter) {
       if (!state.stickyFilters[filter.id]) {
-        Vue.set(state.stickyFilters, filter.id, filter);
+        state.stickyFilters[filter.id] = filter;
       }
     },
     removeStickyFilter(state, filter) {
-      Vue.delete(state.stickyFilters, filter.id);
+      delete state.stickyFilters[filter.id];
     },
     clearStickyFilters(state) {
       state.stickyFilters = {};
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts
index 8f05db5b31..93e7515a5a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts
@@ -1,25 +1,31 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
-import { RootXStoreState } from '../../../../store/store.types';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { Store } from 'vuex';
+import { XPlugin } from '../../../../plugins';
+import { RootXStoreState } from '../../../../store';
 import { installNewXPlugin } from '../../../../__tests__/utils';
+import { historyQueriesXModule } from '../../x-module';
 import ClearHistoryQueries from '../clear-history-queries.vue';
 import { resetXHistoryQueriesStateWith } from './utils';
 
-describe('testing ClearHistoryQueries component', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+function render() {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-
-  beforeEach(() => {
-    resetXHistoryQueriesStateWith(store);
+  const wrapper = mount(ClearHistoryQueries, {
+    global: { plugins: [installNewXPlugin({ store, initialXModules: [historyQueriesXModule] })] }
   });
 
+  return {
+    store,
+    wrapper
+  };
+}
+
+describe('testing ClearHistoryQueries component', () => {
   it('is disabled if there are not history queries', async () => {
-    const clearHistoryQueries = mount(ClearHistoryQueries, { localVue, store });
+    const { wrapper, store } = render();
 
-    expect(clearHistoryQueries.attributes().disabled).toEqual('disabled');
+    expect(wrapper.attributes()).toHaveProperty('disabled');
 
     resetXHistoryQueriesStateWith(store, {
       historyQueries: [
@@ -30,14 +36,16 @@ describe('testing ClearHistoryQueries component', () => {
         }
       ]
     });
-    await localVue.nextTick();
-    expect(clearHistoryQueries.attributes()).not.toHaveProperty('disabled');
+    await nextTick();
+
+    expect(wrapper.attributes()).not.toHaveProperty('disabled');
   });
 
   it('emits UserPressedClearHistoryQueries when clicked', async () => {
+    const { wrapper, store } = render();
     const listener = jest.fn();
-    const clearHistoryQueries = mount(ClearHistoryQueries, { localVue, store });
-    clearHistoryQueries.vm.$x.on('UserPressedClearHistoryQueries', true).subscribe(listener);
+    XPlugin.bus.on('UserPressedClearHistoryQueries', true).subscribe(listener);
+
     resetXHistoryQueriesStateWith(store, {
       historyQueries: [
         {
@@ -48,15 +56,15 @@ describe('testing ClearHistoryQueries component', () => {
       ]
     });
 
-    await localVue.nextTick();
-    clearHistoryQueries.trigger('click');
+    await nextTick();
+    await wrapper.trigger('click');
 
     expect(listener).toHaveBeenCalledTimes(1);
     expect(listener).toHaveBeenCalledWith({
       eventPayload: undefined,
       metadata: {
         moduleName: 'historyQueries',
-        target: clearHistoryQueries.element,
+        target: wrapper.element,
         location: 'none',
         replaceable: true
       }
@@ -64,29 +72,25 @@ describe('testing ClearHistoryQueries component', () => {
   });
 
   it('has an slot rendering a message by default', () => {
-    const clearHistoryQueries = mount(ClearHistoryQueries, {
-      localVue,
-      store
-    });
+    const { wrapper } = render();
 
-    expect(clearHistoryQueries.vm.$el.textContent).toEqual('✕');
+    expect(wrapper.element.textContent).toEqual('✕');
   });
 
   it('has a default slot to customize its contents', () => {
-    const clearHistoryQueries = mount(ClearHistoryQueries, {
-      localVue,
-      store,
+    const store = new Store<DeepPartial<RootXStoreState>>({});
+
+    const wrapper = mount(ClearHistoryQueries, {
+      global: { plugins: [installNewXPlugin({ store, initialXModules: [historyQueriesXModule] })] },
       slots: {
         default: {
           template: '<span class="x-clear-history-queries__text">Clear</span>'
         }
       }
     });
-    const renderedSlotHTML = clearHistoryQueries.element.querySelector(
-      '.x-clear-history-queries__text'
-    );
+    const renderedSlot = wrapper.find('.x-clear-history-queries__text');
 
-    expect(renderedSlotHTML).toBeDefined();
-    expect(renderedSlotHTML!.textContent).toEqual('Clear');
+    expect(renderedSlot).toBeDefined();
+    expect(renderedSlot.text()).toEqual('Clear');
   });
 });
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries-switch.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries-switch.spec.ts
index c5be783018..41b23dcced 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries-switch.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries-switch.spec.ts
@@ -1,57 +1,57 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
 import { HistoryQuery } from '@empathyco/x-types';
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { Store } from 'vuex';
 import { RootXStoreState } from '../../../../store/store.types';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { historyQueriesXModule } from '../../x-module';
 import HistoryQueriesSwitch from '../history-queries-switch.vue';
 import { createHistoryQueries } from '../../../../__stubs__/index';
+import { XPlugin } from '../../../../plugins/x-plugin';
 import { resetXHistoryQueriesStateWith } from './utils';
 
-function renderHistoryQueriesSwitch({
+async function renderHistoryQueriesSwitch({
   historyQueries = createHistoryQueries('jacket', 'tshirt'),
   isEnabled = false
-}: HistoryQueriesSwitchOptions = {}): HistoryQueriesSwitchAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
+}: HistoryQueriesSwitchOptions = {}): Promise<HistoryQueriesSwitchAPI> {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [historyQueriesXModule] }, localVue);
-  resetXHistoryQueriesStateWith(store, { isEnabled, historyQueries });
 
   const wrapper = mount(HistoryQueriesSwitch, {
-    localVue,
-    store
+    global: {
+      plugins: [installNewXPlugin({ store, initialXModules: [historyQueriesXModule] })]
+    }
   });
 
+  resetXHistoryQueriesStateWith(store, { isEnabled, historyQueries });
+  await nextTick();
+
   return {
     wrapper
   };
 }
 
 describe('testing HistoryQueriesSwitch component', () => {
-  it('is an XComponent which has an XModule', () => {
-    const { wrapper } = renderHistoryQueriesSwitch();
+  it('is an XComponent which has an XModule', async () => {
+    const { wrapper } = await renderHistoryQueriesSwitch();
 
     expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('historyQueries');
   });
 
-  it('should emit proper events when toggling its state', () => {
-    const { wrapper } = renderHistoryQueriesSwitch();
+  it('should emit proper events when toggling its state', async () => {
+    const { wrapper } = await renderHistoryQueriesSwitch();
     const enableListener = jest.fn();
     const disableListener = jest.fn();
 
-    wrapper.vm.$x.on('UserClickedEnableHistoryQueries').subscribe(enableListener);
-    wrapper.vm.$x.on('UserClickedDisableHistoryQueries').subscribe(disableListener);
+    XPlugin.bus.on('UserClickedEnableHistoryQueries').subscribe(enableListener);
+    XPlugin.bus.on('UserClickedDisableHistoryQueries').subscribe(disableListener);
 
     wrapper.trigger('click');
 
     expect(enableListener).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.$store.state.x.historyQueries.isEnabled).toBe(true);
+    expect(XPlugin.store.state.x.historyQueries.isEnabled).toBe(true);
 
     wrapper.trigger('click');
 
@@ -59,19 +59,18 @@ describe('testing HistoryQueriesSwitch component', () => {
   });
 
   it('should emit confirm disable event if there are not history queries', async () => {
-    const { wrapper } = renderHistoryQueriesSwitch({
+    const { wrapper } = await renderHistoryQueriesSwitch({
       historyQueries: [],
       isEnabled: true
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedConfirmDisableHistoryQueries').subscribe(listener);
+    XPlugin.bus.on('UserClickedConfirmDisableHistoryQueries').subscribe(listener);
 
     wrapper.trigger('click');
-
-    await new Promise(resolve => setTimeout(resolve));
+    await flushPromises();
 
     expect(listener).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.$store.state.x.historyQueries.isEnabled).toBe(false);
+    expect(XPlugin.store.state.x.historyQueries.isEnabled).toBe(false);
   });
 });
 
@@ -90,5 +89,5 @@ interface HistoryQueriesSwitchOptions {
  */
 interface HistoryQueriesSwitchAPI {
   /** The wrapper for HistoryQueriesSwitch component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries.spec.ts
index ffc515e50b..ec370d0e7a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/history-queries.spec.ts
@@ -1,7 +1,8 @@
 import { HistoryQuery } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import {
   createHistoryQueries,
   createHistoryQuery
@@ -17,13 +18,8 @@ function renderHistoryQueries({
   historyQueries = createHistoryQueries('chocolate', 'milk chocolate', 'chocolate milk'),
   maxItemsToRender,
   template = '<HistoryQueries v-bind="$attrs" />'
-}: RenderHistoryQueriesOptions = {}): RenderHistoryQueriesApi {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+}: RenderHistoryQueriesOptions = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [historyQueriesXModule] }, localVue);
-  resetXHistoryQueriesStateWith(store, { historyQueries });
-
   const wrapper = mount(
     {
       template,
@@ -33,18 +29,24 @@ function renderHistoryQueries({
       }
     },
     {
-      localVue,
-      store,
-      propsData: {
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [historyQueriesXModule] })]
+      },
+      props: {
         maxItemsToRender
-      }
+      },
+      store
     }
   );
 
+  resetXHistoryQueriesStateWith(store, { historyQueries });
+
   return {
     wrapper: wrapper.findComponent(HistoryQueries),
     historyQueries,
-    async setMaxItemsToRender(max) {
+    async setMaxItemsToRender(max: number) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       return await wrapper.setProps({ maxItemsToRender: max });
     },
     getSuggestionItemWrappers() {
@@ -62,22 +64,26 @@ describe('testing Query Suggestions component', () => {
 
   it('does not render anything when suggestions are empty', () => {
     const { wrapper } = renderHistoryQueries({ historyQueries: [] });
-    expect(wrapper.html()).toBe('');
+    expect(wrapper.find('x-history-queries').exists()).toBe(false);
   });
 
-  it('renders the state list of suggestions', () => {
+  it('renders the state list of suggestions', async () => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { getSuggestionItemWrappers, historyQueries } = renderHistoryQueries({
       historyQueries: createHistoryQueries('chocolate', 'milk chocolate')
     });
 
+    await nextTick();
+
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
       expect(itemWrapper.text()).toEqual(`${historyQueries[index].query}✕`);
     });
   });
 
-  it('allows to render a custom query suggestion', () => {
+  it('allows to render a custom query suggestion', async () => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { getSuggestionItemWrappers, historyQueries } = renderHistoryQueries({
       historyQueries: createHistoryQueries('chocolate', 'milk chocolate'),
       template: `
@@ -90,17 +96,20 @@ describe('testing Query Suggestions component', () => {
       `
     });
 
+    await nextTick();
+
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
       expect(itemWrapper.get('.custom-suggestion').text()).toEqual(
-        `🔍 ${historyQueries[index].query}`
+        `🔍${historyQueries[index].query}`
       );
       expect(itemWrapper.find(getDataTestSelector('history-query')).exists()).toBe(false);
     });
   });
 
-  it('allows to render a custom suggestion content', () => {
+  it('allows to render a custom suggestion content', async () => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { getSuggestionItemWrappers, historyQueries } = renderHistoryQueries({
       historyQueries: createHistoryQueries('chocolate', 'milk chocolate'),
       template: `
@@ -111,15 +120,18 @@ describe('testing Query Suggestions component', () => {
       `
     });
 
+    await nextTick();
+
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
-      expect(itemWrapper.text()).toEqual(`🔍 ${historyQueries[index].query}✕`);
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
+      expect(itemWrapper.text()).toEqual(`🔍${historyQueries[index].query}✕`);
       expect(itemWrapper.find(getDataTestSelector('history-query')).exists()).toBe(true);
     });
   });
 
-  it('allows to render a custom remove suggestion content', () => {
+  it('allows to render a custom remove suggestion content', async () => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { getSuggestionItemWrappers, historyQueries } = renderHistoryQueries({
       historyQueries: createHistoryQueries('chocolate', 'milk chocolate'),
       template: `
@@ -130,17 +142,20 @@ describe('testing Query Suggestions component', () => {
       `
     });
 
+    await nextTick();
+
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
       const query = historyQueries[index].query;
-      expect(itemWrapper.text()).toEqual(`${query}❌ ${query}`);
+      expect(itemWrapper.text()).toEqual(`${query}❌${query}`);
       expect(itemWrapper.find(getDataTestSelector('history-query')).exists()).toBe(true);
     });
   });
 
   // eslint-disable-next-line max-len
   it('renders at most the number of HistoryQuery defined by `maxItemsToRender` prop', async () => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { getSuggestionItemWrappers, setMaxItemsToRender, historyQueries } = renderHistoryQueries(
       {
         historyQueries: createHistoryQueries('shirt', 'jeans', 'tshirt', 'jumper')
@@ -148,16 +163,17 @@ describe('testing Query Suggestions component', () => {
     );
 
     await setMaxItemsToRender(historyQueries.length - 1);
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(historyQueries.length - 1);
+    expect(getSuggestionItemWrappers()).toHaveLength(historyQueries.length - 1);
 
     await setMaxItemsToRender(historyQueries.length);
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(historyQueries.length);
+    expect(getSuggestionItemWrappers()).toHaveLength(historyQueries.length);
 
     await setMaxItemsToRender(historyQueries.length + 1);
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(historyQueries.length);
+    expect(getSuggestionItemWrappers()).toHaveLength(historyQueries.length);
   });
 
-  it('renders only history queries with results', () => {
+  it('renders only history queries with results', async () => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { getSuggestionItemWrappers } = renderHistoryQueries({
       historyQueries: [
         createHistoryQuery({ query: 'cachelos' }),
@@ -165,9 +181,11 @@ describe('testing Query Suggestions component', () => {
         createHistoryQuery({ query: 'licor cafe', totalResults: 20 })
       ]
     });
+
+    await nextTick();
     expect(getSuggestionItemWrappers()).toHaveLength(2);
-    expect(getSuggestionItemWrappers().at(0).text()).toEqual('cachelos✕');
-    expect(getSuggestionItemWrappers().at(1).text()).toEqual('licor cafe✕');
+    expect(getSuggestionItemWrappers().at(0)?.text()).toEqual('cachelos✕');
+    expect(getSuggestionItemWrappers().at(1)?.text()).toEqual('licor cafe✕');
   });
 });
 
@@ -175,18 +193,7 @@ interface RenderHistoryQueriesOptions {
   /** The suggestions list to render. */
   historyQueries?: HistoryQuery[];
   /** The maximum number of items to render. */
-  maxItemsToRender?: string;
+  maxItemsToRender?: number;
   /** The template to render. */
   template?: string;
 }
-
-interface RenderHistoryQueriesApi {
-  /** HistoryQueries component testing wrapper. */
-  wrapper: Wrapper<Vue>;
-  /** Retrieves the list item of each suggestion. */
-  getSuggestionItemWrappers: () => WrapperArray<Vue>;
-  /** Updates the maximum number of items to render. */
-  setMaxItemsToRender: (max: number) => Promise<void>;
-  /** Rendered suggestions data. */
-  historyQueries: HistoryQuery[];
-}
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/history-query.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/history-query.spec.ts
index f5f301a0d4..d728c8ced7 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/history-query.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/history-query.spec.ts
@@ -1,13 +1,12 @@
-import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
-import { ComponentOptions } from 'vue';
-import { createHistoryQuery } from '../../../../__stubs__/history-queries-stubs.factory';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
+import { createHistoryQuery } from '../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { RootXStoreState } from '../../../../store/store.types';
-import { WireMetadata } from '../../../../wiring/wiring.types';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { RootXStoreState } from '../../../../store';
+import { WireMetadata } from '../../../../wiring';
 import { historyQueriesXModule } from '../../x-module';
 import HistoryQuery from '../history-query.vue';
 import { XPlugin } from '../../../../plugins/index';
@@ -17,45 +16,36 @@ function renderHistoryQuery({
   suggestion = createHistoryQuery({ query: 'milk' }),
   query = '',
   template = '<HistoryQuery v-bind="$attrs"/>',
-  removeButtonClass,
-  suggestionClass,
-  wrapperComponentOptions
-}: RenderHistoryQueryOptions = {}): RenderHistoryQueryApi {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  removeButtonClass = '',
+  suggestionClass = '',
+  wrapperComponentOptions = {}
+} = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [historyQueriesXModule] }, localVue);
-  resetXHistoryQueriesStateWith(store, { query });
 
   const wrapper = mount(
     {
       template,
       inheritAttrs: false,
-      components: {
-        HistoryQuery
-      },
+      components: { HistoryQuery },
       ...wrapperComponentOptions
     },
     {
-      localVue,
-      propsData: { suggestion, removeButtonClass, suggestionClass },
-      store
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [historyQueriesXModule] })]
+      },
+      props: { suggestion, removeButtonClass, suggestionClass }
     }
   );
 
+  resetXHistoryQueriesStateWith(store, { query });
+
   return {
     wrapper: wrapper.findComponent(HistoryQuery),
     suggestion,
     emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
-    getSuggestionWrapper() {
-      return wrapper.get(getDataTestSelector('history-query'));
-    },
-    getRemoveWrapper() {
-      return wrapper.get(getDataTestSelector('remove-history-query'));
-    },
-    getMatchingPart() {
-      return wrapper.get(getDataTestSelector('matching-part'));
-    }
+    getSuggestionWrapper: () => wrapper.get(getDataTestSelector('history-query')),
+    getRemoveWrapper: () => wrapper.get(getDataTestSelector('remove-history-query')),
+    getMatchingPart: () => wrapper.get(getDataTestSelector('matching-part'))
   };
 }
 
@@ -66,6 +56,7 @@ describe('testing history-query component', () => {
 
   it('is an XComponent that belongs to the history queries', () => {
     const { wrapper } = renderHistoryQuery();
+
     expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('historyQueries');
   });
@@ -74,15 +65,18 @@ describe('testing history-query component', () => {
     const { getSuggestionWrapper } = renderHistoryQuery({
       suggestion: createHistoryQuery({ query: 'milk' })
     });
+
     expect(getSuggestionWrapper().text()).toEqual('milk');
   });
 
-  it('highlights the suggestion matching parts with the state query', () => {
+  it('highlights the suggestion matching parts with the state query', async () => {
     const { getSuggestionWrapper, getMatchingPart } = renderHistoryQuery({
       suggestion: createHistoryQuery({ query: 'baileys' }),
       query: 'Bá'
     });
 
+    await nextTick();
+
     expect(getMatchingPart().text()).toEqual('ba');
     expect(getSuggestionWrapper().text()).toEqual('baileys');
   });
@@ -96,7 +90,7 @@ describe('testing history-query component', () => {
 
     const expectedMetadata = expect.objectContaining<Partial<WireMetadata>>({
       moduleName: 'historyQueries',
-      target: getSuggestionWrapper().element,
+      target: getSuggestionWrapper().element as HTMLElement,
       feature: 'history_query'
     });
     expect(emitSpy).toHaveBeenCalledWith('UserAcceptedAQuery', suggestion.query, expectedMetadata);
@@ -108,19 +102,16 @@ describe('testing history-query component', () => {
     const { getSuggestionWrapper } = renderHistoryQuery({
       suggestion: createHistoryQuery({ query: 'baileys' }),
       template: `
-      <HistoryQuery v-bind="$attrs" #default="{ suggestion }">
-        <span>🔍</span>
-        <span>{{ suggestion.query }}</span>
-      </HistoryQuery>
-      `
+        <HistoryQuery v-bind="$attrs" #default="{ suggestion }">
+          <span>🔍</span>
+          <span>{{ suggestion.query }}</span>
+        </HistoryQuery>`
     });
 
-    expect(getSuggestionWrapper().text()).toEqual('🔍 baileys');
+    expect(getSuggestionWrapper().text()).toEqual('🔍baileys');
   });
 
-  // TODO: Enable test when BaseEventButton component is migrated
-  // eslint-disable-next-line jest/no-disabled-tests,max-len
-  it.skip('emits `UserPressedRemoveHistoryQuery` when `RemoveHistoryQuery` button is clicked', () => {
+  it('emits `UserPressedRemoveHistoryQuery` when `RemoveHistoryQuery` button is clicked', () => {
     const { emitSpy, suggestion, getRemoveWrapper } = renderHistoryQuery({
       suggestion: createHistoryQuery({ query: 'milk' })
     });
@@ -133,7 +124,7 @@ describe('testing history-query component', () => {
       suggestion,
       expect.objectContaining<Partial<WireMetadata>>({
         moduleName: 'historyQueries',
-        target: getRemoveWrapper().element
+        target: getRemoveWrapper().element as HTMLElement
       })
     );
   });
@@ -142,10 +133,9 @@ describe('testing history-query component', () => {
     const { getRemoveWrapper } = renderHistoryQuery({
       suggestion: createHistoryQuery({ query: 'cruzcampo' }),
       template: `
-      <HistoryQuery v-bind="$attrs" #remove-button-content="{ suggestion }">
-        Remove {{ suggestion.query }} ❌
-      </HistoryQuery>
-      `
+        <HistoryQuery v-bind="$attrs" #remove-button-content="{ suggestion }">
+          Remove {{ suggestion.query }} ❌
+        </HistoryQuery>`
     });
 
     expect(getRemoveWrapper().text()).toBe('Remove cruzcampo ❌');
@@ -157,6 +147,7 @@ describe('testing history-query component', () => {
       query: 'Bá',
       removeButtonClass: 'custom-class'
     });
+
     expect(getRemoveWrapper().classes('custom-class')).toBe(true);
   });
 
@@ -166,6 +157,7 @@ describe('testing history-query component', () => {
       query: 'Bá',
       suggestionClass: 'custom-class'
     });
+
     expect(getSuggestionWrapper().classes('custom-class')).toBe(true);
   });
 
@@ -175,48 +167,13 @@ describe('testing history-query component', () => {
 
     const { wrapper } = renderHistoryQuery({
       suggestion,
-      template: `
-        <HistoryQuery v-bind="$attrs" @click="handleClick"/>
-      `,
-      wrapperComponentOptions: {
-        methods: {
-          handleClick
-        }
-      }
+      template: `<HistoryQuery v-bind="$attrs" @click="handleClick"/>`,
+      wrapperComponentOptions: { methods: { handleClick } }
     });
 
     wrapper.get(getDataTestSelector('history-query')).trigger('click');
+
     expect(handleClick).toHaveBeenCalledTimes(1);
     expect(handleClick).toHaveBeenCalledWith(suggestion, expect.any(MouseEvent));
   });
 });
-
-interface RenderHistoryQueryOptions {
-  /** Options to pass to the wrapper component. */
-  wrapperComponentOptions?: ComponentOptions<Vue>;
-  /** The suggestion data to render. */
-  suggestion?: HistoryQueryModel;
-  /** The query that the suggestions belong to. */
-  query?: string;
-  /** The template to render. */
-  template?: string;
-  /** Class to add to the node wrapping the remove history query button. */
-  removeButtonClass?: string;
-  /** Class to add to the node wrapping the history query suggestion button. */
-  suggestionClass?: string;
-}
-
-interface RenderHistoryQueryApi {
-  /** Testing wrapper of the {@link HistoryQuery} component. */
-  wrapper: Wrapper<Vue>;
-  /** Retrieves the suggestion wrapper of the {@link HistoryQuery} component. */
-  getSuggestionWrapper: () => Wrapper<Vue>;
-  /** Retrieves the remove wrapper of the {@link HistoryQuery} component. */
-  getRemoveWrapper: () => Wrapper<Vue>;
-  /** Retrieves the wrapper that matches the query in the {@link HistoryQuery} component. */
-  getMatchingPart: () => Wrapper<Vue>;
-  /** The {@link XBus.emit} spy. */
-  emitSpy: jest.SpyInstance;
-  /** Rendered {@link HistoryQueryModel} model data. */
-  suggestion: HistoryQueryModel;
-}
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
index d234dd5383..6ad652d2ae 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
@@ -1,8 +1,8 @@
 import { HistoryQuery } from '@empathyco/x-types';
 import { DeepPartial, forEach } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import {
   createHistoryQueries,
   createHistoryQuery
@@ -15,6 +15,7 @@ import { SnippetConfig } from '../../../../x-installer/api/api.types';
 import { historyQueriesXModule } from '../../x-module';
 import MyHistory from '../my-history.vue';
 import HistoryQueryComponent from '../history-query.vue';
+import { XPlugin } from '../../../../plugins/x-plugin';
 import { resetXHistoryQueriesStateWith } from './utils';
 
 const historyQueries: HistoryQuery[] = [
@@ -47,13 +48,7 @@ function renderMyHistory({
   snippetConfig,
   queriesListClass
 }: MyHistoryOptions = {}): MyHistoryAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [historyQueriesXModule] }, localVue);
-  resetXHistoryQueriesStateWith(store, { historyQueries });
-
   const wrapper = mount(
     {
       template,
@@ -67,25 +62,29 @@ function renderMyHistory({
       props: ['locale', 'queriesListClass']
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [historyQueriesXModule] })]
+      },
       store,
-      propsData: {
+      props: {
         locale,
         queriesListClass
       }
     }
   );
+
+  resetXHistoryQueriesStateWith(store, { historyQueries });
   return {
     wrapper: wrapper.findComponent(MyHistory),
     search(query) {
-      wrapper.vm.$x.emit('UserAcceptedAQuery', query);
-      return wrapper.vm.$nextTick();
+      XPlugin.bus.emit('UserAcceptedAQuery', query);
+      return nextTick();
     },
     getListItems() {
       return wrapper.findAll(getDataTestSelector('suggestion-item'));
     },
     findAllInWrapper(selector) {
-      return wrapper.findAll(getDataTestSelector(selector)).wrappers;
+      return wrapper.findAll(getDataTestSelector(selector));
     }
   };
 }
@@ -99,10 +98,10 @@ describe('testing MyHistory component', () => {
 
   it('does not render the component if history is empty', () => {
     const { wrapper } = renderMyHistory();
-    expect(wrapper.html()).toEqual('');
+    expect(wrapper.find('x-my-history').exists()).toBe(false);
   });
 
-  it('renders the list of searched queries group by date', () => {
+  it('renders the list of searched queries group by date', async () => {
     const historyQueriesGroupedByDate = {
       'Monday, April 18, 2022': [historyQueries[0], historyQueries[1]],
       'Wednesday, April 6, 2022': [historyQueries[2], historyQueries[3]]
@@ -112,10 +111,11 @@ describe('testing MyHistory component', () => {
       snippetConfig: { ...baseSnippetConfig, lang: 'en' }
     });
 
+    await nextTick();
     expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, 'en');
   });
 
-  it('renders the date using the locale prop when there is no snippetConfig', () => {
+  it('renders the date using the locale prop when there is no snippetConfig', async () => {
     const historyQueriesGroupedByDate = {
       'lunes, 18 de abril de 2022': [historyQueries[0], historyQueries[1]],
       'miércoles, 6 de abril de 2022': [historyQueries[2], historyQueries[3]]
@@ -125,10 +125,12 @@ describe('testing MyHistory component', () => {
       historyQueries: historyQueries,
       locale
     });
+
+    await nextTick();
     expectValidHistoryContent(historyQueriesGroupedByDate, findAllInWrapper, locale);
   });
 
-  it('allows changing history query content and render the list of history queries', () => {
+  it('allows changing history query content and render the list of history queries', async () => {
     const historyQueries = createHistoryQueries(
       'moura',
       'calamares',
@@ -157,6 +159,8 @@ describe('testing MyHistory component', () => {
       historyQueries
     });
 
+    await nextTick();
+
     const suggestionIconWrappers = findAllInWrapper('suggestion-history-icon');
     const suggestionRemoveIconWrappers = findAllInWrapper('suggestion-remove-icon');
     const suggestionContentWrappers = findAllInWrapper('suggestion-content-slot');
@@ -170,7 +174,7 @@ describe('testing MyHistory component', () => {
     });
   });
 
-  it('allows changing the history query', () => {
+  it('allows changing the history query', async () => {
     const historyQuery = createHistoryQuery({
       query: 'testQuery',
       timestamp: Date.parse('2023-01-23T09:40:00')
@@ -190,17 +194,20 @@ describe('testing MyHistory component', () => {
       historyQueries: [historyQuery]
     });
 
+    await nextTick();
+
     expect(wrapper.get(getDataTestSelector('suggestion-query')).text()).toBe('testQuery');
     expect(wrapper.get(getDataTestSelector('suggestion-date')).text().replace(/\s/g, '')).toEqual(
       '09:40AM'
     );
   });
 
-  it('allows to add classes to the queries list', () => {
+  it('allows to add classes to the queries list', async () => {
     const { wrapper } = renderMyHistory({
       historyQueries,
       queriesListClass: 'custom-class'
     });
+    await nextTick();
     expect(wrapper.find(getDataTestSelector('my-history-queries')).classes('custom-class')).toBe(
       true
     );
@@ -221,8 +228,8 @@ describe('testing MyHistory component', () => {
           hour: '2-digit',
           minute: '2-digit'
         });
-        expect(historyItemWrappers?.at(historyQueryIndex).text()).toMatch(
-          `${historyQuery.query} - ${hour} ✕`
+        expect(historyItemWrappers?.at(historyQueryIndex)?.text()).toMatch(
+          `${historyQuery.query} - ${hour}✕`
         );
       });
     });
@@ -250,14 +257,14 @@ interface MyHistoryOptions {
  */
 interface MyHistoryAPI {
   /** The wrapper for my history component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Helper method to search a query. */
   search: (query: string) => Promise<void>;
   /**
    * Retrieves the wrapper for the items of the list rendered by the {@link MyHistory}
    * component.
    */
-  getListItems: () => WrapperArray<Vue>;
+  getListItems: () => any[];
   /** Retrieves the wrapper for the items that matches with the selector. */
-  findAllInWrapper: (selector: string) => Wrapper<Vue>[];
+  findAllInWrapper: (selector: string) => DOMWrapper<Element>[];
 }
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts
index b883c03ee9..a86bc6288a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts
@@ -2,9 +2,9 @@ import { HistoryQuery } from '@empathyco/x-types';
 import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import RemoveHistoryQuery from '../remove-history-query.vue';
+import { XPlugin } from '../../../../plugins/index';
 
 describe('testing RemoveHistoryQuery component', () => {
-  const [, localVue] = installNewXPlugin();
   const historyQuery: HistoryQuery = {
     modelName: 'HistoryQuery',
     query: 'Saltiquinos',
@@ -15,12 +15,14 @@ describe('testing RemoveHistoryQuery component', () => {
     const listener = jest.fn();
 
     const removeHistoryQuery = mount(RemoveHistoryQuery, {
-      localVue,
-      propsData: {
+      props: {
         historyQuery
+      },
+      global: {
+        plugins: [installNewXPlugin()]
       }
     });
-    removeHistoryQuery.vm.$x.on('UserPressedRemoveHistoryQuery', true).subscribe(listener);
+    XPlugin.bus.on('UserPressedRemoveHistoryQuery', true).subscribe(listener);
 
     removeHistoryQuery.trigger('click');
 
@@ -38,9 +40,11 @@ describe('testing RemoveHistoryQuery component', () => {
 
   it('has a default slot with a default message', () => {
     const removeHistoryQuery = mount(RemoveHistoryQuery, {
-      localVue,
-      propsData: {
+      props: {
         historyQuery
+      },
+      global: {
+        plugins: [installNewXPlugin()]
       }
     });
 
@@ -50,21 +54,24 @@ describe('testing RemoveHistoryQuery component', () => {
   it('has a default slot to customize its contents', () => {
     const slotTemplate = '<span class="x-remove-history-query__text">Remove</span>';
     const removeHistoryQuery = mount(RemoveHistoryQuery, {
-      localVue,
       slots: {
         default: {
           template: slotTemplate
         }
       },
-      propsData: {
+      props: {
         historyQuery
+      },
+      global: {
+        plugins: [installNewXPlugin()]
       }
     });
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     const renderedSlotHTML = removeHistoryQuery.element.querySelector(
       '.x-remove-history-query__text'
     );
 
     expect(renderedSlotHTML).toBeDefined();
-    expect(renderedSlotHTML!.textContent).toEqual('Remove');
+    expect(renderedSlotHTML.textContent).toEqual('Remove');
   });
 });
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index 44026e2fc9..ff29b2f701 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseSwitch @change="toggle" :value="isEnabled" aria-label="Queries' history" />
+  <BaseSwitch @update:modelValue="toggle" :modelValue="isEnabled" aria-label="Queries' history" />
 </template>
 
 <script lang="ts">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index 1243fc01f6..69f260b6d8 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="historyQueriesWithResults"
     class="x-history-queries"
     data-test="history-queries"
@@ -67,7 +66,6 @@
       BaseSuggestions,
       HistoryQuery
     },
-    inheritAttrs: false,
     setup() {
       /**
        * The filtered list of history queries.
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index c789d4a3bd..0e37993a5e 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -206,7 +206,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-my-history {
     display: flex;
     flex-flow: column nowrap;
diff --git a/packages/x-components/src/x-modules/history-queries/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/history-queries/store/__tests__/actions.spec.ts
index c60b1fcb77..f7f67f9e51 100644
--- a/packages/x-components/src/x-modules/history-queries/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/store/__tests__/actions.spec.ts
@@ -1,7 +1,6 @@
 import { Filter, HistoryQuery, Result } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import {
   createHistoryQueries,
   createHistoryQuery
@@ -20,7 +19,6 @@ import { InternalSearchResponse } from '../../../search/index';
 import { resetHistoryQueriesStateWith } from './utils';
 
 describe('testing history queries module actions', () => {
-  Vue.use(Vuex);
   const store: SafeStore<
     HistoryQueriesState,
     HistoryQueriesGetters,
diff --git a/packages/x-components/src/x-modules/history-queries/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/history-queries/store/__tests__/getters.spec.ts
index 53b94cd82e..6a14e7fefb 100644
--- a/packages/x-components/src/x-modules/history-queries/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/store/__tests__/getters.spec.ts
@@ -1,6 +1,5 @@
 import { map } from '@empathyco/x-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import {
   createHistoryQueries,
   createHistoryQuery
@@ -10,7 +9,6 @@ import { HistoryQueriesState } from '../types';
 import { resetHistoryQueriesStateWith } from './utils';
 
 describe('testing history queries module gettters', () => {
-  Vue.use(Vuex);
   const gettersKeys = map(historyQueriesXStoreModule.getters, getter => getter);
   const store: Store<HistoryQueriesState> = new Store(historyQueriesXStoreModule as any);
 
diff --git a/packages/x-components/src/x-modules/history-queries/store/getters/history-queries.getter.ts b/packages/x-components/src/x-modules/history-queries/store/getters/history-queries.getter.ts
index 261507da8c..d9a8678f6d 100644
--- a/packages/x-components/src/x-modules/history-queries/store/getters/history-queries.getter.ts
+++ b/packages/x-components/src/x-modules/history-queries/store/getters/history-queries.getter.ts
@@ -50,9 +50,8 @@ export class HistoryQueriesGetter implements GettersClass<HistoryQueriesXStoreMo
 
 const historyQueriesGetter = new HistoryQueriesGetter();
 
-// eslint-disable-next-line jsdoc/require-description-complete-sentence
 /**
- * {@inheritDoc HistoryQueriesGetter.historyQueries}
+ * History Queries getter.
  *
  * @public
  */
diff --git a/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-result.spec.ts b/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-result.spec.ts
index 7812aa144a..bf8c65c7e8 100644
--- a/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-result.spec.ts
+++ b/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-result.spec.ts
@@ -1,29 +1,27 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { nextTick } from 'vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { createResultStub } from '../../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { IdentifierResult } from '../index';
+import { XDummyBus } from '../../../../__tests__/bus.dummy';
 import { resetStoreIdentifierResultState } from './utils';
 
 describe('testing IdentifierResult component', () => {
   const result = createResultStub('a022/3234');
 
-  let identifierResultWrapper: Wrapper<IdentifierResult>;
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-
-  beforeEach(() => {
-    identifierResultWrapper = mount(IdentifierResult, {
-      localVue,
-      store,
-      propsData: { result }
-    });
+  const store = createStore<DeepPartial<RootXStoreState>>({});
+  const bus = new XDummyBus();
+  const identifierResultWrapper = mount(IdentifierResult, {
+    global: {
+      plugins: [installNewXPlugin({ store }, bus)]
+    },
+    props: {
+      result
+    }
   });
 
   it('is an XComponent and has an XModule', () => {
@@ -33,7 +31,7 @@ describe('testing IdentifierResult component', () => {
 
   it('highlights the part of the identifier that matches the query', async () => {
     resetStoreIdentifierResultState(store, { query: 'A02232' });
-    await localVue.nextTick();
+    await nextTick();
 
     expect(getIdentifierResultSpanHtml()).toEqual(
       '<span class="x-identifier-result__matching-part">a022/32</span>34'
@@ -42,7 +40,7 @@ describe('testing IdentifierResult component', () => {
 
   it('highlights the part of the identifier that matches the query in different case', async () => {
     resetStoreIdentifierResultState(store, { query: 'a02232' });
-    await localVue.nextTick();
+    await nextTick();
 
     expect(getIdentifierResultSpanHtml()).toEqual(
       '<span class="x-identifier-result__matching-part">a022/32</span>34'
@@ -51,15 +49,15 @@ describe('testing IdentifierResult component', () => {
 
   it("doesn't render the identifier when there's no query", async () => {
     resetStoreIdentifierResultState(store, { query: '' });
-    await localVue.nextTick();
+    await nextTick();
 
-    expect(identifierResultWrapper.html()).toEqual('');
+    expect(identifierResultWrapper.text()).toEqual('');
   });
 
   // eslint-disable-next-line max-len
   it('highlights the part of the identifier  that matches the query with optional character', async () => {
     resetStoreIdentifierResultState(store, { query: 'a022/32' });
-    await localVue.nextTick();
+    await nextTick();
 
     expect(getIdentifierResultSpanHtml()).toEqual(
       '<span class="x-identifier-result__matching-part">a022/32</span>34'
@@ -69,7 +67,7 @@ describe('testing IdentifierResult component', () => {
   // eslint-disable-next-line max-len
   it('highlights the part of the identifier that matches the query ignoring whitespaces', async () => {
     resetStoreIdentifierResultState(store, { query: 'A 0 22 /3 2' });
-    await localVue.nextTick();
+    await nextTick();
 
     expect(getIdentifierResultSpanHtml()).toEqual(
       '<span class="x-identifier-result__matching-part">a022/32</span>34'
@@ -79,7 +77,7 @@ describe('testing IdentifierResult component', () => {
   // eslint-disable-next-line max-len
   it('highlights the part of the identifier that matches the query ignoring extra separators', async () => {
     resetStoreIdentifierResultState(store, { query: 'A/0/22/32' });
-    await localVue.nextTick();
+    await nextTick();
 
     expect(getIdentifierResultSpanHtml()).toEqual(
       '<span class="x-identifier-result__matching-part">a022/32</span>34'
@@ -88,7 +86,7 @@ describe('testing IdentifierResult component', () => {
 
   it("doesn't highlight if there is no match with the input query", async () => {
     resetStoreIdentifierResultState(store, { query: 'B022/32' });
-    await localVue.nextTick();
+    await nextTick();
 
     expect(getIdentifierResultSpanHtml()).toEqual('a022/3234');
   });
diff --git a/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-results.spec.ts b/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-results.spec.ts
index 59f6f42111..689e316be7 100644
--- a/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-results.spec.ts
+++ b/packages/x-components/src/x-modules/identifier-results/components/__tests__/identifier-results.spec.ts
@@ -1,118 +1,111 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
-import { BaseResultLink } from '../../../../components/index';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { RootXStoreState } from '../../../../store/store.types';
-import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
+import { mount } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
+import { Store } from 'vuex';
+import { getXComponentXModuleName, isXComponent, BaseResultLink } from '../../../../components';
+import { RootXStoreState } from '../../../../store';
+import { getResultsStub } from '../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
+import { identifierResultsXModule } from '../../x-module';
 import IdentifierResults from '../identifier-results.vue';
-import { IdentifierResult } from '../index';
+import IdentifierResult from '../identifier-result.vue';
 import { resetStoreIdentifierResultState } from './utils';
 
-describe('testing IdentifierResult component', () => {
-  const identifierResults = getResultsStub();
-
-  let identifierResultsWrapper: Wrapper<IdentifierResults>;
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+async function render(
+  template = '<IdentifierResults :animation="animation" :maxItemsToRender="maxItemsToRender"/>',
+  components = { IdentifierResults } as any
+) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-
-  beforeEach(() => {
-    identifierResultsWrapper = mount(IdentifierResults, { localVue, store });
-    resetStoreIdentifierResultState(store, { query: 'A02232', identifierResults });
-  });
+  const identifierResultsStub = getResultsStub();
+  const wrapper = mount(
+    { template, components, props: ['animation', 'maxItemsToRender'] },
+    {
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [identifierResultsXModule] })]
+      }
+    }
+  );
 
-  it('is an XComponent which has an XModule', () => {
-    expect(isXComponent(identifierResultsWrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(identifierResultsWrapper.vm)).toBe('identifierResults');
+  resetStoreIdentifierResultState(store, {
+    query: 'A02232',
+    identifierResults: identifierResultsStub
   });
+  await nextTick();
 
-  it('renders a list of IdentifierResult wrapped by a BaseResultLink', () => {
-    const wrapperComponent = {
-      template: `
-        <IdentifierResults>
-          <template #default="{ identifierResult }">
-            <BaseResultLink :result="identifierResult">
-              <template #default="{ result }">
-                <IdentifierResult :result="result" />
-              </template>
-            </BaseResultLink>
-          </template>
-        </IdentifierResults>
-      `,
-      components: {
-        BaseResultLink,
-        IdentifierResult,
-        IdentifierResults
-      }
-    };
-
-    identifierResultsWrapper = mount(wrapperComponent, {
-      localVue,
-      store
-    });
+  return {
+    wrapper,
+    store,
+    identifierResultsStub,
+    identifierResultsWrapper: wrapper.findComponent(IdentifierResults)
+  };
+}
 
-    expect(identifierResultsWrapper.findComponent(BaseResultLink)).toBeDefined();
+describe('testing IdentifierResult component', () => {
+  it('is an XComponent which has an XModule', async () => {
+    const { identifierResultsWrapper } = await render();
 
-    const spanList = findAllByTestDataId(identifierResultsWrapper, 'identifier-result');
+    expect(isXComponent(identifierResultsWrapper.vm)).toEqual(true);
+    expect(getXComponentXModuleName(identifierResultsWrapper.vm)).toEqual('identifierResults');
+  });
 
-    identifierResults.forEach((result, index) => {
-      expect(spanList.at(index).text()).toEqual(result.identifier!.value);
-    });
+  it('renders a list of IdentifierResult wrapped by a BaseResultLink', async () => {
+    const { wrapper, identifierResultsStub } = await render(
+      `
+      <IdentifierResults>
+        <template #default="{ identifierResult }">
+          <BaseResultLink :result="identifierResult">
+            <template #default="{ result }">
+              <IdentifierResult :result="result" />
+            </template>
+          </BaseResultLink>
+        </template>
+      </IdentifierResults>`,
+      { BaseResultLink, IdentifierResult, IdentifierResults }
+    );
+
+    expect(wrapper.findComponent(BaseResultLink)).toBeDefined();
+
+    const spanList = wrapper.findAll(getDataTestSelector('identifier-result'));
+    identifierResultsStub.forEach((result, index) =>
+      expect(spanList.at(index)?.text()).toEqual(result.identifier!.value)
+    );
   });
 
   it('does not render any IdentifierResult if the are none', async () => {
-    resetStoreIdentifierResultState(store);
+    const { store, wrapper } = await render();
 
-    await localVue.nextTick();
+    resetStoreIdentifierResultState(store);
+    await nextTick();
 
-    expect(identifierResultsWrapper.html()).toEqual('');
+    expect(wrapper.isVisible()).toEqual(false);
   });
 
   it('allows changing the animation with a transition group', async () => {
-    const animation = Vue.extend({
-      render(h) {
-        return h(
-          'transition-group',
-          {
-            attrs: {
-              ...this.$attrs,
-              ['data-test']: 'test-animation'
-            }
-          },
-          this.$slots.default
-        );
-      }
+    const animation = defineComponent({
+      setup: (_, { slots }) => slots.default?.() ?? '',
+      template: `<transition-group data-test="test-animation"><slot /></transition-group>`
     });
+    const { wrapper } = await render();
 
-    await identifierResultsWrapper.setProps({ animation });
+    await wrapper.setProps({ animation });
 
-    expect(identifierResultsWrapper.findComponent(animation).exists()).toBeTruthy();
-    expect(identifierResultsWrapper.find('test-animation')).toBeTruthy();
+    expect(wrapper.findComponent(animation).exists()).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('test-animation')).exists()).toEqual(true);
   });
 
-  // eslint-disable-next-line max-len
   it('renders at most the number of identifier results defined by `maxItemsToRender` prop', async () => {
-    const renderedResults = (): WrapperArray<Vue> =>
-      findAllByTestDataId(identifierResultsWrapper, 'identifier-results-item');
+    const { wrapper, identifierResultsStub } = await render();
+    const renderedResults = () => wrapper.findAll(getDataTestSelector('identifier-results-item'));
 
-    expect(renderedResults()).toHaveLength(identifierResults.length);
+    expect(renderedResults()).toHaveLength(identifierResultsStub.length);
 
-    await identifierResultsWrapper.setProps({ maxItemsToRender: identifierResults.length - 1 });
-    expect(renderedResults()).toHaveLength(identifierResults.length - 1);
+    await wrapper.setProps({ maxItemsToRender: identifierResultsStub.length - 1 });
+    expect(renderedResults()).toHaveLength(identifierResultsStub.length - 1);
 
-    await identifierResultsWrapper.setProps({ maxItemsToRender: identifierResults.length });
-    expect(renderedResults()).toHaveLength(identifierResults.length);
+    await wrapper.setProps({ maxItemsToRender: identifierResultsStub.length });
+    expect(renderedResults()).toHaveLength(identifierResultsStub.length);
 
-    await identifierResultsWrapper.setProps({ maxItemsToRender: identifierResults.length + 1 });
-    expect(renderedResults()).toHaveLength(identifierResults.length);
+    await wrapper.setProps({ maxItemsToRender: identifierResultsStub.length + 1 });
+    expect(renderedResults()).toHaveLength(identifierResultsStub.length);
   });
-
-  function findAllByTestDataId(wrapper: Wrapper<Vue>, testDataId: string): WrapperArray<Vue> {
-    return wrapper.findAll(getDataTestSelector(testDataId));
-  }
 });
diff --git a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
index dd3ea1f051..2826d9ed3b 100644
--- a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
+++ b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
@@ -87,7 +87,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-identifier-results {
     display: flex;
     flex-flow: column nowrap;
diff --git a/packages/x-components/src/x-modules/identifier-results/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/identifier-results/store/__tests__/actions.spec.ts
index ec846138f6..ffb3064b31 100644
--- a/packages/x-components/src/x-modules/identifier-results/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/identifier-results/store/__tests__/actions.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
 import { SafeStore } from '../../../../store/__tests__/utils';
@@ -18,17 +18,20 @@ describe('testing identifier results module actions', () => {
     identifierResults: { results: mockedResults }
   });
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
   const store: SafeStore<
     IdentifierResultsState,
     IdentifierResultsGetters,
     IdentifierResultsMutations,
     IdentifierResultsActions
   > = new Store(identifierResultsXStoreModule as any);
-  installNewXPlugin({ adapter, store }, localVue);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   beforeEach(() => {
     resetIdentifierResultsStateWith(store);
diff --git a/packages/x-components/src/x-modules/identifier-results/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/identifier-results/store/__tests__/getters.spec.ts
index cdc1a2ec73..96ab722519 100644
--- a/packages/x-components/src/x-modules/identifier-results/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/identifier-results/store/__tests__/getters.spec.ts
@@ -1,12 +1,10 @@
 import { map } from '@empathyco/x-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { identifierResultsXStoreModule } from '../module';
 import { IdentifierResultsState } from '../types';
 import { resetIdentifierResultsStateWith } from './utils';
 
 describe('testing identifier results module getters', () => {
-  Vue.use(Vuex);
   const gettersKeys = map(identifierResultsXStoreModule.getters, getter => getter);
   const store: Store<IdentifierResultsState> = new Store(identifierResultsXStoreModule as any);
 
diff --git a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts
index cb19dc8dca..9249ece09a 100644
--- a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts
+++ b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts
@@ -1,154 +1,119 @@
 import { NextQuery } from '@empathyco/x-types';
-import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue, {
-  ComponentOptions,
-  computed,
-  defineComponent,
-  inject,
-  provide,
-  Ref,
-  VueConstructor
-} from 'vue';
-import Vuex, { Store } from 'vuex';
-import { createNextQueryStub } from '../../../../__stubs__/next-queries-stubs.factory';
+import { DeepPartial } from '@empathyco/x-utils';
+import { mount } from '@vue/test-utils';
+import { defineComponent, inject, nextTick, provide, ref, Ref } from 'vue';
+import { Store } from 'vuex';
+import { createNextQueryStub } from '../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { RootXStoreState } from '../../../../store/store.types';
+import {
+  LIST_ITEMS_KEY,
+  QUERY_KEY,
+  getXComponentXModuleName,
+  isXComponent
+} from '../../../../components';
+import { RootXStoreState, RequestStatus } from '../../../../store';
 import { ListItem } from '../../../../utils/types';
 import { nextQueriesXModule } from '../../x-module';
 import NextQueriesList from '../next-queries-list.vue';
-import { LIST_ITEMS_KEY, QUERY_KEY } from '../../../../components/decorators/injection.consts';
-import { RequestStatus } from '../../../../store/utils/status-store.utils';
 import { resetXNextQueriesStateWith } from './utils';
 
 /**
- * Renders the `NextQueriesList` component, exposing a basic API for testing.
+ * Creates a list of {@link ListItem} of the given length.
  *
- * @param options - The options to render the component with.
- * @returns The API for testing the `NextQueriesList` component.
+ * @param length - The length of the list to create.
+ * @returns A list of simple {@link ListItem}s.
  */
-function renderNextQueriesList({
+function createExtraItems(length: number): ListItem[] {
+  return Array.from({ length }, (_, index) => ({
+    id: `Extra ${index}`,
+    modelName: `ExtraItem`
+  }));
+}
+
+/**
+ * Creates a list of {@link NextQuery|NextQueries} the given list of queries.
+ *
+ * @param queries - The queries from whom create the next queries objects.
+ * @returns A list of {@link NextQuery|NextQueries}.
+ */
+function createNextQueries(...queries: string[]) {
+  return queries.map(query => createNextQueryStub(query));
+}
+
+async function render({
   template = `
-    <ProviderWrapper>
-      <NextQueriesList v-bind="$attrs">
-       <template #next-queries-group="{ item }">
-          <ul class="next-queries-group">
-            <li v-for="nextQuery in item.nextQueries" class="next-query">{{
-             nextQuery.query
-            }}</li>
-          </ul>
-        </template>
-      </NextQueriesList>
-    </ProviderWrapper>
-    `,
-  nextQueries = [],
+    <NextQueriesList>
+      <template #next-queries-group="{ item }">
+        <ul class="next-queries-group">
+          <li v-for="nextQuery in item.nextQueries" class="next-query">{{ nextQuery.query }}</li>
+        </ul>
+      </template>
+    </NextQueriesList>`,
+  nextQueries = [] as NextQuery[],
   query = 'jacket',
-  status = 'initial',
-  searchQuery,
-  components,
-  extraItems,
-  ...props
-}: RenderNextQueriesListOptions = {}): RenderNextQueriesListAPI {
-  const ProviderWrapper = defineComponent({
-    name: 'ProviderWrapper',
-    setup() {
-      const searchQueryComputed = computed(() => searchQuery);
-      provide(QUERY_KEY as string, searchQueryComputed);
-    },
-    template: `
-      <div><slot /></div>
-    `
-  });
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  status = 'initial' as RequestStatus,
+  searchQuery = '',
+  components = {},
+  extraItems = [] as ListItem[],
+  offset = 24,
+  frequency = 24,
+  maxNextQueriesPerGroup = 4,
+  maxGroups = undefined as undefined | number,
+  showOnlyAfterOffset = false
+} = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [nextQueriesXModule] }, localVue);
-  resetXNextQueriesStateWith(store, { nextQueries, query, status });
 
   const wrapper = mount(
     {
       template,
-      components: {
-        ProviderWrapper,
-        NextQueriesList,
-        ...components
-      },
+      components: { NextQueriesList, ...components },
       setup() {
-        const items = computed(() => extraItems);
-        provide(LIST_ITEMS_KEY as string, items);
+        provide(LIST_ITEMS_KEY as string, ref(extraItems));
+        provide(QUERY_KEY as string, ref(searchQuery));
       }
     },
     {
-      localVue,
-      store,
-      propsData: props
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [nextQueriesXModule] })]
+      },
+      props: { offset, frequency, maxNextQueriesPerGroup, maxGroups, showOnlyAfterOffset }
     }
   );
 
+  resetXNextQueriesStateWith(store, { nextQueries, query, status });
+  await nextTick();
+
   const nextQueriesListWrapper = wrapper.findComponent(NextQueriesList);
 
-  function getSearchItemWrappers(): WrapperArray<Vue> {
-    return nextQueriesListWrapper.findAll(
-      `${getDataTestSelector('next-queries-groups-list-item')}, ${getDataTestSelector(
-        'extra-items-list-item'
-      )}`
-    );
+  function getSearchItemWrappers() {
+    const nextQueriesGroups = getDataTestSelector('next-queries-groups-list-item');
+    const extraItemsGroups = getDataTestSelector('extra-items-list-item');
+    return nextQueriesListWrapper.findAll(`${nextQueriesGroups}, ${extraItemsGroups}`);
   }
 
   return {
     wrapper: nextQueriesListWrapper,
     getSearchItemWrappers,
-    getNextQueryGroupWrappers() {
-      return nextQueriesListWrapper.findAll('.next-queries-group');
-    },
-    getNextQueryWrappers(root = nextQueriesListWrapper) {
-      return root.findAll('.next-query');
-    },
-    getItemsRenderedText() {
-      return getSearchItemWrappers().wrappers.map(wrapper => wrapper.text());
+    getNextQueryGroupWrappers: () => nextQueriesListWrapper.findAll('.next-queries-group'),
+    getItemsRenderedText: () => getSearchItemWrappers().map(wrapper => wrapper.text()),
+    setStatusState: async () => {
+      store.commit('x/nextQueries/setStatus', status);
+      await nextTick();
     }
   };
 }
 
-/**
- * Creates a list of {@link ListItem} of the given length.
- *
- * @param length - The length of the list to create.
- * @returns A list of simple {@link ListItem}s.
- */
-function createExtraItems(length: number): ListItem[] {
-  return Array.from({ length }, (_, index) => ({
-    id: `Extra ${index}`,
-    modelName: `ExtraItem`
-  }));
-}
-
-/**
- * Creates a list of {@link NextQuery|NextQueries} the given list of queries.
- *
- * @param queries - The queries from whom create the next queries objects.
- * @returns A list of {@link NextQuery|NextQueries}.
- */
-function createNextQueries(...queries: string[]): NextQuery[] {
-  return queries.map(query => createNextQueryStub(query));
-}
-
 describe('testing NextQueriesList component', () => {
-  it('is an XComponent', () => {
-    const { wrapper } = renderNextQueriesList();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-  });
+  it('is an XComponent and has Search as XModule', async () => {
+    const { wrapper } = await render();
 
-  it('has Search as XModule', () => {
-    const { wrapper } = renderNextQueriesList();
+    expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('nextQueries');
   });
 
-  it('renders no group if no list items are injected', () => {
+  it('renders no group if no list items are injected', async () => {
     const nextQueries = createNextQueries('milk', 'sugar', 'beer');
-    const { getNextQueryGroupWrappers, getSearchItemWrappers } = renderNextQueriesList({
+    const { getNextQueryGroupWrappers, getSearchItemWrappers } = await render({
       nextQueries,
       maxNextQueriesPerGroup: 2,
       extraItems: []
@@ -158,7 +123,7 @@ describe('testing NextQueriesList component', () => {
     expect(getNextQueryGroupWrappers()).toHaveLength(0);
   });
 
-  it('inserts next queries groups in the appropriate order', () => {
+  it('inserts next queries groups in the appropriate order', async () => {
     const nextQueries = createNextQueries(
       'steak',
       'tomahawk',
@@ -171,7 +136,7 @@ describe('testing NextQueriesList component', () => {
       'flank steak' // This one should be ignored as there is no room for it.
     );
     const extraItems = createExtraItems(11);
-    const { getItemsRenderedText } = renderNextQueriesList({
+    const { getItemsRenderedText } = await render({
       nextQueries,
       extraItems,
       maxNextQueriesPerGroup: 2,
@@ -199,7 +164,7 @@ describe('testing NextQueriesList component', () => {
     ]);
   });
 
-  it('does not render more than the specified groups', () => {
+  it('does not render more than the specified groups', async () => {
     const nextQueries = createNextQueries(
       'tequila',
       'mezcal',
@@ -209,7 +174,7 @@ describe('testing NextQueriesList component', () => {
       'dark-rum' // Should be ignored because maxGroups: 2
     );
     const extraItems = createExtraItems(10);
-    const { getItemsRenderedText } = renderNextQueriesList({
+    const { getItemsRenderedText } = await render({
       nextQueries,
       extraItems,
       maxNextQueriesPerGroup: 2,
@@ -235,10 +200,10 @@ describe('testing NextQueriesList component', () => {
     ]);
   });
 
-  it('renders a group even if it has not enough next queries', () => {
+  it('renders a group even if it has not enough next queries', async () => {
     const nextQueries = createNextQueries('piña colada');
     const extraItems = createExtraItems(4);
-    const { getItemsRenderedText } = renderNextQueriesList({
+    const { getItemsRenderedText } = await render({
       nextQueries,
       extraItems,
       maxNextQueriesPerGroup: 4,
@@ -255,28 +220,16 @@ describe('testing NextQueriesList component', () => {
     ]);
   });
 
-  it('provides the modified list of list items', () => {
+  it('provides the modified list of list items', async () => {
     const CustomList = defineComponent({
       name: 'CustomList',
-      setup() {
-        const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
-
-        return {
-          injectedListItems
-        };
-      },
-      template: `
-        <ul>
-        <li class="search-item" v-for="item in injectedListItems">{{ item.id }}</li>
-        </ul>`
+      setup: () => ({ injectedListItems: inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string) }),
+      template: `<ul><li class="search-item" v-for="item in injectedListItems">{{ item.id }}</li></ul>`
     });
     const nextQueries = createNextQueries('rib chop', 'shoulder steak');
     const extraItems = createExtraItems(4);
-    const { wrapper } = renderNextQueriesList({
-      template: `
-        <NextQueriesList v-bind="$attrs">
-        <CustomList/>
-        </NextQueriesList>`,
+    const { wrapper } = await render({
+      template: `<NextQueriesList><CustomList/></NextQueriesList>`,
       components: { CustomList },
       nextQueries,
       extraItems,
@@ -285,9 +238,7 @@ describe('testing NextQueriesList component', () => {
       offset: 2
     });
 
-    const customItemsRenderedText = wrapper
-      .findAll('.search-item')
-      .wrappers.map(wrapper => wrapper.text());
+    const customItemsRenderedText = wrapper.findAll('.search-item').map(wrapper => wrapper.text());
 
     expect(customItemsRenderedText).toEqual([
       extraItems[0].id,
@@ -303,8 +254,8 @@ describe('testing NextQueriesList component', () => {
     const extraItems = createExtraItems(5);
     const nextQueries = createNextQueries('gloves', 'hat');
 
-    it('renders extra items if the next queries query and the search query are different', () => {
-      const { getItemsRenderedText } = renderNextQueriesList({
+    it('renders extra items if the next queries query and the search query are different', async () => {
+      const { getItemsRenderedText } = await render({
         nextQueries,
         extraItems,
         query: 'jacket',
@@ -313,12 +264,13 @@ describe('testing NextQueriesList component', () => {
         frequency: 1,
         offset: 0
       });
+
       expect(getItemsRenderedText()).toEqual(extraItems.map(item => item.id));
     });
 
-    it('renders extra items if the status of the next queries requests is not success', () => {
+    it('renders extra items if the status of the next queries requests is not success', async () => {
       const query = 'jacket';
-      const { getItemsRenderedText } = renderNextQueriesList({
+      const { getItemsRenderedText } = await render({
         nextQueries,
         extraItems,
         query,
@@ -327,13 +279,13 @@ describe('testing NextQueriesList component', () => {
         frequency: 1,
         offset: 0
       });
+
       expect(getItemsRenderedText()).toEqual(extraItems.map(item => item.id));
     });
 
-    // eslint-disable-next-line max-len
-    it('renders next queries and extra items if the status is success and the search query and the query are equal', () => {
+    it('renders next queries and extra items if the status is success and the search query and the query are equal', async () => {
       const query = 'jacket';
-      const { getItemsRenderedText } = renderNextQueriesList({
+      const { getItemsRenderedText, setStatusState } = await render({
         nextQueries,
         extraItems,
         query,
@@ -343,6 +295,14 @@ describe('testing NextQueriesList component', () => {
         offset: 0,
         status: 'success'
       });
+
+      /*
+        To avoid side effects with `NextQueriesRequestUpdated` event emitter because `query` change
+        and `status` set to `loading`.
+        Status workflow: 'initial' -> 'success' -> 'loading' -> `success`
+      */
+      await setStatusState();
+
       expect(getItemsRenderedText()).toEqual([
         ...nextQueries.map(nextQuery => nextQuery.query),
         ...extraItems.map(item => item.id)
@@ -351,13 +311,13 @@ describe('testing NextQueriesList component', () => {
   });
 
   describe('when the offset is lower than the number of items', () => {
-    it('inserts next queries groups by default', () => {
+    it('inserts next queries groups by default', async () => {
       const nextQueries = createNextQueries(
         'steak',
         'tomahawk' // This one should be ignored as there is no room for it.
       );
       const extraItems = createExtraItems(5);
-      const { getItemsRenderedText } = renderNextQueriesList({
+      const { getItemsRenderedText } = await render({
         nextQueries,
         extraItems,
         maxNextQueriesPerGroup: 1,
@@ -376,10 +336,10 @@ describe('testing NextQueriesList component', () => {
       ]);
     });
 
-    it('does not insert next queries groups if `showOnlyAfterOffset` is `true`', () => {
+    it('does not insert next queries groups if `showOnlyAfterOffset` is `true`', async () => {
       const nextQueries = createNextQueries('steak', 'tomahawk');
       const extraItems = createExtraItems(5);
-      const { getItemsRenderedText } = renderNextQueriesList({
+      const { getItemsRenderedText } = await render({
         nextQueries,
         extraItems,
         maxNextQueriesPerGroup: 1,
@@ -399,46 +359,3 @@ describe('testing NextQueriesList component', () => {
     });
   });
 });
-
-interface RenderNextQueriesListOptions {
-  /**
-   * Determines if a group is added to the injected items list when the number
-   * of items is smaller than the offset.
-   */
-  showOnlyAfterOffset?: boolean;
-  /** Extra components to be registered and rendered. */
-  components?: Dictionary<VueConstructor | ComponentOptions<Vue>>;
-  /** Extra items to be rendered. */
-  extraItems?: ListItem[];
-  /** Indicates the cycle size to insert next queries group at. */
-  frequency?: number;
-  /** The maximum number of groups to add to the list items list. */
-  maxGroups?: number;
-  /** The maximum number of next queries to insert in a group. */
-  maxNextQueriesPerGroup?: number;
-  /** The `nextQueries` used to be rendered. */
-  nextQueries?: NextQuery[];
-  /** The first list index that a next queries group should appear in. */
-  offset?: number;
-  /** The template to be rendered. */
-  template?: string;
-  /** The query of the next queries request. */
-  query?: string;
-  /** The search query, it will be provided in a wrapper with XProvide. */
-  searchQuery?: string;
-  /** The next queries request status. */
-  status?: RequestStatus;
-}
-
-interface RenderNextQueriesListAPI {
-  /** Retrieves the wrappers of the next queries group. */
-  getNextQueryGroupWrappers: () => WrapperArray<Vue>;
-  /** Retrieves the wrappers of the individual next queries. */
-  getNextQueryWrappers: (root?: Wrapper<Vue>) => WrapperArray<Vue>;
-  /** Retrieves the wrappers of the list items. */
-  getSearchItemWrappers: () => WrapperArray<Vue>;
-  /** Retrieves rendered text for each DOM list item. */
-  getItemsRenderedText: () => string[];
-  /** The `wrapper` wrapper component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries.spec.ts b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries.spec.ts
index ada1cb29c1..85cfbf4eb0 100644
--- a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries.spec.ts
+++ b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries.spec.ts
@@ -1,246 +1,185 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
-import { NextQuery } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { createNextQueryStub, getNextQueriesStub } from '../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { RootXStoreState } from '../../../../store/store.types';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { RootXStoreState } from '../../../../store';
 import NextQueries from '../next-queries.vue';
 import { default as NextQueryComponent } from '../next-query.vue';
-import { XPlugin } from '../../../../plugins/x-plugin';
 import { nextQueriesXModule } from '../../x-module';
 import { resetXNextQueriesStateWith } from './utils';
 
+async function render({
+  nextQueries = getNextQueriesStub(),
+  template = '<NextQueries :suggestions="suggestions" :highlightCurated="highlightCurated"/>'
+} = {}) {
+  const store = new Store<DeepPartial<RootXStoreState>>({});
+  const resetStoreState = async (state: Parameters<typeof resetXNextQueriesStateWith>[1]) => {
+    resetXNextQueriesStateWith(store, state);
+    await nextTick();
+  };
+
+  const wrapper = mount(
+    {
+      template,
+      components: { NextQueries, NextQuery: NextQueryComponent },
+      props: ['suggestions', 'highlightCurated']
+    },
+    {
+      props: { suggestions: null, highlightCurated: false },
+      global: { plugins: [installNewXPlugin({ store, initialXModules: [nextQueriesXModule] })] }
+    }
+  );
+
+  await resetStoreState({ nextQueries });
+
+  return {
+    wrapper,
+    nqWrapper: wrapper.findComponent(NextQueries),
+    nextQueries,
+    resetStoreState,
+    findDataTestWrapper: (dataTest: string) => wrapper.findAll(getDataTestSelector(dataTest))
+  };
+}
+
 describe('testing next queries component', () => {
-  function renderNextQueries({
-    nextQueries = getNextQueriesStub(),
-    template = '<NextQueries :suggestions="customSuggestions"/>'
-  }: RenderNExtQueriesOptions = {}): RenderNextQueriesAPI {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-    const store = new Store<DeepPartial<RootXStoreState>>({});
-    installNewXPlugin({ store }, localVue);
-
-    // Manually re-installing the xModule and updating its state
-    XPlugin.registerXModule(nextQueriesXModule);
-    resetXNextQueriesStateWith(store, { nextQueries });
-
-    const wrapperTemplate = mount(
-      {
-        props: ['nextQueries', 'highlightCurated', 'customSuggestions'],
-        components: {
-          NextQueries,
-          NextQuery: NextQueryComponent
-        },
-        template
-      },
-      {
-        localVue,
-        store,
-        propsData: { nextQueries, customSuggestions: null }
-      }
-    );
-    const wrapper = wrapperTemplate.findComponent(NextQueries);
-
-    const findTestDataById = (testDataId: string): WrapperArray<Vue> =>
-      wrapper.findAll(getDataTestSelector(testDataId));
-
-    return {
-      wrapper,
-      nextQueries,
-      findTestDataById,
-      getNextQueryItems() {
-        return findTestDataById('next-query-item');
-      },
-      setCustomSuggestions(suggestions: NextQuery[]) {
-        return wrapperTemplate.setProps({ customSuggestions: suggestions });
-      }
-    };
-  }
-
-  it('is an XComponent', () => {
-    const { wrapper } = renderNextQueries();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(wrapper.vm)).toBe('nextQueries');
+  it('is an XComponent which has an XModule', async () => {
+    const { nqWrapper } = await render();
+
+    expect(isXComponent(nqWrapper.vm)).toEqual(true);
+    expect(getXComponentXModuleName(nqWrapper.vm)).toEqual('nextQueries');
   });
 
-  it('renders a button with the query of the next query(suggestion)', () => {
-    const { nextQueries, getNextQueryItems } = renderNextQueries();
+  it('renders a button with the query of the next query(suggestion)', async () => {
+    const { nextQueries, findDataTestWrapper } = await render();
+    const nextQueryItems = findDataTestWrapper('next-query-item');
 
-    getNextQueryItems().wrappers.forEach((nextQueryItemWrapper, index) => {
-      expect(nextQueryItemWrapper.text()).toEqual(nextQueries[index].query);
-    });
+    nextQueryItems.forEach((nextQueryItemWrapper, index) =>
+      expect(nextQueryItemWrapper.text()).toEqual(nextQueries[index].query)
+    );
   });
 
-  //eslint-disable-next-line max-len
   it('renders a span, an image & a highlighting icon overriding the default Next Query content', async () => {
-    const template = `
-        <NextQueries>
-          <template #suggestion-content="suggestionContentScope">
+    const { wrapper, nextQueries, resetStoreState, findDataTestWrapper } = await render({
+      template: `
+        <NextQueries :highlightCurated="highlightCurated">
+          <template #suggestion-content="{ shouldHighlightCurated, suggestion, index }">
             <span data-test="next-query-highlight">
-              <img
-                src="./chevron-icon.svg"
-                v-if="suggestionContentScope.shouldHighlightCurated"
-              />
+              <img v-if="shouldHighlightCurated" src="#" alt="" />
             </span>
-            <img src="./next-query-icon.svg" class="x-next-query__icon" data-test="icon"/>
-            <span
-              class="x-next-query__query"
-              data-test="query"
-              :data-index="suggestionContentScope.index"
-            >{{ suggestionContentScope.suggestion.query }}</span>
+            <img src="#" class="x-next-query__icon" data-test="icon" alt="" />
+            <span class="x-next-query__query" data-test="query" :data-index="index">{{ suggestion.query }}</span>
           </template>
-        </NextQueries>
-      `;
-
-    const { wrapper, nextQueries, findTestDataById } = renderNextQueries({
-      template
+        </NextQueries>`
     });
 
     nextQueries[0].isCurated = true;
-    const eventSpansList = findTestDataById('query');
-    const iconsList = findTestDataById('icon');
-    let highlightIconList = findTestDataById('next-query-highlight');
+    await resetStoreState({ nextQueries });
+
+    const eventSpansList = findDataTestWrapper('query');
+    const iconsList = findDataTestWrapper('icon');
+    let highlightIconList = findDataTestWrapper('next-query-highlight');
 
     nextQueries.forEach((nextQuery, index) => {
-      expect(eventSpansList.at(index).element.innerHTML).toEqual(nextQuery.query);
-      expect(eventSpansList.at(index).element.getAttribute('data-index')).toEqual(`${index}`);
-      expect(highlightIconList.at(index).contains('img')).toBe(false);
+      expect(eventSpansList.at(index)?.element.innerHTML).toEqual(nextQuery.query);
+      expect(eventSpansList.at(index)?.element.getAttribute('data-index')).toEqual(`${index}`);
+      expect(highlightIconList.at(index)?.find('img').exists()).toEqual(false);
       expect(iconsList.at(index)).toBeDefined();
     });
 
     await wrapper.setProps({ highlightCurated: true });
-    highlightIconList = findTestDataById('next-query-highlight');
+    highlightIconList = findDataTestWrapper('next-query-highlight');
 
     nextQueries.forEach((nextQuery, index) => {
-      expect(highlightIconList.at(index).contains('img')).toBe(!!nextQuery.isCurated);
+      expect(highlightIconList.at(index)?.find('img').exists())?.toEqual(!!nextQuery.isCurated);
     });
   });
 
   it('renders a button, a highlighting icon & a custom Next Query', async () => {
-    const template = `
-        <NextQueries>
+    const { wrapper, nextQueries, resetStoreState, findDataTestWrapper } = await render({
+      template: `
+        <NextQueries :highlightCurated="highlightCurated">
           <template #suggestion="{ suggestion, highlightCurated, index }">
-            <NextQuery :suggestion="suggestion"
-                       :highlightCurated="highlightCurated">
-              <template #default="suggestionContentScope">
+            <NextQuery :suggestion="suggestion" :highlightCurated="highlightCurated">
+              <template #default="{ shouldHighlightCurated }">
                 <span data-test="next-query-highlight">
-                  <img
-                    src="./chevron-icon.svg"
-                    v-if="suggestionContentScope.shouldHighlightCurated"
-                  />
+                  <img v-if="shouldHighlightCurated" src="#" alt="" />
                 </span>
-                <img src="./next-query-icon.svg"
-                  class="x-next-query__icon"
-                  data-test="icon"/>
-                <span
-                  class="x-next-query__query"
-                  data-test="query"
-                  :data-index="index"
-                >{{ suggestion.query }}</span>
+                <img src="#" class="x-next-query__icon" data-test="icon" alt="" />
+                <span class="x-next-query__query" data-test="query" :data-index="index">{{ suggestion.query }}</span>
               </template>
             </NextQuery>
             <button data-test="custom-button">Custom Behaviour</button>
           </template>
-        </NextQueries>
-      `;
-
-    const { wrapper, nextQueries, findTestDataById } = renderNextQueries({
-      template
+        </NextQueries>`
     });
 
     expect(wrapper.findComponent(NextQueryComponent)).toBeDefined();
 
     nextQueries[0].isCurated = true;
-    const eventSpansList = findTestDataById('query');
-    const iconsList = findTestDataById('icon');
-    const customButtonList = findTestDataById('custom-button');
-    let highlightIconList = findTestDataById('next-query-highlight');
+    await resetStoreState({ nextQueries });
+
+    const eventSpansList = findDataTestWrapper('query');
+    const iconsList = findDataTestWrapper('icon');
+    const customButtonList = findDataTestWrapper('custom-button');
+    let highlightIconList = findDataTestWrapper('next-query-highlight');
 
     nextQueries.forEach((nextQuery, index) => {
-      expect(eventSpansList.at(index).element.innerHTML).toEqual(nextQuery.query);
-      expect(eventSpansList.at(index).element.getAttribute('data-index')).toEqual(`${index}`);
+      expect(eventSpansList.at(index)?.element.innerHTML).toEqual(nextQuery.query);
+      expect(eventSpansList.at(index)?.element.getAttribute('data-index')).toEqual(`${index}`);
       expect(iconsList.at(index)).toBeDefined();
       expect(customButtonList.at(index)).toBeDefined();
-      expect(highlightIconList.at(index).contains('img')).toBe(false);
+      expect(highlightIconList.at(index)?.find('img').exists()).toEqual(false);
     });
 
     await wrapper.setProps({ highlightCurated: true });
-    highlightIconList = findTestDataById('next-query-highlight');
+    highlightIconList = findDataTestWrapper('next-query-highlight');
 
-    nextQueries.forEach((nextQuery, index) => {
-      expect(highlightIconList.at(index).contains('img')).toBe(!!nextQuery.isCurated);
-    });
+    nextQueries.forEach((nextQuery, index) =>
+      expect(highlightIconList.at(index)?.find('img').exists()).toEqual(!!nextQuery.isCurated)
+    );
   });
 
-  it('does not render any NextQuery if the are none', () => {
-    const { wrapper } = renderNextQueries({
-      nextQueries: []
-    });
+  it('does not render any NextQuery if the are none', async () => {
+    const { wrapper } = await render({ nextQueries: [] });
 
-    expect(wrapper.html()).toEqual('');
+    expect(wrapper.find('x-next-queries').exists()).toEqual(false);
   });
 
   it('renders at most the number of NextQuery defined by `maxItemsToRender` prop', async () => {
-    const { wrapper, nextQueries, findTestDataById } = renderNextQueries();
+    const { nextQueries, findDataTestWrapper, wrapper } = await render();
 
     await wrapper.setProps({ maxItemsToRender: 2 });
-    expect(findTestDataById('next-query')).toHaveLength(2);
+    expect(findDataTestWrapper('next-query')).toHaveLength(2);
 
     await wrapper.setProps({ maxItemsToRender: 3 });
-    expect(findTestDataById('next-query')).toHaveLength(3);
+    expect(findDataTestWrapper('next-query')).toHaveLength(3);
 
     await wrapper.setProps({ maxItemsToRender: 5 });
-    expect(findTestDataById('next-query')).toHaveLength(nextQueries.length);
+    expect(findDataTestWrapper('next-query')).toHaveLength(nextQueries.length);
   });
 
   it('renders the `suggestions` passed by props instead the ones from the state', async () => {
-    const { findTestDataById, setCustomSuggestions } = renderNextQueries({
-      nextQueries: [createNextQueryStub('Lettuce'), createNextQueryStub('Tomato')]
+    let queries = ['Lettuce', 'Tomato'];
+    const { wrapper, findDataTestWrapper } = await render({
+      nextQueries: queries.map(q => createNextQueryStub(q))
     });
 
-    const myNextQueries = [
-      createNextQueryStub('Bread'),
-      createNextQueryStub('Meat'),
-      createNextQueryStub('Cheese')
-    ];
-
-    expect(findTestDataById('next-query')).toHaveLength(2);
-    expect(findTestDataById('next-query').at(0).text()).toBe('Lettuce');
-    expect(findTestDataById('next-query').at(1).text()).toBe('Tomato');
-
-    await setCustomSuggestions(myNextQueries);
-    expect(findTestDataById('next-query')).toHaveLength(3);
-    expect(findTestDataById('next-query').at(0).text()).toBe('Bread');
-    expect(findTestDataById('next-query').at(1).text()).toBe('Meat');
-    expect(findTestDataById('next-query').at(2).text()).toBe('Cheese');
-  });
-});
+    expect(findDataTestWrapper('next-query')).toHaveLength(2);
+    queries.forEach((query, i) =>
+      expect(findDataTestWrapper('next-query').at(i)?.text()).toEqual(query)
+    );
 
-interface RenderNExtQueriesOptions {
-  /** The initial next queries to render. */
-  nextQueries?: NextQuery[];
-  /**
-   * The template to render. Receives the `nextQueries` via prop, and has registered the
-   * {@link NextQueries} component.
-   */
-  template?: string;
-}
+    queries = ['Bread', 'Meat', 'Cheese'];
+    await wrapper.setProps({
+      suggestions: queries.map(q => createNextQueryStub(q))
+    });
 
-interface RenderNextQueriesAPI {
-  /** The Vue testing utils wrapper for the {@link NextQueries} component. */
-  wrapper: Wrapper<Vue>;
-  /** The initial list of next queries that are going to be rendered. */
-  nextQueries: NextQuery[];
-  /**
-   * Retrieves the wrapper for the items of the list rendered by the {@link NextQueries}
-   * component.
-   */
-  getNextQueryItems: () => WrapperArray<Vue>;
-  /** Find test data in the wrapper for the {@link NextQueries} component. */
-  findTestDataById: (testDataId: string) => WrapperArray<Vue>;
-  /** Set the custom suggestions prop to the template wrapper. */
-  setCustomSuggestions: (suggestions: NextQuery[]) => Promise<void> | void;
-}
+    expect(findDataTestWrapper('next-query')).toHaveLength(3);
+    queries.forEach((query, i) =>
+      expect(findDataTestWrapper('next-query').at(i)?.text()).toEqual(query)
+    );
+  });
+});
diff --git a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query-preview.spec.ts b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query-preview.spec.ts
index f9adba417b..9bf50de7f0 100644
--- a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query-preview.spec.ts
@@ -1,7 +1,8 @@
-import { mount, Wrapper, createLocalVue, WrapperArray } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
 import { NextQuery, PreviewResults } from '@empathyco/x-types';
+import { nextTick } from 'vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import NextQueryPreview from '../next-query-preview.vue';
 import { RootXStoreState } from '../../../../store/store.types';
@@ -27,13 +28,26 @@ describe('next query preview', () => {
       totalResults: 100
     },
     eventToSpy
-  }: RenderNextQueryPreviewOptions = {}): RenderNextQueryPreviewAPI {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-
+  }: RenderNextQueryPreviewOptions = {}) {
     const store = new Store<DeepPartial<RootXStoreState>>({});
-    installNewXPlugin({ store }, localVue);
-    XPlugin.registerXModule(nextQueriesXModule);
+
+    const wrapper = mount(
+      {
+        props: ['maxItemsToRender', 'suggestion'],
+        components: { NextQueryPreview },
+        template
+      },
+      {
+        global: {
+          plugins: [installNewXPlugin({ store, initialXModules: [nextQueriesXModule] })]
+        },
+        store,
+        props: {
+          maxItemsToRender,
+          suggestion
+        }
+      }
+    );
 
     if (resultsPreview) {
       resetXNextQueriesStateWith(store, {
@@ -49,24 +63,8 @@ describe('next query preview', () => {
       XPlugin.bus.on(eventToSpy).subscribe(eventSpy);
     }
 
-    const wrapper = mount(
-      {
-        props: ['maxItemsToRender', 'suggestion'],
-        components: { NextQueryPreview },
-        template
-      },
-      {
-        localVue,
-        store,
-        propsData: {
-          maxItemsToRender,
-          suggestion
-        }
-      }
-    ).findComponent(NextQueryPreview);
-
     return {
-      wrapper,
+      wrapper: wrapper.findComponent(NextQueryPreview),
       eventSpy,
       suggestion,
       resultsPreview,
@@ -88,26 +86,27 @@ describe('next query preview', () => {
     expect(eventSpy).toHaveBeenCalledWith(suggestion.query);
   });
 
-  it('renders the results names in the default slot', () => {
+  it('renders the results names in the default slot', async () => {
     const { resultsPreview, findTestDataById } = renderNextQueryPreview();
-
+    await nextTick();
     const wrappers = findTestDataById('result-name');
 
     resultsPreview!.items.forEach((result, index) => {
-      expect(wrappers.at(index).element).toHaveTextContent(result.name!);
+      expect(wrappers.at(index)?.element).toHaveTextContent(result.name!);
     });
   });
 
-  it('renders the specified number of items', () => {
+  it('renders the specified number of items', async () => {
     const maxItemsToRender = 2;
     const { findTestDataById } = renderNextQueryPreview({
       maxItemsToRender
     });
 
+    await nextTick();
     expect(findTestDataById('result-name')).toHaveLength(maxItemsToRender);
   });
 
-  it('exposes the suggestion, the results and the totalResults in the default slot', () => {
+  it('exposes the suggestion, the results and the totalResults in the default slot', async () => {
     const template = `
       <NextQueryPreview
           :suggestion="suggestion"
@@ -123,6 +122,8 @@ describe('next query preview', () => {
       template
     });
 
+    await nextTick();
+
     expect(wrapper.find(getDataTestSelector('next-query-query')).element).toHaveTextContent(
       suggestion.query
     );
@@ -133,11 +134,11 @@ describe('next query preview', () => {
     const resultsWrappers = findTestDataById('result-name');
 
     resultsPreview!.items.forEach((result, index) => {
-      expect(resultsWrappers.at(index).element).toHaveTextContent(result.name!);
+      expect(resultsWrappers.at(index)?.element).toHaveTextContent(result.name!);
     });
   });
 
-  it('allows changing the result content', () => {
+  it('allows changing the result content', async () => {
     const template = `
       <NextQueryPreview :suggestion="suggestion" #result="{ result }">
         <span data-test="result-content">{{result.id}} - {{result.name}}</span>
@@ -145,10 +146,12 @@ describe('next query preview', () => {
     `;
     const { findTestDataById, resultsPreview } = renderNextQueryPreview({ template });
 
+    await nextTick();
+
     const resultsWrapper = findTestDataById('result-content');
 
     resultsPreview!.items.forEach((result, index) => {
-      expect(resultsWrapper.at(index).element).toHaveTextContent(`${result.id} - ${result.name!}`);
+      expect(resultsWrapper.at(index)?.element).toHaveTextContent(`${result.id} - ${result.name!}`);
     });
   });
 
@@ -156,8 +159,7 @@ describe('next query preview', () => {
     const { wrapper } = renderNextQueryPreview({
       resultsPreview: null
     });
-
-    expect(wrapper.find(getDataTestSelector('next-query-preview')).element).toBeFalsy();
+    expect(wrapper.find(getDataTestSelector('next-query-preview')).exists()).toBe(false);
   });
 });
 
@@ -179,16 +181,3 @@ interface RenderNextQueryPreviewOptions {
    */
   template?: string;
 }
-
-interface RenderNextQueryPreviewAPI {
-  /** The Vue testing utils wrapper for the {@link NextQueryPreview} component. */
-  wrapper: Wrapper<Vue>;
-  /** A Jest spy set in the {@link XPlugin} `on` function. */
-  eventSpy?: jest.Mock<any, any>;
-  /** The rendered next query. */
-  suggestion: NextQuery;
-  /** The results preview of the next query search request. */
-  resultsPreview: PreviewResults | null;
-  /** Find test data in the wrapper for the {@link NextQueryPreview} component. */
-  findTestDataById: (testDataId: string) => WrapperArray<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query.spec.ts b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query.spec.ts
index 37f623afc7..531a6db82b 100644
--- a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query.spec.ts
+++ b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-query.spec.ts
@@ -1,17 +1,17 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { NextQuery } from '@empathyco/x-types';
-import { createNextQueryStub } from '../../../../__stubs__/next-queries-stubs.factory';
+import { nextTick } from 'vue';
+import { createNextQueryStub } from '../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { WireMetadata } from '../../../../wiring/wiring.types';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { WireMetadata } from '../../../../wiring';
 import { default as NextQueryComponent } from '../next-query.vue';
 import { XPlugin } from '../../../../plugins/index';
 
 function renderNextQuery({
   suggestion = createNextQueryStub('milk'),
-  template = '<NextQuery :suggestion="suggestion" />'
-}: RenderNextQueryOptions = {}): RenderNextQueryAPI {
-  const [, localVue] = installNewXPlugin();
+  template = '<NextQuery :suggestion="suggestion" :highlightCurated="highlightCurated" />'
+}: RenderNextQueryOptions = {}) {
   const wrapperTemplate = mount(
     {
       props: ['suggestion', 'highlightCurated'],
@@ -21,24 +21,23 @@ function renderNextQuery({
       template
     },
     {
-      localVue,
-      propsData: { suggestion }
+      global: {
+        plugins: [installNewXPlugin()]
+      },
+      props: { suggestion }
     }
   );
   const wrapper = wrapperTemplate.findComponent(NextQueryComponent);
 
   return {
     wrapper,
+    wrapperTemplate,
     suggestion,
-    async clickNextQuery() {
-      wrapper.trigger('click');
-      await localVue.nextTick();
-    },
-    hasIsCuratedClass() {
-      return wrapper
+    clickNextQuery: async () => await wrapper.trigger('click'),
+    hasIsCuratedClass: () =>
+      wrapperTemplate
         .find(getDataTestSelector('next-query'))
-        .element.classList.contains('x-next-query--is-curated');
-    }
+        .element.classList.contains('x-next-query--is-curated')
   };
 }
 
@@ -77,13 +76,12 @@ describe('testing next query item component', () => {
     const template = `
         <NextQuery :suggestion="suggestion">
           <template #default="{ suggestion }">
-            <img data-test="next-query-icon" src="./next-query.svg"/>
+            <img data-test="next-query-icon" src="#" alt=""/>
             <span data-test="next-query-query" :aria-label="suggestion.query">
-                  {{ suggestion.query }}
-                </span>
+              {{ suggestion.query }}
+            </span>
           </template>
-        </NextQuery>
-      `;
+        </NextQuery>`;
 
     const { wrapper, suggestion } = renderNextQuery({
       template
@@ -95,15 +93,16 @@ describe('testing next query item component', () => {
   });
 
   it('highlights NQ if curated and indicated via prop', async () => {
-    const { wrapper, suggestion, hasIsCuratedClass } = renderNextQuery();
+    const { wrapperTemplate, suggestion, hasIsCuratedClass } = renderNextQuery();
 
-    expect(hasIsCuratedClass()).toBe(false);
+    expect(hasIsCuratedClass()).toEqual(false);
 
     suggestion.isCurated = true;
-    expect(hasIsCuratedClass()).toBe(false);
+    expect(hasIsCuratedClass()).toEqual(false);
 
-    await wrapper.setProps({ highlightCurated: true });
-    expect(hasIsCuratedClass()).toBe(true);
+    await wrapperTemplate.setProps({ highlightCurated: true });
+    await nextTick();
+    expect(hasIsCuratedClass()).toEqual(true);
   });
 });
 
@@ -116,14 +115,3 @@ interface RenderNextQueryOptions {
    */
   template?: string;
 }
-
-interface RenderNextQueryAPI {
-  /** The Vue testing utils wrapper for the {@link NextQueryComponent}. */
-  wrapper: Wrapper<Vue>;
-  /** The {@link XComponentAPI} used by the rendered {@link NextQueryComponent}. */
-  suggestion: NextQuery;
-  /** Clicks the next query and waits for the view to update. */
-  clickNextQuery: () => Promise<void>;
-  /** Checks if the next query element is being highlighted as curated with CSS class. */
-  hasIsCuratedClass: () => boolean;
-}
diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
index 92740759e5..5b16f33bc8 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
@@ -1,25 +1,8 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Next queries list layout.
-        @binding {SearchItem[]} items - Next queries groups plus the injected list items to
-        render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
-  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';
   import { NextQuery } from '@empathyco/x-types';
   import ItemsList from '../../../components/items-list.vue';
+  import { useState } from '../../../composables/use-state';
   import { groupItemsBy } from '../../../utils/array';
   import { ListItem } from '../../../utils/types';
   import { NextQueriesGroup } from '../types';
@@ -30,9 +13,7 @@
     QUERY_KEY
   } from '../../../components/decorators/injection.consts';
   import { AnimationProp } from '../../../types/animation-prop';
-  import { use$x } from '../../../composables/use-$x';
   import { useGetter } from '../../../composables/use-getter';
-  import { NoElement } from '../../../components/no-element';
 
   /**
    * Component that inserts groups of next queries in different positions of the injected search
@@ -43,58 +24,32 @@
   export default defineComponent({
     name: 'NextQueriesList',
     xModule: nextQueriesXModule.name,
-    components: {
-      ItemsList,
-      NoElement
-    },
     props: {
-      /**
-       * Animation component that will be used to animate the next queries groups.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the next queries groups. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       },
-      /**
-       * The first index to insert a group of next queries at.
-       *
-       * @public
-       */
+      /** The first index to insert a group of next queries at. */
       offset: {
         type: Number,
         default: 24
       },
-      /**
-       * The items cycle size to keep inserting next queries groups at.
-       *
-       * @public
-       */
+      /** The items cycle size to keep inserting next queries groups at. */
       frequency: {
         type: Number,
         default: 24
       },
-      /**
-       * The maximum amount of next queries to add in a single group.
-       *
-       * @public
-       */
+      /** The maximum amount of next queries to add in a single group. */
       maxNextQueriesPerGroup: {
         type: Number,
         default: 4
       },
-      /**
-       * The maximum number of groups to insert into the injected list items list.
-       *
-       * @public
-       */
+      /** The maximum number of groups to insert into the injected list items list. */
       maxGroups: Number,
       /**
        * Determines if a group is added to the injected items list in case the number
        * of items is smaller than the offset.
-       *
-       * @public
        */
       showOnlyAfterOffset: {
         type: Boolean,
@@ -102,32 +57,23 @@
       }
     },
     setup(props, { slots }) {
-      const $x = use$x();
+      const { query, status } = useState('nextQueries', ['query', 'status']);
 
-      /**
-       * The state next queries.
-       *
-       * @internal
-       */
+      /** The state next queries. */
       const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [
         'nextQueries'
       ]).nextQueries;
 
-      /**
-       * Injected query, updated when the related request(s) have succeeded.
-       */
-      const injectedQuery = inject<Ref<string | undefined>>(QUERY_KEY as string);
+      /** Injected query, updated when the related request(s) have succeeded. */
+      const injectedQuery = inject<Ref<string>>(QUERY_KEY as string);
 
-      /**
-       * Indicates if there are more available results than the injected.
-       */
-      const hasMoreItems = inject<Ref<boolean | undefined>>(HAS_MORE_ITEMS_KEY as string);
+      /** Indicates if there are more available results than the injected. */
+      const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string);
 
       /**
        * The grouped next queries based on the given config.
        *
        * @returns A list of next queries groups.
-       * @internal
        */
       const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>
         Object.values(
@@ -143,51 +89,41 @@
           }))
       );
 
-      /**
-       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
-       *
-       * @internal
-       */
+      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
       const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
       /**
        * Checks if the next queries are outdated taking into account the injected query.
        *
        * @returns True if the next queries are outdated, false if not.
-       * @internal
        */
-      const nextQueriesAreOutdated = computed(() => {
-        return (
+      const nextQueriesAreOutdated = computed(
+        () =>
           !!injectedQuery?.value &&
-          ($x.query.nextQueries !== injectedQuery.value || $x.status.nextQueries !== 'success')
-        );
-      });
+          (query.value !== injectedQuery.value || status.value !== 'success')
+      );
 
       /**
        * Checks if the number of items is smaller than the offset so a group
        * should be added to the injected items list.
        *
        * @returns True if a group should be added, false if not.
-       * @internal
        */
-      const hasNotEnoughListItems = computed(() => {
-        return (
+      const hasNotEnoughListItems = computed(
+        () =>
           !props.showOnlyAfterOffset &&
           !hasMoreItems?.value &&
           injectedListItems !== undefined &&
           injectedListItems.value.length > 0 &&
           props.offset > injectedListItems.value.length
-        );
-      });
+      );
 
       /**
        * New list of {@link ListItem}s to render.
        *
        * @returns The new list of {@link ListItem}s with the next queries groups inserted.
-       * @internal
        */
-
-      const items = computed((): ListItem[] => {
+      const items = computed(() => {
         if (!injectedListItems?.value) {
           return nextQueriesGroups.value;
         }
@@ -215,13 +151,13 @@
        * @remarks It should be overridden in the component that uses the mixin and it's intended to be
        * filled with items from the state. Vue doesn't allow mixins as abstract classes.
        * @returns An empty array as fallback in case it is not overridden.
-       * @internal
        */
       provide(LIST_ITEMS_KEY as string, items);
 
-      return {
-        items,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
index a092cd1a18..170630b3f3 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="renderedNextQueries"
     data-test="next-queries"
     class="x-next-queries"
@@ -58,7 +57,6 @@
       NextQuery,
       BaseSuggestions
     },
-    inheritAttrs: false,
     props: {
       /**
        * Flag to indicate if the curated next queries should be displayed different.
diff --git a/packages/x-components/src/x-modules/next-queries/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/next-queries/store/__tests__/actions.spec.ts
index 80992121da..3c236c13ee 100644
--- a/packages/x-components/src/x-modules/next-queries/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/next-queries/store/__tests__/actions.spec.ts
@@ -1,6 +1,6 @@
 import { HistoryQuery, SearchRequest } from '@empathyco/x-types';
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import {
   createHistoryQueries,
   getNextQueriesStub,
@@ -26,17 +26,20 @@ describe('testing next queries module actions', () => {
     search: mockedSearchResponse
   });
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
   const store: SafeStore<
     NextQueriesState,
     NextQueriesGetters,
     NextQueriesMutations,
     NextQueriesActions
   > = new Store(nextQueriesXStoreModule as any);
-  installNewXPlugin({ adapter, store }, localVue);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   beforeEach(() => {
     resetNextQueriesStateWith(store);
diff --git a/packages/x-components/src/x-modules/next-queries/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/next-queries/store/__tests__/getters.spec.ts
index 0563cb6b4b..636725bbc8 100644
--- a/packages/x-components/src/x-modules/next-queries/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/next-queries/store/__tests__/getters.spec.ts
@@ -1,7 +1,6 @@
 import { NextQueriesRequest } from '@empathyco/x-types';
 import { map } from '@empathyco/x-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import {
   createHistoryQueries,
   createRelatedTagStub,
@@ -12,7 +11,6 @@ import { NextQueriesState } from '../types';
 import { resetNextQueriesStateWith } from './utils';
 
 describe('testing next queries module getters', () => {
-  Vue.use(Vuex);
   const gettersKeys = map(nextQueriesXStoreModule.getters, getter => getter);
   const store: Store<NextQueriesState> = new Store(nextQueriesXStoreModule as any);
 
diff --git a/packages/x-components/src/x-modules/next-queries/store/actions/fetch-next-query-preview.action.ts b/packages/x-components/src/x-modules/next-queries/store/actions/fetch-next-query-preview.action.ts
index 452428638b..f2b930503a 100644
--- a/packages/x-components/src/x-modules/next-queries/store/actions/fetch-next-query-preview.action.ts
+++ b/packages/x-components/src/x-modules/next-queries/store/actions/fetch-next-query-preview.action.ts
@@ -5,10 +5,10 @@ import { createOrigin } from '../../../../utils/origin';
 /**
  * Default implementation for the {@link NextQueriesActions.fetchNextQueryPreview}.
  *
- * @param state - The state of the store, used to retrieve the rows and the extraParams to be sent
- * in the request.
- * @param query - The next query to send in the request.
- * @param location - The {@link FeatureLocation} to send in the request.
+ * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
+ * provided by Vuex.
+ * @param payload - The next query and the {@link FeatureLocation | location} to send in the
+ * request.
  * @returns A Promise of a SearchResponse when it fetches the results, `null` if the request was
  * not made.
  */
diff --git a/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-search.spec.ts b/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-search.spec.ts
index a42f4e403e..fd1cdcf63e 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-search.spec.ts
+++ b/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-search.spec.ts
@@ -1,7 +1,7 @@
 import { Suggestion } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { createPopularSearch } from '../../../../__stubs__/popular-searches-stubs.factory';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
@@ -15,10 +15,7 @@ function renderPopularSearch({
   suggestion = createPopularSearch('baileys'),
   template = '<PopularSearch v-bind="$attrs"/>'
 }: RenderPopularSearchOptions = {}): RenderPopularSearchApi {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [popularSearchesXModule] }, localVue);
 
   const wrapper = mount(
     {
@@ -29,8 +26,10 @@ function renderPopularSearch({
       }
     },
     {
-      localVue,
-      propsData: { suggestion },
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [popularSearchesXModule] })]
+      },
+      props: { suggestion },
       store
     }
   );
@@ -88,7 +87,7 @@ describe('testing popular-search component', () => {
       `
     });
 
-    expect(wrapper.text()).toEqual('🔍 baileys');
+    expect(wrapper.text()).toEqual('🔍baileys');
   });
 });
 
@@ -101,7 +100,7 @@ interface RenderPopularSearchOptions {
 
 interface RenderPopularSearchApi {
   /** Testing wrapper of the {@link PopularSearch} component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The {@link XBus.emit} spy. */
   emitSpy: jest.SpyInstance;
   /** Rendered {@link Suggestion} model data. */
diff --git a/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-searches.spec.ts b/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-searches.spec.ts
index 9051161cc8..e610a0825c 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-searches.spec.ts
+++ b/packages/x-components/src/x-modules/popular-searches/components/__tests__/popular-searches.spec.ts
@@ -1,8 +1,8 @@
 import { Suggestion } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { createPopularSearch } from '../../../../__stubs__/popular-searches-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
@@ -20,12 +20,7 @@ function renderPopularSearches({
   maxItemsToRender,
   template = '<PopularSearches v-bind="$attrs" />'
 }: RenderPopularSearchesOptions = {}): RenderPopularSearchesApi {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store, initialXModules: [popularSearchesXModule] }, localVue);
-  resetXPopularSearchesStateWith(store, { popularSearches });
-
   const wrapper = mount(
     {
       template,
@@ -35,7 +30,9 @@ function renderPopularSearches({
       }
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [popularSearchesXModule] })]
+      },
       store,
       propsData: {
         maxItemsToRender
@@ -43,10 +40,14 @@ function renderPopularSearches({
     }
   );
 
+  resetXPopularSearchesStateWith(store, { popularSearches });
+
   return {
     wrapper: wrapper.findComponent(PopularSearches),
     popularSearches,
     async setMaxItemsToRender(max) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       return await wrapper.setProps({ maxItemsToRender: max });
     },
     getSuggestionItemWrappers() {
@@ -64,22 +65,22 @@ describe('testing Query Suggestions component', () => {
 
   it('does not render anything when suggestions are empty', () => {
     const { wrapper } = renderPopularSearches({ popularSearches: [] });
-    expect(wrapper.html()).toBe('');
+    expect(wrapper.find('x-popular-searches').exists()).toBe(false);
   });
 
-  it('renders the state list of suggestions', () => {
+  it('renders the state list of suggestions', async () => {
     const { getSuggestionItemWrappers, popularSearches } = renderPopularSearches({
       popularSearches: [createPopularSearch('chocolate'), createPopularSearch('milk chocolate')]
     });
-
+    await nextTick();
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
       expect(itemWrapper.text()).toEqual(popularSearches[index].query);
     });
   });
 
-  it('allows to render a custom popular search', () => {
+  it('allows to render a custom popular search', async () => {
     const { getSuggestionItemWrappers, popularSearches } = renderPopularSearches({
       popularSearches: [createPopularSearch('chocolate'), createPopularSearch('milk chocolate')],
       template: `
@@ -92,17 +93,18 @@ describe('testing Query Suggestions component', () => {
       `
     });
 
+    await nextTick();
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
       expect(itemWrapper.get('.custom-suggestion').text()).toEqual(
-        `🔍 ${popularSearches[index].query}`
+        `🔍${popularSearches[index].query}`
       );
       expect(itemWrapper.find(getDataTestSelector('popular-search')).exists()).toBe(false);
     });
   });
 
-  it('allows to render a custom suggestion content', () => {
+  it('allows to render a custom suggestion content', async () => {
     const { getSuggestionItemWrappers, popularSearches } = renderPopularSearches({
       popularSearches: [createPopularSearch('chocolate'), createPopularSearch('milk chocolate')],
       template: `
@@ -113,10 +115,11 @@ describe('testing Query Suggestions component', () => {
       `
     });
 
+    await nextTick();
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
-      expect(itemWrapper.text()).toEqual(`🔍 ${popularSearches[index].query}`);
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
+      expect(itemWrapper.text()).toEqual(`🔍${popularSearches[index].query}`);
       expect(itemWrapper.find(getDataTestSelector('popular-search')).exists()).toBe(true);
     });
   });
@@ -134,13 +137,13 @@ describe('testing Query Suggestions component', () => {
       });
 
     await setMaxItemsToRender(popularSearches.length - 1);
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(popularSearches.length - 1);
+    expect(getSuggestionItemWrappers()).toHaveLength(popularSearches.length - 1);
 
     await setMaxItemsToRender(popularSearches.length);
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(popularSearches.length);
+    expect(getSuggestionItemWrappers()).toHaveLength(popularSearches.length);
 
     await setMaxItemsToRender(popularSearches.length + 1);
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(popularSearches.length);
+    expect(getSuggestionItemWrappers()).toHaveLength(popularSearches.length);
   });
 });
 
@@ -155,9 +158,9 @@ interface RenderPopularSearchesOptions {
 
 interface RenderPopularSearchesApi {
   /** PopularSearches component testing wrapper. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Retrieves the list item of each suggestion. */
-  getSuggestionItemWrappers: () => WrapperArray<Vue>;
+  getSuggestionItemWrappers: () => DOMWrapper<Element>[];
   /** Updates the maximum number of items to render. */
   setMaxItemsToRender: (max: number) => Promise<void>;
   /** Rendered suggestions data. */
diff --git a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
index c76a139d4a..0be12b7c85 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
+++ b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="popularSearches"
     class="x-popular-searches"
     data-test="popular-searches"
@@ -53,7 +52,6 @@
       PopularSearch,
       BaseSuggestions
     },
-    inheritAttrs: false,
     setup() {
       /**
        * The list of popular searches.
diff --git a/packages/x-components/src/x-modules/popular-searches/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/popular-searches/store/__tests__/actions.spec.ts
index d232629bbc..143eb9e94f 100644
--- a/packages/x-components/src/x-modules/popular-searches/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/popular-searches/store/__tests__/actions.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { getPopularSearchesStub } from '../../../../__stubs__/popular-searches-stubs.factory';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
 import { SafeStore } from '../../../../store/__tests__/utils';
@@ -15,17 +15,20 @@ describe('testing popular searches module actions', () => {
   const mockedSuggestions = getPopularSearchesStub();
   const adapter = getMockedAdapter({ popularSearches: { suggestions: mockedSuggestions } });
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
   const store: SafeStore<
     PopularSearchesState,
     PopularSearchesGetters,
     PopularSearchesMutations,
     PopularSearchesActions
   > = new Store(popularSearchesXStoreModule as any);
-  installNewXPlugin({ store, adapter }, localVue);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   describe('fetchSuggestions', () => {
     it('should return suggestions', async () => {
diff --git a/packages/x-components/src/x-modules/popular-searches/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/popular-searches/store/__tests__/getters.spec.ts
index 90c0e9c648..66e456406d 100644
--- a/packages/x-components/src/x-modules/popular-searches/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/popular-searches/store/__tests__/getters.spec.ts
@@ -1,8 +1,7 @@
 import { PopularSearchesRequest } from '@empathyco/x-types';
 import { map } from '@empathyco/x-utils';
-import { createLocalVue } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { createHistoryQueries } from '../../../../__stubs__/history-queries-stubs.factory';
 import { getPopularSearchesStub } from '../../../../__stubs__/popular-searches-stubs.factory';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
@@ -11,7 +10,6 @@ import { PopularSearchesState } from '../types';
 import { resetPopularSearchesStateWith } from './utils';
 
 describe('testing popular searches module getters', () => {
-  Vue.use(Vuex);
   const gettersKeys = map(popularSearchesXStoreModule.getters, getter => getter);
   const store: Store<PopularSearchesState> = new Store(popularSearchesXStoreModule as any);
 
@@ -40,10 +38,14 @@ describe('testing popular searches module getters', () => {
     const adapter = getMockedAdapter({
       popularSearches: { suggestions: mockedPopularSearches }
     });
-    const localVue = createLocalVue();
-    localVue.config.productionTip = false; // Silent production console messages.
-    localVue.use(Vuex);
-    installNewXPlugin({ store, adapter }, localVue);
+    mount(
+      {},
+      {
+        global: {
+          plugins: [installNewXPlugin({ adapter, store })]
+        }
+      }
+    );
 
     it('should return the popular searches without the previously searched queries', () => {
       resetPopularSearchesStateWith(store, {
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts
index bfbe5a2cf8..6b40d8e50b 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts
@@ -1,7 +1,7 @@
-import Vuex, { Store } from 'vuex';
-import { mount, createLocalVue, Wrapper, WrapperArray } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { RootXStoreState } from '../../../../store/index';
 import { findTestDataById, installNewXPlugin } from '../../../../__tests__/utils';
 import { XPlugin } from '../../../../plugins/index';
@@ -18,15 +18,7 @@ function renderQueryPreviewButton({
   },
   template = `<QueryPreviewButton v-bind="$attrs" />`
 }: RenderQueryPreviewButtonOptions = {}): RenderQueryPreviewButtonAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(queriesPreviewXModule);
-
-  const queryPreviewButtonEmitSpy = jest.fn();
-  XPlugin.bus.on('UserAcceptedAQueryPreview').subscribe(queryPreviewButtonEmitSpy);
 
   const wrapper = mount(
     {
@@ -34,26 +26,29 @@ function renderQueryPreviewButton({
       template
     },
     {
-      localVue,
-      store,
-      propsData: {
+      global: {
+        plugins: [store, installNewXPlugin({ store })]
+      },
+      props: {
         queryPreviewInfo
       }
     }
-  ).findComponent(QueryPreviewButton);
+  );
 
+  XPlugin.registerXModule(queriesPreviewXModule);
   const findTestDataByIdInButton = findTestDataById.bind(undefined, wrapper);
 
+  const queryPreviewButtonEmitSpy = jest.fn();
+  XPlugin.bus.on('UserAcceptedAQueryPreview').subscribe(queryPreviewButtonEmitSpy);
+
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(QueryPreviewButton),
     queryPreviewButtonEmitSpy,
     queryPreviewInfo,
     findTestDataById: findTestDataByIdInButton,
-    clickQueryPreviewButton: () =>
-      findTestDataByIdInButton('query-preview-button').trigger('click'),
     updateExtraParams: async params => {
       store.commit('x/queriesPreview/setParams', params);
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -93,10 +88,10 @@ describe('query preview button', () => {
   });
 
   it('sends the `UserAcceptedAQueryPreview` event when the button is clicked', async () => {
-    const { clickQueryPreviewButton, queryPreviewButtonEmitSpy, updateExtraParams } =
-      renderQueryPreviewButton();
+    const { queryPreviewButtonEmitSpy, updateExtraParams, wrapper } = renderQueryPreviewButton();
+    const queryPreviewButton = wrapper.find('[data-test="query-preview-button"]');
 
-    clickQueryPreviewButton();
+    await queryPreviewButton.trigger('click');
     expect(queryPreviewButtonEmitSpy).toHaveBeenCalledTimes(1);
     expect(queryPreviewButtonEmitSpy).toHaveBeenCalledWith({
       query: 'milk',
@@ -108,7 +103,7 @@ describe('query preview button', () => {
 
     await updateExtraParams({ warehouse: 42 });
 
-    clickQueryPreviewButton();
+    await queryPreviewButton.trigger('click');
     expect(queryPreviewButtonEmitSpy).toHaveBeenCalledTimes(2);
     expect(queryPreviewButtonEmitSpy).toHaveBeenCalledWith({
       query: 'milk',
@@ -130,15 +125,13 @@ interface RenderQueryPreviewButtonOptions {
 
 interface RenderQueryPreviewButtonAPI {
   /** The wrapper of the rendered component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The spy to check if the event was emitted. */
   queryPreviewButtonEmitSpy: jest.Mock;
   /** The query preview info to be used in the component. */
   queryPreviewInfo: QueryPreviewInfo;
-  /** The function to find a data-test by its id. */
-  findTestDataById: (id: string) => WrapperArray<Vue>;
-  /** Clicks the query preview button. */
-  clickQueryPreviewButton: () => void;
   /** Updates the extra params of the query preview module. */
   updateExtraParams: (params: Dictionary<unknown>) => Promise<void>;
+  /** The function to find a data-test by its id. */
+  findTestDataById: (id: string) => DOMWrapper<Element>[];
 }
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
index 87883b33da..2fda8e6dc2 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
@@ -1,36 +1,34 @@
 import { Result, XComponentsAdapter } from '@empathyco/x-types';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
+import { flushPromises, mount } from '@vue/test-utils';
 import {
   createResultStub,
   getEmptySearchResponseStub,
   getResultsStub
-} from '../../../../__stubs__/index';
+} from '../../../../__stubs__';
 import { XComponentsAdapterDummy } from '../../../../__tests__/adapter.dummy';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { queriesPreviewXModule } from '../../x-module';
 import QueryPreviewList from '../query-preview-list.vue';
 import { QueryPreviewInfo } from '../../store/types';
 import { QueryFeature } from '../../../../types';
-import { QueryPreview } from '../index';
+import QueryPreview from '../query-preview.vue';
 
 function renderQueryPreviewList({
   template = `
-        <QueryPreviewList v-bind="$attrs" #default="{ queryPreviewInfo, results }">
-          {{ queryPreviewInfo.query }} - {{results[0].name}}
-        </QueryPreviewList>`,
-  queriesPreviewInfo = [{ query: 'milk' }],
-  results = { milk: getResultsStub(1) },
+    <QueryPreviewList #default="{ queryPreviewInfo, results }">
+      {{ queryPreviewInfo.query }} - {{results[0].name}}
+    </QueryPreviewList>`,
+  queriesPreviewInfo = [{ query: 'milk' }] as QueryPreviewInfo[],
+  results = { milk: getResultsStub(1) } as Record<string, Result[]>,
   debounceTimeMs = 0,
   persistInCache = true,
   queryFeature = 'search_box',
   maxItemsToRender = 4
-}: RenderQueryPreviewListOptions): RenderQueryPreviewListAPI {
-  const localVue = createLocalVue();
+}) {
   const adapter: XComponentsAdapter = {
     ...XComponentsAdapterDummy,
     search: jest.fn(({ query }) => {
-      const fakeResults = results[query];
+      const fakeResults = results[query] ?? [];
       return Promise.resolve({
         ...getEmptySearchResponseStub(),
         results: fakeResults,
@@ -38,18 +36,17 @@ function renderQueryPreviewList({
       });
     })
   };
-  installNewXPlugin({ initialXModules: [queriesPreviewXModule], adapter }, localVue);
+
   const wrapper = mount(
     {
       template,
-      components: {
-        QueryPreviewList,
-        QueryPreview
-      }
+      components: { QueryPreviewList, QueryPreview }
     },
     {
-      localVue,
-      propsData: {
+      global: {
+        plugins: [installNewXPlugin({ initialXModules: [queriesPreviewXModule], adapter })]
+      },
+      props: {
         queriesPreviewInfo,
         debounceTimeMs,
         persistInCache,
@@ -60,41 +57,36 @@ function renderQueryPreviewList({
   );
   return {
     adapter,
-    wrapper: wrapper.findComponent(QueryPreviewList),
-    getQueryPreviewItemWrappers() {
-      return wrapper.findAllComponents(QueryPreview);
-    },
-    reRender() {
-      // A timeout with no time should resolve after all reactivity + promises involved
-      return new Promise(resolve => setTimeout(resolve));
-    }
+    wrapper,
+    queryPreviewListWrapper: wrapper.findComponent(QueryPreviewList),
+    getQueryPreviewItemWrappers: () => wrapper.findAllComponents(QueryPreview)
   };
 }
 
 describe('testing QueryPreviewList', () => {
   it('renders a list of queries one by one', async () => {
-    const { getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
+    const { getQueryPreviewItemWrappers } = renderQueryPreviewList({
       queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }],
       results: { shirt: [createResultStub('Cool shirt')], jeans: [createResultStub('Sick jeans')] }
     });
 
     // Shirt query preview
     let queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(1);
-    expect(queryPreviews.at(0).text()).toEqual(''); // Query preview still is loading
+    expect(queryPreviews).toHaveLength(1);
+    expect(queryPreviews.at(0)?.text()).toEqual(''); // Query preview still is loading
 
     // Shirt, Jeans query previews
-    await reRender();
+    await flushPromises();
     queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(2);
-    expect(queryPreviews.at(0).text()).toEqual('shirt - Cool shirt');
-    expect(queryPreviews.at(1).text()).toEqual('');
+    expect(queryPreviews).toHaveLength(2);
+    expect(queryPreviews.at(0)?.text()).toEqual('shirt - Cool shirt');
+    expect(queryPreviews.at(1)?.text()).toEqual('');
 
-    await reRender();
+    await flushPromises();
     queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(2);
-    expect(queryPreviews.at(0).text()).toEqual('shirt - Cool shirt');
-    expect(queryPreviews.at(1).text()).toEqual('jeans - Sick jeans');
+    expect(queryPreviews).toHaveLength(2);
+    expect(queryPreviews.at(0)?.text()).toEqual('shirt - Cool shirt');
+    expect(queryPreviews.at(1)?.text()).toEqual('jeans - Sick jeans');
   });
 
   it('should propagate global props from the list to each item', async () => {
@@ -102,7 +94,7 @@ describe('testing QueryPreviewList', () => {
     const persistInCacheStub = false;
     const queryFeatureStub: QueryFeature = 'history_query';
     const maxItemsToRenderStub = 2;
-    const { getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
+    const { getQueryPreviewItemWrappers } = renderQueryPreviewList({
       queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }],
       results: { shirt: [createResultStub('Cool shirt')], jeans: [createResultStub('Sick jeans')] },
       debounceTimeMs: debounceTimeMsStub,
@@ -112,36 +104,38 @@ describe('testing QueryPreviewList', () => {
     });
 
     // Shirt, Jeans query previews
-    await reRender();
+    await flushPromises();
     const queryPreviews = getQueryPreviewItemWrappers();
-    queryPreviews.wrappers.forEach(queryPreview => {
-      expect(queryPreview.props().debounceTimeMs).toEqual(debounceTimeMsStub);
-      expect(queryPreview.props().persistInCache).toEqual(persistInCacheStub);
-      expect(queryPreview.props().queryFeature).toEqual(queryFeatureStub);
-      expect(queryPreview.props().maxItemsToRender).toEqual(maxItemsToRenderStub);
+
+    queryPreviews.forEach(queryPreview => {
+      const queryPreviewProps = queryPreview.props() as typeof QueryPreview;
+      expect(queryPreviewProps.debounceTimeMs).toEqual(debounceTimeMsStub);
+      expect(queryPreviewProps.persistInCache).toEqual(persistInCacheStub);
+      expect(queryPreviewProps.queryFeature).toEqual(queryFeatureStub);
+      expect(queryPreviewProps.maxItemsToRender).toEqual(maxItemsToRenderStub);
     });
   });
 
   it('hides queries with no results', async () => {
-    const { getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
+    const { getQueryPreviewItemWrappers } = renderQueryPreviewList({
       queriesPreviewInfo: [{ query: 'noResults' }, { query: 'shoes' }],
       results: { noResults: [], shoes: [createResultStub('Crazy shoes')] }
     });
 
     // noResults query preview
-    await reRender();
+    await flushPromises();
     let queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(1);
-    expect(queryPreviews.at(0).text()).toEqual('');
+    expect(queryPreviews).toHaveLength(1);
+    expect(queryPreviews.at(0)?.text()).toEqual('');
 
-    await reRender();
+    await flushPromises();
     queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(1);
-    expect(queryPreviews.at(0).text()).toEqual('shoes - Crazy shoes');
+    expect(queryPreviews).toHaveLength(1);
+    expect(queryPreviews.at(0)?.text()).toEqual('shoes - Crazy shoes');
   });
 
   it('hides queries that failed', async () => {
-    const { adapter, getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
+    const { adapter, getQueryPreviewItemWrappers } = renderQueryPreviewList({
       queriesPreviewInfo: [{ query: 'willFail' }, { query: 'shoes' }],
       results: {
         willFail: [createResultStub('Will fail')],
@@ -152,19 +146,19 @@ describe('testing QueryPreviewList', () => {
     (adapter.search as jest.Mock).mockRejectedValueOnce('Some error');
 
     // First query will fail
-    await reRender();
+    await flushPromises();
     let queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(1);
-    expect(queryPreviews.at(0).text()).toEqual(''); // Query preview still is loading
+    expect(queryPreviews).toHaveLength(1);
+    expect(queryPreviews.at(0)?.text()).toEqual(''); // Query preview still is loading
 
-    await reRender();
+    await flushPromises();
     queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(1);
-    expect(queryPreviews.at(0).text()).toEqual('shoes - Crazy shoes');
+    expect(queryPreviews).toHaveLength(1);
+    expect(queryPreviews.at(0)?.text()).toEqual('shoes - Crazy shoes');
   });
 
   it('load next batch when it contains duplicates', async () => {
-    const { getQueryPreviewItemWrappers, reRender, wrapper } = renderQueryPreviewList({
+    const { getQueryPreviewItemWrappers, wrapper } = renderQueryPreviewList({
       queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }],
       results: {
         shirt: [createResultStub('Cool shirt')],
@@ -172,38 +166,17 @@ describe('testing QueryPreviewList', () => {
         dress: [createResultStub('cool dress ')]
       }
     });
-    await reRender();
+    await flushPromises();
     let queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(2);
-    wrapper.setProps({
+
+    expect(queryPreviews).toHaveLength(2);
+
+    await wrapper.setProps({
       queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }, { query: 'dress' }]
-    });
-    await reRender();
+    } as any);
+    await flushPromises();
+
     queryPreviews = getQueryPreviewItemWrappers();
-    expect(queryPreviews.wrappers).toHaveLength(3);
+    expect(queryPreviews).toHaveLength(3);
   });
 });
-
-interface RenderQueryPreviewListOptions {
-  /** The template to render the {@link QueryPreviewList} component. */
-  template?: string;
-  /** The queries for which preview its results. */
-  queriesPreviewInfo?: QueryPreviewInfo[];
-  /** The results to return from the mocked search endpoint adapter. */
-  results?: Record<string, Result[]>;
-  persistInCache?: boolean;
-  debounceTimeMs?: number;
-  queryFeature?: QueryFeature;
-  maxItemsToRender?: number;
-}
-
-interface RenderQueryPreviewListAPI {
-  /** The {@link XComponentsAdapter} passed to the {@link XPlugin}. */
-  adapter: XComponentsAdapter;
-  /** The Vue testing utils wrapper for the {@link QueryPreviewList} component. */
-  wrapper: Wrapper<Vue>;
-  /** Returns an array with the {@link QueryPreview} items wrappers. */
-  getQueryPreviewItemWrappers: () => WrapperArray<Vue>;
-  /** Flushes all pending promises to cause the component to be in its final state. */
-  reRender: () => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index 724c3d485c..90a9afa6af 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -1,96 +1,94 @@
-import { mount, Wrapper, createLocalVue, WrapperArray } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { flushPromises, mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
-import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
+import { nextTick } from 'vue';
+import { getResultsStub, getEmptySearchResponseStub } from '../../../../__stubs__';
 import {
   findTestDataById,
   getDataTestSelector,
   installNewXPlugin
 } from '../../../../__tests__/utils';
 import { XComponentsAdapterDummy } from '../../../../__tests__/adapter.dummy';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { RootXStoreState } from '../../../../store/store.types';
-import { XPlugin } from '../../../../plugins/x-plugin';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { RootXStoreState } from '../../../../store';
+import { XPlugin } from '../../../../plugins';
+import { UrlParams } from '../../../../types';
 import { QueryPreviewInfo, QueryPreviewItem } from '../../store/types';
 import { queriesPreviewXModule } from '../../x-module';
 import QueryPreview from '../query-preview.vue';
-import { getEmptySearchResponseStub } from '../../../../__stubs__/index';
 import { getHashFromQueryPreviewInfo } from '../../utils/get-hash-from-query-preview';
 import { resetXQueriesPreviewStateWith } from './utils';
 
-function renderQueryPreview({
-  maxItemsToRender,
-  queryPreviewInfo = { query: 'milk' },
-  location,
-  queryFeature,
-  persistInCache = false,
+async function render({
+  template = `<QueryPreview :queryPreviewInfo="queryPreviewInfo" :queryFeature="queryFeature" :maxItemsToRender="maxItemsToRender" :debounceTimeMs="debounceTimeMs" :persistInCache="persistInCache"/>`,
+  queryPreviewInfo = { query: 'milk' } as QueryPreviewInfo,
+  queryFeature = undefined as undefined | string,
+  maxItemsToRender = undefined as undefined | number,
   debounceTimeMs = 0,
-  template = `<QueryPreview v-bind="$attrs" />`,
+  persistInCache = false,
+  location = undefined as undefined | string,
   queryPreviewInState = {
-    request: {
-      query: queryPreviewInfo.query
-    },
+    request: {},
     results: getResultsStub(4),
     status: 'success',
     instances: 1,
     totalResults: 100
-  }
-}: RenderQueryPreviewOptions = {}): RenderQueryPreviewAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
+  } as QueryPreviewItem
+} = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(queriesPreviewXModule);
-
-  const queryPreviewRequestUpdatedSpy = jest.fn();
-  XPlugin.bus.on('QueryPreviewRequestUpdated').subscribe(queryPreviewRequestUpdatedSpy);
-
-  const queryPreviewUnmounted = jest.fn();
-  XPlugin.bus.on('QueryPreviewUnmounted').subscribe(queryPreviewUnmounted);
-
-  if (queryPreviewInState) {
-    resetXQueriesPreviewStateWith(store, {
-      queriesPreview: {
-        [getHashFromQueryPreviewInfo(queryPreviewInfo)]: queryPreviewInState
-      }
-    });
-  }
 
   const wrapper = mount(
     {
-      components: { QueryPreview },
       template,
-      provide: {
-        location
-      }
+      components: { QueryPreview },
+      props: [
+        'queryPreviewInfo',
+        'queryFeature',
+        'maxItemsToRender',
+        'debounceTimeMs',
+        'persistInCache'
+      ]
     },
     {
-      localVue,
-      store,
-      propsData: {
-        maxItemsToRender,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [queriesPreviewXModule] })],
+        provide: { location }
+      },
+      props: {
         queryPreviewInfo,
         queryFeature,
+        maxItemsToRender,
         debounceTimeMs,
         persistInCache
       }
     }
-  ).findComponent(QueryPreview);
+  );
+
+  const queryPreviewInfoHash = getHashFromQueryPreviewInfo(queryPreviewInfo);
+  queryPreviewInState.request = { query: queryPreviewInfo.query };
+  resetXQueriesPreviewStateWith(store, {
+    queriesPreview: { [queryPreviewInfoHash]: queryPreviewInState }
+  });
+  await nextTick();
+
+  const queryPreviewRequestUpdatedSpy = jest.fn();
+  XPlugin.bus.on('QueryPreviewRequestUpdated').subscribe(queryPreviewRequestUpdatedSpy);
+
+  const queryPreviewUnmountedSpy = jest.fn();
+  XPlugin.bus.on('QueryPreviewUnmounted').subscribe(queryPreviewUnmountedSpy);
 
   return {
     wrapper,
+    queryPreviewWrapper: wrapper.findComponent(QueryPreview),
+    getQueryPreviewItemWrappers: () => wrapper.findAll(getDataTestSelector('query-preview-item')),
     queryPreviewRequestUpdatedSpy,
-    queryPreviewUnmounted,
+    queryPreviewUnmountedSpy,
     queryPreviewInfo,
     queryPreviewInState,
-    findTestDataById: findTestDataById.bind(undefined, wrapper),
-    updateExtraParams: async params => {
+    updateExtraParams: async (params: Partial<UrlParams>) => {
       store.commit('x/queriesPreview/setParams', params);
-      await localVue.nextTick();
-    },
-    reRender: () => new Promise(resolve => setTimeout(resolve)),
-    localVue
+      await nextTick();
+    }
   };
 }
 
@@ -104,15 +102,15 @@ describe('query preview', () => {
     jest.useRealTimers();
   });
 
-  it('is an XComponent which has an XModule', () => {
-    const { wrapper } = renderQueryPreview();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(wrapper.vm)).toBe('queriesPreview');
+  it('is an XComponent which has an XModule', async () => {
+    const { queryPreviewWrapper } = await render();
+
+    expect(isXComponent(queryPreviewWrapper.vm)).toEqual(true);
+    expect(getXComponentXModuleName(queryPreviewWrapper.vm)).toEqual('queriesPreview');
   });
 
-  // eslint-disable-next-line max-len
-  it('does not send the `QueryPreviewRequestUpdated` event if persistInCache is true, but emits load', () => {
-    const { queryPreviewRequestUpdatedSpy, wrapper, queryPreviewInfo } = renderQueryPreview({
+  it('does not send the `QueryPreviewRequestUpdated` event if persistInCache is true, but emits load', async () => {
+    const { queryPreviewRequestUpdatedSpy, queryPreviewWrapper, queryPreviewInfo } = await render({
       persistInCache: true,
       queryPreviewInfo: {
         query: 'shoes',
@@ -122,14 +120,13 @@ describe('query preview', () => {
     });
     const query = getHashFromQueryPreviewInfo(queryPreviewInfo);
 
-    jest.advanceTimersByTime(0); // Wait for first emission.
     expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
-    expect(wrapper.emitted('load')?.length).toBe(1);
-    expect(wrapper.emitted('load')?.[0]).toEqual([query]);
+    expect(queryPreviewWrapper.emitted('load')?.length).toEqual(1);
+    expect(queryPreviewWrapper.emitted('load')?.[0]).toEqual([query]);
   });
 
-  it('emits `QueryPreviewUnmounted` when the component is being destroyed', () => {
-    const { queryPreviewUnmounted, wrapper } = renderQueryPreview({
+  it('emits `QueryPreviewUnmounted` when the component is being unmounted', async () => {
+    const { queryPreviewUnmountedSpy, wrapper } = await render({
       persistInCache: false,
       queryPreviewInfo: {
         query: 'shoes',
@@ -138,11 +135,10 @@ describe('query preview', () => {
       }
     });
 
-    jest.advanceTimersByTime(0); // Wait for first emission
-    wrapper.destroy();
-    expect(queryPreviewUnmounted).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+    expect(queryPreviewUnmountedSpy).toHaveBeenCalledTimes(1);
 
-    const { queryPreviewUnmounted: unmountedEvent, wrapper: newWrapper } = renderQueryPreview({
+    const { queryPreviewUnmountedSpy: unmountedEvent, wrapper: newWrapper } = await render({
       persistInCache: true,
       queryPreviewInfo: {
         query: 'shoes',
@@ -151,13 +147,12 @@ describe('query preview', () => {
       }
     });
 
-    jest.advanceTimersByTime(0); // Wait for first emission
-    newWrapper.destroy();
+    newWrapper.unmount();
     expect(unmountedEvent).toHaveBeenCalledTimes(1);
   });
 
   it('sends the `QueryPreviewRequestUpdated` event', async () => {
-    const { queryPreviewRequestUpdatedSpy, wrapper, updateExtraParams } = renderQueryPreview({
+    const { wrapper, queryPreviewRequestUpdatedSpy, updateExtraParams } = await render({
       persistInCache: false
     });
     await wrapper.setProps({
@@ -167,20 +162,15 @@ describe('query preview', () => {
         filters: ['fit:regular']
       }
     });
-    jest.advanceTimersByTime(0); // Wait for first emission.
+
+    jest.advanceTimersByTime(1); // Wait for first emission.
     expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
     expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledWith({
       extraParams: {
         directory: 'Magrathea'
       },
       filters: {
-        fit: [
-          {
-            id: 'fit:regular',
-            modelName: 'RawFilter',
-            selected: true
-          }
-        ]
+        fit: [{ id: 'fit:regular', modelName: 'RawFilter', selected: true }]
       },
       origin: undefined,
       query: 'shoes',
@@ -189,6 +179,7 @@ describe('query preview', () => {
 
     // The timer is relaunched when the prop changes
     await wrapper.setProps({ queryFeature: 'popular_search' });
+    await nextTick();
     // fast-forward until next timer should be executed
     jest.advanceTimersToNextTimer();
 
@@ -197,13 +188,7 @@ describe('query preview', () => {
         directory: 'Magrathea'
       },
       filters: {
-        fit: [
-          {
-            id: 'fit:regular',
-            modelName: 'RawFilter',
-            selected: true
-          }
-        ]
+        fit: [{ id: 'fit:regular', modelName: 'RawFilter', selected: true }]
       },
       origin: 'popular_search:none',
       query: 'shoes',
@@ -219,13 +204,7 @@ describe('query preview', () => {
         store: 'Uganda'
       },
       filters: {
-        fit: [
-          {
-            id: 'fit:regular',
-            modelName: 'RawFilter',
-            selected: true
-          }
-        ]
+        fit: [{ id: 'fit:regular', modelName: 'RawFilter', selected: true }]
       },
       origin: 'popular_search:none',
       query: 'shoes',
@@ -233,14 +212,15 @@ describe('query preview', () => {
     });
   });
 
-  // eslint-disable-next-line max-len
   it('sends the `QueryPreviewRequestUpdated` event with the correct location provided', async () => {
-    const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
+    const { queryPreviewRequestUpdatedSpy, wrapper } = await render({
       queryPreviewInfo: { query: 'shoes' },
       location: 'predictive_layer'
     });
+
     await wrapper.setProps({ queryFeature: 'query_suggestion' });
     jest.advanceTimersToNextTimer();
+
     expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
       extraParams: {},
       filters: undefined,
@@ -250,80 +230,68 @@ describe('query preview', () => {
     });
   });
 
-  it('renders the results names in the default slot', () => {
-    const { queryPreviewInState, findTestDataById } = renderQueryPreview();
-
-    const wrappers = findTestDataById('result-name');
+  it('renders the results names in the default slot', async () => {
+    const { getQueryPreviewItemWrappers, queryPreviewInState } = await render();
 
-    queryPreviewInState!.results.forEach((result, index) => {
-      expect(wrappers.at(index).element).toHaveTextContent(result.name!);
+    queryPreviewInState.results.forEach((result, index) => {
+      expect(getQueryPreviewItemWrappers().at(index)?.element).toHaveTextContent(result.name!);
     });
   });
 
-  it('renders the specified number of results', () => {
+  it('renders the specified number of results', async () => {
     const maxItemsToRender = 2;
-    const { findTestDataById } = renderQueryPreview({
-      maxItemsToRender
-    });
+    const { queryPreviewWrapper } = await render({ maxItemsToRender });
 
-    expect(findTestDataById('result-name')).toHaveLength(maxItemsToRender);
+    expect(findTestDataById(queryPreviewWrapper, 'result-name')).toHaveLength(maxItemsToRender);
   });
 
-  it('exposes the query, the results and the totalResults in the default slot', () => {
-    const template = `
-      <QueryPreview
-          :queryPreviewInfo="$attrs.queryPreviewInfo"
-          #default="{ results, queryPreviewInfo, totalResults}">
-        <div>
-          <span data-test="query-preview-query">{{ queryPreviewInfo.query }}</span>
-          <span data-test="total-results">{{ totalResults }}</span>
-          <div v-for="result in results" :key="result.id">
-            <span data-test="result-name">{{result.name}}</span>
+  it('exposes the query, the results and the totalResults in the default slot', async () => {
+    const { queryPreviewInfo, queryPreviewWrapper, queryPreviewInState } = await render({
+      template: `
+        <QueryPreview :queryPreviewInfo="queryPreviewInfo" #default="{ results, queryPreviewInfo, totalResults}">
+          <div>
+            <span data-test="query-preview-query">{{ queryPreviewInfo.query }}</span>
+            <span data-test="total-results">{{ totalResults }}</span>
+            <div v-for="result in results" :key="result.id">
+              <span data-test="result-name">{{result.name}}</span>
+            </div>
           </div>
-        </div>
-      </QueryPreview>`;
-
-    const { queryPreviewInfo, wrapper, queryPreviewInState, findTestDataById } = renderQueryPreview(
-      {
-        template
-      }
-    );
+        </QueryPreview>`
+    });
 
-    expect(wrapper.find(getDataTestSelector('query-preview-query')).element).toHaveTextContent(
-      queryPreviewInfo.query
-    );
-    expect(wrapper.find(getDataTestSelector('total-results')).element).toHaveTextContent(
-      queryPreviewInState!.totalResults.toString()
-    );
+    expect(
+      queryPreviewWrapper.find(getDataTestSelector('query-preview-query')).element
+    ).toHaveTextContent(queryPreviewInfo.query);
+    expect(
+      queryPreviewWrapper.find(getDataTestSelector('total-results')).element
+    ).toHaveTextContent(queryPreviewInState.totalResults.toString());
 
-    const resultsWrappers = findTestDataById('result-name');
+    const resultsWrappers = findTestDataById(queryPreviewWrapper, 'result-name');
 
-    queryPreviewInState!.results.forEach((result, index) => {
-      expect(resultsWrappers.at(index).element).toHaveTextContent(result.name!);
+    queryPreviewInState.results.forEach((result, index) => {
+      expect(resultsWrappers.at(index)?.element).toHaveTextContent(result.name!);
     });
   });
 
-  it('allows changing the result content', () => {
-    const template = `
-      <QueryPreview :queryPreviewInfo="$attrs.queryPreviewInfo" #result="{ result }">
-        <span data-test="result-content">{{result.id}} - {{result.name}}</span>
-      </QueryPreview>
-    `;
-    const { findTestDataById, queryPreviewInState } = renderQueryPreview({ template });
+  it('allows changing the result content', async () => {
+    const { queryPreviewWrapper, queryPreviewInState } = await render({
+      template: `
+        <QueryPreview :queryPreviewInfo="queryPreviewInfo" #result="{ result }">
+          <span data-test="result-content">{{result.id}} - {{result.name}}</span>
+        </QueryPreview>`
+    });
 
-    const resultsWrapper = findTestDataById('result-content');
+    const resultsWrapper = findTestDataById(queryPreviewWrapper, 'result-content');
 
-    queryPreviewInState!.results.forEach((result, index) => {
-      expect(resultsWrapper.at(index).element).toHaveTextContent(`${result.id} - ${result.name!}`);
+    queryPreviewInState.results.forEach((result, index) => {
+      expect(resultsWrapper.at(index)?.element).toHaveTextContent(`${result.id} - ${result.name!}`);
     });
   });
 
-  it('wont render if there are no results', () => {
-    const { wrapper } = renderQueryPreview({
+  it('wont render if there are no results', async () => {
+    const { queryPreviewWrapper } = await render({
       queryPreviewInState: {
-        request: {
-          query: 'milk'
-        },
+        request: { query: 'milk' },
         results: [],
         status: 'initial',
         totalResults: 0,
@@ -331,52 +299,54 @@ describe('query preview', () => {
       }
     });
 
-    expect(wrapper.html()).toEqual('');
+    expect(queryPreviewWrapper.text()).toEqual('');
   });
 
   it('emits load event on success', async () => {
     jest.useRealTimers();
-
-    const { wrapper, reRender, queryPreviewInfo } = renderQueryPreview();
-
     (XComponentsAdapterDummy.search as jest.Mock).mockResolvedValueOnce({
       ...getEmptySearchResponseStub(),
       results: getResultsStub(1),
       totalResults: 1
     });
-
+    const { queryPreviewWrapper, queryPreviewInfo } = await render({
+      queryPreviewInState: {
+        request: { query: 'milk' },
+        results: getResultsStub(4),
+        status: 'initial',
+        instances: 1,
+        totalResults: 100
+      }
+    });
     const query = getHashFromQueryPreviewInfo(queryPreviewInfo);
 
-    await reRender();
+    await flushPromises();
 
-    expect(wrapper.emitted('load')?.length).toBe(1);
-    expect(wrapper.emitted('load')?.[0]).toEqual([query]);
-    expect(wrapper.emitted('error')).toBeUndefined();
+    expect(queryPreviewWrapper.emitted('load')?.length).toEqual(1);
+    expect(queryPreviewWrapper.emitted('load')?.[0]).toEqual([query]);
+    expect(queryPreviewWrapper.emitted('error')).toEqual(undefined);
 
     jest.useFakeTimers();
   });
 
   it('emits error event on success if results are empty', async () => {
     jest.useRealTimers();
-    const { wrapper, reRender, queryPreviewInfo } = renderQueryPreview({
+    const { queryPreviewWrapper, queryPreviewInfo } = await render({
       queryPreviewInState: {
-        request: {
-          query: 'milk'
-        },
+        request: { query: 'milk' },
         results: [],
         status: 'initial',
         totalResults: 0,
         instances: 1
       }
     });
-
     const query = getHashFromQueryPreviewInfo(queryPreviewInfo);
 
-    await reRender();
+    await flushPromises();
 
-    expect(wrapper.emitted('error')?.length).toBe(1);
-    expect(wrapper.emitted('error')?.[0]).toEqual([query]);
-    expect(wrapper.emitted('load')).toBeUndefined();
+    expect(queryPreviewWrapper.emitted('error')?.length).toEqual(1);
+    expect(queryPreviewWrapper.emitted('error')?.[0]).toEqual([query]);
+    expect(queryPreviewWrapper.emitted('load')).toEqual(undefined);
 
     jest.useFakeTimers();
   });
@@ -384,28 +354,34 @@ describe('query preview', () => {
   it('emits error event on error', async () => {
     jest.useRealTimers();
     (XComponentsAdapterDummy.search as jest.Mock).mockRejectedValueOnce('Some error');
-
-    const { wrapper, reRender } = renderQueryPreview({
-      queryPreviewInState: null
+    const { queryPreviewWrapper } = await render({
+      queryPreviewInState: {
+        request: { query: 'milk' },
+        results: getResultsStub(4),
+        status: 'initial',
+        instances: 1,
+        totalResults: 100
+      }
     });
-
     const query = getHashFromQueryPreviewInfo({ query: 'milk' });
 
-    await reRender();
+    await flushPromises();
 
-    expect(wrapper.emitted('error')?.length).toBe(1);
-    expect(wrapper.emitted('error')?.[0]).toEqual([query]);
-    expect(wrapper.emitted('load')).toBeUndefined();
+    expect(queryPreviewWrapper.emitted('error')?.length).toEqual(1);
+    expect(queryPreviewWrapper.emitted('error')?.[0]).toEqual([query]);
+    expect(queryPreviewWrapper.emitted('load')).toEqual(undefined);
     jest.useFakeTimers();
   });
 
   describe('debounce', () => {
     it('requests immediately when debounce is set to 0', async () => {
-      const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
+      const { queryPreviewRequestUpdatedSpy, wrapper } = await render({
         debounceTimeMs: 0
       });
+
       await wrapper.setProps({ queryPreviewInfo: { query: 'bull' } });
       jest.advanceTimersByTime(0);
+
       expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
       expect(queryPreviewRequestUpdatedSpy).toHaveBeenNthCalledWith(1, {
         extraParams: {},
@@ -415,9 +391,10 @@ describe('query preview', () => {
     });
 
     it('does not emit subsequent requests that happen in less than the debounce time', async () => {
-      const { wrapper, queryPreviewRequestUpdatedSpy } = renderQueryPreview({
+      const { wrapper, queryPreviewRequestUpdatedSpy } = await render({
         debounceTimeMs: 250
       });
+
       await wrapper.setProps({ queryPreviewInfo: { query: 'bull' } });
       jest.advanceTimersByTime(249);
       expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
@@ -453,9 +430,8 @@ describe('query preview', () => {
       });
     });
 
-    // eslint-disable-next-line max-len
     it('updates the debounced request reactively when the debounceTimeMs prop changes', async () => {
-      const { wrapper, queryPreviewRequestUpdatedSpy } = renderQueryPreview({
+      const { wrapper, queryPreviewRequestUpdatedSpy } = await render({
         debounceTimeMs: 250,
         queryPreviewInfo: { query: 'bull' }
       });
@@ -472,60 +448,17 @@ describe('query preview', () => {
       expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
     });
 
-    it('cancels pending requests when the component is destroyed', () => {
-      const { wrapper, queryPreviewRequestUpdatedSpy } = renderQueryPreview({
+    it('cancels pending requests when the component is unmounted', async () => {
+      const { wrapper, queryPreviewRequestUpdatedSpy } = await render({
         debounceTimeMs: 250,
         queryPreviewInfo: { query: 'bull' }
       });
       jest.advanceTimersByTime(249);
       expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
 
-      wrapper.destroy();
+      wrapper.unmount();
       jest.advanceTimersByTime(1);
       expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
     });
   });
 });
-
-interface RenderQueryPreviewOptions {
-  /** The maximum number of results to render. */
-  maxItemsToRender?: number;
-  /** The query preview info for which preview its results. */
-  queryPreviewInfo?: QueryPreviewInfo;
-  /** Boolean to save queries preview in the cache. */
-  persistInCache?: boolean;
-  /** The location of the query preview in the DOM. */
-  location?: string;
-  /** The name of the tool that generated the query. */
-  queryFeature?: string;
-  /** The results preview for the passed query. */
-  queryPreviewInState?: QueryPreviewItem | null;
-  /** Time to debounce requests.  */
-  debounceTimeMs?: number;
-  /**
-   * The template to render. Receives `query` via prop, and has registered the
-   * {@link QueryPreview} component.
-   */
-  template?: string;
-}
-
-interface RenderQueryPreviewAPI {
-  /** The Vue testing utils wrapper for the {@link QueryPreview} component. */
-  wrapper: Wrapper<Vue>;
-  /** A Jest spy set in the {@link XPlugin} `on` function. */
-  queryPreviewRequestUpdatedSpy?: jest.Mock;
-  /** A Jest spy set in the {@link XPlugin} `on` function. */
-  queryPreviewUnmounted?: jest.Mock;
-  /** The query for which preview its results. */
-  queryPreviewInfo: QueryPreviewInfo;
-  /** The results preview for the passed query. */
-  queryPreviewInState: QueryPreviewItem | null;
-  /** Find test data in the wrapper for the {@link QueryPreview} component. */
-  findTestDataById: (testDataId: string) => WrapperArray<Vue>;
-  /** Updates the extra params in the module state. */
-  updateExtraParams: (params: any) => Promise<void>;
-  /** Flushes all pending promises to cause the component to be in its final state. */
-  reRender: () => Promise<void>;
-  /** A local copy of Vue created by createLocalVue to use when mounting the component. */
-  localVue: any;
-}
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
index 3421f161bb..b1acf1afb1 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     :metadata="metadata"
     class="x-query-preview-button x-button"
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index af0a5c71f6..2c4ba1a512 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -14,7 +14,7 @@
         :queryFeature="queryFeature"
         :queryPreviewInfo="queryPreview"
       >
-        <template v-for="(_, slotName) in renderSlots" v-slot:[slotName]="scope">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </QueryPreview>
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-  import Vue, { computed, defineComponent, PropType, ref, watch } from 'vue';
+  import { computed, defineComponent, PropType, ref, watch } from 'vue';
   import { RequestStatus } from '../../../store';
   import { queriesPreviewXModule } from '../x-module';
   import { QueryPreviewInfo } from '../store/types';
@@ -99,9 +99,7 @@
         default: 'ul'
       }
     },
-    setup(props, { slots }) {
-      const renderSlots = slots;
-
+    setup(props) {
       /**
        * Contains the status of the preview requests, indexed by query.
        */
@@ -141,8 +139,7 @@
       const loadNext = (): void => {
         const queryToLoad = queries.value.find(query => !(query in queriesStatus.value));
         if (queryToLoad) {
-          //TODO - change this logic when we migrate to vue@3. It won't be necessary. Check this link https://v2.vuejs.org/v2/guide/migration-vue-2-7#Behavior-Differences-from-Vue-3
-          Vue.set(queriesStatus.value, queryToLoad, 'loading');
+          queriesStatus.value[queryToLoad] = 'loading';
         }
       };
 
@@ -193,8 +190,7 @@
       return {
         renderedQueryPreviews,
         flagAsFailed,
-        flagAsLoaded,
-        renderSlots
+        flagAsLoaded
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 4947d4041c..5563bd6883 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -1,37 +1,20 @@
 <template>
-  <NoElement v-if="queryPreviewResults && queryPreviewResults.totalResults > 0">
-    <!--
-      @slot Query Preview default slot.
-          @binding {QueryPreviewInfo} queryPreviewInfo - The information about the request of the
-          query preview
-          @binding {Result[]} results - The results preview of the query preview
-          @binding {number} totalResults - The total results of the search request
-    -->
-    <slot
-      :queryPreviewInfo="queryPreviewInfo"
-      :results="queryPreviewResults.results"
-      :totalResults="queryPreviewResults.totalResults"
-      :displayTagging="queryPreviewResults.displayTagging"
-      :queryTagging="queryPreviewResults.queryTagging"
+  <ul v-if="hasResults" data-test="query-preview" class="x-query-preview">
+    <li
+      v-for="result in queryPreviewResults?.results"
+      :key="result.id"
+      class="x-query-preview__item"
+      data-test="query-preview-item"
     >
-      <ul data-test="query-preview" class="x-query-preview">
-        <li
-          v-for="result in queryPreviewResults.results"
-          :key="result.id"
-          class="x-query-preview__item"
-          data-test="query-preview-item"
-        >
-          <!--
-          @slot Query Preview result slot.
-              @binding {Result} result - A Query Preview result
-          -->
-          <slot name="result" :result="result">
-            <span data-test="result-name">{{ result.name }}</span>
-          </slot>
-        </li>
-      </ul>
-    </slot>
-  </NoElement>
+      <!--
+        @slot Query Preview result slot.
+        @binding {Result} result - A Query Preview result
+      -->
+      <slot name="result" :result="result">
+        <span data-test="result-name">{{ result.name }}</span>
+      </slot>
+    </li>
+  </ul>
 </template>
 
 <script lang="ts">
@@ -46,21 +29,21 @@
     Ref,
     watch
   } from 'vue';
-  import { SearchRequest, Result, Filter } from '@empathyco/x-types';
+  import { SearchRequest, Filter } from '@empathyco/x-types';
   import { deepEqual, Dictionary } from '@empathyco/x-utils';
-  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { NoElement } from '../../../components/no-element';
-  import { QueryFeature, FeatureLocation } from '../../../types/origin';
+  import { LIST_ITEMS_KEY } from '../../../components';
+  import { QueryFeature, FeatureLocation } from '../../../types';
   import { QueryPreviewInfo, QueryPreviewItem } from '../store/types';
   import { QueriesPreviewConfig } from '../config.types';
   import { queriesPreviewXModule } from '../x-module';
-  import { createOrigin } from '../../../utils/origin';
-  import { debounce } from '../../../utils/debounce';
-  import { DebouncedFunction } from '../../../utils';
-  import { createRawFilter } from '../../../__stubs__/filters-stubs.factory';
+  import {
+    DebouncedFunction,
+    debounceFunction,
+    createOrigin,
+    createRawFilters
+  } from '../../../utils';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
-  import { useState } from '../../../composables/use-state';
-  import { useXBus } from '../../../composables/use-x-bus';
+  import { useXBus, useState } from '../../../composables';
 
   /**
    * Retrieves a preview of the results of a query and exposes them in the default slot,
@@ -69,34 +52,20 @@
    *
    * @public
    */
-
   export default defineComponent({
     name: 'QueryPreview',
     xModule: queriesPreviewXModule.name,
-    components: { NoElement },
     props: {
-      /**
-       * The information about the request of the query preview.
-       *
-       * @public
-       */
+      /** The information about the request of the query preview. */
       queryPreviewInfo: {
         type: Object as PropType<QueryPreviewInfo>,
         required: true
       },
-      /**
-       * The origin property for the request.
-       *
-       * @public
-       */
+      /** The origin property for the request. */
       queryFeature: {
         type: String as PropType<QueryFeature>
       },
-      /**
-       * Number of query preview results to be rendered.
-       *
-       * @public
-       */
+      /** Number of query preview results to be rendered. */
       maxItemsToRender: {
         type: Number
       },
@@ -112,8 +81,6 @@
       /**
        * Controls whether the QueryPreview should be removed from the state
        * when the component is destroyed.
-       *
-       * @public
        */
       persistInCache: {
         type: Boolean,
@@ -121,7 +88,7 @@
       }
     },
     emits: ['load', 'error'],
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
       const xBus = useXBus();
 
       const queriesPreviewState = useState('queriesPreview', [
@@ -153,11 +120,8 @@
        * Query Preview key converted into a unique id.
        *
        * @returns The query hash.
-       * @internal
        */
-      const queryPreviewHash = computed((): string => {
-        return getHashFromQueryPreviewInfo(props.queryPreviewInfo);
-      });
+      const queryPreviewHash = computed(() => getHashFromQueryPreviewInfo(props.queryPreviewInfo));
 
       provide('queryPreviewHash', queryPreviewHash);
 
@@ -166,7 +130,7 @@
        *
        * @returns The results preview of the actual query preview.
        */
-      const queryPreviewResults = computed((): Partial<QueryPreviewItem> | undefined => {
+      const queryPreviewResults = computed(() => {
         const resultsPreview = previewResults.value[queryPreviewHash.value];
         return resultsPreview?.results
           ? {
@@ -184,12 +148,9 @@
        * `BaseGrid` or any component that injects the list.
        *
        * @returns A list of results.
-       * @public
        */
-      const results = computed((): Result[] | undefined => {
-        return queryPreviewResults.value?.results;
-      });
-      provide<Ref<Result[] | undefined>>(LIST_ITEMS_KEY as string, results);
+      const results = computed(() => queryPreviewResults.value?.results);
+      provide(LIST_ITEMS_KEY as string, results);
 
       /**
        * It injects the provided {@link FeatureLocation} of the selected query in the search request.
@@ -206,16 +167,15 @@
        * The computed request object to be used to retrieve the query preview results.
        *
        * @returns The search request object.
-       * @internal
        */
-      const queryPreviewRequest = computed((): SearchRequest => {
+      const queryPreviewRequest = computed<SearchRequest>(() => {
         const origin = createOrigin({
           feature: props.queryFeature,
           location: location
         });
         const filters = props.queryPreviewInfo.filters?.reduce((filtersList, filterId) => {
           const facetId = filterId.split(':')[0];
-          const rawFilter = createRawFilter(filterId);
+          const rawFilter = createRawFilters([filterId])[0];
           filtersList[facetId] = filtersList[facetId]
             ? filtersList[facetId].concat(rawFilter)
             : [rawFilter];
@@ -240,13 +200,12 @@
        * for cacheable queries.
        *
        * @returns The search request object.
-       * @internal
        */
-      const emitQueryPreviewRequestUpdated = computed((): DebouncedFunction<[SearchRequest]> => {
-        return debounce(request => {
+      const emitQueryPreviewRequestUpdated = computed<DebouncedFunction<[SearchRequest]>>(() =>
+        debounceFunction(request => {
           xBus.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });
-        }, props.debounceTimeMs);
-      });
+        }, props.debounceTimeMs)
+      );
 
       /**
        * Initialises watcher to emit debounced requests, and first value for the requests.
@@ -277,8 +236,6 @@
        * via the `debounce.cancel()` method.
        * If the prop 'persistInCache' is set to false, it also removes the QueryPreview
        * from the state when the component is destroyed.
-       *
-       * @internal
        */
       onBeforeUnmount(() => {
         emitQueryPreviewRequestUpdated.value.cancel();
@@ -313,7 +270,6 @@
        * Emits an event when the query results are loaded or fail to load.
        *
        * @param status - The status of the query preview request.
-       * @internal
        */
       watch(queryPreviewResultsStatus, () => {
         if (queryPreviewResultsStatus.value === 'success') {
@@ -323,9 +279,34 @@
         }
       });
 
-      return {
-        queryPreviewResults
-      };
+      const hasResults = computed(() => (queryPreviewResults.value?.totalResults ?? 0) > 0);
+
+      /**
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no results, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `default` slot or empty string if there are no results.
+       */
+      function renderDefaultSlot() {
+        const slotProps = {
+          queryPreviewInfo: props.queryPreviewInfo,
+          results: queryPreviewResults.value?.results,
+          totalResults: queryPreviewResults.value?.totalResults,
+          displayTagging: queryPreviewResults.value?.displayTagging,
+          queryTagging: queryPreviewResults.value?.queryTagging
+        };
+
+        return hasResults.value ? slots.default?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { hasResults, queryPreviewResults };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/queries-preview/composables/__tests__/use-queries-preview.composable.spec.ts b/packages/x-components/src/x-modules/queries-preview/composables/__tests__/use-queries-preview.composable.spec.ts
index 180c568903..7c5bc53fcd 100644
--- a/packages/x-components/src/x-modules/queries-preview/composables/__tests__/use-queries-preview.composable.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/composables/__tests__/use-queries-preview.composable.spec.ts
@@ -1,6 +1,7 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
+import { defineComponent } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { useQueriesPreview } from '../use-queries-preview.composable';
 import { XPlugin } from '../../../../plugins';
@@ -9,20 +10,33 @@ import { resetXQueriesPreviewStateWith } from '../../components/__tests__/utils'
 import { queriesPreviewXModule } from '../../x-module';
 import { createQueryPreviewItem } from '../../../../__stubs__/queries-preview-stubs.factory';
 
-describe('queries preview composables', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+const store = new Store<DeepPartial<RootXStoreState>>({});
+
+const renderUseQueriesPreview = (): renderUseQueriesPreview => {
+  const component = defineComponent({
+    xModule: queriesPreviewXModule.name,
+    template: '<div></div>'
+  });
 
-  const store = new Store<DeepPartial<RootXStoreState>>({});
+  const wrapper = mount(component, {
+    global: { plugins: [installNewXPlugin({ store }), store] }
+  });
 
-  installNewXPlugin({ store }, localVue);
   XPlugin.registerXModule(queriesPreviewXModule);
 
+  return {
+    store,
+    wrapper
+  };
+};
+
+describe('queries preview composables', () => {
   beforeEach(() => {
     resetXQueriesPreviewStateWith(store);
   });
 
   describe('isAnyQueryLoadedInPreview', () => {
+    const { store } = renderUseQueriesPreview();
     const { isAnyQueryLoadedInPreview } = useQueriesPreview();
 
     it('returns true if any query has results', () => {
@@ -64,3 +78,8 @@ describe('queries preview composables', () => {
     });
   });
 });
+
+type renderUseQueriesPreview = {
+  store: Store<DeepPartial<RootXStoreState>>;
+  wrapper: VueWrapper;
+};
diff --git a/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
index 2bcf798e98..5d1c4323b3 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
@@ -1,7 +1,13 @@
-import Vuex, { Store } from 'vuex';
-import { createLocalVue } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { defineComponent, nextTick } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { SearchResponse } from '@empathyco/x-types';
 import { getSearchResponseStub } from '../../../../__stubs__/search-response-stubs.factory';
-import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
+import {
+  getMockedAdapter,
+  installNewXPlugin,
+  MockedXComponentsAdapter
+} from '../../../../__tests__/utils';
 import { SafeStore } from '../../../../store/__tests__/utils';
 import { queriesPreviewXStoreModule } from '../module';
 import {
@@ -14,33 +20,51 @@ import {
 } from '../types';
 import { getQueryPreviewRequest } from '../../../../__stubs__/queries-preview-stubs.factory';
 import { getHashFromQueryPreviewInfo } from '../../utils/get-hash-from-query-preview';
-import { resetQueriesPreviewStateWith } from './utils';
+import { queriesPreviewXModule } from '../../x-module';
+import { XPlugin } from '../../../../plugins/index';
+
+const store: SafeStore<
+  QueriesPreviewState,
+  QueriesPreviewGetters,
+  QueriesPreviewMutations,
+  QueriesPreviewActions
+> = new Store(queriesPreviewXStoreModule as any);
+
+const renderQueryPreviewActions = (): RenderQueryPreviewActions => {
+  const component = defineComponent({
+    xModule: queriesPreviewXModule.name,
+    template: '<div></div>'
+  });
 
-describe('testing queries preview module actions', () => {
   const mockedSearchResponse = getSearchResponseStub();
 
   const adapter = getMockedAdapter({
     search: mockedSearchResponse
   });
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
+  const wrapper = mount(component, {
+    global: {
+      plugins: [
+        installNewXPlugin({ initialXModules: [queriesPreviewXModule], store, adapter }),
+        store
+      ]
+    }
+  });
 
-  const store: SafeStore<
-    QueriesPreviewState,
-    QueriesPreviewGetters,
-    QueriesPreviewMutations,
-    QueriesPreviewActions
-  > = new Store(queriesPreviewXStoreModule as any);
-  installNewXPlugin({ adapter, store }, localVue);
+  XPlugin.registerXModule(queriesPreviewXModule);
 
-  beforeEach(() => {
-    resetQueriesPreviewStateWith(store);
-  });
+  return {
+    adapter,
+    mockedSearchResponse,
+    store,
+    wrapper
+  };
+};
 
+describe('testing queries preview module actions', () => {
   describe('fetchQueryPreview', () => {
     it('should make a search request with a unique id', async () => {
+      const { adapter, mockedSearchResponse } = renderQueryPreviewActions();
       const request = getQueryPreviewRequest('sandals');
       const results = await store.dispatch('fetchQueryPreview', request);
 
@@ -59,8 +83,10 @@ describe('testing queries preview module actions', () => {
 
   describe('fetchAndSaveQueryPreview', () => {
     it('should request and store query preview results in the state', async () => {
+      const { mockedSearchResponse, store } = renderQueryPreviewActions();
       const queryPreview: QueryPreviewInfo = { query: 'tshirt' };
       const request = getQueryPreviewRequest(queryPreview.query);
+      await nextTick();
       const stateResults = store.state.queriesPreview;
       const queryId = getHashFromQueryPreviewInfo(queryPreview);
       const expectedResults: QueryPreviewItem = {
@@ -103,6 +129,7 @@ describe('testing queries preview module actions', () => {
     });
 
     it('should set the status to error when it fails', async () => {
+      const { adapter } = renderQueryPreviewActions();
       adapter.search.mockRejectedValueOnce('Generic error');
       const queryPreview: QueryPreviewInfo = { query: 'sandals' };
       const request = getQueryPreviewRequest(queryPreview.query);
@@ -113,6 +140,7 @@ describe('testing queries preview module actions', () => {
     });
 
     it('should send multiple requests if the queries are different', async () => {
+      const { store } = renderQueryPreviewActions();
       const firstQuery = getHashFromQueryPreviewInfo({ query: 'milk' });
       const secondQuery = getHashFromQueryPreviewInfo({ query: 'cookies' });
       const firstRequest = store.dispatch(
@@ -131,3 +159,15 @@ describe('testing queries preview module actions', () => {
     });
   });
 });
+
+type RenderQueryPreviewActions = {
+  adapter: MockedXComponentsAdapter;
+  mockedSearchResponse: SearchResponse;
+  store: SafeStore<
+    QueriesPreviewState,
+    QueriesPreviewGetters,
+    QueriesPreviewMutations,
+    QueriesPreviewActions
+  >;
+  wrapper: VueWrapper;
+};
diff --git a/packages/x-components/src/x-modules/queries-preview/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/queries-preview/store/__tests__/getters.spec.ts
index 44ac490979..4602327842 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/__tests__/getters.spec.ts
@@ -1,5 +1,4 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import {
   QueriesPreviewActions,
   QueriesPreviewGetters,
@@ -15,9 +14,6 @@ import { getQueryPreviewRequest } from '../../../../__stubs__/queries-preview-st
 import { resetQueriesPreviewStateWith } from './utils';
 
 describe('queries preview module getters', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store: SafeStore<
     QueriesPreviewState,
     QueriesPreviewGetters,
@@ -25,7 +21,7 @@ describe('queries preview module getters', () => {
     QueriesPreviewActions
   > = new Store(queriesPreviewXStoreModule as any);
 
-  installNewXPlugin({ store }, localVue);
+  installNewXPlugin({ store });
 
   beforeEach(() => {
     resetQueriesPreviewStateWith(store);
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 4d4a7adb10..de9fc645eb 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import { getHashFromQueryPreviewItem } from '../utils/get-hash-from-query-preview';
 import { QueriesPreviewXStoreModule } from './types';
@@ -27,13 +26,13 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   getters: { loadedQueriesPreview },
   mutations: {
     clearQueryPreview(state, queryPreviewHash) {
-      Vue.delete(state.queriesPreview, queryPreviewHash);
+      delete state.queriesPreview[queryPreviewHash];
     },
     setParams(state, params) {
       state.params = params;
     },
     setQueryPreviewCached(state, queryPreview) {
-      Vue.set(state.queriesPreview, getHashFromQueryPreviewItem(queryPreview), queryPreview);
+      state.queriesPreview[getHashFromQueryPreviewItem(queryPreview)] = queryPreview;
     },
     setStatus(state, { queryPreviewHash, status }) {
       state.queriesPreview[queryPreviewHash].status = status;
@@ -53,7 +52,7 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
         state.queriesPreview[queryPreviewHash].instances -= 1;
 
         if (!cache && state.queriesPreview[queryPreviewHash].instances === 0) {
-          Vue.delete(state.queriesPreview, queryPreviewHash);
+          delete state.queriesPreview[queryPreviewHash];
         }
       }
     },
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index abd62a74cc..e5518916fb 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -124,9 +124,9 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    * Decreases in 1 the instance counter and removes the query preview if the counter is 0
    * and cache is false.
    *
-   * @param QueryPreviewCacheInfo - Information needed to change QueryPreview state.
-   * queryPreviewHash is the query preview key to find the QueryPreview saved in the state.
-   * cache is a boolean to know if we should remove the QueryPreview or not.
+   * @param QueryPreviewCacheInfo - Information to change QueryPreview state. QueryPreviewHash is
+   * the query preview key to find the QueryPreview saved in the state. Cache is a boolean to know
+   * if we should remove the QueryPreview or not.
    */
   removeQueryPreviewInstance({
     queryPreviewHash,
@@ -138,9 +138,9 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
   /**
    * Updates a result with new fields.
    *
-   * @param QueryPreviewResultPayload - Information needed to update a query preview result.
-   * result is an object that contains at least an id, and the properties to modify.
-   * queryPreviewHash is the query preview key to find the QueryPreview saved in the state.
+   * @param QueryPreviewResultPayload - Information needed to update a query preview result. Result
+   * is an object that contains at least an id, and the properties to modify. QueryPreviewHash is
+   * the query preview key to find the QueryPreview saved in the state.
    */
   updateAQueryPreviewResult({
     result,
diff --git a/packages/x-components/src/x-modules/queries-preview/utils/__tests__/utils.spec.ts b/packages/x-components/src/x-modules/queries-preview/utils/__tests__/utils.spec.ts
index f30c77a779..51b562190d 100644
--- a/packages/x-components/src/x-modules/queries-preview/utils/__tests__/utils.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/utils/__tests__/utils.spec.ts
@@ -1,5 +1,7 @@
-import Vuex, { Store } from 'vuex';
-import { createLocalVue } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { defineComponent } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { SearchResponse } from '@empathyco/x-types';
 import {
   getHashFromQueryPreviewItem,
   getHashFromQueryPreviewInfo
@@ -16,28 +18,42 @@ import {
 } from '../../store/index';
 import { SafeStore } from '../../../../store/__tests__/utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
-import { resetQueriesPreviewStateWith } from '../../store/__tests__/utils';
+import { queriesPreviewXModule } from '../../x-module';
+import { XPlugin } from '../../../../plugins/index';
 
-describe('testing queries preview module utils', () => {
-  const mockedSearchResponse = getSearchResponseStub();
+const store: SafeStore<
+  QueriesPreviewState,
+  QueriesPreviewGetters,
+  QueriesPreviewMutations,
+  QueriesPreviewActions
+> = new Store(queriesPreviewXStoreModule as any);
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
+const renderQueryPreviewUtils = (): RenderQueryPreviewUtils => {
+  const component = defineComponent({
+    xModule: queriesPreviewXModule.name,
+    template: '<div></div>'
+  });
 
-  const store: SafeStore<
-    QueriesPreviewState,
-    QueriesPreviewGetters,
-    QueriesPreviewMutations,
-    QueriesPreviewActions
-  > = new Store(queriesPreviewXStoreModule as any);
-  installNewXPlugin({ store }, localVue);
+  const mockedSearchResponse = getSearchResponseStub();
 
-  beforeEach(() => {
-    resetQueriesPreviewStateWith(store);
+  const wrapper = mount(component, {
+    global: {
+      plugins: [installNewXPlugin({ initialXModules: [queriesPreviewXModule], store }), store]
+    }
   });
 
+  XPlugin.registerXModule(queriesPreviewXModule);
+
+  return {
+    mockedSearchResponse,
+    store,
+    wrapper
+  };
+};
+
+describe('testing queries preview module utils', () => {
   it('should check if a query hash from a QueryPreviewItem is created correctly', async () => {
+    const { mockedSearchResponse, store } = renderQueryPreviewUtils();
     const queryPreviewItem: QueryPreviewItem = {
       totalResults: mockedSearchResponse.totalResults,
       results: mockedSearchResponse.results,
@@ -74,6 +90,7 @@ describe('testing queries preview module utils', () => {
 
   // eslint-disable-next-line max-len
   it('should check if a query hash from a QueryPreviewInfo and from a QueryPreviewItem is the same', () => {
+    const { mockedSearchResponse } = renderQueryPreviewUtils();
     const queryPreviewItem: QueryPreviewItem = {
       totalResults: mockedSearchResponse.totalResults,
       results: mockedSearchResponse.results,
@@ -101,3 +118,14 @@ describe('testing queries preview module utils', () => {
     expect(queryPreviewItemHash).toBe(queryPreviewInfoHash);
   });
 });
+
+type RenderQueryPreviewUtils = {
+  mockedSearchResponse: SearchResponse;
+  store: SafeStore<
+    QueriesPreviewState,
+    QueriesPreviewGetters,
+    QueriesPreviewMutations,
+    QueriesPreviewActions
+  >;
+  wrapper: VueWrapper;
+};
diff --git a/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestion.spec.ts b/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestion.spec.ts
index c3b17b4d34..a760413bfa 100644
--- a/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestion.spec.ts
+++ b/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestion.spec.ts
@@ -1,6 +1,7 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { createQuerySuggestion } from '../../../../__stubs__/query-suggestions-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
@@ -16,13 +17,8 @@ function renderQuerySuggestion({
   query = '',
   template = '<QuerySuggestion :suggestion="suggestion"/>'
 } = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  installNewXPlugin({ store, initialXModules: [querySuggestionsXModule] }, localVue);
-  resetXQuerySuggestionsStateWith(store, { query });
-
   const wrapper = mount(
     {
       template,
@@ -30,12 +26,16 @@ function renderQuerySuggestion({
       props: ['suggestion']
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [querySuggestionsXModule] })]
+      },
       store,
-      propsData: { suggestion }
+      props: { suggestion }
     }
   );
 
+  resetXQuerySuggestionsStateWith(store, { query });
+
   return {
     wrapper: wrapper.findComponent(QuerySuggestion),
     suggestion,
@@ -60,12 +60,12 @@ describe('testing query-suggestion component', () => {
     expect(wrapper.text()).toEqual('milk');
   });
 
-  it('highlights the suggestion matching parts with the state query', () => {
+  it('highlights the suggestion matching parts with the state query', async () => {
     const { wrapper, getMatchingPart } = renderQuerySuggestion({
       suggestion: createQuerySuggestion('baileys'),
       query: 'Bá'
     });
-
+    await nextTick();
     expect(getMatchingPart().text()).toEqual('ba');
     expect(wrapper.text()).toEqual('baileys');
   });
@@ -101,6 +101,6 @@ describe('testing query-suggestion component', () => {
       </QuerySuggestion>`
     });
 
-    expect(wrapper.text()).toEqual('🔍 baileys');
+    expect(wrapper.text()).toEqual('🔍baileys');
   });
 });
diff --git a/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestions.spec.ts b/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestions.spec.ts
index f74cebb068..1287b2dd14 100644
--- a/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestions.spec.ts
+++ b/packages/x-components/src/x-modules/query-suggestions/components/__tests__/query-suggestions.spec.ts
@@ -1,6 +1,7 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { createQuerySuggestion } from '../../../../__stubs__/query-suggestions-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
@@ -18,13 +19,8 @@ function renderQuerySuggestions({
   maxItemsToRender = 5,
   template = '<QuerySuggestions v-bind="$attrs" />'
 } = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  installNewXPlugin({ store, initialXModules: [querySuggestionsXModule] }, localVue);
-  resetXQuerySuggestionsStateWith(store, { suggestions });
-
   const wrapper = mount(
     {
       template,
@@ -32,14 +28,18 @@ function renderQuerySuggestions({
       components: { QuerySuggestions }
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [querySuggestionsXModule] })]
+      },
       store,
-      propsData: { maxItemsToRender }
+      props: { maxItemsToRender }
     }
   );
 
+  resetXQuerySuggestionsStateWith(store, { suggestions });
+
   return {
-    wrapper: wrapper.findComponent(QuerySuggestions),
+    wrapper,
     suggestions,
     getSuggestionItemWrappers: () => wrapper.findAll(getDataTestSelector('suggestion-item'))
   };
@@ -49,29 +49,31 @@ describe('testing Query Suggestions component', () => {
   it('is an XComponent that belongs to the query suggestions module', () => {
     const { wrapper } = renderQuerySuggestions();
 
-    expect(isXComponent(wrapper.vm)).toBeTruthy();
-    expect(getXComponentXModuleName(wrapper.vm)).toEqual('querySuggestions');
+    expect(isXComponent(wrapper.findComponent(QuerySuggestions).vm)).toBeTruthy();
+    expect(getXComponentXModuleName(wrapper.findComponent(QuerySuggestions).vm)).toEqual(
+      'querySuggestions'
+    );
   });
 
   it('does not render anything when suggestions are empty', () => {
     const { wrapper } = renderQuerySuggestions({ suggestions: [] });
 
-    expect(wrapper.html()).toEqual('');
+    expect(wrapper.find('x-query-suggestions').exists()).toBe(false);
   });
 
-  it('renders the state list of suggestions', () => {
+  it('renders the state list of suggestions', async () => {
     const { getSuggestionItemWrappers, suggestions } = renderQuerySuggestions({
       suggestions: [createQuerySuggestion('chocolate'), createQuerySuggestion('milk chocolate')]
     });
-
+    await nextTick();
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
       expect(itemWrapper.text()).toEqual(suggestions[index].query);
     });
   });
 
-  it('allows to render a custom query suggestion', () => {
+  it('allows to render a custom query suggestion', async () => {
     const { getSuggestionItemWrappers, suggestions } = renderQuerySuggestions({
       suggestions: [createQuerySuggestion('chocolate'), createQuerySuggestion('milk chocolate')],
       template: `
@@ -82,18 +84,16 @@ describe('testing Query Suggestions component', () => {
           </button>
         </QuerySuggestions>`
     });
-
+    await nextTick();
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
-      expect(itemWrapper.get('.custom-suggestion').text()).toEqual(
-        `🔍 ${suggestions[index].query}`
-      );
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
+      expect(itemWrapper.get('.custom-suggestion').text()).toEqual(`🔍${suggestions[index].query}`);
       expect(itemWrapper.find(getDataTestSelector('query-suggestion')).exists()).toBe(false);
     });
   });
 
-  it('allows to render a custom suggestion content', () => {
+  it('allows to render a custom suggestion content', async () => {
     const { getSuggestionItemWrappers, suggestions } = renderQuerySuggestions({
       suggestions: [createQuerySuggestion('chocolate'), createQuerySuggestion('milk chocolate')],
       template: `
@@ -102,11 +102,11 @@ describe('testing Query Suggestions component', () => {
           <span>{{ suggestion.query }}</span>
         </QuerySuggestions>`
     });
-
+    await nextTick();
     const suggestionItemWrappers = getSuggestionItemWrappers();
     expect(suggestionItemWrappers).toHaveLength(2);
-    suggestionItemWrappers.wrappers.forEach((itemWrapper, index) => {
-      expect(itemWrapper.text()).toEqual(`🔍 ${suggestions[index].query}`);
+    suggestionItemWrappers.forEach((itemWrapper, index) => {
+      expect(itemWrapper.text()).toEqual(`🔍${suggestions[index].query}`);
       expect(itemWrapper.find(getDataTestSelector('query-suggestion')).exists()).toBe(true);
     });
   });
@@ -121,13 +121,19 @@ describe('testing Query Suggestions component', () => {
       ]
     });
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     await wrapper.setProps({ maxItemsToRender: suggestions.length - 1 });
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(suggestions.length - 1);
+    expect(getSuggestionItemWrappers()).toHaveLength(suggestions.length - 1);
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     await wrapper.setProps({ maxItemsToRender: suggestions.length });
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(suggestions.length);
+    expect(getSuggestionItemWrappers()).toHaveLength(suggestions.length);
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     await wrapper.setProps({ maxItemsToRender: suggestions.length });
-    expect(getSuggestionItemWrappers().wrappers).toHaveLength(suggestions.length);
+    expect(getSuggestionItemWrappers()).toHaveLength(suggestions.length);
   });
 });
diff --git a/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue b/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
index e7c83f2079..5933572d20 100644
--- a/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
+++ b/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="suggestions"
     class="x-query-suggestions"
     data-test="query-suggestions"
@@ -49,7 +48,6 @@
     name: 'QuerySuggestions',
     xModule: querySuggestionsXModule.name,
     components: { BaseSuggestions, QuerySuggestion },
-    inheritAttrs: false,
     setup() {
       /** The module's list of suggestions. */
       const { querySuggestions } = useGetter('querySuggestions', ['querySuggestions']);
diff --git a/packages/x-components/src/x-modules/query-suggestions/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/query-suggestions/store/__tests__/actions.spec.ts
index 986650c8b5..5480706456 100644
--- a/packages/x-components/src/x-modules/query-suggestions/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/query-suggestions/store/__tests__/actions.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { getQuerySuggestionsStub } from '../../../../__stubs__/query-suggestions-stubs.factory';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
 import { SafeStore } from '../../../../store/__tests__/utils';
@@ -19,17 +19,20 @@ describe('testing query suggestions module actions', () => {
     querySuggestions: { suggestions: mockedSuggestions }
   });
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
   const store: SafeStore<
     QuerySuggestionsState,
     QuerySuggestionsGetters,
     QuerySuggestionsMutations,
     QuerySuggestionsActions
   > = new Store(querySuggestionsXStoreModule as any);
-  installNewXPlugin({ adapter, store }, localVue);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   beforeEach(() => {
     resetQuerySuggestionsStateWith(store, { query: '' });
diff --git a/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts b/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts
index 2471a9f641..39abbe3960 100644
--- a/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts
+++ b/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts
@@ -1,7 +1,6 @@
 import { QuerySuggestionsRequest, Suggestion } from '@empathyco/x-types';
 import { map } from '@empathyco/x-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { normalizeString } from '../../../../utils';
 import { getQuerySuggestionsStub } from '../../../../__stubs__/query-suggestions-stubs.factory';
 import { querySuggestionsXStoreModule } from '../module';
@@ -10,7 +9,6 @@ import { createHistoryQuery } from '../../../../__stubs__/history-queries-stubs.
 import { resetQuerySuggestionsStateWith } from './utils';
 
 describe('testing query suggestions module getters', () => {
-  Vue.use(Vuex);
   const getters = map(querySuggestionsXStoreModule.getters, getter => getter);
   const store: Store<QuerySuggestionsState> = new Store(querySuggestionsXStoreModule as any);
   beforeEach(() => {
diff --git a/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts b/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts
index b88d7ca9ac..279fa1d2db 100644
--- a/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts
+++ b/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts
@@ -58,9 +58,8 @@ export class QuerySuggestionsGetter implements GettersClass<QuerySuggestionsXSto
 
 const querySuggestionsGetter = new QuerySuggestionsGetter();
 
-// eslint-disable-next-line jsdoc/require-description-complete-sentence
 /**
- * {@inheritDoc QuerySuggestionsGetter.querySuggestions}
+ * Query Suggestions getter.
  *
  * @public
  */
diff --git a/packages/x-components/src/x-modules/recommendations/components/__tests__/recommendations.spec.ts b/packages/x-components/src/x-modules/recommendations/components/__tests__/recommendations.spec.ts
index 6364587f61..30674a31d4 100644
--- a/packages/x-components/src/x-modules/recommendations/components/__tests__/recommendations.spec.ts
+++ b/packages/x-components/src/x-modules/recommendations/components/__tests__/recommendations.spec.ts
@@ -1,13 +1,14 @@
 import { Result } from '@empathyco/x-types';
 import { AnyFunction, DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import { nextTick, h, defineComponent } from 'vue';
+import { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import Recommendations from '../recommendations.vue';
+import { recommendationsXModule } from '../../x-module';
 import { resetXRecommendationsStateWith } from './utils';
 
 /**
@@ -18,28 +19,26 @@ import { resetXRecommendationsStateWith } from './utils';
  */
 function mountRecommendations({
   recommendations = getResultsStub(),
-  scopedSlots = {
+  slots = {
     default: `
-      <span data-test="default-slot" slot-scope="{ recommendation }">
+      <span data-test="default-slot" slot="{ recommendation }">
         {{ recommendation.name }}
       </span>
     `
   }
 }: MountRecommendationsOptions = {}): MountRecommendationsAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-
-  resetXRecommendationsStateWith(store, { recommendations });
 
   const wrapper = mount(Recommendations, {
-    localVue,
+    global: {
+      plugins: [installNewXPlugin({ store, initialXModules: [recommendationsXModule] })]
+    },
     store,
-    scopedSlots
+    slots
   });
 
+  resetXRecommendationsStateWith(store, { recommendations });
+
   return {
     wrapper,
     recommendations,
@@ -62,20 +61,20 @@ describe('testing recommendations component', () => {
 
   it('does not render recommendations when the list is empty', () => {
     const { wrapper } = mountRecommendations({ recommendations: [] });
-    expect(wrapper.html()).toEqual('');
+    expect(wrapper.text()).toEqual('');
   });
 
   it('allows changing the animation with a transition group', async () => {
-    const animation = Vue.extend({
-      render(h) {
+    const { wrapper } = mountRecommendations();
+    const animation = defineComponent({
+      render() {
         return h(
           'transition-group',
-          { attrs: this.$attrs, staticClass: 'test-animation' },
+          { attrs: this.$attrs, class: 'test-animation' },
           this.$slots.default
         );
       }
     });
-    const { wrapper } = mountRecommendations();
 
     await wrapper.setProps({ animation });
 
@@ -83,30 +82,31 @@ describe('testing recommendations component', () => {
     expect(wrapper.find('.test-animation').exists()).toBe(true);
   });
 
-  it('allows customizing the default slot', () => {
+  it('allows customizing the default slot', async () => {
     const { wrapper, recommendations } = mountRecommendations({
-      scopedSlots: {
+      slots: {
         default: `
-          <span data-test="custom-default-slot" slot-scope="{ recommendation }">
+          <span data-test="custom-default-slot" slot="{ recommendation }">
             {{ recommendation.name }}
           </span>
         `
       }
     });
 
+    await nextTick();
     const renderedRecommendations = wrapper.findAll(getDataTestSelector('custom-default-slot'));
 
     expect(renderedRecommendations).toHaveLength(recommendations.length);
     recommendations.forEach((recommendation, index) => {
-      expect(renderedRecommendations.at(index).text()).toEqual(recommendation.name);
+      expect(renderedRecommendations.at(index)?.text()).toEqual(recommendation.name);
     });
   });
 
-  it('allows customizing the layout slot', () => {
+  it('allows customizing the layout slot', async () => {
     const { isScopedSlotOverridden } = mountRecommendations({
-      scopedSlots: {
+      slots: {
         layout: `
-          <ul data-test="custom-layout" slot-scope="{ recommendations }">
+          <ul data-test="custom-layout" slot="{ recommendations }">
             <li v-for="recommendation in recommendations" data-test="custom-recommendation">
               {{ recommendation.name }}
             </li>
@@ -114,7 +114,7 @@ describe('testing recommendations component', () => {
         `
       }
     });
-
+    await nextTick();
     expect(isScopedSlotOverridden('custom-layout')).toBe(true);
   });
 
@@ -122,6 +122,7 @@ describe('testing recommendations component', () => {
   it('renders at most the number of recommendations defined by `maxItemsToRender` prop', async () => {
     const { wrapper, recommendations, getDefaultRecommendations } = mountRecommendations();
 
+    await nextTick();
     expect(getDefaultRecommendations()).toHaveLength(recommendations.length);
 
     await wrapper.setProps({ maxItemsToRender: recommendations.length - 1 });
@@ -139,16 +140,16 @@ interface MountRecommendationsOptions {
   /** The `recommendations` to render. */
   recommendations?: Result[];
   /** The scoped slots to render. */
-  scopedSlots?: Record<string, string | AnyFunction>;
+  slots?: Record<string, string | AnyFunction>;
 }
 
 interface MountRecommendationsAPI {
   /** The wrapper for the `Recommendations` component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The rendered `recommendations`. */
   recommendations: Result[];
   /** The default `recommendations`. */
-  getDefaultRecommendations: () => WrapperArray<Vue>;
+  getDefaultRecommendations: () => DOMWrapper<Element>[];
   /** Check if a scoped slot is overridden. */
   isScopedSlotOverridden: (selector: string) => boolean;
 }
diff --git a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
index fc45d950e1..91add4b2f4 100644
--- a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
+++ b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
@@ -1,38 +1,34 @@
 <template>
-  <NoElement v-if="recommendations.length">
-    <!--
-      @slot Customized Recommendations layout.
-          @binding {Result[]} recommendations - Recommendations to render.
-          @binding {Vue} animation - Animation to animate the elements.
-    -->
-    <slot name="layout" v-bind="{ animation, recommendations }">
-      <component :is="animation" tag="ul" data-test="recommendations" class="x-recommendations">
-        <li
-          v-for="recommendation in recommendations"
-          :key="recommendation.id"
-          class="x-recommendations__item"
-          data-test="recommendation-item"
-        >
-          <!--
-            @slot (Required) Recommendation content.
-            @binding {recommendation} recommendation - Recommendation data.
-          -->
-          <slot :recommendation="recommendation" />
-        </li>
-      </component>
-    </slot>
-  </NoElement>
+  <component
+    :is="animation"
+    v-if="recommendations.length"
+    tag="ul"
+    data-test="recommendations"
+    class="x-recommendations"
+  >
+    <li
+      v-for="recommendation in recommendations"
+      :key="recommendation.id"
+      class="x-recommendations__item"
+      data-test="recommendation-item"
+    >
+      <!--
+        @slot (Required) Recommendation content.
+        @binding {recommendation} recommendation - Recommendation data.
+      -->
+      <slot :recommendation="recommendation" />
+    </li>
+  </component>
 </template>
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
   import { computed, defineComponent, provide, ComputedRef } from 'vue';
-  import { NoElement } from '../../../components/no-element';
-  import { PropsWithType } from '../../../utils/types';
-  import { XEventsTypes } from '../../../wiring/events.types';
+  import { useState } from '../../../composables';
+  import { PropsWithType } from '../../../utils';
+  import { XEventsTypes } from '../../../wiring';
   import { recommendationsXModule } from '../x-module';
-  import { AnimationProp } from '../../../types/animation-prop';
-  import { useState } from '../../../composables/use-state';
+  import { AnimationProp } from '../../../types';
 
   /**
    * It renders a list of recommendations from the
@@ -47,41 +43,22 @@
   export default defineComponent({
     name: 'Recommendations',
     xModule: recommendationsXModule.name,
-    components: {
-      NoElement
-    },
     props: {
-      /**
-       * Animation component that will be used to animate the recommendations.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the recommendations. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       },
-      /**
-       * Number of recommendations to be rendered.
-       *
-       * @public
-       */
+      /** Number of recommendations to be rendered. */
       maxItemsToRender: Number
     },
-    setup(props) {
-      /**
-       * The module's list of recommendations.
-       *
-       * @public
-       */
+    setup(props, { slots }) {
+      /** The module's list of recommendations. */
       const storedRecommendations: ComputedRef<Result[]> = useState('recommendations', [
         'recommendations'
       ]).recommendations;
 
-      /**
-       * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
-       *
-       * @public
-       */
+      /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */
       provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [
         'UserClickedARecommendation'
       ]);
@@ -90,21 +67,39 @@
        * Slices the recommendations from the state.
        *
        * @returns - The list of recommendations slice by the number of items to render.
-       *
-       * @internal
        */
-      const recommendations = computed(() =>
+      const recommendations = computed<Result[]>(() =>
         storedRecommendations.value.slice(0, props.maxItemsToRender)
       );
 
-      return {
-        recommendations
-      };
+      /**
+       * Render function to execute the `layout` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no recommendations, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `layout` slot or empty string if there are
+       * no recommendations.
+       */
+      function renderLayoutSlot() {
+        const slotProps = {
+          animation: props.animation,
+          recommendations: recommendations.value
+        };
+        return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `layout` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { recommendations };
+      return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps;
     }
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-recommendations {
     display: flex;
     list-style-type: none;
diff --git a/packages/x-components/src/x-modules/recommendations/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/recommendations/store/__tests__/actions.spec.ts
index 5712487447..6ca404cfbe 100644
--- a/packages/x-components/src/x-modules/recommendations/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/recommendations/store/__tests__/actions.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
 import { SafeStore } from '../../../../store/__tests__/utils';
@@ -16,16 +16,21 @@ describe('testing recommendations module actions', () => {
 
   const adapter = getMockedAdapter({ recommendations: { results: mockedResults } });
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store: SafeStore<
     RecommendationsState,
     RecommendationsGetters,
     RecommendationsMutations,
     RecommendationsActions
   > = new Store(recommendationsXStoreModule as any);
-  installNewXPlugin({ store, adapter }, localVue);
+
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   describe('fetchRecommendations', () => {
     it('should return recommendations', async () => {
diff --git a/packages/x-components/src/x-modules/recommendations/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/recommendations/store/__tests__/getters.spec.ts
index 5d3c4f4d8c..f1c501e403 100644
--- a/packages/x-components/src/x-modules/recommendations/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/recommendations/store/__tests__/getters.spec.ts
@@ -1,6 +1,5 @@
 import { map } from '@empathyco/x-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { RecommendationsRequest } from '@empathyco/x-types';
 import { RECOMMENDATIONS_ORIGIN } from '../constants';
 import { recommendationsXStoreModule } from '../module';
@@ -8,7 +7,6 @@ import { RecommendationsState } from '../types';
 import { resetRecommendationsStateWith } from './utils';
 
 describe('testing recommendations module getters', () => {
-  Vue.use(Vuex);
   const gettersKeys = map(recommendationsXStoreModule.getters, getter => getter);
   const store: Store<RecommendationsState> = new Store(recommendationsXStoreModule as any);
 
diff --git a/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tag.spec.ts b/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tag.spec.ts
index 120dd226fd..ac4e6c8882 100644
--- a/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tag.spec.ts
+++ b/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tag.spec.ts
@@ -1,72 +1,53 @@
-import { RelatedTag } from '@empathyco/x-types';
-import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { XComponentAPI } from '../../../../plugins/x-plugin.types';
-import { RootXStoreState } from '../../../../store/store.types';
-import { getRelatedTagsStub } from '../../../../__stubs__/related-tags-stubs.factory';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { getRelatedTagsStub } from '../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { WireMetadata } from '../../../../wiring/wiring.types';
+import { WireMetadata } from '../../../../wiring';
 import { relatedTagsXModule } from '../../x-module';
-import RelatedTagComponent from '../related-tag.vue';
+import RelatedTag from '../related-tag.vue';
+import { XPlugin } from '../../../../plugins';
 
 describe('testing related tag item component', () => {
   function renderRelatedTag({
     relatedTag = getRelatedTagsStub()[0],
     template = '<RelatedTag :relatedTag="relatedTag" />'
-  }: RenderRelatedTagOptions = {}): RenderRelatedTagsAPI {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-    const store = new Store<DeepPartial<RootXStoreState>>({});
-    installNewXPlugin({ store }, localVue);
-    // Manually re-installing the xModule
-    XPlugin.registerXModule(relatedTagsXModule);
-
-    const wrapperTemplate = mount(
+  } = {}) {
+    const wrapper = mount(
       {
-        props: ['relatedTag', 'highlightCurated'],
-        components: {
-          RelatedTag: RelatedTagComponent
-        },
+        components: { RelatedTag },
         template
       },
       {
-        localVue,
-        store,
-        propsData: { relatedTag }
+        global: { plugins: [installNewXPlugin({ initialXModules: [relatedTagsXModule] })] },
+        props: { relatedTag, highlightCurated: false }
       }
     );
-    const wrapper = wrapperTemplate.findComponent(RelatedTagComponent);
-    const $x = wrapperTemplate.vm.$x;
 
     return {
       wrapper,
-      $x,
+      wrapperRelatedTag: wrapper.findComponent(RelatedTag),
       relatedTag,
-      async clickRelatedTag() {
-        wrapper.trigger('click');
-        await localVue.nextTick();
+      clickRelatedTag: async () => {
+        await wrapper.trigger('click');
       }
     };
   }
 
   it('is an XComponent and has an XModule', () => {
-    const { wrapper } = renderRelatedTag();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(wrapper.vm)).toBe('relatedTags');
+    const { wrapperRelatedTag } = renderRelatedTag();
+    expect(isXComponent(wrapperRelatedTag.vm)).toBeTruthy();
+    expect(getXComponentXModuleName(wrapperRelatedTag.vm)).toEqual('relatedTags');
   });
 
   it('renders a button with the tag of the related tag', () => {
-    const { wrapper, relatedTag } = renderRelatedTag();
-    const relatedTagItem = wrapper.find(getDataTestSelector('related-tag'));
+    const { wrapperRelatedTag, relatedTag } = renderRelatedTag();
+    const relatedTagItem = wrapperRelatedTag.find(getDataTestSelector('related-tag'));
     expect(relatedTagItem.text()).toEqual(relatedTag.tag);
   });
 
   it('allows changing the rendered content with a slot', async () => {
-    const { wrapper, clickRelatedTag, relatedTag } = renderRelatedTag({
+    const { wrapper, wrapperRelatedTag, clickRelatedTag, relatedTag } = renderRelatedTag({
       template: `
         <RelatedTag :relatedTag="relatedTag">
           <template #default="{ relatedTag, isSelected, shouldHighlightCurated }">
@@ -74,9 +55,9 @@ describe('testing related tag item component', () => {
               data-test="related-tag-chevron"
               src="./chevron-icon.svg"
               v-if="shouldHighlightCurated"
-            />
+             alt=""/>
             <span data-test="related-tag-label">{{ relatedTag.tag }}</span>
-            <img data-test="related-tag-cross" src="./cross-icon.svg" v-if="isSelected"/>
+            <img class="x-related-tag-cross" data-test="related-tag-cross" src="./cross-icon.svg" v-if="isSelected" alt=""/>
           </template>
         </RelatedTag>`
     });
@@ -85,20 +66,24 @@ describe('testing related tag item component', () => {
     let relatedTagChevronWrapper = wrapper.find(getDataTestSelector('related-tag-chevron'));
     const relatedTagLabelWrapper = wrapper.find(getDataTestSelector('related-tag-label'));
     let relatedTagCrossWrapper = wrapper.find(getDataTestSelector('related-tag-cross'));
-    expect(relatedTagWrapper.exists()).toEqual(true);
-    expect(relatedTagLabelWrapper.exists()).toEqual(true);
-    expect(relatedTagChevronWrapper.exists()).toEqual(false);
+
+    expect(relatedTagWrapper.exists()).toBeTruthy();
+    expect(relatedTagLabelWrapper.exists()).toBeTruthy();
+    expect(relatedTagChevronWrapper.exists()).toBeFalsy();
     expect(relatedTagLabelWrapper.text()).toEqual(relatedTag.tag);
-    expect(relatedTagCrossWrapper.exists()).toEqual(false);
+    expect(relatedTagCrossWrapper.exists()).toBeFalsy();
 
     await clickRelatedTag();
+
     relatedTagCrossWrapper = wrapper.find(getDataTestSelector('related-tag-cross'));
-    expect(relatedTagCrossWrapper.exists()).toEqual(true);
+    expect(relatedTagCrossWrapper.exists()).toBeTruthy();
+
+    await wrapper.setProps({ highlightCurated: true } as any);
+    await nextTick();
 
-    relatedTag.isCurated = true;
-    await wrapper.setProps({ highlightCurated: true });
-    relatedTagChevronWrapper = wrapper.find(getDataTestSelector('related-tag-chevron'));
-    expect(relatedTagChevronWrapper.exists()).toEqual(true);
+    relatedTagChevronWrapper = wrapperRelatedTag.find('.x-related-tag-cross');
+
+    expect(relatedTagChevronWrapper.exists()).toBeTruthy();
   });
 
   // eslint-disable-next-line max-len
@@ -106,14 +91,14 @@ describe('testing related tag item component', () => {
     const userPickedARelatedTagMock = jest.fn();
     const selectRelatedTagMock = jest.fn();
     const deselectRelatedTagMock = jest.fn();
-    const { $x, clickRelatedTag, relatedTag, wrapper } = renderRelatedTag();
+    const { clickRelatedTag, relatedTag, wrapper } = renderRelatedTag();
     const expectedMetadata: Partial<WireMetadata> = {
       target: wrapper.element,
       feature: 'related_tag'
     };
-    $x.on('UserPickedARelatedTag', true).subscribe(userPickedARelatedTagMock);
-    $x.on('UserSelectedARelatedTag', true).subscribe(selectRelatedTagMock);
-    $x.on('UserDeselectedARelatedTag', true).subscribe(deselectRelatedTagMock);
+    XPlugin.bus.on('UserPickedARelatedTag', true).subscribe(userPickedARelatedTagMock);
+    XPlugin.bus.on('UserSelectedARelatedTag', true).subscribe(selectRelatedTagMock);
+    XPlugin.bus.on('UserDeselectedARelatedTag', true).subscribe(deselectRelatedTagMock);
 
     await clickRelatedTag();
 
@@ -142,22 +127,3 @@ describe('testing related tag item component', () => {
     });
   });
 });
-
-interface RenderRelatedTagOptions {
-  /** The related tag data to render. */
-  relatedTag?: RelatedTag;
-  /** The template to render. Receives the `relatedTag` via prop, and has registered the
-   * {@link RelatedTagComponent} as `RelatedTag`. */
-  template?: string;
-}
-
-interface RenderRelatedTagsAPI {
-  /** The Vue testing utils wrapper for the {@link RelatedTagComponent}. */
-  wrapper: Wrapper<Vue>;
-  /** The {@link XComponentAPI} used by the rendered {@link RelatedTagComponent}. */
-  $x: XComponentAPI;
-  /** The rendered related tag data. */
-  relatedTag: RelatedTag;
-  /** Clicks the related tag and waits for the view to update. */
-  clickRelatedTag: () => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tags.spec.ts b/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tags.spec.ts
index ccfa2e1008..8e236fde6a 100644
--- a/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tags.spec.ts
+++ b/packages/x-components/src/x-modules/related-tags/components/__tests__/related-tags.spec.ts
@@ -1,112 +1,100 @@
-import { RelatedTag } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { RootXStoreState } from '../../../../store/store.types';
-import { getRelatedTagsStub } from '../../../../__stubs__/related-tags-stubs.factory';
+import { DOMWrapper, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { Store } from 'vuex';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { RootXStoreState } from '../../../../store';
+import { getRelatedTagsStub } from '../../../../__stubs__';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { relatedTagsXModule } from '../../x-module';
 import RelatedTagComponent from '../related-tag.vue';
 import RelatedTags from '../related-tags.vue';
 import { resetStoreRelatedTagsState } from './utils';
 
+async function renderRelatedTags({
+  relatedTags = getRelatedTagsStub(),
+  template = '<RelatedTags :itemClass="itemClass" :highlightCurated="highlightCurated" />',
+  itemClass = ''
+} = {}) {
+  const store = new Store<DeepPartial<RootXStoreState>>({});
+
+  const wrapper = mount(
+    {
+      components: { RelatedTags },
+      template
+    },
+    {
+      props: { itemClass, highlightCurated: false },
+      global: { plugins: [installNewXPlugin({ store, initialXModules: [relatedTagsXModule] })] }
+    }
+  );
+
+  resetStoreRelatedTagsState(store, { relatedTags });
+  await nextTick();
+
+  return {
+    wrapper,
+    relatedTagsWrapper: wrapper.findComponent(RelatedTags),
+    relatedTags,
+    getRelatedTagItems: () => wrapper.findAll(getDataTestSelector('related-tag-item')),
+    clickNthRelatedTag: async (nth: number) => {
+      const relatedTagWrappers = wrapper.findAllComponents(RelatedTagComponent);
+      const targetRelatedTagWrapper = relatedTagWrappers[nth];
+      await targetRelatedTagWrapper.trigger('click');
+    }
+  };
+}
+
 describe('testing related tags component', () => {
-  function renderRelatedTags({
-    relatedTags = getRelatedTagsStub(),
-    template = '<RelatedTags v-bind="$attrs" />',
-    itemClass
-  }: RenderRelatedTagsOptions = {}): RenderRelatedTagsAPI {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-    const store = new Store<DeepPartial<RootXStoreState>>({});
-    installNewXPlugin({ store }, localVue);
-
-    // Manually re-installing the xModule and updating its state
-    XPlugin.registerXModule(relatedTagsXModule);
-    resetStoreRelatedTagsState(store, { relatedTags });
-
-    const wrapperTemplate = mount(
-      {
-        props: ['relatedTags', 'highlightCurated'],
-        components: {
-          RelatedTags: RelatedTags
-        },
-        template
-      },
-      {
-        localVue,
-        store,
-        propsData: { relatedTags, itemClass }
-      }
-    );
-    const wrapper = wrapperTemplate.findComponent(RelatedTags);
-
-    return {
-      wrapper,
-      relatedTags,
-      getRelatedTagItems() {
-        return wrapper.findAll(getDataTestSelector('related-tag-item'));
-      },
-      async clickNthRelatedTag(nth) {
-        const relatedTagWrappers = wrapper.findAllComponents(RelatedTagComponent);
-        const targetRelatedTagWrapper = relatedTagWrappers.wrappers[nth];
-        targetRelatedTagWrapper.trigger('click');
-        await localVue.nextTick();
-      }
-    };
-  }
-
-  it('is an XComponent', () => {
-    const { wrapper } = renderRelatedTags();
-
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(wrapper.vm)).toBe('relatedTags');
+  it('is an XComponent', async () => {
+    const { relatedTagsWrapper } = await renderRelatedTags();
+
+    expect(isXComponent(relatedTagsWrapper.vm)).toEqual(true);
+    expect(getXComponentXModuleName(relatedTagsWrapper.vm)).toEqual('relatedTags');
   });
 
-  it('does not render anything if there are not related tags', () => {
-    const { wrapper } = renderRelatedTags({ relatedTags: [] });
+  it('does not render anything if there are not related tags', async () => {
+    const { relatedTagsWrapper } = await renderRelatedTags({ relatedTags: [] });
 
-    expect(wrapper.html()).toEqual('');
+    expect(relatedTagsWrapper.isVisible()).toBeFalsy();
   });
 
-  it('renders a list of the related tags', () => {
-    const { relatedTags, getRelatedTagItems } = renderRelatedTags();
+  it('renders a list of the related tags', async () => {
+    const { relatedTags, getRelatedTagItems } = await renderRelatedTags();
 
-    getRelatedTagItems().wrappers.forEach((relatedTagItemWrapper, index) => {
+    getRelatedTagItems().forEach((relatedTagItemWrapper, index) => {
       expect(relatedTagItemWrapper.text()).toEqual(relatedTags[index].tag);
     });
   });
 
-  it('allows to add classes to each related tag', () => {
-    const { wrapper } = renderRelatedTags({ itemClass: 'custom-class' });
-    const relatedTagWrappers = wrapper.findAllComponents(RelatedTagComponent);
+  it('allows to add classes to each related tag', async () => {
+    const { relatedTagsWrapper } = await renderRelatedTags({ itemClass: 'custom-class' });
+    const relatedTagWrappers = relatedTagsWrapper.findAllComponents(RelatedTagComponent);
 
-    relatedTagWrappers.wrappers.forEach(relatedTagItemWrapper => {
-      expect(relatedTagItemWrapper.classes('custom-class')).toBe(true);
+    relatedTagWrappers.forEach(relatedTagItemWrapper => {
+      expect(relatedTagItemWrapper.classes('custom-class')).toBeTruthy();
     });
   });
 
   it('allows changing the content of each related tag', async () => {
-    const { relatedTags, clickNthRelatedTag, getRelatedTagItems, wrapper } = renderRelatedTags({
-      template: `
-        <RelatedTags>
-          <template #related-tag-content="{relatedTag, isSelected, shouldHighlightCurated }">
-            <img
-              data-test="related-tag-chevron"
-              src="./chevron-icon.svg"
-              v-if="shouldHighlightCurated"
-            />
-            <span data-test="related-tag-label">{{ relatedTag.tag }}</span>
-            <img data-test="related-tag-cross" src="./cross-icon.svg" v-if="isSelected"/>
-          </template>
-        </RelatedTags>`
-    });
+    const { relatedTags, clickNthRelatedTag, getRelatedTagItems, wrapper } =
+      await renderRelatedTags({
+        template: `
+          <RelatedTags>
+            <template #related-tag-content="{relatedTag, isSelected, shouldHighlightCurated }">
+              <img
+                data-test="related-tag-chevron"
+                src="#"
+                v-if="shouldHighlightCurated"
+                alt="" />
+              <span data-test="related-tag-label">{{ relatedTag.tag }}</span>
+              <img data-test="related-tag-cross" src="#" v-if="isSelected" alt=""/>
+            </template>
+          </RelatedTags>`
+      });
 
     function expectToHaveOverriddenContent(
-      relatedTagItemWrapper: Wrapper<Vue>,
+      relatedTagItemWrapper: DOMWrapper<Element>,
       index: number
     ): void {
       const labelWrapper = relatedTagItemWrapper.find(getDataTestSelector('related-tag-label'));
@@ -118,12 +106,12 @@ describe('testing related tags component', () => {
     }
 
     let relatedTagsWrappers = getRelatedTagItems();
-    relatedTagsWrappers.wrappers.forEach(expectToHaveOverriddenContent);
+    relatedTagsWrappers.forEach(expectToHaveOverriddenContent);
 
     await clickNthRelatedTag(relatedTags.length - 1);
     relatedTagsWrappers = getRelatedTagItems();
 
-    const [selectedWrapper, ...unSelectedWrappers] = relatedTagsWrappers.wrappers;
+    const [selectedWrapper, ...unSelectedWrappers] = relatedTagsWrappers;
     const labelWrapper = selectedWrapper.find(getDataTestSelector('related-tag-label'));
     const crossWrapper = selectedWrapper.find(getDataTestSelector('related-tag-cross'));
     expect(labelWrapper.text()).toEqual(relatedTags[relatedTags.length - 1].tag);
@@ -131,16 +119,14 @@ describe('testing related tags component', () => {
     unSelectedWrappers.forEach(expectToHaveOverriddenContent);
 
     relatedTags[relatedTags.length - 1].isCurated = true;
-    await wrapper.setProps({ highlightCurated: true });
+    await wrapper.setProps({ highlightCurated: true } as any);
     relatedTagsWrappers = getRelatedTagItems();
-    const chevron = relatedTagsWrappers.wrappers[0].find(
-      getDataTestSelector('related-tag-chevron')
-    );
+    const chevron = relatedTagsWrappers[0].find(getDataTestSelector('related-tag-chevron'));
     expect(chevron.exists()).toEqual(true);
   });
 
   it('allows changing the whole component for each related tag', async () => {
-    const { getRelatedTagItems, relatedTags, wrapper } = renderRelatedTags({
+    const { getRelatedTagItems, relatedTags, wrapper } = await renderRelatedTags({
       template: `
         <RelatedTags>
           <template #related-tag="{relatedTag, highlightCurated }">
@@ -153,27 +139,27 @@ describe('testing related tags component', () => {
 
     const relatedTagsWrappers = getRelatedTagItems();
 
-    relatedTagsWrappers.wrappers.forEach(relatedTagItemWrapper => {
+    relatedTagsWrappers.forEach(relatedTagItemWrapper => {
       const customRelatedTagWrapper = relatedTagItemWrapper.find(
         getDataTestSelector('custom-related-tag')
       );
-      expect(customRelatedTagWrapper.exists()).toEqual(false);
+      expect(customRelatedTagWrapper.exists()).toBeFalsy();
     });
 
-    await wrapper.setProps({ highlightCurated: true });
+    await wrapper.setProps({ highlightCurated: true } as any);
 
-    relatedTagsWrappers.wrappers.forEach((relatedTagItemWrapper, index) => {
+    relatedTagsWrappers.forEach((relatedTagItemWrapper, index) => {
       const customRelatedTagWrapper = relatedTagItemWrapper.find(
         getDataTestSelector('custom-related-tag')
       );
-      expect(customRelatedTagWrapper.exists()).toEqual(true);
+      expect(customRelatedTagWrapper.exists()).toBeTruthy();
       expect(customRelatedTagWrapper.text()).toEqual(relatedTags[index].tag);
     });
   });
 
-  it('renders a list of related tags which length is, at most, maxItemsToRender', () => {
+  it('renders a list of related tags which length is, at most, maxItemsToRender', async () => {
     const maxItemsToRender = 2;
-    const { wrapper, relatedTags } = renderRelatedTags({
+    const { wrapper, relatedTags } = await renderRelatedTags({
       template: `<RelatedTags maxItemsToRender=${maxItemsToRender} />`
     });
 
@@ -182,29 +168,3 @@ describe('testing related tags component', () => {
     expect(relatedTagsWrappers).toHaveLength(maxItemsToRender);
   });
 });
-
-interface RenderRelatedTagsOptions {
-  /** The initial related tags to render. */
-  relatedTags?: RelatedTag[];
-  /**
-   * The template to render. Receives the `relatedTags` via prop, and has registered the
-   * {@link RelatedTags} component.
-   */
-  template?: string;
-  /** Class to add to the related tags. */
-  itemClass?: string;
-}
-
-interface RenderRelatedTagsAPI {
-  /** The Vue testing utils wrapper for the  {@link RelatedTags} component. */
-  wrapper: Wrapper<Vue>;
-  /** The initial list of related tags that are going to be rendered. */
-  relatedTags: RelatedTag[];
-  /**
-   * Retrieves the wrapper for the items of the list rendered by the {@link RelatedTags}
-   * component.
-   */
-  getRelatedTagItems: () => WrapperArray<Vue>;
-  /** Clicks the nth {@link RelatedTagComponent} component and waits for the view to update. */
-  clickNthRelatedTag: (nth: number) => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/related-tags/components/related-tags.vue b/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
index 42c473fddd..fc3db97439 100644
--- a/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
+++ b/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
@@ -112,7 +112,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-related-tags {
     display: flex;
     flex-flow: row nowrap;
diff --git a/packages/x-components/src/x-modules/related-tags/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/related-tags/store/__tests__/actions.spec.ts
index f8d57783a2..999c965512 100644
--- a/packages/x-components/src/x-modules/related-tags/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/related-tags/store/__tests__/actions.spec.ts
@@ -1,34 +1,19 @@
 import { RelatedTag } from '@empathyco/x-types';
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
-import { getRelatedTagsStub } from '../../../../__stubs__/related-tags-stubs.factory';
+import { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { getRelatedTagsStub } from '../../../../__stubs__';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
-import { SafeStore } from '../../../../store/__tests__/utils';
-import { UrlParams } from '../../../../types/url-params';
+import { UrlParams } from '../../../../types';
 import { relatedTagsXStoreModule } from '../module';
-import {
-  RelatedTagsActions,
-  RelatedTagsGetters,
-  RelatedTagsMutations,
-  RelatedTagsState
-} from '../types';
+import { RelatedTagsState } from '../types';
 import { resetRelatedTagsStateWith } from './utils';
 
 describe('testing related tags module actions', () => {
   const mockedRelatedTags = getRelatedTagsStub();
   const adapter = getMockedAdapter({ relatedTags: { relatedTags: mockedRelatedTags } });
+  const store = new Store<RelatedTagsState>(relatedTagsXStoreModule as any);
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
-  const store: SafeStore<
-    RelatedTagsState,
-    RelatedTagsGetters,
-    RelatedTagsMutations,
-    RelatedTagsActions
-  > = new Store(relatedTagsXStoreModule as any);
-  installNewXPlugin({ adapter, store }, localVue);
+  mount({}, { global: { plugins: [installNewXPlugin({ adapter, store })] } });
 
   beforeEach(() => {
     resetRelatedTagsStateWith(store);
@@ -36,9 +21,7 @@ describe('testing related tags module actions', () => {
 
   describe('fetchRelatedTags', () => {
     it('should return related tags', async () => {
-      resetRelatedTagsStateWith(store, {
-        query: 'lego'
-      });
+      resetRelatedTagsStateWith(store, { query: 'lego' });
 
       const relatedTags = await store.dispatch('fetchRelatedTags', store.getters.request);
       expect(relatedTags).toEqual(mockedRelatedTags);
@@ -52,12 +35,11 @@ describe('testing related tags module actions', () => {
 
   describe('fetchAndSaveRelatedTags', () => {
     it('should request and store related tags in the state', async () => {
-      resetRelatedTagsStateWith(store, {
-        query: 'lego'
-      });
+      resetRelatedTagsStateWith(store, { query: 'lego' });
 
       const actionPromise = store.dispatch('fetchAndSaveRelatedTags', store.getters.request);
       expect(store.state.status).toEqual('loading');
+
       await actionPromise;
       expect(store.state.relatedTags).toEqual(mockedRelatedTags);
       expect(store.state.status).toEqual('success');
@@ -65,6 +47,7 @@ describe('testing related tags module actions', () => {
 
     it('should clear related tags in the state if the query is empty', async () => {
       await store.dispatch('fetchAndSaveRelatedTags', store.getters.request);
+
       expect(store.state.relatedTags).toEqual([]);
     });
 
@@ -78,7 +61,8 @@ describe('testing related tags module actions', () => {
 
       await firstRequest;
       expect(store.state.status).toEqual('loading');
-      expect(store.state.relatedTags).toBe(initialRelatedTags);
+      expect(store.state.relatedTags).toEqual(initialRelatedTags);
+
       await secondRequest;
       expect(store.state.status).toEqual('success');
       expect(store.state.relatedTags).toEqual(mockedRelatedTags);
@@ -90,7 +74,7 @@ describe('testing related tags module actions', () => {
       const relatedTags = store.state.relatedTags;
       await store.dispatch('fetchAndSaveRelatedTags', store.getters.request);
 
-      expect(store.state.relatedTags).toBe(relatedTags);
+      expect(store.state.relatedTags).toEqual(relatedTags);
       expect(store.state.status).toEqual('error');
     });
   });
@@ -103,62 +87,44 @@ describe('testing related tags module actions', () => {
         store.dispatch('fetchAndSaveRelatedTags', store.getters.request),
         store.dispatch('cancelFetchAndSaveRelatedTags')
       ]);
+
       expect(store.state.relatedTags).toEqual(previousRelatedTags);
       expect(store.state.status).toEqual('success');
     });
   });
 
   describe('toggleRelatedTag', () => {
-    const relatedTagToSelect = mockedRelatedTags[0];
-
-    it(
-      'should add the toggled related tag to the selected related tag and remove ' +
-        'the related tags',
-      () => {
-        resetRelatedTagsStateWith(store, {
-          relatedTags: mockedRelatedTags
-        });
-        store.dispatch('toggleRelatedTag', relatedTagToSelect);
-        expect(store.state.selectedRelatedTags).toEqual([relatedTagToSelect]);
-        expect(store.state.relatedTags).toEqual([]);
-      }
-    );
-
-    it(
-      'should remove the related tag if it already exist in the selected related tags and add' +
-        ' it again to the related tags',
-      () => {
-        const partialMockedRelatedTags = mockedRelatedTags.slice(1);
-        resetRelatedTagsStateWith(store, {
-          selectedRelatedTags: [relatedTagToSelect],
-          relatedTags: partialMockedRelatedTags
-        });
-        store.dispatch('toggleRelatedTag', relatedTagToSelect);
-        expect(store.state.selectedRelatedTags).toEqual([]);
-        expect(store.state.relatedTags).toContain(relatedTagToSelect);
-      }
-    );
+    it('should add the toggled related tag to the selected related tag and remove the related tags', () => {
+      resetRelatedTagsStateWith(store, {
+        relatedTags: mockedRelatedTags
+      });
+      const relatedTagToToggle = store.state.relatedTags[0];
+      store.dispatch('toggleRelatedTag', relatedTagToToggle);
+
+      expect(store.state.selectedRelatedTags).toEqual([relatedTagToToggle]);
+      expect(store.state.relatedTags).toEqual([]);
+    });
+
+    it('should remove the related tag if it already exist in the selected related tags and add it again to the related tags', () => {
+      resetRelatedTagsStateWith(store, {
+        selectedRelatedTags: [mockedRelatedTags[0]]
+      });
+      const relatedTagToToggle = store.state.selectedRelatedTags[0];
+      store.dispatch('toggleRelatedTag', relatedTagToToggle);
+
+      expect(store.state.selectedRelatedTags).toEqual([]);
+      expect(store.state.relatedTags).toEqual([relatedTagToToggle]);
+    });
   });
 
   describe('setUrlParams', () => {
     it('should add the query and related tags to the store', () => {
-      store.dispatch('setUrlParams', {
-        query: 'funko',
-        tag: ['pop', 'lego']
-      } as UrlParams);
+      store.dispatch('setUrlParams', { query: 'funko', tag: ['pop', 'lego'] } as UrlParams);
 
       expect(store.state.query).toEqual('funko');
       expect(store.state.selectedRelatedTags).toEqual<RelatedTag[]>([
-        {
-          modelName: 'RelatedTag',
-          tag: 'pop',
-          query: 'funko pop'
-        },
-        {
-          modelName: 'RelatedTag',
-          tag: 'lego',
-          query: 'funko lego'
-        }
+        { modelName: 'RelatedTag', tag: 'pop', query: 'funko pop' },
+        { modelName: 'RelatedTag', tag: 'lego', query: 'funko lego' }
       ]);
     });
   });
diff --git a/packages/x-components/src/x-modules/related-tags/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/related-tags/store/__tests__/getters.spec.ts
index f7a61c0b71..7b4dd3d090 100644
--- a/packages/x-components/src/x-modules/related-tags/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/related-tags/store/__tests__/getters.spec.ts
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { RelatedTagsRequest } from '@empathyco/x-types';
 import {
   createRelatedTagStub,
@@ -16,7 +15,6 @@ import {
 import { resetRelatedTagsStateWith } from './utils';
 
 describe('testing related tags module getters', () => {
-  Vue.use(Vuex);
   const store: SafeStore<
     RelatedTagsState,
     RelatedTagsGetters,
diff --git a/packages/x-components/src/x-modules/scroll/components/__tests__/scroll-to-top.spec.ts b/packages/x-components/src/x-modules/scroll/components/__tests__/scroll-to-top.spec.ts
index 87ba4d42aa..1bc6fd3cac 100644
--- a/packages/x-components/src/x-modules/scroll/components/__tests__/scroll-to-top.spec.ts
+++ b/packages/x-components/src/x-modules/scroll/components/__tests__/scroll-to-top.spec.ts
@@ -1,9 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { installNewXPlugin } from '../../../../__tests__/utils';
-import { XEvent, XEventPayload } from '../../../../wiring/events.types';
+import { XEvent, XEventPayload } from '../../../../wiring';
 import { scrollXModule } from '../../x-module';
 import ScrollToTop from '../scroll-to-top.vue';
+import { XPlugin } from '../../../../plugins';
 
 /**
  * Renders the {@link ScrollToTop} with the provided options.
@@ -14,13 +15,12 @@ import ScrollToTop from '../scroll-to-top.vue';
 function renderScrollToTop({
   defaultSlot = '<span>Top</span>',
   scrollId = 'scrollId',
-  thresholdPx
-}: RenderScrollToTopOptions = {}): RenderScrollToTopAPI {
-  const [, localVue] = installNewXPlugin({ initialXModules: [scrollXModule] });
+  thresholdPx = undefined as undefined | number
+} = {}) {
   const wrapper = mount(ScrollToTop, {
     propsData: { scrollId, thresholdPx },
-    localVue,
-    scopedSlots: {
+    global: { plugins: [installNewXPlugin({ initialXModules: [scrollXModule] })] },
+    slots: {
       default: defaultSlot
     }
   });
@@ -29,12 +29,10 @@ function renderScrollToTop({
 
   return {
     scrollToTopWrapper,
-    async click() {
-      await scrollToTopWrapper.trigger('click');
-    },
-    emitXEvent(event, payload) {
-      scrollToTopWrapper.vm.$x.emit(event, payload, { id: 'scrollId' });
-      return localVue.nextTick();
+    click: async () => await scrollToTopWrapper.trigger('click'),
+    emitXEvent: <Event extends XEvent>(event: Event, payload: XEventPayload<Event>) => {
+      XPlugin.bus.emit(event, payload, { id: 'scrollId', moduleName: null });
+      return nextTick();
     }
   };
 }
@@ -49,26 +47,26 @@ describe('testing Scroll To Top component', () => {
 
   it('shows if a scroll is almost reaching the end and there is no threshold', async () => {
     const { scrollToTopWrapper, emitXEvent } = renderScrollToTop();
-    expect(scrollToTopWrapper.html()).toBe('');
+    expect(scrollToTopWrapper.find('.x-scroll-to-top').exists()).toEqual(false);
     await emitXEvent('UserAlmostReachedScrollEnd', true);
     await emitXEvent('UserChangedScrollDirection', 'DOWN');
-    expect(scrollToTopWrapper.html()).not.toBe('');
+    expect(scrollToTopWrapper.html()).not.toEqual('');
   });
 
   it('shows if the scroll is over the threshold and user scrolls up', async () => {
     const { scrollToTopWrapper, emitXEvent } = renderScrollToTop({ thresholdPx: 200 });
-    expect(scrollToTopWrapper.html()).toBe('');
+    expect(scrollToTopWrapper.find('.x-scroll-to-top').exists()).toEqual(false);
 
     await emitXEvent('UserScrolled', 250);
     await emitXEvent('UserChangedScrollDirection', 'UP');
 
-    expect(scrollToTopWrapper.html()).not.toBe('');
+    expect(scrollToTopWrapper.html()).not.toEqual('');
   });
 
   it("emits event with the component's id as payload when clicked", async () => {
-    const { scrollToTopWrapper, emitXEvent, click } = renderScrollToTop();
+    const { emitXEvent, click } = renderScrollToTop();
     const listener = jest.fn();
-    scrollToTopWrapper.vm.$x.on('UserClickedScrollToTop').subscribe(listener);
+    XPlugin.bus.on('UserClickedScrollToTop').subscribe(listener);
 
     await emitXEvent('UserAlmostReachedScrollEnd', true);
     await emitXEvent('UserChangedScrollDirection', 'DOWN');
@@ -78,16 +76,15 @@ describe('testing Scroll To Top component', () => {
     expect(listener).toHaveBeenCalledWith('scrollId');
   });
 
-  // eslint-disable-next-line max-len
   it('hides when the scroll direction is up once the scroll has almost reached the end', async () => {
     const { scrollToTopWrapper, emitXEvent } = renderScrollToTop();
 
     await emitXEvent('UserChangedScrollDirection', 'DOWN');
     await emitXEvent('UserAlmostReachedScrollEnd', true);
-    expect(scrollToTopWrapper.html()).not.toBe('');
+    expect(scrollToTopWrapper.html()).not.toEqual('');
 
     await emitXEvent('UserChangedScrollDirection', 'UP');
-    expect(scrollToTopWrapper.html()).toBe('');
+    expect(scrollToTopWrapper.find('.x-scroll-to-top').exists()).toEqual(false);
   });
 
   it('hides when the scroll gets lesser than the threshold', async () => {
@@ -95,27 +92,9 @@ describe('testing Scroll To Top component', () => {
 
     await emitXEvent('UserScrolled', 1100);
     await emitXEvent('UserChangedScrollDirection', 'UP');
-    expect(scrollToTopWrapper.html()).not.toBe('');
+    expect(scrollToTopWrapper.html()).not.toEqual('');
 
     await emitXEvent('UserScrolled', 900);
-    expect(scrollToTopWrapper.html()).toBe('');
+    expect(scrollToTopWrapper.find('.x-scroll-to-top').exists()).toEqual(false);
   });
 });
-
-interface RenderScrollToTopOptions {
-  /** The default slot for the component. */
-  defaultSlot?: string;
-  /** The id of the scroll referring the scroll to top. */
-  scrollId?: string;
-  /** The number of pixels of threshold from the top to show the component. */
-  thresholdPx?: number;
-}
-
-interface RenderScrollToTopAPI {
-  /** The wrapper for the base scroll to top component. */
-  scrollToTopWrapper: Wrapper<Vue>;
-  /** Clicks the button. */
-  click: () => Promise<void>;
-  /** Emits an XEvent with the id in metadata. */
-  emitXEvent: <Event extends XEvent>(event: Event, payload: XEventPayload<Event>) => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts b/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts
index 7490beed91..f9346adef3 100644
--- a/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts
+++ b/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts
@@ -1,4 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { WireMetadata } from '../../../../wiring/wiring.types';
@@ -14,7 +14,6 @@ async function renderScroll({
   clientHeight = 200,
   distanceToBottom = 100
 }: RenderScrollOptions = {}): Promise<RenderScrollAPI> {
-  const [, localVue] = installNewXPlugin({ initialXModules: [scrollXModule] });
   const wrapperContainer = mount(
     {
       components: {
@@ -24,19 +23,18 @@ async function renderScroll({
       template
     },
     {
-      propsData: {
+      props: {
         throttleMs,
         id,
         distanceToBottom
       },
-      localVue
+      global: { plugins: [installNewXPlugin({ initialXModules: [scrollXModule] })] }
     }
   );
 
   const wrapper = wrapperContainer.findComponent(Scroll);
-  const scrollElement: HTMLElement = wrapperContainer.find(
-    getDataTestSelector('base-scroll')
-  ).element;
+  const scrollElement: HTMLElement = wrapperContainer.find(getDataTestSelector('base-scroll'))
+    .element as HTMLElement;
   jest.spyOn(scrollElement, 'clientHeight', 'get').mockImplementation(() => clientHeight);
   jest.spyOn(scrollElement, 'scrollHeight', 'get').mockImplementation(() => scrollHeight);
 
@@ -323,7 +321,7 @@ interface RenderScrollOptions {
 
 interface RenderScrollAPI {
   /** The wrapper for the base scroll component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The scroll element. */
   scrollElement: HTMLElement;
   /** Function that launch the trigger scroll. */
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 358086ac59..d84e683de5 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -1,11 +1,11 @@
 <template>
-  <component :is="tag" ref="rootRef" v-on="$listeners" :data-scroll="item.id">
+  <component :is="tag" ref="rootRef" :data-scroll="item.id">
     <slot />
   </component>
 </template>
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import Vue, {
+  import {
     defineComponent,
     inject,
     nextTick,
@@ -15,7 +15,8 @@
     ref,
     watch,
     Ref,
-    WatchCallback
+    WatchCallback,
+    Component
   } from 'vue';
   import { scrollXModule } from '../x-module';
   import { useState } from '../../../composables/use-state';
@@ -40,7 +41,7 @@
       },
       /** The tag to render. */
       tag: {
-        type: [String, Object] as PropType<string | typeof Vue>,
+        type: [String, Object] as PropType<string | Component>,
         default: 'div'
       }
     },
@@ -77,7 +78,7 @@
             oldObserver?.unobserve(rootRef.value);
             newObserver?.observe(rootRef.value);
             if (pendingScrollTo.value === props.item.id) {
-              Vue.nextTick(() => {
+              nextTick(() => {
                 rootRef.value!.scrollIntoView({
                   block: 'center'
                 });
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 07151b1935..b546c46914 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -3,7 +3,6 @@
     computed,
     defineComponent,
     getCurrentInstance,
-    h,
     onBeforeUnmount,
     onMounted,
     provide,
@@ -203,7 +202,7 @@
        * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to
        * retrieve the HTML element in both versions.
        */
-      return () => slots.default?.()[0] ?? h();
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
@@ -242,7 +241,7 @@ it injects the needed utilities to determine the first visible item.
   };
 </script>
 
-<style scoped>
+<style lang="css" scoped>
   ul {
     overflow: auto;
     max-height: 200px;
diff --git a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
index 623c91ae7e..9afae11466 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
+++ b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
@@ -2,7 +2,6 @@
   <component :is="animation">
     <BaseEventButton
       v-if="isVisible"
-      v-on="$listeners"
       class="x-scroll-to-top x-button"
       data-test="scroll-to-top"
       aria-label="Scroll to top"
@@ -16,12 +15,11 @@
 
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
-  import BaseEventButton from '../../../components/base-event-button.vue';
-  import { NoElement } from '../../../components/no-element';
+  import { NoAnimation, BaseEventButton } from '../../../components';
   import { XEventsTypes } from '../../../wiring';
   import { scrollXModule } from '../x-module';
-  import { AnimationProp } from '../../../types/animation-prop';
-  import { useState } from '../../../composables/use-state';
+  import { AnimationProp } from '../../../types';
+  import { useState } from '../../../composables';
   import { MainScrollId } from './scroll.const';
 
   /**
@@ -42,7 +40,7 @@
        */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * Threshold in pixels from the top to show the button.
diff --git a/packages/x-components/src/x-modules/scroll/components/scroll.const.ts b/packages/x-components/src/x-modules/scroll/components/scroll.const.ts
index ffd7884d86..a80715ec12 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll.const.ts
+++ b/packages/x-components/src/x-modules/scroll/components/scroll.const.ts
@@ -1,4 +1,4 @@
-import { XInjectKey } from '../../../components/decorators/injection.decorators';
+import { XInjectKey } from '../../../components/decorators/injection.consts';
 import { ScrollVisibilityObserver } from './scroll.types';
 
 /**
diff --git a/packages/x-components/src/x-modules/scroll/components/scroll.vue b/packages/x-components/src/x-modules/scroll/components/scroll.vue
index 7b78d135e2..d4937b0a7e 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/scroll.vue
@@ -6,8 +6,6 @@
     @scroll:at-start="emitScrollAtStart"
     @scroll:almost-at-end="emitScrollAlmostAtEnd"
     @scroll:at-end="emitScrollAtEnd"
-    v-on="$listeners"
-    v-bind="$attrs"
     :id="id"
   >
     <slot />
@@ -120,7 +118,7 @@
        */
       $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {
         if (scrollId === props.id && scrollRef.value) {
-          scrollRef.value.$el.scrollTo({ top: 0, behavior: 'smooth' });
+          (scrollRef.value.$el as HTMLElement).scrollTo({ top: 0, behavior: 'smooth' });
         }
       });
 
diff --git a/packages/x-components/src/x-modules/scroll/store/module.ts b/packages/x-components/src/x-modules/scroll/store/module.ts
index 53b09acf80..8e467434e0 100644
--- a/packages/x-components/src/x-modules/scroll/store/module.ts
+++ b/packages/x-components/src/x-modules/scroll/store/module.ts
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import { ScrollComponentState, ScrollXStoreModule } from './types';
+import { ScrollXStoreModule } from './types';
 
 /**
  * {@link XStoreModule} For the scroll module.
@@ -15,13 +14,13 @@ export const scrollXStoreModule: ScrollXStoreModule = {
   mutations: {
     setScrollComponentState(state, { id, newState }) {
       if (!state.data[id]) {
-        Vue.set<ScrollComponentState>(state.data, id, {
+        state.data[id] = {
           hasReachedStart: false,
           hasAlmostReachedEnd: false,
           hasReachedEnd: false,
           position: 0,
           direction: 'UP'
-        });
+        };
       }
       Object.assign(state.data[id], newState);
     },
diff --git a/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts b/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts
index 12ad1708e9..c0c4994350 100644
--- a/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts
+++ b/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts
@@ -2,12 +2,22 @@ import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { XPlugin } from '../../../../plugins';
 import ClearSearchInput from '../clear-search-input.vue';
+import { useState } from '../../../../composables/use-state';
+
+jest.mock('../../../../composables/use-state', () => ({
+  useState: jest.fn()
+}));
 
 describe('testing ClearSearchInput component', () => {
-  const [, localVue] = installNewXPlugin({});
+  beforeEach(() => {
+    // Use state mock to return an empty query value
+    (useState as jest.Mock).mockReturnValue({ query: { value: '' } });
+  });
 
   it('emits UserPressedClearSearchBoxButton event when clicked', () => {
-    const clearSearchInput = mount(ClearSearchInput, { localVue });
+    const clearSearchInput = mount(ClearSearchInput, {
+      global: { plugins: [installNewXPlugin()] }
+    });
     const target = {
       location: 'none',
       moduleName: 'searchBox',
@@ -25,16 +35,16 @@ describe('testing ClearSearchInput component', () => {
   it('has a default slot to customize its contents', () => {
     const slotTemplate = '<span class="x-clear-search-input__text">Clear</span>';
     const clearSearchInput = mount(ClearSearchInput, {
-      localVue,
+      global: { plugins: [installNewXPlugin()] },
       slots: {
         default: {
           template: slotTemplate
         }
       }
     });
-    const renderedSlotHTML = clearSearchInput.element.querySelector('.x-clear-search-input__text');
+    const renderedSlot = clearSearchInput.find('.x-clear-search-input__text');
 
-    expect(renderedSlotHTML).toBeDefined();
-    expect(renderedSlotHTML!.textContent).toEqual('Clear');
+    expect(renderedSlot).toBeDefined();
+    expect(renderedSlot.text()).toEqual('Clear');
   });
 });
diff --git a/packages/x-components/src/x-modules/search-box/components/__tests__/search-button.spec.ts b/packages/x-components/src/x-modules/search-box/components/__tests__/search-button.spec.ts
index b576f088d8..627575b490 100644
--- a/packages/x-components/src/x-modules/search-box/components/__tests__/search-button.spec.ts
+++ b/packages/x-components/src/x-modules/search-box/components/__tests__/search-button.spec.ts
@@ -1,83 +1,85 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { isXComponent } from '../../../../components/x-component.utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { WireMetadata } from '../../../../wiring/wiring.types';
 import SearchButton from '../search-button.vue';
+import { XPlugin } from '../../../../plugins/index';
+import { searchBoxXModule } from '../../x-module';
 import { resetXSearchBoxStateWith } from './utils';
 
-describe('testing search button component', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+function renderSearchButton(slotContent: string) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
 
-  const searchButtonWrapper = mount(SearchButton, {
-    localVue,
-    store,
-    slots: { default: 'Search!' }
+  const wrapper = mount(SearchButton, {
+    slots: { default: slotContent },
+    global: {
+      plugins: [store, installNewXPlugin({ initialXModules: [searchBoxXModule], store })]
+    }
   });
 
+  XPlugin.registerXModule(searchBoxXModule);
+  const mockedObserver = jest.fn();
+  XPlugin.bus.on('UserAcceptedAQuery', true).subscribe(mockedObserver);
+  XPlugin.bus.on('UserPressedSearchButton', true).subscribe(mockedObserver);
+
+  return {
+    wrapper,
+    store,
+    mockedObserver
+  };
+}
+
+describe('testing search button component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('is an XComponent', () => {
-    expect(isXComponent(searchButtonWrapper.vm)).toEqual(true);
+    const { wrapper } = renderSearchButton('Search!');
+    expect(isXComponent(wrapper.vm)).toEqual(true);
   });
 
   it('renders search button with inner text', () => {
-    expect(searchButtonWrapper.text()).toEqual('Search!');
+    const { wrapper } = renderSearchButton('Search!');
+    expect(wrapper.text()).toEqual('Search!');
   });
 
   it('renders search button with inner svg icon', () => {
-    const htmlIcon =
-      '<svg height="10" width="10"><circle cx="5" cy="5" r="4" stroke="black"></circle></svg>';
-
-    const searchIconButtonWrapper = mount(SearchButton, {
-      localVue,
-      store,
-      slots: { default: htmlIcon }
-    });
-
-    const renderedHtmlIcon = searchIconButtonWrapper.element.innerHTML;
-    expect(renderedHtmlIcon).toEqual(htmlIcon);
+    const htmlIcon = `<svg height="10" width="10"><circle cx="5" cy="5" r="4" stroke="black"></circle></svg>`;
+    const { wrapper } = renderSearchButton(htmlIcon);
+    const renderedHtmlIcon = wrapper.element.innerHTML;
+    expect(renderedHtmlIcon).toContain(htmlIcon);
   });
 
   it("doesn't emit events if the query is empty", async () => {
-    const mockedObserver = jest.fn();
-    searchButtonWrapper.vm.$x.on('UserAcceptedAQuery').subscribe(mockedObserver);
-    searchButtonWrapper.vm.$x.on('UserPressedSearchButton').subscribe(mockedObserver);
-
+    const { mockedObserver, store, wrapper } = renderSearchButton('Search!');
     resetXSearchBoxStateWith(store, { query: '' });
-
-    await localVue.nextTick();
-
-    searchButtonWrapper.trigger('click');
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    await nextTick();
+    await wrapper.trigger('click');
 
     expect(mockedObserver).not.toHaveBeenCalled();
   });
 
   it('emits events if the query is not empty', async () => {
+    const { mockedObserver, store, wrapper } = renderSearchButton('Search!');
     const query = 'honda crf';
-    const mockedObserver = jest.fn();
     const mockedObserverCalledWith = {
       eventPayload: query,
       metadata: expect.objectContaining<Partial<WireMetadata>>({
         moduleName: 'searchBox',
-        target: searchButtonWrapper.element,
+        target: wrapper.element,
         feature: 'search_box'
       })
     };
-    searchButtonWrapper.vm.$x.on('UserAcceptedAQuery', true).subscribe(mockedObserver);
-    searchButtonWrapper.vm.$x.on('UserPressedSearchButton', true).subscribe(mockedObserver);
-
     resetXSearchBoxStateWith(store, { query });
-    await localVue.nextTick();
-
-    await searchButtonWrapper.trigger('click');
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    await nextTick();
+    await wrapper.trigger('click');
 
     expect(mockedObserver).toHaveBeenCalledTimes(2);
     expect(mockedObserver).toHaveBeenNthCalledWith(1, mockedObserverCalledWith);
diff --git a/packages/x-components/src/x-modules/search-box/components/__tests__/search-input-placeholder.spec.ts b/packages/x-components/src/x-modules/search-box/components/__tests__/search-input-placeholder.spec.ts
index 3d08b112c5..17dd90cc9f 100644
--- a/packages/x-components/src/x-modules/search-box/components/__tests__/search-input-placeholder.spec.ts
+++ b/packages/x-components/src/x-modules/search-box/components/__tests__/search-input-placeholder.spec.ts
@@ -1,5 +1,5 @@
-import { mount, Wrapper } from '@vue/test-utils';
-
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components';
 import { XPlugin } from '../../../../plugins';
@@ -8,15 +8,12 @@ import { searchBoxXModule } from '../../x-module';
 import SearchInput from '../search-input.vue';
 import SearchInputPlaceholder from '../search-input-placeholder.vue';
 
-async function mountTestComponent({
+async function renderSearchInputPlaceholder({
   messages = ['Find shirts', 'Find shoes', 'Find watches', 'Find handbags', 'Find sunglasses'],
   animationIntervalMs,
   animateOnlyOnHover,
   autofocus = false
-}: MountTestComponentOptions = {}): Promise<MountTestComponentAPI> {
-  const [, localVue] = installNewXPlugin();
-  XPlugin.registerXModule(searchBoxXModule);
-
+}: RenderSearchInputPlaceholder = {}): Promise<SearchInputPlaceholderAPI> {
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
@@ -39,21 +36,23 @@ async function mountTestComponent({
       }
     },
     {
-      localVue,
       /*
        * In order to make the autofocus test work after the jest 27 update, now is mandatory to
        * attach the element to some parent in the DOM, to emit the focus event.
        */
       attachTo: parent,
-      propsData: {
+      props: {
         messages,
         animationIntervalMs,
         animateOnlyOnHover,
         autofocus
+      },
+      global: {
+        plugins: [installNewXPlugin()]
       }
     }
   );
-  await wrapper.vm.$nextTick();
+  await nextTick();
 
   function getPlaceholderText(): string {
     return wrapper.find(getDataTestSelector('search-input-placeholder')).text();
@@ -73,10 +72,12 @@ async function mountTestComponent({
   }
 
   async function emit(event: XEvent, payload: any): Promise<void> {
-    wrapper.vm.$x.emit(event, payload);
-    await localVue.nextTick();
+    await XPlugin.bus.emit(event, payload);
+    await nextTick();
   }
 
+  XPlugin.registerXModule(searchBoxXModule);
+
   return {
     messages,
     wrapper,
@@ -95,7 +96,7 @@ describe('testing search input placeholder component', () => {
   afterEach(jest.clearAllTimers);
 
   it('is an XComponent part of the SearchBox XModule', async () => {
-    const { wrapper } = await mountTestComponent();
+    const { wrapper } = await renderSearchInputPlaceholder();
     const placeholderWrapper = wrapper.findComponent(SearchInputPlaceholder);
 
     expect(isXComponent(placeholderWrapper.vm)).toEqual(true);
@@ -103,7 +104,7 @@ describe('testing search input placeholder component', () => {
   });
 
   it('animates the rendered text always', async () => {
-    const { messages, wrapper, getPlaceholderText } = await mountTestComponent();
+    const { messages, wrapper, getPlaceholderText } = await renderSearchInputPlaceholder();
 
     for (const message of messages) {
       expect(getPlaceholderText()).toEqual(message);
@@ -114,7 +115,7 @@ describe('testing search input placeholder component', () => {
   });
 
   it('animates the rendered text only on hover if configured to do so', async () => {
-    const { messages, wrapper, getPlaceholderText, hoverInput } = await mountTestComponent({
+    const { messages, getPlaceholderText, hoverInput } = await renderSearchInputPlaceholder({
       animateOnlyOnHover: true
     });
 
@@ -123,11 +124,11 @@ describe('testing search input placeholder component', () => {
     for (const message of messages.slice(1)) {
       expect(getPlaceholderText()).toEqual(message);
       jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
+      await nextTick();
     }
     expect(getPlaceholderText()).toEqual(messages[0]);
     jest.runOnlyPendingTimers();
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(getPlaceholderText()).toEqual(messages[1]);
     await hoverInput('out');
     expect(getPlaceholderText()).toEqual(messages[0]);
@@ -138,7 +139,8 @@ describe('testing search input placeholder component', () => {
   });
 
   it('is not visible when there is a query set', async () => {
-    const { messages, getPlaceholderText, isPlaceholderVisible, emit } = await mountTestComponent();
+    const { messages, getPlaceholderText, isPlaceholderVisible, emit } =
+      await renderSearchInputPlaceholder();
 
     expect(getPlaceholderText()).toEqual(messages[0]);
     await emit('UserAcceptedAQuery', 'testing');
@@ -149,7 +151,7 @@ describe('testing search input placeholder component', () => {
   });
 
   it('is not visible when the search input is focused', async () => {
-    const { wrapper, isPlaceholderVisible } = await mountTestComponent({
+    const { wrapper, isPlaceholderVisible } = await renderSearchInputPlaceholder({
       autofocus: true
     });
 
@@ -162,7 +164,7 @@ describe('testing search input placeholder component', () => {
   });
 });
 
-interface MountTestComponentOptions {
+interface RenderSearchInputPlaceholder {
   /** The list of messages to animate on the placeholder. */
   messages?: Array<string>;
   /** The time in milliseconds during which each message is visible on the placeholder. */
@@ -173,11 +175,11 @@ interface MountTestComponentOptions {
   autofocus?: boolean;
 }
 
-interface MountTestComponentAPI {
+interface SearchInputPlaceholderAPI {
   /** The list of messages applied to animate on the placeholder. */
   messages: Array<string>;
   /** The Vue testing utils wrapper for the {@link SearchInputPlaceholder} component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Gets the {@link SearchInputPlaceholder} rendered message. */
   getPlaceholderText: () => string;
   /** Gets the {@link SearchInputPlaceholder} visibility state. */
diff --git a/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts b/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts
index c5de8dd521..1cd08efd47 100644
--- a/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts
+++ b/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts
@@ -1,19 +1,23 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { WireMetadata } from '../../../../wiring/wiring.types';
 import SearchInput from '../search-input.vue';
+import { XPlugin } from '../../../../plugins/index';
+import { searchBoxXModule } from '../../x-module';
 import { resetXSearchBoxStateWith } from './utils';
 
-function mountNewSearchInput(overrideProps: Partial<SearchInputProps> = {}): TestSearchInputAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+function renderSearchInput({
+  maxLength,
+  instant,
+  instantDebounceInMs,
+  autofocus
+}: Partial<RenderSearchInputOptions> = {}): RenderSearchInputAPI {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  resetXSearchBoxStateWith(store);
 
   const parent = document.createElement('div');
   document.body.appendChild(parent);
@@ -25,116 +29,114 @@ function mountNewSearchInput(overrideProps: Partial<SearchInputProps> = {}): Tes
      */
     attachTo: parent,
     store,
-    localVue,
-    propsData: overrideProps
+    props: { maxLength, instant, instantDebounceInMs, autofocus },
+    global: {
+      plugins: [store, installNewXPlugin({ store })]
+    }
   });
-  const input = wrapper.find(getDataTestSelector('search-input')).element as HTMLInputElement;
+
+  resetXSearchBoxStateWith(store);
+
+  XPlugin.registerXModule(searchBoxXModule);
+  const listener = jest.fn();
 
   return {
     wrapper,
-    input
+    input: wrapper.find(getDataTestSelector('search-input')).element as HTMLInputElement,
+    listener
   };
 }
 
-interface SearchInputProps {
-  maxLength: number;
-  autofocus: boolean;
-  instant: boolean;
-  instantDebounceInMs: number;
-  autocompleteKeyboardKeys: string[];
-  autocompleteSuggestionsEvent: string[];
-}
-
-interface TestSearchInputAPI {
-  wrapper: Wrapper<SearchInput>;
-  input: HTMLInputElement;
-}
-
 describe('testing search input component', () => {
-  let mockedSearchInput: Wrapper<SearchInput>;
-  let input: HTMLInputElement;
-  const listener = jest.fn();
-
   beforeAll(jest.useFakeTimers);
   afterEach(jest.clearAllTimers);
   beforeEach(() => {
-    const searchInput = mountNewSearchInput();
-    mockedSearchInput = searchInput.wrapper;
-    input = searchInput.input;
-
     jest.clearAllMocks();
   });
 
   it('is an XComponent', () => {
-    expect(isXComponent(mockedSearchInput.vm)).toEqual(true);
+    const { wrapper } = renderSearchInput();
+    expect(isXComponent(wrapper.vm)).toEqual(true);
   });
 
   it('has SearchBox as XModule', () => {
-    expect(getXComponentXModuleName(mockedSearchInput.vm)).toEqual('searchBox');
+    const { wrapper } = renderSearchInput();
+    expect(getXComponentXModuleName(wrapper.vm)).toEqual('searchBox');
   });
 
-  it('emits UserHoveredInSearchBox when it is hovered in', () => {
-    mockedSearchInput.vm.$x.on('UserHoveredInSearchBox').subscribe(listener);
-    mockedSearchInput.trigger('mouseenter');
+  it('emits UserHoveredInSearchBox when it is hovered in', async () => {
+    const { wrapper, listener } = renderSearchInput();
+    XPlugin.bus.on('UserHoveredInSearchBox').subscribe(listener);
+    await wrapper.trigger('mouseenter');
     expect(listener).toHaveBeenCalled();
   });
 
-  it('emits UserHoveredOutSearchBox when it is hovered out', () => {
-    mockedSearchInput.vm.$x.on('UserHoveredOutSearchBox').subscribe(listener);
-    mockedSearchInput.trigger('mouseenter');
-    mockedSearchInput.trigger('mouseleave');
+  it('emits UserHoveredOutSearchBox when it is hovered out', async () => {
+    const { wrapper, listener } = renderSearchInput();
+    XPlugin.bus.on('UserHoveredOutSearchBox').subscribe(listener);
+    await wrapper.trigger('mouseenter');
+    await wrapper.trigger('mouseleave');
     expect(listener).toHaveBeenCalled();
   });
 
   it('emits UserFocusedSearchBox if input autofocus true', () => {
-    const { wrapper } = mountNewSearchInput({ autofocus: true });
-    wrapper.vm.$x.on('UserFocusedSearchBox').subscribe(listener);
+    const { listener } = renderSearchInput({ autofocus: true });
+    XPlugin.bus.on('UserFocusedSearchBox').subscribe(listener);
     expect(listener).toHaveBeenCalledTimes(1);
     expect(listener).toHaveBeenCalledWith(undefined);
   });
 
   it('does not emit UserFocusedSearchBox when mounting if autofocus is false', () => {
-    const { wrapper } = mountNewSearchInput({ autofocus: false });
-    wrapper.vm.$x.on('UserFocusedSearchBox').subscribe(listener);
+    const { listener } = renderSearchInput({ autofocus: false });
+    XPlugin.bus.on('UserFocusedSearchBox').subscribe(listener);
     expect(listener).not.toHaveBeenCalled();
   });
 
-  it('emits UserFocusedSearchBox when it gains the focus', () => {
-    mockedSearchInput.vm.$x.on('UserFocusedSearchBox').subscribe(listener);
-    mockedSearchInput.trigger('focus');
+  it('emits UserFocusedSearchBox when it gains the focus', async () => {
+    const { listener, wrapper } = renderSearchInput();
+    XPlugin.bus.on('UserFocusedSearchBox').subscribe(listener);
+    await wrapper.trigger('focus');
     expect(listener).toHaveBeenCalled();
   });
 
-  it('emits UserBlurredSearchBox when it loses the focus', () => {
-    mockedSearchInput.vm.$x.on('UserBlurredSearchBox').subscribe(listener);
-    mockedSearchInput.trigger('focus');
-    mockedSearchInput.trigger('blur');
+  it('emits UserBlurredSearchBox when it loses the focus', async () => {
+    const { listener, wrapper } = renderSearchInput();
+    XPlugin.bus.on('UserBlurredSearchBox').subscribe(listener);
+
+    await wrapper.trigger('focus');
+    await wrapper.trigger('blur');
+
     expect(listener).toHaveBeenCalled();
   });
 
-  it('emits UserIsTypingQuery when typing/pasting', () => {
+  it('emits UserIsTypingQuery when typing/pasting', async () => {
+    const { input, listener, wrapper } = renderSearchInput();
     const queries = ['a', 'ab', 'abc'];
-    mockedSearchInput.vm.$x.on('UserIsTypingAQuery').subscribe(listener);
+    XPlugin.bus.on('UserIsTypingAQuery').subscribe(listener);
 
-    queries.forEach(query => {
+    for (const query of queries) {
       input.value = query;
-      mockedSearchInput.trigger('input');
+      await wrapper.trigger('input');
       expect(listener).toHaveBeenCalledWith(query);
-    });
+    }
+
+    expect(listener).toHaveBeenCalledTimes(3);
   });
 
   it(
     'emits UserAcceptedAQuery event when typing/pasting if config.instant is true and ' +
       'after the config.instantDebounceInMs timeout',
-    () => {
-      mockedSearchInput.setProps({ instant: true, instantDebounceInMs: 100 });
-
+    async () => {
+      const { input, listener, wrapper } = renderSearchInput();
       const query = 'pulpo';
-      mockedSearchInput.vm.$x.on('UserAcceptedAQuery').subscribe(listener);
+      XPlugin.bus.on('UserAcceptedAQuery').subscribe(listener);
+
+      await wrapper.setProps({ instant: true, instantDebounceInMs: 100 });
 
       input.value = query;
-      mockedSearchInput.trigger('input');
+      await wrapper.trigger('input');
       expect(listener).not.toHaveBeenCalledWith(query);
+
       jest.advanceTimersByTime(100);
       expect(listener).toHaveBeenCalledWith(query);
     }
@@ -144,16 +146,19 @@ describe('testing search input component', () => {
     'keeps the query empty after clearing it when config.instant is enabled and after the' +
       'config.instantDebounceInMs timeout',
     async () => {
-      mockedSearchInput.setProps({ instant: true, instantDebounceInMs: 100 });
+      const { input, wrapper } = renderSearchInput();
+      await wrapper.setProps({ instant: true, instantDebounceInMs: 100 });
 
       input.value = 'Antananarivo';
-      mockedSearchInput.trigger('input');
+      await wrapper.trigger('input');
+
       jest.advanceTimersByTime(50);
       input.value = '';
-      await mockedSearchInput.trigger('input');
+      await wrapper.trigger('input');
       expect(input.value).toEqual('');
+
       jest.advanceTimersByTime(50);
-      await mockedSearchInput.vm.$nextTick();
+      await nextTick();
       expect(input.value).toEqual('');
     }
   );
@@ -161,19 +166,22 @@ describe('testing search input component', () => {
   it(
     'emits UserPressedEnterKey and UserAcceptedAQuery events when the query length is ' +
       'greater than zero and the user pressed the enter key',
-    () => {
+    async () => {
+      const { input, wrapper } = renderSearchInput();
       const enterListener = jest.fn();
       const acceptedQueryListener = jest.fn();
       const query = 'water';
-      mockedSearchInput.vm.$x.on('UserPressedEnterKey', true).subscribe(enterListener);
-      mockedSearchInput.vm.$x.on('UserAcceptedAQuery', true).subscribe(acceptedQueryListener);
 
-      mockedSearchInput.trigger('keydown.enter');
+      XPlugin.bus.on('UserPressedEnterKey', true).subscribe(enterListener);
+      XPlugin.bus.on('UserAcceptedAQuery', true).subscribe(acceptedQueryListener);
+
+      await wrapper.trigger('keydown.enter');
       expect(enterListener).not.toHaveBeenCalled();
       expect(acceptedQueryListener).not.toHaveBeenCalled();
 
       input.value = query;
-      mockedSearchInput.trigger('keydown.enter');
+      await wrapper.trigger('keydown.enter');
+
       expect(enterListener).toHaveBeenCalledWith({
         eventPayload: query,
         metadata: expect.objectContaining<Partial<WireMetadata>>({
@@ -190,9 +198,30 @@ describe('testing search input component', () => {
   );
 
   it('focus the input when UserPressedClearSearchBoxButton event is emitted', () => {
+    const { input } = renderSearchInput();
     input.blur();
     expect(input).not.toBe(document.activeElement);
-    mockedSearchInput.vm.$x.emit('UserPressedClearSearchBoxButton');
+    XPlugin.bus.emit('UserPressedClearSearchBoxButton');
     expect(input).toBe(document.activeElement);
   });
 });
+
+interface RenderSearchInputOptions {
+  /** Maximum characters allowed in the input search. */
+  maxLength: number;
+  /** Prop to enable autofocus when the search field is rendered. */
+  autofocus: boolean;
+  /** Prop to enable the auto-accept query after debounce. */
+  instant: boolean;
+  /** Debounce time for the instant prop.*/
+  instantDebounceInMs: number;
+}
+
+interface RenderSearchInputAPI {
+  /** The wrapper of the rendered component. */
+  wrapper: VueWrapper;
+  /** The input html element. */
+  input: HTMLInputElement;
+  /** The mocked observed event. */
+  listener: jest.Mock;
+}
diff --git a/packages/x-components/src/x-modules/search-box/components/search-button.vue b/packages/x-components/src/x-modules/search-box/components/search-button.vue
index 03a9b73038..0d79a68f58 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-button.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-button.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, ref } from 'vue';
+  import { computed, ComputedRef, defineComponent, ref } from 'vue';
   import { VueCSSClasses } from '../../../utils/types';
   import { WireMetadata } from '../../../wiring/wiring.types';
   import { use$x } from '../../../composables/use-$x';
@@ -37,7 +37,7 @@
 
       const buttonRef = ref<HTMLElement | null>(null);
 
-      const { query } = useState('searchBox', ['query']);
+      const query: ComputedRef<string> = useState('searchBox', ['query']).query;
 
       const isQueryEmpty = computed(() => query.value.length === 0);
 
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
index 09e3c90626..5579be2128 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
@@ -229,13 +229,13 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="css">
   .x-search-input-placeholder-container {
     position: relative;
   }
 </style>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-search-input-placeholder {
     position: absolute;
     inset: 0;
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input.vue b/packages/x-components/src/x-modules/search-box/components/search-input.vue
index 2da9925c6f..092befba64 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input.vue
@@ -10,7 +10,6 @@
     @keydown.enter="emitUserPressedEnterKey"
     @keydown.up.down.prevent="emitUserPressedArrowKey"
     @beforeinput="preventSpecialKey"
-    v-on="$listeners"
     :maxlength="maxLength"
     :value="query"
     autocomplete="off"
@@ -281,7 +280,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-search-input::-webkit-search-decoration,
   .x-search-input::-webkit-search-cancel-button,
   .x-search-input::-webkit-search-results-button,
diff --git a/packages/x-components/src/x-modules/search-box/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/search-box/store/__tests__/actions.spec.ts
index 3884c01ee7..b3dc0034c7 100644
--- a/packages/x-components/src/x-modules/search-box/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/search-box/store/__tests__/actions.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { searchBoxXStoreModule } from '../module';
 import { SafeStore } from '../../../../store/__tests__/utils';
@@ -8,15 +8,10 @@ import { UrlParams } from '../../../../types/url-params';
 import { resetSearchBoxStateWith } from './utils';
 
 describe('testing search box module actions', () => {
-  const localVue = createLocalVue();
-
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
   const store: SafeStore<SearchBoxState, SearchBoxGetters, SearchBoxMutations, SearchBoxActions> =
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     new Store(searchBoxXStoreModule as any);
-
-  installNewXPlugin({ store }, localVue);
+  mount({}, { global: { plugins: [store, installNewXPlugin({ store })] } });
 
   beforeEach(() => {
     resetSearchBoxStateWith(store);
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/banner.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/banner.spec.ts
index 32ae49b9ab..0a544698e7 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/banner.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/banner.spec.ts
@@ -1,18 +1,16 @@
 import { Banner as BannerModel } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { createBannerStub } from '../../../../__stubs__/banners-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import Banner from '../banner.vue';
+import { XPlugin } from '../../../../plugins/index';
 
 function renderBanner({
   template = `<Banner v-bind="$attrs" />`,
   banner = createBannerStub('default-banner'),
   titleClass
-}: RenderBannerOptions = {}): RenderBannerAPI {
-  const [, localVue] = installNewXPlugin();
-
+}: RenderBannerOptions = {}) {
   const wrapper = mount(
     {
       components: {
@@ -21,11 +19,13 @@ function renderBanner({
       template
     },
     {
-      propsData: {
+      props: {
         banner,
         titleClass
       },
-      localVue
+      global: {
+        plugins: [installNewXPlugin()]
+      }
     }
   );
 
@@ -66,7 +66,7 @@ describe('testing Banner component', () => {
     const listener = jest.fn();
     const banner = createBannerStub('banner', { url: 'https://empathy.co' });
     const { wrapper } = renderBanner({ banner });
-    wrapper.vm.$x.on('UserClickedABanner').subscribe(listener);
+    XPlugin.bus.on('UserClickedABanner').subscribe(listener);
 
     wrapper.trigger('click');
     expect(listener).toHaveBeenNthCalledWith(1, banner);
@@ -85,7 +85,7 @@ describe('testing Banner component', () => {
     const { wrapper } = renderBanner({
       banner: createBannerStub('banner', { title: 'Search UIs' })
     });
-    wrapper.vm.$x.on('UserClickedABanner').subscribe(listener);
+    XPlugin.bus.on('UserClickedABanner').subscribe(listener);
 
     wrapper.trigger('click');
     expect(listener).not.toHaveBeenCalled();
@@ -118,8 +118,3 @@ interface RenderBannerOptions {
   /** Class to customize the title element. */
   titleClass?: string;
 }
-
-interface RenderBannerAPI {
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts
index d382905966..6fe4fc5a68 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts
@@ -1,98 +1,70 @@
-import { Banner } from '@empathyco/x-types';
-import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, {
-  VueConstructor,
-  ComponentOptions,
-  computed,
-  defineComponent,
-  provide,
-  inject,
-  Ref
-} from 'vue';
-import Vuex, { Store } from 'vuex';
+import { DeepPartial } from '@empathyco/x-utils';
+import { mount } from '@vue/test-utils';
+import { computed, defineComponent, provide, inject, Ref, nextTick } from 'vue';
+import { Store } from 'vuex';
 import BaseGrid from '../../../../components/base-grid.vue';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { RootXStoreState } from '../../../../store/store.types';
+import { LIST_ITEMS_KEY, getXComponentXModuleName, isXComponent } from '../../../../components';
+import { XPlugin } from '../../../../plugins';
+import { RootXStoreState } from '../../../../store';
 import { ListItem } from '../../../../utils/types';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { getBannersStub } from '../../../../__stubs__/banners-stubs.factory';
+import { getBannersStub, getResultsStub } from '../../../../__stubs__';
 import BannersList from '../banners-list.vue';
-import { LIST_ITEMS_KEY } from '../../../../components/decorators/injection.consts';
-import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
+import { searchXModule } from '../../x-module';
 import { resetXSearchStateWith } from './utils';
 
-/**
- * Renders the `BannersList` component, exposing a basic API for testing.
- *
- * @param options - The options to render the component with.
- * @returns The API for testing the `BannersList` component.
- */
-function renderBannersList({
+async function render({
   template = '<BannersList />',
   banners = getBannersStub(),
-  components
-}: RenderBannersListOptions = {}): RendersBannerListAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  components = {}
+} = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
 
-  XPlugin.resetInstance();
-
-  resetXSearchStateWith(store, { banners });
   const wrapper = mount(
     {
-      components: {
-        BannersList,
-        ...components
-      },
+      components: { BannersList, ...components },
       template
     },
     {
-      localVue,
-      store
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] })]
+      }
     }
   );
-
-  const bannersListWrapper = wrapper.findComponent(BannersList);
+  resetXSearchStateWith(store, { banners });
+  await nextTick();
 
   return {
-    wrapper: bannersListWrapper,
-    getBanners() {
-      return banners;
-    }
+    wrapper: wrapper.findComponent(BannersList),
+    banners
   };
 }
 
 describe('testing BannersList component', () => {
-  it('is an XComponent', () => {
-    const { wrapper } = renderBannersList();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-  });
+  it('is an XComponent which has an XModule', async () => {
+    const { wrapper } = await render();
 
-  it('has Search as XModule', () => {
-    const { wrapper } = renderBannersList();
+    expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('search');
   });
 
-  it('renders the banners in the state', () => {
-    const { wrapper, getBanners } = renderBannersList();
+  it('renders the banners in the state', async () => {
+    const { wrapper, banners } = await render();
     const bannersListItems = wrapper.findAll(getDataTestSelector('banners-list-item'));
 
-    getBanners().forEach((result, index) => {
-      expect(bannersListItems.at(index).text()).toEqual(result.id);
-    });
+    banners.forEach((result, index) =>
+      expect(bannersListItems.at(index)?.text()).toEqual(result.id)
+    );
   });
 
-  it('does not render any banner if the are none', () => {
-    const { wrapper } = renderBannersList({ banners: [] });
-    expect(wrapper.html()).toEqual('');
+  it('does not render any banner if the are none', async () => {
+    const { wrapper } = await render({ banners: [] });
+
+    expect(wrapper.isVisible()).toEqual(false);
   });
 
-  it('allows customizing the banner slot', () => {
-    const { wrapper, getBanners } = renderBannersList({
+  it('allows customizing the banner slot', async () => {
+    const { wrapper, banners } = await render({
       template: `
         <BannersList>
           <template #banner="{ item }">
@@ -101,15 +73,15 @@ describe('testing BannersList component', () => {
         </BannersList>`
     });
 
-    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toBe(true);
-    expect(wrapper.find(getDataTestSelector('banners-list-item')).exists()).toBe(true);
-    expect(wrapper.find(getDataTestSelector('banner-slot-overridden')).text()).toBe(
-      `Custom banner: ${getBanners()[0].id}`
+    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('banners-list-item')).exists()).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('banner-slot-overridden')).text()).toEqual(
+      `Custom banner: ${banners[0].id}`
     );
   });
 
-  it('allows customizing the default slot', () => {
-    const { wrapper } = renderBannersList({
+  it('allows customizing the default slot', async () => {
+    const { wrapper } = await render({
       template: `
         <BannersList>
           <template #default="{ items }">
@@ -119,18 +91,13 @@ describe('testing BannersList component', () => {
       components: { BaseGrid }
     });
 
-    expect(wrapper.find(getDataTestSelector('banners-list')).exists()).toBe(false);
-    expect(wrapper.find(getDataTestSelector('default-slot-overridden')).exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('banners-list')).exists()).toEqual(false);
+    expect(wrapper.find(getDataTestSelector('default-slot-overridden')).exists()).toEqual(true);
   });
 
   it('provides the result of concatenating ancestor injected items with the banners', async () => {
     const resultsStub = getResultsStub();
     const bannersStub = getBannersStub();
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-    const store = new Store<DeepPartial<RootXStoreState>>({});
-    installNewXPlugin({ store }, localVue);
-    resetXSearchStateWith(store, { banners: bannersStub, totalResults: resultsStub.length * 2 });
 
     /* It provides an array with some results */
     const Provider = defineComponent({
@@ -139,9 +106,7 @@ describe('testing BannersList component', () => {
         const providedStub = computed((): ListItem[] => resultsStub);
         provide(LIST_ITEMS_KEY as string, providedStub);
       },
-      template: `
-        <div><slot /></div>
-      `
+      template: `<div><slot /></div>`
     });
 
     /*
@@ -153,54 +118,36 @@ describe('testing BannersList component', () => {
       setup() {
         const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
         const injectedListItemsString = computed(
-          (): string => injectedListItems?.value.map(item => item.id).join(',') ?? ''
+          () => injectedListItems?.value.map(item => item.id).join(',') ?? ''
         );
-        return {
-          injectedListItemsString
-        };
+        return { injectedListItemsString };
       },
-      template: `
-        <p>{{ injectedListItemsString }}</p>
-      `
+      template: `<p>{{ injectedListItemsString }}</p>`
     });
 
+    const store = new Store<DeepPartial<RootXStoreState>>({});
     const wrapper = mount(
       {
-        template: '<Provider v-bind="$attrs"><BannersList><Child /></BannersList></Provider>',
-        components: {
-          Provider,
-          Child,
-          BannersList
-        }
+        template: '<Provider><BannersList><Child /></BannersList></Provider>',
+        components: { Provider, Child, BannersList }
       },
       {
-        localVue,
-        store
+        global: {
+          plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] })]
+        }
       }
     );
 
-    wrapper.vm.$x.emit('RenderedColumnsNumberChanged', 2);
-    await wrapper.vm.$nextTick();
+    resetXSearchStateWith(store, { banners: bannersStub, totalResults: resultsStub.length * 2 });
+    await nextTick();
+
+    await XPlugin.bus.emit('RenderedColumnsNumberChanged', 2);
+    await nextTick();
 
-    expect(wrapper.text()).toBe(
-      // eslint-disable-next-line max-len
-      `${bannersStub[0].id},${resultsStub[0].id},${resultsStub[1].id},${bannersStub[1].id},${bannersStub[2].id},${bannersStub[3].id},${resultsStub[2].id},${resultsStub[3].id},${bannersStub[4].id}`
+    expect(wrapper.text()).toEqual(
+      `${bannersStub[0].id},${resultsStub[0].id},${resultsStub[1].id},${bannersStub[1].id},
+      ${bannersStub[2].id},${bannersStub[3].id},${resultsStub[2].id},${resultsStub[3].id},
+      ${bannersStub[4].id}`.replace(/\s/g, '')
     );
   });
 });
-
-interface RenderBannersListOptions {
-  /** The template to be rendered. */
-  template?: string;
-  /** Components to be rendered. */
-  components?: Dictionary<VueConstructor | ComponentOptions<Vue>>;
-  /** The `banners` used to be rendered. */
-  banners?: Banner[];
-}
-
-interface RendersBannerListAPI {
-  /** The `wrapper` wrapper component. */
-  wrapper: Wrapper<Vue>;
-  /** The `banners` used to be rendered. */
-  getBanners: () => Banner[];
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/fallback-disclaimer.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/fallback-disclaimer.spec.ts
index 6657268301..f927584753 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/fallback-disclaimer.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/fallback-disclaimer.spec.ts
@@ -1,7 +1,7 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import FallbackDisclaimer from '../fallback-disclaimer.vue';
 import { RootXStoreState } from '../../../../store/index';
@@ -11,15 +11,9 @@ function renderFallbackDisclaimer({
   template = `<FallbackDisclaimer/>`,
   query = '',
   fromNoResultsWithFilters = false
-}: RenderFallbackDisclaimerOptions = {}): RenderFallbackDisclaimerAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+}: RenderFallbackDisclaimerOptions = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  resetXSearchStateWith(store, {
-    query,
-    fromNoResultsWithFilters
-  });
+
   const wrapper = mount(
     {
       components: {
@@ -28,20 +22,27 @@ function renderFallbackDisclaimer({
       template
     },
     {
-      localVue,
-      store
+      global: {
+        plugins: [installNewXPlugin({ store })]
+      }
     }
   );
 
+  resetXSearchStateWith(store, {
+    query,
+    fromNoResultsWithFilters
+  });
+
   return {
-    wrapper
+    wrapper: wrapper.findComponent(FallbackDisclaimer)
   };
 }
 
 describe('testing Fallback disclaimer component', () => {
   it('does not render any content when there is no results with filters', () => {
     const { wrapper } = renderFallbackDisclaimer();
-    expect(wrapper.find(getDataTestSelector('fallback-disclaimer')).element).not.toBeDefined();
+
+    expect(wrapper.find('.x-fallback-disclaimer').exists()).toBe(false);
   });
 
   it('renders the message when there is no results with filters', async () => {
@@ -49,7 +50,7 @@ describe('testing Fallback disclaimer component', () => {
     // eslint-disable-next-line max-len
     const message = `No results found for ${query} with the selected filters. The filters have been unselected.`;
     const { wrapper } = renderFallbackDisclaimer({ fromNoResultsWithFilters: true, query });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.find(getDataTestSelector('fallback-disclaimer')).text()).toBe(message);
   });
 
@@ -65,7 +66,7 @@ describe('testing Fallback disclaimer component', () => {
       query: 'dress',
       fromNoResultsWithFilters: true
     });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.find(getDataTestSelector('fallback-disclaimer')).text()).toBe(
       "No results found for 'dress'. Filters deselected"
     );
@@ -80,8 +81,3 @@ interface RenderFallbackDisclaimerOptions {
   /** Indicates if a request with filters applied had no results. */
   fromNoResultsWithFilters?: boolean;
 }
-
-interface RenderFallbackDisclaimerAPI {
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/partial-query-button.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/partial-query-button.spec.ts
index f296897cf0..53d65c94cd 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/partial-query-button.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/partial-query-button.spec.ts
@@ -1,16 +1,14 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { WireMetadata } from '../../../../wiring/wiring.types';
 import PartialQueryButton from '../partial-query-button.vue';
+import { XPlugin } from '../../../../plugins/index';
 
 function renderPartialQueryButton({
   template = `<PartialQueryButton :query="query" />`,
   query = ''
-}: RenderPartialQueryButtonOptions = {}): RenderPartialQueryButtonAPI {
-  const [, localVue] = installNewXPlugin();
-
+}: RenderPartialQueryButtonOptions = {}) {
   const wrapper = mount(
     {
       components: {
@@ -20,9 +18,11 @@ function renderPartialQueryButton({
       template
     },
     {
-      localVue,
-      propsData: {
+      props: {
         query
+      },
+      global: {
+        plugins: [installNewXPlugin()]
       }
     }
   );
@@ -31,9 +31,7 @@ function renderPartialQueryButton({
 
   return {
     partialQueryButtonWrapper,
-    async click() {
-      await wrapper.trigger('click');
-    }
+    click: async () => await wrapper.trigger('click')
   };
 }
 
@@ -80,10 +78,9 @@ describe('testing PartialQueryButton component', () => {
     const { partialQueryButtonWrapper, click } = renderPartialQueryButton({
       query
     });
-    const $x = partialQueryButtonWrapper.vm.$x;
 
-    $x.on('UserAcceptedAQuery', true).subscribe(userAcceptedAQuery);
-    $x.on('UserClickedPartialQuery', true).subscribe(UserClickedPartialQuery);
+    XPlugin.bus.on('UserAcceptedAQuery', true).subscribe(userAcceptedAQuery);
+    XPlugin.bus.on('UserClickedPartialQuery', true).subscribe(UserClickedPartialQuery);
 
     click();
 
@@ -110,10 +107,3 @@ interface RenderPartialQueryButtonOptions {
   /** The query property. */
   query?: string;
 }
-
-interface RenderPartialQueryButtonAPI {
-  /** The wrapper of the button element.*/
-  partialQueryButtonWrapper: Wrapper<Vue>;
-  /** Clicks the button and waits for the view to update. */
-  click: () => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/partial-results-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/partial-results-list.spec.ts
index 4c2f20f97d..b6bf8ea4eb 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/partial-results-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/partial-results-list.spec.ts
@@ -1,14 +1,13 @@
-import { PartialResult } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
-import { getPartialResultsStub } from '../../../../__stubs__/partials-results-stubs.factory';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { RootXStoreState } from '../../../../store/store.types';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
+import { getPartialResultsStub } from '../../../../__stubs__';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { RootXStoreState } from '../../../../store';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import PartialResultsList from '../partial-results-list.vue';
+import { searchXModule } from '../../x-module';
 import { resetXSearchStateWith } from './utils';
 
 /**
@@ -20,15 +19,8 @@ import { resetXSearchStateWith } from './utils';
 function renderPartialResultsList({
   template = '<PartialResultsList />',
   partialResults = getPartialResultsStub()
-}: RenderPartialResultsListOptions = {}): RenderPartialResultsListAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+} = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-
-  XPlugin.resetInstance();
-
-  resetXSearchStateWith(store, { partialResults });
 
   const wrapper = mount(
     {
@@ -38,18 +30,20 @@ function renderPartialResultsList({
       template
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] })]
+      },
       store
     }
   );
 
+  resetXSearchStateWith(store, { partialResults });
+
   const partialResultsListWrapper = wrapper.findComponent(PartialResultsList);
 
   return {
     partialResultsListWrapper,
-    getPartialResults() {
-      return partialResults;
-    }
+    getPartialResults: () => partialResults
   };
 }
 describe('testing Partial results list component', () => {
@@ -63,8 +57,9 @@ describe('testing Partial results list component', () => {
     expect(getXComponentXModuleName(partialResultsListWrapper.vm)).toEqual('search');
   });
 
-  it('renders the partial results in the state', () => {
+  it('renders the partial results in the state', async () => {
     const { partialResultsListWrapper, getPartialResults } = renderPartialResultsList();
+    await nextTick();
     const partialResultsItems = partialResultsListWrapper.findAll(
       getDataTestSelector('partial-result')
     );
@@ -78,7 +73,7 @@ describe('testing Partial results list component', () => {
     );
   });
 
-  it('allows customizing the default slot', () => {
+  it('allows customizing the default slot', async () => {
     const { partialResultsListWrapper } = renderPartialResultsList({
       template: `
         <PartialResultsList>
@@ -88,25 +83,13 @@ describe('testing Partial results list component', () => {
         </PartialResultsList>`
     });
 
-    expect(partialResultsListWrapper.find(getDataTestSelector('partial-results')).exists()).toBe(
+    await nextTick();
+
+    expect(partialResultsListWrapper.find(getDataTestSelector('partial-results')).exists()).toEqual(
       true
     );
     expect(
       partialResultsListWrapper.find(getDataTestSelector('partial-slot-overridden')).exists()
-    ).toBe(true);
+    ).toEqual(true);
   });
 });
-
-interface RenderPartialResultsListOptions {
-  /** The template to be rendered. */
-  template?: string;
-  /** The `partialResults` to be rendered. */
-  partialResults?: PartialResult[];
-}
-
-interface RenderPartialResultsListAPI {
-  /** The `partialResultsList` wrapper component. */
-  partialResultsListWrapper: Wrapper<Vue>;
-  /** Helper method with the `partialResults` to be rendered. */
-  getPartialResults: () => PartialResult[];
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/promoted.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/promoted.spec.ts
index 22835b528c..4f0f050fd0 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/promoted.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/promoted.spec.ts
@@ -1,6 +1,5 @@
 import { Promoted as PromotedModel } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { createPromotedStub } from '../../../../__stubs__/promoteds-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
@@ -10,9 +9,7 @@ function renderPromoted({
   template = `<Promoted v-bind="$attrs"/>`,
   promoted = createPromotedStub('default-promoted'),
   titleClass
-}: RenderPromotedOptions = {}): RenderPromotedAPI {
-  const [, localVue] = installNewXPlugin();
-
+}: RenderPromotedOptions = {}) {
   const wrapper = mount(
     {
       components: {
@@ -21,11 +18,13 @@ function renderPromoted({
       template
     },
     {
-      propsData: {
+      props: {
         promoted,
         titleClass
       },
-      localVue
+      global: {
+        plugins: [installNewXPlugin()]
+      }
     }
   );
 
@@ -81,8 +80,3 @@ interface RenderPromotedOptions {
   /** Class to customize the title element. */
   titleClass?: string;
 }
-
-interface RenderPromotedAPI {
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts
index 17a265da98..6b2b3d6593 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts
@@ -1,98 +1,69 @@
-import { Promoted } from '@empathyco/x-types';
-import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, {
-  VueConstructor,
-  ComponentOptions,
-  defineComponent,
-  computed,
-  provide,
-  inject,
-  Ref
-} from 'vue';
-import Vuex, { Store } from 'vuex';
+import { DeepPartial } from '@empathyco/x-utils';
+import { mount } from '@vue/test-utils';
+import { defineComponent, computed, provide, inject, Ref, nextTick } from 'vue';
+import { Store } from 'vuex';
 import BaseGrid from '../../../../components/base-grid.vue';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { RootXStoreState } from '../../../../store/store.types';
+import { LIST_ITEMS_KEY, getXComponentXModuleName, isXComponent } from '../../../../components';
+import { RootXStoreState } from '../../../../store';
 import { ListItem } from '../../../../utils/types';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import PromotedsList from '../promoteds-list.vue';
-import { getPromotedsStub } from '../../../../__stubs__/promoteds-stubs.factory';
-import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
-import { LIST_ITEMS_KEY } from '../../../../components/decorators/injection.consts';
+import { getPromotedsStub, getResultsStub } from '../../../../__stubs__';
+import { searchXModule } from '../../x-module';
 import { resetXSearchStateWith } from './utils';
 
-/**
- * Renders the `PromotedsList` component, exposing a basic API for testing.
- *
- * @param options - The options to render the component with.
- * @returns The API for testing the `ResultsList` component.
- */
-function renderPromotedsList({
+async function render({
   template = '<PromotedsList />',
   promoteds = getPromotedsStub(),
-  components
-}: RenderPromotedsListOptions = {}): RenderPromotedsListAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  components = {}
+} = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
 
-  XPlugin.resetInstance();
-
-  resetXSearchStateWith(store, { promoteds });
   const wrapper = mount(
     {
-      components: {
-        PromotedsList,
-        ...components
-      },
+      components: { PromotedsList, ...components },
       template
     },
     {
-      localVue,
-      store
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] })]
+      }
     }
   );
-
-  const promotedsListWrapper = wrapper.findComponent(PromotedsList);
+  resetXSearchStateWith(store, { promoteds });
+  await nextTick();
 
   return {
-    wrapper: promotedsListWrapper,
-    getPromoteds() {
-      return promoteds;
-    }
+    wrapper: wrapper.findComponent(PromotedsList),
+    promoteds
   };
 }
 
 describe('testing PromotedsList component', () => {
-  it('is an XComponent', () => {
-    const { wrapper } = renderPromotedsList();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-  });
+  it('is an XComponent which has an XModule', async () => {
+    const { wrapper } = await render();
 
-  it('has Search as XModule', () => {
-    const { wrapper } = renderPromotedsList();
+    expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('search');
   });
 
-  it('renders the promoteds in the state', () => {
-    const { wrapper, getPromoteds } = renderPromotedsList();
+  it('renders the promoteds in the state', async () => {
+    const { wrapper, promoteds } = await render();
     const promotedsListItems = wrapper.findAll(getDataTestSelector('promoteds-list-item'));
 
-    getPromoteds().forEach((result, index) => {
-      expect(promotedsListItems.at(index).text()).toEqual(result.id);
-    });
+    promoteds.forEach((result, index) =>
+      expect(promotedsListItems.at(index)?.text()).toEqual(result.id)
+    );
   });
 
-  it('does not render any promoted if the are none', () => {
-    const { wrapper } = renderPromotedsList({ promoteds: [] });
-    expect(wrapper.html()).toEqual('');
+  it('does not render any promoted if the are none', async () => {
+    const { wrapper } = await render({ promoteds: [] });
+
+    expect(wrapper.find(getDataTestSelector('promoteds-list')).exists()).toEqual(false);
   });
 
-  it('allows customizing the promoted slot', () => {
-    const { wrapper, getPromoteds } = renderPromotedsList({
+  it('allows customizing the promoted slot', async () => {
+    const { wrapper, promoteds } = await render({
       template: `
         <PromotedsList>
           <template #promoted="{ item }">
@@ -101,39 +72,31 @@ describe('testing PromotedsList component', () => {
         </PromotedsList>`
     });
 
-    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toBe(true);
-    expect(wrapper.find(getDataTestSelector('promoteds-list-item')).exists()).toBe(true);
-    expect(wrapper.find(getDataTestSelector('promoted-slot-overridden')).text()).toBe(
-      `Custom promoted: ${getPromoteds()[0].title}`
+    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('promoteds-list-item')).exists()).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('promoted-slot-overridden')).text()).toEqual(
+      `Custom promoted: ${promoteds[0].title}`
     );
   });
 
-  it('allows customizing the default slot', () => {
-    const { wrapper } = renderPromotedsList({
+  it('allows customizing the default slot', async () => {
+    const { wrapper } = await render({
       template: `
         <PromotedsList>
           <template #default="{ promoteds }">
-            <p :items="promoteds" data-test="default-slot-overridden"/>
+            <p data-test="default-slot-overridden"/>
           </template>
         </PromotedsList>`,
       components: { BaseGrid }
     });
 
-    expect(wrapper.find(getDataTestSelector('promoteds-list')).exists()).toBe(false);
-    expect(wrapper.find(getDataTestSelector('default-slot-overridden')).exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('promoteds-list')).exists()).toEqual(false);
+    expect(wrapper.find(getDataTestSelector('default-slot-overridden')).exists()).toEqual(true);
   });
 
-  it('provides the result of concatenating ancestor injected items with the promoteds', () => {
+  it('provides the result of concatenating ancestor injected items with the promoteds', async () => {
     const resultsStub = getResultsStub();
     const promotedsStub = getPromotedsStub();
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-    const store = new Store<DeepPartial<RootXStoreState>>({});
-    installNewXPlugin({ store }, localVue);
-    resetXSearchStateWith(store, {
-      promoteds: promotedsStub,
-      totalResults: resultsStub.length * 2
-    });
 
     /* It provides an array with some results */
     const Provider = defineComponent({
@@ -142,65 +105,48 @@ describe('testing PromotedsList component', () => {
         const providedStub = computed((): ListItem[] => resultsStub);
         provide(LIST_ITEMS_KEY as string, providedStub);
       },
-      template: `
-        <div><slot /></div>
-      `
+      template: `<div><slot /></div>`
     });
 
     /*
      * It should inject an array with the result from the Provider and the banner concatenated from
-     * BannersList
+     * PromotedList
      */
     const Child = defineComponent({
       name: 'Child',
       setup() {
-        const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+        const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
         const injectedListItemsString = computed(
-          (): string => injectedListItems?.value!.map(item => item.id).join(',') ?? ''
+          () => injectedListItems?.value.map(item => item.id).join(',') ?? ''
         );
-        return {
-          injectedListItemsString
-        };
+        return { injectedListItemsString };
       },
-      template: `
-        <p>{{ injectedListItemsString }}</p>
-      `
+      template: `<p>{{ injectedListItemsString }}</p>`
     });
 
+    const store = new Store<DeepPartial<RootXStoreState>>({});
     const wrapper = mount(
       {
-        template: '<Provider v-bind="$attrs"><PromotedsList><Child /></PromotedsList></Provider>',
-        components: {
-          Provider,
-          Child,
-          PromotedsList
-        }
+        template: '<Provider><PromotedsList><Child /></PromotedsList></Provider>',
+        components: { Provider, Child, PromotedsList }
       },
       {
-        localVue,
-        store
+        global: {
+          plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] })]
+        }
       }
     );
 
-    expect(wrapper.text()).toBe(
-      // eslint-disable-next-line max-len
-      `${promotedsStub[0].id},${resultsStub[0].id},${promotedsStub[1].id},${promotedsStub[2].id},${promotedsStub[3].id},${resultsStub[1].id},${resultsStub[2].id},${resultsStub[3].id},${promotedsStub[4].id}`
+    resetXSearchStateWith(store, {
+      promoteds: promotedsStub,
+      totalResults: resultsStub.length * 2
+    });
+    await nextTick();
+
+    expect(wrapper.text()).toEqual(
+      `${promotedsStub[0].id},${resultsStub[0].id},${promotedsStub[1].id},${promotedsStub[2].id},
+      ${promotedsStub[3].id},${resultsStub[1].id},${resultsStub[2].id},${resultsStub[3].id},
+      ${promotedsStub[4].id}`.replace(/\s/g, '')
     );
   });
 });
-
-interface RenderPromotedsListOptions {
-  /** The template to be rendered. */
-  template?: string;
-  /** Components to be rendered. */
-  components?: Dictionary<VueConstructor | ComponentOptions<Vue>>;
-  /** The `promoteds` used to be rendered. */
-  promoteds?: Promoted[];
-}
-
-interface RenderPromotedsListAPI {
-  /** The `wrapper` wrapper component. */
-  wrapper: Wrapper<Vue>;
-  /** The `promoteds` used to be rendered. */
-  getPromoteds: () => Promoted[];
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts
index b030b1184f..b305f01a29 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts
@@ -1,18 +1,22 @@
-import { DeepPartial } from '@empathyco/x-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { Redirection as RedirectionModel } from '@empathyco/x-types';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { createRedirectionStub } from '../../../../__stubs__/redirections-stubs.factory';
+import { mount } from '@vue/test-utils';
+import { DeepPartial } from '@empathyco/x-utils';
+import { nextTick } from 'vue';
+import { createRedirectionStub, getEmptySearchResponseStub } from '../../../../__stubs__';
+import { XComponentsAdapterDummy } from '../../../../__tests__/adapter.dummy';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { RootXStoreState } from '../../../../store/store.types';
-import { WirePayload } from '../../../../wiring/wiring.types';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
+import { XPlugin } from '../../../../plugins';
+import { WirePayload } from '../../../../wiring';
 import Redirection from '../redirection.vue';
+import { RootXStoreState } from '../../../../store';
+import { XDummyBus } from '../../../../__tests__/bus.dummy';
+import { searchXModule } from '../../x-module';
 import { resetXSearchStateWith } from './utils';
 
 const stubRedirections = [createRedirectionStub('redirection')];
-
+let bus = new XDummyBus();
 function renderRedirection({
   template = `
   <Redirection
@@ -28,30 +32,24 @@ function renderRedirection({
   mode = 'auto',
   delayInSeconds = 1
 } = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
+  (XComponentsAdapterDummy.search as jest.Mock).mockResolvedValueOnce({
+    ...getEmptySearchResponseStub()
+  });
 
-  resetXSearchStateWith(store, { redirections });
   const wrapper = mount(
     {
-      components: {
-        Redirection
-      },
+      components: { Redirection },
       template
     },
     {
-      data() {
-        return {
-          mode,
-          delayInSeconds
-        };
-      },
-      localVue,
-      store
+      data: () => ({ mode, delayInSeconds }),
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] }, bus)]
+      }
     }
   );
+  resetXSearchStateWith(store, { redirections });
 
   const onUserAbortedARedirection = jest.fn();
   XPlugin.bus.on('UserClickedAbortARedirection', true).subscribe(onUserAbortedARedirection);
@@ -61,11 +59,11 @@ function renderRedirection({
 
   return {
     wrapper: wrapper.findComponent(Redirection),
-    acceptRedirection() {
-      wrapper.find(getDataTestSelector('redirection-accept')).element.click();
+    acceptRedirection: async () => {
+      await wrapper.find(getDataTestSelector('redirection-accept')).trigger('click');
     },
-    abortRedirection() {
-      wrapper.find(getDataTestSelector('redirection-abort')).element.click();
+    abortRedirection: async () => {
+      await wrapper.find(getDataTestSelector('redirection-abort')).trigger('click');
     },
     onUserClickedARedirection,
     onUserAbortedARedirection
@@ -81,6 +79,7 @@ describe('testing Redirection component', () => {
     // @ts-expect-error
     delete window.location;
     window.location = { ...location, replace: spy };
+    bus = new XDummyBus();
   });
 
   afterEach(() => {
@@ -102,10 +101,10 @@ describe('testing Redirection component', () => {
   it("doesn't render when there are no redirections", () => {
     const { wrapper } = renderRedirection({ redirections: [] });
 
-    expect(wrapper.html()).toBe('');
+    expect(wrapper.find('.x-redirection').exists()).toBe(false);
   });
 
-  it('renders the redirection component slot', () => {
+  it('renders the redirection component slot', async () => {
     const { wrapper } = renderRedirection({
       template: `
         <Redirection
@@ -116,17 +115,18 @@ describe('testing Redirection component', () => {
         </Redirection>`
     });
 
+    await nextTick();
+
     expect(wrapper.get(getDataTestSelector('redirection-url')).text()).toEqual(
       stubRedirections[0].url
     );
   });
 
-  //eslint-disable-next-line max-len
-  it('redirects and emits the `UserClickedARedirection` event in manual mode when the user click the button', () => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
+  it('redirects and emits the `UserClickedARedirection` event in manual mode when the user click the button', async () => {
     const { onUserClickedARedirection, acceptRedirection } = renderRedirection({ mode: 'manual' });
 
-    acceptRedirection();
+    await nextTick();
+    await acceptRedirection();
 
     expect(onUserClickedARedirection).toHaveBeenCalledTimes(1);
     expect(onUserClickedARedirection).toHaveBeenCalledWith<[WirePayload<RedirectionModel>]>({
@@ -141,7 +141,6 @@ describe('testing Redirection component', () => {
     expect(spy).toHaveBeenCalledWith(stubRedirections[0].url);
   });
 
-  //eslint-disable-next-line max-len
   it("doesn't redirect and doesn't emit the event `UserClickedARedirection` in manual when the user doesn't click the button", () => {
     const { onUserClickedARedirection } = renderRedirection({ mode: 'manual' });
 
@@ -151,11 +150,11 @@ describe('testing Redirection component', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
-  //eslint-disable-next-line max-len
-  it('redirects and emits the `UserClickedARedirection` event in auto mode and 0 seconds of delay', () => {
+  it('redirects and emits the `UserClickedARedirection` event in auto mode and 0 seconds of delay', async () => {
     const { onUserClickedARedirection } = renderRedirection({ delayInSeconds: 0 });
 
-    // The delay 0 runs so fast the we need to force the test to simulate a wait.
+    await nextTick();
+    // The delay 0 runs so fast, we need to force the test to simulate a wait.
     jest.advanceTimersByTime(1);
 
     expect(onUserClickedARedirection).toHaveBeenCalledTimes(1);
@@ -171,12 +170,12 @@ describe('testing Redirection component', () => {
     expect(spy).toHaveBeenCalledWith(stubRedirections[0].url);
   });
 
-  it('emits the redirection event `UserClickedAbortARedirection`', () => {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
+  it('emits the redirection event `UserClickedAbortARedirection`', async () => {
     const { onUserClickedARedirection, onUserAbortedARedirection, abortRedirection } =
       renderRedirection();
 
-    abortRedirection();
+    await nextTick();
+    await abortRedirection();
     jest.runAllTicks();
 
     expect(onUserClickedARedirection).not.toHaveBeenCalled();
@@ -184,7 +183,6 @@ describe('testing Redirection component', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
-  //eslint-disable-next-line max-len
   it("doesn't redirect and doesn't emit the `UserClickedARedirection` event if there is a new query accepted", () => {
     const { onUserClickedARedirection } = renderRedirection();
     XPlugin.bus.emit('UserAcceptedAQuery', 'lego');
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts
index 38d98e794b..c87676951a 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts
@@ -1,102 +1,89 @@
-import { Result } from '@empathyco/x-types';
-import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { VueConstructor, ComponentOptions, defineComponent, inject, Ref } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
+import { DeepPartial } from '@empathyco/x-utils';
+import { mount } from '@vue/test-utils';
+import { defineComponent, inject, Ref, nextTick } from 'vue';
+import { Store } from 'vuex';
+import { getResultsStub, getSearchResponseStub } from '../../../../__stubs__';
 import BaseGrid from '../../../../components/base-grid.vue';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { RootXStoreState } from '../../../../store/store.types';
+import { RootXStoreState } from '../../../../store';
 import { ListItem } from '../../../../utils/types';
-import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
+import {
+  getDataTestSelector,
+  getMockedAdapter,
+  installNewXPlugin
+} from '../../../../__tests__/utils';
 import ResultsList from '../results-list.vue';
-import { InfiniteScroll } from '../../../../directives/infinite-scroll/infinite-scroll.types';
 import {
   HAS_MORE_ITEMS_KEY,
   LIST_ITEMS_KEY,
-  QUERY_KEY
-} from '../../../../components/decorators/injection.consts';
+  QUERY_KEY,
+  getXComponentXModuleName,
+  isXComponent
+} from '../../../../components';
 import { SearchMutations } from '../../store/types';
 import { searchXModule } from '../../x-module';
 import { resetXSearchStateWith } from './utils';
 
-/**
- * Renders the `ResultsList` component, exposing a basic API for testing.
- *
- * @param options - The options to render the component with.
- * @returns The API for testing the `ResultsList` component.
- */
-function renderResultsList({
+const adapter = getMockedAdapter({ search: getSearchResponseStub() });
+
+async function render({
   template = '<ResultsList />',
   results = getResultsStub(),
-  totalResults = results.length,
-  components
-}: RenderResultsListOptions = {}): RenderResultsListAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
+  components = {}
+} = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin(
-    {
-      store,
-      initialXModules: [searchXModule]
-    },
-    localVue
-  );
-  resetXSearchStateWith(store, { results, totalResults });
 
   const wrapper = mount(
     {
-      components: {
-        ResultsList,
-        ...components
-      },
-      template
+      template,
+      components: { ResultsList, ...components }
     },
     {
-      localVue,
-      store
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule], adapter })]
+      }
     }
   );
 
+  resetXSearchStateWith(store, { results, totalResults: results.length });
+  await nextTick();
+
   return {
     wrapper: wrapper.findComponent(ResultsList),
-    getResults() {
-      return results;
-    },
-    commit(event, payload) {
+    results,
+    commit: <Event extends keyof SearchMutations>(
+      event: Event,
+      payload: Parameters<SearchMutations[Event]>[0]
+    ) => {
       store.commit(`x/search/${event}`, payload);
     }
   };
 }
 
 describe('testing Results list component', () => {
-  it('is an XComponent', () => {
-    const { wrapper } = renderResultsList();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-  });
+  it('is an XComponent which has an XModule', async () => {
+    const { wrapper } = await render();
 
-  it('has Search as XModule', () => {
-    const { wrapper } = renderResultsList();
+    expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('search');
   });
 
-  it('renders the results in the state', () => {
-    const { wrapper, getResults } = renderResultsList();
+  it('renders the results in the state', async () => {
+    const { wrapper, results } = await render();
     const resultsListItems = wrapper.findAll(getDataTestSelector('results-list-item'));
 
-    getResults().forEach((result, index) => {
-      expect(resultsListItems.at(index).text()).toEqual(result.id);
-    });
+    results.forEach((result, index) =>
+      expect(resultsListItems.at(index)?.text()).toEqual(result.id)
+    );
   });
 
-  it('does not render any result if the are none', () => {
-    const { wrapper } = renderResultsList({ results: [] });
-    expect(wrapper.html()).toEqual('');
+  it('does not render any result if the are none', async () => {
+    const { wrapper } = await render({ results: [] });
+
+    expect(wrapper.isVisible()).toEqual(false);
   });
 
-  it('allows customizing the result slot', () => {
-    const { wrapper, getResults } = renderResultsList({
+  it('allows customizing the result slot', async () => {
+    const { wrapper, results } = await render({
       template: `
         <ResultsList>
           <template #result="{ item }">
@@ -105,81 +92,54 @@ describe('testing Results list component', () => {
         </ResultsList>`
     });
 
-    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toBe(true);
-    expect(wrapper.find(getDataTestSelector('results-list-item')).exists()).toBe(true);
-    expect(wrapper.find(getDataTestSelector('result-slot-overridden')).text()).toBe(
-      `Custom result: ${getResults()[0].name!}`
+    expect(wrapper.exists()).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('results-list-item')).exists()).toEqual(true);
+    expect(wrapper.find(getDataTestSelector('result-slot-overridden')).text()).toEqual(
+      `Custom result: ${results[0].name!}`
     );
   });
 
-  it('allows customizing the default slot', () => {
-    const { wrapper } = renderResultsList({
+  it('allows customizing the default slot', async () => {
+    const { wrapper } = await render({
       template: `
         <ResultsList>
           <template #default="{ results }">
-            <p :items="results" data-test="default-slot-overridden"/>
+            <p data-test="default-slot-overridden"/>
           </template>
         </ResultsList>`,
       components: { BaseGrid }
     });
 
-    expect(wrapper.find(getDataTestSelector('results-list')).exists()).toBe(false);
-    expect(wrapper.find(getDataTestSelector('default-slot-overridden')).exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('results-list')).exists()).toEqual(false);
+    expect(wrapper.find(getDataTestSelector('default-slot-overridden')).exists()).toEqual(true);
   });
 
-  it('emits an `UserReachedResultListEnd` X event when onInfiniteScrollEnd is called', () => {
-    const { wrapper } = renderResultsList();
-
-    const listener = jest.fn();
-    wrapper.vm.$x.on('UserReachedResultsListEnd').subscribe(listener);
-
-    (wrapper.vm as Vue & InfiniteScroll).onInfiniteScrollEnd();
-
-    expect(listener).toHaveBeenCalledTimes(1);
-  });
-
-  it('provides the results from state with the key `item`', () => {
+  it('provides the results from state with the key `item`', async () => {
     const Child = defineComponent({
       name: 'Child',
-      setup() {
-        const items = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
-
-        return { items };
-      },
-      template: `
-        <div>{{ items[0].id }}</div>
-      `
+      setup: () => ({ items: inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string) }),
+      template: `<div>{{ items?.[0]?.id }}</div>`
     });
 
-    const { wrapper, getResults } = renderResultsList({
+    const { wrapper, results } = await render({
       template: '<ResultsList><Child /></ResultsList>',
-      components: {
-        Child
-      }
+      components: { Child }
     });
 
     const childWrapper = wrapper.findComponent(Child);
-    expect(childWrapper.text()).toBe(getResults()[0].id);
+    expect(childWrapper.text()).toEqual(results[0].id);
   });
 
-  // eslint-disable-next-line max-len
   it('provides the query with the key `query`, only updating it if the status is success', async () => {
     const Child = defineComponent({
       name: 'Child',
-      setup() {
-        const searchQuery = inject<Ref<string>>(QUERY_KEY as string);
-
-        return { searchQuery };
-      },
-      template: `
-        <div>{{ searchQuery }}</div>
-      `
+      setup: () => ({ searchQuery: inject<Ref<string>>(QUERY_KEY as string) }),
+      template: `<div>{{ searchQuery }}</div>`
     });
-    const { wrapper, commit } = renderResultsList({
+    const { wrapper, commit } = await render({
       template: `<ResultsList><Child/></ResultsList>`,
-      components: {
-        Child
-      }
+      components: { Child }
     });
 
     const childWrapper = wrapper.findComponent(Child);
@@ -189,87 +149,52 @@ describe('testing Results list component', () => {
 
     commit('setQuery', 'tshirt');
     commit('setStatus', 'loading');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     // The injected query shouldn't change if the status is loading.
     expect(childWrapper.text()).toBeFalsy();
 
     commit('setStatus', 'success');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     // The query should have changed to `tshirt` because the request has succeeded.
-    expect(childWrapper.text()).toBe('tshirt');
+    expect(childWrapper.text()).toEqual('tshirt');
 
     commit('setQuery', 'jacket');
     commit('setStatus', 'loading');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     // Here the injected query should be `tshirt` because the request for jacket is loading.
-    expect(childWrapper.text()).toBe('tshirt');
+    expect(childWrapper.text()).toEqual('tshirt');
 
     commit('setStatus', 'success');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
-    // Finally, when the request for `jacket` has been completed,
-    // the injected query should be updated.
-    expect(childWrapper.text()).toBe('jacket');
+    // Finally, when the request for `jacket` has been completed, the injected query should be updated.
+    expect(childWrapper.text()).toEqual('jacket');
   });
 
-  it('provides a flag indicating if there are more results with the key `hasMoreItems`', () => {
+  it('provides a flag indicating if there are more results with the key `hasMoreItems`', async () => {
     const Child = defineComponent({
       name: 'Child',
-      setup() {
-        const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string);
-
-        return { hasMoreItems };
-      },
-      template: `
-        <div></div>
-      `
+      setup: () => ({ hasMoreItems: inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string) }),
+      template: `<div>{{ hasMoreItems }}</div>`
     });
 
-    const { commit, wrapper } = renderResultsList({
+    const { commit, wrapper } = await render({
       template: `<ResultsList><Child /></ResultsList>`,
-      components: {
-        Child
-      }
+      components: { Child }
     });
 
     const childWrapper = wrapper.findComponent(Child);
 
     // Initially, the number of `items` and `totalResults` should match.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    expect(childWrapper.vm.hasMoreItems).toBe(false);
+    expect(childWrapper.text()).toEqual('false');
 
     commit('setTotalResults', 1000);
+    await nextTick();
 
     // Now the `totalResults` is higher than the number of `items`
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    expect(childWrapper.vm.hasMoreItems).toBe(true);
+    expect(childWrapper.text()).toEqual('true');
   });
 });
-
-interface RenderResultsListOptions {
-  /** The template to be rendered. */
-  template?: string;
-  /** Components to be rendered. */
-  components?: Dictionary<VueConstructor | ComponentOptions<Vue>>;
-  /** The `results` used to be rendered. */
-  results?: Result[];
-  /** The total number of results. */
-  totalResults?: number;
-}
-
-interface RenderResultsListAPI {
-  /** The `wrapper` wrapper component. */
-  wrapper: Wrapper<Vue>;
-  /** The `results` used to be rendered. */
-  getResults: () => Result[];
-  /** Commits a mutation to the search store. */
-  commit: <Event extends keyof SearchMutations>(
-    event: Event,
-    payload: Parameters<SearchMutations[Event]>[0]
-  ) => void;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts
index 2f65d3c5cf..33424e78e9 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts
@@ -1,15 +1,17 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { searchXModule } from '../../x-module';
 import SortDropdown from '../sort-dropdown.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { XPlugin } from '../../../../plugins/x-plugin';
+import { XDummyBus } from '../../../../__tests__/bus.dummy';
 import { resetXSearchStateWith } from './utils';
 
+const bus = new XDummyBus();
 function renderSortDropdown({
   template = `
    <SortDropdown :items="items">
@@ -23,19 +25,8 @@ function renderSortDropdown({
   items = ['default', 'Price low to high', 'Price high to low'],
   selectedSort = items[0]
 }: Partial<{ template?: string; items?: any[]; selectedSort?: any }> = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(searchXModule);
-  resetXSearchStateWith(store, { sort: selectedSort });
-
-  const onSelectedSortProvided = jest.fn();
-  XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
-  const onUserClickedASort = jest.fn();
-  XPlugin.bus.on('UserClickedASort', true).subscribe(onUserClickedASort);
-
   const wrapper = mount(
     {
       template,
@@ -43,12 +34,21 @@ function renderSortDropdown({
       props: ['items']
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] }, bus)]
+      },
       store,
-      propsData: { items }
+      props: { items }
     }
   );
 
+  resetXSearchStateWith(store, { sort: selectedSort });
+
+  const onSelectedSortProvided = jest.fn();
+  XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
+  const onUserClickedASort = jest.fn();
+  XPlugin.bus.on('UserClickedASort', true).subscribe(onUserClickedASort);
+
   const sortDropdown = wrapper.findComponent(SortDropdown);
   return {
     wrapper: sortDropdown,
@@ -59,7 +59,7 @@ function renderSortDropdown({
     clickToggleButton: async () =>
       await sortDropdown.find(getDataTestSelector('dropdown-toggle')).trigger('click'),
     clickNthItem: async (index: number) => {
-      await sortDropdown.findAll(getDataTestSelector('dropdown-item')).at(index).trigger('click');
+      await sortDropdown.findAll(getDataTestSelector('dropdown-item')).at(index)?.trigger('click');
     }
   } as const;
 }
@@ -106,10 +106,11 @@ describe('testing SortDropdown component', () => {
     expect(getSelectedItem().text()).toEqual('offer');
   });
 
-  it('returns the first item as default', () => {
+  it('returns the first item as default', async () => {
     const { onSelectedSortProvided } = renderSortDropdown();
 
     expect(onSelectedSortProvided).toHaveBeenCalledTimes(1);
+    await nextTick();
     // This event gets emitted immediately, before the component has been mounted
     expect(onSelectedSortProvided).toHaveBeenCalledWith({
       eventPayload: 'default',
@@ -131,7 +132,7 @@ describe('testing SortDropdown component', () => {
       });
 
       await clickToggleButton();
-      expect(getSelectedItem().text()).toEqual(`✅ 🟢 default`);
+      expect(getSelectedItem().text()).toEqual(`✅🟢default`);
     });
 
     it('allows to customize the toggle button', async () => {
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
index 73a3625256..7be1309cdc 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
@@ -1,15 +1,18 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import SortList from '../sort-list.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { XPlugin } from '../../../../plugins/x-plugin';
 import { searchXModule } from '../../x-module';
+import { XDummyBus } from '../../../../__tests__/bus.dummy';
 import { resetXSearchStateWith } from './utils';
 
+const bus = new XDummyBus();
+
 function renderSortList({
   template = `
    <SortList :items="items">
@@ -20,19 +23,8 @@ function renderSortList({
   items = ['default', 'Price low to high', 'Price high to low'],
   selectedSort = items[0]
 }: Partial<{ template?: string; items?: any[]; selectedSort?: any }> = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(searchXModule);
-  resetXSearchStateWith(store, { sort: selectedSort });
-
-  const onSelectedSortProvided = jest.fn();
-  XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
-  const onUserClickedASort = jest.fn();
-  XPlugin.bus.on('UserClickedASort', true).subscribe(onUserClickedASort);
-
   const wrapper = mount(
     {
       template,
@@ -40,12 +32,21 @@ function renderSortList({
       props: ['items']
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] }, bus)]
+      },
       store,
-      propsData: { items }
+      props: { items }
     }
   );
 
+  resetXSearchStateWith(store, { sort: selectedSort });
+
+  const onSelectedSortProvided = jest.fn();
+  XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
+  const onUserClickedASort = jest.fn();
+  XPlugin.bus.on('UserClickedASort', true).subscribe(onUserClickedASort);
+
   const sortList = wrapper.findComponent(SortList);
 
   return {
@@ -55,7 +56,7 @@ function renderSortList({
     getButton: (index: number) => wrapper.vm.$el.children[index].children[0] as HTMLElement,
     getSelectedItem: () => sortList.get('.x-sort-list__item--is-selected'),
     clickNthItem: async (index: number) => {
-      await sortList.findAll(getDataTestSelector('x-sort-button')).at(index).trigger('click');
+      await sortList.findAll(getDataTestSelector('x-sort-button')).at(index)?.trigger('click');
       await nextTick();
     }
   };
@@ -92,10 +93,11 @@ describe('testing SortList component', () => {
     expect(getSelectedItem().text()).toEqual('offer');
   });
 
-  it('emits the first element of the `items` prop as the provided sort', () => {
+  it('emits the first element of the `items` prop as the provided sort', async () => {
     const { onSelectedSortProvided } = renderSortList();
 
     expect(onSelectedSortProvided).toHaveBeenCalledTimes(1);
+    await nextTick();
     expect(onSelectedSortProvided).toHaveBeenCalledWith({
       eventPayload: 'default',
       // This event gets emitted immediately, before the component has been mounted
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
index 0bb284179e..df397c933f 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
@@ -1,15 +1,17 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import SortPickerList from '../sort-picker-list.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { XPlugin } from '../../../../plugins/x-plugin';
 import { searchXModule } from '../../x-module';
+import { XDummyBus } from '../../../../__tests__/bus.dummy';
 import { resetXSearchStateWith } from './utils';
 
+const bus = new XDummyBus();
 function renderSortPickerList({
   template = `
    <SortPickerList :items="items" :buttonClass="buttonClass">
@@ -21,19 +23,8 @@ function renderSortPickerList({
   selectedSort = items[0],
   buttonClass
 }: Partial<{ template?: string; items?: any[]; selectedSort?: any; buttonClass?: string }> = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(searchXModule);
-  resetXSearchStateWith(store, { sort: selectedSort });
-
-  const onSelectedSortProvided = jest.fn();
-  XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
-  const onUserClickedASort = jest.fn();
-  XPlugin.bus.on('UserClickedASort', true).subscribe(onUserClickedASort);
-
   const wrapper = mount(
     {
       template,
@@ -41,14 +32,22 @@ function renderSortPickerList({
       props: ['items', 'buttonClass']
     },
     {
-      localVue,
+      global: {
+        plugins: [installNewXPlugin({ store, initialXModules: [searchXModule] }, bus)]
+      },
       store,
-      propsData: {
+      props: {
         items,
         buttonClass
       }
     }
   );
+  resetXSearchStateWith(store, { sort: selectedSort });
+
+  const onSelectedSortProvided = jest.fn();
+  XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
+  const onUserClickedASort = jest.fn();
+  XPlugin.bus.on('UserClickedASort', true).subscribe(onUserClickedASort);
 
   const sortPickerList = wrapper.findComponent(SortPickerList);
 
@@ -62,7 +61,7 @@ function renderSortPickerList({
       await sortPickerList
         .findAll(getDataTestSelector('sort-picker-button'))
         .at(index)
-        .trigger('click');
+        ?.trigger('click');
       await nextTick();
     }
   };
@@ -99,10 +98,11 @@ describe('testing SortPickerList component', () => {
     expect(getSelectedItem().text()).toEqual('offer');
   });
 
-  it('emits the first element of the `items` prop as the provided sort', () => {
+  it('emits the first element of the `items` prop as the provided sort', async () => {
     const { onSelectedSortProvided } = renderSortPickerList();
 
     expect(onSelectedSortProvided).toHaveBeenCalledTimes(1);
+    await nextTick();
     expect(onSelectedSortProvided).toHaveBeenCalledWith({
       eventPayload: 'default',
       // This event gets emitted immediately, before the component has been mounted
@@ -115,7 +115,7 @@ describe('testing SortPickerList component', () => {
     const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button'));
 
     expect(buttons.length).toBeTruthy();
-    buttons.wrappers.forEach(button => {
+    buttons.forEach(button => {
       expect(button.classes('custom-class')).toBeTruthy();
     });
   });
@@ -125,7 +125,7 @@ describe('testing SortPickerList component', () => {
 
     await clickNthItem(1);
 
-    const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button')).wrappers;
+    const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button'));
     expect(buttons[0].element).not.toHaveAttribute('aria-pressed');
     expect(buttons[1].element).toHaveAttribute('aria-pressed', 'true');
   });
@@ -135,13 +135,13 @@ describe('testing SortPickerList component', () => {
 
     await clickNthItem(1);
 
-    const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button')).wrappers;
+    const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button'));
     expect(buttons[0].classes('x-selected')).toBeFalsy();
     expect(buttons[1].classes('x-selected')).toBeTruthy();
   });
 
   describe('slots', () => {
-    it('allows to customize each item using the default slot', () => {
+    it('allows to customize each item using the default slot', async () => {
       const { getSelectedItem } = renderSortPickerList({
         items: ['', 'Price low to high', 'Price high to low'],
         template: `
@@ -152,6 +152,7 @@ describe('testing SortPickerList component', () => {
           </SortPickerList>`
       });
 
+      await nextTick();
       expect(getSelectedItem().text()).toContain('true');
     });
   });
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/spellcheck-button.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/spellcheck-button.spec.ts
index 39cb6cc561..f9e19efa55 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/spellcheck-button.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/spellcheck-button.spec.ts
@@ -1,23 +1,19 @@
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { RootXStoreState } from '../../../../store';
 import { WireMetadata } from '../../../../wiring/wiring.types';
 import SpellcheckButton from '../spellcheck-button.vue';
+import { XPlugin } from '../../../../plugins/x-plugin';
+import { RootXStoreState } from '../../../../store/index';
 import { resetXSearchStateWith } from './utils';
 
 function renderSpellcheckButton({
   template = `<SpellcheckButton />`,
   spellcheckedQuery
-}: RenderSpellcheckButtonOptions = {}): RenderSpellcheckButtonAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+}: RenderSpellcheckButtonOptions = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-
-  resetXSearchStateWith(store, { query: 'coce', spellcheckedQuery });
 
   const wrapper = mount(
     {
@@ -27,11 +23,12 @@ function renderSpellcheckButton({
       template
     },
     {
-      localVue,
-      store
+      global: {
+        plugins: [installNewXPlugin({ store })]
+      }
     }
   );
-
+  resetXSearchStateWith(store, { query: 'coce', spellcheckedQuery });
   return {
     wrapper,
     async click() {
@@ -43,16 +40,16 @@ function renderSpellcheckButton({
 describe('testing SpellcheckButton component', () => {
   it('does not render any content when there is not spellcheckedQuery', () => {
     const { wrapper } = renderSpellcheckButton();
-    expect(wrapper.find(getDataTestSelector('set-spellcheck')).element).not.toBeDefined();
+    expect(wrapper.find('x-spellcheck-button').exists()).toBe(false);
   });
 
-  it('renders the default spellcheck message', () => {
+  it('renders the default spellcheck message', async () => {
     const { wrapper } = renderSpellcheckButton({ spellcheckedQuery: 'coche' });
-
+    await nextTick();
     expect(wrapper.find(getDataTestSelector('set-spellcheck')).text()).toBe('coche');
   });
 
-  it('renders a custom spellcheck message', () => {
+  it('renders a custom spellcheck message', async () => {
     const { wrapper } = renderSpellcheckButton({
       template: `
     <SpellcheckButton>
@@ -65,21 +62,24 @@ describe('testing SpellcheckButton component', () => {
       `,
       spellcheckedQuery: 'coche'
     });
+    await nextTick();
     expect(wrapper.find(getDataTestSelector('set-spellcheck__text')).text()).toBe(
       'Set the Spellcheck as the new query: coche!'
     );
   });
 
   // eslint-disable-next-line max-len
-  it('emits the UserAcceptedAQuery and UserAcceptSpellcheck events when the button is clicked', () => {
+  it('emits the UserAcceptedAQuery and UserAcceptSpellcheck events when the button is clicked', async () => {
     const userAcceptedAQuery = jest.fn();
     const userAcceptSpellcheck = jest.fn();
     const spellcheckedQuery = 'coche';
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { wrapper, click } = renderSpellcheckButton({ spellcheckedQuery });
-    const $x = wrapper.vm.$x;
 
-    $x.on('UserAcceptedAQuery', true).subscribe(userAcceptedAQuery);
-    $x.on('UserAcceptedSpellcheckQuery', true).subscribe(userAcceptSpellcheck);
+    XPlugin.bus.on('UserAcceptedAQuery', true).subscribe(userAcceptedAQuery);
+    XPlugin.bus.on('UserAcceptedSpellcheckQuery', true).subscribe(userAcceptSpellcheck);
+
+    await nextTick();
 
     click();
 
@@ -106,10 +106,3 @@ interface RenderSpellcheckButtonOptions {
   /** The spellcheckedQuery for the state. */
   spellcheckedQuery?: string;
 }
-
-interface RenderSpellcheckButtonAPI {
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-  /** Clicks the button and waits for the view to update. */
-  click: () => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/spellcheck.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/spellcheck.spec.ts
index b23e495a73..6e7483561e 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/spellcheck.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/spellcheck.spec.ts
@@ -1,7 +1,7 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store';
 import Spellcheck from '../spellcheck.vue';
@@ -10,16 +10,8 @@ import { resetXSearchStateWith } from './utils';
 function renderSpellcheck({
   template = `<Spellcheck/>`,
   spellcheckedQuery
-}: RenderSpellcheckOptions = {}): RenderSpellcheckAPI {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+}: RenderSpellcheckOptions = {}) {
   const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-
-  resetXSearchStateWith(store, {
-    query: 'coce',
-    spellcheckedQuery
-  });
 
   const wrapper = mount(
     {
@@ -29,29 +21,35 @@ function renderSpellcheck({
       template
     },
     {
-      localVue,
-      store
+      global: {
+        plugins: [installNewXPlugin({ store })]
+      }
     }
   );
 
+  resetXSearchStateWith(store, {
+    query: 'coce',
+    spellcheckedQuery
+  });
+
   return {
-    wrapper
+    wrapper: wrapper.findComponent(Spellcheck)
   };
 }
 
 describe('testing Spellcheck component', () => {
   it('does not render any content when there is not spellcheckedQuery', () => {
     const { wrapper } = renderSpellcheck();
-    expect(wrapper.find(getDataTestSelector('spellcheck')).element).not.toBeDefined();
+    expect(wrapper.find('.x-spellcheck').exists()).toBe(false);
   });
 
-  it('renders the default spellcheck message', () => {
+  it('renders the default spellcheck message', async () => {
     const { wrapper } = renderSpellcheck({ spellcheckedQuery: 'coche' });
-
-    expect(wrapper.find(getDataTestSelector('spellcheck')).text()).toBe('coce - coche');
+    await nextTick();
+    expect(wrapper.find('.x-spellcheck').text()).toBe('coce - coche');
   });
 
-  it('renders a custom spellcheck message', () => {
+  it('renders a custom spellcheck message', async () => {
     const { wrapper } = renderSpellcheck({
       template: `
       <Spellcheck>
@@ -62,6 +60,7 @@ describe('testing Spellcheck component', () => {
       `,
       spellcheckedQuery: 'coche'
     });
+    await nextTick();
     expect(wrapper.find(getDataTestSelector('spellcheck')).text()).toBe(
       "No results found for 'coce'. We show you results for 'coche'"
     );
@@ -74,8 +73,3 @@ interface RenderSpellcheckOptions {
   /** The spellcheckedQuery for the state. */
   spellcheckedQuery?: string;
 }
-
-interface RenderSpellcheckAPI {
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/banner.vue b/packages/x-components/src/x-modules/search/components/banner.vue
index 8c16b8caa3..96fe91d6b1 100644
--- a/packages/x-components/src/x-modules/search/components/banner.vue
+++ b/packages/x-components/src/x-modules/search/components/banner.vue
@@ -96,16 +96,16 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="css" scoped>
   .x-banner {
     display: flex;
     flex-flow: column nowrap;
     text-decoration: none;
+  }
 
-    &__image {
-      width: 100%;
-      object-fit: contain;
-    }
+  .x-banner__image {
+    width: 100%;
+    object-fit: contain;
   }
 </style>
 
diff --git a/packages/x-components/src/x-modules/search/components/banners-list.vue b/packages/x-components/src/x-modules/search/components/banners-list.vue
index 8c47d943dd..0d1d000173 100644
--- a/packages/x-components/src/x-modules/search/components/banners-list.vue
+++ b/packages/x-components/src/x-modules/search/components/banners-list.vue
@@ -1,23 +1,6 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Customized BannersList layout.
-        @binding {Banner[]} items - Banners plus the injected list items to render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
   import { Banner } from '@empathyco/x-types';
-  import { computed, ComputedRef, defineComponent, inject, isRef, provide, ref, Ref } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, inject, isRef, provide, ref, Ref } from 'vue';
   import ItemsList from '../../../components/items-list.vue';
   import { FeatureLocation } from '../../../types/origin';
   import { ListItem } from '../../../utils/types';
@@ -26,14 +9,12 @@
   import { use$x } from '../../../composables/use-$x';
   import { useState } from '../../../composables/use-state';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { NoElement } from '../../../components/no-element';
 
   /**
-   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by
-   * default using the `ItemsInjectionMixin`.
+   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.
    *
    * The component provides a default slot which wraps the whole component with the `banners`
-   * plus the `searchInjectedItems` which also contains the injected list items from
+   * plus the `injectedListItems` which also contains the injected list items from
    * the ancestor.
    *
    * It also provides the parent slots to customize the items.
@@ -42,48 +23,25 @@
    */
   export default defineComponent({
     name: 'BannersList',
-    components: {
-      ItemsList,
-      NoElement
-    },
     xModule: searchXModule.name,
     props: {
-      /**
-       * Animation component that will be used to animate the banners.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the banners. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       }
     },
-    setup(_, { slots }) {
+    setup(props, { slots }) {
       const $x = use$x();
 
-      /**
-       * The banners to render from the state.
-       *
-       * @public
-       */
+      /** The banners to render from the state. */
       const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners;
 
-      /**
-       * The provided {@link FeatureLocation} for the component.
-       *
-       * @internal
-       */
-      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation | undefined>(
-        'location',
-        undefined
-      );
+      /** The provided {@link FeatureLocation} for the component. */
+      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location');
       const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
 
-      /**
-       * Number of columns the grid is being divided into.
-       *
-       * @internal
-       */
+      /** Number of columns the grid is being divided into. */
       let columnsNumber = ref(0);
 
       /**
@@ -91,8 +49,6 @@
        *
        * @param newColumnsNumber - The new columns value.
        * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
-       *
-       * @internal
        */
       $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {
         if (metadata.location === location) {
@@ -100,12 +56,8 @@
         }
       });
 
-      /**
-       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
-       *
-       * @internal
-       */
-      const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
       /**
        * The `stateItems` concatenated with the `injectedListItems` if there are.
@@ -114,10 +66,8 @@
        * `injectedListItems`.
        *
        * @returns List of {@link ListItem}.
-       *
-       * @internal
        */
-      const items = computed((): ListItem[] => {
+      const items = computed(() => {
         if (!injectedListItems?.value!.length) {
           return stateItems.value;
         }
@@ -152,13 +102,13 @@
        * @remarks It should be overridden in the component that uses the mixin and it's intended to be
        * filled with items from the state. Vue doesn't allow mixins as abstract classes.
        * @returns An empty array as fallback in case it is not overridden.
-       * @internal
        */
       provide(LIST_ITEMS_KEY as string, items);
 
-      return {
-        items,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/search/components/partial-results-list.vue b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
index 7af1027b26..7e80a0f64e 100644
--- a/packages/x-components/src/x-modules/search/components/partial-results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
@@ -84,7 +84,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-partial-results-list {
     display: flex;
     flex-flow: column nowrap;
diff --git a/packages/x-components/src/x-modules/search/components/promoted.vue b/packages/x-components/src/x-modules/search/components/promoted.vue
index a911486852..db709d51f7 100644
--- a/packages/x-components/src/x-modules/search/components/promoted.vue
+++ b/packages/x-components/src/x-modules/search/components/promoted.vue
@@ -57,16 +57,16 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="css" scoped>
   .x-promoted {
     display: flex;
     flex-flow: column nowrap;
     text-decoration: none;
+  }
 
-    &__image {
-      width: 100%;
-      object-fit: contain;
-    }
+  .x-promoted__image {
+    width: 100%;
+    object-fit: contain;
   }
 </style>
 
diff --git a/packages/x-components/src/x-modules/search/components/promoteds-list.vue b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
index 87d66cbfe0..5e1d4c2ba6 100644
--- a/packages/x-components/src/x-modules/search/components/promoteds-list.vue
+++ b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
@@ -1,23 +1,6 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Customized Promoteds List layout.
-        @binding {Promoted[]} items - Promoteds plus the injected list items to render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
   import { Promoted } from '@empathyco/x-types';
-  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';
   import ItemsList from '../../../components/items-list.vue';
   import { ListItem } from '../../../utils/types';
   import { searchXModule } from '../x-module';
@@ -25,55 +8,36 @@
   import { use$x } from '../../../composables/use-$x';
   import { useState } from '../../../composables/use-state';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { NoElement } from '../../../components/no-element';
 
   /**
-   * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default
-   * using the `ItemsInjectionMixin`.
+   * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.
    *
    * The component provides a default slot which wraps the whole component with the `promoteds`
-   * plus the `searchInjectedItems` which also contains the injected list items from
+   * plus the `injectedListItems` which also contains the injected list items from
    * the ancestor.
    *
    * It also provides the parent slots to customize the items.
    *
    * @public
    */
-
   export default defineComponent({
     name: 'PromotedsList',
-    components: {
-      ItemsList,
-      NoElement
-    },
     xModule: searchXModule.name,
     props: {
-      /**
-       * Animation component that will be used to animate the promoteds.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the promoteds. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       }
     },
-    setup(_, { slots }) {
+    setup(props, { slots }) {
       const $x = use$x();
 
-      /**
-       * The promoteds to render from the state.
-       *
-       * @public
-       */
+      /** The promoteds to render from the state. */
       const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;
 
-      /**
-       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
-       *
-       * @internal
-       */
-      const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
       /**
        * The `stateItems` concatenated with the `injectedListItems` if there are.
@@ -82,10 +46,8 @@
        * `injectedListItems`.
        *
        * @returns List of {@link ListItem}.
-       *
-       * @internal
        */
-      const items = computed((): ListItem[] => {
+      const items = computed(() => {
         if (!injectedListItems?.value!.length) {
           return stateItems.value;
         }
@@ -112,13 +74,13 @@
        * @remarks It should be overridden in the component that uses the mixin and it's intended to be
        * filled with items from the state. Vue doesn't allow mixins as abstract classes.
        * @returns An empty array as fallback in case it is not overridden.
-       * @internal
        */
       provide(LIST_ITEMS_KEY as string, items);
 
-      return {
-        items,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/search/components/redirection.vue b/packages/x-components/src/x-modules/search/components/redirection.vue
index c028c3d881..ab2ab0720c 100644
--- a/packages/x-components/src/x-modules/search/components/redirection.vue
+++ b/packages/x-components/src/x-modules/search/components/redirection.vue
@@ -143,8 +143,6 @@
   });
 </script>
 
-<style lang="scss"></style>
-
 <docs lang="mdx">
 ## Events
 
diff --git a/packages/x-components/src/x-modules/search/components/results-list.vue b/packages/x-components/src/x-modules/search/components/results-list.vue
index d0c2258ecc..5e9a6ce306 100644
--- a/packages/x-components/src/x-modules/search/components/results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/results-list.vue
@@ -1,22 +1,5 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Customize ResultsList.
-        @binding {Result[]} items - Results to render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
-  import { computed, ComputedRef, defineComponent, provide, Ref, ref, watch } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';
   import { Result } from '@empathyco/x-types';
   import {
     HAS_MORE_ITEMS_KEY,
@@ -25,12 +8,9 @@
   } from '../../../components/decorators/injection.consts';
   import ItemsList from '../../../components/items-list.vue';
   import { RequestStatus } from '../../../store/utils/status-store.utils';
-  import { infiniteScroll } from '../../../directives';
   import { animationProp } from '../../../utils/options-api';
   import { useState } from '../../../composables/use-state';
   import { searchXModule } from '../x-module';
-  import { useXBus } from '../../../composables/use-x-bus';
-  import { NoElement } from '../../../components/no-element';
 
   /**
    * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -45,71 +25,41 @@
    */
   export default defineComponent({
     name: 'ResultsList',
-    components: {
-      ItemsList,
-      NoElement
-    },
     xModule: searchXModule.name,
-    directives: { 'infinite-scroll': infiniteScroll },
     props: {
-      /**
-       * Animation component that will be used to animate the results.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the results. */
       animation: {
         type: animationProp,
         default: 'ul'
       }
     },
     emits: ['UserReachedResultsListEnd'],
-
-    setup(_, { slots }) {
-      const xBus = useXBus();
-
+    setup(props, { slots }) {
       /**
        * The results to render from the state.
        *
        * @remarks The results list are provided with `items` key. It can be
        * concatenated with list items from components such as `BannersList`, `PromotedsList`,
        * `BaseGrid` or any component that injects the list.
-       *
-       * @public
        */
       const items: ComputedRef<Result[]> = useState('search', ['results']).results;
       provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);
 
-      /**
-       * The total number of results, taken from the state.
-       */
+      /** The total number of results, taken from the state. */
       const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;
 
-      /**
-       * It provides the search query.
-       * This query is updated only when the search request has succeeded.
-       */
+      /** This query is updated only when the search request has succeeded. */
       let providedQuery = ref('');
       provide<Ref<string>>(QUERY_KEY as string, providedQuery);
 
-      /**
-       * Indicates if there are more available results that have not been injected.
-       *
-       * @returns Boolean.
-       * @public
-       */
-      const hasMoreItems = computed(() => {
-        return items.value.length < totalResults.value;
-      });
+      /** Indicates if there are more available results that have not been injected. */
+      const hasMoreItems = computed(() => items.value.length < totalResults.value);
       provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);
 
-      /**
-       * The status of the search request, taken from the state.
-       */
-      const searchStatus: Ref<RequestStatus> = useState('search', ['status']).status;
+      /** The status of the search request, taken from the state. */
+      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;
 
-      /**
-       * The query of the search request, taken from the state.
-       */
+      /** The query of the search request, taken from the state. */
       const searchQuery: ComputedRef<string> = useState('search', ['query']).query;
 
       /**
@@ -118,11 +68,11 @@
        *
        * @param status - The status of the search request.
        */
-      const updateQuery = (status: RequestStatus): void => {
+      function updateQuery(status: RequestStatus) {
         if (status === 'success') {
           providedQuery.value = searchQuery.value;
         }
-      };
+      }
 
       /**
        * Watches the searchStatus and triggers updateQuery as callback
@@ -132,22 +82,10 @@
        */
       watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });
 
-      /**
-       * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.
-       *
-       * @remarks This function is going to be executed when the observer
-       * is fired in {@link infiniteScroll}.
-       *
-       * @internal
-       */
-      const onInfiniteScrollEnd = (): void => {
-        xBus.emit('UserReachedResultsListEnd');
-      };
-
-      return {
-        items,
-        onInfiniteScrollEnd,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/search/components/sort-list.vue b/packages/x-components/src/x-modules/search/components/sort-list.vue
index 7591acf891..40885eec2d 100644
--- a/packages/x-components/src/x-modules/search/components/sort-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-list.vue
@@ -91,7 +91,7 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
   .x-sort-list {
     list-style-type: none;
   }
diff --git a/packages/x-components/src/x-modules/search/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/search/store/__tests__/actions.spec.ts
index d89afad018..4e191ded6d 100644
--- a/packages/x-components/src/x-modules/search/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/search/store/__tests__/actions.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store, StoreOptions } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store, StoreOptions } from 'vuex';
 import { getBannersStub } from '../../../../__stubs__/banners-stubs.factory';
 //eslint-disable-next-line max-len
 import { getEmptySearchResponseStub } from '../../../../__stubs__/empty-search-response-stubs.factory';
@@ -28,14 +28,17 @@ describe('testing search module actions', () => {
 
   const adapter = getMockedAdapter({ search: searchResponseStub });
 
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
   const store: SafeStore<SearchState, SearchGetters, SearchMutations, SearchActions> = new Store(
     searchXStoreModule as unknown as StoreOptions<SearchState>
   );
-  installNewXPlugin({ adapter, store }, localVue);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   beforeEach(() => {
     resetSearchStateWith(store);
diff --git a/packages/x-components/src/x-modules/search/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/search/store/__tests__/getters.spec.ts
index eaa512656f..862da3945b 100644
--- a/packages/x-components/src/x-modules/search/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/search/store/__tests__/getters.spec.ts
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { createRelatedTagStub } from '../../../../__stubs__/index';
 import { SafeStore } from '../../../../store/__tests__/utils';
 import { InternalSearchRequest } from '../../types';
@@ -8,7 +7,6 @@ import { SearchActions, SearchGetters, SearchMutations, SearchState } from '../t
 import { resetSearchStateWith } from './utils';
 
 describe('testing search module getters', () => {
-  Vue.use(Vuex);
   const store: SafeStore<SearchState, SearchGetters, SearchMutations, SearchActions> = new Store(
     searchXStoreModule as any
   );
diff --git a/packages/x-components/src/x-modules/search/store/module.ts b/packages/x-components/src/x-modules/search/store/module.ts
index 1679d1f71d..6281fe371d 100644
--- a/packages/x-components/src/x-modules/search/store/module.ts
+++ b/packages/x-components/src/x-modules/search/store/module.ts
@@ -41,7 +41,7 @@ export const searchXStoreModule: SearchXStoreModule = {
   },
   mutations: {
     appendResults(state, results) {
-      state.results.push(...results);
+      state.results = [...state.results, ...results];
     },
     resetState(state) {
       Object.assign(state, resettableState());
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts
index b7bd09afea..6ebf0c01db 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts
@@ -1,13 +1,14 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils/src/types/utils.types';
+import { nextTick } from 'vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import SemanticQueries from '../semantic-queries.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { createSemanticQuery } from '../../../../__stubs__/semantic-queries-stubs.factory';
+import { semanticQueriesXModule } from '../../x-module';
 import { resetSemanticQueriesStateWith } from './utils';
-
 function renderSemanticQueriesList({
   template = `<SemanticQueries v-bind="$attrs"/>`,
   semanticQueries = [
@@ -17,33 +18,31 @@ function renderSemanticQueriesList({
   threshold = 5,
   maxItemsToRender = 5
 } = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
-
-  installNewXPlugin(
-    {
-      store,
-      xModules: {
-        semanticQueries: { config: { threshold } }
-      }
-    },
-    localVue
-  );
-  resetSemanticQueriesStateWith(store, { semanticQueries });
-
   const wrapper = mount(
     {
       template,
       components: { SemanticQueries }
     },
     {
-      localVue,
-      store,
-      propsData: { maxItemsToRender }
+      global: {
+        plugins: [
+          installNewXPlugin({
+            store,
+            initialXModules: [semanticQueriesXModule],
+            xModules: {
+              semanticQueries: { config: { threshold } }
+            }
+          }),
+          store
+        ]
+      },
+      props: {
+        maxItemsToRender
+      }
     }
   );
-
+  resetSemanticQueriesStateWith(store, { semanticQueries });
   return { wrapper: wrapper.findComponent(SemanticQueries) } as const;
 }
 
@@ -55,30 +54,30 @@ describe('testing SemanticQueries', () => {
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('semanticQueries');
   });
 
-  it('wont render if there are no semantic queries', () => {
+  it('wont render if there are no semantic queries', async () => {
     const { wrapper } = renderSemanticQueriesList({
       semanticQueries: []
     });
-
-    expect(wrapper.html()).toEqual('');
+    await nextTick();
+    expect(wrapper.text()).toEqual('');
   });
 
-  it('renders a list with the semantic queries from the state', () => {
+  it('renders a list with the semantic queries from the state', async () => {
     const { wrapper } = renderSemanticQueriesList({
       semanticQueries: [
         createSemanticQuery({ query: 'test 1' }),
         createSemanticQuery({ query: 'test 2' })
       ]
     });
-
-    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query')).wrappers;
+    await nextTick();
+    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query'));
 
     expect(wrappers).toHaveLength(2);
     expect(wrappers.at(0)?.text()).toEqual('test 1');
     expect(wrappers.at(1)?.text()).toEqual('test 2');
   });
 
-  it('renders up to the maxItemsToRender prop', () => {
+  it('renders up to the maxItemsToRender prop', async () => {
     const { wrapper } = renderSemanticQueriesList({
       semanticQueries: [
         createSemanticQuery({ query: 'test 1' }),
@@ -87,15 +86,15 @@ describe('testing SemanticQueries', () => {
       ],
       maxItemsToRender: 2
     });
-
-    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query')).wrappers;
+    await nextTick();
+    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query'));
 
     expect(wrappers).toHaveLength(2);
     expect(wrappers.at(0)?.text()).toEqual('test 1');
     expect(wrappers.at(1)?.text()).toEqual('test 2');
   });
 
-  it('exposes a slot to overwrite the whole list', () => {
+  it('exposes a slot to overwrite the whole list', async () => {
     const { wrapper } = renderSemanticQueriesList({
       template: `
         <SemanticQueries #default="{ suggestions }">
@@ -113,15 +112,15 @@ describe('testing SemanticQueries', () => {
         createSemanticQuery({ query: 'test 2', distance: 1 })
       ]
     });
-
-    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query')).wrappers;
+    await nextTick();
+    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query'));
 
     expect(wrappers).toHaveLength(2);
     expect(wrappers.at(0)?.text()).toEqual('test 1 - 1');
     expect(wrappers.at(1)?.text()).toEqual('test 2 - 1');
   });
 
-  it('exposes an array of queries and a method to find the semantic query in its default slot', () => {
+  it('exposes an array of queries and a method to find the semantic query in its default slot', async () => {
     const { wrapper } = renderSemanticQueriesList({
       template: `
         <SemanticQueries #default="{ queries, findSemanticQuery }">
@@ -133,12 +132,12 @@ describe('testing SemanticQueries', () => {
       `,
       semanticQueries: [createSemanticQuery({ query: 'test', distance: 2 })]
     });
-
+    await nextTick();
     expect(wrapper.find(getDataTestSelector('string-query')).text()).toEqual('test');
     expect(wrapper.find(getDataTestSelector('model-query')).text()).toEqual('SemanticQuery');
   });
 
-  it('exposes a slot to overwrite the suggestion', () => {
+  it('exposes a slot to overwrite the suggestion', async () => {
     const { wrapper } = renderSemanticQueriesList({
       template: `
         <SemanticQueries #suggestion="{ suggestion }">
@@ -151,15 +150,15 @@ describe('testing SemanticQueries', () => {
         createSemanticQuery({ query: 'test 2', distance: 2 })
       ]
     });
-
-    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query-item-content')).wrappers;
+    await nextTick();
+    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query-item-content'));
 
     expect(wrappers).toHaveLength(2);
     expect(wrappers.at(0)?.text()).toEqual('test 1 - 1');
     expect(wrappers.at(1)?.text()).toEqual('test 2 - 2');
   });
 
-  it('exposes a slot to overwrite the suggestion content', () => {
+  it('exposes a slot to overwrite the suggestion content', async () => {
     const { wrapper } = renderSemanticQueriesList({
       template: `
         <SemanticQueries #suggestion-content="{ suggestion }">
@@ -172,8 +171,8 @@ describe('testing SemanticQueries', () => {
         createSemanticQuery({ query: 'test 2', distance: 2 })
       ]
     });
-
-    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query-item-content')).wrappers;
+    await nextTick();
+    const wrappers = wrapper.findAll(getDataTestSelector('semantic-query-item-content'));
 
     expect(wrappers).toHaveLength(2);
     expect(wrappers.at(0)?.text()).toEqual('test 1 - 1');
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts
index ce880abc8b..bfde979680 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts
@@ -1,6 +1,7 @@
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
+import { nextTick } from 'vue';
 import SemanticQuery from '../semantic-query.vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/index';
 import { createSemanticQuery } from '../../../../__stubs__/index';
@@ -15,24 +16,21 @@ function renderSemanticQuery({
   suggestion = createSemanticQuery({ query: 'jeans' }),
   query = ''
 } = {}) {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  installNewXPlugin({ store, initialXModules: [semanticQueriesXModule] }, localVue);
-  resetSemanticQueriesStateWith(store, { query });
-
   const wrapper = mount(
     {
       template,
       components: { SemanticQuery }
     },
     {
-      localVue,
-      store,
+      global: {
+        plugins: [store, installNewXPlugin({ store, initialXModules: [semanticQueriesXModule] })]
+      },
       data: () => ({ suggestion })
     }
   );
+  resetSemanticQueriesStateWith(store, { query });
 
   return {
     wrapper: wrapper.findComponent(SemanticQuery),
@@ -59,7 +57,7 @@ describe('semantic queries component', () => {
     );
   });
 
-  it('allows overriding its content with a slot', () => {
+  it('allows overriding its content with a slot', async () => {
     const { wrapper } = renderSemanticQuery({
       template: `
         <SemanticQuery :suggestion="suggestion" #default="{ suggestion, query }">
@@ -69,7 +67,7 @@ describe('semantic queries component', () => {
       suggestion: createSemanticQuery({ query: 'blazer' }),
       query: 'jacket'
     });
-
+    await nextTick();
     expect(wrapper.get(getDataTestSelector('state-query')).text()).toEqual('jacket');
     expect(wrapper.get(getDataTestSelector('semantic-query-content')).text()).toEqual('blazer');
   });
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue b/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
index b2f345b75b..8032eefcd9 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
+++ b/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
@@ -1,52 +1,34 @@
 <template>
-  <NoElement v-if="suggestions.length">
-    <!-- eslint-disable max-len -->
+  <BaseSuggestions
+    v-if="suggestions.length"
+    class="x-semantic-queries"
+    :suggestions="suggestions"
+    #default="baseSuggestionsScope"
+  >
     <!--
       @slot Semantic Query content
-        @binding {string[]} queries - SemanticQueries mapped to strings
-        @binding {SemanticQuery[]} suggestions - The SemanticQueries
-        @binding {(query: string) => SemanticQuery} findSemanticQuery - Method to find a semantic query given a query
+      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind
+        BaseSuggestion bindings
     -->
-    <!-- eslint-enable max-len -->
-    <slot name="default" v-bind="{ queries, suggestions, findSemanticQuery }">
-      <BaseSuggestions
-        v-bind="$attrs"
-        class="x-semantic-queries"
-        :suggestions="suggestions"
-        #default="baseSuggestionsScope"
-      >
-        <!-- eslint-disable max-len -->
+    <slot name="suggestion" v-bind="baseSuggestionsScope">
+      <SemanticQuery :suggestion="baseSuggestionsScope.suggestion" #default="baseSuggestionScope">
         <!--
           @slot Semantic Query content
-              @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind BaseSuggestion bindings
+          @binding {{suggestion: object - Suggestion data, query: string - The query that the
+            suggestion belongs to}} v-bind SemanticQuery bindings
         -->
-        <!-- eslint-enable max-len -->
-        <slot name="suggestion" v-bind="baseSuggestionsScope">
-          <SemanticQuery
-            :suggestion="baseSuggestionsScope.suggestion"
-            #default="baseSuggestionScope"
-          >
-            <!-- eslint-disable max-len -->
-            <!--
-              @slot Semantic Query content
-                  @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind SemanticQuery bindings
-            -->
-            <!-- eslint-enable max-len -->
-            <slot name="suggestion-content" v-bind="baseSuggestionScope" />
-          </SemanticQuery>
-        </slot>
-      </BaseSuggestions>
+        <slot name="suggestion-content" v-bind="baseSuggestionScope" />
+      </SemanticQuery>
     </slot>
-  </NoElement>
+  </BaseSuggestions>
 </template>
 
 <script lang="ts">
   import { computed, ComputedRef, defineComponent } from 'vue';
-  import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';
+  import { Suggestion } from '@empathyco/x-types';
   import { semanticQueriesXModule } from '../x-module';
-  import { NoElement } from '../../../components/no-element';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { useState } from '../../../composables/use-state';
+  import { useState } from '../../../composables';
   import SemanticQuery from './semantic-query.vue';
 
   /**
@@ -57,11 +39,10 @@
   export default defineComponent({
     name: 'SemanticQueries',
     xModule: semanticQueriesXModule.name,
-    components: { BaseSuggestions, NoElement, SemanticQuery },
-    inheritAttrs: false,
-    setup() {
+    components: { BaseSuggestions, SemanticQuery },
+    setup(_, { slots }) {
       /** The semantic queries from the state. */
-      const suggestions: ComputedRef<SemanticQueryModel[]> = useState('semanticQueries', [
+      const suggestions: ComputedRef<Suggestion[]> = useState('semanticQueries', [
         'semanticQueries'
       ]).semanticQueries;
 
@@ -72,15 +53,39 @@
       const queries = computed(() => suggestions.value.map(suggestion => suggestion.query));
 
       /**
-       * Finds a {@link @empathyco/x-types#SemanticQuery} given a query.
+       * Finds a {@link @empathyco/x-types#Suggestion} given a query.
        *
        * @param query - The query to search.
-       * @returns The {@link @empathyco/x-types#SemanticQuery} or undefined if not found.
+       * @returns The {@link @empathyco/x-types#Suggestion} or undefined if not found.
        */
-      const findSemanticQuery = (query: string) =>
-        suggestions.value.find(suggestion => suggestion.query === query);
+      function findSemanticQuery(query: string) {
+        return suggestions.value.find(suggestion => suggestion.query === query);
+      }
 
-      return { suggestions, queries, findSemanticQuery };
+      /**
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no suggestions, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `default` slot or empty string if there are
+       * no suggestions.
+       */
+      function renderDefaultSlot() {
+        const slotProps = {
+          suggestions: suggestions.value,
+          queries: queries.value,
+          findSemanticQuery
+        };
+        return suggestions.value.length ? slots.default?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { suggestions };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/semantic-queries/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/semantic-queries/store/__tests__/actions.spec.ts
index 3abf05ce79..9cfe57b61a 100644
--- a/packages/x-components/src/x-modules/semantic-queries/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/store/__tests__/actions.spec.ts
@@ -1,6 +1,6 @@
 import { SemanticQueriesRequest } from '@empathyco/x-types';
-import Vuex, { Store } from 'vuex';
-import { createLocalVue } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
 import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
 import { getSemanticQueriesStub } from '../../../../__stubs__/semantic-queries-stubs.factory';
 import { SafeStore } from '../../../../store/__tests__/utils';
@@ -20,9 +20,6 @@ describe('semantic queries actions tests', () => {
     semanticQueries: semanticQueriesStub
   });
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store: SafeStore<
     SemanticQueriesState,
     SemanticQueriesGetters,
@@ -30,7 +27,14 @@ describe('semantic queries actions tests', () => {
     SemanticQueriesActions
   > = new Store(semanticQueriesXStoreModule as any);
 
-  installNewXPlugin({ adapter, store }, localVue);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
 
   beforeEach(() => {
     resetSemanticQueriesStateWith(store);
diff --git a/packages/x-components/src/x-modules/semantic-queries/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/semantic-queries/store/__tests__/getters.spec.ts
index b3fd510a43..d7d6b6652e 100644
--- a/packages/x-components/src/x-modules/semantic-queries/store/__tests__/getters.spec.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/store/__tests__/getters.spec.ts
@@ -1,11 +1,9 @@
-import Vuex, { Store } from 'vuex';
-import Vue from 'vue';
+import { Store } from 'vuex';
 import { SemanticQueriesState } from '../types';
 import { semanticQueriesXStoreModule } from '../module';
 import { resetSemanticQueriesStateWith } from './utils';
 
 describe('semantic queries getters tests', () => {
-  Vue.use(Vuex);
   const store: Store<SemanticQueriesState> = new Store(semanticQueriesXStoreModule as any);
 
   describe('request getter', () => {
diff --git a/packages/x-components/src/x-modules/tagging/components/__tests__/tagging.spec.ts b/packages/x-components/src/x-modules/tagging/components/__tests__/tagging.spec.ts
index c998f4ac70..4e4b87f03d 100644
--- a/packages/x-components/src/x-modules/tagging/components/__tests__/tagging.spec.ts
+++ b/packages/x-components/src/x-modules/tagging/components/__tests__/tagging.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import { reactive, nextTick } from 'vue';
 import { Dictionary } from '@empathyco/x-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
@@ -25,8 +25,7 @@ function renderTagging({
   clickedResultStorageKey,
   productId
 }: RenderTaggingOptions = {}) {
-  const [, localVue] = installNewXPlugin();
-  const snippetConfig = Vue.observable({
+  const snippetConfig = reactive({
     ...baseSnippetConfig,
     consent: snippetConsent,
     productId
@@ -48,18 +47,18 @@ function renderTagging({
       template
     },
     {
+      global: { plugins: [installNewXPlugin()] },
       provide: {
         snippetConfig
       },
-      propsData: {
+      props: {
         consent,
         queryTaggingDebounceMs,
         sessionTTLMs,
         snippetConfig,
         clickedResultStorageTTLMs,
         clickedResultStorageKey
-      },
-      localVue
+      }
     }
   );
 
@@ -74,7 +73,7 @@ function renderTagging({
 
   function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
     Object.assign(snippetConfig, newValue);
-    return localVue.nextTick();
+    return nextTick();
   }
 
   return {
@@ -88,7 +87,8 @@ function renderTagging({
 
 const defaultTaggingConfig: Partial<TaggingConfig> = {
   clickedResultStorageTTLMs: 30000,
-  clickedResultStorageKey: 'url'
+  clickedResultStorageKey: 'url',
+  queryTaggingDebounceMs: 2000
 };
 
 const stubTagginMetadata: WireMetadata = {
diff --git a/packages/x-components/src/x-modules/tagging/components/tagging.vue b/packages/x-components/src/x-modules/tagging/components/tagging.vue
index 1600fe65fd..91872ab89c 100644
--- a/packages/x-components/src/x-modules/tagging/components/tagging.vue
+++ b/packages/x-components/src/x-modules/tagging/components/tagging.vue
@@ -37,11 +37,17 @@
       /**
        * The debounce time in milliseconds to track the query.
        */
-      queryTaggingDebounceMs: Number,
+      queryTaggingDebounceMs: {
+        type: Number,
+        default: 2000
+      },
       /**
        * The consent to be emitted.
        */
-      consent: Boolean
+      consent: {
+        type: Boolean,
+        default: null
+      }
     },
     setup(props) {
       const xBus = useXBus();
@@ -67,7 +73,7 @@
        */
       const taggingConfig = computed<TaggingConfig>(() => {
         return {
-          queryTaggingDebounceMs: props.queryTaggingDebounceMs as number,
+          queryTaggingDebounceMs: props.queryTaggingDebounceMs,
           sessionTTLMs: props.sessionTTLMs as number,
           clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,
           clickedResultStorageKey: props.clickedResultStorageKey
diff --git a/packages/x-components/src/x-modules/tagging/service/__tests__/pdp-add-to-cart.service.spec.ts b/packages/x-components/src/x-modules/tagging/service/__tests__/pdp-add-to-cart.service.spec.ts
index ebdc764851..4211aa53a5 100644
--- a/packages/x-components/src/x-modules/tagging/service/__tests__/pdp-add-to-cart.service.spec.ts
+++ b/packages/x-components/src/x-modules/tagging/service/__tests__/pdp-add-to-cart.service.spec.ts
@@ -1,5 +1,6 @@
 import { InMemoryStorageService } from '@empathyco/x-storage-service';
 import { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
 import { DefaultPDPAddToCartService } from '../pdp-add-to-cart.service';
 import { XPlugin } from '../../../../plugins/index';
 import { installNewXPlugin } from '../../../../__tests__/utils';
@@ -17,8 +18,10 @@ interface PDPAddToCartServiceTestAPI {
 
 function preparePDPAddToCartService(): PDPAddToCartServiceTestAPI {
   XPlugin.resetInstance();
-  installNewXPlugin();
   XPlugin.registerXModule(taggingXModule);
+  const plugin = installNewXPlugin();
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  mount({}, { global: { plugins: [plugin] } });
 
   const store = XPlugin.store;
   const localStorageService = new InMemoryStorageService();
diff --git a/packages/x-components/src/x-modules/tagging/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/tagging/store/__tests__/actions.spec.ts
index 79692bef86..0b7958f328 100644
--- a/packages/x-components/src/x-modules/tagging/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/tagging/store/__tests__/actions.spec.ts
@@ -1,6 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { Store } from 'vuex';
 import { TaggingRequest } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
 import { getTaggingResponseStub } from '../../../../__stubs__/tagging-response-stubs.factory';
 import { XComponentsAdapterDummy } from '../../../../__tests__/adapter.dummy';
 import { installNewXPlugin } from '../../../../__tests__/utils';
@@ -12,9 +12,6 @@ import { resetTaggingStateWith } from './utils';
 describe('testing tagging module actions', () => {
   const queryTagging = getTaggingResponseStub();
   const adapter = XComponentsAdapterDummy;
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
 
   const selfSpy = jest.spyOn(self, 'self', 'get') as jest.SpyInstance<{
     crypto: { randomUUID: () => string };
@@ -28,7 +25,9 @@ describe('testing tagging module actions', () => {
 
   const store: SafeStore<TaggingState, TaggingGetters, TaggingMutations, TaggingActions> =
     new Store(taggingXStoreModule as any);
-  installNewXPlugin({ adapter, store }, localVue);
+  const plugin = installNewXPlugin({ adapter, store });
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  mount({}, { global: { plugins: [plugin] } });
 
   beforeEach(() => {
     resetTaggingStateWith(store);
diff --git a/packages/x-components/src/x-modules/url/components/__tests__/url-handler.spec.ts b/packages/x-components/src/x-modules/url/components/__tests__/url-handler.spec.ts
index 0fe191d0ef..9c1d848617 100644
--- a/packages/x-components/src/x-modules/url/components/__tests__/url-handler.spec.ts
+++ b/packages/x-components/src/x-modules/url/components/__tests__/url-handler.spec.ts
@@ -1,22 +1,27 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components';
-import { XComponentBusAPI } from '../../../../plugins/x-plugin.types';
-import { UrlParams } from '../../../../types/url-params';
+import { XPlugin } from '../../../../plugins';
+import { UrlParams } from '../../../../types';
 import { baseSnippetConfig } from '../../../../views/base-config';
-import { WireMetadata } from '../../../../wiring/wiring.types';
+import { WireMetadata } from '../../../../wiring';
 import { initialUrlState } from '../../store/initial-state';
-import { urlXModule } from '../../x-module';
 import UrlHandler from '../url-handler.vue';
 
 // Mock the window.performance.getEntriesByType function used to get the location. The location is
 // tested in an E2E test as navigation between different pages is needed.
-Object.defineProperty(window, 'performance', {
-  value: {
-    getEntriesByType: jest.fn().mockReturnValue([])
-  }
-});
+window.performance.getEntriesByType = jest.fn().mockReturnValue([]);
+
+function setUrlParams(urlParams: string) {
+  const newUrl = new URL(window.location.href);
+  newUrl.search = urlParams;
+  window.history.replaceState(history.state, 'test', newUrl.href);
+}
+
+function popstateUrlWithParams(urlParams: string) {
+  setUrlParams(urlParams);
+  window.dispatchEvent(new Event('popstate'));
+}
 
 /**
  * Renders the {@link UrlHandler} component, exposing a basic API for testing.
@@ -24,63 +29,46 @@ Object.defineProperty(window, 'performance', {
  * @param options - The options to render the component with.
  * @returns The API for testing the {@link UrlHandler} component.
  */
-function renderUrlHandler({
-  template = `<UrlHandler />`,
-  urlParams = ''
-}: UrlHandlerOptions = {}): UrlHandlerAPI {
-  const [, localVue] = installNewXPlugin({ initialXModules: [urlXModule] });
+function renderUrlHandler({ template = `<UrlHandler />`, urlParams = '' } = {}) {
   setUrlParams(urlParams);
+
   const wrapperTemplate = mount(
     {
       template,
-      components: { UrlHandler },
-      provide: {
-        snippetConfig: {
-          ...baseSnippetConfig
-        }
-      }
+      components: { UrlHandler }
     },
-    { localVue }
+    {
+      global: {
+        plugins: [installNewXPlugin({})],
+        provide: { snippetConfig: { ...baseSnippetConfig } }
+      }
+    }
   );
-  const wrapper = wrapperTemplate.findComponent(UrlHandler);
-
-  function setUrlParams(urlParams: string): void {
-    const newUrl = new URL(window.location.href);
-    newUrl.search = urlParams;
-    window.history.replaceState(history.state, 'test', newUrl.href);
-  }
-
-  function popstateUrlWithParams(urlParams: string): void {
-    setUrlParams(urlParams);
-    window.dispatchEvent(new Event('popstate'));
-  }
 
   return {
-    wrapper,
-    on: wrapperTemplate.vm.$x.on.bind(wrapperTemplate.vm.$x),
-    emit: wrapperTemplate.vm.$x.emit.bind(wrapperTemplate.vm.$x),
+    wrapper: wrapperTemplate.findComponent(UrlHandler),
     popstateUrlWithParams,
-    getCurrentUrlParams(): URLSearchParams {
-      return new URL(window.location.href).searchParams;
-    }
+    getCurrentUrlParams: () => new URL(window.location.href).searchParams
   };
 }
 
 describe('testing UrlHandler component', () => {
   it('is an XComponent which has an XModule', () => {
     const { wrapper } = renderUrlHandler();
+
     expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('url');
   });
 
   it('emits the `ParamsLoadedFromUrl` when the component is created', () => {
-    const { on } = renderUrlHandler({
+    renderUrlHandler({
       urlParams: 'query=lego&page=2&tag=marvel&sort=price desc&scroll=333&filter=brand:lego'
     });
-    const eventSpy = jest.fn();
-    on('ParamsLoadedFromUrl', true).subscribe(eventSpy);
 
-    expect(eventSpy).toHaveBeenNthCalledWith(1, {
+    const listener = jest.fn();
+    XPlugin.bus.on('ParamsLoadedFromUrl', true).subscribe(listener);
+
+    expect(listener).toHaveBeenNthCalledWith(1, {
       eventPayload: {
         query: 'lego',
         page: 2,
@@ -96,9 +84,10 @@ describe('testing UrlHandler component', () => {
   });
 
   it('emits the `ParamsLoadedFromUrl` when the browser history is navigated', () => {
-    const { on, popstateUrlWithParams } = renderUrlHandler();
-    const eventSpy = jest.fn();
-    on('ParamsLoadedFromUrl').subscribe(eventSpy);
+    const { popstateUrlWithParams } = renderUrlHandler();
+
+    const listener = jest.fn();
+    XPlugin.bus.on('ParamsLoadedFromUrl').subscribe(listener);
 
     popstateUrlWithParams(
       'query=lego&page=2&tag=marvel&sort=price desc&scroll=333&filter=brand:lego'
@@ -108,7 +97,7 @@ describe('testing UrlHandler component', () => {
         '&sort=price asc&scroll=444&filter=brand:playmobil'
     );
 
-    expect(eventSpy).toHaveBeenNthCalledWith(2, {
+    expect(listener).toHaveBeenNthCalledWith(2, {
       query: 'lego',
       page: 2,
       filter: ['brand:lego'],
@@ -117,7 +106,7 @@ describe('testing UrlHandler component', () => {
       tag: ['marvel']
     } as UrlParams);
 
-    expect(eventSpy).toHaveBeenNthCalledWith(3, {
+    expect(listener).toHaveBeenNthCalledWith(3, {
       query: 'playmobil',
       page: 3,
       filter: ['brand:playmobil'],
@@ -126,21 +115,23 @@ describe('testing UrlHandler component', () => {
       tag: ['harry potter']
     } as UrlParams);
   });
+
   it('emits the `ParamsLoadedFromUrl` initial state values for not present params', () => {
-    const { on, popstateUrlWithParams } = renderUrlHandler();
-    const eventSpy = jest.fn();
-    on('ParamsLoadedFromUrl').subscribe(eventSpy);
+    const { popstateUrlWithParams } = renderUrlHandler();
+
+    const listener = jest.fn();
+    XPlugin.bus.on('ParamsLoadedFromUrl').subscribe(listener);
 
     popstateUrlWithParams('query=lego&page=2');
     popstateUrlWithParams('query=playmobil&page=3');
 
-    expect(eventSpy).toHaveBeenNthCalledWith(2, {
+    expect(listener).toHaveBeenNthCalledWith(2, {
       ...initialUrlState,
       query: 'lego',
       page: 2
     } as UrlParams);
 
-    expect(eventSpy).toHaveBeenNthCalledWith(3, {
+    expect(listener).toHaveBeenNthCalledWith(3, {
       ...initialUrlState,
       query: 'playmobil',
       page: 3
@@ -148,14 +139,15 @@ describe('testing UrlHandler component', () => {
   });
 
   it('ignores `extra params` that are not configured in the component', () => {
-    const { on } = renderUrlHandler({
+    renderUrlHandler({
       template: '<UrlHandler store="store" />',
       urlParams: 'query=lego&page=2&warehouse=111&store=222'
     });
-    const eventSpy = jest.fn();
-    on('ParamsLoadedFromUrl').subscribe(eventSpy);
 
-    expect(eventSpy).toHaveBeenNthCalledWith(1, {
+    const listener = jest.fn();
+    XPlugin.bus.on('ParamsLoadedFromUrl').subscribe(listener);
+
+    expect(listener).toHaveBeenNthCalledWith(1, {
       ...initialUrlState,
       query: 'lego',
       page: 2,
@@ -164,14 +156,15 @@ describe('testing UrlHandler component', () => {
   });
 
   it('allows to configure the URL keys names', () => {
-    const { on } = renderUrlHandler({
+    renderUrlHandler({
       template: '<UrlHandler query="q" page="p" />',
       urlParams: 'q=lego&p=2'
     });
-    const eventSpy = jest.fn();
-    on('ParamsLoadedFromUrl').subscribe(eventSpy);
 
-    expect(eventSpy).toHaveBeenNthCalledWith(1, {
+    const listener = jest.fn();
+    XPlugin.bus.on('ParamsLoadedFromUrl').subscribe(listener);
+
+    expect(listener).toHaveBeenNthCalledWith(1, {
       ...initialUrlState,
       query: 'lego',
       page: 2
@@ -179,18 +172,19 @@ describe('testing UrlHandler component', () => {
   });
 
   it('changes the URL params when `PushableUrlStateUpdated` is emitted', () => {
-    const { emit, getCurrentUrlParams } = renderUrlHandler({
+    const { getCurrentUrlParams } = renderUrlHandler({
       template: '<UrlHandler store="store" />'
     });
-    emit('PushableUrlStateUpdated', {
+
+    XPlugin.bus.emit('PushableUrlStateUpdated', {
       ...initialUrlState,
       query: 'lego',
       page: 2,
       store: '111',
       warehouse: '222'
     });
-    const urlSearchParams = getCurrentUrlParams();
 
+    const urlSearchParams = getCurrentUrlParams();
     expect(urlSearchParams.get('query')).toEqual('lego');
     expect(urlSearchParams.get('page')).toEqual('2');
     expect(urlSearchParams.get('store')).toEqual('111');
@@ -198,18 +192,19 @@ describe('testing UrlHandler component', () => {
   });
 
   it('changes the URL params when `ReplaceableUrlStateUpdated` is emitted', () => {
-    const { emit, getCurrentUrlParams } = renderUrlHandler({
+    const { getCurrentUrlParams } = renderUrlHandler({
       template: '<UrlHandler store="store" />'
     });
-    emit('ReplaceableUrlStateUpdated', {
+
+    XPlugin.bus.emit('ReplaceableUrlStateUpdated', {
       ...initialUrlState,
       query: 'lego',
       page: 2,
       store: '111',
       warehouse: '222'
     });
-    const urlSearchParams = getCurrentUrlParams();
 
+    const urlSearchParams = getCurrentUrlParams();
     expect(urlSearchParams.get('query')).toEqual('lego');
     expect(urlSearchParams.get('page')).toEqual('2');
     expect(urlSearchParams.get('store')).toEqual('111');
@@ -217,25 +212,29 @@ describe('testing UrlHandler component', () => {
   });
 
   it('normalizes + characters into %20 for spaces when updating the url', () => {
-    const { emit } = renderUrlHandler({
+    renderUrlHandler({
       template: '<UrlHandler store="store" />'
     });
-    emit('PushableUrlStateUpdated', {
+
+    XPlugin.bus.emit('PushableUrlStateUpdated', {
       ...initialUrlState,
       query: 'lego city'
     });
+
     expect(window.location.href).toContain('query=lego%20city');
 
-    emit('ReplaceableUrlStateUpdated', {
+    XPlugin.bus.emit('ReplaceableUrlStateUpdated', {
       ...initialUrlState,
       query: 'lego farm'
     });
+
     expect(window.location.href).toContain('query=lego%20farm');
   });
 
   it('ignores all parameters if query is not provided', () => {
-    const { emit } = renderUrlHandler();
-    emit('PushableUrlStateUpdated', {
+    renderUrlHandler();
+
+    XPlugin.bus.emit('PushableUrlStateUpdated', {
       page: 2,
       filter: ['dry-aged:2-months'],
       sort: 'price desc',
@@ -247,29 +246,3 @@ describe('testing UrlHandler component', () => {
     expect(new URL(window.location.href).searchParams.toString()).toEqual('');
   });
 });
-
-interface UrlHandlerAPI {
-  /** Test wrapper of the {@link UrlHandler} instance. */
-  wrapper: Wrapper<Vue>;
-  /** The {@link XComponentBusAPI.on} method to subscribe events. */
-  on: XComponentBusAPI['on'];
-  /** The {@link XComponentBusAPI.emit} method to emit events. */
-  emit: XComponentBusAPI['emit'];
-  /**
-   * Changes the current URL params with the passed as parameter.
-   *
-   * @param urlParams - The URL params in format string: `query=lego&page=1&scroll=100`.
-   */
-  popstateUrlWithParams: (urlParams: string) => void;
-  /**
-   * Returns the current {@link URLSearchParams}.
-   */
-  getCurrentUrlParams: () => URLSearchParams;
-}
-
-interface UrlHandlerOptions {
-  /** The template to render. Receives the `params` via prop. */
-  template?: string;
-  /** The URL params to set in URL. */
-  urlParams?: string;
-}
diff --git a/packages/x-components/src/x-modules/url/components/url-handler.vue b/packages/x-components/src/x-modules/url/components/url-handler.vue
index 17b7738eb7..c5aa0bd150 100644
--- a/packages/x-components/src/x-modules/url/components/url-handler.vue
+++ b/packages/x-components/src/x-modules/url/components/url-handler.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
   import { Dictionary, objectFilter } from '@empathyco/x-utils';
   import { computed, defineComponent, inject, onMounted, ref } from 'vue';
-  import GlobalEvents from 'vue-global-events';
+  import { GlobalEvents } from 'vue-global-events';
   import { FeatureLocation } from '../../../types/origin';
   import { UrlParams } from '../../../types/url-params';
   import { isArrayEmpty } from '../../../utils/array';
diff --git a/packages/x-components/src/x-modules/url/store/__tests__/utils.ts b/packages/x-components/src/x-modules/url/store/__tests__/utils.ts
index e68a8c5e66..dd39d10aa6 100644
--- a/packages/x-components/src/x-modules/url/store/__tests__/utils.ts
+++ b/packages/x-components/src/x-modules/url/store/__tests__/utils.ts
@@ -1,6 +1,5 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import Vuex, { Store } from 'vuex';
-import { createLocalVue } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { resetStoreModuleState } from '../../../../__tests__/utils';
 import { urlXStoreModule } from '../module';
 import { UrlState } from '../types';
@@ -27,13 +26,8 @@ export function resetUrlStateWith(store: Store<UrlState>, state?: DeepPartial<Ur
  * @internal
  */
 export function createUrlStore(state?: Partial<UrlState>): Store<UrlState> {
-  const localVue = createLocalVue();
-  localVue.config.productionTip = false; // Silent production console messages.
-  localVue.use(Vuex);
-
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   const store = new Store<UrlState>(urlXStoreModule as any);
-
   resetUrlStateWith(store, state);
-
   return store;
 }
diff --git a/packages/x-components/src/x-modules/url/store/mutations/set-params.mutation.ts b/packages/x-components/src/x-modules/url/store/mutations/set-params.mutation.ts
index bd3f242a81..2316f81ff3 100644
--- a/packages/x-components/src/x-modules/url/store/mutations/set-params.mutation.ts
+++ b/packages/x-components/src/x-modules/url/store/mutations/set-params.mutation.ts
@@ -1,5 +1,4 @@
 import { forEach } from '@empathyco/x-utils';
-import Vue from 'vue';
 import { UrlXStoreModule } from '../types';
 
 /**
@@ -14,6 +13,6 @@ import { UrlXStoreModule } from '../types';
  */
 export const setParams: UrlXStoreModule['mutations']['setParams'] = (state, params) => {
   forEach(params, (key, value) => {
-    Vue.set(state, key, value);
+    state[key] = value;
   });
 };
diff --git a/packages/x-components/tests/.eslintrc.js b/packages/x-components/tests/.eslintrc.js
index 9d103c631a..36a7068c18 100644
--- a/packages/x-components/tests/.eslintrc.js
+++ b/packages/x-components/tests/.eslintrc.js
@@ -1,6 +1,9 @@
 module.exports = {
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: './tsconfig.eslint.json'
+    project: './tsconfig.json'
+  },
+  rules: {
+    'jsdoc/require-jsdoc': 'off'
   }
 };
diff --git a/packages/x-components/tests/e2e/common/common-steps.spec.ts b/packages/x-components/tests/e2e/common/common-steps.spec.ts
index 52a26aace0..25c6c5bbd8 100644
--- a/packages/x-components/tests/e2e/common/common-steps.spec.ts
+++ b/packages/x-components/tests/e2e/common/common-steps.spec.ts
@@ -154,12 +154,9 @@ Then('related tags are displayed', () => {
 
 // Related Tags
 When('related tag number {int} is clicked', (relatedTagItem: number) => {
-  cy.getByDataTest('related-tag')
-    .should('have.length.gt', relatedTagItem)
-    .eq(relatedTagItem)
-    .click()
-    .invoke('text')
-    .as('clickedRelatedTag');
+  cy.getByDataTest('related-tag').should('have.length.gt', relatedTagItem);
+
+  cy.getByDataTest('related-tag').eq(relatedTagItem).click().invoke('text').as('clickedRelatedTag');
 });
 
 // Results
@@ -191,7 +188,11 @@ Then('related results have changed', () => {
 
 // Scroll
 When('scrolling down to result {string}', (resultId: string) => {
-  cy.get(`[data-scroll=${resultId}]`).scrollIntoView({ easing: 'swing', duration: 1000 });
+  cy.get(`[data-scroll=${resultId}]`).scrollIntoView({
+    offset: { top: 500, left: 0 },
+    easing: 'swing',
+    duration: 1000
+  });
 });
 
 // Search Box
diff --git a/packages/x-components/tests/e2e/scroll.feature b/packages/x-components/tests/e2e/scroll.feature
index f6258b270a..48a2a10cb0 100644
--- a/packages/x-components/tests/e2e/scroll.feature
+++ b/packages/x-components/tests/e2e/scroll.feature
@@ -6,8 +6,6 @@ Feature: Scroll component
     And   a tracking API
     And   no special config for layout view
 
-  # TODO: Enable test after reviewing it
-  @skip
   Scenario Outline: 1. Scroll is kept in the URL
     When  start button is clicked
     Then  empathize should be visible
@@ -103,3 +101,24 @@ Feature: Scroll component
     Examples:
       | query1 | resultId  | store |
       | lego   | result-12 | Italy |
+
+  Scenario Outline: 7. Scroll direction is updated properly
+    When  start button is clicked
+    Then  empathize should be visible
+    When  "<query1>" is searched
+    Then  related results are displayed
+    When  scrolling to bottom
+    Then  scroll direction is DOWN
+    When  scrolling to top
+    Then  scroll direction is UP
+    When  scrolling down to result "<resultId>"
+    And   the page is reloaded
+    Then  related results are displayed
+    When  scrolling to bottom
+    Then  scroll direction is DOWN
+    When  scrolling to top
+    Then  scroll direction is UP
+
+    Examples:
+      | query1 | resultId  |
+      | lego   | result-8 |
diff --git a/packages/x-components/tests/e2e/scroll/scroll.spec.ts b/packages/x-components/tests/e2e/scroll/scroll.spec.ts
index 6201ebe0de..2a007b1d81 100644
--- a/packages/x-components/tests/e2e/scroll/scroll.spec.ts
+++ b/packages/x-components/tests/e2e/scroll/scroll.spec.ts
@@ -1,4 +1,4 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
 
 Then('url is updated with result {string}', (resultId: string) => {
   cy.url().should('contain', `scroll=${resultId}`);
@@ -13,3 +13,27 @@ Then('scroll position is at top', () => {
     expect(scrollContainer.scrollTop()).to.equal(0);
   });
 });
+
+When('scrolling to top', () => {
+  cy.get('#main-scroll').scrollTo('top', {
+    easing: 'swing',
+    duration: 1000,
+    ensureScrollable: true
+  });
+});
+
+When('scrolling to bottom', () => {
+  cy.get('#main-scroll').scrollTo('bottom', {
+    easing: 'swing',
+    duration: 1000,
+    ensureScrollable: true
+  });
+});
+
+Then('scroll direction is UP', () => {
+  cy.getByDataTest('main-scroll-UP').should('exist');
+});
+
+Then('scroll direction is DOWN', () => {
+  cy.getByDataTest('main-scroll-DOWN').should('exist');
+});
diff --git a/packages/x-components/tests/e2e/search-box/search-box.spec.ts b/packages/x-components/tests/e2e/search-box/search-box.spec.ts
index 6e150cdae5..0581e62e7b 100644
--- a/packages/x-components/tests/e2e/search-box/search-box.spec.ts
+++ b/packages/x-components/tests/e2e/search-box/search-box.spec.ts
@@ -35,7 +35,7 @@ Given(
 
 When('no queries have been searched', () => {
   cy.getByDataTest('search-input').should('have.value', '');
-  cy.getByDataTest('results-list').should('not.exist');
+  cy.getByDataTest('results-list').should('not.have.length');
   cy.getByDataTest('query-suggestions').should('not.exist');
   cy.getByDataTest('next-queries').should('not.exist');
   cy.getByDataTest('related-tags').should('not.exist');
diff --git a/packages/x-components/tests/shims-vue.d.ts b/packages/x-components/tests/shims-vue.d.ts
new file mode 100644
index 0000000000..40f3f4bdf7
--- /dev/null
+++ b/packages/x-components/tests/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent;
+  export default component;
+}
diff --git a/packages/x-components/tests/support/index.ts b/packages/x-components/tests/support/index.ts
index 0f0e8fc5e3..ad616fcb43 100644
--- a/packages/x-components/tests/support/index.ts
+++ b/packages/x-components/tests/support/index.ts
@@ -1,9 +1,15 @@
 import { AnyFunction } from '@empathyco/x-utils';
+import { mount } from 'cypress/vue';
+import { XDummyBus } from '../../src/__tests__/bus.dummy';
+import { e2eAdapter } from '../../src/adapter/e2e-adapter';
+import { XPlugin } from '../../src/plugins/x-plugin';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
-    interface Chainable extends CustomCommands, CustomDualCommands {}
+    interface Chainable extends CustomCommands, CustomDualCommands {
+      mount: typeof mount;
+    }
   }
 }
 
@@ -220,3 +226,11 @@ const customDualCommands: AddPreviousParam<CustomDualCommands> = {
 
 Cypress.Commands.addAll(customCommands);
 Cypress.Commands.addAll({ prevSubject: 'optional' }, customDualCommands);
+
+Cypress.Commands.add('mount', (component, options = {}) => {
+  options.global = options.global ?? {};
+  options.global.plugins = options.global.plugins ?? [];
+  options.global.plugins.push([new XPlugin(new XDummyBus()), { adapter: e2eAdapter }]);
+
+  return mount(component, options);
+});
diff --git a/packages/x-components/tests/tsconfig.eslint.json b/packages/x-components/tests/tsconfig.eslint.json
deleted file mode 100644
index fc8520e737..0000000000
--- a/packages/x-components/tests/tsconfig.eslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "./tsconfig.json"
-}
diff --git a/packages/x-components/tests/tsconfig.json b/packages/x-components/tests/tsconfig.json
index 478194e87f..8da1a655cf 100644
--- a/packages/x-components/tests/tsconfig.json
+++ b/packages/x-components/tests/tsconfig.json
@@ -1,11 +1,14 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "declaration": false,
-    "declarationMap": false,
     "types": ["node"],
     "downlevelIteration": true,
-    "rootDir": "../"
+    "rootDir": "../",
+    "paths": {
+      "@badeball/cypress-cucumber-preprocessor/*": [
+        "./node_modules/@badeball/cypress-cucumber-preprocessor/dist/subpath-entrypoints/*"
+      ]
+    }
   },
   "include": ["./**/*.ts"],
   "exclude": ["node_modules"]
diff --git a/packages/x-components/tests/unit/banner.spec.ts b/packages/x-components/tests/unit/banner.spec.ts
index 5c6d396033..0b8a0d165f 100644
--- a/packages/x-components/tests/unit/banner.spec.ts
+++ b/packages/x-components/tests/unit/banner.spec.ts
@@ -1,55 +1,28 @@
-import { mount } from 'cypress/vue2';
 import { Banner as BannerModel } from '@empathyco/x-types';
+import { createBannerStub } from '../../src/__stubs__/banners-stubs.factory';
 import Banner from '../../src/x-modules/search/components/banner.vue';
-import { createBannerStub } from '../../src/__stubs__/index';
 
-/**
- * Mounts a {@link Banner} component with the provided options.
- *
- * @param options - The options to render the component with.
- * @returns An API to test the component.
- */
-function mountBanner({
-  banner,
-  template = `
-        <div>
-          <Banner :banner="banner"/>
-        </div>
-      `
-}: MountBannerOptions): MountBannerAPI {
-  cy.viewport(1920, 200);
-  mount({
-    components: {
-      Banner
-    },
-    data() {
-      return {
-        banner
-      };
-    },
-    template
-  });
+const bannerBase: Partial<BannerModel> = {
+  title: 'Search UIs',
+  url: 'https://empathy.co',
+  position: 1
+};
+
+function render(banner = createBannerStub('banner', bannerBase)) {
+  cy.mount(Banner, { props: { banner } });
 
   return {
-    getBanner() {
-      return cy.getByDataTest('banner');
-    },
-    getBannerImage() {
-      return cy.getByDataTest('banner-image');
-    }
+    getBanner: () => cy.getByDataTest('banner'),
+    getBannerImage: () => cy.getByDataTest('banner-image')
   };
 }
 
 describe('testing Banner component', () => {
   it('banner renders if the image loads', () => {
-    const { getBanner, getBannerImage } = mountBanner({
-      banner: createBannerStub('banner', {
-        title: 'Search UIs',
-        url: 'https://empathy.co',
-        position: 1,
-        image: '/img/test-image-1.jpeg'
-      })
-    });
+    const { getBanner, getBannerImage } = render(
+      createBannerStub('banner', { ...bannerBase, image: '/img/test-image-1.jpeg' })
+    );
+
     // Loading
     getBanner().should('exist');
     getBannerImage().should('exist');
@@ -60,13 +33,8 @@ describe('testing Banner component', () => {
   });
 
   it('banner is not rendered if image load fails', () => {
-    const { getBanner, getBannerImage } = mountBanner({
-      banner: createBannerStub('banner', {
-        title: 'Search UIs',
-        url: 'https://empathy.co',
-        position: 1
-      })
-    });
+    const { getBanner, getBannerImage } = render();
+
     // Loading
     getBanner().should('exist');
     getBannerImage().should('exist');
@@ -75,15 +43,3 @@ describe('testing Banner component', () => {
     getBanner().should('not.exist');
   });
 });
-
-interface MountBannerOptions {
-  /** The banner data. */
-  banner?: BannerModel;
-  /** The template to be rendered. */
-  template?: string;
-}
-
-interface MountBannerAPI {
-  getBanner: () => Cypress.Chainable<JQuery>;
-  getBannerImage: () => Cypress.Chainable<JQuery>;
-}
diff --git a/packages/x-components/tests/unit/base-column-pickers.spec.ts b/packages/x-components/tests/unit/base-column-pickers.spec.ts
index 8fc4c5a924..ef6b66438e 100644
--- a/packages/x-components/tests/unit/base-column-pickers.spec.ts
+++ b/packages/x-components/tests/unit/base-column-pickers.spec.ts
@@ -1,93 +1,35 @@
-import { mount } from 'cypress/vue2';
-// eslint-disable-next-line max-len
+import { h } from 'vue';
 import BaseColumnPickerDropdown from '../../src/components/column-picker/base-column-picker-dropdown.vue';
 import BaseColumnPickerList from '../../src/components/column-picker/base-column-picker-list.vue';
-import { XPlugin } from '../../src/plugins/x-plugin';
-import { e2eAdapter } from '../../src/adapter/e2e-adapter';
-import { XDummyBus } from '../../src/__tests__/bus.dummy';
 
-/**
- * Mounts a {@link BaseColumnPickerList} and {@link BaseColumnPickerDropdown} component with the
- * provided options and offers an API to easily test it.
- *
- * @param options - The options to render the component with.
- * @returns An API to test the component.
- */
-function mountBaseColumnPickerComponents({
-  columns = [2, 4, 6],
-  selectedColumns = 4
-}: BaseColumnPickerRenderOptions = {}): BaseColumnPickerComponentAPI {
-  cy.viewport(1920, 200);
-  mount(
-    {
-      components: {
-        BaseColumnPickerList,
-        BaseColumnPickerDropdown
-      },
-      template: `
-        <div>
-          <BaseColumnPickerList
-            @update:modelValue="col => selectedColumns = col"
-            :modelValue="selectedColumns"
-            :columns="columns"
-            #default="{ column, isSelected }"
-          >
-            <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>
-          </BaseColumnPickerList>
-          <BaseColumnPickerDropdown
-            @update:modelValue="col => selectedColumns = col"
-            :modelValue="selectedColumns"
-            :columns="columns"
-          >
-            <template #toggle="{ item, isOpen }">
-              Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}
-              ️</template>
-            <template #item="{ item, isSelected, isHighlighted }">
-              <span v-if="isHighlighted">🟢</span>
-              <span v-if="isSelected">✅</span>
-              <span data-test="column-picker-dropdown-columns">{{ item }}</span>
-            </template>
-          </BaseColumnPickerDropdown>
-        </div>
-      `,
-      data() {
-        return { columns, selectedColumns };
-      }
-    },
-    {
-      plugins: [[new XPlugin(new XDummyBus()), { adapter: e2eAdapter }]],
-      propsData: { columns, selectedColumns }
-    }
-  );
+function render(columns = [2, 4, 6], selectedColumns = 4) {
+  cy.mount(() => [
+    h(BaseColumnPickerList, { columns, modelValue: selectedColumns }),
+    h(BaseColumnPickerDropdown, { columns, modelValue: selectedColumns })
+  ]);
+
+  const getListNthItem = (columns: number) =>
+    cy
+      .getByDataTest('column-picker-list')
+      .children(`.x-column-picker-list__button--${columns}-cols`);
+
+  const getDropdownNthItem = (index: number) => {
+    cy.getByDataTest('dropdown-toggle').click();
+    return cy.getByDataTest('dropdown-item').eq(index);
+  };
 
   return {
-    clickListNthItem(columns: number) {
-      cy.getByDataTest('column-picker-list')
-        .children(`.x-column-picker-list__button--${columns}-cols`)
-        .click();
-    },
-    getListNthItem(columns: number) {
-      return cy
-        .getByDataTest('column-picker-list')
-        .children(`.x-column-picker-list__button--${columns}-cols`);
-    },
-    clickDropdownNthItem(index: number) {
-      cy.getByDataTest('dropdown-toggle').click();
-      cy.getByDataTest('dropdown-item').eq(index).click();
-    },
-    getDropdownNthItem(index: number) {
-      cy.getByDataTest('dropdown-toggle').click();
-      return cy.getByDataTest('dropdown-item').eq(index);
-    },
-    closeDropdown() {
-      cy.get(`.x-dropdown--is-open`).getByDataTest('dropdown-toggle').click();
-    }
+    getListNthItem,
+    clickListNthItem: (columns: number) => getListNthItem(columns).click(),
+    getDropdownNthItem,
+    clickDropdownNthItem: (index: number) => getDropdownNthItem(index).click(),
+    closeDropdown: () => cy.get(`.x-dropdown--is-open`).getByDataTest('dropdown-toggle').click()
   };
 }
 
 describe('testing Base Column Picker List and Dropdown', () => {
-  it('Selects  different options from the column picker list', () => {
-    const { clickListNthItem, getListNthItem } = mountBaseColumnPickerComponents();
+  it('Selects different options from the column picker list', () => {
+    const { clickListNthItem, getListNthItem } = render();
     getListNthItem(4).should('have.attr', 'aria-pressed', 'true');
 
     clickListNthItem(2);
@@ -100,8 +42,7 @@ describe('testing Base Column Picker List and Dropdown', () => {
   });
 
   it('Selects different options from the column picker dropdown', () => {
-    const { clickDropdownNthItem, getDropdownNthItem, closeDropdown } =
-      mountBaseColumnPickerComponents();
+    const { clickDropdownNthItem, getDropdownNthItem, closeDropdown } = render();
     getDropdownNthItem(1).should('have.attr', 'aria-selected', 'true');
     closeDropdown();
 
@@ -113,23 +54,3 @@ describe('testing Base Column Picker List and Dropdown', () => {
     getDropdownNthItem(0).should('have.attr', 'aria-selected', 'true');
   });
 });
-
-interface BaseColumnPickerRenderOptions {
-  /** The number of columns to be rendered. */
-  columns?: number[];
-  /** The initial selected column value. */
-  selectedColumns?: number;
-}
-
-interface BaseColumnPickerComponentAPI {
-  /** Clicks the event button in the column picker list and waits for the view to update. */
-  clickListNthItem: (index: number) => void;
-  /** Gets the selected item in the column picker list. */
-  getListNthItem: (index: number) => Cypress.Chainable<JQuery>;
-  /** Clicks the event button in the column picker dropdown and waits for the view to update. */
-  clickDropdownNthItem: (index: number) => void;
-  /** Gets the selected item in the column picker dropdown. */
-  getDropdownNthItem: (index: number) => Cypress.Chainable<JQuery>;
-  /** Closes the dropdown menu. */
-  closeDropdown: () => void;
-}
diff --git a/packages/x-components/tests/unit/base-events-modal.spec.ts b/packages/x-components/tests/unit/base-events-modal.spec.ts
index 5318847906..17bdf1b00f 100644
--- a/packages/x-components/tests/unit/base-events-modal.spec.ts
+++ b/packages/x-components/tests/unit/base-events-modal.spec.ts
@@ -1,75 +1,30 @@
-import { mount } from 'cypress/vue2';
-import Vue from 'vue';
+import { h } from 'vue';
 import BaseEventsModalClose from '../../src/components/modals/base-events-modal-close.vue';
 import BaseEventsModalOpen from '../../src/components/modals/base-events-modal-open.vue';
 import BaseEventsModal from '../../src/components/modals/base-events-modal.vue';
-import { XPlugin } from '../../src/plugins/x-plugin';
-import { XEvent } from '../../src/wiring/events.types';
-import { e2eAdapter } from '../../src/adapter/e2e-adapter';
-import { XDummyBus } from '../../src/__tests__/bus.dummy';
 
-/**
- * Mounts a {@link BaseEventsModal} component with the provided options and offers an API to easily
- * test it.
- *
- * @param options - The options to render the component with.
- * @returns An API to test the component.
- */
-function mountBaseEventsModal({
-  bodyClickEvent,
-  eventsToCloseModal,
-  eventsToOpenModal
-}: MountBaseEventsModalOptions = {}): MountBaseEventsModalAPI {
-  cy.viewport(1920, 200);
-  mount(
-    {
-      components: {
-        BaseEventsModal,
-        BaseEventsModalOpen,
-        BaseEventsModalClose
-      },
-      template: `
-        <div>
-          <BaseEventsModalOpen>Start</BaseEventsModalOpen>
-          <BaseEventsModal>
-            <h1> Base Events Modal </h1>
-            <BaseEventsModalClose>Close</BaseEventsModalClose>
-          </BaseEventsModal>
-        </div>
-      `
-    },
-    {
-      vue: Vue.extend({}),
-      plugins: [[new XPlugin(new XDummyBus()), { adapter: e2eAdapter }]],
-      propsData: { bodyClickEvent, eventsToCloseModal, eventsToOpenModal }
-    }
+function render() {
+  cy.mount(() =>
+    h('div', [
+      h(BaseEventsModalOpen, 'Start'),
+      h(BaseEventsModal, [h('h1', 'Base Events Modal'), h(BaseEventsModalClose, 'Close')])
+    ])
   );
 
-  const getModalContent = (): Cypress.Chainable<JQuery> => {
-    return cy.getByDataTest('modal-content');
-  };
+  const getModalContent = () => cy.getByDataTest('modal-content');
 
   return {
     getModalContent,
-    clickOpenModal() {
-      cy.getByDataTest('open-modal').click();
-    },
-    clickCloseModal() {
-      cy.getByDataTest('close-modal').click();
-    },
-    clickInModal() {
-      getModalContent().click();
-    },
-    clickOutsideModal() {
-      cy.getByDataTest('modal').click('bottom');
-    }
+    clickOpenModal: () => cy.getByDataTest('open-modal').click(),
+    clickCloseModal: () => cy.getByDataTest('close-modal').click(),
+    clickInModal: () => getModalContent().click(),
+    clickOutsideModal: () => cy.getByDataTest('modal').click('bottom')
   };
 }
 
 describe('testing Base Events Modal component', () => {
   it('modal opens, remains open when clicked, and closes when clicked out of its bounds', () => {
-    const { clickOpenModal, clickInModal, clickOutsideModal, getModalContent } =
-      mountBaseEventsModal();
+    const { clickOpenModal, clickInModal, clickOutsideModal, getModalContent } = render();
 
     clickOpenModal();
     getModalContent().should('exist');
@@ -82,7 +37,7 @@ describe('testing Base Events Modal component', () => {
   });
 
   it('Modal closes when clicking the close button', () => {
-    const { clickOpenModal, clickCloseModal, getModalContent } = mountBaseEventsModal();
+    const { clickOpenModal, clickCloseModal, getModalContent } = render();
 
     clickOpenModal();
     getModalContent().should('exist');
@@ -91,25 +46,3 @@ describe('testing Base Events Modal component', () => {
     getModalContent().should('not.exist');
   });
 });
-
-interface MountBaseEventsModalOptions {
-  /** The event that should be emitted when the body is clicked. */
-  bodyClickEvent?: XEvent;
-  /** Events that when emitted should close the modal. */
-  eventsToCloseModal?: XEvent[];
-  /** Events that when emitted should open the modal. */
-  eventsToOpenModal?: XEvent[];
-}
-
-interface MountBaseEventsModalAPI {
-  /** Clicks anywhere in the modal. */
-  clickInModal: () => void;
-  /** Clicks outside the modal. */
-  clickOutsideModal: () => void;
-  /** Clicks the button for opening the modal. */
-  clickOpenModal: () => void;
-  /** Clicks the button for closing the modal. */
-  clickCloseModal: () => void;
-  /** Retrieves the modal content. */
-  getModalContent: () => Cypress.Chainable<JQuery>;
-}
diff --git a/packages/x-components/tests/unit/base-grid.spec.ts b/packages/x-components/tests/unit/base-grid.spec.ts
index 5d9d155f44..c5e002cff7 100644
--- a/packages/x-components/tests/unit/base-grid.spec.ts
+++ b/packages/x-components/tests/unit/base-grid.spec.ts
@@ -1,135 +1,91 @@
-import { mount } from 'cypress/vue2';
-import Vue from 'vue';
-import { getNextQueriesStub, getSearchResponseStub } from '../../src/__stubs__';
+import { h, onBeforeMount, VNode } from 'vue';
+import { getNextQueriesStub } from '../../src/__stubs__/next-queries-stubs.factory';
+import { getSearchResponseStub } from '../../src/__stubs__/search-response-stubs.factory';
 import BaseGrid from '../../src/components/base-grid.vue';
+import { ListItem } from '../../src/utils/types';
 import { XPlugin } from '../../src/plugins/x-plugin';
-import { ListItem } from '../../src/utils';
 import { NextQueriesGroup } from '../../src/x-modules/next-queries/types';
-import { e2eAdapter } from '../../src/adapter/e2e-adapter';
-import { XDummyBus } from '../../src/__tests__/bus.dummy';
 import { loadCss } from './css.utils';
 
-/**
- * Renders an {@link BaseGrid} component with the provided options.
- *
- * @param  options - Options to render {@link BaseGrid} with.
- * @returns Helper methods for the rendered {@link BaseGrid}.
- */
-function renderBaseGrid({
-  columns = 3,
-  items,
-  customItemSlot = `
-    <template #banner="{ item }">
-      <p data-test="banner-slot">{{ item.modelName }}</p>
-    </template>
-    <template #result="{ item }">
-      <p data-test="result-slot">{{ item.modelName }}</p>
-    </template>`,
-  template = `
-   <BaseGrid :items="items" :columns="columns">
-      <template #default="{ item }">
-        <p data-test="default-slot">{{ item.modelName }}</p>
-      </template>
-      ${customItemSlot ?? ''}
-   </BaseGrid>`
-}: BaseGridRenderOptions = {}): BaseGridComponentAPI {
-  const searchResponse = getSearchResponseStub();
-  const defaultItems = [
-    ...searchResponse.banners!,
-    ...searchResponse.promoteds!,
-    ...searchResponse.results,
-    {
-      modelName: 'NextQueriesGroup',
-      nextQueries: getNextQueriesStub()
-    } as NextQueriesGroup
-  ];
+type Item = { item: ListItem };
+const searchResponse = getSearchResponseStub();
+const defaultItems = [
+  ...searchResponse.banners!,
+  ...searchResponse.promoteds!,
+  ...searchResponse.results,
+  {
+    modelName: 'NextQueriesGroup',
+    nextQueries: getNextQueriesStub()
+  } as NextQueriesGroup
+];
 
+function render({
+  columns = 3,
+  items = defaultItems,
+  itemSlots = {
+    banner: ({ item }: Item) => h('p', { 'data-test': 'banner-slot' }, item.modelName),
+    result: ({ item }: Item) => h('p', { 'data-test': 'result-slot' }, item.modelName)
+  } as Record<string, (...args: any) => VNode>
+} = {}) {
   const renderedColumnsNumberChangedSpy = cy.spy();
+  loadCss(':root { --x-size-min-width-grid-item: 300px; }');
 
-  cy.viewport(2000, 200);
-  loadCss(`
-        :root {
-          --x-size-min-width-grid-item: 300px;
-        }
-      `);
-  mount(
-    {
-      components: {
-        BaseGrid
-      },
-      props: ['items', 'columns'],
-      template,
-      beforeCreate() {
+  cy.mount({
+    setup: () => {
+      onBeforeMount(() => {
         XPlugin.bus.on('RenderedColumnsNumberChanged').subscribe(renderedColumnsNumberChangedSpy);
-      }
-    },
-    {
-      vue: Vue.extend({}),
-      plugins: [[new XPlugin(new XDummyBus()), { adapter: e2eAdapter }]],
-      propsData: {
-        items: items ?? defaultItems,
-        columns
-      }
+      });
+      return () =>
+        h(
+          BaseGrid,
+          { items, columns },
+          {
+            default: ({ item }: { item: ListItem }) =>
+              h('p', { 'data-test': 'default-slot' }, item.modelName),
+            ...itemSlots
+          }
+        );
     }
-  );
+  });
 
   return {
-    getBaseGrid() {
-      return cy.getByDataTest('grid');
-    },
-    getDefaultSlot() {
-      return cy.getByDataTest('default-slot');
-    },
-    getScopedSlot(modelName: string) {
-      return cy.getByDataTest(`${modelName}-slot`);
-    },
+    getBaseGrid: () => cy.getByDataTest('grid'),
+    getDefaultSlot: () => cy.getByDataTest('default-slot'),
+    getScopedSlot: (modelName: string) => cy.getByDataTest(`${modelName}-slot`),
     renderedColumnsNumberChangedSpy: () => cy.wrap(renderedColumnsNumberChangedSpy)
   };
 }
 
 describe('testing BaseGrid', () => {
   it('allows configuring the number of columns and updates the css class accordingly', () => {
-    const { getBaseGrid } = renderBaseGrid({ columns: 5 });
+    const { getBaseGrid } = render({ columns: 5 });
+
     getBaseGrid().should('have.class', 'x-base-grid--cols-5');
   });
 
   it('allows customizing the default slot', () => {
-    const template = `
-         <BaseGrid :items="items" :columns="columns">
-           <template #default="{ item }">
-             <p data-test="default-slot-overridden">{{ item.modelName }}</p>
-           </template>
-         </BaseGrid>`;
-    renderBaseGrid({ template });
-    cy.getByDataTest('default-slot-overridden').should('exist');
+    render();
+
+    cy.getByDataTest('default-slot').should('exist');
   });
 
   it('allows customizing named slots', () => {
-    const customItemSlot = `
-      <template #banner="{ item }">
-        <p data-test="banner-slot">{{ item.modelName }}</p>
-      </template>`;
-    const { getDefaultSlot, getScopedSlot } = renderBaseGrid({
-      customItemSlot
-    });
+    const { getDefaultSlot, getScopedSlot } = render();
 
     getDefaultSlot().should('exist');
-    getScopedSlot('result').should('not.exist');
+    getScopedSlot('result').should('exist');
     getScopedSlot('banner').should('exist');
   });
 
   it('allows customizing named slots only using kebab case', () => {
-    const { getScopedSlot } = renderBaseGrid({
-      customItemSlot: `
-        <template #banner="{ item }">
-          <p data-test="banner-slot">{{ item.modelName }}</p>
-        </template>
-        <template #NextQueriesGroup="{ item }">
-          <p data-test="NextQueriesGroup-slot">{{ item.modelName }}</p>
-        </template>
-        <template #next-queries-group="{ item }">
-          <p data-test="next-queries-group-slot">{{ item.modelName }}</p>
-        </template>`
+    const { getScopedSlot } = render({
+      itemSlots: {
+        banner: ({ item }: Item) => h('p', { 'data-test': 'banner-slot' }, item.modelName),
+        NextQueriesGroup: ({ item }: Item) =>
+          h('p', { 'data-test': 'NextQueriesGroup-slot' }, item.modelName),
+        'next-queries-group': ({ item }: Item) =>
+          h('p', { 'data-test': 'next-queries-group-slot' }, item.modelName)
+      }
     });
 
     getScopedSlot('banner').should('exist');
@@ -138,9 +94,7 @@ describe('testing BaseGrid', () => {
   });
 
   it('emits RenderedColumnsNumberChanged event when rendered columns number changes', () => {
-    const { renderedColumnsNumberChangedSpy } = renderBaseGrid({
-      columns: 0
-    });
+    const { renderedColumnsNumberChangedSpy } = render({ columns: 0 });
 
     renderedColumnsNumberChangedSpy().should('have.been.calledWith', 6);
     cy.viewport(1000, 200);
@@ -148,17 +102,3 @@ describe('testing BaseGrid', () => {
     renderedColumnsNumberChangedSpy().should('have.been.calledTwice');
   });
 });
-
-interface BaseGridRenderOptions {
-  columns?: number;
-  items?: ListItem[];
-  customItemSlot?: string;
-  template?: string;
-}
-
-interface BaseGridComponentAPI {
-  getBaseGrid: () => Cypress.Chainable<JQuery>;
-  getDefaultSlot: () => Cypress.Chainable<JQuery>;
-  getScopedSlot: (modelName: string) => Cypress.Chainable<JQuery>;
-  renderedColumnsNumberChangedSpy: () => Cypress.Chainable<ReturnType<typeof cy.spy>>;
-}
diff --git a/packages/x-components/tests/unit/base-modal.spec.ts b/packages/x-components/tests/unit/base-modal.spec.ts
index bbb6e8471b..70cbb7824a 100644
--- a/packages/x-components/tests/unit/base-modal.spec.ts
+++ b/packages/x-components/tests/unit/base-modal.spec.ts
@@ -1,78 +1,45 @@
-import { mount } from 'cypress/vue2';
-import Vue from 'vue';
+import { h, VNode } from 'vue';
 import BaseModal from '../../src/components/modals/base-modal.vue';
-import { XPlugin } from '../../src/plugins/x-plugin';
-import { e2eAdapter } from '../../src/adapter/e2e-adapter';
-import { XDummyBus } from '../../src/__tests__/bus.dummy';
 import { loadCss } from './css.utils';
 
-/**
- * Renders an {@link BaseModal} component with the provided options.
- *
- * @param  options - Options to render {@link BaseModal} with.
- * @returns Helper methods for the rendered {@link BaseModal}.
- */
-function renderBaseModal({
+function render({
   referenceSelector = '',
   clientHeaderHeight = {
     desktop: 0,
     tablet: 0,
     mobile: 0
   },
-  template = `
-      <div class="wrapper">
-        <div class="header"></div>
-        <BaseModal :referenceSelector="referenceSelector" :open="true" />
-      </div>
-  `
-}: RenderBaseModalOptions = {}): RenderBaseModalAPI {
-  XPlugin.resetInstance();
-  cy.viewport('macbook-16');
+  rootVNode = undefined as undefined | VNode
+} = {}) {
   loadCss(`
-        body {
-          margin: 0;
-        }
-        .header {
-          height: ${clientHeaderHeight.desktop}px;
-        }
-        @media only screen and (min-width: 320px) and (max-width: 480px) {
-          .header {
-            height: ${clientHeaderHeight.mobile}px;
-          }
-        }
-        @media screen and (min-width: 481px) and (max-width: 1024px) {
-          .header {
-            height: ${clientHeaderHeight.tablet}px;
-          }
-        }
-        `);
-  mount(
-    {
-      components: {
-        BaseModal
-      },
-      template,
-      props: ['referenceSelector']
-    },
-    {
-      vue: Vue.extend({}),
-      plugins: [[new XPlugin(new XDummyBus()), { adapter: e2eAdapter }]],
-      propsData: {
-        referenceSelector
-      }
+    body { margin: 0; }
+    .header { height: ${clientHeaderHeight.desktop}px; }
+    @media only screen and (min-width: 320px) and (max-width: 480px) {
+      .header { height: ${clientHeaderHeight.mobile}px; }
+    }
+    @media screen and (min-width: 481px) and (max-width: 1024px) {
+      .header { height: ${clientHeaderHeight.tablet}px; }
     }
+  `);
+
+  cy.mount(
+    () =>
+      rootVNode ??
+      h('div', { class: 'wrapper' }, [
+        h('div', { class: 'header' }),
+        h(BaseModal, { referenceSelector, open: true })
+      ])
   );
 
   return {
-    getBaseModal() {
-      return cy.getByDataTest('modal');
-    }
+    getBaseModal: () => cy.getByDataTest('modal')
   };
 }
 
 describe('Testing base modal', () => {
   it('places the modal at the top of the page if referenceSelector is not defined', () => {
-    const { getBaseModal } = renderBaseModal();
+    const { getBaseModal } = render();
+
     getBaseModal().should($modal => expect($modal.position().top).to.be.eq(0));
   });
 
@@ -81,7 +48,7 @@ describe('Testing base modal', () => {
       clientHeaderHeight: { desktop: 100, tablet: 0, mobile: 0 },
       referenceSelector: '.header'
     };
-    const { getBaseModal } = renderBaseModal(options);
+    const { getBaseModal } = render(options);
     getBaseModal().should($modal =>
       expect($modal.position().top).to.be.eq(options.clientHeaderHeight.desktop)
     );
@@ -96,7 +63,7 @@ describe('Testing base modal', () => {
       },
       referenceSelector: '.header'
     };
-    const { getBaseModal } = renderBaseModal(options);
+    const { getBaseModal } = render(options);
 
     cy.log('Viewport in desktop resolution');
     getBaseModal().should($modal =>
@@ -104,7 +71,7 @@ describe('Testing base modal', () => {
     );
 
     cy.log('Viewport in mobile resolution');
-    cy.viewport('iphone-8');
+    cy.viewport('iphone-x');
     getBaseModal().should($modal =>
       expect($modal.position().top).to.be.eq(options.clientHeaderHeight.mobile)
     );
@@ -116,43 +83,22 @@ describe('Testing base modal', () => {
     );
   });
 
-  // eslint-disable-next-line max-len
   it('calculates where to place the modal even if there are more elements on the selected element', () => {
     const preHeaderHeight = 300;
+    const referenceSelector = '.header';
     const options = {
+      referenceSelector,
       clientHeaderHeight: { desktop: 100, tablet: 0, mobile: 0 },
-      referenceSelector: '.header',
-      template: `
-                  <div class="wrapper">
-                    <div class="pre-header" style="height: ${preHeaderHeight}px"></div>
-                    <div class="header"></div>
-                    <BaseModal :referenceSelector="referenceSelector" :open="true" />
-                  </div>
-      `
+      rootVNode: h('div', { class: 'wrapper' }, [
+        h('div', { class: 'pre-header', style: `height: ${preHeaderHeight}px` }),
+        h('div', { class: 'header' }),
+        h(BaseModal, { referenceSelector, open: true })
+      ])
     };
-    const { getBaseModal } = renderBaseModal(options);
+    const { getBaseModal } = render(options);
+
     getBaseModal().should($modal =>
       expect($modal.position().top).to.be.eq(options.clientHeaderHeight.desktop + preHeaderHeight)
     );
   });
 });
-
-interface RenderBaseModalOptions {
-  /**
-   * The selector under which the modal is to be placed.
-   */
-  referenceSelector?: string;
-  /**
-   * The client header height for each device.
-   */
-  clientHeaderHeight?: Record<'desktop' | 'tablet' | 'mobile', number>;
-  /**
-   * The template to render.
-   */
-  template?: string;
-}
-
-interface RenderBaseModalAPI {
-  /** Retrieves the base modal. */
-  getBaseModal: () => Cypress.Chainable<JQuery>;
-}
diff --git a/packages/x-components/tests/unit/base-result-image.spec.ts b/packages/x-components/tests/unit/base-result-image.spec.ts
index 0dea6a42fa..834773ff9f 100644
--- a/packages/x-components/tests/unit/base-result-image.spec.ts
+++ b/packages/x-components/tests/unit/base-result-image.spec.ts
@@ -1,77 +1,54 @@
-import { mount } from 'cypress/vue2';
 import { Result } from '@empathyco/x-types';
+import { h, ref, VNode } from 'vue';
 import { createResultStub } from '../../src/__stubs__/results-stubs.factory';
 import BaseResultImage from '../../src/components/result/base-result-image.vue';
 
-/**
- * Mounts a {@link BaseResultImage} component with the provided options.
- *
- * @param options - The options to render the component with.
- * @returns An API to test the component.
- */
-function mountBaseResultImage({
-  result,
-  showNextImageOnHover = false,
-  template = `
-        <div>
-          <BaseResultImage
-              :result="result"
-              :showNextImageOnHover="showNextImageOnHover"
-              class="x-picture-overlay x-bg-neutral-50/60">
-            <template #placeholder>
-              <div data-test="result-picture-placeholder"
-                  style="padding-top: 100%; background-color: lightgray"></div>
-            </template>
-            <template #fallback>
-              <div
-                data-test="result-picture-fallback"
-                style="padding-top: 100%; background-color: lightsalmon"
-              ></div>
-            </template>
-          </BaseResultImage>
-        </div>
-      `
-}: MountBaseResultImageOptions): MountBaseResultImageAPI {
-  cy.viewport(1920, 200);
-  mount({
-    components: {
-      BaseResultImage
-    },
-    data() {
-      return {
-        result,
-        showNextImageOnHover
-      };
-    },
-    template
-  });
+function render(result: Result, showNextImageOnHover = false, rootVNode?: VNode) {
+  cy.mount(
+    () =>
+      rootVNode ??
+      h(
+        BaseResultImage,
+        {
+          result,
+          showNextImageOnHover,
+          loadAnimation: 'span'
+        },
+        {
+          placeholder: () =>
+            h('div', {
+              'data-test': 'result-picture-placeholder',
+              style: 'padding-top: 100%; background-color: lightgray'
+            }),
+          fallback: () =>
+            h('div', {
+              'data-test': 'result-picture-fallback',
+              style: 'padding-top: 100%; background-color: lightsalmon'
+            })
+        }
+      )
+  );
 
   return {
-    getResultPicture() {
-      return cy.getByDataTest('result-picture');
-    },
-    getResultPictureImage() {
-      return cy.getByDataTest('result-picture-image');
-    },
-    getResultPictureFallback() {
-      return cy.getByDataTest('result-picture-fallback');
-    },
-    getResultPicturePlaceholder() {
-      return cy.getByDataTest('result-picture-placeholder');
-    }
+    getResultPicture: () => cy.getByDataTest('result-picture'),
+    getResultPictureImage: () => cy.getByDataTest('result-picture-image'),
+    getResultPictureFallback: () => cy.getByDataTest('result-picture-fallback'),
+    getResultPicturePlaceholder: () => cy.getByDataTest('result-picture-placeholder')
   };
 }
 
 describe('testing Base Result Image component', () => {
   it('placeholder is replaced for an image', () => {
-    const result = createResultStub('Result', {
-      images: ['/img/test-image-1.jpeg', '/img/test-image-2.jpeg']
-    });
-    const { getResultPictureImage, getResultPictureFallback, getResultPicturePlaceholder } =
-      mountBaseResultImage({ result });
+    const { getResultPictureImage, getResultPictureFallback, getResultPicturePlaceholder } = render(
+      createResultStub('Result', {
+        images: ['/img/test-image-1.jpeg', '/img/test-image-2.jpeg']
+      })
+    );
+
     // Loading
     getResultPicturePlaceholder().should('exist');
     getResultPictureImage().should('not.exist');
+
     // Success
     getResultPictureImage().should('have.attr', 'src', '/img/test-image-1.jpeg');
     getResultPicturePlaceholder().should('not.exist');
@@ -79,16 +56,16 @@ describe('testing Base Result Image component', () => {
   });
 
   it('placeholder is replaced for a fallback since there are no valid images', () => {
-    const result = createResultStub('Result', {
-      images: ['https://notexistsimage1.com', 'https://notexistsimage2.com']
-    });
-    const { getResultPictureFallback, getResultPicturePlaceholder, getResultPictureImage } =
-      mountBaseResultImage({
-        result
-      });
+    const { getResultPictureFallback, getResultPicturePlaceholder, getResultPictureImage } = render(
+      createResultStub('Result', {
+        images: ['https://notexistsimage1.com', 'https://notexistsimage2.com']
+      })
+    );
+
     // Loading
     getResultPicturePlaceholder().should('exist');
     getResultPictureFallback().should('not.exist');
+
     // Loading failed
     getResultPictureFallback().should('exist');
     getResultPicturePlaceholder().should('not.exist');
@@ -96,19 +73,21 @@ describe('testing Base Result Image component', () => {
   });
 
   it('placeholder is replaced for the last valid image', () => {
-    const result = createResultStub('Result', {
-      images: [
-        'https://notexistsimage1.com',
-        'https://notexistsimage2.com',
-        'https://notexistsimage3.com',
-        '/img/test-image-1.jpeg'
-      ]
-    });
-    const { getResultPictureImage, getResultPictureFallback, getResultPicturePlaceholder } =
-      mountBaseResultImage({ result });
+    const { getResultPictureImage, getResultPictureFallback, getResultPicturePlaceholder } = render(
+      createResultStub('Result', {
+        images: [
+          'https://notexistsimage1.com',
+          'https://notexistsimage2.com',
+          'https://notexistsimage3.com',
+          '/img/test-image-1.jpeg'
+        ]
+      })
+    );
+
     // Loading
     getResultPicturePlaceholder().should('exist');
     getResultPictureImage().should('not.exist');
+
     // Success
     getResultPictureImage().should('have.attr', 'src', '/img/test-image-1.jpeg');
     getResultPicturePlaceholder().should('not.exist');
@@ -116,72 +95,51 @@ describe('testing Base Result Image component', () => {
   });
 
   it('does not change the image on hover if `showNextImageOnHover` is false', () => {
-    const result = createResultStub('Result', {
-      images: ['/img/test-image-1.jpeg', '/img/test-image-2.jpeg']
-    });
-    const { getResultPictureImage, getResultPicture } = mountBaseResultImage({
-      result,
-      showNextImageOnHover: false
-    });
+    const { getResultPictureImage, getResultPicture } = render(
+      createResultStub('Result', {
+        images: ['/img/test-image-1.jpeg', '/img/test-image-2.jpeg']
+      }),
+      false
+    );
+
     getResultPictureImage().should('have.attr', 'src', '/img/test-image-1.jpeg');
     getResultPicture().trigger('mouseenter');
-    // Setting this wait to make the test fail if we change showNextImageOnHover
-    // or the second image src.
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(100);
     getResultPictureImage().should('not.have.attr', 'src', '/img/test-image-2.jpeg');
   });
 
   it('shows the next valid image on hover if `showNextImageOnHover` is true', () => {
-    const result = createResultStub('Result', {
-      images: ['/img/test-image-1.jpeg', 'https://notexistsimage1.com', '/img/test-image-2.jpeg']
-    });
-
-    const { getResultPictureImage, getResultPicture } = mountBaseResultImage({
-      result,
-      showNextImageOnHover: true
-    });
+    const { getResultPictureImage, getResultPicture } = render(
+      createResultStub('Result', {
+        images: ['/img/test-image-1.jpeg', 'https://notexistsimage1.com', '/img/test-image-2.jpeg']
+      }),
+      true
+    );
+
     getResultPictureImage().should('have.attr', 'src', '/img/test-image-1.jpeg');
     getResultPicture().trigger('mouseenter');
-    // It should have load the third image after the second one failed.
     getResultPictureImage().should('have.attr', 'src', '/img/test-image-2.jpeg');
   });
 
   it('resets images state when `result` prop changes', () => {
-    const result = createResultStub('Result', { images: ['/img/test-image-1.jpeg'] });
-
-    cy.viewport(1920, 200);
-    const { getResultPictureImage } = mountBaseResultImage({
-      result,
-      template: `
-        <div>
-          <BaseResultImage :result="result" />
-          <button @click="result.images = ['/img/test-image-2.jpeg']"
-                  data-test="button-images-change">
-            Change result images
-          </button>
-        </div>
-      `
-    });
+    const result = ref(createResultStub('Result', { images: ['/img/test-image-1.jpeg'] }));
+    const { getResultPictureImage } = render(
+      result.value,
+      false,
+      h('div', [
+        h(BaseResultImage, { result: result.value, loadAnimation: 'span' }),
+        h(
+          'button',
+          {
+            'data-test': 'button-images-change',
+            onClick: () => (result.value.images = ['/img/test-image-2.jpeg'])
+          },
+          'Change result images'
+        )
+      ])
+    );
+
     getResultPictureImage().should('have.attr', 'src', '/img/test-image-1.jpeg');
     cy.getByDataTest('button-images-change').trigger('click');
     getResultPictureImage().should('have.attr', 'src', '/img/test-image-2.jpeg');
   });
 });
-
-interface MountBaseResultImageOptions {
-  result: Result;
-  showNextImageOnHover?: boolean;
-  template?: string;
-}
-
-interface MountBaseResultImageAPI {
-  /** Gets the result picture container. */
-  getResultPicture: () => Cypress.Chainable<JQuery>;
-  /** Gets the result picture image. */
-  getResultPictureImage: () => Cypress.Chainable<JQuery>;
-  /** Gets the result picture fallback. */
-  getResultPictureFallback: () => Cypress.Chainable<JQuery>;
-  /** Gets the result picture placeholder. */
-  getResultPicturePlaceholder: () => Cypress.Chainable<JQuery>;
-}
diff --git a/packages/x-components/tests/unit/html.spec.ts b/packages/x-components/tests/unit/html.spec.ts
index 4cb321e7ab..eac844910a 100644
--- a/packages/x-components/tests/unit/html.spec.ts
+++ b/packages/x-components/tests/unit/html.spec.ts
@@ -1,40 +1,40 @@
 import { getTargetElement } from '../../src/utils/html';
 
-describe(`testing ${getTargetElement.name} utility method`, () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
+/**
+ * Create a HTMLButtonElement inside a HTMLDivElement container.
+ *
+ * @returns Tuple with container as first item, and button as second.
+ * @internal
+ */
+function createBasicDOMTree() {
+  const container = document.createElement('div');
+  const button = container.appendChild(document.createElement('button'));
+  button.textContent = 'Click';
 
-  /**
-   * Create a HTMLButtonElement inside a HTMLDivElement container.
-   *
-   * @returns Tuple with container as first item, and button as second.
-   * @internal
-   */
-  function createBasicDOMTree(): [HTMLDivElement, HTMLButtonElement] {
-    const container = document.createElement('div');
-    const button = container.appendChild(document.createElement('button'));
-    button.textContent = 'Click';
+  return [container, button];
+}
 
-    return [container, button];
-  }
+/**
+ * Create a ShadowRoot inside a HTMLDivElement container. Basic DOM tree is appended to
+ * shadowRoot.
+ *
+ * @param mode - Shadow encapsulation mode.
+ * @returns Tuple with shadow container as first item, and button as second.
+ */
+function createShadowDOMTree(mode: 'open' | 'closed') {
+  const [container, button] = createBasicDOMTree();
 
-  /**
-   * Create a ShadowRoot inside a HTMLDivElement container. Basic DOM tree is appended to
-   * shadowRoot.
-   *
-   * @param mode - Shadow encapsulation mode.
-   * @returns Tuple with shadow container as first item, and button as second.
-   */
-  function createShadowDOMTree(mode: 'open' | 'closed'): [HTMLDivElement, HTMLButtonElement] {
-    const [container, button] = createBasicDOMTree();
+  const shadowContainer = document.createElement('div');
+  const shadowRoot = shadowContainer.attachShadow({ mode });
+  shadowRoot.appendChild(container);
 
-    const shadowContainer = document.createElement('div');
-    const shadowRoot = shadowContainer.attachShadow({ mode });
-    shadowRoot.appendChild(container);
+  return [shadowContainer, button];
+}
 
-    return [shadowContainer, button];
-  }
+describe(`testing ${getTargetElement.name} utility method`, () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
 
   it('returns the element that triggered the event', () => {
     const [container, button] = createBasicDOMTree();
@@ -42,6 +42,7 @@ describe(`testing ${getTargetElement.name} utility method`, () => {
     const spy = cy.spy(getTargetElement);
     container.addEventListener('click', spy);
     button.click();
+
     cy.wrap(spy).should('have.callCount', 1);
     cy.wrap(spy).should('have.returned', button);
   });
@@ -51,6 +52,7 @@ describe(`testing ${getTargetElement.name} utility method`, () => {
     document.body.appendChild(shadowContainer);
     const spy = cy.spy(getTargetElement);
     shadowContainer.addEventListener('click', spy);
+
     button.click();
     cy.wrap(spy).should('have.callCount', 1);
     cy.wrap(spy).should('have.returned', button);
@@ -62,6 +64,7 @@ describe(`testing ${getTargetElement.name} utility method`, () => {
     const spy = cy.spy(getTargetElement);
     shadowContainer.addEventListener('click', spy);
     button.click();
+
     cy.wrap(spy).should('have.callCount', 1);
     cy.wrap(spy).should('have.returned', shadowContainer);
   });
diff --git a/packages/x-components/tests/unit/main-scroll.spec.ts b/packages/x-components/tests/unit/main-scroll.spec.ts
index b3f99e43c7..b693a02f30 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -1,131 +1,92 @@
-import { mount } from 'cypress/vue2';
-import Vue from 'vue';
+import { h, onBeforeMount } from 'vue';
 import StaggeredFadeAndSlide from '../../src/components/animations/staggered-fade-and-slide.vue';
 import { XPlugin } from '../../src/plugins/x-plugin';
 import { UrlParams } from '../../src/types/url-params';
 import MainScrollItem from '../../src/x-modules/scroll/components/main-scroll-item.vue';
 import MainScroll from '../../src/x-modules/scroll/components/main-scroll.vue';
-import { scrollXModule } from '../../src/x-modules/scroll/x-module';
-import { e2eAdapter } from '../../src/adapter/e2e-adapter';
-import { XDummyBus } from '../../src/__tests__/bus.dummy';
 import { loadCss } from './css.utils';
 
-/**
- * Renders a {@link MainScroll} component with the provided options.
- *
- * @param options - The options to render this component with.
- * @returns An API to test the {@link MainScroll} component.
- */
-function renderMainScroll({
+function render({
   itemsCount = 10,
   itemHeight = '50px',
-  threshold,
-  margin,
-  useWindow,
-  windowScrollingElement,
-  template = `
-      <MainScroll v-bind="{ threshold, margin, useWindow }"
-                  class="root-scroll">
-        <div class="container" ${!useWindow ? `data-test="scroll"` : ''}>
-          <MainScrollItem
-            v-for="item in items"
-            class="item"
-            tag="article"
-            :item="item"
-            :data-test="item.id">
-            {{ item.id }}
-          </MainScrollItem>
-        </div>
-      </MainScroll>
-  `
-}: RenderMainScrollOptions = {}): RenderMainScrollAPI {
-  const userScrolledToElementSpy = cy.spy();
-  XPlugin.resetInstance();
-
-  document.body.dataset.test = document.documentElement.dataset.test = '';
-  if (windowScrollingElement === 'body') {
-    document.body.dataset.test = 'scroll';
-  } else if (windowScrollingElement === 'html') {
-    document.documentElement.dataset.test = 'scroll';
-  }
+  threshold = 0.3,
+  margin = '0px',
+  useWindow = false,
+  windowScrollingElement = undefined as undefined | 'body' | 'html',
+  wrapWithAnimation = false
+} = {}) {
   loadCss(
     `${windowScrollingElement === 'body' ? 'html { overflow: hidden; }' : ''}
     html,
-    body,
-    [data-cy-root], .root-scroll {
+    body {
       margin: 0;
       height: 100%;
       max-height: 100%;
     }
-
     [data-test='scroll'] {
       overflow: auto;
-      height: 100%;
+      height: 200px;
     }
-
-    .item {
-      height: ${itemHeight};
-    }`
+    .item { height: ${itemHeight}; }`
   );
+  document.body.dataset.test = document.documentElement.dataset.test = '';
+  if (windowScrollingElement === 'body') {
+    document.body.dataset.test = 'scroll';
+  } else if (windowScrollingElement === 'html') {
+    document.documentElement.dataset.test = 'scroll';
+  }
 
-  let pendingScroll: number;
+  const userScrolledToElementSpy = cy.spy();
 
   cy.viewport(1920, 200);
-  mount(
-    {
-      components: {
-        MainScroll,
-        MainScrollItem,
-        StaggeredFadeAndSlide
-      },
-      template,
-      data() {
-        return {
-          items: Array.from({ length: itemsCount }, (_, index) => ({ id: `item-${index}` })),
-          threshold,
-          margin,
-          useWindow
-        };
-      },
-      beforeCreate() {
+  cy.mount({
+    setup: () => {
+      const items = Array.from({ length: itemsCount }, (_, index) => ({ id: `item-${index}` }));
+
+      onBeforeMount(() => {
         XPlugin.bus.on('UserScrolledToElement').subscribe(userScrolledToElementSpy);
-        if (pendingScroll) {
-          XPlugin.bus.emit('ParamsLoadedFromUrl', <UrlParams>{ scroll: `item-${pendingScroll}` });
-        }
-      }
-    },
-    {
-      vue: Vue.extend({}),
-      plugins: [
-        [new XPlugin(new XDummyBus()), { adapter: e2eAdapter, initialXModules: [scrollXModule] }]
-      ]
+      });
+
+      return () => {
+        const mainScrollItemVNodes = items.map(item =>
+          h(
+            MainScrollItem,
+            { item, key: item.id, 'data-test': item.id, class: 'item', tag: 'article' },
+            item.id
+          )
+        );
+
+        return h(
+          MainScroll,
+          { threshold, margin, useWindow },
+          h(
+            'div',
+            { ...(!useWindow && { 'data-test': 'scroll' }) },
+            wrapWithAnimation
+              ? h(StaggeredFadeAndSlide, mainScrollItemVNodes)
+              : mainScrollItemVNodes
+          )
+        );
+      };
     }
-  );
+  });
 
   return {
-    scrollToItem(index) {
-      cy.getByDataTest(`item-${index}`).then($0 => $0.get(0).scrollIntoView());
-    },
-    scrollBy(y) {
-      return cy.getByDataTest('scroll').then($0 => {
+    scrollToItem: (index: number) =>
+      cy.getByDataTest(`item-${index}`).then($0 => $0.get(0).scrollIntoView()),
+    scrollBy: (y: number) =>
+      cy.getByDataTest('scroll').then($0 => {
         $0.get(0).scrollBy(0, y);
-      });
-    },
-    restoreScrollToItem(index) {
-      pendingScroll = index;
-    },
-    getItem(index) {
-      return cy.getByDataTest(`item-${index}`);
-    },
-    getScrollingElement() {
-      return cy.getByDataTest('scroll');
-    },
+      }),
+    restoreScrollToItem: (index: number) =>
+      XPlugin.bus.emit('ParamsLoadedFromUrl', <UrlParams>{ scroll: `item-${index}` }),
+    getItem: (index: number) => cy.getByDataTest(`item-${index}`),
     userScrolledToElementSpy: () => cy.wrap(userScrolledToElementSpy)
   };
 }
 
 describe('testing MainScroll component', () => {
-  const cases: Array<Partial<RenderMainScrollOptions> & { description: string }> = [
+  const cases = [
     { description: 'when using the html element', useWindow: true, windowScrollingElement: 'html' },
     { description: 'when using the body element', useWindow: true, windowScrollingElement: 'body' },
     { description: 'when using a custom scrolling element' }
@@ -134,7 +95,8 @@ describe('testing MainScroll component', () => {
   cases.forEach(({ description, ...defaultParameters }) => {
     describe(description, () => {
       it('emits the first visible element', () => {
-        const { scrollToItem, userScrolledToElementSpy } = renderMainScroll(defaultParameters);
+        const { scrollToItem, userScrolledToElementSpy } = render(defaultParameters as any);
+
         userScrolledToElementSpy()
           .should('have.been.calledOnce')
           .should('have.been.calledWith', '');
@@ -144,7 +106,8 @@ describe('testing MainScroll component', () => {
       });
 
       it('ignores the first element of scroll', () => {
-        const { scrollToItem, userScrolledToElementSpy } = renderMainScroll(defaultParameters);
+        const { scrollToItem, userScrolledToElementSpy } = render(defaultParameters as any);
+
         scrollToItem(1);
         userScrolledToElementSpy().should('have.been.calledWith', 'item-1');
         userScrolledToElementSpy().should('not.have.been.calledWith', 'item-0');
@@ -154,45 +117,29 @@ describe('testing MainScroll component', () => {
       });
 
       it('restores the scroll', () => {
-        const { restoreScrollToItem, getItem } = renderMainScroll(defaultParameters);
+        const { restoreScrollToItem, getItem } = render(defaultParameters as any);
 
         restoreScrollToItem(5);
 
         cy.log('Item 5 should be in view.');
-        getItem(5).should('be.visible');
+        getItem(5).scrollIntoView().should('be.visible');
       });
 
       it('restores the scroll with transitions enabled', () => {
-        const { restoreScrollToItem, getItem } = renderMainScroll({
-          ...defaultParameters,
-          template: `
-            <MainScroll v-bind="{ threshold, margin, useWindow }">
-              <div data-test="main-scroll" id="rootScroll">
-                <StaggeredFadeAndSlide>
-                  <MainScrollItem
-                    v-for="item in items"
-                    class="item"
-                    tag="article"
-                    :item="item"
-                    :data-test="item.id"
-                    :key="item.id">
-                    {{ item.id }}
-                  </MainScrollItem>
-                </StaggeredFadeAndSlide>
-              </div>
-            </MainScroll>
-          `
+        const { restoreScrollToItem, getItem } = render({
+          ...(defaultParameters as any),
+          wrapWithAnimation: true
         });
 
         restoreScrollToItem(5);
 
         cy.log('Item 5 should be the first one.');
-        getItem(5).should('be.visible');
+        getItem(5).scrollIntoView().should('be.visible');
       });
 
       it('allows configuring when to consider an element visible', () => {
-        const { scrollToItem, userScrolledToElementSpy, scrollBy } = renderMainScroll({
-          ...defaultParameters,
+        const { scrollToItem, userScrolledToElementSpy, scrollBy } = render({
+          ...(defaultParameters as any),
           threshold: 1
         });
 
@@ -209,8 +156,8 @@ describe('testing MainScroll component', () => {
       });
 
       it('allows configuring the bounds of the intersection', () => {
-        const { scrollToItem, userScrolledToElementSpy, scrollBy } = renderMainScroll({
-          ...defaultParameters,
+        const { scrollToItem, userScrolledToElementSpy, scrollBy } = render({
+          ...(defaultParameters as any),
           margin: '-25px 0px 0px 0px',
           threshold: 0.5,
           itemHeight: '50px'
@@ -230,66 +177,3 @@ describe('testing MainScroll component', () => {
     });
   });
 });
-
-/**
- * Options to render the {@link MainScroll} component with.
- */
-interface RenderMainScrollOptions {
-  /** Number of elements to render. */
-  itemsCount?: number;
-  /**
-   * Bounds to adjust the size of the rect that the items should intersect with to be considered
-   * visible.
-   */
-  margin?: string;
-  /** The percentage of an element that should be visible to consider it the first one. */
-  threshold?: number;
-  /** The height of each one of the items. */
-  itemHeight?: string;
-  /** The template to render.*/
-  template?: string;
-  /** Enables listening to the global scroll instead of the wrapping element scroll. */
-  useWindow?: boolean;
-  /** When `useWindow=true`, the element that should be scrollable. */
-  windowScrollingElement?: 'body' | 'html';
-}
-
-/**
- * Test API for the {@link MainScroll} component.
- */
-interface RenderMainScrollAPI {
-  /**
-   * Retrieves the element with the given index.
-   *
-   * @param index - The index of the element to retrieve.
-   * @returns A Cypress object containing the target element.
-   */
-  getItem: (index: number) => Cypress.Chainable<JQuery>;
-  /**
-   * Restores the scroll to the element with the given index.
-   *
-   * @param index - The index of the element to restore the scroll to.
-   */
-  restoreScrollToItem: (index: number) => void;
-  /**
-   * Scrolls the nth element in the view.
-   *
-   * @param index - The index of the element to scroll in the view.
-   */
-  scrollToItem: (index: number) => void;
-  /**
-   * Scrolls the container by the given amount of pixels.
-   *
-   * @param y - The amount of pixels to scroll in the y axis.
-   * @returns The scrolling container.
-   */
-  scrollBy: (y: number) => Cypress.Chainable<JQuery>;
-  /**
-   * Retrieves the scrolling item.
-   *
-   * @returns A cypress wrapped scrolling item.
-   */
-  getScrollingElement: () => Cypress.Chainable<JQuery>;
-  /** Spy of {@link ScrollXEvents.UserScrolledToElement}. */
-  userScrolledToElementSpy: () => Cypress.Chainable<ReturnType<typeof cy.spy>>;
-}
diff --git a/packages/x-components/tests/unit/search-input.spec.ts b/packages/x-components/tests/unit/search-input.spec.ts
index 4f43c4ca63..1b1fc7ce69 100644
--- a/packages/x-components/tests/unit/search-input.spec.ts
+++ b/packages/x-components/tests/unit/search-input.spec.ts
@@ -1,50 +1,17 @@
-import { mount } from 'cypress/vue2';
-import Vue from 'vue';
-import { XPlugin } from '../../src/plugins/x-plugin';
-import { e2eAdapter } from '../../src/adapter/e2e-adapter';
 import SearchInput from '../../src/x-modules/search-box/components/search-input.vue';
-import { searchBoxXModule } from '../../src/x-modules/search-box';
-import { XDummyBus } from '../../src/__tests__/bus.dummy';
 
-/**
- * Renders an {@link SearchInput} component with the provided options.
- *
- * @returns Helper methods for the rendered {@link SearchInput}.
- */
-function mountSearchInput(): MountSearchInputAPI {
-  XPlugin.resetInstance();
-  mount(
-    {
-      components: {
-        SearchInput
-      },
-      template: `
-        <SearchInput />
-      `
-    },
-    {
-      vue: Vue.extend({}),
-      plugins: [
-        [new XPlugin(new XDummyBus()), { adapter: e2eAdapter, initialXModules: [searchBoxXModule] }]
-      ]
-    }
-  );
+function render() {
+  cy.mount(SearchInput);
 
   return {
-    getSearchInput() {
-      return cy.getByDataTest('search-input');
-    }
+    getSearchInput: () => cy.getByDataTest('search-input')
   };
 }
 
 describe('testing search input', () => {
   it('ignores invalid typed characters', () => {
-    const { getSearchInput } = mountSearchInput();
+    const { getSearchInput } = render();
+
     getSearchInput().type('le<g>o >star>').invoke('val').should('equal', 'lego star');
   });
 });
-
-interface MountSearchInputAPI {
-  /** Mounts search input api. */
-  getSearchInput: () => Cypress.Chainable<JQuery>;
-}
diff --git a/packages/x-components/tests/unit/sliding-panel.spec.ts b/packages/x-components/tests/unit/sliding-panel.spec.ts
index 3f1ec3143a..ae80d19cf5 100644
--- a/packages/x-components/tests/unit/sliding-panel.spec.ts
+++ b/packages/x-components/tests/unit/sliding-panel.spec.ts
@@ -1,119 +1,81 @@
-import { mount } from 'cypress/vue2';
-import Vue from 'vue';
+import { computed, h, ref } from 'vue';
 import SlidingPanel from '../../src/components/sliding-panel.vue';
-import { XPlugin } from '../../src/plugins/x-plugin';
-import { e2eAdapter } from '../../src/adapter/e2e-adapter';
-import { XDummyBus } from '../../src/__tests__/bus.dummy';
 import { loadCss } from './css.utils';
 
-/**
- * Renders an {@link SlidingPanel} component with the provided options.
- *
- * @param  options - Options to render {@link SlidingPanel} with.
- * @returns Helper methods for the rendered {@link SlidingPanel}.
- */
-function renderSlidingPanel({
-  items = 8,
-  scrollFactor,
-  resetOnContentChange,
-  showButtons,
-  buttonClass,
+function render({
+  scrollFactor = 0.7,
+  showButtons = true,
+  resetOnContentChange = true,
+  buttonClass = '',
+  itemsCount = ref(10),
   slidingPanelWidthPx = 400,
-  itemWidthPx = 100,
-  template = `
-      <div class="wrapper">
-        <div><input v-model.number="items" data-test="items-count" /></div>
-        <SlidingPanel v-bind="$attrs">
-          <ul class="container">
-            <li class="item" v-for="item in items" :key="item">Item {{ item }}</li>
-          </ul>
-        </SlidingPanel>
-      </div>
-  `
-}: RenderSlidingPanelOptions = {}): RenderSlidingPanelAPI {
-  XPlugin.resetInstance();
+  itemWidthPx = 100
+} = {}) {
   loadCss(`
-        .wrapper {
-          display: inline-flex;
-          flex-flow: column nowrap;
-        }
-        .x-sliding-panel__scroll {
-          flex: 0 0 auto !important;
-          width: ${slidingPanelWidthPx}px;
-        }
-
-        .container {
-          display: flex;
-          flex-flow: row nowrap;
-          padding: 0;
-          list-style: none;
-        }
-
-        .item {
-          flex: 0 0 auto;
-          width: ${itemWidthPx}px;
-        }`);
-  mount(
-    {
-      components: {
-        SlidingPanel
-      },
-      inheritAttrs: false,
-      template,
-      data() {
-        return {
-          items
-        };
-      }
-    },
-    {
-      vue: Vue.extend({}),
-      plugins: [[new XPlugin(new XDummyBus()), { adapter: e2eAdapter }]],
-      propsData: {
-        scrollFactor,
-        resetOnContentChange,
-        showButtons,
-        buttonClass
-      }
+    .wrapper {
+      display: inline-flex;
+      flex-flow: column nowrap;
     }
+    .x-sliding-panel__scroll {
+      flex: 0 0 auto !important;
+      width: ${slidingPanelWidthPx}px;
+    }
+    .container {
+      display: flex;
+      flex-flow: row nowrap;
+      padding: 0;
+      list-style: none;
+    }
+    .item {
+      flex: 0 0 auto;
+      width: ${itemWidthPx}px;
+    }`);
+
+  const items = computed(() =>
+    Array.from({ length: itemsCount.value }, (_, index) => ({ id: `item-${index}` }))
+  );
+
+  cy.mount(() =>
+    h('div', { class: 'wrapper' }, [
+      h('input', {
+        'data-test': 'items-count',
+        value: itemsCount.value,
+        onInput: event => (itemsCount.value = +(event.target as HTMLInputElement).value)
+      }),
+      h(
+        SlidingPanel,
+        { scrollFactor, showButtons, resetOnContentChange, buttonClass },
+        h(
+          'ul',
+          { class: 'container' },
+          items.value.map(item => h('li', { class: 'item', key: item.id }, item.id))
+        )
+      )
+    ])
   );
 
   return {
-    getSlidingPanel() {
-      return cy.getByDataTest('sliding-panel');
-    },
-    getLeftButton() {
-      return cy.getByDataTest('sliding-panel-left-button');
-    },
-    getRightButton() {
-      return cy.getByDataTest('sliding-panel-right-button');
-    },
-    getScrollPosition() {
-      return cy.getByDataTest('sliding-panel-scroll').invoke('scrollLeft');
-    },
-    scrollTo(position) {
+    getSlidingPanel: () => cy.getByDataTest('sliding-panel'),
+    getLeftButton: () => cy.getByDataTest('sliding-panel-left-button'),
+    getRightButton: () => cy.getByDataTest('sliding-panel-right-button'),
+    getScrollPosition: () => cy.getByDataTest('sliding-panel-scroll').invoke('scrollLeft'),
+    scrollTo: (position: number) =>
       cy.getByDataTest('sliding-panel-scroll').scrollTo(position, 0, {
         easing: 'linear',
         duration: 500
-      });
-    },
-    setScrollWidth(widthPx) {
+      }),
+    setScrollWidth: (widthPx: number) =>
       cy.getByDataTest('sliding-panel-scroll').then($scroll => {
         $scroll.css('width', `${widthPx}px`);
-      });
-    },
-    setItemsCount(itemsCountCount) {
-      cy.getByDataTest('items-count').type(`${itemsCountCount}`);
-    }
+      }),
+    setItemsCount: (itemsCountCount: number) =>
+      cy.getByDataTest('items-count').type(`${itemsCountCount}`)
   };
 }
 
 describe('Testing sliding panel', () => {
   it('shows the scroll buttons only when needed', () => {
-    const { getLeftButton, getRightButton, getScrollPosition, scrollTo } = renderSlidingPanel({
-      items: 10,
-      itemWidthPx: 100,
-      slidingPanelWidthPx: 400,
+    const { getLeftButton, getRightButton, getScrollPosition, scrollTo } = render({
       scrollFactor: 1
     });
 
@@ -141,7 +103,9 @@ describe('Testing sliding panel', () => {
   });
 
   it('allows hiding the scroll buttons', () => {
-    const { getLeftButton, getRightButton, scrollTo } = renderSlidingPanel({ showButtons: false });
+    const { getLeftButton, getRightButton, scrollTo } = render({
+      showButtons: false
+    });
 
     scrollTo(1);
     getLeftButton().should('not.exist');
@@ -149,10 +113,8 @@ describe('Testing sliding panel', () => {
   });
 
   it('adds scroll position classes properly', () => {
-    const { scrollTo, getSlidingPanel } = renderSlidingPanel({
-      slidingPanelWidthPx: 500,
-      items: 10,
-      itemWidthPx: 100
+    const { scrollTo, getSlidingPanel } = render({
+      slidingPanelWidthPx: 500
     });
 
     getSlidingPanel()
@@ -171,11 +133,9 @@ describe('Testing sliding panel', () => {
   });
 
   it('allows to configure the scroll amount for each button', () => {
-    const { getLeftButton, getRightButton, getScrollPosition } = renderSlidingPanel({
-      items: 10,
+    const { getLeftButton, getRightButton, getScrollPosition } = render({
       scrollFactor: 0.5,
-      slidingPanelWidthPx: 500,
-      itemWidthPx: 100
+      slidingPanelWidthPx: 500
     });
 
     getRightButton().click();
@@ -192,25 +152,20 @@ describe('Testing sliding panel', () => {
   });
 
   it('allows to configure scroll buttons content', () => {
-    const { getLeftButton, getRightButton } = renderSlidingPanel({
-      template: `
-        <SlidingPanel>
-          <template #sliding-panel-left-button>Left</template>
-          <div class="width: 1000px;">Sample Content</div>
-          <template #sliding-panel-right-button>Right</template>
-        </SlidingPanel>`
-    });
-
-    getLeftButton().should('have.text', 'Left');
-    getRightButton().should('have.text', 'Right');
+    cy.mount(() =>
+      h(SlidingPanel, null, {
+        default: () => 'Sample content',
+        'sliding-panel-left-button': () => 'Left',
+        'sliding-panel-right-button': () => 'Right'
+      })
+    );
+
+    cy.getByDataTest('sliding-panel-left-button').should('have.text', 'Left');
+    cy.getByDataTest('sliding-panel-right-button').should('have.text', 'Right');
   });
 
   it('updates scroll buttons visibility when resized', () => {
-    const { getLeftButton, getRightButton, scrollTo, setScrollWidth } = renderSlidingPanel({
-      items: 10,
-      itemWidthPx: 100,
-      slidingPanelWidthPx: 400
-    });
+    const { getLeftButton, getRightButton, scrollTo, setScrollWidth } = render();
 
     getLeftButton().should('not.be.visible');
     getRightButton().should('be.visible');
@@ -229,8 +184,7 @@ describe('Testing sliding panel', () => {
   });
 
   it('resets the scroll when content changes', () => {
-    const { getLeftButton, getRightButton, scrollTo, getScrollPosition, setItemsCount } =
-      renderSlidingPanel();
+    const { getLeftButton, getRightButton, scrollTo, getScrollPosition, setItemsCount } = render();
 
     scrollTo(100);
     getRightButton().should('be.visible');
@@ -243,10 +197,9 @@ describe('Testing sliding panel', () => {
   });
 
   it('allows disabling resetting the scroll when content changes', () => {
-    const { getLeftButton, getRightButton, getScrollPosition, setItemsCount, scrollTo } =
-      renderSlidingPanel({
-        resetOnContentChange: false
-      });
+    const { getLeftButton, getRightButton, getScrollPosition, setItemsCount, scrollTo } = render({
+      resetOnContentChange: false
+    });
 
     scrollTo(100);
     getRightButton().should('be.visible');
@@ -259,7 +212,7 @@ describe('Testing sliding panel', () => {
   });
 
   it('allows adding CSS classes to the buttons', () => {
-    const { getLeftButton, getRightButton, scrollTo } = renderSlidingPanel({
+    const { getLeftButton, getRightButton, scrollTo } = render({
       buttonClass: 'test-x-button--round'
     });
 
@@ -268,51 +221,3 @@ describe('Testing sliding panel', () => {
     getLeftButton().should('be.visible').should('have.class', 'test-x-button--round');
   });
 });
-
-interface RenderSlidingPanelOptions {
-  /** The amount of items to render. */
-  items?: number;
-  /** The width of each item. */
-  itemWidthPx?: number;
-  /** The width of the scroll of the sliding panel. */
-  slidingPanelWidthPx?: number;
-  /** The template to render. */
-  template?: string;
-  /** The {@link SlidingPanel.scrollFactor} prop. */
-  scrollFactor?: number;
-  /** The {@link SlidingPanel.resetOnContentChange} prop. */
-  resetOnContentChange?: boolean;
-  /** The {@link SlidingPanel.showButtons} prop. */
-  showButtons?: boolean;
-  /** The {@link SlidingPanel.buttonClass} prop. */
-  buttonClass?: string;
-}
-
-interface RenderSlidingPanelAPI {
-  /** Retrieves the sliding panel. */
-  getSlidingPanel: () => Cypress.Chainable<JQuery>;
-  /** Retrieves the left button of the sliding panel. */
-  getLeftButton: () => Cypress.Chainable<JQuery>;
-  /** Retrieves the right button of the sliding panel. */
-  getRightButton: () => Cypress.Chainable<JQuery>;
-  /** Retrieves the scrolled distance of the sliding panel. */
-  getScrollPosition: () => Cypress.Chainable<number>;
-  /**
-   * Manually scrolls to the desired position.
-   *
-   * @param position - The distance that should be scrolled.
-   */
-  scrollTo: (position: number) => void;
-  /**
-   * Updates the sliding panel scroll container width.
-   *
-   * @param widthPx - The width in pixels for the scrollable container.
-   */
-  setScrollWidth: (widthPx: number) => void;
-  /**
-   * Updates the amount of items rendered in the sliding panel.
-   *
-   * @param itemsCount - The amount of items render.
-   */
-  setItemsCount: (itemsCount: number) => void;
-}
diff --git a/packages/x-components/tests/unit/useDevice.spec.ts b/packages/x-components/tests/unit/useDevice.spec.ts
index 7aec071f4c..8cbe7dbfd9 100644
--- a/packages/x-components/tests/unit/useDevice.spec.ts
+++ b/packages/x-components/tests/unit/useDevice.spec.ts
@@ -1,44 +1,32 @@
-import { mount } from 'cypress/vue2';
+import { h, Ref } from 'vue';
 import { createUseDevice } from '../../src/composables/create-use-device';
 
-/**
- * Mounts a test component displaying all the values of the composable created with
- * `createUseDevice`.
- *
- * @param devices - The configuration of the devices breakpoints.
- * @returns An API to test the component.
- */
-function mountTestComponent<Device extends string>(
-  devices: Record<Device, number>
-): MountTestComponentAPI {
-  const useDevice = createUseDevice(devices);
-  mount({
-    setup() {
-      return {
-        devices: useDevice()
-      };
-    },
-    template: `
-        <div>
-          <div v-for="(value, device) in devices" :key="device">
-            {{ device }}:
-            <span :data-test="device">{{ value.value }}</span>
-          </div>
-        </div>
-      `
+function render() {
+  const useDevice = createUseDevice({ mobile: 0, tablet: 744, desktop: 1200 });
+
+  cy.mount({
+    setup: () => {
+      const devices = useDevice() as Record<string, Ref<boolean>>;
+
+      return () =>
+        Object.entries(devices).map(([device, value]) =>
+          h('div', { key: device }, [
+            h('span', device),
+            h('span', ' - '),
+            h('span', { 'data-test': device }, value.value)
+          ])
+        );
+    }
   });
 
   return {
-    getDeviceValue(key: string) {
-      return cy.getByDataTest(key);
-    }
+    getDeviceValue: (key: string) => cy.getByDataTest(key)
   };
 }
 
-const defaultDevices = { mobile: 0, tablet: 744, desktop: 1200 };
 describe('testing createUseDevice composable factory', () => {
   it('detects the right device', () => {
-    const { getDeviceValue } = mountTestComponent(defaultDevices);
+    const { getDeviceValue } = render();
 
     cy.viewport(1300, 800);
 
@@ -89,7 +77,3 @@ describe('testing createUseDevice composable factory', () => {
     getDeviceValue('deviceName').should('contain.text', 'mobile');
   });
 });
-
-interface MountTestComponentAPI {
-  getDeviceValue: (key: string) => Cypress.Chainable<JQuery>;
-}
diff --git a/packages/x-components/vite.config.ts b/packages/x-components/vite.config.ts
index 1133057993..e71b2c78c8 100644
--- a/packages/x-components/vite.config.ts
+++ b/packages/x-components/vite.config.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'path';
-import vue from '@vitejs/plugin-vue2';
+import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
 import Inspector from 'vite-plugin-vue-inspector';
 
@@ -11,17 +11,10 @@ export const vueDocsPlugin = {
 };
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueDocsPlugin,
-    Inspector({
-      vue: 2
-    })
-  ],
+  plugins: [vue(), vueDocsPlugin, Inspector()],
   resolve: {
     alias: {
-      vue: resolve(__dirname, 'node_modules/vue'),
-      'vue-runtime-helpers': 'node_modules/vue-runtime-helpers'
+      vue: resolve(__dirname, 'node_modules/vue')
     }
   },
   server: {
diff --git a/packages/x-tailwindcss/CHANGELOG.md b/packages/x-tailwindcss/CHANGELOG.md
index d1e2ef7ffc..6f1a51e756 100644
--- a/packages/x-tailwindcss/CHANGELOG.md
+++ b/packages/x-tailwindcss/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.0-alpha.6](https://github.com/empathyco/x/compare/@empathyco/x-tailwindcss@1.2.0-alpha.5...@empathyco/x-tailwindcss@1.2.0-alpha.6) (2024-09-05)
+
+**Note:** Version bump only for package @empathyco/x-tailwindcss
+
+
+
+
+
 ## [1.2.0-alpha.5](https://github.com/empathyco/x/compare/@empathyco/x-tailwindcss@1.2.0-alpha.4...@empathyco/x-tailwindcss@1.2.0-alpha.5) (2024-08-19)
 
 
diff --git a/packages/x-tailwindcss/package.json b/packages/x-tailwindcss/package.json
index 1c18f2f217..ba4e0a0310 100644
--- a/packages/x-tailwindcss/package.json
+++ b/packages/x-tailwindcss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-tailwindcss",
-  "version": "1.2.0-alpha.5",
+  "version": "1.2.0-alpha.6",
   "description": "Empathy X Tailwind plugin",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -69,10 +69,10 @@
     "typescript": "~4.9.4",
     "vite": "~4.5.0",
     "vite-plugin-vue2": "~2.0.2",
-    "vue": "~2.7.14",
+    "vue": "~2.7.16",
     "vue-class-component": "~7.2.6",
     "vue-property-decorator": "~8.5.0",
-    "vue-template-compiler": "~2.7.14"
+    "vue-template-compiler": "~2.7.16"
   },
   "publishConfig": {
     "access": "public"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 345906a412..ab0a985672 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,23 +53,23 @@ importers:
         version: link:../x-utils
       '@vue/compat':
         specifier: ^3.4.22
-        version: 3.4.22(vue@3.4.22)
+        version: 3.4.22(vue@3.4.31)
       '@vueuse/core':
         specifier: ~10.7.1
-        version: 10.7.1(vue@3.4.22)
+        version: 10.7.1(vue@3.4.31)
       vue:
         specifier: ^3.4.22
-        version: 3.4.22(typescript@4.9.4)
+        version: 3.4.31(typescript@4.9.4)
       vue-router:
         specifier: ^4.3.0
-        version: 4.3.0(vue@3.4.22)
+        version: 4.4.0(vue@3.4.31)
       vuex:
         specifier: 4.0.2
-        version: 4.0.2(vue@3.4.22)
+        version: 4.0.2(vue@3.4.31)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.0.4(vite@4.5.0)(vue@3.4.22)
+        version: 5.0.5(vite@4.5.0)(vue@3.4.31)
       '@vue/runtime-dom':
         specifier: ^3.4.22
         version: 3.4.22
@@ -78,10 +78,10 @@ importers:
         version: 4.9.4
       vite:
         specifier: ^4.5.0
-        version: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
+        version: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
       vue-tsc:
         specifier: ^2.0.13
-        version: 2.0.13(typescript@4.9.4)(vue@3.4.22)
+        version: 2.0.13(typescript@4.9.4)(vue@3.4.31)
 
   packages/deep-merge:
     dependencies:
@@ -103,10 +103,10 @@ importers:
         version: 3.0.2
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       ts-node:
         specifier: ~10.9.1
-        version: 10.9.1(@types/node@18.19.3)(typescript@4.9.4)
+        version: 10.9.1(@types/node@18.19.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -173,10 +173,10 @@ importers:
         version: 27.5.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -192,10 +192,10 @@ importers:
         version: 27.5.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -223,7 +223,7 @@ importers:
         version: 7.32.1(eslint@8.33.0)
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       react:
         specifier: ~16.9.0
         version: 16.9.0
@@ -235,13 +235,13 @@ importers:
         version: 2.0.0
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
       vite:
         specifier: ~4.5.0
-        version: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
+        version: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
       vue:
         specifier: ~2.7.14
         version: 2.7.14
@@ -260,10 +260,10 @@ importers:
         version: 27.5.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -288,13 +288,13 @@ importers:
         version: 8.2.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rimraf:
         specifier: ~3.0.2
         version: 3.0.2
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -316,10 +316,10 @@ importers:
     devDependencies:
       '@microsoft/api-documenter':
         specifier: ~7.23.0
-        version: 7.23.12(@types/node@18.19.3)
+        version: 7.23.0(@types/node@18.19.0)
       '@microsoft/api-extractor':
         specifier: ~7.39.0
-        version: 7.39.0(@types/node@18.19.3)
+        version: 7.39.0(@types/node@18.19.0)
       '@types/jest':
         specifier: ~27.5.0
         version: 27.5.0
@@ -328,13 +328,13 @@ importers:
         version: 8.2.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rimraf:
         specifier: ~3.0.2
         version: 3.0.2
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -351,21 +351,21 @@ importers:
         specifier: ~2.6.0
         version: 2.6.0
       vue-i18n:
-        specifier: ~8.28.2
-        version: 8.28.2(vue@2.7.14)
+        specifier: ~9.14.0
+        version: 9.14.0(vue@3.4.31)
     devDependencies:
       '@types/jest':
         specifier: ~27.5.0
         version: 27.5.0
       '@types/node':
         specifier: ~18.19.0
-        version: 18.19.3
+        version: 18.19.0
       '@vue/test-utils':
-        specifier: ~1.0.3
-        version: 1.0.3(vue-template-compiler@2.7.14)(vue@2.7.14)
+        specifier: ~2.4.6
+        version: 2.4.6
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rimraf:
         specifier: ~3.0.2
         version: 3.0.2
@@ -383,13 +383,13 @@ importers:
         version: 0.36.0(rollup@4.9.1)(typescript@4.9.4)
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
       vue:
-        specifier: ~2.7.14
-        version: 2.7.14
+        specifier: ~3.4.31
+        version: 3.4.31(typescript@4.9.4)
 
   packages/x-bus:
     dependencies:
@@ -414,13 +414,13 @@ importers:
         version: 8.2.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rimraf:
         specifier: ~3.0.2
         version: 3.0.2
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -456,9 +456,9 @@ importers:
         version: 6.5.0
       '@vueuse/core':
         specifier: ~10.7.1
-        version: 10.7.1(vue@2.7.14)
+        version: 10.7.1(vue@3.4.31)
       js-md5:
-        specifier: ^0.8.3
+        specifier: ~0.8.3
         version: 0.8.3
       rxjs:
         specifier: ~7.8.0
@@ -466,40 +466,25 @@ importers:
       tslib:
         specifier: ~2.6.0
         version: 2.6.0
-      vue-class-component:
-        specifier: ~7.2.6
-        version: 7.2.6(vue@2.7.14)
       vue-global-events:
-        specifier: ~1.2.1
-        version: 1.2.1
-      vue-property-decorator:
-        specifier: ~8.5.0
-        version: 8.5.0(vue-class-component@7.2.6)(vue@2.7.14)
-      vue-runtime-helpers:
-        specifier: ~1.1.2
-        version: 1.1.2
+        specifier: ~3.0.1
+        version: 3.0.1(vue@3.4.31)
     devDependencies:
       '@badeball/cypress-cucumber-preprocessor':
         specifier: ~20.0.0
-        version: 20.0.1(cypress@13.6.0)(typescript@4.9.4)
+        version: 20.0.0(cypress@13.6.0)(typescript@4.9.4)
       '@bahmutov/cypress-esbuild-preprocessor':
         specifier: ~2.2.0
         version: 2.2.0(esbuild@0.20.0)
-      '@cypress/vue2':
-        specifier: ~2.0.1
-        version: 2.0.1(cypress@13.6.0)(vue@2.7.14)
       '@empathyco/x-tailwindcss':
-        specifier: ^1.2.0-alpha.5
+        specifier: ^1.2.0-alpha.6
         version: link:../x-tailwindcss
       '@microsoft/api-documenter':
         specifier: ~7.23.0
-        version: 7.23.12(@types/node@18.19.3)
+        version: 7.23.0(@types/node@18.19.0)
       '@microsoft/api-extractor':
         specifier: ~7.39.0
-        version: 7.39.0(@types/node@18.19.3)
-      '@rollup/plugin-commonjs':
-        specifier: ~25.0.7
-        version: 25.0.7(rollup@4.9.1)
+        version: 7.39.0(@types/node@18.19.0)
       '@testing-library/jest-dom':
         specifier: ~5.17.0
         version: 5.17.0
@@ -507,26 +492,26 @@ importers:
         specifier: ~10.2.0
         version: 10.2.0(postcss@8.4.12)
       '@types/glob':
-        specifier: ^8.0.1
+        specifier: ~8.0.1
         version: 8.0.1
       '@types/jest':
         specifier: ~27.5.0
         version: 27.5.0
       '@types/node':
         specifier: ~18.19.0
-        version: 18.19.3
+        version: 18.19.0
       '@types/testing-library__jest-dom':
         specifier: ~5.14.5
         version: 5.14.5
-      '@vitejs/plugin-vue2':
-        specifier: ^2.2.0
-        version: 2.2.0(vite@4.5.0)(vue@2.7.14)
+      '@vitejs/plugin-vue':
+        specifier: ~5.1.2
+        version: 5.1.2(vite@4.5.0)(vue@3.4.31)
       '@vue/test-utils':
-        specifier: ~1.0.3
-        version: 1.0.3(vue-template-compiler@2.7.14)(vue@2.7.14)
-      '@vue/vue2-jest':
-        specifier: ~27.0.0-alpha.3
-        version: 27.0.0-alpha.3(@babel/core@7.23.3)(jest@27.5.0)(ts-jest@27.1.0)(vue-template-compiler@2.7.14)(vue@2.7.14)
+        specifier: ~2.4.6
+        version: 2.4.6
+      '@vue/vue3-jest':
+        specifier: ~27.0.0
+        version: 27.0.0(@babel/core@7.25.2)(jest@27.5.0)(ts-jest@27.1.0)(typescript@4.9.4)(vue@3.4.31)
       autoprefixer:
         specifier: ~10.4.4
         version: 10.4.4(postcss@8.4.12)
@@ -544,7 +529,7 @@ importers:
         version: 10.3.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       jest-scss-transform:
         specifier: ~1.0.1
         version: 1.0.1
@@ -576,8 +561,8 @@ importers:
         specifier: ~0.36.0
         version: 0.36.0(rollup@4.9.1)(typescript@4.9.4)
       rollup-plugin-vue:
-        specifier: ~5.1.9
-        version: 5.1.9(postcss@8.4.12)(vue-template-compiler@2.7.14)
+        specifier: ~6.0.0
+        version: 6.0.0(@vue/compiler-sfc@3.4.35)
       sass:
         specifier: ~1.70.0
         version: 1.70.0
@@ -586,37 +571,34 @@ importers:
         version: 2.0.0
       tailwindcss:
         specifier: ~3.4.0
-        version: 3.4.0(ts-node@10.9.1)
+        version: 3.4.0(ts-node@10.9.2)
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       ts-node:
-        specifier: ~10.9.1
-        version: 10.9.1(@types/node@18.19.3)(typescript@4.9.4)
+        specifier: ~10.9.2
+        version: 10.9.2(@types/node@18.19.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
       vite:
-        specifier: ^4.5.0
-        version: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
+        specifier: ~4.5.0
+        version: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
       vite-plugin-vue-inspector:
-        specifier: ^4.0.0
-        version: 4.0.0(vite@4.5.0)
+        specifier: ~5.1.2
+        version: 5.1.2(vite@4.5.0)
       vue:
-        specifier: ~2.7.14
-        version: 2.7.14
+        specifier: ~3.4.31
+        version: 3.4.31(typescript@4.9.4)
       vue-docgen-cli:
-        specifier: ~4.67.0
-        version: 4.67.0(vue@2.7.14)
+        specifier: ~4.79.0
+        version: 4.79.0(vue@3.4.31)
       vue-router:
-        specifier: ~3.6.5
-        version: 3.6.5(vue@2.7.14)
-      vue-template-compiler:
-        specifier: ~2.7.14
-        version: 2.7.14(vue@2.7.14)
+        specifier: ~4.4.0
+        version: 4.4.0(vue@3.4.31)
       vuex:
-        specifier: ~3.6.2
-        version: 3.6.2(vue@2.7.14)
+        specifier: 4.0.2
+        version: 4.0.2(vue@3.4.31)
     publishDirectory: dist
 
   packages/x-priority-queue:
@@ -636,13 +618,13 @@ importers:
         version: 8.2.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rimraf:
         specifier: ~3.0.2
         version: 3.0.2
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -654,16 +636,16 @@ importers:
         version: 27.5.0
       '@types/node':
         specifier: ~18.19.0
-        version: 18.19.3
+        version: 18.19.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rimraf:
         specifier: ~3.0.2
         version: 3.0.2
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -703,31 +685,31 @@ importers:
         version: 0.36.0(rollup@4.9.1)(typescript@4.9.4)
       rollup-plugin-vue:
         specifier: ~5.1.9
-        version: 5.1.9(postcss@8.4.12)(vue-template-compiler@2.7.14)
+        version: 5.1.9(postcss@8.4.12)(vue-template-compiler@2.7.16)
       tailwindcss:
         specifier: ~3.4.0
-        version: 3.4.0(ts-node@10.9.1)
+        version: 3.4.0(ts-node@10.9.2)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
       vite:
         specifier: ~4.5.0
-        version: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
+        version: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
       vite-plugin-vue2:
         specifier: ~2.0.2
-        version: 2.0.2(vite@4.5.0)(vue-template-compiler@2.7.14)(vue@2.7.14)
+        version: 2.0.2(vite@4.5.0)(vue-template-compiler@2.7.16)(vue@2.7.16)
       vue:
-        specifier: ~2.7.14
-        version: 2.7.14
+        specifier: ~2.7.16
+        version: 2.7.16
       vue-class-component:
         specifier: ~7.2.6
-        version: 7.2.6(vue@2.7.14)
+        version: 7.2.6(vue@2.7.16)
       vue-property-decorator:
         specifier: ~8.5.0
-        version: 8.5.0(vue-class-component@7.2.6)(vue@2.7.14)
+        version: 8.5.0(vue-class-component@7.2.6)(vue@2.7.16)
       vue-template-compiler:
-        specifier: ~2.7.14
-        version: 2.7.14(vue@2.7.14)
+        specifier: ~2.7.16
+        version: 2.7.16(vue@2.7.16)
 
   packages/x-translations:
     dependencies:
@@ -740,13 +722,13 @@ importers:
         version: 27.5.0
       '@types/node':
         specifier: ~18.19.0
-        version: 18.19.3
+        version: 18.19.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
@@ -768,16 +750,16 @@ importers:
         version: 1.4.0-alpha.11
       '@microsoft/api-documenter':
         specifier: ~7.23.0
-        version: 7.23.12(@types/node@18.19.3)
+        version: 7.23.0(@types/node@18.19.0)
       '@microsoft/api-extractor':
         specifier: ~7.39.0
-        version: 7.39.0(@types/node@18.19.3)
+        version: 7.39.0(@types/node@18.19.0)
       '@types/jest':
         specifier: ~27.5.0
         version: 27.5.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rollup:
         specifier: ~4.9.1
         version: 4.9.1
@@ -805,29 +787,22 @@ importers:
         version: 27.5.0
       jest:
         specifier: ~27.5.0
-        version: 27.5.0(ts-node@10.9.1)
+        version: 27.5.0(ts-node@10.9.2)
       rimraf:
         specifier: ~3.0.2
         version: 3.0.2
       ts-jest:
         specifier: ~27.1.0
-        version: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+        version: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
       typescript:
         specifier: ~4.9.4
         version: 4.9.4
 
 packages:
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution:
-      {
-        integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
-      }
-    engines: { node: '>=0.10.0' }
-
-  /@adobe/css-tools@4.3.1:
+  /@adobe/css-tools@4.4.0:
     resolution:
       {
-        integrity: sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
+        integrity: sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==
       }
     dev: true
 
@@ -839,81 +814,55 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
-  /@ampproject/remapping@2.2.1:
+  /@ampproject/remapping@2.3.0:
     resolution:
       {
-        integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+        integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
       }
     engines: { node: '>=6.0.0' }
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.18
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
-  /@babel/code-frame@7.22.13:
+  /@babel/code-frame@7.24.7:
     resolution:
       {
-        integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+        integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/highlight': 7.22.20
-      chalk: 2.4.2
+      '@babel/highlight': 7.24.7
+      picocolors: 1.0.1
     dev: true
 
-  /@babel/compat-data@7.22.9:
+  /@babel/compat-data@7.25.2:
     resolution:
       {
-        integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
+        integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==
       }
     engines: { node: '>=6.9.0' }
     dev: true
 
-  /@babel/core@7.22.9:
+  /@babel/core@7.25.2:
     resolution:
       {
-        integrity: sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==
+        integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.22.9
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9)
-      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9)
-      '@babel/helpers': 7.22.6
-      '@babel/parser': 7.24.4
-      '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.23.3
-      convert-source-map: 1.9.0
-      debug: 4.3.4(supports-color@8.1.1)
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/core@7.23.3:
-    resolution:
-      {
-        integrity: sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.3
-      '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.3)
-      '@babel/helpers': 7.23.2
-      '@babel/parser': 7.24.4
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.3
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.24.7
+      '@babel/generator': 7.25.0
+      '@babel/helper-compilation-targets': 7.25.2
+      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
+      '@babel/helpers': 7.25.0
+      '@babel/parser': 7.25.3
+      '@babel/template': 7.25.0
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
       convert-source-map: 2.0.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -921,188 +870,75 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/generator@7.22.9:
+  /@babel/generator@7.25.0:
     resolution:
       {
-        integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==
+        integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.23.3
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.18
+      '@babel/types': 7.25.2
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
       jsesc: 2.5.2
     dev: true
 
-  /@babel/generator@7.23.3:
+  /@babel/helper-annotate-as-pure@7.24.7:
     resolution:
       {
-        integrity: sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==
+        integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.23.3
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.18
-      jsesc: 2.5.2
+      '@babel/types': 7.25.2
     dev: true
 
-  /@babel/helper-annotate-as-pure@7.22.5:
+  /@babel/helper-compilation-targets@7.25.2:
     resolution:
       {
-        integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
+        integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-compilation-targets@7.22.15:
-    resolution:
-      {
-        integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/helper-validator-option': 7.22.15
-      browserslist: 4.21.9
+      '@babel/compat-data': 7.25.2
+      '@babel/helper-validator-option': 7.24.8
+      browserslist: 4.23.2
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-compilation-targets@7.22.9(@babel/core@7.22.9):
-    resolution:
-      {
-        integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.22.9
-      '@babel/helper-validator-option': 7.22.5
-      browserslist: 4.21.9
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: true
-
-  /@babel/helper-compilation-targets@7.22.9(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.23.3
-      '@babel/helper-validator-option': 7.22.5
-      browserslist: 4.21.9
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: true
-
-  /@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.3)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      semver: 6.3.1
-    dev: true
-
-  /@babel/helper-create-class-features-plugin@7.22.9(@babel/core@7.22.9):
+  /@babel/helper-create-class-features-plugin@7.25.0(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==
+        integrity: sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.22.9)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/core': 7.25.2
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-member-expression-to-functions': 7.24.8
+      '@babel/helper-optimise-call-expression': 7.24.7
+      '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/traverse': 7.25.3
       semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/helper-environment-visitor@7.22.20:
-    resolution:
-      {
-        integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
-      }
-    engines: { node: '>=6.9.0' }
-    dev: true
-
-  /@babel/helper-environment-visitor@7.22.5:
-    resolution:
-      {
-        integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
-      }
-    engines: { node: '>=6.9.0' }
-    dev: true
-
-  /@babel/helper-function-name@7.22.5:
-    resolution:
-      {
-        integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/template': 7.22.5
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-function-name@7.23.0:
-    resolution:
-      {
-        integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-hoist-variables@7.22.5:
-    resolution:
-      {
-        integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-member-expression-to-functions@7.23.0:
+  /@babel/helper-member-expression-to-functions@7.24.8:
     resolution:
       {
-        integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
+        integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@babel/helper-module-imports@7.22.15:
@@ -1112,969 +948,625 @@ packages:
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.25.2
     dev: true
 
-  /@babel/helper-module-imports@7.22.5:
+  /@babel/helper-module-imports@7.24.7:
     resolution:
       {
-        integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
+        integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9):
-    resolution:
-      {
-        integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-module-imports': 7.22.5
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
-    dev: true
-
-  /@babel/helper-module-transforms@7.22.9(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-module-imports': 7.22.5
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.3):
+  /@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+        integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
-    dev: true
-
-  /@babel/helper-optimise-call-expression@7.22.5:
-    resolution:
-      {
-        integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-plugin-utils@7.22.5:
-    resolution:
-      {
-        integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
-      }
-    engines: { node: '>=6.9.0' }
+      '@babel/core': 7.25.2
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-simple-access': 7.24.7
+      '@babel/helper-validator-identifier': 7.24.7
+      '@babel/traverse': 7.25.3
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/helper-replace-supers@7.22.20(@babel/core@7.22.9):
+  /@babel/helper-optimise-call-expression@7.24.7:
     resolution:
       {
-        integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
+        integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==
       }
     engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/types': 7.25.2
     dev: true
 
-  /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.3):
+  /@babel/helper-plugin-utils@7.24.8:
     resolution:
       {
-        integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
+        integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
       }
     engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
     dev: true
 
-  /@babel/helper-replace-supers@7.22.9(@babel/core@7.22.9):
+  /@babel/helper-replace-supers@7.25.0(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg==
+        integrity: sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-    dev: true
-
-  /@babel/helper-simple-access@7.22.5:
-    resolution:
-      {
-        integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
-    resolution:
-      {
-        integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-split-export-declaration@7.22.6:
-    resolution:
-      {
-        integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/helper-string-parser@7.22.5:
-    resolution:
-      {
-        integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
-      }
-    engines: { node: '>=6.9.0' }
-
-  /@babel/helper-validator-identifier@7.22.20:
-    resolution:
-      {
-        integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
-      }
-    engines: { node: '>=6.9.0' }
-
-  /@babel/helper-validator-option@7.22.15:
-    resolution:
-      {
-        integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
-      }
-    engines: { node: '>=6.9.0' }
-    dev: true
-
-  /@babel/helper-validator-option@7.22.5:
-    resolution:
-      {
-        integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==
-      }
-    engines: { node: '>=6.9.0' }
-    dev: true
-
-  /@babel/helpers@7.22.6:
-    resolution:
-      {
-        integrity: sha512-YjDs6y/fVOYFV8hAf1rxd1QvR9wJe1pDBZ2AREKq/SDayfPzgk0PBnVuTCE5X1acEpMMNOVUqoe+OwiZGJ+OaA==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.3
+      '@babel/core': 7.25.2
+      '@babel/helper-member-expression-to-functions': 7.24.8
+      '@babel/helper-optimise-call-expression': 7.24.7
+      '@babel/traverse': 7.25.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/helpers@7.23.2:
-    resolution:
-      {
-        integrity: sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/highlight@7.22.20:
-    resolution:
-      {
-        integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
-      }
-    engines: { node: '>=6.9.0' }
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-    dev: true
-
-  /@babel/parser@7.22.7:
-    resolution:
-      {
-        integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==
-      }
-    engines: { node: '>=6.0.0' }
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.23.3
-    dev: true
-
-  /@babel/parser@7.24.4:
-    resolution:
-      {
-        integrity: sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
-      }
-    engines: { node: '>=6.0.0' }
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.23.3
-
-  /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.22.9):
-    resolution:
-      {
-        integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-proposal-decorators@7.22.7(@babel/core@7.22.9):
-    resolution:
-      {
-        integrity: sha512-omXqPF7Onq4Bb7wHxXjM3jSMSJvUUbvDvmmds7KI5n9Cq6Ln5I05I1W2nRlRof1rGdiUxJrxwe285WF96XlBXQ==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-replace-supers': 7.22.9(@babel/core@7.22.9)
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/plugin-syntax-decorators': 7.22.5(@babel/core@7.22.9)
-    dev: true
-
-  /@babel/plugin-proposal-decorators@7.23.3(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-u8SwzOcP0DYSsa++nHd/9exlHb0NAlHCb890qtZZbSwPX2bFv8LBEztxwN7Xg/dS8oAFFidhrI9PBcLBJSkGRQ==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-create-class-features-plugin': 7.22.15(@babel/core@7.23.3)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.3)
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/plugin-syntax-decorators': 7.23.3(@babel/core@7.23.3)
-    dev: true
-
-  /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.22.9):
-    resolution:
-      {
-        integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.9)
-    dev: true
-
-  /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.3)
-    dev: true
-
-  /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.22.9):
+  /@babel/helper-simple-access@7.24.7:
     resolution:
       {
-        integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
+        integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==
       }
     engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.22.9
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.9)
-      '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.9)
-    dev: true
-
-  /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.23.3
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.23.3)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.3)
-      '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.23.3)
-    dev: true
-
-  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.22.9):
-    resolution:
-      {
-        integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.9)
-    dev: true
-
-  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.3)
-    dev: true
-
-  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-      }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
-      }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
-
-  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.3):
-    resolution:
-      {
-        integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
-      }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/plugin-syntax-decorators@7.22.5(@babel/core@7.22.9):
+  /@babel/helper-skip-transparent-expression-wrappers@7.24.7:
     resolution:
       {
-        integrity: sha512-avpUOBS7IU6al8MmF1XpAyj9QYeLPuSDJI5D4pVMSMdL7xQokKqJPYQC67RCT0aCTashUXPiGwMJ0DEXXCEmMA==
+        integrity: sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==
       }
     engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/plugin-syntax-decorators@7.23.3(@babel/core@7.23.3):
+  /@babel/helper-string-parser@7.24.8:
     resolution:
       {
-        integrity: sha512-cf7Niq4/+/juY67E0PbgH0TDhLQ5J7zS8C/Q5FFx+DWyrRa9sUQdTXkjqKu8zGvuqr7vw1muKiukseihU+PJDA==
+        integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
       }
     engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
 
-  /@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.3):
+  /@babel/helper-validator-identifier@7.24.7:
     resolution:
       {
-        integrity: sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==
+        integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
       }
     engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
 
-  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.3):
+  /@babel/helper-validator-option@7.24.8:
     resolution:
       {
-        integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+        integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==
       }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+    engines: { node: '>=6.9.0' }
     dev: true
 
-  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.3):
+  /@babel/helpers@7.25.0:
     resolution:
       {
-        integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+        integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==
       }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
+    engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
     dev: true
 
-  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.22.9):
+  /@babel/highlight@7.24.7:
     resolution:
       {
-        integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==
+        integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
       }
     engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-identifier': 7.24.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.0.1
     dev: true
 
-  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.3):
+  /@babel/parser@7.25.3:
     resolution:
       {
-        integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==
+        integrity: sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
       }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
+    engines: { node: '>=6.0.0' }
+    hasBin: true
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-    dev: true
+      '@babel/types': 7.25.2
 
-  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.3):
+  /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+        integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
       }
+    engines: { node: '>=6.9.0' }
+    deprecated:
+      This proposal has been merged to the ECMAScript standard and thus this plugin is no longer
+      maintained. Please use @babel/plugin-transform-class-properties instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-create-class-features-plugin': 7.25.0(@babel/core@7.25.2)
+      '@babel/helper-plugin-utils': 7.24.8
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.22.9):
+  /@babel/plugin-proposal-decorators@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+        integrity: sha512-RL9GR0pUG5Kc8BUWLNDm2T5OpYwSX15r98I0IkgmRQTXuELq/OynH8xtMTMvTJFjXbMWFVTKtYkTaYQsuAwQlQ==
       }
+    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-create-class-features-plugin': 7.25.0(@babel/core@7.25.2)
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-decorators': 7.24.7(@babel/core@7.25.2)
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.3):
+  /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+        integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
       }
+    engines: { node: '>=6.9.0' }
+    deprecated:
+      This proposal has been merged to the ECMAScript standard and thus this plugin is no longer
+      maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
     dev: true
 
-  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.3):
+  /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+        integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
       }
+    engines: { node: '>=6.9.0' }
+    deprecated:
+      This proposal has been merged to the ECMAScript standard and thus this plugin is no longer
+      maintained. Please use @babel/plugin-transform-object-rest-spread instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/compat-data': 7.25.2
+      '@babel/core': 7.25.2
+      '@babel/helper-compilation-targets': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.25.2)
     dev: true
 
-  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.22.9):
+  /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+        integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
       }
+    engines: { node: '>=6.9.0' }
+    deprecated:
+      This proposal has been merged to the ECMAScript standard and thus this plugin is no longer
+      maintained. Please use @babel/plugin-transform-optional-chaining instead.
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.3):
+  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+        integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
       }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.3):
+  /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+        integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
       }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.22.9):
+  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+        integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
       }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.3):
+  /@babel/plugin-syntax-decorators@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+        integrity: sha512-Ui4uLJJrRV1lb38zg1yYTmRKmiZLiftDEvZN2iq3kd9kUFU+PttmzTbAFC2ucRk/XJmtek6G23gPsuZbhrT8fQ==
       }
+    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.3):
+  /@babel/plugin-syntax-import-attributes@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+        integrity: sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.9):
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==
+        integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.3):
+  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==
+        integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.22.9):
+  /@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==
+        integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.23.3):
+  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==
+        integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-block-scoping@7.22.5(@babel/core@7.22.9):
+  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==
+        integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-block-scoping@7.22.5(@babel/core@7.23.3):
+  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==
+        integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.22.9):
+  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==
+        integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/template': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.23.3):
+  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==
+        integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/template': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-destructuring@7.22.5(@babel/core@7.22.9):
+  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==
+        integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
       }
-    engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-destructuring@7.22.5(@babel/core@7.23.3):
+  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==
+        integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-modules-commonjs@7.22.5(@babel/core@7.23.3):
+  /@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==
+        integrity: sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.23.3)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-simple-access': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-parameters@7.22.5(@babel/core@7.22.9):
+  /@babel/plugin-transform-arrow-functions@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==
+        integrity: sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-parameters@7.22.5(@babel/core@7.23.3):
+  /@babel/plugin-transform-block-scoping@7.25.0(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==
+        integrity: sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-spread@7.22.5(@babel/core@7.22.9):
+  /@babel/plugin-transform-computed-properties@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==
+        integrity: sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/template': 7.25.0
     dev: true
 
-  /@babel/plugin-transform-spread@7.22.5(@babel/core@7.23.3):
+  /@babel/plugin-transform-destructuring@7.24.8(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==
+        integrity: sha512-36e87mfY8TnRxc7yc6M9g9gOB7rKgSahqkIKwLpz4Ppk2+zC2Cy1is0uwtuSG6AE4zlTOUa+7JGz9jCJGLqQFQ==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/plugin-transform-typescript@7.22.9(@babel/core@7.22.9):
+  /@babel/plugin-transform-modules-commonjs@7.24.8(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-BnVR1CpKiuD0iobHPaM1iLvcwPYN2uVFAqoLVSpEDKWuOikoCv5HbKLxclhKYUXlWkX86DoZGtqI4XhbOsyrMg==
+        integrity: sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.9)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-simple-access': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/plugin-transform-typescript@7.23.3(@babel/core@7.23.3):
+  /@babel/plugin-transform-parameters@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-ogV0yWnq38CFwH20l2Afz0dfKuZBx9o/Y2Rmh5vuSS0YD1hswgEgTfyTzuSrT2q9btmHRSqYoSfwFUVaC1M1Jw==
+        integrity: sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==
       }
     engines: { node: '>=6.9.0' }
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.22.15(@babel/core@7.23.3)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.3)
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
     dev: true
 
-  /@babel/runtime@7.22.6:
+  /@babel/plugin-transform-spread@7.24.7(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+        integrity: sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==
       }
     engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
     dependencies:
-      regenerator-runtime: 0.13.11
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/template@7.22.15:
+  /@babel/plugin-transform-typescript@7.25.2(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
+        integrity: sha512-lBwRvjSmqiMYe/pS0+1gggjJleUJi7NzjvQ1Fkqtt69hBa/0t1YuW/MLQMAPixfwaQOHUXsd6jeU3Z+vdGv3+A==
       }
     engines: { node: '>=6.9.0' }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
+      '@babel/core': 7.25.2
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-create-class-features-plugin': 7.25.0(@babel/core@7.25.2)
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2)
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@babel/template@7.22.5:
+  /@babel/runtime@7.25.0:
     resolution:
       {
-        integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==
+        integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
+      regenerator-runtime: 0.14.1
     dev: true
 
-  /@babel/traverse@7.22.8:
+  /@babel/template@7.25.0:
     resolution:
       {
-        integrity: sha512-y6LPR+wpM2I3qJrsheCTwhIinzkETbplIgPBbwvqPKc+uljeA5gP+3nP8irdYt1mjQaDnlIcG+dw8OjAco4GXw==
+        integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.3
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
-      debug: 4.3.4(supports-color@8.1.1)
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/code-frame': 7.24.7
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
     dev: true
 
-  /@babel/traverse@7.23.3:
+  /@babel/traverse@7.25.3:
     resolution:
       {
-        integrity: sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==
+        integrity: sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.3
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
-      debug: 4.3.4(supports-color@8.1.1)
+      '@babel/code-frame': 7.24.7
+      '@babel/generator': 7.25.0
+      '@babel/parser': 7.25.3
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
+      debug: 4.3.6(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types@7.23.3:
+  /@babel/types@7.25.2:
     resolution:
       {
-        integrity: sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==
+        integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
       }
     engines: { node: '>=6.9.0' }
     dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-string-parser': 7.24.8
+      '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
-  /@badeball/cypress-configuration@6.1.0:
+  /@badeball/cypress-configuration@6.1.1:
     resolution:
       {
-        integrity: sha512-30M6frVmhP8MUKscg8CEWnPbDLYDRHswUdny1ajRJlW/kdlMZ5da+eDnzMW3qUW73JfqLRk1pteejwlcZOt0GQ==
+        integrity: sha512-0IcJFMiCRo33Ofrvxxojt5QRJWyxApymHuuy981FeXnOGz4UsWKgr/hRupeXkw2cKXvah+j+880kXliygxPOSQ==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      debug: 4.3.4(supports-color@8.1.1)
-      esbuild: 0.14.54
+      '@babel/parser': 7.25.3
+      debug: 4.3.6(supports-color@8.1.1)
+      esbuild: 0.19.12
       glob: 7.2.3
       minimatch: 3.1.2
       node-hook: 1.0.0
@@ -2082,10 +1574,10 @@ packages:
       - supports-color
     dev: true
 
-  /@badeball/cypress-cucumber-preprocessor@20.0.1(cypress@13.6.0)(typescript@4.9.4):
+  /@badeball/cypress-cucumber-preprocessor@20.0.0(cypress@13.6.0)(typescript@4.9.4):
     resolution:
       {
-        integrity: sha512-rokPo/4uEo0EGAFEpyl83SSEaL8CdC6k7ONC2HsD9hBDzTezIHW2gcgpbbc5yDoExqLicxJi/A0QACEq7JfcLg==
+        integrity: sha512-wBpPMazRqmzs86wocMKi686rEzwygRDLpQZk4X8LgllfhAdEYqk8GfeVsSUVKYvqiYljbb7k2Blj1zS5vlxNJw==
       }
     engines: { node: '>=18.0.0' }
     hasBin: true
@@ -2096,15 +1588,15 @@ packages:
       '@cypress/browserify-preprocessor':
         optional: true
     dependencies:
-      '@badeball/cypress-configuration': 6.1.0
+      '@badeball/cypress-configuration': 6.1.1
       '@cucumber/ci-environment': 10.0.1
-      '@cucumber/cucumber': 10.3.1
-      '@cucumber/cucumber-expressions': 17.0.1
+      '@cucumber/cucumber': 10.8.0
+      '@cucumber/cucumber-expressions': 17.1.0
       '@cucumber/gherkin': 27.0.0
       '@cucumber/html-formatter': 20.4.0(@cucumber/messages@22.0.0)
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@22.0.0)
       '@cucumber/messages': 22.0.0
-      '@cucumber/pretty-formatter': 1.0.0(@cucumber/cucumber@10.3.1)(@cucumber/messages@22.0.0)
+      '@cucumber/pretty-formatter': 1.0.1(@cucumber/cucumber@10.8.0)(@cucumber/messages@22.0.0)
       '@cucumber/tag-expressions': 6.1.0
       base64-js: 1.5.1
       chalk: 4.1.2
@@ -2112,12 +1604,12 @@ packages:
       common-ancestor-path: 1.0.1
       cosmiconfig: 8.3.6(typescript@4.9.4)
       cypress: 13.6.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       error-stack-parser: 2.1.4
-      esbuild: 0.19.11
-      glob: 10.3.10
+      esbuild: 0.19.12
+      glob: 10.3.16
       is-path-inside: 3.0.3
-      mocha: 10.2.0
+      mocha: 10.7.0
       seedrandom: 3.0.5
       source-map: 0.7.4
       split: 1.0.1
@@ -2135,7 +1627,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.17.0'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       esbuild: 0.20.0
     transitivePeerDependencies:
       - supports-color
@@ -2168,13 +1660,6 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@cucumber/ci-environment@10.0.0:
-    resolution:
-      {
-        integrity: sha512-lRkiehckosIOdc7p1L44nZsttO5dVHFjpwKKWZ07x8SeoAdV/sPuGe1PISe0AmAowFGza62nMOgG4KaroGzwFQ==
-      }
-    dev: true
-
   /@cucumber/ci-environment@10.0.1:
     resolution:
       {
@@ -2182,41 +1667,41 @@ packages:
       }
     dev: true
 
-  /@cucumber/cucumber-expressions@17.0.1:
+  /@cucumber/cucumber-expressions@17.1.0:
     resolution:
       {
-        integrity: sha512-reR7/sNRmDWgdz8BtFuHEwpksPnAkHty7gxUC2n0iaUPmckv9G5I5i+Vonc6xwUHDb/hmHPz/DyUL+Iv4Ao96w==
+        integrity: sha512-PCv/ppsPynniKPWJr5v566daCVe+pbxQpHGrIu/Ev57cCH9Rv+X0F6lio4Id3Z64TaG7btCRLUGewIgLwmrwOA==
       }
     dependencies:
       regexp-match-indices: 1.0.2
     dev: true
 
-  /@cucumber/cucumber@10.3.1:
+  /@cucumber/cucumber@10.8.0:
     resolution:
       {
-        integrity: sha512-0H0NkOXcYTCG1qCh3o0p1HPSMODGJmlHi1rm5yfoiMx5tJbBjxVNI2VVD2xtPWA+D6ehHQD9asewuzjMXrbPIw==
+        integrity: sha512-o8SR6MRQVCKKw4tytWqCqOjfX4cASj9dqpdHKHMi09rZWBCNQHBwH1TO9wj7NKjOa6RfUOTcgvDlayTcjyCH4A==
       }
     engines: { node: 18 || >=20 }
     hasBin: true
     dependencies:
-      '@cucumber/ci-environment': 10.0.0
-      '@cucumber/cucumber-expressions': 17.0.1
-      '@cucumber/gherkin': 27.0.0
-      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@27.0.0)(@cucumber/message-streams@4.0.1)(@cucumber/messages@24.0.1)
-      '@cucumber/gherkin-utils': 8.0.5
-      '@cucumber/html-formatter': 21.2.0(@cucumber/messages@24.0.1)
+      '@cucumber/ci-environment': 10.0.1
+      '@cucumber/cucumber-expressions': 17.1.0
+      '@cucumber/gherkin': 28.0.0
+      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@28.0.0)(@cucumber/message-streams@4.0.1)(@cucumber/messages@24.1.0)
+      '@cucumber/gherkin-utils': 9.0.0
+      '@cucumber/html-formatter': 21.3.1(@cucumber/messages@24.1.0)
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@22.0.0)
-      '@cucumber/messages': 24.0.1
+      '@cucumber/messages': 24.1.0
       '@cucumber/tag-expressions': 6.1.0
       assertion-error-formatter: 3.0.0
       capital-case: 1.0.4
       chalk: 4.1.2
       cli-table3: 0.6.3
       commander: 10.0.1
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       error-stack-parser: 2.1.4
       figures: 3.2.0
-      glob: 10.3.10
+      glob: 10.3.16
       has-ansi: 4.0.1
       indent-string: 4.0.0
       is-installed-globally: 0.4.0
@@ -2234,15 +1719,15 @@ packages:
       string-argv: 0.3.1
       strip-ansi: 6.0.1
       supports-color: 8.1.1
-      tmp: 0.2.1
-      type-fest: 4.9.0
+      tmp: 0.2.3
+      type-fest: 4.23.0
       util-arity: 1.1.0
       xmlbuilder: 15.1.1
-      yaml: 2.3.4
+      yaml: 2.5.0
       yup: 1.2.0
     dev: true
 
-  /@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@27.0.0)(@cucumber/message-streams@4.0.1)(@cucumber/messages@24.0.1):
+  /@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@28.0.0)(@cucumber/message-streams@4.0.1)(@cucumber/messages@24.1.0):
     resolution:
       {
         integrity: sha512-/7VkIE/ASxIP/jd4Crlp4JHXqdNFxPGQokqWqsaCCiqBiu5qHoKMxcWNlp9njVL/n9yN4S08OmY3ZR8uC5x74Q==
@@ -2253,43 +1738,43 @@ packages:
       '@cucumber/message-streams': '>=4.0.0'
       '@cucumber/messages': '>=17.1.1'
     dependencies:
-      '@cucumber/gherkin': 27.0.0
+      '@cucumber/gherkin': 28.0.0
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@22.0.0)
-      '@cucumber/messages': 24.0.1
+      '@cucumber/messages': 24.1.0
       commander: 9.1.0
       source-map-support: 0.5.21
     dev: true
 
-  /@cucumber/gherkin-utils@8.0.5:
+  /@cucumber/gherkin-utils@9.0.0:
     resolution:
       {
-        integrity: sha512-kxM1OCDjYddF26VKc892PF0GokW4wUIl1PUz3TIXsPZgS39ExM1pF8oww8mlGFD2B0+4op/cSE3SSIME5H3aNw==
+        integrity: sha512-clk4q39uj7pztZuZtyI54V8lRsCUz0Y/p8XRjIeHh7ExeEztpWkp4ca9q1FjUOPfQQ8E7OgqFbqoQQXZ1Bx7fw==
       }
     hasBin: true
     dependencies:
-      '@cucumber/gherkin': 26.2.0
-      '@cucumber/messages': 22.0.0
+      '@cucumber/gherkin': 28.0.0
+      '@cucumber/messages': 24.1.0
       '@teppeis/multimaps': 3.0.0
-      commander: 10.0.1
+      commander: 12.0.0
       source-map-support: 0.5.21
     dev: true
 
-  /@cucumber/gherkin@26.2.0:
+  /@cucumber/gherkin@27.0.0:
     resolution:
       {
-        integrity: sha512-iRSiK8YAIHAmLrn/mUfpAx7OXZ7LyNlh1zT89RoziSVCbqSVDxJS6ckEzW8loxs+EEXl0dKPQOXiDmbHV+C/fA==
+        integrity: sha512-j5rCsjqzRiC3iVTier3sa0kzyNbkcAmF7xr7jKnyO7qDeK3Z8Ye1P3KSVpeQRMY+KCDJ3WbTDdyxH0FwfA/fIw==
       }
     dependencies:
       '@cucumber/messages': 22.0.0
     dev: true
 
-  /@cucumber/gherkin@27.0.0:
+  /@cucumber/gherkin@28.0.0:
     resolution:
       {
-        integrity: sha512-j5rCsjqzRiC3iVTier3sa0kzyNbkcAmF7xr7jKnyO7qDeK3Z8Ye1P3KSVpeQRMY+KCDJ3WbTDdyxH0FwfA/fIw==
+        integrity: sha512-Ee6zJQq0OmIUPdW0mSnsCsrWA2PZAELNDPICD2pLfs0Oz7RAPgj80UsD2UCtqyAhw2qAR62aqlktKUlai5zl/A==
       }
     dependencies:
-      '@cucumber/messages': 22.0.0
+      '@cucumber/messages': 24.1.0
     dev: true
 
   /@cucumber/html-formatter@20.4.0(@cucumber/messages@22.0.0):
@@ -2303,15 +1788,15 @@ packages:
       '@cucumber/messages': 22.0.0
     dev: true
 
-  /@cucumber/html-formatter@21.2.0(@cucumber/messages@24.0.1):
+  /@cucumber/html-formatter@21.3.1(@cucumber/messages@24.1.0):
     resolution:
       {
-        integrity: sha512-4OcSa12Y0v5e4ySDl67+QFTxCG/Y9fxGSkFqvm98ggpTvS7b75whwzupu+lM2lMBw+h3H6P8ZURQr0xQIAwE2A==
+        integrity: sha512-M1zbre7e8MsecXheqNv62BKY5J06YJSv1LmsD7sJ3mu5t1jirLjj2It1HqPsX5CQAfg9n69xFRugPgLMSte9TA==
       }
     peerDependencies:
       '@cucumber/messages': '>=18'
     dependencies:
-      '@cucumber/messages': 24.0.1
+      '@cucumber/messages': 24.1.0
     dev: true
 
   /@cucumber/message-streams@4.0.1(@cucumber/messages@22.0.0):
@@ -2337,31 +1822,31 @@ packages:
       uuid: 9.0.0
     dev: true
 
-  /@cucumber/messages@24.0.1:
+  /@cucumber/messages@24.1.0:
     resolution:
       {
-        integrity: sha512-dKfNkvgc6stSQIyeHk7p/221iqEZe1BP+e/Js8XKtSmc0sS8khKMvbSBwYVeonn/67/vYKiAyo6Eo0SzXd5Plw==
+        integrity: sha512-hxVHiBurORcobhVk80I9+JkaKaNXkW6YwGOEFIh/2aO+apAN+5XJgUUWjng9NwqaQrW1sCFuawLB1AuzmBaNdQ==
       }
     dependencies:
-      '@types/uuid': 9.0.7
+      '@types/uuid': 9.0.8
       class-transformer: 0.5.1
       reflect-metadata: 0.2.1
       uuid: 9.0.1
     dev: true
 
-  /@cucumber/pretty-formatter@1.0.0(@cucumber/cucumber@10.3.1)(@cucumber/messages@22.0.0):
+  /@cucumber/pretty-formatter@1.0.1(@cucumber/cucumber@10.8.0)(@cucumber/messages@22.0.0):
     resolution:
       {
-        integrity: sha512-wcnIMN94HyaHGsfq72dgCvr1d8q6VGH4Y6Gl5weJ2TNZw1qn2UY85Iki4c9VdaLUONYnyYH3+178YB+9RFe/Hw==
+        integrity: sha512-A1lU4VVP0aUWdOTmpdzvXOyEYuPtBDI0xYwYJnmoMDplzxMdhcHk86lyyvYDoMoPzzq6OkOE3isuosvUU4X7IQ==
       }
     peerDependencies:
       '@cucumber/cucumber': '>=7.0.0'
       '@cucumber/messages': '*'
     dependencies:
-      '@cucumber/cucumber': 10.3.1
+      '@cucumber/cucumber': 10.8.0
       '@cucumber/messages': 22.0.0
       ansi-styles: 5.2.0
-      cli-table3: 0.6.3
+      cli-table3: 0.6.5
       figures: 3.2.0
       ts-dedent: 2.2.0
     dev: true
@@ -2381,7 +1866,7 @@ packages:
     engines: { node: '>= 6' }
     dependencies:
       aws-sign2: 0.7.0
-      aws4: 1.12.0
+      aws4: 1.13.0
       caseless: 0.12.0
       combined-stream: 1.0.8
       extend: 3.0.2
@@ -2395,25 +1880,11 @@ packages:
       performance-now: 2.1.0
       qs: 6.10.4
       safe-buffer: 5.2.1
-      tough-cookie: 4.1.3
+      tough-cookie: 4.1.4
       tunnel-agent: 0.6.0
       uuid: 8.3.2
     dev: true
 
-  /@cypress/vue2@2.0.1(cypress@13.6.0)(vue@2.7.14):
-    resolution:
-      {
-        integrity: sha512-pW0HFZxMm16UG3flZwUED357HlaRo1MgsHNE3rFs2cgdWFBunTcSbubYjrUFmeoRwEc//u6W0Hm77sOYSf7CLw==
-      }
-    engines: { node: '>=8' }
-    peerDependencies:
-      cypress: '>=4.5.0'
-      vue: ^2.0.0
-    dependencies:
-      cypress: 13.6.0
-      vue: 2.7.14
-    dev: true
-
   /@cypress/xvfb@1.2.4(supports-color@8.1.1):
     resolution:
       {
@@ -2441,7 +1912,7 @@ packages:
       }
     engines: { node: '>=16' }
     dependencies:
-      tslib: 2.5.0
+      tslib: 2.5.3
     dev: false
 
   /@es-joy/jsdoccomment@0.36.1:
@@ -2452,13 +1923,13 @@ packages:
     engines: { node: ^14 || ^16 || ^17 || ^18 || ^19 }
     dependencies:
       comment-parser: 1.3.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       jsdoc-type-pratt-parser: 3.1.0
 
-  /@esbuild/aix-ppc64@0.19.11:
+  /@esbuild/aix-ppc64@0.19.12:
     resolution:
       {
-        integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==
+        integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
       }
     engines: { node: '>=12' }
     cpu: [ppc64]
@@ -2491,10 +1962,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.19.11:
+  /@esbuild/android-arm64@0.19.12:
     resolution:
       {
-        integrity: sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==
+        integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
       }
     engines: { node: '>=12' }
     cpu: [arm64]
@@ -2527,10 +1998,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.19.11:
+  /@esbuild/android-arm@0.19.12:
     resolution:
       {
-        integrity: sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==
+        integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
       }
     engines: { node: '>=12' }
     cpu: [arm]
@@ -2563,10 +2034,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.19.11:
+  /@esbuild/android-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==
+        integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -2599,10 +2070,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.19.11:
+  /@esbuild/darwin-arm64@0.19.12:
     resolution:
       {
-        integrity: sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==
+        integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
       }
     engines: { node: '>=12' }
     cpu: [arm64]
@@ -2635,10 +2106,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.19.11:
+  /@esbuild/darwin-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==
+        integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -2671,10 +2142,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.19.11:
+  /@esbuild/freebsd-arm64@0.19.12:
     resolution:
       {
-        integrity: sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==
+        integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
       }
     engines: { node: '>=12' }
     cpu: [arm64]
@@ -2707,10 +2178,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.19.11:
+  /@esbuild/freebsd-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==
+        integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -2743,10 +2214,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.19.11:
+  /@esbuild/linux-arm64@0.19.12:
     resolution:
       {
-        integrity: sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==
+        integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
       }
     engines: { node: '>=12' }
     cpu: [arm64]
@@ -2779,10 +2250,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.19.11:
+  /@esbuild/linux-arm@0.19.12:
     resolution:
       {
-        integrity: sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==
+        integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
       }
     engines: { node: '>=12' }
     cpu: [arm]
@@ -2815,10 +2286,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.19.11:
+  /@esbuild/linux-ia32@0.19.12:
     resolution:
       {
-        integrity: sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==
+        integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
       }
     engines: { node: '>=12' }
     cpu: [ia32]
@@ -2863,10 +2334,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.19.11:
+  /@esbuild/linux-loong64@0.19.12:
     resolution:
       {
-        integrity: sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==
+        integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
       }
     engines: { node: '>=12' }
     cpu: [loong64]
@@ -2899,10 +2370,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.19.11:
+  /@esbuild/linux-mips64el@0.19.12:
     resolution:
       {
-        integrity: sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==
+        integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
       }
     engines: { node: '>=12' }
     cpu: [mips64el]
@@ -2935,10 +2406,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.19.11:
+  /@esbuild/linux-ppc64@0.19.12:
     resolution:
       {
-        integrity: sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==
+        integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
       }
     engines: { node: '>=12' }
     cpu: [ppc64]
@@ -2971,10 +2442,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.19.11:
+  /@esbuild/linux-riscv64@0.19.12:
     resolution:
       {
-        integrity: sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==
+        integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
       }
     engines: { node: '>=12' }
     cpu: [riscv64]
@@ -3007,10 +2478,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.19.11:
+  /@esbuild/linux-s390x@0.19.12:
     resolution:
       {
-        integrity: sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==
+        integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
       }
     engines: { node: '>=12' }
     cpu: [s390x]
@@ -3043,10 +2514,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.19.11:
+  /@esbuild/linux-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==
+        integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -3079,10 +2550,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.19.11:
+  /@esbuild/netbsd-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==
+        integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -3115,10 +2586,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.19.11:
+  /@esbuild/openbsd-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==
+        integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -3151,10 +2622,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.19.11:
+  /@esbuild/sunos-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==
+        integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -3187,10 +2658,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.19.11:
+  /@esbuild/win32-arm64@0.19.12:
     resolution:
       {
-        integrity: sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==
+        integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
       }
     engines: { node: '>=12' }
     cpu: [arm64]
@@ -3223,10 +2694,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.19.11:
+  /@esbuild/win32-ia32@0.19.12:
     resolution:
       {
-        integrity: sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==
+        integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
       }
     engines: { node: '>=12' }
     cpu: [ia32]
@@ -3259,10 +2730,10 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.19.11:
+  /@esbuild/win32-x64@0.19.12:
     resolution:
       {
-        integrity: sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==
+        integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
       }
     engines: { node: '>=12' }
     cpu: [x64]
@@ -3293,7 +2764,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
       eslint: 8.32.0
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
     dev: false
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.33.0):
@@ -3306,7 +2777,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
       eslint: 8.33.0
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
     dev: true
 
   /@eslint/eslintrc@1.4.1:
@@ -3317,10 +2788,10 @@ packages:
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       espree: 9.6.1
-      globals: 13.20.0
-      ignore: 5.2.4
+      globals: 13.24.0
+      ignore: 5.3.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -3351,15 +2822,16 @@ packages:
       '@hapi/hoek': 9.3.0
     dev: true
 
-  /@humanwhocodes/config-array@0.11.10:
+  /@humanwhocodes/config-array@0.11.14:
     resolution:
       {
-        integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==
+        integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
       }
     engines: { node: '>=10.10.0' }
+    deprecated: Use @eslint/config-array instead
     dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4(supports-color@8.1.1)
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.3.6(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -3371,11 +2843,12 @@ packages:
       }
     engines: { node: '>=12.22' }
 
-  /@humanwhocodes/object-schema@1.2.1:
+  /@humanwhocodes/object-schema@2.0.3:
     resolution:
       {
-        integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+        integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
       }
+    deprecated: Use @eslint/object-schema instead
 
   /@hutson/parse-repository-url@3.0.2:
     resolution:
@@ -3385,6 +2858,36 @@ packages:
     engines: { node: '>=6.9.0' }
     dev: true
 
+  /@intlify/core-base@9.14.0:
+    resolution:
+      {
+        integrity: sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==
+      }
+    engines: { node: '>= 16' }
+    dependencies:
+      '@intlify/message-compiler': 9.14.0
+      '@intlify/shared': 9.14.0
+    dev: false
+
+  /@intlify/message-compiler@9.14.0:
+    resolution:
+      {
+        integrity: sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==
+      }
+    engines: { node: '>= 16' }
+    dependencies:
+      '@intlify/shared': 9.14.0
+      source-map-js: 1.2.0
+    dev: false
+
+  /@intlify/shared@9.14.0:
+    resolution:
+      {
+        integrity: sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==
+      }
+    engines: { node: '>= 16' }
+    dev: false
+
   /@isaacs/cliui@8.0.2:
     resolution:
       {
@@ -3437,7 +2940,7 @@ packages:
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       chalk: 4.1.2
       jest-message-util: 27.5.1
       jest-util: 27.5.1
@@ -3461,7 +2964,7 @@ packages:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.8.1
@@ -3480,7 +2983,55 @@ packages:
       jest-util: 27.5.1
       jest-validate: 27.5.1
       jest-watcher: 27.5.1
-      micromatch: 4.0.5
+      micromatch: 4.0.7
+      rimraf: 3.0.2
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - ts-node
+      - utf-8-validate
+    dev: true
+
+  /@jest/core@27.5.1(ts-node@10.9.2):
+    resolution:
+      {
+        integrity: sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==
+      }
+    engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/console': 27.5.1
+      '@jest/reporters': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 18.19.0
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      emittery: 0.8.1
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 27.5.1
+      jest-config: 27.5.1(ts-node@10.9.2)
+      jest-haste-map: 27.5.1
+      jest-message-util: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-resolve-dependencies: 27.5.1
+      jest-runner: 27.5.1
+      jest-runtime: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      jest-watcher: 27.5.1
+      micromatch: 4.0.7
       rimraf: 3.0.2
       slash: 3.0.0
       strip-ansi: 6.0.1
@@ -3501,7 +3052,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       jest-mock: 27.5.1
     dev: true
 
@@ -3514,7 +3065,7 @@ packages:
     dependencies:
       '@jest/types': 27.5.1
       '@sinonjs/fake-timers': 8.1.0
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       jest-message-util: 27.5.1
       jest-mock: 27.5.1
       jest-util: 27.5.1
@@ -3549,17 +3100,17 @@ packages:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
       glob: 7.2.3
       graceful-fs: 4.2.11
-      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-coverage: 3.2.2
       istanbul-lib-instrument: 5.2.1
-      istanbul-lib-report: 3.0.0
+      istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.5
+      istanbul-reports: 3.1.7
       jest-haste-map: 27.5.1
       jest-resolve: 27.5.1
       jest-util: 27.5.1
@@ -3573,10 +3124,10 @@ packages:
       - supports-color
     dev: true
 
-  /@jest/schemas@29.6.0:
+  /@jest/schemas@29.6.3:
     resolution:
       {
-        integrity: sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==
+        integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
       }
     engines: { node: ^14.15.0 || ^16.10.0 || >=18.0.0 }
     dependencies:
@@ -3604,7 +3155,7 @@ packages:
     dependencies:
       '@jest/console': 27.5.1
       '@jest/types': 27.5.1
-      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-lib-coverage': 2.0.6
       collect-v8-coverage: 1.0.2
     dev: true
 
@@ -3630,7 +3181,7 @@ packages:
       }
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
-      '@babel/core': 7.23.3
+      '@babel/core': 7.25.2
       '@jest/types': 27.5.1
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
@@ -3640,7 +3191,7 @@ packages:
       jest-haste-map: 27.5.1
       jest-regex-util: 27.5.1
       jest-util: 27.5.1
-      micromatch: 4.0.5
+      micromatch: 4.0.7
       pirates: 4.0.6
       slash: 3.0.0
       source-map: 0.6.1
@@ -3656,70 +3207,55 @@ packages:
       }
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
-      '@types/istanbul-lib-coverage': 2.0.4
-      '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.19.3
-      '@types/yargs': 16.0.5
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 18.19.0
+      '@types/yargs': 16.0.9
       chalk: 4.1.2
     dev: true
 
-  /@jridgewell/gen-mapping@0.3.3:
+  /@jridgewell/gen-mapping@0.3.5:
     resolution:
       {
-        integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+        integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
       }
     engines: { node: '>=6.0.0' }
     dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.18
-    dev: true
-
-  /@jridgewell/resolve-uri@3.1.0:
-    resolution:
-      {
-        integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
-      }
-    engines: { node: '>=6.0.0' }
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
-  /@jridgewell/resolve-uri@3.1.1:
+  /@jridgewell/resolve-uri@3.1.2:
     resolution:
       {
-        integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
+        integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
       }
     engines: { node: '>=6.0.0' }
     dev: true
 
-  /@jridgewell/set-array@1.1.2:
+  /@jridgewell/set-array@1.2.1:
     resolution:
       {
-        integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+        integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
       }
     engines: { node: '>=6.0.0' }
     dev: true
 
-  /@jridgewell/sourcemap-codec@1.4.14:
-    resolution:
-      {
-        integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
-      }
-    dev: true
-
-  /@jridgewell/sourcemap-codec@1.4.15:
+  /@jridgewell/sourcemap-codec@1.5.0:
     resolution:
       {
-        integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+        integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
       }
 
-  /@jridgewell/trace-mapping@0.3.18:
+  /@jridgewell/trace-mapping@0.3.25:
     resolution:
       {
-        integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+        integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
       }
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.0
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
     dev: true
 
   /@jridgewell/trace-mapping@0.3.9:
@@ -3728,8 +3264,8 @@ packages:
         integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
       }
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
     dev: true
 
   /@lerna/child-process@6.6.0:
@@ -3759,7 +3295,7 @@ packages:
       p-reduce: 2.1.0
       pacote: 13.6.2
       pify: 5.0.0
-      semver: 7.5.4
+      semver: 7.6.3
       slash: 3.0.0
       validate-npm-package-license: 3.0.4
       validate-npm-package-name: 4.0.0
@@ -3769,7 +3305,7 @@ packages:
       - supports-color
     dev: true
 
-  /@lerna/legacy-package-management@6.6.0(nx@15.9.4):
+  /@lerna/legacy-package-management@6.6.0(nx@15.9.7):
     resolution:
       {
         integrity: sha512-vGkQv7nuZNhjs1+Arm1m+CKyBblig4oSv/PakyNnqTnRNryIgdXqYFn8DGGkUsA3qXLlouY41Sz5xEY/7hjNEA==
@@ -3778,7 +3314,7 @@ packages:
     dependencies:
       '@npmcli/arborist': 6.2.3
       '@npmcli/run-script': 4.1.7
-      '@nrwl/devkit': 15.9.4(nx@15.9.4)
+      '@nrwl/devkit': 15.9.7(nx@15.9.7)
       '@octokit/rest': 19.0.3
       byte-size: 7.0.0
       chalk: 4.1.0
@@ -3846,38 +3382,38 @@ packages:
       - supports-color
     dev: true
 
-  /@microsoft/api-documenter@7.23.12(@types/node@18.19.3):
+  /@microsoft/api-documenter@7.23.0(@types/node@18.19.0):
     resolution:
       {
-        integrity: sha512-ZFQGHNs8fSe3KoSCNa+jt/HLTN8IdTRGd0TZqmSeHpz2cSvUYHJeyQKhv8s7yi2flr1LezBq5/ig65ITZPSSqw==
+        integrity: sha512-fEScQLW29+tgP4hxNS0NretEC0UFNVHj7H5C4FjapkNlcNcy/rVa/2v7LybTL5E7ilCsbEftmso8wyzFjg0Dvw==
       }
     hasBin: true
     dependencies:
-      '@microsoft/api-extractor-model': 7.28.2(@types/node@18.19.3)
+      '@microsoft/api-extractor-model': 7.28.0(@types/node@18.19.0)
       '@microsoft/tsdoc': 0.14.2
-      '@rushstack/node-core-library': 3.61.0(@types/node@18.19.3)
-      '@rushstack/ts-command-line': 4.17.1
+      '@rushstack/node-core-library': 3.60.0(@types/node@18.19.0)
+      '@rushstack/ts-command-line': 4.16.0
       colors: 1.2.5
       js-yaml: 3.13.1
-      resolve: 1.22.2
+      resolve: 1.22.8
     transitivePeerDependencies:
       - '@types/node'
     dev: true
 
-  /@microsoft/api-extractor-model@7.28.2(@types/node@18.19.3):
+  /@microsoft/api-extractor-model@7.28.0(@types/node@18.19.0):
     resolution:
       {
-        integrity: sha512-vkojrM2fo3q4n4oPh4uUZdjJ2DxQ2+RnDQL/xhTWSRUNPF6P4QyrvY357HBxbnltKcYu+nNNolVqc6TIGQ73Ig==
+        integrity: sha512-QIMtUVm1tqiKG+M6ciFgRShcDoovyltaeg+CbyOnyr7SMrp6gg0ojK5/nToMqR9kAvsTS4QVgW4Twl50EoAjcw==
       }
     dependencies:
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.61.0(@types/node@18.19.3)
+      '@rushstack/node-core-library': 3.60.0(@types/node@18.19.0)
     transitivePeerDependencies:
       - '@types/node'
     dev: true
 
-  /@microsoft/api-extractor-model@7.28.3(@types/node@18.19.3):
+  /@microsoft/api-extractor-model@7.28.3(@types/node@18.19.0):
     resolution:
       {
         integrity: sha512-wT/kB2oDbdZXITyDh2SQLzaWwTOFbV326fP0pUwNW00WeliARs0qjmXBWmGWardEzp2U3/axkO3Lboqun6vrig==
@@ -3885,27 +3421,27 @@ packages:
     dependencies:
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.62.0(@types/node@18.19.3)
+      '@rushstack/node-core-library': 3.62.0(@types/node@18.19.0)
     transitivePeerDependencies:
       - '@types/node'
     dev: true
 
-  /@microsoft/api-extractor@7.39.0(@types/node@18.19.3):
+  /@microsoft/api-extractor@7.39.0(@types/node@18.19.0):
     resolution:
       {
         integrity: sha512-PuXxzadgnvp+wdeZFPonssRAj/EW4Gm4s75TXzPk09h3wJ8RS3x7typf95B4vwZRrPTQBGopdUl+/vHvlPdAcg==
       }
     hasBin: true
     dependencies:
-      '@microsoft/api-extractor-model': 7.28.3(@types/node@18.19.3)
+      '@microsoft/api-extractor-model': 7.28.3(@types/node@18.19.0)
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.62.0(@types/node@18.19.3)
+      '@rushstack/node-core-library': 3.62.0(@types/node@18.19.0)
       '@rushstack/rig-package': 0.5.1
       '@rushstack/ts-command-line': 4.17.1
       colors: 1.2.5
       lodash: 4.17.21
-      resolve: 1.22.2
+      resolve: 1.22.8
       semver: 7.5.4
       source-map: 0.6.1
       typescript: 5.3.3
@@ -3955,7 +3491,7 @@ packages:
     engines: { node: '>= 8' }
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
+      fastq: 1.17.1
 
   /@npmcli/arborist@6.2.3:
     resolution:
@@ -3966,26 +3502,26 @@ packages:
     hasBin: true
     dependencies:
       '@isaacs/string-locale-compare': 1.1.0
-      '@npmcli/fs': 3.1.0
-      '@npmcli/installed-package-contents': 2.0.2
-      '@npmcli/map-workspaces': 3.0.4
+      '@npmcli/fs': 3.1.1
+      '@npmcli/installed-package-contents': 2.1.0
+      '@npmcli/map-workspaces': 3.0.6
       '@npmcli/metavuln-calculator': 5.0.1
       '@npmcli/name-from-folder': 2.0.0
       '@npmcli/node-gyp': 3.0.0
       '@npmcli/package-json': 3.1.1
-      '@npmcli/query': 3.0.0
+      '@npmcli/query': 3.1.0
       '@npmcli/run-script': 6.0.2
-      bin-links: 4.0.2
-      cacache: 17.1.3
+      bin-links: 4.0.4
+      cacache: 17.1.4
       common-ancestor-path: 1.0.1
       hosted-git-info: 6.1.1
-      json-parse-even-better-errors: 3.0.0
+      json-parse-even-better-errors: 3.0.2
       json-stringify-nice: 1.1.4
       minimatch: 6.2.0
-      nopt: 7.2.0
-      npm-install-checks: 6.1.1
+      nopt: 7.2.1
+      npm-install-checks: 6.3.0
       npm-package-arg: 10.1.0
-      npm-pick-manifest: 8.0.1
+      npm-pick-manifest: 8.0.2
       npm-registry-fetch: 14.0.5
       npmlog: 7.0.1
       pacote: 15.2.0
@@ -3994,8 +3530,8 @@ packages:
       promise-all-reject-late: 1.0.1
       promise-call-limit: 1.0.2
       read-package-json-fast: 3.0.2
-      semver: 7.5.4
-      ssri: 10.0.4
+      semver: 7.6.3
+      ssri: 10.0.6
       treeverse: 3.0.0
       walk-up-path: 1.0.0
     transitivePeerDependencies:
@@ -4011,17 +3547,17 @@ packages:
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
-  /@npmcli/fs@3.1.0:
+  /@npmcli/fs@3.1.1:
     resolution:
       {
-        integrity: sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==
+        integrity: sha512-q9CRWjpHCMIh5sVyefoD1cA7PkvILqCZsnSOEUUivORLjxCO/Irmue2DprETiNgEqktDBZaM1Bi+jrarx1XdCg==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
   /@npmcli/git@3.0.2:
@@ -4038,7 +3574,7 @@ packages:
       proc-log: 2.0.1
       promise-inflight: 1.0.1
       promise-retry: 2.0.1
-      semver: 7.5.4
+      semver: 7.6.3
       which: 2.0.2
     transitivePeerDependencies:
       - bluebird
@@ -4053,11 +3589,11 @@ packages:
     dependencies:
       '@npmcli/promise-spawn': 6.0.2
       lru-cache: 7.18.3
-      npm-pick-manifest: 8.0.1
+      npm-pick-manifest: 8.0.2
       proc-log: 3.0.0
       promise-inflight: 1.0.1
       promise-retry: 2.0.1
-      semver: 7.5.4
+      semver: 7.6.3
       which: 3.0.1
     transitivePeerDependencies:
       - bluebird
@@ -4075,28 +3611,28 @@ packages:
       npm-normalize-package-bin: 1.0.1
     dev: true
 
-  /@npmcli/installed-package-contents@2.0.2:
+  /@npmcli/installed-package-contents@2.1.0:
     resolution:
       {
-        integrity: sha512-xACzLPhnfD51GKvTOOuNX2/V4G4mz9/1I2MfDoye9kBM3RYe5g2YbscsaGoTlaWqkxeiapBWyseULVKpSVHtKQ==
+        integrity: sha512-c8UuGLeZpm69BryRykLuKRyKFZYJsZSCT4aVY5ds4omyZqJ172ApzgfKJ5eV/r3HgLdUYgFVe54KSFVjKoe27w==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     hasBin: true
     dependencies:
-      npm-bundled: 3.0.0
+      npm-bundled: 3.0.1
       npm-normalize-package-bin: 3.0.1
     dev: true
 
-  /@npmcli/map-workspaces@3.0.4:
+  /@npmcli/map-workspaces@3.0.6:
     resolution:
       {
-        integrity: sha512-Z0TbvXkRbacjFFLpVpV0e2mheCh+WzQpcqL+4xp49uNJOxOnIAPZyXtUxZ5Qn3QBTGKA11Exjd9a5411rBrhDg==
+        integrity: sha512-tkYs0OYnzQm6iIRdfy+LcLBjcKuQCeE5YLb8KnrIlutJfheNaPvPpgoFEyEFgbjzl5PLZ3IA/BWAwRU0eHuQDA==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
       '@npmcli/name-from-folder': 2.0.0
-      glob: 10.3.0
-      minimatch: 9.0.3
+      glob: 10.3.16
+      minimatch: 9.0.5
       read-package-json-fast: 3.0.2
     dev: true
 
@@ -4107,10 +3643,10 @@ packages:
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      cacache: 17.1.3
-      json-parse-even-better-errors: 3.0.0
+      cacache: 17.1.4
+      json-parse-even-better-errors: 3.0.2
       pacote: 15.2.0
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - bluebird
       - supports-color
@@ -4160,8 +3696,8 @@ packages:
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
       '@npmcli/git': 4.1.0
-      glob: 10.3.0
-      json-parse-even-better-errors: 3.0.0
+      glob: 10.3.16
+      json-parse-even-better-errors: 3.0.2
       normalize-package-data: 5.0.0
       npm-normalize-package-bin: 3.0.1
       proc-log: 3.0.0
@@ -4189,14 +3725,14 @@ packages:
       which: 3.0.1
     dev: true
 
-  /@npmcli/query@3.0.0:
+  /@npmcli/query@3.1.0:
     resolution:
       {
-        integrity: sha512-MFNDSJNgsLZIEBVZ0Q9w9K7o07j5N4o4yjtdz2uEpuCZlXGMuPENiRaFYk0vRqAA64qVuUQwC05g27fRtfUgnA==
+        integrity: sha512-C/iR0tk7KSKGldibYIB9x8GtO/0Bd0I2mhOaDb8ucQL/bQVTmGoeREaFj64Z5+iCBRf3dQfed0CjJL7I8iTkiQ==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
     dev: true
 
   /@npmcli/run-script@4.1.7:
@@ -4208,10 +3744,11 @@ packages:
     dependencies:
       '@npmcli/node-gyp': 2.0.0
       '@npmcli/promise-spawn': 3.0.0
-      node-gyp: 9.4.0
+      node-gyp: 9.4.1
       read-package-json-fast: 2.0.3
       which: 2.0.2
     transitivePeerDependencies:
+      - bluebird
       - supports-color
     dev: true
 
@@ -4224,46 +3761,47 @@ packages:
     dependencies:
       '@npmcli/node-gyp': 3.0.0
       '@npmcli/promise-spawn': 6.0.2
-      node-gyp: 9.4.0
+      node-gyp: 9.4.1
       read-package-json-fast: 3.0.2
       which: 3.0.1
     transitivePeerDependencies:
+      - bluebird
       - supports-color
     dev: true
 
-  /@nrwl/cli@15.9.4:
+  /@nrwl/cli@15.9.7:
     resolution:
       {
-        integrity: sha512-FoiGFCLpb/r4HXCM3KYqT0xteP+MRV6bIHjz3bdPHIDLmBNQQnRRaV2K47jtJ6zjh1eOU5UHKyDtDDYf80Idpw==
+        integrity: sha512-1jtHBDuJzA57My5nLzYiM372mJW0NY6rFKxlWt5a0RLsAZdPTHsd8lE3Gs9XinGC1jhXbruWmhhnKyYtZvX/zA==
       }
     dependencies:
-      nx: 15.9.4
+      nx: 15.9.7
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
     dev: true
 
-  /@nrwl/devkit@15.9.4(nx@15.9.4):
+  /@nrwl/devkit@15.9.7(nx@15.9.7):
     resolution:
       {
-        integrity: sha512-mUX1kXTuPMdTzFxIzH+MsSNvdppOmstPDOEtiGFZJTuJ625ki0HhNJILO3N2mJ7MeMrLqIlAiNdvelQaObxYsQ==
+        integrity: sha512-Sb7Am2TMT8AVq8e+vxOlk3AtOA2M0qCmhBzoM1OJbdHaPKc0g0UgSnWRml1kPGg5qfPk72tWclLoZJ5/ut0vTg==
       }
     peerDependencies:
       nx: '>= 14.1 <= 16'
     dependencies:
-      ejs: 3.1.9
-      ignore: 5.2.4
-      nx: 15.9.4
-      semver: 7.3.4
-      tmp: 0.2.1
-      tslib: 2.6.2
+      ejs: 3.1.10
+      ignore: 5.3.1
+      nx: 15.9.7
+      semver: 7.5.4
+      tmp: 0.2.3
+      tslib: 2.6.3
     dev: true
 
-  /@nrwl/nx-darwin-arm64@15.9.4:
+  /@nrwl/nx-darwin-arm64@15.9.7:
     resolution:
       {
-        integrity: sha512-XnvrnT9BJsgThY/4xUcYtE077ERq/img8CkRj7MOOBNOh0/nVcR4LGbBKDHtwE3HPk0ikyS/SxRyNa9msvi3QQ==
+        integrity: sha512-aBUgnhlkrgC0vu0fK6eb9Vob7eFnkuknrK+YzTjmLrrZwj7FGNAeyGXSlyo1dVokIzjVKjJg2saZZ0WQbfuCJw==
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
@@ -4272,10 +3810,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-darwin-x64@15.9.4:
+  /@nrwl/nx-darwin-x64@15.9.7:
     resolution:
       {
-        integrity: sha512-WKSfSlpVMLchpXkax0geeUNyhvNxwO7qUz/s0/HJWBekt8fizwKDwDj1gP7fOu+YWb/tHiSscbR1km8PtdjhQw==
+        integrity: sha512-L+elVa34jhGf1cmn38Z0sotQatmLovxoASCIw5r1CBZZeJ5Tg7Y9nOwjRiDixZxNN56hPKXm6xl9EKlVHVeKlg==
       }
     engines: { node: '>= 10' }
     cpu: [x64]
@@ -4284,10 +3822,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-linux-arm-gnueabihf@15.9.4:
+  /@nrwl/nx-linux-arm-gnueabihf@15.9.7:
     resolution:
       {
-        integrity: sha512-a/b4PP7lP/Cgrh0LjC4O2YTt5pyf4DQTGtuE8qlo8o486UiofCtk4QGJX72q80s23L0ejCaKY2ULKx/3zMLjuA==
+        integrity: sha512-pqmfqqEUGFu6PmmHKyXyUw1Al0Ki8PSaR0+ndgCAb1qrekVDGDfznJfaqxN0JSLeolPD6+PFtLyXNr9ZyPFlFg==
       }
     engines: { node: '>= 10' }
     cpu: [arm]
@@ -4296,10 +3834,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-linux-arm64-gnu@15.9.4:
+  /@nrwl/nx-linux-arm64-gnu@15.9.7:
     resolution:
       {
-        integrity: sha512-ibBV8fMhSfLVd/2WzcDuUm32BoZsattuKkvMmOoyU6Pzoznc3AqyDjJR4xCIoAn5Rf+Nu1oeQONr5FAtb1Ugow==
+        integrity: sha512-NYOa/eRrqmM+In5g3M0rrPVIS9Z+q6fvwXJYf/KrjOHqqan/KL+2TOfroA30UhcBrwghZvib7O++7gZ2hzwOnA==
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
@@ -4308,10 +3846,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-linux-arm64-musl@15.9.4:
+  /@nrwl/nx-linux-arm64-musl@15.9.7:
     resolution:
       {
-        integrity: sha512-iIjvVYd7+uM4jVD461+PvU5XTALgSvJOODUaMRGOoDl0KlMuTe6pQZlw0eXjl5rcTd6paKaVFWT5j6awr8kj7w==
+        integrity: sha512-zyStqjEcmbvLbejdTOrLUSEdhnxNtdQXlmOuymznCzYUEGRv+4f7OAepD3yRoR0a/57SSORZmmGQB7XHZoYZJA==
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
@@ -4320,10 +3858,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-linux-x64-gnu@15.9.4:
+  /@nrwl/nx-linux-x64-gnu@15.9.7:
     resolution:
       {
-        integrity: sha512-q4OyH72mdrE4KellBWtwpr5EwfxHKNoFP9//7FAILO68ROh0rpMd7YQMlTB7T04UEUHjKEEsFGTlVXIee3Viwg==
+        integrity: sha512-saNK5i2A8pKO3Il+Ejk/KStTApUpWgCxjeUz9G+T8A+QHeDloZYH2c7pU/P3jA9QoNeKwjVO9wYQllPL9loeVg==
       }
     engines: { node: '>= 10' }
     cpu: [x64]
@@ -4332,10 +3870,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-linux-x64-musl@15.9.4:
+  /@nrwl/nx-linux-x64-musl@15.9.7:
     resolution:
       {
-        integrity: sha512-67+/XNMR1CgLPyeGX8jqSG6l8yYD0iiwUgcu1Vaxq6N05WwnqVisIW8XzLSRUtKt4WyVQgOWk3aspImpMVOG3Q==
+        integrity: sha512-extIUThYN94m4Vj4iZggt6hhMZWQSukBCo8pp91JHnDcryBg7SnYmnikwtY1ZAFyyRiNFBLCKNIDFGkKkSrZ9Q==
       }
     engines: { node: '>= 10' }
     cpu: [x64]
@@ -4344,10 +3882,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-win32-arm64-msvc@15.9.4:
+  /@nrwl/nx-win32-arm64-msvc@15.9.7:
     resolution:
       {
-        integrity: sha512-2rEsq3eOGVCYpYJn2tTJkOGNJm/U8rP/FmqtZXYa6VJv/00XP3Gl00IXFEDaYV6rZo7SWqLxtEPUbjK5LwPzZA==
+        integrity: sha512-GSQ54hJ5AAnKZb4KP4cmBnJ1oC4ILxnrG1mekxeM65c1RtWg9NpBwZ8E0gU3xNrTv8ZNsBeKi/9UhXBxhsIh8A==
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
@@ -4356,10 +3894,10 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/nx-win32-x64-msvc@15.9.4:
+  /@nrwl/nx-win32-x64-msvc@15.9.7:
     resolution:
       {
-        integrity: sha512-bogVju4Z/hy1jbppqaTNbmV1R4Kg0R5fKxXAXC2LaL7FL0dup31wPumdV+mXttXBNOBDjV8V/Oz1ZqdmxpOJUw==
+        integrity: sha512-x6URof79RPd8AlapVbPefUD3ynJZpmah3tYaYZ9xZRMXojVtEHV8Qh5vysKXQ1rNYJiiB8Ah6evSKWLbAH60tw==
       }
     engines: { node: '>= 10' }
     cpu: [x64]
@@ -4368,14 +3906,14 @@ packages:
     dev: true
     optional: true
 
-  /@nrwl/tao@15.9.4:
+  /@nrwl/tao@15.9.7:
     resolution:
       {
-        integrity: sha512-m90iz8UsXx1rgPm1dxsBQjSrCViWYZIrp8bpwjSCW24j3kifyilYSXGuKaRwZwUn7eNmH/kZcI9/8qeGIPF4Sg==
+        integrity: sha512-OBnHNvQf3vBH0qh9YnvBQQWyyFZ+PWguF6dJ8+1vyQYlrLVk/XZ8nJ4ukWFb+QfPv/O8VBmqaofaOI9aFC4yTw==
       }
     hasBin: true
     dependencies:
-      nx: 15.9.4
+      nx: 15.9.7
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
@@ -4403,7 +3941,7 @@ packages:
       '@octokit/request-error': 3.0.3
       '@octokit/types': 9.3.2
       before-after-hook: 2.2.3
-      universal-user-agent: 6.0.0
+      universal-user-agent: 6.0.1
     transitivePeerDependencies:
       - encoding
     dev: true
@@ -4417,7 +3955,7 @@ packages:
     dependencies:
       '@octokit/types': 9.3.2
       is-plain-object: 5.0.0
-      universal-user-agent: 6.0.0
+      universal-user-agent: 6.0.1
     dev: true
 
   /@octokit/graphql@5.0.6:
@@ -4429,7 +3967,7 @@ packages:
     dependencies:
       '@octokit/request': 6.2.8
       '@octokit/types': 9.3.2
-      universal-user-agent: 6.0.0
+      universal-user-agent: 6.0.1
     transitivePeerDependencies:
       - encoding
     dev: true
@@ -4448,10 +3986,10 @@ packages:
       }
     dev: true
 
-  /@octokit/openapi-types@18.0.0:
+  /@octokit/openapi-types@18.1.1:
     resolution:
       {
-        integrity: sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==
+        integrity: sha512-VRaeH8nCDtF5aXWnjPuEMIYf1itK/s3JYyJcWFJT8X9pSNnBtriDf7wlEWsGuhPLl4QIH4xM8fqTXDwJ3Mu6sw==
       }
     dev: true
 
@@ -4524,7 +4062,7 @@ packages:
       '@octokit/types': 9.3.2
       is-plain-object: 5.0.0
       node-fetch: 2.6.7
-      universal-user-agent: 6.0.0
+      universal-user-agent: 6.0.1
     transitivePeerDependencies:
       - encoding
     dev: true
@@ -4568,7 +4106,7 @@ packages:
         integrity: sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==
       }
     dependencies:
-      '@octokit/openapi-types': 18.0.0
+      '@octokit/openapi-types': 18.1.1
     dev: true
 
   /@one-ini/wasm@0.1.1:
@@ -4587,7 +4125,7 @@ packages:
     requiresBuild: true
     dependencies:
       node-addon-api: 3.2.1
-      node-gyp-build: 4.6.0
+      node-gyp-build: 4.8.1
     dev: true
 
   /@pkgjs/parseargs@0.11.0:
@@ -4600,19 +4138,12 @@ packages:
     dev: true
     optional: true
 
-  /@pkgr/utils@2.4.2:
+  /@pkgr/core@0.1.1:
     resolution:
       {
-        integrity: sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==
+        integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
       }
     engines: { node: ^12.20.0 || ^14.18.0 || >=16.0.0 }
-    dependencies:
-      cross-spawn: 7.0.3
-      fast-glob: 3.3.1
-      is-glob: 4.0.3
-      open: 9.1.0
-      picocolors: 1.0.0
-      tslib: 2.6.2
 
   /@rollup/plugin-commonjs@25.0.7(rollup@4.9.1):
     resolution:
@@ -4626,12 +4157,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@4.9.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.1)
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.1.0
       is-reference: 1.2.1
-      magic-string: 0.30.5
+      magic-string: 0.30.11
       rollup: 4.9.1
     dev: true
 
@@ -4646,19 +4177,19 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils@5.0.2(rollup@4.9.1):
+  /@rollup/pluginutils@5.1.0(rollup@4.9.1):
     resolution:
       {
-        integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+        integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
       }
     engines: { node: '>=14.0.0' }
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
       rollup: 4.9.1
@@ -4807,10 +4338,10 @@ packages:
     dev: true
     optional: true
 
-  /@rushstack/node-core-library@3.61.0(@types/node@18.19.3):
+  /@rushstack/node-core-library@3.60.0(@types/node@18.19.0):
     resolution:
       {
-        integrity: sha512-tdOjdErme+/YOu4gPed3sFS72GhtWCgNV9oDsHDnoLY5oDfwjKUc9Z+JOZZ37uAxcm/OCahDHfuu2ugqrfWAVQ==
+        integrity: sha512-PcyrqhILvzU+65wMFybQ2VeGNnU5JzhDq2OvUi3j6jPUxyllM7b2hrRUwCuVaYboewYzIbpzXFzgxe2K7ii1nw==
       }
     peerDependencies:
       '@types/node': '*'
@@ -4818,17 +4349,17 @@ packages:
       '@types/node':
         optional: true
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       colors: 1.2.5
       fs-extra: 7.0.1
       import-lazy: 4.0.0
       jju: 1.4.0
-      resolve: 1.22.2
+      resolve: 1.22.8
       semver: 7.5.4
       z-schema: 5.0.5
     dev: true
 
-  /@rushstack/node-core-library@3.62.0(@types/node@18.19.3):
+  /@rushstack/node-core-library@3.62.0(@types/node@18.19.0):
     resolution:
       {
         integrity: sha512-88aJn2h8UpSvdwuDXBv1/v1heM6GnBf3RjEy6ZPP7UnzHNCqOHA2Ut+ScYUbXcqIdfew9JlTAe3g+cnX9xQ/Aw==
@@ -4839,12 +4370,12 @@ packages:
       '@types/node':
         optional: true
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       colors: 1.2.5
       fs-extra: 7.0.1
       import-lazy: 4.0.0
       jju: 1.4.0
-      resolve: 1.22.2
+      resolve: 1.22.8
       semver: 7.5.4
       z-schema: 5.0.5
     dev: true
@@ -4855,10 +4386,22 @@ packages:
         integrity: sha512-pXRYSe29TjRw7rqxD4WS3HN/sRSbfr+tJs4a9uuaSIBAITbUggygdhuG0VrO0EO+QqH91GhYMN4S6KRtOEmGVA==
       }
     dependencies:
-      resolve: 1.22.2
+      resolve: 1.22.8
       strip-json-comments: 3.1.1
     dev: true
 
+  /@rushstack/ts-command-line@4.16.0:
+    resolution:
+      {
+        integrity: sha512-WJKhdR9ThK9Iy7t78O3at7I3X4Ssp5RRZay/IQa8NywqkFy/DQbT3iLouodMMdUwLZD9n8n++xLubVd3dkmpkg==
+      }
+    dependencies:
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      colors: 1.2.5
+      string-argv: 0.3.2
+    dev: true
+
   /@rushstack/ts-command-line@4.17.1:
     resolution:
       {
@@ -4871,10 +4414,10 @@ packages:
       string-argv: 0.3.2
     dev: true
 
-  /@sideway/address@4.1.4:
+  /@sideway/address@4.1.5:
     resolution:
       {
-        integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==
+        integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==
       }
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -4894,22 +4437,36 @@ packages:
       }
     dev: true
 
-  /@sigstore/bundle@1.0.0:
+  /@sigstore/bundle@1.1.0:
     resolution:
       {
-        integrity: sha512-yLvrWDOh6uMOUlFCTJIZEnwOT9Xte7NPXUqVexEKGSF5XtBAuSg5du0kn3dRR0p47a4ah10Y0mNt8+uyeQXrBQ==
+        integrity: sha512-PFutXEy0SmQxYI4texPw3dd2KewuNqv7OuK1ZFtY2fM754yhvG2KdgwIhRnoEE2uHdtdGNQ8s0lb94dW9sELog==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      '@sigstore/protobuf-specs': 0.2.0
+      '@sigstore/protobuf-specs': 0.2.1
+    dev: true
+
+  /@sigstore/protobuf-specs@0.2.1:
+    resolution:
+      {
+        integrity: sha512-XTWVxnWJu+c1oCshMLwnKvz8ZQJJDVOlciMfgpJBQbThVjKTCG8dwyhgLngBD2KN0ap9F/gOV8rFDEx8uh7R2A==
+      }
+    engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dev: true
 
-  /@sigstore/protobuf-specs@0.2.0:
+  /@sigstore/sign@1.0.0:
     resolution:
       {
-        integrity: sha512-8ZhZKAVfXjIspDWwm3D3Kvj0ddbJ0HqDZ/pOs5cx88HpT8mVsotFrg7H1UMnXOuDHz6Zykwxn4mxG3QLuN+RUg==
+        integrity: sha512-INxFVNQteLtcfGmcoldzV6Je0sbbfh9I16DM4yJPw3j5+TFP8X6uIiA18mvpEa9yyeycAKgPmOA3X9hVdVTPUA==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
+    dependencies:
+      '@sigstore/bundle': 1.1.0
+      '@sigstore/protobuf-specs': 0.2.1
+      make-fetch-happen: 11.1.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@sigstore/tuf@1.0.3:
@@ -4919,7 +4476,7 @@ packages:
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      '@sigstore/protobuf-specs': 0.2.0
+      '@sigstore/protobuf-specs': 0.2.1
       tuf-js: 1.1.7
     transitivePeerDependencies:
       - supports-color
@@ -4965,8 +4522,8 @@ packages:
       }
     engines: { node: '>=8', npm: '>=6', yarn: '>=1' }
     dependencies:
-      '@adobe/css-tools': 4.3.1
-      '@babel/runtime': 7.22.6
+      '@adobe/css-tools': 4.4.0
+      '@babel/runtime': 7.25.0
       '@types/testing-library__jest-dom': 5.14.5
       aria-query: 5.3.0
       chalk: 3.0.0
@@ -5000,10 +4557,10 @@ packages:
     engines: { node: '>=10.13.0' }
     dev: true
 
-  /@tsconfig/node10@1.0.9:
+  /@tsconfig/node10@1.0.11:
     resolution:
       {
-        integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
+        integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==
       }
     dev: true
 
@@ -5044,7 +4601,7 @@ packages:
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
       '@tufjs/canonical-json': 1.0.0
-      minimatch: 9.0.3
+      minimatch: 9.0.5
     dev: true
 
   /@types/argparse@1.0.38:
@@ -5068,45 +4625,45 @@ packages:
       - postcss
     dev: true
 
-  /@types/babel__core@7.20.1:
+  /@types/babel__core@7.20.5:
     resolution:
       {
-        integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==
+        integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
-      '@types/babel__generator': 7.6.4
-      '@types/babel__template': 7.4.1
-      '@types/babel__traverse': 7.20.1
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.6
     dev: true
 
-  /@types/babel__generator@7.6.4:
+  /@types/babel__generator@7.6.8:
     resolution:
       {
-        integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+        integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
       }
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.25.2
     dev: true
 
-  /@types/babel__template@7.4.1:
+  /@types/babel__template@7.4.4:
     resolution:
       {
-        integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+        integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
     dev: true
 
-  /@types/babel__traverse@7.20.1:
+  /@types/babel__traverse@7.20.6:
     resolution:
       {
-        integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==
+        integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==
       }
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.25.2
     dev: true
 
   /@types/cssnano@5.1.0(postcss@8.4.12):
@@ -5123,20 +4680,20 @@ packages:
       - postcss
     dev: true
 
-  /@types/estree@1.0.1:
+  /@types/estree@1.0.5:
     resolution:
       {
-        integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+        integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
       }
     dev: true
 
-  /@types/fs-extra@8.1.2:
+  /@types/fs-extra@8.1.5:
     resolution:
       {
-        integrity: sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==
+        integrity: sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ==
       }
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
     dev: true
 
   /@types/glob@7.2.0:
@@ -5146,7 +4703,7 @@ packages:
       }
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
     dev: true
 
   /@types/glob@8.0.1:
@@ -5156,41 +4713,41 @@ packages:
       }
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
     dev: true
 
-  /@types/graceful-fs@4.1.6:
+  /@types/graceful-fs@4.1.9:
     resolution:
       {
-        integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==
+        integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==
       }
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
     dev: true
 
-  /@types/istanbul-lib-coverage@2.0.4:
+  /@types/istanbul-lib-coverage@2.0.6:
     resolution:
       {
-        integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+        integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==
       }
     dev: true
 
-  /@types/istanbul-lib-report@3.0.0:
+  /@types/istanbul-lib-report@3.0.3:
     resolution:
       {
-        integrity: sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+        integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==
       }
     dependencies:
-      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-lib-coverage': 2.0.6
     dev: true
 
-  /@types/istanbul-reports@3.0.1:
+  /@types/istanbul-reports@3.0.4:
     resolution:
       {
-        integrity: sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+        integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==
       }
     dependencies:
-      '@types/istanbul-lib-report': 3.0.0
+      '@types/istanbul-lib-report': 3.0.3
     dev: true
 
   /@types/jest@27.5.0:
@@ -5203,10 +4760,10 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@types/json-schema@7.0.12:
+  /@types/json-schema@7.0.15:
     resolution:
       {
-        integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
+        integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
       }
 
   /@types/json5@0.0.29:
@@ -5229,40 +4786,33 @@ packages:
       }
     dev: true
 
-  /@types/minimist@1.2.2:
+  /@types/minimist@1.2.5:
     resolution:
       {
-        integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
+        integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==
       }
     dev: true
 
-  /@types/node@18.18.0:
+  /@types/node@18.19.0:
     resolution:
       {
-        integrity: sha512-3xA4X31gHT1F1l38ATDIL9GpRLdwVhnEFC8Uikv5ZLlXATwrCYyPq7ZWHxzxc3J/30SUiwiYT+bQe0/XvKlWbw==
-      }
-    dev: true
-
-  /@types/node@18.19.3:
-    resolution:
-      {
-        integrity: sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==
+        integrity: sha512-667KNhaD7U29mT5wf+TZUnrzPrlL2GNQ5N0BMjO2oNULhBxX0/FKCkm6JMu0Jh7Z+1LwUlR21ekd7KhIboNFNw==
       }
     dependencies:
       undici-types: 5.26.5
     dev: true
 
-  /@types/normalize-package-data@2.4.1:
+  /@types/normalize-package-data@2.4.4:
     resolution:
       {
-        integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
+        integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==
       }
     dev: true
 
-  /@types/parse-json@4.0.0:
+  /@types/parse-json@4.0.2:
     resolution:
       {
-        integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+        integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
       }
     dev: true
 
@@ -5273,10 +4823,10 @@ packages:
       }
     dev: true
 
-  /@types/prop-types@15.7.5:
+  /@types/prop-types@15.7.12:
     resolution:
       {
-        integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+        integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
       }
     dev: true
 
@@ -5295,14 +4845,14 @@ packages:
         integrity: sha512-eOct1hyZI9YZf/eqNlYu7jxA9qyTw1EGXruAJhHhBDBpc00W0C1vwlnh+hkOf7UFZkNK+UxnFBpwAZe3d7XJhQ==
       }
     dependencies:
-      '@types/prop-types': 15.7.5
+      '@types/prop-types': 15.7.12
       csstype: 2.6.21
     dev: true
 
-  /@types/semver@7.5.0:
+  /@types/semver@7.5.8:
     resolution:
       {
-        integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
+        integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
       }
 
   /@types/sinonjs__fake-timers@8.1.1:
@@ -5312,17 +4862,31 @@ packages:
       }
     dev: true
 
-  /@types/sizzle@2.3.3:
+  /@types/sizzle@2.3.8:
+    resolution:
+      {
+        integrity: sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==
+      }
+    dev: true
+
+  /@types/stack-utils@2.0.3:
+    resolution:
+      {
+        integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
+      }
+    dev: true
+
+  /@types/strip-bom@3.0.0:
     resolution:
       {
-        integrity: sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
+        integrity: sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==
       }
     dev: true
 
-  /@types/stack-utils@2.0.1:
+  /@types/strip-json-comments@0.0.30:
     resolution:
       {
-        integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+        integrity: sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
       }
     dev: true
 
@@ -5342,10 +4906,10 @@ packages:
       }
     dev: true
 
-  /@types/uuid@9.0.7:
+  /@types/uuid@9.0.8:
     resolution:
       {
-        integrity: sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==
+        integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
       }
     dev: true
 
@@ -5356,30 +4920,30 @@ packages:
       }
     dev: false
 
-  /@types/yargs-parser@21.0.0:
+  /@types/yargs-parser@21.0.3:
     resolution:
       {
-        integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
+        integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
       }
     dev: true
 
-  /@types/yargs@16.0.5:
+  /@types/yargs@16.0.9:
     resolution:
       {
-        integrity: sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==
+        integrity: sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==
       }
     dependencies:
-      '@types/yargs-parser': 21.0.0
+      '@types/yargs-parser': 21.0.3
     dev: true
 
-  /@types/yauzl@2.10.0:
+  /@types/yauzl@2.10.3:
     resolution:
       {
-        integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==
+        integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==
       }
     requiresBuild: true
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
     dev: true
     optional: true
 
@@ -5401,12 +4965,12 @@ packages:
       '@typescript-eslint/scope-manager': 5.49.0
       '@typescript-eslint/type-utils': 5.49.0(eslint@8.32.0)(typescript@4.9.4)
       '@typescript-eslint/utils': 5.49.0(eslint@8.32.0)(typescript@4.9.4)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.32.0
-      ignore: 5.2.4
+      ignore: 5.3.1
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
-      semver: 7.5.4
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@4.9.4)
       typescript: 4.9.4
     transitivePeerDependencies:
@@ -5431,12 +4995,12 @@ packages:
       '@typescript-eslint/scope-manager': 5.49.0
       '@typescript-eslint/type-utils': 5.49.0(eslint@8.33.0)(typescript@4.9.4)
       '@typescript-eslint/utils': 5.49.0(eslint@8.33.0)(typescript@4.9.4)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.33.0
-      ignore: 5.2.4
+      ignore: 5.3.1
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
-      semver: 7.5.4
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@4.9.4)
       typescript: 4.9.4
     transitivePeerDependencies:
@@ -5459,7 +5023,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.49.0
       '@typescript-eslint/types': 5.49.0
       '@typescript-eslint/typescript-estree': 5.49.0(typescript@4.9.4)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.32.0
       typescript: 4.9.4
     transitivePeerDependencies:
@@ -5482,7 +5046,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.49.0
       '@typescript-eslint/types': 5.49.0
       '@typescript-eslint/typescript-estree': 5.49.0(typescript@4.9.4)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.33.0
       typescript: 4.9.4
     transitivePeerDependencies:
@@ -5524,7 +5088,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.49.0(typescript@4.9.4)
       '@typescript-eslint/utils': 5.49.0(eslint@8.32.0)(typescript@4.9.4)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.32.0
       tsutils: 3.21.0(typescript@4.9.4)
       typescript: 4.9.4
@@ -5547,7 +5111,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.49.0(typescript@4.9.4)
       '@typescript-eslint/utils': 5.49.0(eslint@8.33.0)(typescript@4.9.4)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.33.0
       tsutils: 3.21.0(typescript@4.9.4)
       typescript: 4.9.4
@@ -5583,10 +5147,10 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.49.0
       '@typescript-eslint/visitor-keys': 5.49.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.5.4
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@4.9.4)
       typescript: 4.9.4
     transitivePeerDependencies:
@@ -5606,10 +5170,10 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.5.4
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@4.9.4)
       typescript: 4.9.4
     transitivePeerDependencies:
@@ -5624,15 +5188,15 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.0
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.49.0
       '@typescript-eslint/types': 5.49.0
       '@typescript-eslint/typescript-estree': 5.49.0(typescript@4.9.4)
       eslint: 8.32.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0(eslint@8.32.0)
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -5647,15 +5211,15 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.0
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.49.0
       '@typescript-eslint/types': 5.49.0
       '@typescript-eslint/typescript-estree': 5.49.0(typescript@4.9.4)
       eslint: 8.33.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0(eslint@8.33.0)
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -5671,14 +5235,14 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.32.0)
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.0
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.4)
       eslint: 8.32.0
       eslint-scope: 5.1.1
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -5694,14 +5258,14 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.33.0)
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.0
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.4)
       eslint: 8.33.0
       eslint-scope: 5.1.1
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -5715,7 +5279,7 @@ packages:
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
       '@typescript-eslint/types': 5.49.0
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
 
   /@typescript-eslint/visitor-keys@5.62.0:
     resolution:
@@ -5725,34 +5289,34 @@ packages:
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
       '@typescript-eslint/types': 5.62.0
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
 
-  /@vitejs/plugin-vue2@2.2.0(vite@4.5.0)(vue@2.7.14):
+  /@vitejs/plugin-vue@5.0.5(vite@4.5.0)(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-1km7zEuZ/9QRPvzXSjikbTYGQPG86Mq1baktpC4sXqsXlb02HQKfi+fl8qVS703JM7cgm24Ga9j+RwKmvFn90A==
+        integrity: sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==
       }
-    engines: { node: ^14.18.0 || >= 16.0.0 }
+    engines: { node: ^18.0.0 || >=20.0.0 }
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0
-      vue: ^2.7.0-0
+      vite: ^5.0.0
+      vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
-      vue: 2.7.14
+      vite: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
+      vue: 3.4.31(typescript@4.9.4)
     dev: true
 
-  /@vitejs/plugin-vue@5.0.4(vite@4.5.0)(vue@3.4.22):
+  /@vitejs/plugin-vue@5.1.2(vite@4.5.0)(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==
+        integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==
       }
     engines: { node: ^18.0.0 || >=20.0.0 }
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
-      vue: 3.4.22(typescript@4.9.4)
+      vite: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
+      vue: 3.4.31(typescript@4.9.4)
     dev: true
 
   /@volar/language-core@2.2.0-alpha.8:
@@ -5790,28 +5354,33 @@ packages:
       }
     dev: true
 
-  /@vue/babel-helper-vue-transform-on@1.1.5:
+  /@vue/babel-helper-vue-transform-on@1.2.2:
     resolution:
       {
-        integrity: sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==
+        integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==
       }
     dev: true
 
-  /@vue/babel-plugin-jsx@1.1.5(@babel/core@7.23.3):
+  /@vue/babel-plugin-jsx@1.2.2(@babel/core@7.25.2):
     resolution:
       {
-        integrity: sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==
+        integrity: sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==
       }
     peerDependencies:
       '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/helper-module-imports': 7.22.5
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.3)
-      '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.23.3
-      '@vue/babel-helper-vue-transform-on': 1.1.5
+      '@babel/core': 7.25.2
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
+      '@babel/template': 7.25.0
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+      '@vue/babel-helper-vue-transform-on': 1.2.2
+      '@vue/babel-plugin-resolve-type': 1.2.2(@babel/core@7.25.2)
       camelcase: 6.3.0
       html-tags: 3.3.1
       svg-tags: 1.0.0
@@ -5819,7 +5388,23 @@ packages:
       - supports-color
     dev: true
 
-  /@vue/babel-plugin-transform-vue-jsx@1.4.0(@babel/core@7.22.9):
+  /@vue/babel-plugin-resolve-type@1.2.2(@babel/core@7.25.2):
+    resolution:
+      {
+        integrity: sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==
+      }
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/core': 7.25.2
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/parser': 7.25.3
+      '@vue/compiler-sfc': 3.4.35
+    dev: true
+
+  /@vue/babel-plugin-transform-vue-jsx@1.4.0(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-Fmastxw4MMx0vlgLS4XBX0XiBbUFzoMGeVXuMV08wyOfXdikAFqBTuYPR0tlk+XskL19EzHc39SgjrPGY23JnA==
@@ -5827,16 +5412,18 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/helper-module-imports': 7.22.5
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
       '@vue/babel-helper-vue-jsx-merge-props': 1.4.0
       html-tags: 2.0.0
       lodash.kebabcase: 4.1.1
       svg-tags: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@vue/babel-preset-jsx@1.4.0(@babel/core@7.22.9)(vue@2.7.14):
+  /@vue/babel-preset-jsx@1.4.0(@babel/core@7.25.2)(vue@2.7.16):
     resolution:
       {
         integrity: sha512-QmfRpssBOPZWL5xw7fOuHNifCQcNQC1PrOo/4fu6xlhlKJJKSA3HqX92Nvgyx8fqHZTUGMPHmFA+IDqwXlqkSA==
@@ -5848,19 +5435,21 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@babel/core': 7.22.9
+      '@babel/core': 7.25.2
       '@vue/babel-helper-vue-jsx-merge-props': 1.4.0
-      '@vue/babel-plugin-transform-vue-jsx': 1.4.0(@babel/core@7.22.9)
-      '@vue/babel-sugar-composition-api-inject-h': 1.4.0(@babel/core@7.22.9)
-      '@vue/babel-sugar-composition-api-render-instance': 1.4.0(@babel/core@7.22.9)
-      '@vue/babel-sugar-functional-vue': 1.4.0(@babel/core@7.22.9)
-      '@vue/babel-sugar-inject-h': 1.4.0(@babel/core@7.22.9)
-      '@vue/babel-sugar-v-model': 1.4.0(@babel/core@7.22.9)
-      '@vue/babel-sugar-v-on': 1.4.0(@babel/core@7.22.9)
-      vue: 2.7.14
+      '@vue/babel-plugin-transform-vue-jsx': 1.4.0(@babel/core@7.25.2)
+      '@vue/babel-sugar-composition-api-inject-h': 1.4.0(@babel/core@7.25.2)
+      '@vue/babel-sugar-composition-api-render-instance': 1.4.0(@babel/core@7.25.2)
+      '@vue/babel-sugar-functional-vue': 1.4.0(@babel/core@7.25.2)
+      '@vue/babel-sugar-inject-h': 1.4.0(@babel/core@7.25.2)
+      '@vue/babel-sugar-v-model': 1.4.0(@babel/core@7.25.2)
+      '@vue/babel-sugar-v-on': 1.4.0(@babel/core@7.25.2)
+      vue: 2.7.16
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@vue/babel-sugar-composition-api-inject-h@1.4.0(@babel/core@7.22.9):
+  /@vue/babel-sugar-composition-api-inject-h@1.4.0(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-VQq6zEddJHctnG4w3TfmlVp5FzDavUSut/DwR0xVoe/mJKXyMcsIibL42wPntozITEoY90aBV0/1d2KjxHU52g==
@@ -5868,11 +5457,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
     dev: true
 
-  /@vue/babel-sugar-composition-api-render-instance@1.4.0(@babel/core@7.22.9):
+  /@vue/babel-sugar-composition-api-render-instance@1.4.0(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-6ZDAzcxvy7VcnCjNdHJ59mwK02ZFuP5CnucloidqlZwVQv5CQLijc3lGpR7MD3TWFi78J7+a8J56YxbCtHgT9Q==
@@ -5880,11 +5469,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
     dev: true
 
-  /@vue/babel-sugar-functional-vue@1.4.0(@babel/core@7.22.9):
+  /@vue/babel-sugar-functional-vue@1.4.0(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-lTEB4WUFNzYt2In6JsoF9sAYVTo84wC4e+PoZWSgM6FUtqRJz7wMylaEhSRgG71YF+wfLD6cc9nqVeXN2rwBvw==
@@ -5892,11 +5481,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
     dev: true
 
-  /@vue/babel-sugar-inject-h@1.4.0(@babel/core@7.22.9):
+  /@vue/babel-sugar-inject-h@1.4.0(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-muwWrPKli77uO2fFM7eA3G1lAGnERuSz2NgAxuOLzrsTlQl8W4G+wwbM4nB6iewlKbwKRae3nL03UaF5ffAPMA==
@@ -5904,11 +5493,11 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
     dev: true
 
-  /@vue/babel-sugar-v-model@1.4.0(@babel/core@7.22.9):
+  /@vue/babel-sugar-v-model@1.4.0(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-0t4HGgXb7WHYLBciZzN5s0Hzqan4Ue+p/3FdQdcaHAb7s5D9WZFGoSxEZHrR1TFVZlAPu1bejTKGeAzaaG3NCQ==
@@ -5916,16 +5505,18 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
       '@vue/babel-helper-vue-jsx-merge-props': 1.4.0
-      '@vue/babel-plugin-transform-vue-jsx': 1.4.0(@babel/core@7.22.9)
+      '@vue/babel-plugin-transform-vue-jsx': 1.4.0(@babel/core@7.25.2)
       camelcase: 5.3.1
       html-tags: 2.0.0
       svg-tags: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@vue/babel-sugar-v-on@1.4.0(@babel/core@7.22.9):
+  /@vue/babel-sugar-v-on@1.4.0(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-m+zud4wKLzSKgQrWwhqRObWzmTuyzl6vOP7024lrpeJM4x2UhQtRDLgYjXAw9xBXjCwS0pP9kXjg91F9ZNo9JA==
@@ -5933,13 +5524,15 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.9)
-      '@vue/babel-plugin-transform-vue-jsx': 1.4.0(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
+      '@vue/babel-plugin-transform-vue-jsx': 1.4.0(@babel/core@7.25.2)
       camelcase: 5.3.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@vue/compat@3.4.22(vue@3.4.22):
+  /@vue/compat@3.4.22(vue@3.4.31):
     resolution:
       {
         integrity: sha512-xT9vVVLJhEG6nKT2gDKIlyLhHj0MUvZbXNXvV6UTnNuOaXhty2KLGJi7s/TL9C1qnlwmu6Py5TeLAa5vvuRFeQ==
@@ -5947,152 +5540,144 @@ packages:
     peerDependencies:
       vue: 3.4.22
     dependencies:
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.25.3
       estree-walker: 2.0.2
       source-map-js: 1.2.0
-      vue: 3.4.22(typescript@4.9.4)
+      vue: 3.4.31(typescript@4.9.4)
     dev: false
 
-  /@vue/compiler-core@3.3.4:
+  /@vue/compiler-core@3.4.31:
     resolution:
       {
-        integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
+        integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/shared': 3.3.4
+      '@babel/parser': 7.25.3
+      '@vue/shared': 3.4.31
+      entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
-    dev: true
 
-  /@vue/compiler-core@3.4.21:
+  /@vue/compiler-core@3.4.35:
     resolution:
       {
-        integrity: sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
+        integrity: sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/shared': 3.4.21
+      '@babel/parser': 7.25.3
+      '@vue/shared': 3.4.35
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
     dev: true
 
-  /@vue/compiler-core@3.4.22:
+  /@vue/compiler-dom@3.4.31:
     resolution:
       {
-        integrity: sha512-FBDRCBE/rFPA8OfTUrARx2c49N7zoImlGT7hsFikv0pZxQlFhffQwewpEXaLynZW0/DspVXmNA+QQ9dXINpWmg==
+        integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/shared': 3.4.22
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.0
+      '@vue/compiler-core': 3.4.31
+      '@vue/shared': 3.4.31
 
-  /@vue/compiler-dom@3.3.4:
+  /@vue/compiler-dom@3.4.35:
     resolution:
       {
-        integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
+        integrity: sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==
       }
     dependencies:
-      '@vue/compiler-core': 3.3.4
-      '@vue/shared': 3.3.4
+      '@vue/compiler-core': 3.4.35
+      '@vue/shared': 3.4.35
     dev: true
 
-  /@vue/compiler-dom@3.4.21:
+  /@vue/compiler-sfc@2.7.14:
     resolution:
       {
-        integrity: sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
+        integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
       }
     dependencies:
-      '@vue/compiler-core': 3.4.21
-      '@vue/shared': 3.4.21
+      '@babel/parser': 7.25.3
+      postcss: 8.4.40
+      source-map: 0.6.1
     dev: true
 
-  /@vue/compiler-dom@3.4.22:
+  /@vue/compiler-sfc@2.7.16:
     resolution:
       {
-        integrity: sha512-YkAS+jZc6Ip360kT3lZbMQZteiYBbHDSVKr94Jdd8Zjr7VjSkkXKAFFR/FW+2tNtBYXOps6xrWlOquy3GeYB0w==
+        integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
       }
     dependencies:
-      '@vue/compiler-core': 3.4.22
-      '@vue/shared': 3.4.22
-
-  /@vue/compiler-sfc@2.7.14:
-    resolution:
-      {
-        integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
-      }
-    dependencies:
-      '@babel/parser': 7.24.4
-      postcss: 8.4.38
+      '@babel/parser': 7.25.3
+      postcss: 8.4.40
       source-map: 0.6.1
+    optionalDependencies:
+      prettier: 2.8.8
+    dev: true
 
-  /@vue/compiler-sfc@3.4.21:
+  /@vue/compiler-sfc@3.4.31:
     resolution:
       {
-        integrity: sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
+        integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/compiler-core': 3.4.21
-      '@vue/compiler-dom': 3.4.21
-      '@vue/compiler-ssr': 3.4.21
-      '@vue/shared': 3.4.21
+      '@babel/parser': 7.25.3
+      '@vue/compiler-core': 3.4.31
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
       estree-walker: 2.0.2
-      magic-string: 0.30.9
-      postcss: 8.4.38
+      magic-string: 0.30.11
+      postcss: 8.4.40
       source-map-js: 1.2.0
-    dev: true
 
-  /@vue/compiler-sfc@3.4.22:
+  /@vue/compiler-sfc@3.4.35:
     resolution:
       {
-        integrity: sha512-Pncp5Vc8E2Ef1o5uveO8WA1IqM7rt0R1jN8D4qitQYOUxC97iITGYA8oMInQ3UcDS7ip+SegyA2HbAEB4V6NMQ==
+        integrity: sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==
       }
     dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/compiler-core': 3.4.22
-      '@vue/compiler-dom': 3.4.22
-      '@vue/compiler-ssr': 3.4.22
-      '@vue/shared': 3.4.22
+      '@babel/parser': 7.25.3
+      '@vue/compiler-core': 3.4.35
+      '@vue/compiler-dom': 3.4.35
+      '@vue/compiler-ssr': 3.4.35
+      '@vue/shared': 3.4.35
       estree-walker: 2.0.2
-      magic-string: 0.30.9
-      postcss: 8.4.38
+      magic-string: 0.30.11
+      postcss: 8.4.40
       source-map-js: 1.2.0
+    dev: true
 
-  /@vue/compiler-ssr@3.4.21:
+  /@vue/compiler-ssr@3.4.31:
     resolution:
       {
-        integrity: sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==
+        integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==
       }
     dependencies:
-      '@vue/compiler-dom': 3.4.21
-      '@vue/shared': 3.4.21
-    dev: true
+      '@vue/compiler-dom': 3.4.31
+      '@vue/shared': 3.4.31
 
-  /@vue/compiler-ssr@3.4.22:
+  /@vue/compiler-ssr@3.4.35:
     resolution:
       {
-        integrity: sha512-ycb2sL0SW6AkgVMrvaU/TIAEk7FQWyv/oYya44E/V9xURM+ij9Oev5bVobSS7GLJzkUieWW3SrYcK/PZpb5i4A==
+        integrity: sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==
       }
     dependencies:
-      '@vue/compiler-dom': 3.4.22
-      '@vue/shared': 3.4.22
+      '@vue/compiler-dom': 3.4.35
+      '@vue/shared': 3.4.35
+    dev: true
 
-  /@vue/component-compiler-utils@3.3.0(pug@3.0.2):
+  /@vue/component-compiler-utils@3.3.0(pug@3.0.3):
     resolution:
       {
         integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==
       }
     dependencies:
-      consolidate: 0.15.1(pug@3.0.2)
+      consolidate: 0.15.1(pug@3.0.3)
       hash-sum: 1.0.2
       lru-cache: 4.1.5
       merge-source-map: 1.1.0
       postcss: 7.0.39
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
       source-map: 0.6.1
       vue-template-es2015-compiler: 1.9.1
     optionalDependencies:
@@ -6153,7 +5738,7 @@ packages:
       - whiskers
     dev: true
 
-  /@vue/component-compiler@4.2.4(postcss@8.4.12)(vue-template-compiler@2.7.14):
+  /@vue/component-compiler@4.2.4(postcss@8.4.12)(vue-template-compiler@2.7.16):
     resolution:
       {
         integrity: sha512-tFGw3h3+nxiqnyborwWQ+rUgKAwSFl0Sdg+BCZkWTyFfkEF5fqunTNoklEUDdtRQMmVqsajn1pOZdm0zh4Uicw==
@@ -6162,16 +5747,16 @@ packages:
       postcss: '>=6.0'
       vue-template-compiler: '*'
     dependencies:
-      '@vue/component-compiler-utils': 3.3.0(pug@3.0.2)
+      '@vue/component-compiler-utils': 3.3.0(pug@3.0.3)
       clean-css: 4.2.4
       hash-sum: 1.0.2
       postcss: 8.4.12
       postcss-modules-sync: 1.0.0
       source-map: 0.6.1
-      vue-template-compiler: 2.7.14(vue@2.7.14)
+      vue-template-compiler: 2.7.16(vue@2.7.16)
     optionalDependencies:
       less: 3.13.1
-      pug: 3.0.2
+      pug: 3.0.3
       sass: 1.70.0
       stylus: 0.54.8
     transitivePeerDependencies:
@@ -6235,14 +5820,12 @@ packages:
       {
         integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
       }
-    dev: false
 
   /@vue/devtools-api@6.5.1:
     resolution:
       {
         integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
       }
-    dev: false
 
   /@vue/eslint-config-prettier@7.0.0(eslint@8.32.0)(prettier@2.8.3):
     resolution:
@@ -6293,7 +5876,7 @@ packages:
       eslint: 8.32.0
       eslint-plugin-vue: 8.7.1(eslint@8.32.0)
       typescript: 4.9.4
-      vue-eslint-parser: 9.3.1(eslint@8.32.0)
+      vue-eslint-parser: 9.4.3(eslint@8.32.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -6317,12 +5900,12 @@ packages:
       eslint: 8.33.0
       eslint-plugin-vue: 8.7.1(eslint@8.33.0)
       typescript: 4.9.4
-      vue-eslint-parser: 9.3.1(eslint@8.33.0)
+      vue-eslint-parser: 9.4.3(eslint@8.33.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vue/language-core@2.0.13(typescript@4.9.4)(vue@3.4.22):
+  /@vue/language-core@2.0.13(typescript@4.9.4)(vue@3.4.31):
     resolution:
       {
         integrity: sha512-oQgM+BM66SU5GKtUMLQSQN0bxHFkFpLSSAiY87wVziPaiNQZuKVDt/3yA7GB9PiQw0y/bTNL0bOc0jM/siYjKg==
@@ -6334,13 +5917,13 @@ packages:
         optional: true
     dependencies:
       '@volar/language-core': 2.2.0-alpha.8
-      '@vue/compiler-dom': 3.4.21
-      '@vue/shared': 3.4.21
+      '@vue/compiler-dom': 3.4.35
+      '@vue/shared': 3.4.35
       computeds: 0.0.1
-      minimatch: 9.0.3
+      minimatch: 9.0.5
       path-browserify: 1.0.1
       typescript: 4.9.4
-      vue-template-compiler: 2.7.14(vue@3.4.22)
+      vue-template-compiler: 2.7.16(vue@3.4.31)
     transitivePeerDependencies:
       - vue
     dev: true
@@ -6352,6 +5935,15 @@ packages:
       }
     dependencies:
       '@vue/shared': 3.4.22
+    dev: true
+
+  /@vue/reactivity@3.4.31:
+    resolution:
+      {
+        integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==
+      }
+    dependencies:
+      '@vue/shared': 3.4.31
 
   /@vue/runtime-core@3.4.22:
     resolution:
@@ -6361,6 +5953,16 @@ packages:
     dependencies:
       '@vue/reactivity': 3.4.22
       '@vue/shared': 3.4.22
+    dev: true
+
+  /@vue/runtime-core@3.4.31:
+    resolution:
+      {
+        integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==
+      }
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/shared': 3.4.31
 
   /@vue/runtime-dom@3.4.22:
     resolution:
@@ -6371,153 +5973,95 @@ packages:
       '@vue/runtime-core': 3.4.22
       '@vue/shared': 3.4.22
       csstype: 3.1.3
+    dev: true
+
+  /@vue/runtime-dom@3.4.31:
+    resolution:
+      {
+        integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==
+      }
+    dependencies:
+      '@vue/reactivity': 3.4.31
+      '@vue/runtime-core': 3.4.31
+      '@vue/shared': 3.4.31
+      csstype: 3.1.3
 
-  /@vue/server-renderer@3.4.22(vue@3.4.22):
+  /@vue/server-renderer@3.4.31(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-okiNxiCOhJlx6IOrTZvhIVwf2UYKay0hnIPqWu4h19bkNv1gmG4Ic6U3zXY287AWF26lQuFMa515Qzc+R0aAYg==
+        integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==
       }
     peerDependencies:
-      vue: 3.4.22
+      vue: 3.4.31
     dependencies:
-      '@vue/compiler-ssr': 3.4.22
-      '@vue/shared': 3.4.22
-      vue: 3.4.22(typescript@4.9.4)
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      vue: 3.4.31(typescript@4.9.4)
 
-  /@vue/shared@3.3.4:
+  /@vue/shared@3.4.22:
     resolution:
       {
-        integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
+        integrity: sha512-cg7R9XNk4ovV3bKka/1a464O2oY0l5Fyt0rwGR4hSJRPjUJ0WVjrPdsr4W0JbUriwiM8EKcCcCjeKN5pRMs2Zg==
       }
     dev: true
 
-  /@vue/shared@3.4.21:
+  /@vue/shared@3.4.31:
     resolution:
       {
-        integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
+        integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==
       }
-    dev: true
 
-  /@vue/shared@3.4.22:
+  /@vue/shared@3.4.35:
     resolution:
       {
-        integrity: sha512-cg7R9XNk4ovV3bKka/1a464O2oY0l5Fyt0rwGR4hSJRPjUJ0WVjrPdsr4W0JbUriwiM8EKcCcCjeKN5pRMs2Zg==
+        integrity: sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==
       }
+    dev: true
 
-  /@vue/test-utils@1.0.3(vue-template-compiler@2.7.14)(vue@2.7.14):
+  /@vue/test-utils@2.4.6:
     resolution:
       {
-        integrity: sha512-mmsKXZSGfvd0bH05l4SNuczZ2MqlJH2DWhiul5wJXFxbf/gRRd2UL4QZgozEMQ30mRi9i4/+p4JJat8S4Js64Q==
+        integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==
       }
-    peerDependencies:
-      vue: 2.x
-      vue-template-compiler: ^2.x
     dependencies:
-      dom-event-types: 1.1.0
-      lodash: 4.17.21
-      pretty: 2.0.0
-      vue: 2.7.14
-      vue-template-compiler: 2.7.14(vue@2.7.14)
+      js-beautify: 1.15.1
+      vue-component-type-helpers: 2.0.29
     dev: true
 
-  /@vue/vue2-jest@27.0.0-alpha.3(@babel/core@7.23.3)(jest@27.5.0)(ts-jest@27.1.0)(vue-template-compiler@2.7.14)(vue@2.7.14):
+  /@vue/vue3-jest@27.0.0(@babel/core@7.25.2)(jest@27.5.0)(ts-jest@27.1.0)(typescript@4.9.4)(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-50UrwXn7xO92TwsJCUGiA9CCpjKCZRWlW2Q3eOgR8Y05bbDnTRrhc23ZDc9gKqeWCykEIdRnUXo5Qb1XeDl+7A==
+        integrity: sha512-VL61CgZBoQqayXfzlZJHHpZuX4lsT8dmdZMJzADhdAJjKu26JBpypHr/2ppevxItljPiuALQW4MKhhCXZRXnLg==
       }
     peerDependencies:
       '@babel/core': 7.x
-      babel-jest: '>= 27 < 28'
+      babel-jest: 27.x
       jest: 27.x
-      ts-jest: '>= 27 < 28'
-      vue: ^2.x
-      vue-template-compiler: ^2.x
+      ts-jest: 27.x
+      typescript: '>= 3.x'
+      vue: ^3.0.0-0
     peerDependenciesMeta:
       ts-jest:
         optional: true
+      typescript:
+        optional: true
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.23.3)
-      '@vue/component-compiler-utils': 3.3.0(pug@3.0.2)
+      '@babel/core': 7.25.2
+      '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2)
       chalk: 2.4.2
-      extract-from-css: 0.4.4
-      jest: 27.5.0(ts-node@10.9.1)
+      convert-source-map: 1.9.0
+      css-tree: 2.3.1
+      jest: 27.5.0(ts-node@10.9.2)
       source-map: 0.5.6
-      ts-jest: 27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
-      vue: 2.7.14
-      vue-template-compiler: 2.7.14(vue@2.7.14)
+      ts-jest: 27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4)
+      tsconfig: 7.0.0
+      typescript: 4.9.4
+      vue: 3.4.31(typescript@4.9.4)
     transitivePeerDependencies:
-      - arc-templates
-      - atpl
-      - babel-core
-      - bracket-template
-      - coffee-script
-      - dot
-      - dust
-      - dustjs-helpers
-      - dustjs-linkedin
-      - eco
-      - ect
-      - ejs
-      - haml-coffee
-      - hamlet
-      - hamljs
-      - handlebars
-      - hogan.js
-      - htmling
-      - jade
-      - jazz
-      - jqtpl
-      - just
-      - liquid-node
-      - liquor
-      - lodash
-      - marko
-      - mote
-      - mustache
-      - nunjucks
-      - plates
-      - pug
-      - qejs
-      - ractive
-      - razor-tmpl
-      - react
-      - react-dom
-      - slm
-      - squirrelly
-      - swig
-      - swig-templates
-      - teacup
-      - templayed
-      - then-jade
-      - then-pug
-      - tinyliquid
-      - toffee
-      - twig
-      - twing
-      - underscore
-      - vash
-      - velocityjs
-      - walrus
-      - whiskers
+      - supports-color
     dev: true
 
-  /@vueuse/core@10.7.1(vue@2.7.14):
-    resolution:
-      {
-        integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==
-      }
-    dependencies:
-      '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 10.7.1
-      '@vueuse/shared': 10.7.1(vue@2.7.14)
-      vue-demi: 0.14.6(vue@2.7.14)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
-  /@vueuse/core@10.7.1(vue@3.4.22):
+  /@vueuse/core@10.7.1(vue@3.4.31):
     resolution:
       {
         integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==
@@ -6525,8 +6069,8 @@ packages:
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.7.1
-      '@vueuse/shared': 10.7.1(vue@3.4.22)
-      vue-demi: 0.14.6(vue@3.4.22)
+      '@vueuse/shared': 10.7.1(vue@3.4.31)
+      vue-demi: 0.14.10(vue@3.4.31)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6539,25 +6083,13 @@ packages:
       }
     dev: false
 
-  /@vueuse/shared@10.7.1(vue@2.7.14):
-    resolution:
-      {
-        integrity: sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==
-      }
-    dependencies:
-      vue-demi: 0.14.6(vue@2.7.14)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: false
-
-  /@vueuse/shared@10.7.1(vue@3.4.22):
+  /@vueuse/shared@10.7.1(vue@3.4.31):
     resolution:
       {
         integrity: sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==
       }
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.22)
+      vue-demi: 0.14.10(vue@3.4.31)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6570,14 +6102,15 @@ packages:
       }
     dev: true
 
-  /@yarnpkg/parsers@3.0.0-rc.48.1:
+  /@yarnpkg/parsers@3.0.0-rc.46:
     resolution:
       {
-        integrity: sha512-qEewJouhRvaecGjbkjz9kMKn96UASbDodNrE5MYy2TrXkHcisIkbMxZdGBYfAq+s1dFtCSx/5H4k5bEkfakM+A==
+        integrity: sha512-aiATs7pSutzda/rq8fnuPwTglyVwjM22bNnK2ZgjrpAjQHSSl3lztd2f9evst1W/qnC58DRz7T7QndUDumAR4Q==
       }
+    engines: { node: '>=14.15.0' }
     dependencies:
       js-yaml: 3.14.1
-      tslib: 2.6.2
+      tslib: 2.6.3
     dev: true
 
   /@zkochan/js-yaml@0.0.6:
@@ -6606,6 +6139,7 @@ packages:
       {
         integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
       }
+    deprecated: Use your platform's native atob() and btoa() methods instead
     dev: true
 
   /abbrev@1.1.1:
@@ -6623,16 +6157,6 @@ packages:
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dev: true
 
-  /abort-controller@3.0.0:
-    resolution:
-      {
-        integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
-      }
-    engines: { node: '>=6.5' }
-    dependencies:
-      event-target-shim: 5.0.1
-    dev: true
-
   /acorn-globals@6.0.0:
     resolution:
       {
@@ -6643,7 +6167,7 @@ packages:
       acorn-walk: 7.2.0
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.10.0):
+  /acorn-jsx@5.3.2(acorn@8.12.1):
     resolution:
       {
         integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -6651,7 +6175,7 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.10.0
+      acorn: 8.12.1
 
   /acorn-walk@7.2.0:
     resolution:
@@ -6661,12 +6185,14 @@ packages:
     engines: { node: '>=0.4.0' }
     dev: true
 
-  /acorn-walk@8.2.0:
+  /acorn-walk@8.3.3:
     resolution:
       {
-        integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+        integrity: sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==
       }
     engines: { node: '>=0.4.0' }
+    dependencies:
+      acorn: 8.12.1
     dev: true
 
   /acorn@7.4.1:
@@ -6678,10 +6204,10 @@ packages:
     hasBin: true
     dev: true
 
-  /acorn@8.10.0:
+  /acorn@8.12.1:
     resolution:
       {
-        integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+        integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
       }
     engines: { node: '>=0.4.0' }
     hasBin: true
@@ -6700,23 +6226,19 @@ packages:
       }
     engines: { node: '>= 6.0.0' }
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /agentkeepalive@4.3.0:
+  /agentkeepalive@4.5.0:
     resolution:
       {
-        integrity: sha512-7Epl1Blf4Sy37j4v9f9FjICCh4+KAQOyXgHEwlyBiAQLbhKdq/i2QQU3amQalS/wPhdPzDXPL5DMR5bkn+YeWg==
+        integrity: sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==
       }
     engines: { node: '>= 8.0.0' }
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
-      depd: 2.0.0
       humanize-ms: 1.2.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /aggregate-error@3.1.0:
@@ -6741,14 +6263,6 @@ packages:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  /ansi-colors@4.1.1:
-    resolution:
-      {
-        integrity: sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-      }
-    engines: { node: '>=6' }
-    dev: true
-
   /ansi-colors@4.1.3:
     resolution:
       {
@@ -6889,20 +6403,19 @@ packages:
         integrity: sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==
       }
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
+    deprecated: This package is no longer supported.
     dependencies:
       delegates: 1.0.0
       readable-stream: 3.6.2
     dev: true
 
-  /are-we-there-yet@4.0.1:
+  /are-we-there-yet@4.0.2:
     resolution:
       {
-        integrity: sha512-2zuA+jpOYBRgoBCfa+fB87Rk0oGJjDX6pxGzqH6f33NzUhG25Xur6R0u0Z9VVAq8Z5JvQpQI6j6rtonuivC8QA==
+        integrity: sha512-ncSWAawFhKMJDTdoAeOV+jyW1VCMj5QIAwULIBV0SSR7B/RLPPEQiknKcg/RIIZlUQrxELpsxMiTUoAQ4sIUyg==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
-    dependencies:
-      delegates: 1.0.0
-      readable-stream: 4.4.2
+    deprecated: This package is no longer supported.
     dev: true
 
   /arg@4.1.3:
@@ -6942,14 +6455,15 @@ packages:
     dependencies:
       dequal: 2.0.3
 
-  /array-buffer-byte-length@1.0.0:
+  /array-buffer-byte-length@1.0.1:
     resolution:
       {
-        integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
+        integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      is-array-buffer: 3.0.2
+      call-bind: 1.0.7
+      is-array-buffer: 3.0.4
 
   /array-differ@3.0.0:
     resolution:
@@ -6966,17 +6480,18 @@ packages:
       }
     dev: true
 
-  /array-includes@3.1.6:
+  /array-includes@3.1.8:
     resolution:
       {
-        integrity: sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+        integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
+      get-intrinsic: 1.2.4
       is-string: 1.0.7
 
   /array-union@2.1.0:
@@ -6986,56 +6501,59 @@ packages:
       }
     engines: { node: '>=8' }
 
-  /array.prototype.flat@1.3.1:
+  /array.prototype.flat@1.3.2:
     resolution:
       {
-        integrity: sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+        integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
-      es-shim-unscopables: 1.0.0
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-shim-unscopables: 1.0.2
 
-  /array.prototype.flatmap@1.3.1:
+  /array.prototype.flatmap@1.3.2:
     resolution:
       {
-        integrity: sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+        integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
-      es-shim-unscopables: 1.0.0
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-shim-unscopables: 1.0.2
 
-  /array.prototype.tosorted@1.1.1:
+  /array.prototype.tosorted@1.1.4:
     resolution:
       {
-        integrity: sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==
+        integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
-      es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.0.2
     dev: true
 
-  /arraybuffer.prototype.slice@1.0.1:
+  /arraybuffer.prototype.slice@1.0.3:
     resolution:
       {
-        integrity: sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==
+        integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      get-intrinsic: 1.2.1
-      is-array-buffer: 3.0.2
-      is-shared-array-buffer: 1.0.2
+      array-buffer-byte-length: 1.0.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      is-array-buffer: 3.0.4
+      is-shared-array-buffer: 1.0.3
 
   /arrify@1.0.1:
     resolution:
@@ -7058,7 +6576,6 @@ packages:
       {
         integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
       }
-    requiresBuild: true
     dev: true
 
   /asn1@0.2.6:
@@ -7070,12 +6587,11 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /assert-never@1.2.1:
+  /assert-never@1.3.0:
     resolution:
       {
-        integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==
+        integrity: sha512-9Z3vxQ+berkL/JJo0dK+EY3Lp0s3NtSnP3VCLsh5HDcZPrh0M+KQRK5sWhUeyPPH+/RCxZqOxLMR+YC6vlviEQ==
       }
-    requiresBuild: true
     dev: true
 
   /assert-plus@1.0.0:
@@ -7086,18 +6602,6 @@ packages:
     engines: { node: '>=0.8' }
     dev: true
 
-  /assert@2.0.0:
-    resolution:
-      {
-        integrity: sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==
-      }
-    dependencies:
-      es6-object-assign: 1.1.0
-      is-nan: 1.3.2
-      object-is: 1.1.5
-      util: 0.12.5
-    dev: true
-
   /assertion-error-formatter@3.0.0:
     resolution:
       {
@@ -7116,7 +6620,7 @@ packages:
       }
     engines: { node: '>=4' }
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.6.3
     dev: true
 
   /astral-regex@2.0.0:
@@ -7127,10 +6631,10 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
-  /async@3.2.4:
+  /async@3.2.5:
     resolution:
       {
-        integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
+        integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
       }
     dev: true
 
@@ -7156,7 +6660,9 @@ packages:
       }
     engines: { node: '>= 4.5.0' }
     hasBin: true
+    requiresBuild: true
     dev: true
+    optional: true
 
   /autoprefixer@10.4.4(postcss@8.4.12):
     resolution:
@@ -7168,21 +6674,23 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.21.9
-      caniuse-lite: 1.0.30001517
-      fraction.js: 4.2.0
+      browserslist: 4.23.2
+      caniuse-lite: 1.0.30001646
+      fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       postcss: 8.4.12
       postcss-value-parser: 4.2.0
     dev: true
 
-  /available-typed-arrays@1.0.5:
+  /available-typed-arrays@1.0.7:
     resolution:
       {
-        integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+        integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
       }
     engines: { node: '>= 0.4' }
+    dependencies:
+      possible-typed-array-names: 1.0.0
 
   /aws-sign2@0.7.0:
     resolution:
@@ -7191,10 +6699,10 @@ packages:
       }
     dev: true
 
-  /aws4@1.12.0:
+  /aws4@1.13.0:
     resolution:
       {
-        integrity: sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
+        integrity: sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==
       }
     dev: true
 
@@ -7204,26 +6712,26 @@ packages:
         integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
       }
     dependencies:
-      follow-redirects: 1.15.2(debug@4.3.4)
+      follow-redirects: 1.15.6(debug@4.3.4)
       form-data: 4.0.0
     transitivePeerDependencies:
       - debug
     dev: true
 
-  /axios@1.4.0:
+  /axios@1.7.2:
     resolution:
       {
-        integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+        integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
       }
     dependencies:
-      follow-redirects: 1.15.2(debug@4.3.4)
+      follow-redirects: 1.15.6(debug@4.3.4)
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
     dev: true
 
-  /babel-jest@27.5.1(@babel/core@7.23.3):
+  /babel-jest@27.5.1(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==
@@ -7232,12 +6740,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.8.0
     dependencies:
-      '@babel/core': 7.23.3
+      '@babel/core': 7.25.2
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/babel__core': 7.20.1
+      '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 27.5.1(@babel/core@7.23.3)
+      babel-preset-jest: 27.5.1(@babel/core@7.25.2)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
@@ -7252,7 +6760,7 @@ packages:
       }
     engines: { node: '>=8' }
     dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.8
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.1
@@ -7268,13 +6776,13 @@ packages:
       }
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
-      '@babel/template': 7.22.15
-      '@babel/types': 7.23.3
-      '@types/babel__core': 7.20.1
-      '@types/babel__traverse': 7.20.1
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.20.6
     dev: true
 
-  /babel-preset-current-node-syntax@1.0.1(@babel/core@7.23.3):
+  /babel-preset-current-node-syntax@1.0.1(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
@@ -7282,22 +6790,22 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.3)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.3)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.3)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.3)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.3)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.3)
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.2)
     dev: true
 
-  /babel-preset-jest@27.5.1(@babel/core@7.23.3):
+  /babel-preset-jest@27.5.1(@babel/core@7.25.2):
     resolution:
       {
         integrity: sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==
@@ -7306,9 +6814,9 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.23.3
+      '@babel/core': 7.25.2
       babel-plugin-jest-hoist: 27.5.1
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.3)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.25.2)
     dev: true
 
   /babel-walk@3.0.0-canary-5:
@@ -7317,9 +6825,8 @@ packages:
         integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==
       }
     engines: { node: '>= 10.0.0' }
-    requiresBuild: true
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.25.2
     dev: true
 
   /balanced-match@1.0.2:
@@ -7351,13 +6858,6 @@ packages:
       }
     dev: true
 
-  /big-integer@1.6.51:
-    resolution:
-      {
-        integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
-      }
-    engines: { node: '>=0.6' }
-
   /big.js@3.2.0:
     resolution:
       {
@@ -7365,23 +6865,23 @@ packages:
       }
     dev: true
 
-  /bin-links@4.0.2:
+  /bin-links@4.0.4:
     resolution:
       {
-        integrity: sha512-jxJ0PbXR8eQyPlExCvCs3JFnikvs1Yp4gUJt6nmgathdOwvur+q22KWC3h20gvWl4T/14DXKj2IlkJwwZkZPOw==
+        integrity: sha512-cMtq4W5ZsEwcutJrVId+a/tjt8GSbS+h0oNkdl6+6rBuEv8Ot33Bevj5KPm40t309zuhVic8NjpuL42QCiJWWA==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      cmd-shim: 6.0.1
+      cmd-shim: 6.0.3
       npm-normalize-package-bin: 3.0.1
       read-cmd-shim: 4.0.0
       write-file-atomic: 5.0.1
     dev: true
 
-  /binary-extensions@2.2.0:
+  /binary-extensions@2.3.0:
     resolution:
       {
-        integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+        integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
       }
     engines: { node: '>=8' }
     dev: true
@@ -7417,15 +6917,6 @@ packages:
         integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
       }
 
-  /bplist-parser@0.2.0:
-    resolution:
-      {
-        integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
-      }
-    engines: { node: '>= 5.10.0' }
-    dependencies:
-      big-integer: 1.6.51
-
   /brace-expansion@1.1.11:
     resolution:
       {
@@ -7444,14 +6935,14 @@ packages:
       balanced-match: 1.0.2
     dev: true
 
-  /braces@3.0.2:
+  /braces@3.0.3:
     resolution:
       {
-        integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+        integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
       }
     engines: { node: '>=8' }
     dependencies:
-      fill-range: 7.0.1
+      fill-range: 7.1.1
 
   /browser-process-hrtime@1.0.0:
     resolution:
@@ -7467,18 +6958,18 @@ packages:
       }
     dev: true
 
-  /browserslist@4.21.9:
+  /browserslist@4.23.2:
     resolution:
       {
-        integrity: sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==
+        integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==
       }
     engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001517
-      electron-to-chromium: 1.4.468
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.9)
+      caniuse-lite: 1.0.30001646
+      electron-to-chromium: 1.5.4
+      node-releases: 2.0.18
+      update-browserslist-db: 1.1.0(browserslist@4.23.2)
     dev: true
 
   /bs-logger@0.2.6:
@@ -7524,16 +7015,6 @@ packages:
       ieee754: 1.2.1
     dev: true
 
-  /buffer@6.0.3:
-    resolution:
-      {
-        integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
-      }
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-    dev: true
-
   /builtins@1.0.3:
     resolution:
       {
@@ -7541,24 +7022,15 @@ packages:
       }
     dev: true
 
-  /builtins@5.0.1:
+  /builtins@5.1.0:
     resolution:
       {
-        integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==
+        integrity: sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==
       }
     dependencies:
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
-  /bundle-name@3.0.0:
-    resolution:
-      {
-        integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
-      }
-    engines: { node: '>=12' }
-    dependencies:
-      run-applescript: 5.0.0
-
   /byte-size@7.0.0:
     resolution:
       {
@@ -7604,43 +7076,47 @@ packages:
       - bluebird
     dev: true
 
-  /cacache@17.1.3:
+  /cacache@17.1.4:
     resolution:
       {
-        integrity: sha512-jAdjGxmPxZh0IipMdR7fK/4sDSrHMLUV0+GvVUsjwyGNKHsh79kW/otg+GkbXwl6Uzvy9wsvHOX4nUoWldeZMg==
+        integrity: sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      '@npmcli/fs': 3.1.0
-      fs-minipass: 3.0.2
-      glob: 10.3.0
+      '@npmcli/fs': 3.1.1
+      fs-minipass: 3.0.3
+      glob: 10.3.16
       lru-cache: 7.18.3
-      minipass: 5.0.0
+      minipass: 7.1.2
       minipass-collect: 1.0.2
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       p-map: 4.0.0
-      ssri: 10.0.4
+      ssri: 10.0.6
       tar: 6.1.11
       unique-filename: 3.0.0
     dev: true
 
-  /cachedir@2.3.0:
+  /cachedir@2.4.0:
     resolution:
       {
-        integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
+        integrity: sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==
       }
     engines: { node: '>=6' }
     dev: true
 
-  /call-bind@1.0.2:
+  /call-bind@1.0.7:
     resolution:
       {
-        integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+        integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.2
 
   /callsites@3.1.0:
     resolution:
@@ -7691,16 +7167,16 @@ packages:
         integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
       }
     dependencies:
-      browserslist: 4.21.9
-      caniuse-lite: 1.0.30001517
+      browserslist: 4.23.2
+      caniuse-lite: 1.0.30001646
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: true
 
-  /caniuse-lite@1.0.30001517:
+  /caniuse-lite@1.0.30001646:
     resolution:
       {
-        integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==
+        integrity: sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==
       }
     dev: true
 
@@ -7711,7 +7187,7 @@ packages:
       }
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.6.3
       upper-case-first: 2.0.2
     dev: true
 
@@ -7801,7 +7277,6 @@ packages:
       {
         integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==
       }
-    requiresBuild: true
     dependencies:
       is-regex: 1.1.4
     dev: true
@@ -7821,15 +7296,15 @@ packages:
     engines: { node: '>= 0.8.0' }
     dev: true
 
-  /chokidar@3.5.3:
+  /chokidar@3.6.0:
     resolution:
       {
-        integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+        integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
       }
     engines: { node: '>= 8.10.0' }
     dependencies:
       anymatch: 3.1.3
-      braces: 3.0.2
+      braces: 3.0.3
       glob-parent: 5.1.2
       is-binary-path: 2.1.0
       is-glob: 4.0.3
@@ -7854,18 +7329,18 @@ packages:
       }
     dev: true
 
-  /ci-info@3.8.0:
+  /ci-info@3.9.0:
     resolution:
       {
-        integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
+        integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
       }
     engines: { node: '>=8' }
     dev: true
 
-  /cjs-module-lexer@1.2.3:
+  /cjs-module-lexer@1.3.1:
     resolution:
       {
-        integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
+        integrity: sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==
       }
     dev: true
 
@@ -7922,10 +7397,10 @@ packages:
     engines: { node: '>=6' }
     dev: true
 
-  /cli-spinners@2.9.0:
+  /cli-spinners@2.9.2:
     resolution:
       {
-        integrity: sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==
+        integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
       }
     engines: { node: '>=6' }
     dev: true
@@ -7942,6 +7417,18 @@ packages:
       '@colors/colors': 1.5.0
     dev: true
 
+  /cli-table3@0.6.5:
+    resolution:
+      {
+        integrity: sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==
+      }
+    engines: { node: 10.* || >= 12.* }
+    dependencies:
+      string-width: 4.2.3
+    optionalDependencies:
+      '@colors/colors': 1.5.0
+    dev: true
+
   /cli-table@0.3.11:
     resolution:
       {
@@ -8035,10 +7522,10 @@ packages:
       mkdirp-infer-owner: 2.0.0
     dev: true
 
-  /cmd-shim@6.0.1:
+  /cmd-shim@6.0.3:
     resolution:
       {
-        integrity: sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==
+        integrity: sha512-FMabTRlc5t5zjdenF6mS0MBeFZm0XqHqeOkcskKFb/LYCcRQ5fVgLOHVc4Lq9CqABd9zhjwPjMBCJvMCziSVtA==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dev: true
@@ -8179,6 +7666,14 @@ packages:
     engines: { node: '>=16' }
     dev: true
 
+  /commander@12.0.0:
+    resolution:
+      {
+        integrity: sha512-MwVNWlYjDTtOjX5PiD7o5pK0UrFU/OYgcJfjjK4RaHZETNtjJqrZa9Y9ds88+A+f+d5lv+561eZ+yCKoS3gbAA==
+      }
+    engines: { node: '>=18' }
+    dev: true
+
   /commander@4.1.1:
     resolution:
       {
@@ -8305,17 +7800,12 @@ packages:
       yargs: 17.7.2
     dev: true
 
-  /condense-newlines@0.2.1:
+  /confbox@0.1.7:
     resolution:
       {
-        integrity: sha512-P7X+QL9Hb9B/c8HI5BFFKmjgBu2XpQuF98WZ9XkO+dBGgk5XgwiQz7o1SmpglNWId3581UcS0SFAWfoIhMHPfg==
+        integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==
       }
-    engines: { node: '>=0.10.0' }
-    dependencies:
-      extend-shallow: 2.0.1
-      is-whitespace: 0.3.0
-      kind-of: 3.2.2
-    dev: true
+    dev: false
 
   /config-chain@1.1.12:
     resolution:
@@ -8344,7 +7834,7 @@ packages:
       }
     dev: true
 
-  /consolidate@0.15.1(pug@3.0.2):
+  /consolidate@0.15.1(pug@3.0.3):
     resolution:
       {
         integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==
@@ -8517,7 +8007,7 @@ packages:
         optional: true
     dependencies:
       bluebird: 3.7.2
-      pug: 3.0.2
+      pug: 3.0.3
     dev: true
 
   /consolidate@0.16.0:
@@ -8700,10 +8190,9 @@ packages:
       {
         integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==
       }
-    requiresBuild: true
     dependencies:
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
     dev: true
 
   /conventional-changelog-angular@5.0.12:
@@ -8770,7 +8259,7 @@ packages:
     dependencies:
       conventional-commits-filter: 2.0.7
       dateformat: 3.0.3
-      handlebars: 4.7.7
+      handlebars: 4.7.8
       json-stringify-safe: 5.0.1
       lodash: 4.17.21
       meow: 8.1.2
@@ -8870,7 +8359,7 @@ packages:
       }
     engines: { node: '>=10' }
     dependencies:
-      '@types/parse-json': 4.0.0
+      '@types/parse-json': 4.0.2
       import-fresh: 3.3.0
       parse-json: 5.2.0
       path-type: 4.0.0
@@ -8884,7 +8373,7 @@ packages:
       }
     engines: { node: '>=10' }
     dependencies:
-      '@types/parse-json': 4.0.0
+      '@types/parse-json': 4.0.2
       import-fresh: 3.3.0
       parse-json: 5.2.0
       path-type: 4.0.0
@@ -9004,6 +8493,17 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /css-tree@2.3.1:
+    resolution:
+      {
+        integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+      }
+    engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0 }
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.2.0
+    dev: true
+
   /css-what@6.1.0:
     resolution:
       {
@@ -9024,12 +8524,14 @@ packages:
       {
         integrity: sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
       }
+    requiresBuild: true
     dependencies:
       inherits: 2.0.4
       source-map: 0.6.1
       source-map-resolve: 0.5.3
       urix: 0.1.0
     dev: true
+    optional: true
 
   /cssesc@3.0.0:
     resolution:
@@ -9148,12 +8650,6 @@ packages:
       }
     dev: true
 
-  /csstype@3.1.2:
-    resolution:
-      {
-        integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
-      }
-
   /csstype@3.1.3:
     resolution:
       {
@@ -9171,23 +8667,23 @@ packages:
     dependencies:
       '@cypress/request': 3.0.1
       '@cypress/xvfb': 1.2.4(supports-color@8.1.1)
-      '@types/node': 18.18.0
+      '@types/node': 18.19.0
       '@types/sinonjs__fake-timers': 8.1.1
-      '@types/sizzle': 2.3.3
+      '@types/sizzle': 2.3.8
       arch: 2.2.0
       blob-util: 2.0.2
       bluebird: 3.7.2
       buffer: 5.7.1
-      cachedir: 2.3.0
+      cachedir: 2.4.0
       chalk: 4.1.2
       check-more-types: 2.24.0
       cli-cursor: 3.1.0
-      cli-table3: 0.6.3
+      cli-table3: 0.6.5
       commander: 6.2.1
       common-tags: 1.8.2
-      dayjs: 1.11.9
-      debug: 4.3.4(supports-color@8.1.1)
-      enquirer: 2.3.6
+      dayjs: 1.11.12
+      debug: 4.3.6(supports-color@8.1.1)
+      enquirer: 2.4.1
       eventemitter2: 6.4.7
       execa: 4.1.0
       executable: 4.1.1
@@ -9198,7 +8694,7 @@ packages:
       is-ci: 3.0.1
       is-installed-globally: 0.4.0
       lazy-ass: 1.6.0
-      listr2: 3.14.0(enquirer@2.3.6)
+      listr2: 3.14.0(enquirer@2.4.1)
       lodash: 4.17.21
       log-symbols: 4.1.0
       minimist: 1.2.8
@@ -9207,9 +8703,9 @@ packages:
       process: 0.11.10
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
-      semver: 7.5.4
+      semver: 7.6.3
       supports-color: 8.1.1
-      tmp: 0.2.1
+      tmp: 0.2.3
       untildify: 4.0.0
       yauzl: 2.10.0
     dev: true
@@ -9244,6 +8740,39 @@ packages:
       whatwg-url: 8.7.0
     dev: true
 
+  /data-view-buffer@1.0.1:
+    resolution:
+      {
+        integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-data-view: 1.0.1
+
+  /data-view-byte-length@1.0.1:
+    resolution:
+      {
+        integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-data-view: 1.0.1
+
+  /data-view-byte-offset@1.0.0:
+    resolution:
+      {
+        integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-data-view: 1.0.1
+
   /date-fns@2.30.0:
     resolution:
       {
@@ -9251,7 +8780,7 @@ packages:
       }
     engines: { node: '>=0.11' }
     dependencies:
-      '@babel/runtime': 7.22.6
+      '@babel/runtime': 7.25.0
     dev: true
 
   /dateformat@3.0.3:
@@ -9261,10 +8790,10 @@ packages:
       }
     dev: true
 
-  /dayjs@1.11.9:
+  /dayjs@1.11.12:
     resolution:
       {
-        integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==
+        integrity: sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==
       }
     dev: true
 
@@ -9305,12 +8834,27 @@ packages:
       ms: 2.1.3
       supports-color: 8.1.1
 
-  /debug@4.3.4(supports-color@8.1.1):
+  /debug@4.3.4:
     resolution:
       {
         integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
       }
     engines: { node: '>=6.0' }
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
+  /debug@4.3.6(supports-color@8.1.1):
+    resolution:
+      {
+        integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
+      }
+    engines: { node: '>=6.0' }
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
@@ -9383,36 +8927,25 @@ packages:
     engines: { node: '>=0.10.0' }
     dev: true
 
-  /default-browser-id@3.0.0:
-    resolution:
-      {
-        integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
-      }
-    engines: { node: '>=12' }
-    dependencies:
-      bplist-parser: 0.2.0
-      untildify: 4.0.0
-
-  /default-browser@4.0.0:
+  /defaults@1.0.4:
     resolution:
       {
-        integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
+        integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
       }
-    engines: { node: '>=14.16' }
     dependencies:
-      bundle-name: 3.0.0
-      default-browser-id: 3.0.0
-      execa: 7.2.0
-      titleize: 3.0.0
+      clone: 1.0.4
+    dev: true
 
-  /defaults@1.0.4:
+  /define-data-property@1.1.4:
     resolution:
       {
-        integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
+        integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      clone: 1.0.4
-    dev: true
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      gopd: 1.0.1
 
   /define-lazy-prop@2.0.0:
     resolution:
@@ -9422,21 +8955,15 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
-  /define-lazy-prop@3.0.0:
-    resolution:
-      {
-        integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
-      }
-    engines: { node: '>=12' }
-
-  /define-properties@1.2.0:
+  /define-properties@1.2.1:
     resolution:
       {
-        integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
+        integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      has-property-descriptors: 1.0.0
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
   /del@5.1.0:
@@ -9488,14 +9015,6 @@ packages:
       }
     dev: true
 
-  /depd@2.0.0:
-    resolution:
-      {
-        integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
-      }
-    engines: { node: '>= 0.8' }
-    dev: true
-
   /deprecation@2.3.1:
     resolution:
       {
@@ -9549,10 +9068,10 @@ packages:
     engines: { node: '>=0.3.1' }
     dev: true
 
-  /diff@5.0.0:
+  /diff@5.2.0:
     resolution:
       {
-        integrity: sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
+        integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
       }
     engines: { node: '>=0.3.1' }
     dev: true
@@ -9596,7 +9115,6 @@ packages:
       {
         integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==
       }
-    requiresBuild: true
     dev: true
 
   /dom-accessibility-api@0.5.16:
@@ -9606,13 +9124,6 @@ packages:
       }
     dev: true
 
-  /dom-event-types@1.1.0:
-    resolution:
-      {
-        integrity: sha512-jNCX+uNJ3v38BKvPbpki6j5ItVlnSqVV6vDWGS6rExzCMjsc39frLjm1n91o6YaKK6AZl0wLloItW6C6mr61BQ==
-      }
-    dev: true
-
   /dom-serializer@1.4.1:
     resolution:
       {
@@ -9637,6 +9148,7 @@ packages:
         integrity: sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
       }
     engines: { node: '>=8' }
+    deprecated: Use your platform's native DOMException instead
     dependencies:
       webidl-conversions: 5.0.0
     dev: true
@@ -9725,24 +9237,24 @@ packages:
       '@one-ini/wasm': 0.1.1
       commander: 10.0.1
       minimatch: 9.0.1
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
-  /ejs@3.1.9:
+  /ejs@3.1.10:
     resolution:
       {
-        integrity: sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
+        integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
       }
     engines: { node: '>=0.10.0' }
     hasBin: true
     dependencies:
-      jake: 10.8.7
+      jake: 10.9.2
     dev: true
 
-  /electron-to-chromium@1.4.468:
+  /electron-to-chromium@1.5.4:
     resolution:
       {
-        integrity: sha512-6M1qyhaJOt7rQtNti1lBA0GwclPH+oKCmsra/hkcWs5INLxfXXD/dtdnaKUYQu/pjOBP/8Osoe4mAcNvvzoFag==
+        integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==
       }
     dev: true
 
@@ -9754,10 +9266,10 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
-  /emoji-regex@10.2.1:
+  /emoji-regex@10.3.0:
     resolution:
       {
-        integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==
+        integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
       }
 
   /emoji-regex@8.0.0:
@@ -9802,10 +9314,10 @@ packages:
       once: 1.4.0
     dev: true
 
-  /enhanced-resolve@5.15.0:
+  /enhanced-resolve@5.17.1:
     resolution:
       {
-        integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+        integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
       }
     engines: { node: '>=10.13.0' }
     dependencies:
@@ -9822,6 +9334,17 @@ packages:
       ansi-colors: 4.1.3
     dev: true
 
+  /enquirer@2.4.1:
+    resolution:
+      {
+        integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
+      }
+    engines: { node: '>=8.6' }
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+    dev: true
+
   /entities@2.2.0:
     resolution:
       {
@@ -9844,10 +9367,10 @@ packages:
     engines: { node: '>=6' }
     dev: true
 
-  /envinfo@7.10.0:
+  /envinfo@7.13.0:
     resolution:
       {
-        integrity: sha512-ZtUjZO6l5mwTHvc1L9+1q5p/R3wTopcfqMW8r5t8SJSKqeVI/LtajORwRFEKpEFuekjD0VBjwu1HMxL4UalIRw==
+        integrity: sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==
       }
     engines: { node: '>=4' }
     hasBin: true
@@ -9890,71 +9413,103 @@ packages:
       stackframe: 1.3.4
     dev: true
 
-  /es-abstract@1.22.1:
+  /es-abstract@1.23.3:
     resolution:
       {
-        integrity: sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==
+        integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.1
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      es-set-tostringtag: 2.0.1
+      array-buffer-byte-length: 1.0.1
+      arraybuffer.prototype.slice: 1.0.3
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.7
+      data-view-buffer: 1.0.1
+      data-view-byte-length: 1.0.1
+      data-view-byte-offset: 1.0.0
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      es-set-tostringtag: 2.0.3
       es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.5
-      get-intrinsic: 1.2.1
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
+      function.prototype.name: 1.1.6
+      get-intrinsic: 1.2.4
+      get-symbol-description: 1.0.2
+      globalthis: 1.0.4
       gopd: 1.0.1
-      has: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
+      has-property-descriptors: 1.0.2
+      has-proto: 1.0.3
       has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      is-array-buffer: 3.0.2
+      hasown: 2.0.2
+      internal-slot: 1.0.7
+      is-array-buffer: 3.0.4
       is-callable: 1.2.7
-      is-negative-zero: 2.0.2
+      is-data-view: 1.0.1
+      is-negative-zero: 2.0.3
       is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
+      is-shared-array-buffer: 1.0.3
       is-string: 1.0.7
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
       is-weakref: 1.0.2
-      object-inspect: 1.12.3
+      object-inspect: 1.13.2
       object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.5.0
-      safe-array-concat: 1.0.0
-      safe-regex-test: 1.0.0
-      string.prototype.trim: 1.2.7
-      string.prototype.trimend: 1.0.6
-      string.prototype.trimstart: 1.0.6
-      typed-array-buffer: 1.0.0
-      typed-array-byte-length: 1.0.0
-      typed-array-byte-offset: 1.0.0
-      typed-array-length: 1.0.4
+      object.assign: 4.1.5
+      regexp.prototype.flags: 1.5.2
+      safe-array-concat: 1.1.2
+      safe-regex-test: 1.0.3
+      string.prototype.trim: 1.2.9
+      string.prototype.trimend: 1.0.8
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.2
+      typed-array-byte-length: 1.0.1
+      typed-array-byte-offset: 1.0.2
+      typed-array-length: 1.0.6
       unbox-primitive: 1.0.2
-      which-typed-array: 1.1.11
+      which-typed-array: 1.1.15
+
+  /es-define-property@1.0.0:
+    resolution:
+      {
+        integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      get-intrinsic: 1.2.4
+
+  /es-errors@1.3.0:
+    resolution:
+      {
+        integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+      }
+    engines: { node: '>= 0.4' }
 
-  /es-set-tostringtag@2.0.1:
+  /es-object-atoms@1.0.0:
     resolution:
       {
-        integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+        integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      has-tostringtag: 1.0.0
+      es-errors: 1.3.0
 
-  /es-shim-unscopables@1.0.0:
+  /es-set-tostringtag@2.0.3:
     resolution:
       {
-        integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+        integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      get-intrinsic: 1.2.4
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  /es-shim-unscopables@1.0.2:
+    resolution:
+      {
+        integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
       }
     dependencies:
-      has: 1.0.3
+      hasown: 2.0.2
 
   /es-to-primitive@1.2.1:
     resolution:
@@ -9967,13 +9522,6 @@ packages:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
-  /es6-object-assign@1.1.0:
-    resolution:
-      {
-        integrity: sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==
-      }
-    dev: true
-
   /esbuild-android-64@0.14.54:
     resolution:
       {
@@ -10279,38 +9827,38 @@ packages:
       '@esbuild/win32-x64': 0.18.20
     dev: true
 
-  /esbuild@0.19.11:
+  /esbuild@0.19.12:
     resolution:
       {
-        integrity: sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==
+        integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
       }
     engines: { node: '>=12' }
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.19.11
-      '@esbuild/android-arm': 0.19.11
-      '@esbuild/android-arm64': 0.19.11
-      '@esbuild/android-x64': 0.19.11
-      '@esbuild/darwin-arm64': 0.19.11
-      '@esbuild/darwin-x64': 0.19.11
-      '@esbuild/freebsd-arm64': 0.19.11
-      '@esbuild/freebsd-x64': 0.19.11
-      '@esbuild/linux-arm': 0.19.11
-      '@esbuild/linux-arm64': 0.19.11
-      '@esbuild/linux-ia32': 0.19.11
-      '@esbuild/linux-loong64': 0.19.11
-      '@esbuild/linux-mips64el': 0.19.11
-      '@esbuild/linux-ppc64': 0.19.11
-      '@esbuild/linux-riscv64': 0.19.11
-      '@esbuild/linux-s390x': 0.19.11
-      '@esbuild/linux-x64': 0.19.11
-      '@esbuild/netbsd-x64': 0.19.11
-      '@esbuild/openbsd-x64': 0.19.11
-      '@esbuild/sunos-x64': 0.19.11
-      '@esbuild/win32-arm64': 0.19.11
-      '@esbuild/win32-ia32': 0.19.11
-      '@esbuild/win32-x64': 0.19.11
+      '@esbuild/aix-ppc64': 0.19.12
+      '@esbuild/android-arm': 0.19.12
+      '@esbuild/android-arm64': 0.19.12
+      '@esbuild/android-x64': 0.19.12
+      '@esbuild/darwin-arm64': 0.19.12
+      '@esbuild/darwin-x64': 0.19.12
+      '@esbuild/freebsd-arm64': 0.19.12
+      '@esbuild/freebsd-x64': 0.19.12
+      '@esbuild/linux-arm': 0.19.12
+      '@esbuild/linux-arm64': 0.19.12
+      '@esbuild/linux-ia32': 0.19.12
+      '@esbuild/linux-loong64': 0.19.12
+      '@esbuild/linux-mips64el': 0.19.12
+      '@esbuild/linux-ppc64': 0.19.12
+      '@esbuild/linux-riscv64': 0.19.12
+      '@esbuild/linux-s390x': 0.19.12
+      '@esbuild/linux-x64': 0.19.12
+      '@esbuild/netbsd-x64': 0.19.12
+      '@esbuild/openbsd-x64': 0.19.12
+      '@esbuild/sunos-x64': 0.19.12
+      '@esbuild/win32-arm64': 0.19.12
+      '@esbuild/win32-ia32': 0.19.12
+      '@esbuild/win32-x64': 0.19.12
     dev: true
 
   /esbuild@0.20.0:
@@ -10347,10 +9895,10 @@ packages:
       '@esbuild/win32-x64': 0.20.0
     dev: true
 
-  /escalade@3.1.1:
+  /escalade@3.1.2:
     resolution:
       {
-        integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+        integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
       }
     engines: { node: '>=6' }
     dev: true
@@ -10417,15 +9965,15 @@ packages:
       eslint: 8.33.0
     dev: true
 
-  /eslint-import-resolver-node@0.3.7:
+  /eslint-import-resolver-node@0.3.9:
     resolution:
       {
-        integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
+        integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
       }
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
-      is-core-module: 2.12.1
-      resolve: 1.22.2
+      is-core-module: 2.15.0
+      resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
 
@@ -10439,15 +9987,15 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
-      enhanced-resolve: 5.15.0
+      debug: 4.3.6(supports-color@8.1.1)
+      enhanced-resolve: 5.17.1
       eslint: 8.32.0
       eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-typescript@3.5.2)(eslint@8.32.0)
-      get-tsconfig: 4.6.2
+      get-tsconfig: 4.7.6
       globby: 13.2.2
-      is-core-module: 2.12.1
+      is-core-module: 2.15.0
       is-glob: 4.0.3
-      synckit: 0.8.5
+      synckit: 0.8.8
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -10462,23 +10010,23 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
-      enhanced-resolve: 5.15.0
+      debug: 4.3.6(supports-color@8.1.1)
+      enhanced-resolve: 5.17.1
       eslint: 8.33.0
       eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-typescript@3.5.2)(eslint@8.33.0)
-      get-tsconfig: 4.6.2
+      get-tsconfig: 4.7.6
       globby: 13.2.2
-      is-core-module: 2.12.1
+      is-core-module: 2.15.0
       is-glob: 4.0.3
-      synckit: 0.8.5
+      synckit: 0.8.8
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.2)(eslint@8.32.0):
+  /eslint-module-utils@2.8.1(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.2)(eslint@8.32.0):
     resolution:
       {
-        integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
+        integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
       }
     engines: { node: '>=4' }
     peerDependencies:
@@ -10502,16 +10050,16 @@ packages:
       '@typescript-eslint/parser': 5.49.0(eslint@8.32.0)(typescript@4.9.4)
       debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.32.0
-      eslint-import-resolver-node: 0.3.7
+      eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.5.2(eslint-plugin-import@2.27.5)(eslint@8.32.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.2)(eslint@8.33.0):
+  /eslint-module-utils@2.8.1(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.2)(eslint@8.33.0):
     resolution:
       {
-        integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
+        integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
       }
     engines: { node: '>=4' }
     peerDependencies:
@@ -10535,7 +10083,7 @@ packages:
       '@typescript-eslint/parser': 5.49.0(eslint@8.33.0)(typescript@4.9.4)
       debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.33.0
-      eslint-import-resolver-node: 0.3.7
+      eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.5.2(eslint-plugin-import@2.27.5)(eslint@8.33.0)
     transitivePeerDependencies:
       - supports-color
@@ -10579,22 +10127,22 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 5.49.0(eslint@8.32.0)(typescript@4.9.4)
-      array-includes: 3.1.6
-      array.prototype.flat: 1.3.1
-      array.prototype.flatmap: 1.3.1
+      array-includes: 3.1.8
+      array.prototype.flat: 1.3.2
+      array.prototype.flatmap: 1.3.2
       debug: 3.2.7(supports-color@8.1.1)
       doctrine: 2.1.0
       eslint: 8.32.0
-      eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.2)(eslint@8.32.0)
-      has: 1.0.3
-      is-core-module: 2.12.1
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.2)(eslint@8.32.0)
+      has: 1.0.4
+      is-core-module: 2.15.0
       is-glob: 4.0.3
       minimatch: 3.1.2
-      object.values: 1.1.6
-      resolve: 1.22.2
+      object.values: 1.2.0
+      resolve: 1.22.8
       semver: 6.3.1
-      tsconfig-paths: 3.14.2
+      tsconfig-paths: 3.15.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -10615,22 +10163,22 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 5.49.0(eslint@8.33.0)(typescript@4.9.4)
-      array-includes: 3.1.6
-      array.prototype.flat: 1.3.1
-      array.prototype.flatmap: 1.3.1
+      array-includes: 3.1.8
+      array.prototype.flat: 1.3.2
+      array.prototype.flatmap: 1.3.2
       debug: 3.2.7(supports-color@8.1.1)
       doctrine: 2.1.0
       eslint: 8.33.0
-      eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.2)(eslint@8.33.0)
-      has: 1.0.3
-      is-core-module: 2.12.1
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.49.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.2)(eslint@8.33.0)
+      has: 1.0.4
+      is-core-module: 2.15.0
       is-glob: 4.0.3
       minimatch: 3.1.2
-      object.values: 1.1.6
-      resolve: 1.22.2
+      object.values: 1.2.0
+      resolve: 1.22.8
       semver: 6.3.1
-      tsconfig-paths: 3.14.2
+      tsconfig-paths: 3.15.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -10696,11 +10244,11 @@ packages:
     dependencies:
       '@es-joy/jsdoccomment': 0.36.1
       comment-parser: 1.3.1
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
       eslint: 8.32.0
-      esquery: 1.5.0
-      semver: 7.5.4
+      esquery: 1.6.0
+      semver: 7.6.3
       spdx-expression-parse: 3.0.1
     transitivePeerDependencies:
       - supports-color
@@ -10717,11 +10265,11 @@ packages:
     dependencies:
       '@es-joy/jsdoccomment': 0.36.1
       comment-parser: 1.3.1
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
       eslint: 8.33.0
-      esquery: 1.5.0
-      semver: 7.5.4
+      esquery: 1.6.0
+      semver: 7.6.3
       spdx-expression-parse: 3.0.1
     transitivePeerDependencies:
       - supports-color
@@ -10776,22 +10324,22 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
     dependencies:
-      array-includes: 3.1.6
-      array.prototype.flatmap: 1.3.1
-      array.prototype.tosorted: 1.1.1
+      array-includes: 3.1.8
+      array.prototype.flatmap: 1.3.2
+      array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       eslint: 8.33.0
       estraverse: 5.3.0
-      jsx-ast-utils: 3.3.4
+      jsx-ast-utils: 3.3.5
       minimatch: 3.1.2
-      object.entries: 1.1.6
-      object.fromentries: 2.0.6
-      object.hasown: 1.1.2
-      object.values: 1.1.6
+      object.entries: 1.1.8
+      object.fromentries: 2.0.8
+      object.hasown: 1.1.4
+      object.values: 1.2.0
       prop-types: 15.8.1
-      resolve: 2.0.0-next.4
+      resolve: 2.0.0-next.5
       semver: 6.3.1
-      string.prototype.matchall: 4.0.8
+      string.prototype.matchall: 4.0.11
     dev: true
 
   /eslint-plugin-tsdoc@0.2.17:
@@ -10816,8 +10364,8 @@ packages:
       eslint-utils: 3.0.0(eslint@8.32.0)
       natural-compare: 1.4.0
       nth-check: 2.1.1
-      postcss-selector-parser: 6.0.13
-      semver: 7.5.4
+      postcss-selector-parser: 6.1.1
+      semver: 7.6.3
       vue-eslint-parser: 8.3.0(eslint@8.32.0)
     transitivePeerDependencies:
       - supports-color
@@ -10836,8 +10384,8 @@ packages:
       eslint-utils: 3.0.0(eslint@8.33.0)
       natural-compare: 1.4.0
       nth-check: 2.1.1
-      postcss-selector-parser: 6.0.13
-      semver: 7.5.4
+      postcss-selector-parser: 6.1.1
+      semver: 7.6.3
       vue-eslint-parser: 8.3.0(eslint@8.33.0)
     transitivePeerDependencies:
       - supports-color
@@ -10852,9 +10400,9 @@ packages:
       eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       aria-query: 5.3.0
-      emoji-regex: 10.2.1
+      emoji-regex: 10.3.0
       eslint: 8.32.0
-      vue-eslint-parser: 9.3.1(eslint@8.32.0)
+      vue-eslint-parser: 9.4.3(eslint@8.32.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -10868,9 +10416,9 @@ packages:
       eslint: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       aria-query: 5.3.0
-      emoji-regex: 10.2.1
+      emoji-regex: 10.3.0
       eslint: 8.33.0
-      vue-eslint-parser: 9.3.1(eslint@8.33.0)
+      vue-eslint-parser: 9.4.3(eslint@8.33.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -10885,10 +10433,10 @@ packages:
       esrecurse: 4.3.0
       estraverse: 4.3.0
 
-  /eslint-scope@7.2.1:
+  /eslint-scope@7.2.2:
     resolution:
       {
-        integrity: sha512-CvefSOsDdaYYvxChovdrPo/ZGt8d5lrJWleAc1diXRKhHGiTYEI26cvo8Kle/wGnsizoCJjK73FMg1/IkIwiNA==
+        integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
       }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
@@ -10927,10 +10475,10 @@ packages:
       }
     engines: { node: '>=10' }
 
-  /eslint-visitor-keys@3.4.1:
+  /eslint-visitor-keys@3.4.3:
     resolution:
       {
-        integrity: sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
+        integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
       }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
 
@@ -10943,28 +10491,28 @@ packages:
     hasBin: true
     dependencies:
       '@eslint/eslintrc': 1.4.1
-      '@humanwhocodes/config-array': 0.11.10
+      '@humanwhocodes/config-array': 0.11.14
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.1
+      eslint-scope: 7.2.2
       eslint-utils: 3.0.0(eslint@8.32.0)
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.20.0
+      globals: 13.24.0
       grapheme-splitter: 1.0.4
-      ignore: 5.2.4
+      ignore: 5.3.1
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
       is-glob: 4.0.3
@@ -10976,7 +10524,7 @@ packages:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.3
+      optionator: 0.9.4
       regexpp: 3.2.0
       strip-ansi: 6.0.1
       strip-json-comments: 3.1.1
@@ -10993,28 +10541,28 @@ packages:
     hasBin: true
     dependencies:
       '@eslint/eslintrc': 1.4.1
-      '@humanwhocodes/config-array': 0.11.10
+      '@humanwhocodes/config-array': 0.11.14
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.1
+      eslint-scope: 7.2.2
       eslint-utils: 3.0.0(eslint@8.33.0)
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.20.0
+      globals: 13.24.0
       grapheme-splitter: 1.0.4
-      ignore: 5.2.4
+      ignore: 5.3.1
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
       is-glob: 4.0.3
@@ -11026,7 +10574,7 @@ packages:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.3
+      optionator: 0.9.4
       regexpp: 3.2.0
       strip-ansi: 6.0.1
       strip-json-comments: 3.1.1
@@ -11035,6 +10583,13 @@ packages:
       - supports-color
     dev: true
 
+  /esm-resolve@1.0.11:
+    resolution:
+      {
+        integrity: sha512-LxF0wfUQm3ldUDHkkV2MIbvvY0TgzIpJ420jHSV1Dm+IlplBEWiJTKWM61GtxUfvjV6iD4OtTYFGAGM2uuIUWg==
+      }
+    dev: true
+
   /espree@9.6.1:
     resolution:
       {
@@ -11042,9 +10597,9 @@ packages:
       }
     engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
     dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
-      eslint-visitor-keys: 3.4.1
+      acorn: 8.12.1
+      acorn-jsx: 5.3.2(acorn@8.12.1)
+      eslint-visitor-keys: 3.4.3
 
   /esprima@4.0.1:
     resolution:
@@ -11055,10 +10610,10 @@ packages:
     hasBin: true
     dev: true
 
-  /esquery@1.5.0:
+  /esquery@1.6.0:
     resolution:
       {
-        integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+        integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
       }
     engines: { node: '>=0.10' }
     dependencies:
@@ -11122,14 +10677,6 @@ packages:
       through: 2.3.8
     dev: true
 
-  /event-target-shim@5.0.1:
-    resolution:
-      {
-        integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
-      }
-    engines: { node: '>=6' }
-    dev: true
-
   /eventemitter2@6.4.7:
     resolution:
       {
@@ -11151,14 +10698,6 @@ packages:
       }
     dev: true
 
-  /events@3.3.0:
-    resolution:
-      {
-        integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-      }
-    engines: { node: '>=0.8.x' }
-    dev: true
-
   /execa@4.1.0:
     resolution:
       {
@@ -11211,6 +10750,7 @@ packages:
       onetime: 5.1.2
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
+    dev: true
 
   /execa@7.2.0:
     resolution:
@@ -11224,10 +10764,11 @@ packages:
       human-signals: 4.3.1
       is-stream: 3.0.0
       merge-stream: 2.0.0
-      npm-run-path: 5.1.0
+      npm-run-path: 5.3.0
       onetime: 6.0.0
       signal-exit: 3.0.7
       strip-final-newline: 3.0.0
+    dev: true
 
   /executable@4.1.1:
     resolution:
@@ -11267,16 +10808,6 @@ packages:
       }
     dev: true
 
-  /extend-shallow@2.0.1:
-    resolution:
-      {
-        integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
-      }
-    engines: { node: '>=0.10.0' }
-    dependencies:
-      is-extendable: 0.1.1
-    dev: true
-
   /extend@3.0.2:
     resolution:
       {
@@ -11296,16 +10827,6 @@ packages:
       tmp: 0.0.33
     dev: true
 
-  /extract-from-css@0.4.4:
-    resolution:
-      {
-        integrity: sha512-41qWGBdtKp9U7sgBxAQ7vonYqSXzgW/SiAYzq4tdWSVhAShvpVCH1nyvPQgjse6EdgbW7Y7ERdT3674/lKr65A==
-      }
-    engines: { node: '>=0.10.0', npm: '>=2.0.0' }
-    dependencies:
-      css: 2.2.4
-    dev: true
-
   /extract-zip@2.0.1(supports-color@8.1.1):
     resolution:
       {
@@ -11314,11 +10835,11 @@ packages:
     engines: { node: '>= 10.17.0' }
     hasBin: true
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
-      '@types/yauzl': 2.10.0
+      '@types/yauzl': 2.10.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11331,14 +10852,6 @@ packages:
     engines: { '0': node >=0.6.0 }
     dev: true
 
-  /extsprintf@1.4.1:
-    resolution:
-      {
-        integrity: sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
-      }
-    engines: { '0': node >=0.6.0 }
-    dev: true
-
   /fast-deep-equal@3.1.3:
     resolution:
       {
@@ -11362,13 +10875,13 @@ packages:
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.5
+      micromatch: 4.0.7
     dev: true
 
-  /fast-glob@3.3.1:
+  /fast-glob@3.3.2:
     resolution:
       {
-        integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+        integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
       }
     engines: { node: '>=8.6.0' }
     dependencies:
@@ -11376,7 +10889,7 @@ packages:
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.5
+      micromatch: 4.0.7
 
   /fast-json-stable-stringify@2.1.0:
     resolution:
@@ -11397,10 +10910,10 @@ packages:
       }
     dev: true
 
-  /fastq@1.15.0:
+  /fastq@1.17.1:
     resolution:
       {
-        integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==
+        integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
       }
     dependencies:
       reusify: 1.0.4
@@ -11440,7 +10953,7 @@ packages:
       }
     engines: { node: ^10.12.0 || >=12.0.0 }
     dependencies:
-      flat-cache: 3.0.4
+      flat-cache: 3.2.0
 
   /file-url@3.0.0:
     resolution:
@@ -11459,10 +10972,10 @@ packages:
       minimatch: 5.1.6
     dev: true
 
-  /fill-range@7.0.1:
+  /fill-range@7.1.1:
     resolution:
       {
-        integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+        integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
       }
     engines: { node: '>=8' }
     dependencies:
@@ -11519,14 +11032,15 @@ packages:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  /flat-cache@3.0.4:
+  /flat-cache@3.2.0:
     resolution:
       {
-        integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+        integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
       }
     engines: { node: ^10.12.0 || >=12.0.0 }
     dependencies:
-      flatted: 3.2.7
+      flatted: 3.3.1
+      keyv: 4.5.4
       rimraf: 3.0.2
 
   /flat@5.0.2:
@@ -11537,16 +11051,16 @@ packages:
     hasBin: true
     dev: true
 
-  /flatted@3.2.7:
+  /flatted@3.3.1:
     resolution:
       {
-        integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+        integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
       }
 
-  /follow-redirects@1.15.2(debug@4.3.4):
+  /follow-redirects@1.15.6(debug@4.3.4):
     resolution:
       {
-        integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+        integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
       }
     engines: { node: '>=4.0' }
     peerDependencies:
@@ -11555,7 +11069,7 @@ packages:
       debug:
         optional: true
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
     dev: true
 
   /for-each@0.3.3:
@@ -11566,15 +11080,15 @@ packages:
     dependencies:
       is-callable: 1.2.7
 
-  /foreground-child@3.1.1:
+  /foreground-child@3.2.1:
     resolution:
       {
-        integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+        integrity: sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==
       }
     engines: { node: '>=14' }
     dependencies:
       cross-spawn: 7.0.3
-      signal-exit: 4.0.2
+      signal-exit: 4.1.0
     dev: true
 
   /forever-agent@0.6.1:
@@ -11620,10 +11134,10 @@ packages:
       mime-types: 2.1.35
     dev: true
 
-  /fraction.js@4.2.0:
+  /fraction.js@4.3.7:
     resolution:
       {
-        integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+        integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
       }
     dev: true
 
@@ -11650,19 +11164,19 @@ packages:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
-      universalify: 2.0.0
+      universalify: 2.0.1
     dev: true
 
-  /fs-extra@11.1.1:
+  /fs-extra@11.2.0:
     resolution:
       {
-        integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
+        integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==
       }
     engines: { node: '>=14.14' }
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
-      universalify: 2.0.0
+      universalify: 2.0.1
     dev: true
 
   /fs-extra@7.0.1:
@@ -11699,7 +11213,7 @@ packages:
       at-least-node: 1.0.0
       graceful-fs: 4.2.11
       jsonfile: 6.1.0
-      universalify: 2.0.0
+      universalify: 2.0.1
     dev: true
 
   /fs-minipass@2.1.0:
@@ -11712,14 +11226,14 @@ packages:
       minipass: 3.3.6
     dev: true
 
-  /fs-minipass@3.0.2:
+  /fs-minipass@3.0.3:
     resolution:
       {
-        integrity: sha512-2GAfyfoaCDRrM6jaOS3UsBts8yJ55VioXdWcOL7dK9zdAuKT71+WBA4ifnNYqVjYv+4SsPxjK0JT4yIIn4cA/g==
+        integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      minipass: 5.0.0
+      minipass: 7.1.2
     dev: true
 
   /fs.realpath@1.0.0:
@@ -11739,22 +11253,22 @@ packages:
     dev: true
     optional: true
 
-  /function-bind@1.1.1:
+  /function-bind@1.1.2:
     resolution:
       {
-        integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+        integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
       }
 
-  /function.prototype.name@1.1.5:
+  /function.prototype.name@1.1.6:
     resolution:
       {
-        integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+        integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
       functions-have-names: 1.2.3
 
   /functions-have-names@1.2.3:
@@ -11769,6 +11283,7 @@ packages:
         integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==
       }
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
+    deprecated: This package is no longer supported.
     dependencies:
       aproba: 2.0.0
       color-support: 1.1.3
@@ -11780,18 +11295,19 @@ packages:
       wide-align: 1.1.5
     dev: true
 
-  /gauge@5.0.1:
+  /gauge@5.0.2:
     resolution:
       {
-        integrity: sha512-CmykPMJGuNan/3S4kZOpvvPYSNqSHANiWnh9XcMU2pSjtBfF0XzZ2p1bFAxTbnFxyBuPxQYHhzwaoOmUdqzvxQ==
+        integrity: sha512-pMaFftXPtiGIHCJHdcUUx9Rby/rFT/Kkt3fIIGCs+9PMDIljSyRiqraTlxNtBReJRDfUefpa263RQ3vnp5G/LQ==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
+    deprecated: This package is no longer supported.
     dependencies:
       aproba: 2.0.0
       color-support: 1.1.3
       console-control-strings: 1.1.0
       has-unicode: 2.0.1
-      signal-exit: 4.0.2
+      signal-exit: 4.1.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wide-align: 1.1.5
@@ -11822,16 +11338,18 @@ packages:
     engines: { node: 6.* || 8.* || >= 10.* }
     dev: true
 
-  /get-intrinsic@1.2.1:
+  /get-intrinsic@1.2.4:
     resolution:
       {
-        integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+        integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-proto: 1.0.1
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      has-proto: 1.0.3
       has-symbols: 1.0.3
+      hasown: 2.0.2
 
   /get-package-type@0.1.0:
     resolution:
@@ -11887,21 +11405,23 @@ packages:
         integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
       }
     engines: { node: '>=10' }
+    dev: true
 
-  /get-symbol-description@1.0.0:
+  /get-symbol-description@1.0.2:
     resolution:
       {
-        integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+        integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
 
-  /get-tsconfig@4.6.2:
+  /get-tsconfig@4.7.6:
     resolution:
       {
-        integrity: sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==
+        integrity: sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==
       }
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -11912,7 +11432,7 @@ packages:
         integrity: sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==
       }
     dependencies:
-      async: 3.2.4
+      async: 3.2.5
     dev: true
 
   /getpass@0.1.7:
@@ -12016,26 +11536,26 @@ packages:
     engines: { node: '>=16 || 14 >=14.17' }
     hasBin: true
     dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 2.2.1
-      minimatch: 9.0.3
+      foreground-child: 3.2.1
+      jackspeak: 2.3.6
+      minimatch: 9.0.5
       minipass: 6.0.2
-      path-scurry: 1.10.1
+      path-scurry: 1.11.1
     dev: true
 
-  /glob@10.3.10:
+  /glob@10.3.16:
     resolution:
       {
-        integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+        integrity: sha512-JDKXl1DiuuHJ6fVS2FXjownaavciiHNUU4mOvV/B793RLh05vZL1rcPnCSaOgv1hDT6RDlY7AB7ZUvFYAtPgAw==
       }
-    engines: { node: '>=16 || 14 >=14.17' }
+    engines: { node: '>=16 || 14 >=14.18' }
     hasBin: true
     dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 2.3.6
-      minimatch: 9.0.3
-      minipass: 6.0.2
-      path-scurry: 1.10.1
+      foreground-child: 3.2.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      path-scurry: 1.11.1
     dev: true
 
   /glob@7.1.4:
@@ -12043,34 +11563,7 @@ packages:
       {
         integrity: sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
       }
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: true
-
-  /glob@7.1.6:
-    resolution:
-      {
-        integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-      }
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: true
-
-  /glob@7.2.0:
-    resolution:
-      {
-        integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
-      }
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -12085,6 +11578,7 @@ packages:
       {
         integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
       }
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -12099,6 +11593,7 @@ packages:
         integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
       }
     engines: { node: '>=12' }
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -12124,23 +11619,24 @@ packages:
       }
     engines: { node: '>=4' }
 
-  /globals@13.20.0:
+  /globals@13.24.0:
     resolution:
       {
-        integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
+        integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
       }
     engines: { node: '>=8' }
     dependencies:
       type-fest: 0.20.2
 
-  /globalthis@1.0.3:
+  /globalthis@1.0.4:
     resolution:
       {
-        integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+        integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      define-properties: 1.2.0
+      define-properties: 1.2.1
+      gopd: 1.0.1
 
   /globby@10.0.1:
     resolution:
@@ -12152,9 +11648,9 @@ packages:
       '@types/glob': 7.2.0
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       glob: 7.2.3
-      ignore: 5.2.4
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -12169,9 +11665,9 @@ packages:
       '@types/glob': 7.2.0
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       glob: 7.2.3
-      ignore: 5.2.4
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -12185,8 +11681,8 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
+      fast-glob: 3.3.2
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 3.0.0
 
@@ -12198,8 +11694,8 @@ packages:
     engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
     dependencies:
       dir-glob: 3.0.1
-      fast-glob: 3.3.1
-      ignore: 5.2.4
+      fast-glob: 3.3.2
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 4.0.0
 
@@ -12209,7 +11705,7 @@ packages:
         integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
       }
     dependencies:
-      get-intrinsic: 1.2.1
+      get-intrinsic: 1.2.4
 
   /graceful-fs@4.2.10:
     resolution:
@@ -12230,10 +11726,10 @@ packages:
         integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
       }
 
-  /handlebars@4.7.7:
+  /handlebars@4.7.8:
     resolution:
       {
-        integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
+        integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==
       }
     engines: { node: '>=0.4.7' }
     hasBin: true
@@ -12243,7 +11739,7 @@ packages:
       source-map: 0.6.1
       wordwrap: 1.0.0
     optionalDependencies:
-      uglify-js: 3.17.4
+      uglify-js: 3.19.1
     dev: true
 
   /hard-rejection@2.1.0:
@@ -12303,18 +11799,18 @@ packages:
       }
     engines: { node: '>=8' }
 
-  /has-property-descriptors@1.0.0:
+  /has-property-descriptors@1.0.2:
     resolution:
       {
-        integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+        integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
       }
     dependencies:
-      get-intrinsic: 1.2.1
+      es-define-property: 1.0.0
 
-  /has-proto@1.0.1:
+  /has-proto@1.0.3:
     resolution:
       {
-        integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+        integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
       }
     engines: { node: '>= 0.4' }
 
@@ -12325,10 +11821,10 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
-  /has-tostringtag@1.0.0:
+  /has-tostringtag@1.0.2:
     resolution:
       {
-        integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+        integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
       }
     engines: { node: '>= 0.4' }
     dependencies:
@@ -12341,14 +11837,12 @@ packages:
       }
     dev: true
 
-  /has@1.0.3:
+  /has@1.0.4:
     resolution:
       {
-        integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+        integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
       }
     engines: { node: '>= 0.4.0' }
-    dependencies:
-      function-bind: 1.1.1
 
   /hash-sum@1.0.2:
     resolution:
@@ -12364,6 +11858,15 @@ packages:
       }
     dev: true
 
+  /hasown@2.0.2:
+    resolution:
+      {
+        integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      function-bind: 1.1.2
+
   /he@1.2.0:
     resolution:
       {
@@ -12468,7 +11971,7 @@ packages:
     dependencies:
       '@tootallnate/once': 1.1.2
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12482,7 +11985,7 @@ packages:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12496,7 +11999,7 @@ packages:
     dependencies:
       assert-plus: 1.0.0
       jsprim: 2.0.2
-      sshpk: 1.17.0
+      sshpk: 1.18.0
     dev: true
 
   /https-proxy-agent@5.0.1:
@@ -12507,7 +12010,7 @@ packages:
     engines: { node: '>= 6' }
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12526,6 +12029,7 @@ packages:
         integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
       }
     engines: { node: '>=10.17.0' }
+    dev: true
 
   /human-signals@4.3.1:
     resolution:
@@ -12533,6 +12037,7 @@ packages:
         integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
       }
     engines: { node: '>=14.18.0' }
+    dev: true
 
   /humanize-ms@1.2.1:
     resolution:
@@ -12610,20 +12115,20 @@ packages:
       minimatch: 5.1.6
     dev: true
 
-  /ignore-walk@6.0.3:
+  /ignore-walk@6.0.5:
     resolution:
       {
-        integrity: sha512-C7FfFoTA+bI10qfeydT8aZbvr91vAEU+2W5BZUlzPec47oNb07SsOfwYrtxuvOYdUApPP/Qlh4DtAO51Ekk2QA==
+        integrity: sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      minimatch: 9.0.3
+      minimatch: 9.0.5
     dev: true
 
-  /ignore@5.2.4:
+  /ignore@5.3.1:
     resolution:
       {
-        integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+        integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
       }
     engines: { node: '>= 4' }
 
@@ -12638,10 +12143,10 @@ packages:
     dev: true
     optional: true
 
-  /immutable@4.3.1:
+  /immutable@4.3.7:
     resolution:
       {
-        integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==
+        integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
       }
     dev: true
 
@@ -12663,10 +12168,10 @@ packages:
     engines: { node: '>=8' }
     dev: true
 
-  /import-local@3.1.0:
+  /import-local@3.2.0:
     resolution:
       {
-        integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+        integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
       }
     engines: { node: '>=8' }
     hasBin: true
@@ -12702,6 +12207,10 @@ packages:
       {
         integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
       }
+    deprecated:
+      This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want
+      a good and tested way to coalesce async requests by a key value, which is much more
+      comprehensive and powerful.
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
@@ -12738,7 +12247,7 @@ packages:
       promzard: 0.3.0
       read: 1.0.7
       read-package-json: 5.0.1
-      semver: 7.5.4
+      semver: 7.6.3
       validate-npm-package-license: 3.0.4
       validate-npm-package-name: 4.0.0
     dev: true
@@ -12767,10 +12276,10 @@ packages:
       wrap-ansi: 7.0.0
     dev: true
 
-  /inquirer@8.2.5:
+  /inquirer@8.2.6:
     resolution:
       {
-        integrity: sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==
+        integrity: sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==
       }
     engines: { node: '>=12.0.0' }
     dependencies:
@@ -12788,47 +12297,40 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       through: 2.3.8
-      wrap-ansi: 7.0.0
+      wrap-ansi: 6.2.0
     dev: true
 
-  /internal-slot@1.0.5:
+  /internal-slot@1.0.7:
     resolution:
       {
-        integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
+        integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      get-intrinsic: 1.2.1
-      has: 1.0.3
-      side-channel: 1.0.4
-
-  /ip@2.0.0:
-    resolution:
-      {
-        integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
-      }
-    dev: true
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.0.6
 
-  /is-arguments@1.1.1:
+  /ip-address@9.0.5:
     resolution:
       {
-        integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+        integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==
       }
-    engines: { node: '>= 0.4' }
+    engines: { node: '>= 12' }
     dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
+      jsbn: 1.1.0
+      sprintf-js: 1.1.3
     dev: true
 
-  /is-array-buffer@3.0.2:
+  /is-array-buffer@3.0.4:
     resolution:
       {
-        integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
+        integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
 
   /is-arrayish@0.2.1:
     resolution:
@@ -12852,7 +12354,7 @@ packages:
       }
     engines: { node: '>=8' }
     dependencies:
-      binary-extensions: 2.2.0
+      binary-extensions: 2.3.0
     dev: true
 
   /is-boolean-object@1.1.2:
@@ -12862,15 +12364,8 @@ packages:
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-
-  /is-buffer@1.1.6:
-    resolution:
-      {
-        integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-      }
-    dev: true
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
 
   /is-callable@1.2.7:
     resolution:
@@ -12896,16 +12391,26 @@ packages:
       }
     hasBin: true
     dependencies:
-      ci-info: 3.8.0
+      ci-info: 3.9.0
     dev: true
 
-  /is-core-module@2.12.1:
+  /is-core-module@2.15.0:
     resolution:
       {
-        integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==
+        integrity: sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==
       }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      hasown: 2.0.2
+
+  /is-data-view@1.0.1:
+    resolution:
+      {
+        integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+      }
+    engines: { node: '>= 0.4' }
     dependencies:
-      has: 1.0.3
+      is-typed-array: 1.1.13
 
   /is-date-object@1.0.5:
     resolution:
@@ -12914,7 +12419,7 @@ packages:
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
 
   /is-docker@2.2.1:
     resolution:
@@ -12923,34 +12428,18 @@ packages:
       }
     engines: { node: '>=8' }
     hasBin: true
-
-  /is-docker@3.0.0:
-    resolution:
-      {
-        integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
-    hasBin: true
+    dev: true
 
   /is-expression@4.0.0:
     resolution:
       {
         integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==
       }
-    requiresBuild: true
     dependencies:
       acorn: 7.4.1
       object-assign: 4.1.1
     dev: true
 
-  /is-extendable@0.1.1:
-    resolution:
-      {
-        integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
-      }
-    engines: { node: '>=0.10.0' }
-    dev: true
-
   /is-extglob@2.1.1:
     resolution:
       {
@@ -12982,16 +12471,6 @@ packages:
     engines: { node: '>=6' }
     dev: true
 
-  /is-generator-function@1.0.10:
-    resolution:
-      {
-        integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
-      }
-    engines: { node: '>= 0.4' }
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: true
-
   /is-glob@4.0.3:
     resolution:
       {
@@ -13001,16 +12480,6 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
-  /is-inside-container@1.0.0:
-    resolution:
-      {
-        integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
-      }
-    engines: { node: '>=14.16' }
-    hasBin: true
-    dependencies:
-      is-docker: 3.0.0
-
   /is-installed-globally@0.4.0:
     resolution:
       {
@@ -13037,21 +12506,10 @@ packages:
       }
     dev: true
 
-  /is-nan@1.3.2:
-    resolution:
-      {
-        integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==
-      }
-    engines: { node: '>= 0.4' }
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-    dev: true
-
-  /is-negative-zero@2.0.2:
+  /is-negative-zero@2.0.3:
     resolution:
       {
-        integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+        integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
       }
     engines: { node: '>= 0.4' }
 
@@ -13062,7 +12520,7 @@ packages:
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
 
   /is-number@7.0.0:
     resolution:
@@ -13148,7 +12606,6 @@ packages:
       {
         integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
       }
-    requiresBuild: true
     dev: true
 
   /is-reference@1.2.1:
@@ -13157,7 +12614,7 @@ packages:
         integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
       }
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
     dev: true
 
   /is-regex@1.1.4:
@@ -13167,16 +12624,17 @@ packages:
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
 
-  /is-shared-array-buffer@1.0.2:
+  /is-shared-array-buffer@1.0.3:
     resolution:
       {
-        integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+        integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
 
   /is-ssh@1.4.0:
     resolution:
@@ -13201,6 +12659,7 @@ packages:
         integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
       }
     engines: { node: '>=8' }
+    dev: true
 
   /is-stream@3.0.0:
     resolution:
@@ -13208,6 +12667,7 @@ packages:
         integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
       }
     engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    dev: true
 
   /is-string@1.0.7:
     resolution:
@@ -13216,7 +12676,7 @@ packages:
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
 
   /is-symbol@1.0.4:
     resolution:
@@ -13237,14 +12697,14 @@ packages:
       text-extensions: 1.9.0
     dev: true
 
-  /is-typed-array@1.1.12:
+  /is-typed-array@1.1.13:
     resolution:
       {
-        integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
+        integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      which-typed-array: 1.1.11
+      which-typed-array: 1.1.15
 
   /is-typedarray@1.0.0:
     resolution:
@@ -13267,7 +12727,7 @@ packages:
         integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
       }
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
 
   /is-what@3.14.1:
     resolution:
@@ -13278,14 +12738,6 @@ packages:
     dev: true
     optional: true
 
-  /is-whitespace@0.3.0:
-    resolution:
-      {
-        integrity: sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==
-      }
-    engines: { node: '>=0.10.0' }
-    dev: true
-
   /is-wsl@2.2.0:
     resolution:
       {
@@ -13294,6 +12746,7 @@ packages:
     engines: { node: '>=8' }
     dependencies:
       is-docker: 2.2.1
+    dev: true
 
   /isarray@1.0.0:
     resolution:
@@ -13329,10 +12782,10 @@ packages:
       }
     dev: true
 
-  /istanbul-lib-coverage@3.2.0:
+  /istanbul-lib-coverage@3.2.2:
     resolution:
       {
-        integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+        integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
       }
     engines: { node: '>=8' }
     dev: true
@@ -13344,24 +12797,24 @@ packages:
       }
     engines: { node: '>=8' }
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/parser': 7.24.4
+      '@babel/core': 7.25.2
+      '@babel/parser': 7.25.3
       '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /istanbul-lib-report@3.0.0:
+  /istanbul-lib-report@3.0.1:
     resolution:
       {
-        integrity: sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+        integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==
       }
-    engines: { node: '>=8' }
+    engines: { node: '>=10' }
     dependencies:
-      istanbul-lib-coverage: 3.2.0
-      make-dir: 3.1.0
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
       supports-color: 7.2.0
     dev: true
 
@@ -13372,28 +12825,28 @@ packages:
       }
     engines: { node: '>=10' }
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
-      istanbul-lib-coverage: 3.2.0
+      debug: 4.3.6(supports-color@8.1.1)
+      istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /istanbul-reports@3.1.5:
+  /istanbul-reports@3.1.7:
     resolution:
       {
-        integrity: sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+        integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
       }
     engines: { node: '>=8' }
     dependencies:
       html-escaper: 2.0.2
-      istanbul-lib-report: 3.0.0
+      istanbul-lib-report: 3.0.1
     dev: true
 
-  /jackspeak@2.2.1:
+  /jackspeak@2.3.6:
     resolution:
       {
-        integrity: sha512-MXbxovZ/Pm42f6cDIDkl3xpwv1AGwObKwfmjs2nQePiy85tP3fatofl3FC1aBsOtP/6fq5SbtgHwWcMsLP+bDw==
+        integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
       }
     engines: { node: '>=14' }
     dependencies:
@@ -13402,27 +12855,26 @@ packages:
       '@pkgjs/parseargs': 0.11.0
     dev: true
 
-  /jackspeak@2.3.6:
+  /jackspeak@3.4.3:
     resolution:
       {
-        integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+        integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
       }
-    engines: { node: '>=14' }
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
     dev: true
 
-  /jake@10.8.7:
+  /jake@10.9.2:
     resolution:
       {
-        integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==
+        integrity: sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==
       }
     engines: { node: '>=10' }
     hasBin: true
     dependencies:
-      async: 3.2.4
+      async: 3.2.5
       chalk: 4.1.2
       filelist: 1.0.4
       minimatch: 3.1.2
@@ -13450,7 +12902,7 @@ packages:
       '@jest/environment': 27.5.1
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       chalk: 4.1.2
       co: 4.6.0
       dedent: 0.7.0
@@ -13489,7 +12941,7 @@ packages:
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      import-local: 3.1.0
+      import-local: 3.2.0
       jest-config: 27.5.1(ts-node@10.9.1)
       jest-util: 27.5.1
       jest-validate: 27.5.1
@@ -13503,6 +12955,39 @@ packages:
       - utf-8-validate
     dev: true
 
+  /jest-cli@27.5.1(ts-node@10.9.2):
+    resolution:
+      {
+        integrity: sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==
+      }
+    engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/core': 27.5.1(ts-node@10.9.2)
+      '@jest/test-result': 27.5.1
+      '@jest/types': 27.5.1
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      import-local: 3.2.0
+      jest-config: 27.5.1(ts-node@10.9.2)
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      prompts: 2.4.2
+      yargs: 16.2.0
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - ts-node
+      - utf-8-validate
+    dev: true
+
   /jest-config@27.5.1(ts-node@10.9.1):
     resolution:
       {
@@ -13515,12 +13000,12 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.23.3
+      '@babel/core': 7.25.2
       '@jest/test-sequencer': 27.5.1
       '@jest/types': 27.5.1
-      babel-jest: 27.5.1(@babel/core@7.23.3)
+      babel-jest: 27.5.1(@babel/core@7.25.2)
       chalk: 4.1.2
-      ci-info: 3.8.0
+      ci-info: 3.9.0
       deepmerge: 4.3.1
       glob: 7.2.3
       graceful-fs: 4.2.11
@@ -13534,12 +13019,56 @@ packages:
       jest-runner: 27.5.1
       jest-util: 27.5.1
       jest-validate: 27.5.1
-      micromatch: 4.0.5
+      micromatch: 4.0.7
+      parse-json: 5.2.0
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+      ts-node: 10.9.1(@types/node@18.19.0)(typescript@4.9.4)
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /jest-config@27.5.1(ts-node@10.9.2):
+    resolution:
+      {
+        integrity: sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==
+      }
+    engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
+    peerDependencies:
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      ts-node:
+        optional: true
+    dependencies:
+      '@babel/core': 7.25.2
+      '@jest/test-sequencer': 27.5.1
+      '@jest/types': 27.5.1
+      babel-jest: 27.5.1(@babel/core@7.25.2)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 27.5.1
+      jest-environment-jsdom: 27.5.1
+      jest-environment-node: 27.5.1
+      jest-get-type: 27.5.1
+      jest-jasmine2: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-runner: 27.5.1
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      micromatch: 4.0.7
       parse-json: 5.2.0
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@types/node@18.19.3)(typescript@4.9.4)
+      ts-node: 10.9.2(@types/node@18.19.0)(typescript@4.9.4)
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -13594,7 +13123,7 @@ packages:
       '@jest/environment': 27.5.1
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       jest-mock: 27.5.1
       jest-util: 27.5.1
       jsdom: 16.7.0
@@ -13615,7 +13144,7 @@ packages:
       '@jest/environment': 27.5.1
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       jest-mock: 27.5.1
       jest-util: 27.5.1
     dev: true
@@ -13636,8 +13165,8 @@ packages:
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
       '@jest/types': 27.5.1
-      '@types/graceful-fs': 4.1.6
-      '@types/node': 18.19.3
+      '@types/graceful-fs': 4.1.9
+      '@types/node': 18.19.0
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -13645,7 +13174,7 @@ packages:
       jest-serializer: 27.5.1
       jest-util: 27.5.1
       jest-worker: 27.5.1
-      micromatch: 4.0.5
+      micromatch: 4.0.7
       walker: 1.0.8
     optionalDependencies:
       fsevents: 2.3.3
@@ -13662,7 +13191,7 @@ packages:
       '@jest/source-map': 27.5.1
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       chalk: 4.1.2
       co: 4.6.0
       expect: 27.5.1
@@ -13710,12 +13239,12 @@ packages:
       }
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.24.7
       '@jest/types': 27.5.1
-      '@types/stack-utils': 2.0.1
+      '@types/stack-utils': 2.0.3
       chalk: 4.1.2
       graceful-fs: 4.2.11
-      micromatch: 4.0.5
+      micromatch: 4.0.7
       pretty-format: 27.5.1
       slash: 3.0.0
       stack-utils: 2.0.6
@@ -13729,7 +13258,7 @@ packages:
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
     dev: true
 
   /jest-pnp-resolver@1.2.3(jest-resolve@27.5.1):
@@ -13783,7 +13312,7 @@ packages:
       jest-pnp-resolver: 1.2.3(jest-resolve@27.5.1)
       jest-util: 27.5.1
       jest-validate: 27.5.1
-      resolve: 1.22.2
+      resolve: 1.22.8
       resolve.exports: 1.1.1
       slash: 3.0.0
     dev: true
@@ -13800,7 +13329,7 @@ packages:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       chalk: 4.1.2
       emittery: 0.8.1
       graceful-fs: 4.2.11
@@ -13838,7 +13367,7 @@ packages:
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
       chalk: 4.1.2
-      cjs-module-lexer: 1.2.3
+      cjs-module-lexer: 1.3.1
       collect-v8-coverage: 1.0.2
       execa: 5.1.1
       glob: 7.2.3
@@ -13872,7 +13401,7 @@ packages:
       }
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       graceful-fs: 4.2.11
     dev: true
 
@@ -13883,16 +13412,16 @@ packages:
       }
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/generator': 7.22.9
-      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.3)
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.23.3
+      '@babel/core': 7.25.2
+      '@babel/generator': 7.25.0
+      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2)
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/babel__traverse': 7.20.1
+      '@types/babel__traverse': 7.20.6
       '@types/prettier': 2.7.3
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.3)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.25.2)
       chalk: 4.1.2
       expect: 27.5.1
       graceful-fs: 4.2.11
@@ -13904,7 +13433,7 @@ packages:
       jest-util: 27.5.1
       natural-compare: 1.4.0
       pretty-format: 27.5.1
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13917,9 +13446,9 @@ packages:
     engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       chalk: 4.1.2
-      ci-info: 3.8.0
+      ci-info: 3.9.0
       graceful-fs: 4.2.11
       picomatch: 2.3.1
     dev: true
@@ -13948,7 +13477,7 @@ packages:
     dependencies:
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       jest-util: 27.5.1
@@ -13962,7 +13491,7 @@ packages:
       }
     engines: { node: '>= 10.13.0' }
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -13981,7 +13510,7 @@ packages:
         optional: true
     dependencies:
       '@jest/core': 27.5.1(ts-node@10.9.1)
-      import-local: 3.1.0
+      import-local: 3.2.0
       jest-cli: 27.5.1(ts-node@10.9.1)
     transitivePeerDependencies:
       - bufferutil
@@ -13991,10 +13520,34 @@ packages:
       - utf-8-validate
     dev: true
 
-  /jiti@1.19.1:
+  /jest@27.5.0(ts-node@10.9.2):
+    resolution:
+      {
+        integrity: sha512-sCMZhL9zy0fiFc4H0cKlXq7BcghMSxm5ZnEyaPWTteArU5ix6JjOKyOXSUBGLTQCmt5kuX9zEvQ9BSshHOPB3A==
+      }
+    engines: { node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0 }
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+    dependencies:
+      '@jest/core': 27.5.1(ts-node@10.9.2)
+      import-local: 3.2.0
+      jest-cli: 27.5.1(ts-node@10.9.2)
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - ts-node
+      - utf-8-validate
+    dev: true
+
+  /jiti@1.21.6:
     resolution:
       {
-        integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==
+        integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
       }
     hasBin: true
     dev: true
@@ -14005,15 +13558,15 @@ packages:
         integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==
       }
 
-  /joi@17.9.2:
+  /joi@17.13.3:
     resolution:
       {
-        integrity: sha512-Itk/r+V4Dx0V3c7RLFdRh12IOjySm2/WGPMubBT92cQvRfYZhPM2W0hZlctjj72iES8jsRCwp7S/cRmWBnJ4nw==
+        integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==
       }
     dependencies:
       '@hapi/hoek': 9.3.0
       '@hapi/topo': 5.1.0
-      '@sideway/address': 4.1.4
+      '@sideway/address': 4.1.5
       '@sideway/formula': 3.0.1
       '@sideway/pinpoint': 2.0.0
     dev: true
@@ -14025,18 +13578,27 @@ packages:
       }
     dev: true
 
-  /js-beautify@1.14.9:
+  /js-beautify@1.15.1:
     resolution:
       {
-        integrity: sha512-coM7xq1syLcMyuVGyToxcj2AlzhkDjmfklL8r0JgJ7A76wyGMpJ1oA35mr4APdYNO/o/4YY8H54NQIJzhMbhBg==
+        integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==
       }
-    engines: { node: '>=12' }
+    engines: { node: '>=14' }
     hasBin: true
     dependencies:
       config-chain: 1.1.13
       editorconfig: 1.0.4
-      glob: 8.1.0
-      nopt: 6.0.0
+      glob: 10.3.16
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+    dev: true
+
+  /js-cookie@3.0.5:
+    resolution:
+      {
+        integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+      }
+    engines: { node: '>=14' }
     dev: true
 
   /js-md5@0.8.3:
@@ -14057,7 +13619,6 @@ packages:
       {
         integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==
       }
-    requiresBuild: true
     dev: true
 
   /js-tokens@4.0.0:
@@ -14105,6 +13666,13 @@ packages:
       }
     dev: true
 
+  /jsbn@1.1.0:
+    resolution:
+      {
+        integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==
+      }
+    dev: true
+
   /jsdoc-type-pratt-parser@3.1.0:
     resolution:
       {
@@ -14125,7 +13693,7 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.10.0
+      acorn: 8.12.1
       acorn-globals: 6.0.0
       cssom: 0.4.4
       cssstyle: 2.3.0
@@ -14138,18 +13706,18 @@ packages:
       http-proxy-agent: 4.0.1
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.7
+      nwsapi: 2.2.12
       parse5: 6.0.1
       saxes: 5.0.1
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.3
+      tough-cookie: 4.1.4
       w3c-hr-time: 1.0.2
       w3c-xmlserializer: 2.0.0
       webidl-conversions: 6.1.0
       whatwg-encoding: 1.0.5
       whatwg-mimetype: 2.3.0
       whatwg-url: 8.7.0
-      ws: 7.5.9
+      ws: 7.5.10
       xml-name-validator: 3.0.0
     transitivePeerDependencies:
       - bufferutil
@@ -14166,6 +13734,12 @@ packages:
     hasBin: true
     dev: true
 
+  /json-buffer@3.0.1:
+    resolution:
+      {
+        integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+      }
+
   /json-parse-better-errors@1.0.2:
     resolution:
       {
@@ -14180,10 +13754,10 @@ packages:
       }
     dev: true
 
-  /json-parse-even-better-errors@3.0.0:
+  /json-parse-even-better-errors@3.0.2:
     resolution:
       {
-        integrity: sha512-iZbGHafX/59r39gPwVPRBGw0QQKnA7tte5pSMrhWOW7swGsVvVTjmfyAV9pNqk8YGT7tRCdxRu8uzcgZwoDooA==
+        integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dev: true
@@ -14269,7 +13843,7 @@ packages:
         integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
       }
     dependencies:
-      universalify: 2.0.0
+      universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
     dev: true
@@ -14300,23 +13874,22 @@ packages:
       {
         integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==
       }
-    requiresBuild: true
     dependencies:
       is-promise: 2.2.2
       promise: 7.3.1
     dev: true
 
-  /jsx-ast-utils@3.3.4:
+  /jsx-ast-utils@3.3.5:
     resolution:
       {
-        integrity: sha512-fX2TVdCViod6HwKEtSWGHs57oFhVfCMwieb9PuRDgjDPh5XeqJiHFFFJCHxU5cnTc3Bu/GRL+kPiFmw8XWOfKw==
+        integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
       }
     engines: { node: '>=4.0' }
     dependencies:
-      array-includes: 3.1.6
-      array.prototype.flat: 1.3.1
-      object.assign: 4.1.4
-      object.values: 1.1.6
+      array-includes: 3.1.8
+      array.prototype.flat: 1.3.2
+      object.assign: 4.1.5
+      object.values: 1.2.0
     dev: true
 
   /just-diff-apply@5.5.0:
@@ -14333,15 +13906,13 @@ packages:
       }
     dev: true
 
-  /kind-of@3.2.2:
+  /keyv@4.5.4:
     resolution:
       {
-        integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
+        integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
       }
-    engines: { node: '>=0.10.0' }
     dependencies:
-      is-buffer: 1.1.6
-    dev: true
+      json-buffer: 3.0.1
 
   /kind-of@6.0.3:
     resolution:
@@ -14393,10 +13964,10 @@ packages:
     dependencies:
       '@lerna/child-process': 6.6.0
       '@lerna/create': 6.6.0
-      '@lerna/legacy-package-management': 6.6.0(nx@15.9.4)
+      '@lerna/legacy-package-management': 6.6.0(nx@15.9.7)
       '@npmcli/arborist': 6.2.3
       '@npmcli/run-script': 4.1.7
-      '@nrwl/devkit': 15.9.4(nx@15.9.4)
+      '@nrwl/devkit': 15.9.7(nx@15.9.7)
       '@octokit/plugin-enterprise-rest': 6.0.1
       '@octokit/rest': 19.0.3
       byte-size: 7.0.0
@@ -14411,7 +13982,7 @@ packages:
       cosmiconfig: 7.0.0
       dedent: 0.7.0
       dot-prop: 6.0.1
-      envinfo: 7.10.0
+      envinfo: 7.13.0
       execa: 5.0.0
       fs-extra: 9.1.0
       get-port: 5.1.1
@@ -14421,9 +13992,9 @@ packages:
       globby: 11.1.0
       graceful-fs: 4.2.10
       has-unicode: 2.0.1
-      import-local: 3.1.0
+      import-local: 3.2.0
       init-package-json: 3.0.2
-      inquirer: 8.2.5
+      inquirer: 8.2.6
       is-ci: 2.0.0
       is-stream: 2.0.0
       js-yaml: 4.1.0
@@ -14438,7 +14009,7 @@ packages:
       npm-packlist: 5.1.1
       npm-registry-fetch: 14.0.5
       npmlog: 6.0.2
-      nx: 15.9.4
+      nx: 15.9.7
       p-map: 4.0.0
       p-map-series: 2.1.0
       p-pipe: 3.1.0
@@ -14452,7 +14023,7 @@ packages:
       read-package-json: 5.0.1
       resolve-from: 5.0.0
       rimraf: 3.0.2
-      semver: 7.5.4
+      semver: 7.6.3
       signal-exit: 3.0.7
       slash: 3.0.0
       ssri: 9.0.1
@@ -14543,7 +14114,7 @@ packages:
       normalize-package-data: 4.0.1
       npm-package-arg: 9.1.2
       npm-registry-fetch: 13.3.1
-      semver: 7.5.4
+      semver: 7.6.3
       ssri: 9.0.1
     transitivePeerDependencies:
       - bluebird
@@ -14558,10 +14129,10 @@ packages:
     engines: { node: '>=10' }
     dev: true
 
-  /lilconfig@3.0.0:
+  /lilconfig@3.1.2:
     resolution:
       {
-        integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==
+        integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
       }
     engines: { node: '>=14' }
     dev: true
@@ -14573,10 +14144,10 @@ packages:
       }
     dev: true
 
-  /lines-and-columns@2.0.3:
+  /lines-and-columns@2.0.4:
     resolution:
       {
-        integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==
+        integrity: sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==
       }
     engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
     dev: true
@@ -14591,7 +14162,7 @@ packages:
     dependencies:
       chalk: 5.3.0
       commander: 11.0.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       execa: 7.2.0
       lilconfig: 2.1.0
       listr2: 6.6.1
@@ -14604,7 +14175,7 @@ packages:
       - supports-color
     dev: true
 
-  /listr2@3.14.0(enquirer@2.3.6):
+  /listr2@3.14.0(enquirer@2.4.1):
     resolution:
       {
         integrity: sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==
@@ -14618,10 +14189,10 @@ packages:
     dependencies:
       cli-truncate: 2.1.0
       colorette: 2.0.20
-      enquirer: 2.3.6
+      enquirer: 2.4.1
       log-update: 4.0.0
       p-map: 4.0.0
-      rfdc: 1.3.0
+      rfdc: 1.4.1
       rxjs: 7.8.1
       through: 2.3.8
       wrap-ansi: 7.0.0
@@ -14643,7 +14214,7 @@ packages:
       colorette: 2.0.20
       eventemitter3: 5.0.1
       log-update: 5.0.1
-      rfdc: 1.3.0
+      rfdc: 1.4.1
       wrap-ansi: 8.1.0
     dev: true
 
@@ -14821,10 +14392,10 @@ packages:
       wrap-ansi: 8.1.0
     dev: true
 
-  /loglevel@1.8.1:
+  /loglevel@1.9.1:
     resolution:
       {
-        integrity: sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==
+        integrity: sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==
       }
     engines: { node: '>= 0.6.0' }
     dev: true
@@ -14845,15 +14416,14 @@ packages:
         integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
       }
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.6.3
     dev: true
 
-  /lru-cache@10.0.0:
+  /lru-cache@10.4.3:
     resolution:
       {
-        integrity: sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==
+        integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
       }
-    engines: { node: 14 || >=16.14 }
     dev: true
 
   /lru-cache@4.1.5:
@@ -14883,6 +14453,7 @@ packages:
     engines: { node: '>=10' }
     dependencies:
       yallist: 4.0.0
+    dev: true
 
   /lru-cache@7.18.3:
     resolution:
@@ -14927,24 +14498,13 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
-  /magic-string@0.30.5:
-    resolution:
-      {
-        integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
-      }
-    engines: { node: '>=12' }
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
-
-  /magic-string@0.30.9:
+  /magic-string@0.30.11:
     resolution:
       {
-        integrity: sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==
+        integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
       }
-    engines: { node: '>=12' }
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   /make-dir@2.1.0:
     resolution:
@@ -14952,7 +14512,6 @@ packages:
         integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
       }
     engines: { node: '>=6' }
-    requiresBuild: true
     dependencies:
       pify: 4.0.1
       semver: 5.7.2
@@ -14968,6 +14527,16 @@ packages:
       semver: 6.3.1
     dev: true
 
+  /make-dir@4.0.0:
+    resolution:
+      {
+        integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==
+      }
+    engines: { node: '>=10' }
+    dependencies:
+      semver: 7.6.3
+    dev: true
+
   /make-error@1.3.6:
     resolution:
       {
@@ -14982,7 +14551,7 @@ packages:
       }
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
     dependencies:
-      agentkeepalive: 4.3.0
+      agentkeepalive: 4.5.0
       cacache: 16.1.3
       http-cache-semantics: 4.1.1
       http-proxy-agent: 5.0.0
@@ -15010,21 +14579,21 @@ packages:
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      agentkeepalive: 4.3.0
-      cacache: 17.1.3
+      agentkeepalive: 4.5.0
+      cacache: 17.1.4
       http-cache-semantics: 4.1.1
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-lambda: 1.0.1
       lru-cache: 7.18.3
       minipass: 5.0.0
-      minipass-fetch: 3.0.3
+      minipass-fetch: 3.0.5
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       negotiator: 0.6.3
       promise-retry: 2.0.1
       socks-proxy-agent: 7.0.0
-      ssri: 10.0.4
+      ssri: 10.0.6
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -15068,6 +14637,13 @@ packages:
       }
     dev: true
 
+  /mdn-data@2.0.30:
+    resolution:
+      {
+        integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+      }
+    dev: true
+
   /meow@8.1.2:
     resolution:
       {
@@ -15075,7 +14651,7 @@ packages:
       }
     engines: { node: '>=10' }
     dependencies:
-      '@types/minimist': 1.2.2
+      '@types/minimist': 1.2.5
       camelcase-keys: 6.2.2
       decamelize-keys: 1.1.1
       hard-rejection: 2.1.0
@@ -15102,6 +14678,7 @@ packages:
       {
         integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
       }
+    dev: true
 
   /merge2@1.4.1:
     resolution:
@@ -15117,7 +14694,18 @@ packages:
       }
     engines: { node: '>=8.6' }
     dependencies:
-      braces: 3.0.2
+      braces: 3.0.3
+      picomatch: 2.3.1
+    dev: true
+
+  /micromatch@4.0.7:
+    resolution:
+      {
+        integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
+      }
+    engines: { node: '>=8.6' }
+    dependencies:
+      braces: 3.0.3
       picomatch: 2.3.1
 
   /mime-db@1.52.0:
@@ -15155,6 +14743,7 @@ packages:
         integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
       }
     engines: { node: '>=6' }
+    dev: true
 
   /mimic-fn@4.0.0:
     resolution:
@@ -15162,6 +14751,7 @@ packages:
         integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
       }
     engines: { node: '>=12' }
+    dev: true
 
   /min-indent@1.0.1:
     resolution:
@@ -15188,16 +14778,6 @@ packages:
     dependencies:
       brace-expansion: 1.1.11
 
-  /minimatch@5.0.1:
-    resolution:
-      {
-        integrity: sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==
-      }
-    engines: { node: '>=10' }
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: true
-
   /minimatch@5.1.6:
     resolution:
       {
@@ -15228,10 +14808,10 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
-  /minimatch@9.0.3:
+  /minimatch@9.0.5:
     resolution:
       {
-        integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+        integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
       }
     engines: { node: '>=16 || 14 >=14.17' }
     dependencies:
@@ -15280,14 +14860,14 @@ packages:
       encoding: 0.1.13
     dev: true
 
-  /minipass-fetch@3.0.3:
+  /minipass-fetch@3.0.5:
     resolution:
       {
-        integrity: sha512-n5ITsTkDqYkYJZjcRWzZt9qnZKCT7nKCosJhHoj7S7zD+BP4jVbWs+odsniw5TA3E0sLomhTKOKjF86wf11PuQ==
+        integrity: sha512-2N8elDQAtSnFV0Dk7gt15KHsS0Fyz6CbYZ360h0WTYV1Ty46li3rAXVOQj1THMNLdmrD9Vt5pBPtWtVkpwGBqg==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      minipass: 5.0.0
+      minipass: 7.1.2
       minipass-sized: 1.0.3
       minizlib: 2.1.2
     optionalDependencies:
@@ -15304,10 +14884,10 @@ packages:
       minipass: 3.3.6
     dev: true
 
-  /minipass-json-stream@1.0.1:
+  /minipass-json-stream@1.0.2:
     resolution:
       {
-        integrity: sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==
+        integrity: sha512-myxeeTm57lYs8pH2nxPzmEEg8DGIgW+9mv6D4JZD2pa81I/OBjeU7PtICXV6c9eRGTA5JMDsuIPUZRCyBMYNhg==
       }
     dependencies:
       jsonparse: 1.3.1
@@ -15368,6 +14948,14 @@ packages:
     engines: { node: '>=16 || 14 >=14.17' }
     dev: true
 
+  /minipass@7.1.2:
+    resolution:
+      {
+        integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+      }
+    engines: { node: '>=16 || 14 >=14.17' }
+    dev: true
+
   /minizlib@2.1.2:
     resolution:
       {
@@ -15409,34 +14997,45 @@ packages:
     hasBin: true
     dev: true
 
-  /mocha@10.2.0:
+  /mlly@1.7.1:
+    resolution:
+      {
+        integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==
+      }
+    dependencies:
+      acorn: 8.12.1
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      ufo: 1.5.4
+    dev: false
+
+  /mocha@10.7.0:
     resolution:
       {
-        integrity: sha512-IDY7fl/BecMwFHzoqF2sg/SHHANeBoMMXFlS9r0OXKDssYE1M5O43wUY/9BVPeIvfH2zmEbBfseqN9gBQZzXkg==
+        integrity: sha512-v8/rBWr2VO5YkspYINnvu81inSz2y3ODJrhO175/Exzor1RcEZZkizgE2A+w/CAXXoESS8Kys5E62dOHGHzULA==
       }
     engines: { node: '>= 14.0.0' }
     hasBin: true
     dependencies:
-      ansi-colors: 4.1.1
+      ansi-colors: 4.1.3
       browser-stdout: 1.3.1
-      chokidar: 3.5.3
-      debug: 4.3.4(supports-color@8.1.1)
-      diff: 5.0.0
+      chokidar: 3.6.0
+      debug: 4.3.6(supports-color@8.1.1)
+      diff: 5.2.0
       escape-string-regexp: 4.0.0
       find-up: 5.0.0
-      glob: 7.2.0
+      glob: 8.1.0
       he: 1.2.0
       js-yaml: 4.1.0
       log-symbols: 4.1.0
-      minimatch: 5.0.1
+      minimatch: 5.1.6
       ms: 2.1.3
-      nanoid: 3.3.3
-      serialize-javascript: 6.0.0
+      serialize-javascript: 6.0.2
       strip-json-comments: 3.1.1
       supports-color: 8.1.1
-      workerpool: 6.2.1
+      workerpool: 6.5.1
       yargs: 16.2.0
-      yargs-parser: 20.2.4
+      yargs-parser: 20.2.9
       yargs-unparser: 2.0.0
     dev: true
 
@@ -15508,24 +15107,6 @@ packages:
       thenify-all: 1.6.0
     dev: true
 
-  /nanoid@3.3.3:
-    resolution:
-      {
-        integrity: sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
-      }
-    engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
-    hasBin: true
-    dev: true
-
-  /nanoid@3.3.6:
-    resolution:
-      {
-        integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
-      }
-    engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
-    hasBin: true
-    dev: true
-
   /nanoid@3.3.7:
     resolution:
       {
@@ -15577,7 +15158,7 @@ packages:
       }
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.6.2
+      tslib: 2.6.3
     dev: true
 
   /node-addon-api@3.2.1:
@@ -15602,18 +15183,18 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
-  /node-gyp-build@4.6.0:
+  /node-gyp-build@4.8.1:
     resolution:
       {
-        integrity: sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==
+        integrity: sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==
       }
     hasBin: true
     dev: true
 
-  /node-gyp@9.4.0:
+  /node-gyp@9.4.1:
     resolution:
       {
-        integrity: sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==
+        integrity: sha512-OQkWKbjQKbGkMf/xqI1jjy3oCTgMKJac58G2+bjZb3fza6gW2YrCSdMQYaoTb70crvE//Gngr4f0AgVHmqHvBQ==
       }
     engines: { node: ^12.13 || ^14.13 || >=16 }
     hasBin: true
@@ -15622,14 +15203,15 @@ packages:
       exponential-backoff: 3.1.1
       glob: 7.2.3
       graceful-fs: 4.2.11
-      make-fetch-happen: 11.1.1
+      make-fetch-happen: 10.2.1
       nopt: 6.0.0
       npmlog: 6.0.2
       rimraf: 3.0.2
-      semver: 7.5.4
+      semver: 7.6.3
       tar: 6.1.11
       which: 2.0.2
     transitivePeerDependencies:
+      - bluebird
       - supports-color
     dev: true
 
@@ -15647,10 +15229,10 @@ packages:
       }
     dev: true
 
-  /node-releases@2.0.13:
+  /node-releases@2.0.18:
     resolution:
       {
-        integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
+        integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
       }
     dev: true
 
@@ -15665,10 +15247,10 @@ packages:
       abbrev: 1.1.1
     dev: true
 
-  /nopt@7.2.0:
+  /nopt@7.2.1:
     resolution:
       {
-        integrity: sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==
+        integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     hasBin: true
@@ -15683,7 +15265,7 @@ packages:
       }
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.2
+      resolve: 1.22.8
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
     dev: true
@@ -15696,8 +15278,8 @@ packages:
     engines: { node: '>=10' }
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.12.1
-      semver: 7.5.4
+      is-core-module: 2.15.0
+      semver: 7.6.3
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -15709,8 +15291,8 @@ packages:
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
     dependencies:
       hosted-git-info: 5.2.1
-      is-core-module: 2.12.1
-      semver: 7.5.4
+      is-core-module: 2.15.0
+      semver: 7.6.3
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -15722,8 +15304,8 @@ packages:
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
       hosted-git-info: 6.1.1
-      is-core-module: 2.12.1
-      semver: 7.5.4
+      is-core-module: 2.15.0
+      semver: 7.6.3
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -15760,10 +15342,10 @@ packages:
       npm-normalize-package-bin: 1.0.1
     dev: true
 
-  /npm-bundled@3.0.0:
+  /npm-bundled@3.0.1:
     resolution:
       {
-        integrity: sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==
+        integrity: sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
@@ -15777,17 +15359,17 @@ packages:
       }
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
     dependencies:
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
-  /npm-install-checks@6.1.1:
+  /npm-install-checks@6.3.0:
     resolution:
       {
-        integrity: sha512-dH3GmQL4vsPtld59cOn8uY0iOqRmqKvV+DLGwNXV/Q7MDgD2QfOADWd/mFXcIE5LVhYYGjA3baz6W9JneqnuCw==
+        integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
   /npm-normalize-package-bin@1.0.1:
@@ -15822,8 +15404,8 @@ packages:
     dependencies:
       hosted-git-info: 6.1.1
       proc-log: 3.0.0
-      semver: 7.5.4
-      validate-npm-package-name: 5.0.0
+      semver: 7.6.3
+      validate-npm-package-name: 5.0.1
     dev: true
 
   /npm-package-arg@8.1.1:
@@ -15834,7 +15416,7 @@ packages:
     engines: { node: '>=10' }
     dependencies:
       hosted-git-info: 3.0.8
-      semver: 7.5.4
+      semver: 7.6.3
       validate-npm-package-name: 3.0.0
     dev: true
 
@@ -15847,7 +15429,7 @@ packages:
     dependencies:
       hosted-git-info: 5.2.1
       proc-log: 2.0.1
-      semver: 7.5.4
+      semver: 7.6.3
       validate-npm-package-name: 4.0.0
     dev: true
 
@@ -15872,7 +15454,7 @@ packages:
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      ignore-walk: 6.0.3
+      ignore-walk: 6.0.5
     dev: true
 
   /npm-pick-manifest@7.0.2:
@@ -15885,20 +15467,20 @@ packages:
       npm-install-checks: 5.0.0
       npm-normalize-package-bin: 2.0.0
       npm-package-arg: 9.1.2
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
-  /npm-pick-manifest@8.0.1:
+  /npm-pick-manifest@8.0.2:
     resolution:
       {
-        integrity: sha512-mRtvlBjTsJvfCCdmPtiu2bdlx8d/KXtF7yNXNWe7G0Z36qWA9Ny5zXsI2PfBZEv7SXgoxTmNaTzGSbbzDZChoA==
+        integrity: sha512-1dKY+86/AIiq1tkKVD3l0WI+Gd3vkknVGAggsFeBkTvbhMQ1OND/LKkYv4JtXPKUJ8bOTCyLiqEg2P6QNdK+Gg==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      npm-install-checks: 6.1.1
+      npm-install-checks: 6.3.0
       npm-normalize-package-bin: 3.0.1
       npm-package-arg: 10.1.0
-      semver: 7.5.4
+      semver: 7.6.3
     dev: true
 
   /npm-registry-fetch@13.3.1:
@@ -15911,7 +15493,7 @@ packages:
       make-fetch-happen: 10.2.1
       minipass: 3.3.6
       minipass-fetch: 2.1.2
-      minipass-json-stream: 1.0.1
+      minipass-json-stream: 1.0.2
       minizlib: 2.1.2
       npm-package-arg: 9.1.2
       proc-log: 2.0.1
@@ -15929,8 +15511,8 @@ packages:
     dependencies:
       make-fetch-happen: 11.1.1
       minipass: 4.2.8
-      minipass-fetch: 3.0.3
-      minipass-json-stream: 1.0.1
+      minipass-fetch: 3.0.5
+      minipass-json-stream: 1.0.2
       minizlib: 2.1.2
       npm-package-arg: 10.1.0
       proc-log: 3.0.0
@@ -15947,8 +15529,8 @@ packages:
     dependencies:
       make-fetch-happen: 11.1.1
       minipass: 5.0.0
-      minipass-fetch: 3.0.3
-      minipass-json-stream: 1.0.1
+      minipass-fetch: 3.0.5
+      minipass-json-stream: 1.0.2
       minizlib: 2.1.2
       npm-package-arg: 10.1.0
       proc-log: 3.0.0
@@ -15964,15 +15546,17 @@ packages:
     engines: { node: '>=8' }
     dependencies:
       path-key: 3.1.1
+    dev: true
 
-  /npm-run-path@5.1.0:
+  /npm-run-path@5.3.0:
     resolution:
       {
-        integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
+        integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==
       }
     engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
     dependencies:
       path-key: 4.0.0
+    dev: true
 
   /npmlog@6.0.2:
     resolution:
@@ -15980,6 +15564,7 @@ packages:
         integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==
       }
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
+    deprecated: This package is no longer supported.
     dependencies:
       are-we-there-yet: 3.0.1
       console-control-strings: 1.1.0
@@ -15993,10 +15578,11 @@ packages:
         integrity: sha512-uJ0YFk/mCQpLBt+bxN88AKd+gyqZvZDbtiNxk6Waqcj2aPRyfVx8ITawkyQynxUagInjdYT1+qj4NfA5KJJUxg==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
+    deprecated: This package is no longer supported.
     dependencies:
-      are-we-there-yet: 4.0.1
+      are-we-there-yet: 4.0.2
       console-control-strings: 1.1.0
-      gauge: 5.0.1
+      gauge: 5.0.2
       set-blocking: 2.0.0
     dev: true
 
@@ -16008,17 +15594,17 @@ packages:
     dependencies:
       boolbase: 1.0.0
 
-  /nwsapi@2.2.7:
+  /nwsapi@2.2.12:
     resolution:
       {
-        integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
+        integrity: sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==
       }
     dev: true
 
-  /nx@15.9.4:
+  /nx@15.9.7:
     resolution:
       {
-        integrity: sha512-P1G4t59UvE/lkHyruLeSOB5ZuNyh01IwU0tTUOi8f9s/NbP7+OQ8MYVwDV74JHTr6mQgjlS+n+4Eox8tVm9itA==
+        integrity: sha512-1qlEeDjX9OKZEryC8i4bA+twNg+lB5RKrozlNwWx/lLJHqWPUfvUTvxh+uxlPYL9KzVReQjUuxMLFMsHNqWUrA==
       }
     hasBin: true
     requiresBuild: true
@@ -16031,13 +15617,13 @@ packages:
       '@swc/core':
         optional: true
     dependencies:
-      '@nrwl/cli': 15.9.4
-      '@nrwl/tao': 15.9.4
+      '@nrwl/cli': 15.9.7
+      '@nrwl/tao': 15.9.7
       '@parcel/watcher': 2.0.4
       '@yarnpkg/lockfile': 1.1.0
-      '@yarnpkg/parsers': 3.0.0-rc.48.1
+      '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.6
-      axios: 1.4.0
+      axios: 1.7.2
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
@@ -16047,35 +15633,35 @@ packages:
       fast-glob: 3.2.7
       figures: 3.2.0
       flat: 5.0.2
-      fs-extra: 11.1.1
+      fs-extra: 11.2.0
       glob: 7.1.4
-      ignore: 5.2.4
+      ignore: 5.3.1
       js-yaml: 4.1.0
       jsonc-parser: 3.2.0
-      lines-and-columns: 2.0.3
+      lines-and-columns: 2.0.4
       minimatch: 3.0.5
       npm-run-path: 4.0.1
       open: 8.4.2
-      semver: 7.3.4
+      semver: 7.5.4
       string-width: 4.2.3
       strong-log-transformer: 2.1.0
       tar-stream: 2.2.0
-      tmp: 0.2.1
+      tmp: 0.2.3
       tsconfig-paths: 4.2.0
-      tslib: 2.6.2
+      tslib: 2.6.3
       v8-compile-cache: 2.3.0
       yargs: 17.7.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@nrwl/nx-darwin-arm64': 15.9.4
-      '@nrwl/nx-darwin-x64': 15.9.4
-      '@nrwl/nx-linux-arm-gnueabihf': 15.9.4
-      '@nrwl/nx-linux-arm64-gnu': 15.9.4
-      '@nrwl/nx-linux-arm64-musl': 15.9.4
-      '@nrwl/nx-linux-x64-gnu': 15.9.4
-      '@nrwl/nx-linux-x64-musl': 15.9.4
-      '@nrwl/nx-win32-arm64-msvc': 15.9.4
-      '@nrwl/nx-win32-x64-msvc': 15.9.4
+      '@nrwl/nx-darwin-arm64': 15.9.7
+      '@nrwl/nx-darwin-x64': 15.9.7
+      '@nrwl/nx-linux-arm-gnueabihf': 15.9.7
+      '@nrwl/nx-linux-arm64-gnu': 15.9.7
+      '@nrwl/nx-linux-arm64-musl': 15.9.7
+      '@nrwl/nx-linux-x64-gnu': 15.9.7
+      '@nrwl/nx-linux-x64-musl': 15.9.7
+      '@nrwl/nx-win32-arm64-msvc': 15.9.7
+      '@nrwl/nx-win32-x64-msvc': 15.9.7
     transitivePeerDependencies:
       - debug
     dev: true
@@ -16096,22 +15682,12 @@ packages:
     engines: { node: '>= 6' }
     dev: true
 
-  /object-inspect@1.12.3:
-    resolution:
-      {
-        integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
-      }
-
-  /object-is@1.1.5:
+  /object-inspect@1.13.2:
     resolution:
       {
-        integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+        integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
       }
     engines: { node: '>= 0.4' }
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-    dev: true
 
   /object-keys@1.1.1:
     resolution:
@@ -16120,62 +15696,65 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
-  /object.assign@4.1.4:
+  /object.assign@4.1.5:
     resolution:
       {
-        integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+        integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
+      call-bind: 1.0.7
+      define-properties: 1.2.1
       has-symbols: 1.0.3
       object-keys: 1.1.1
 
-  /object.entries@1.1.6:
+  /object.entries@1.1.8:
     resolution:
       {
-        integrity: sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+        integrity: sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
     dev: true
 
-  /object.fromentries@2.0.6:
+  /object.fromentries@2.0.8:
     resolution:
       {
-        integrity: sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
+        integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
     dev: true
 
-  /object.hasown@1.1.2:
+  /object.hasown@1.1.4:
     resolution:
       {
-        integrity: sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
+        integrity: sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
     dev: true
 
-  /object.values@1.1.6:
+  /object.values@1.2.0:
     resolution:
       {
-        integrity: sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+        integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
 
   /once@1.4.0:
     resolution:
@@ -16193,6 +15772,7 @@ packages:
     engines: { node: '>=6' }
     dependencies:
       mimic-fn: 2.1.0
+    dev: true
 
   /onetime@6.0.0:
     resolution:
@@ -16202,6 +15782,7 @@ packages:
     engines: { node: '>=12' }
     dependencies:
       mimic-fn: 4.0.0
+    dev: true
 
   /open@8.4.2:
     resolution:
@@ -16215,31 +15796,19 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
-  /open@9.1.0:
-    resolution:
-      {
-        integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
-      }
-    engines: { node: '>=14.16' }
-    dependencies:
-      default-browser: 4.0.0
-      define-lazy-prop: 3.0.0
-      is-inside-container: 1.0.0
-      is-wsl: 2.2.0
-
-  /optionator@0.9.3:
+  /optionator@0.9.4:
     resolution:
       {
-        integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+        integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
       }
     engines: { node: '>= 0.8.0' }
     dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
       deep-is: 0.1.4
       fast-levenshtein: 2.0.6
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
+      word-wrap: 1.2.5
 
   /ora@5.4.1:
     resolution:
@@ -16251,7 +15820,7 @@ packages:
       bl: 4.1.0
       chalk: 4.1.2
       cli-cursor: 3.1.0
-      cli-spinners: 2.9.0
+      cli-spinners: 2.9.2
       is-interactive: 1.0.0
       is-unicode-supported: 0.1.0
       log-symbols: 4.1.0
@@ -16474,22 +16043,22 @@ packages:
     hasBin: true
     dependencies:
       '@npmcli/git': 4.1.0
-      '@npmcli/installed-package-contents': 2.0.2
+      '@npmcli/installed-package-contents': 2.1.0
       '@npmcli/promise-spawn': 6.0.2
       '@npmcli/run-script': 6.0.2
-      cacache: 17.1.3
-      fs-minipass: 3.0.2
+      cacache: 17.1.4
+      fs-minipass: 3.0.3
       minipass: 5.0.0
       npm-package-arg: 10.1.0
       npm-packlist: 7.0.4
-      npm-pick-manifest: 8.0.1
+      npm-pick-manifest: 8.0.2
       npm-registry-fetch: 14.0.5
       proc-log: 3.0.0
       promise-retry: 2.0.1
       read-package-json: 6.0.4
       read-package-json-fast: 3.0.2
-      sigstore: 1.8.0
-      ssri: 10.0.4
+      sigstore: 1.9.0
+      ssri: 10.0.6
       tar: 6.1.11
     transitivePeerDependencies:
       - bluebird
@@ -16522,7 +16091,7 @@ packages:
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      json-parse-even-better-errors: 3.0.0
+      json-parse-even-better-errors: 3.0.2
       just-diff: 6.0.2
       just-diff-apply: 5.5.0
     dev: true
@@ -16545,7 +16114,7 @@ packages:
       }
     engines: { node: '>=8' }
     dependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.24.7
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -16618,6 +16187,7 @@ packages:
         integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
       }
     engines: { node: '>=12' }
+    dev: true
 
   /path-parse@1.0.7:
     resolution:
@@ -16625,15 +16195,15 @@ packages:
         integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
       }
 
-  /path-scurry@1.10.1:
+  /path-scurry@1.11.1:
     resolution:
       {
-        integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==
+        integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
       }
-    engines: { node: '>=16 || 14 >=14.17' }
+    engines: { node: '>=16 || 14 >=14.18' }
     dependencies:
-      lru-cache: 10.0.0
-      minipass: 6.0.2
+      lru-cache: 10.4.3
+      minipass: 7.1.2
     dev: true
 
   /path-type@3.0.0:
@@ -16653,6 +16223,13 @@ packages:
       }
     engines: { node: '>=8' }
 
+  /pathe@1.1.2:
+    resolution:
+      {
+        integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+      }
+    dev: false
+
   /pause-stream@0.0.11:
     resolution:
       {
@@ -16683,10 +16260,10 @@ packages:
       }
     dev: true
 
-  /picocolors@1.0.0:
+  /picocolors@1.0.1:
     resolution:
       {
-        integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+        integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
       }
 
   /picomatch@2.3.1:
@@ -16755,6 +16332,24 @@ packages:
       find-up: 4.1.0
     dev: true
 
+  /pkg-types@1.1.3:
+    resolution:
+      {
+        integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==
+      }
+    dependencies:
+      confbox: 0.1.7
+      mlly: 1.7.1
+      pathe: 1.1.2
+    dev: false
+
+  /possible-typed-array-names@1.0.0:
+    resolution:
+      {
+        integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+      }
+    engines: { node: '>= 0.4' }
+
   /postcss-calc@8.2.4(postcss@8.4.12):
     resolution:
       {
@@ -16764,7 +16359,7 @@ packages:
       postcss: ^8.2.2
     dependencies:
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -16777,7 +16372,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.23.2
       caniuse-api: 3.0.0
       colord: 2.9.3
       postcss: 8.4.12
@@ -16793,7 +16388,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.23.2
       postcss: 8.4.12
       postcss-value-parser: 4.2.0
     dev: true
@@ -16808,7 +16403,7 @@ packages:
       postcss: ^8.4
     dependencies:
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
     dev: true
 
   /postcss-discard-comments@5.1.2(postcss@8.4.12):
@@ -16859,7 +16454,7 @@ packages:
       postcss: 8.4.12
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.27):
+  /postcss-import@15.1.0(postcss@8.4.40):
     resolution:
       {
         integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
@@ -16868,10 +16463,10 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.40
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.2
+      resolve: 1.22.8
     dev: true
 
   /postcss-import@16.0.0(postcss@8.4.12):
@@ -16886,10 +16481,10 @@ packages:
       postcss: 8.4.12
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.2
+      resolve: 1.22.8
     dev: true
 
-  /postcss-js@4.0.1(postcss@8.4.27):
+  /postcss-js@4.0.1(postcss@8.4.40):
     resolution:
       {
         integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
@@ -16899,10 +16494,10 @@ packages:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.27
+      postcss: 8.4.40
     dev: true
 
-  /postcss-load-config@4.0.2(postcss@8.4.27)(ts-node@10.9.1):
+  /postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.2):
     resolution:
       {
         integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
@@ -16917,10 +16512,10 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      lilconfig: 3.0.0
-      postcss: 8.4.27
-      ts-node: 10.9.1(@types/node@18.19.3)(typescript@4.9.4)
-      yaml: 2.3.4
+      lilconfig: 3.1.2
+      postcss: 8.4.40
+      ts-node: 10.9.2(@types/node@18.19.0)(typescript@4.9.4)
+      yaml: 2.5.0
     dev: true
 
   /postcss-logical@4.0.2:
@@ -16956,11 +16551,11 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.23.2
       caniuse-api: 3.0.0
       cssnano-utils: 3.1.0(postcss@8.4.12)
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
     dev: true
 
   /postcss-minify-font-values@5.1.0(postcss@8.4.12):
@@ -17000,7 +16595,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.23.2
       cssnano-utils: 3.1.0(postcss@8.4.12)
       postcss: 8.4.12
       postcss-value-parser: 4.2.0
@@ -17016,13 +16611,13 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.12):
+  /postcss-modules-extract-imports@3.1.0(postcss@8.4.12):
     resolution:
       {
-        integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+        integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
       }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
@@ -17041,10 +16636,10 @@ packages:
       postcss: 6.0.23
     dev: true
 
-  /postcss-modules-local-by-default@4.0.3(postcss@8.4.12):
+  /postcss-modules-local-by-default@4.0.5(postcss@8.4.12):
     resolution:
       {
-        integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==
+        integrity: sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==
       }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
@@ -17052,7 +16647,7 @@ packages:
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.12)
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -17066,17 +16661,17 @@ packages:
       postcss: 6.0.23
     dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.12):
+  /postcss-modules-scope@3.2.0(postcss@8.4.12):
     resolution:
       {
-        integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+        integrity: sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==
       }
     engines: { node: ^10 || ^12 || >= 14 }
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
     dev: true
 
   /postcss-modules-sync@1.0.0:
@@ -17106,17 +16701,17 @@ packages:
       postcss: 8.4.12
     dev: true
 
-  /postcss-nested@6.0.1(postcss@8.4.27):
+  /postcss-nested@6.2.0(postcss@8.4.40):
     resolution:
       {
-        integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+        integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
       }
     engines: { node: '>=12.0' }
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.27
-      postcss-selector-parser: 6.0.13
+      postcss: 8.4.40
+      postcss-selector-parser: 6.1.1
     dev: true
 
   /postcss-normalize-charset@5.1.0(postcss@8.4.12):
@@ -17205,7 +16800,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.23.2
       postcss: 8.4.12
       postcss-value-parser: 4.2.0
     dev: true
@@ -17260,7 +16855,7 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.23.2
       caniuse-api: 3.0.0
       postcss: 8.4.12
     dev: true
@@ -17278,10 +16873,10 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-selector-parser@6.0.13:
+  /postcss-selector-parser@6.1.1:
     resolution:
       {
-        integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+        integrity: sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
       }
     engines: { node: '>=4' }
     dependencies:
@@ -17312,7 +16907,7 @@ packages:
       postcss: ^8.2.15
     dependencies:
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
     dev: true
 
   /postcss-value-parser@4.2.0:
@@ -17331,7 +16926,7 @@ packages:
     dependencies:
       chalk: 1.1.3
       js-base64: 2.6.4
-      source-map: 0.5.7
+      source-map: 0.5.6
       supports-color: 3.2.3
     dev: true
 
@@ -17355,42 +16950,30 @@ packages:
     engines: { node: '>=6.0.0' }
     dependencies:
       picocolors: 0.2.1
-      source-map: 0.6.1
-    dev: true
-
-  /postcss@8.4.12:
-    resolution:
-      {
-        integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
-      }
-    engines: { node: ^10 || ^12 || >=14 }
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
+      source-map: 0.6.1
     dev: true
 
-  /postcss@8.4.27:
+  /postcss@8.4.12:
     resolution:
       {
-        integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==
+        integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
       }
     engines: { node: ^10 || ^12 || >=14 }
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       source-map-js: 1.2.0
     dev: true
 
-  /postcss@8.4.38:
+  /postcss@8.4.40:
     resolution:
       {
-        integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+        integrity: sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==
       }
     engines: { node: ^10 || ^12 || >=14 }
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       source-map-js: 1.2.0
 
   /prelude-ls@1.2.1:
@@ -17510,21 +17093,9 @@ packages:
       }
     engines: { node: ^14.15.0 || ^16.10.0 || >=18.0.0 }
     dependencies:
-      '@jest/schemas': 29.6.0
+      '@jest/schemas': 29.6.3
       ansi-styles: 5.2.0
-      react-is: 18.2.0
-    dev: true
-
-  /pretty@2.0.0:
-    resolution:
-      {
-        integrity: sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w==
-      }
-    engines: { node: '>=0.10.0' }
-    dependencies:
-      condense-newlines: 0.2.1
-      extend-shallow: 2.0.1
-      js-beautify: 1.14.9
+      react-is: 18.3.1
     dev: true
 
   /proc-log@2.0.1:
@@ -17608,7 +17179,6 @@ packages:
       {
         integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
       }
-    requiresBuild: true
     dependencies:
       asap: 2.0.6
     dev: true
@@ -17644,10 +17214,10 @@ packages:
       react-is: 16.13.1
     dev: true
 
-  /property-expr@2.0.5:
+  /property-expr@2.0.6:
     resolution:
       {
-        integrity: sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+        integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
       }
     dev: true
 
@@ -17718,36 +17288,33 @@ packages:
       {
         integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==
       }
-    requiresBuild: true
     dependencies:
       constantinople: 4.0.1
       js-stringify: 1.0.2
       pug-runtime: 3.0.1
     dev: true
 
-  /pug-code-gen@3.0.2:
+  /pug-code-gen@3.0.3:
     resolution:
       {
-        integrity: sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==
+        integrity: sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==
       }
-    requiresBuild: true
     dependencies:
       constantinople: 4.0.1
       doctypes: 1.1.0
       js-stringify: 1.0.2
       pug-attrs: 3.0.0
-      pug-error: 2.0.0
+      pug-error: 2.1.0
       pug-runtime: 3.0.1
       void-elements: 3.1.0
       with: 7.0.2
     dev: true
 
-  /pug-error@2.0.0:
+  /pug-error@2.1.0:
     resolution:
       {
-        integrity: sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==
+        integrity: sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==
       }
-    requiresBuild: true
     dev: true
 
   /pug-filters@4.0.0:
@@ -17755,13 +17322,12 @@ packages:
       {
         integrity: sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==
       }
-    requiresBuild: true
     dependencies:
       constantinople: 4.0.1
       jstransformer: 1.0.0
-      pug-error: 2.0.0
+      pug-error: 2.1.0
       pug-walk: 2.0.0
-      resolve: 1.22.2
+      resolve: 1.22.8
     dev: true
 
   /pug-lexer@5.0.1:
@@ -17769,11 +17335,10 @@ packages:
       {
         integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==
       }
-    requiresBuild: true
     dependencies:
       character-parser: 2.2.0
       is-expression: 4.0.0
-      pug-error: 2.0.0
+      pug-error: 2.1.0
     dev: true
 
   /pug-linker@4.0.0:
@@ -17781,9 +17346,8 @@ packages:
       {
         integrity: sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==
       }
-    requiresBuild: true
     dependencies:
-      pug-error: 2.0.0
+      pug-error: 2.1.0
       pug-walk: 2.0.0
     dev: true
 
@@ -17792,7 +17356,6 @@ packages:
       {
         integrity: sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==
       }
-    requiresBuild: true
     dependencies:
       object-assign: 4.1.1
       pug-walk: 2.0.0
@@ -17803,9 +17366,8 @@ packages:
       {
         integrity: sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==
       }
-    requiresBuild: true
     dependencies:
-      pug-error: 2.0.0
+      pug-error: 2.1.0
       token-stream: 1.0.0
     dev: true
 
@@ -17814,7 +17376,6 @@ packages:
       {
         integrity: sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==
       }
-    requiresBuild: true
     dev: true
 
   /pug-strip-comments@2.0.0:
@@ -17822,9 +17383,8 @@ packages:
       {
         integrity: sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==
       }
-    requiresBuild: true
     dependencies:
-      pug-error: 2.0.0
+      pug-error: 2.1.0
     dev: true
 
   /pug-walk@2.0.0:
@@ -17832,16 +17392,15 @@ packages:
       {
         integrity: sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==
       }
-    requiresBuild: true
     dev: true
 
-  /pug@3.0.2:
+  /pug@3.0.3:
     resolution:
       {
-        integrity: sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==
+        integrity: sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==
       }
     dependencies:
-      pug-code-gen: 3.0.2
+      pug-code-gen: 3.0.3
       pug-filters: 4.0.0
       pug-lexer: 5.0.1
       pug-linker: 4.0.0
@@ -17861,10 +17420,10 @@ packages:
       once: 1.4.0
     dev: true
 
-  /punycode@2.3.0:
+  /punycode@2.3.1:
     resolution:
       {
-        integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+        integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
       }
     engines: { node: '>=6' }
 
@@ -17874,6 +17433,10 @@ packages:
         integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
       }
     engines: { node: '>=0.6.0', teleport: '>=0.2.0' }
+    deprecated: |-
+      You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
+
+      (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
     dev: true
 
   /qs@6.10.4:
@@ -17883,7 +17446,7 @@ packages:
       }
     engines: { node: '>=0.6' }
     dependencies:
-      side-channel: 1.0.4
+      side-channel: 1.0.6
     dev: true
 
   /query-string@7.1.3:
@@ -17968,10 +17531,10 @@ packages:
       }
     dev: true
 
-  /react-is@18.2.0:
+  /react-is@18.3.1:
     resolution:
       {
-        integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+        integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
       }
     dev: true
 
@@ -18030,7 +17593,7 @@ packages:
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      json-parse-even-better-errors: 3.0.0
+      json-parse-even-better-errors: 3.0.2
       npm-normalize-package-bin: 3.0.1
     dev: true
 
@@ -18040,6 +17603,7 @@ packages:
         integrity: sha512-MALHuNgYWdGW3gKzuNMuYtcSSZbGQm94fAp16xt8VsYTLBjUSc55bLMKe6gzpWue0Tfi6CBgwCSdDAqutGDhMg==
       }
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
+    deprecated: This package is no longer supported. Please use @npmcli/package-json instead.
     dependencies:
       glob: 8.1.0
       json-parse-even-better-errors: 2.3.1
@@ -18053,9 +17617,10 @@ packages:
         integrity: sha512-AEtWXYfopBj2z5N5PbkAOeNHRPUg5q+Nen7QLxV8M2zJq1ym6/lCz3fYNTCXe19puu2d06jfHhrP7v/S2PtMMw==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
+    deprecated: This package is no longer supported. Please use @npmcli/package-json instead.
     dependencies:
-      glob: 10.3.0
-      json-parse-even-better-errors: 3.0.0
+      glob: 10.3.16
+      json-parse-even-better-errors: 3.0.2
       normalize-package-data: 5.0.0
       npm-normalize-package-bin: 3.0.1
     dev: true
@@ -18102,7 +17667,7 @@ packages:
       }
     engines: { node: '>=8' }
     dependencies:
-      '@types/normalize-package-data': 2.4.1
+      '@types/normalize-package-data': 2.4.4
       normalize-package-data: 2.5.0
       parse-json: 5.2.0
       type-fest: 0.6.0
@@ -18145,20 +17710,6 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
-  /readable-stream@4.4.2:
-    resolution:
-      {
-        integrity: sha512-Lk/fICSyIhodxy1IDK2HazkeGjSmezAWX2egdtJnYhtzKEsBPJowlI6F6LPb5tqIQILrMbx22S5o3GuJavPusA==
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
-    dependencies:
-      abort-controller: 3.0.0
-      buffer: 6.0.3
-      events: 3.3.0
-      process: 0.11.10
-      string_decoder: 1.3.0
-    dev: true
-
   /readdirp@3.6.0:
     resolution:
       {
@@ -18169,18 +17720,18 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /recast@0.23.3:
+  /recast@0.23.9:
     resolution:
       {
-        integrity: sha512-HbCVFh2ANP6a09nzD4lx7XthsxMOJWKX5pIcUwtLrmeEIl3I0DwjCoVXDE0Aobk+7k/mS3H50FK4iuYArpcT6Q==
+        integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==
       }
     engines: { node: '>= 4' }
     dependencies:
-      assert: 2.0.0
       ast-types: 0.16.1
       esprima: 4.0.1
       source-map: 0.6.1
-      tslib: 2.6.2
+      tiny-invariant: 1.3.3
+      tslib: 2.6.3
     dev: true
 
   /redent@3.0.0:
@@ -18206,12 +17757,15 @@ packages:
       {
         integrity: sha512-i5lLI6iw9AU3Uu4szRNPPEkomnkjRTaVt9hy/bn5g/oSzekBSMeLZblcjP74AW0vBabqERLLIrz+gR8QYR54Tw==
       }
+    deprecated:
+      This version has a critical bug in fallback handling. Please upgrade to reflect-metadata@0.2.2
+      or newer.
     dev: true
 
-  /regenerator-runtime@0.13.11:
+  /regenerator-runtime@0.14.1:
     resolution:
       {
-        integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+        integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
       }
     dev: true
 
@@ -18232,16 +17786,17 @@ packages:
     hasBin: true
     dev: true
 
-  /regexp.prototype.flags@1.5.0:
+  /regexp.prototype.flags@1.5.2:
     resolution:
       {
-        integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==
+        integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      functions-have-names: 1.2.3
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      set-function-name: 2.0.2
 
   /regexpp@3.2.0:
     resolution:
@@ -18264,7 +17819,7 @@ packages:
         integrity: sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==
       }
     dependencies:
-      throttleit: 1.0.0
+      throttleit: 1.0.1
     dev: true
 
   /require-directory@2.1.1:
@@ -18329,7 +17884,9 @@ packages:
         integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
       }
     deprecated: https://github.com/lydell/resolve-url#deprecated
+    requiresBuild: true
     dev: true
+    optional: true
 
   /resolve.exports@1.1.1:
     resolution:
@@ -18345,28 +17902,28 @@ packages:
         integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
       }
     dependencies:
-      is-core-module: 2.12.1
+      is-core-module: 2.15.0
       path-parse: 1.0.7
 
-  /resolve@1.22.2:
+  /resolve@1.22.8:
     resolution:
       {
-        integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+        integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
       }
     hasBin: true
     dependencies:
-      is-core-module: 2.12.1
+      is-core-module: 2.15.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  /resolve@2.0.0-next.4:
+  /resolve@2.0.0-next.5:
     resolution:
       {
-        integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+        integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
       }
     hasBin: true
     dependencies:
-      is-core-module: 2.12.1
+      is-core-module: 2.15.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
@@ -18408,10 +17965,10 @@ packages:
       }
     engines: { iojs: '>=1.0.0', node: '>=0.10.0' }
 
-  /rfdc@1.3.0:
+  /rfdc@1.4.1:
     resolution:
       {
-        integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+        integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
       }
     dev: true
 
@@ -18420,6 +17977,7 @@ packages:
       {
         integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
       }
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
     dependencies:
       glob: 7.2.3
@@ -18431,7 +17989,7 @@ packages:
       }
     engines: { node: '>=8.3' }
     dependencies:
-      '@types/fs-extra': 8.1.2
+      '@types/fs-extra': 8.1.5
       colorette: 1.4.0
       fs-extra: 8.1.0
       globby: 10.0.1
@@ -18466,16 +18024,16 @@ packages:
       mime-types: 2.1.35
       p-queue: 6.6.2
       postcss: 8.4.12
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.12)
-      postcss-modules-local-by-default: 4.0.3(postcss@8.4.12)
-      postcss-modules-scope: 3.0.0(postcss@8.4.12)
+      postcss-modules-extract-imports: 3.1.0(postcss@8.4.12)
+      postcss-modules-local-by-default: 4.0.5(postcss@8.4.12)
+      postcss-modules-scope: 3.2.0(postcss@8.4.12)
       postcss-modules-values: 4.0.0(postcss@8.4.12)
       postcss-value-parser: 4.2.0
       query-string: 7.1.3
-      resolve: 1.22.2
+      resolve: 1.22.8
       rollup: 4.9.1
-      source-map-js: 1.0.2
-      tslib: 2.6.2
+      source-map-js: 1.2.0
+      tslib: 2.6.3
     dev: true
 
   /rollup-plugin-typescript2@0.36.0(rollup@4.9.1)(typescript@4.9.4):
@@ -18491,12 +18049,12 @@ packages:
       find-cache-dir: 3.3.2
       fs-extra: 10.1.0
       rollup: 4.9.1
-      semver: 7.5.4
-      tslib: 2.6.2
+      semver: 7.6.3
+      tslib: 2.6.3
       typescript: 4.9.4
     dev: true
 
-  /rollup-plugin-vue@5.1.9(postcss@8.4.12)(vue-template-compiler@2.7.14):
+  /rollup-plugin-vue@5.1.9(postcss@8.4.12)(vue-template-compiler@2.7.16):
     resolution:
       {
         integrity: sha512-DXzrBUD2j68Y6nls4MmuJsFL1SrQDpdgjxvhk/oy04LzJmXJoX1x31yLEBFkkmvpbon6Q885WJLvEMiMyT+3rA==
@@ -18504,16 +18062,16 @@ packages:
     peerDependencies:
       vue-template-compiler: '*'
     dependencies:
-      '@vue/component-compiler': 4.2.4(postcss@8.4.12)(vue-template-compiler@2.7.14)
-      '@vue/component-compiler-utils': 3.3.0(pug@3.0.2)
-      debug: 4.3.4(supports-color@8.1.1)
+      '@vue/component-compiler': 4.2.4(postcss@8.4.12)(vue-template-compiler@2.7.16)
+      '@vue/component-compiler-utils': 3.3.0(pug@3.0.3)
+      debug: 4.3.6(supports-color@8.1.1)
       hash-sum: 1.0.2
       magic-string: 0.25.9
       querystring: 0.2.1
       rollup-pluginutils: 2.8.2
       source-map: 0.7.3
       vue-runtime-helpers: 1.1.2
-      vue-template-compiler: 2.7.14(vue@2.7.14)
+      vue-template-compiler: 2.7.16(vue@2.7.16)
     transitivePeerDependencies:
       - arc-templates
       - atpl
@@ -18572,6 +18130,22 @@ packages:
       - whiskers
     dev: true
 
+  /rollup-plugin-vue@6.0.0(@vue/compiler-sfc@3.4.35):
+    resolution:
+      {
+        integrity: sha512-oVvUd84d5u73M2HYM3XsMDLtZRIA/tw2U0dmHlXU2UWP5JARYHzh/U9vcxaN/x/9MrepY7VH3pHFeOhrWpxs/Q==
+      }
+    peerDependencies:
+      '@vue/compiler-sfc': '*'
+    dependencies:
+      '@vue/compiler-sfc': 3.4.35
+      debug: 4.3.6(supports-color@8.1.1)
+      hash-sum: 2.0.0
+      rollup-pluginutils: 2.8.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /rollup-pluginutils@2.8.2:
     resolution:
       {
@@ -18627,15 +18201,6 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /run-applescript@5.0.0:
-    resolution:
-      {
-        integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
-      }
-    engines: { node: '>=12' }
-    dependencies:
-      execa: 5.1.1
-
   /run-async@2.4.1:
     resolution:
       {
@@ -18658,7 +18223,8 @@ packages:
         integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==
       }
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.6.3
+    dev: false
 
   /rxjs@7.8.1:
     resolution:
@@ -18666,18 +18232,18 @@ packages:
         integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
       }
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.6.3
     dev: true
 
-  /safe-array-concat@1.0.0:
+  /safe-array-concat@1.1.2:
     resolution:
       {
-        integrity: sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==
+        integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
       }
     engines: { node: '>=0.4' }
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
       has-symbols: 1.0.3
       isarray: 2.0.5
 
@@ -18695,14 +18261,15 @@ packages:
       }
     dev: true
 
-  /safe-regex-test@1.0.0:
+  /safe-regex-test@1.0.3:
     resolution:
       {
-        integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+        integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      es-errors: 1.3.0
       is-regex: 1.1.4
 
   /safer-buffer@2.1.2:
@@ -18720,9 +18287,9 @@ packages:
     engines: { node: '>=14.0.0' }
     hasBin: true
     dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.1
-      source-map-js: 1.0.2
+      chokidar: 3.6.0
+      immutable: 4.3.7
+      source-map-js: 1.2.0
     dev: true
 
   /sax@1.2.4:
@@ -18783,10 +18350,10 @@ packages:
       }
     hasBin: true
 
-  /semver@7.3.4:
+  /semver@7.3.8:
     resolution:
       {
-        integrity: sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
+        integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
       }
     engines: { node: '>=10' }
     hasBin: true
@@ -18794,10 +18361,10 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /semver@7.3.8:
+  /semver@7.5.3:
     resolution:
       {
-        integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+        integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
       }
     engines: { node: '>=10' }
     hasBin: true
@@ -18805,10 +18372,10 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /semver@7.5.3:
+  /semver@7.5.4:
     resolution:
       {
-        integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
+        integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
       }
     engines: { node: '>=10' }
     hasBin: true
@@ -18816,20 +18383,18 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /semver@7.5.4:
+  /semver@7.6.3:
     resolution:
       {
-        integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+        integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
       }
     engines: { node: '>=10' }
     hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
 
-  /serialize-javascript@6.0.0:
+  /serialize-javascript@6.0.2:
     resolution:
       {
-        integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
+        integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
       }
     dependencies:
       randombytes: 2.1.0
@@ -18842,6 +18407,32 @@ packages:
       }
     dev: true
 
+  /set-function-length@1.2.2:
+    resolution:
+      {
+        integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.2
+
+  /set-function-name@2.0.2:
+    resolution:
+      {
+        integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+      }
+    engines: { node: '>= 0.4' }
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
   /shallow-clone@3.0.1:
     resolution:
       {
@@ -18875,40 +18466,44 @@ packages:
       }
     dev: true
 
-  /side-channel@1.0.4:
+  /side-channel@1.0.6:
     resolution:
       {
-        integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+        integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      object-inspect: 1.13.2
 
   /signal-exit@3.0.7:
     resolution:
       {
         integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
       }
+    dev: true
 
-  /signal-exit@4.0.2:
+  /signal-exit@4.1.0:
     resolution:
       {
-        integrity: sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==
+        integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
       }
     engines: { node: '>=14' }
     dev: true
 
-  /sigstore@1.8.0:
+  /sigstore@1.9.0:
     resolution:
       {
-        integrity: sha512-ogU8qtQ3VFBawRJ8wjsBEX/vIFeHuGs1fm4jZtjWQwjo8pfAt7T/rh+udlAN4+QUe0IzA8qRSc/YZ7dHP6kh+w==
+        integrity: sha512-0Zjz0oe37d08VeOtBIuB6cRriqXse2e8w+7yIy2XSXjshRKxbc2KkhXjL229jXSxEm7UbcjS76wcJDGQddVI9A==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     hasBin: true
     dependencies:
-      '@sigstore/bundle': 1.0.0
-      '@sigstore/protobuf-specs': 0.2.0
+      '@sigstore/bundle': 1.1.0
+      '@sigstore/protobuf-specs': 0.2.1
+      '@sigstore/sign': 1.0.0
       '@sigstore/tuf': 1.0.3
       make-fetch-happen: 11.1.1
     transitivePeerDependencies:
@@ -18987,20 +18582,20 @@ packages:
     engines: { node: '>= 10' }
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@8.1.1)
-      socks: 2.7.1
+      debug: 4.3.6(supports-color@8.1.1)
+      socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /socks@2.7.1:
+  /socks@2.8.3:
     resolution:
       {
-        integrity: sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==
+        integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==
       }
-    engines: { node: '>= 10.13.0', npm: '>= 3.0.0' }
+    engines: { node: '>= 10.0.0', npm: '>= 3.0.0' }
     dependencies:
-      ip: 2.0.0
+      ip-address: 9.0.5
       smart-buffer: 4.2.0
     dev: true
 
@@ -19014,14 +18609,6 @@ packages:
       is-plain-obj: 1.1.0
     dev: true
 
-  /source-map-js@1.0.2:
-    resolution:
-      {
-        integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-      }
-    engines: { node: '>=0.10.0' }
-    dev: true
-
   /source-map-js@1.2.0:
     resolution:
       {
@@ -19035,6 +18622,7 @@ packages:
         integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
       }
     deprecated: See https://github.com/lydell/source-map-resolve#deprecated
+    requiresBuild: true
     dependencies:
       atob: 2.1.2
       decode-uri-component: 0.2.2
@@ -19042,6 +18630,7 @@ packages:
       source-map-url: 0.4.1
       urix: 0.1.0
     dev: true
+    optional: true
 
   /source-map-support@0.5.21:
     resolution:
@@ -19059,7 +18648,9 @@ packages:
         integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
       }
     deprecated: See https://github.com/lydell/source-map-url#deprecated
+    requiresBuild: true
     dev: true
+    optional: true
 
   /source-map@0.5.6:
     resolution:
@@ -19069,20 +18660,13 @@ packages:
     engines: { node: '>=0.10.0' }
     dev: true
 
-  /source-map@0.5.7:
-    resolution:
-      {
-        integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
-      }
-    engines: { node: '>=0.10.0' }
-    dev: true
-
   /source-map@0.6.1:
     resolution:
       {
         integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
       }
     engines: { node: '>=0.10.0' }
+    dev: true
 
   /source-map@0.7.3:
     resolution:
@@ -19122,13 +18706,13 @@ packages:
       }
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.13
+      spdx-license-ids: 3.0.18
     dev: true
 
-  /spdx-exceptions@2.3.0:
+  /spdx-exceptions@2.5.0:
     resolution:
       {
-        integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+        integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==
       }
 
   /spdx-expression-parse@3.0.1:
@@ -19137,13 +18721,13 @@ packages:
         integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
       }
     dependencies:
-      spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.13
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.18
 
-  /spdx-license-ids@3.0.13:
+  /spdx-license-ids@3.0.18:
     resolution:
       {
-        integrity: sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==
+        integrity: sha512-xxRs31BqRYHwiMzudOrpSiHtZ8i/GeionCBDSilhYRj+9gIcI8wCZTlXZKu9vZIVqViP3dcp9qE5G6AlIaD+TQ==
       }
 
   /split-on-first@1.1.0:
@@ -19188,10 +18772,17 @@ packages:
       }
     dev: true
 
-  /sshpk@1.17.0:
+  /sprintf-js@1.1.3:
+    resolution:
+      {
+        integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
+      }
+    dev: true
+
+  /sshpk@1.18.0:
     resolution:
       {
-        integrity: sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
+        integrity: sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
       }
     engines: { node: '>=0.10.0' }
     hasBin: true
@@ -19207,14 +18798,14 @@ packages:
       tweetnacl: 0.14.5
     dev: true
 
-  /ssri@10.0.4:
+  /ssri@10.0.6:
     resolution:
       {
-        integrity: sha512-12+IR2CB2C28MMAw0Ncqwj5QbTcs0nGIhgJzYWzDkb21vWmfNI83KS4f3Ci6GI98WreIfG7o9UXp3C0qbpA8nQ==
+        integrity: sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
-      minipass: 5.0.0
+      minipass: 7.1.2
     dev: true
 
   /ssri@9.0.1:
@@ -19266,7 +18857,7 @@ packages:
       arg: 5.0.2
       bluebird: 3.7.2
       check-more-types: 2.24.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       execa: 5.1.1
       lazy-ass: 1.6.0
       ps-tree: 1.2.0
@@ -19350,52 +18941,59 @@ packages:
       strip-ansi: 7.1.0
     dev: true
 
-  /string.prototype.matchall@4.0.8:
+  /string.prototype.matchall@4.0.11:
     resolution:
       {
-        integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
+        integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
       has-symbols: 1.0.3
-      internal-slot: 1.0.5
-      regexp.prototype.flags: 1.5.0
-      side-channel: 1.0.4
+      internal-slot: 1.0.7
+      regexp.prototype.flags: 1.5.2
+      set-function-name: 2.0.2
+      side-channel: 1.0.6
     dev: true
 
-  /string.prototype.trim@1.2.7:
+  /string.prototype.trim@1.2.9:
     resolution:
       {
-        integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
+        integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
 
-  /string.prototype.trimend@1.0.6:
+  /string.prototype.trimend@1.0.8:
     resolution:
       {
-        integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+        integrity: sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
       }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
 
-  /string.prototype.trimstart@1.0.6:
+  /string.prototype.trimstart@1.0.8:
     resolution:
       {
-        integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+        integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.2.0
-      es-abstract: 1.22.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
 
   /string_decoder@1.1.1:
     resolution:
@@ -19465,6 +19063,7 @@ packages:
         integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
       }
     engines: { node: '>=6' }
+    dev: true
 
   /strip-final-newline@3.0.0:
     resolution:
@@ -19472,6 +19071,7 @@ packages:
         integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
       }
     engines: { node: '>=12' }
+    dev: true
 
   /strip-indent@3.0.0:
     resolution:
@@ -19483,6 +19083,14 @@ packages:
       min-indent: 1.0.1
     dev: true
 
+  /strip-json-comments@2.0.1:
+    resolution:
+      {
+        integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
+      }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /strip-json-comments@3.1.1:
     resolution:
       {
@@ -19512,9 +19120,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.23.2
       postcss: 8.4.12
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.1.1
     dev: true
 
   /stylus@0.54.8:
@@ -19538,17 +19146,17 @@ packages:
     dev: true
     optional: true
 
-  /sucrase@3.34.0:
+  /sucrase@3.35.0:
     resolution:
       {
-        integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
+        integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
       }
-    engines: { node: '>=8' }
+    engines: { node: '>=16 || 14 >=14.17' }
     hasBin: true
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/gen-mapping': 0.3.5
       commander: 4.1.1
-      glob: 7.1.6
+      glob: 10.3.16
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.6
@@ -19639,7 +19247,7 @@ packages:
       css-select: 4.3.0
       css-tree: 1.1.3
       csso: 4.2.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       stable: 0.1.8
     dev: true
 
@@ -19650,17 +19258,17 @@ packages:
       }
     dev: true
 
-  /synckit@0.8.5:
+  /synckit@0.8.8:
     resolution:
       {
-        integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
+        integrity: sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==
       }
     engines: { node: ^14.18.0 || >=16.0.0 }
     dependencies:
-      '@pkgr/utils': 2.4.2
-      tslib: 2.6.2
+      '@pkgr/core': 0.1.1
+      tslib: 2.6.3
 
-  /tailwindcss@3.4.0(ts-node@10.9.1):
+  /tailwindcss@3.4.0(ts-node@10.9.2):
     resolution:
       {
         integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==
@@ -19670,26 +19278,26 @@ packages:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.19.1
+      jiti: 1.21.6
       lilconfig: 2.1.0
-      micromatch: 4.0.5
+      micromatch: 4.0.7
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.27
-      postcss-import: 15.1.0(postcss@8.4.27)
-      postcss-js: 4.0.1(postcss@8.4.27)
-      postcss-load-config: 4.0.2(postcss@8.4.27)(ts-node@10.9.1)
-      postcss-nested: 6.0.1(postcss@8.4.27)
-      postcss-selector-parser: 6.0.13
-      resolve: 1.22.2
-      sucrase: 3.34.0
+      picocolors: 1.0.1
+      postcss: 8.4.40
+      postcss-import: 15.1.0(postcss@8.4.40)
+      postcss-js: 4.0.1(postcss@8.4.40)
+      postcss-load-config: 4.0.2(postcss@8.4.40)(ts-node@10.9.2)
+      postcss-nested: 6.2.0(postcss@8.4.40)
+      postcss-selector-parser: 6.1.1
+      resolve: 1.22.8
+      sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
     dev: true
@@ -19823,10 +19431,10 @@ packages:
       }
     dev: true
 
-  /throttleit@1.0.0:
+  /throttleit@1.0.1:
     resolution:
       {
-        integrity: sha512-rkTVqu6IjfQ/6+uNuuc3sZek4CEYxTJom3IktzgdSxcZqdARuebbA/f4QmAxMQIxqq9ZLEUkSYqvuk1I6VKq4g==
+        integrity: sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==
       }
     dev: true
 
@@ -19863,12 +19471,12 @@ packages:
       }
     dev: true
 
-  /titleize@3.0.0:
+  /tiny-invariant@1.3.3:
     resolution:
       {
-        integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
+        integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
       }
-    engines: { node: '>=12' }
+    dev: true
 
   /tmp@0.0.33:
     resolution:
@@ -19880,14 +19488,12 @@ packages:
       os-tmpdir: 1.0.2
     dev: true
 
-  /tmp@0.2.1:
+  /tmp@0.2.3:
     resolution:
       {
-        integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+        integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
       }
-    engines: { node: '>=8.17.0' }
-    dependencies:
-      rimraf: 3.0.2
+    engines: { node: '>=14.14' }
     dev: true
 
   /tmpl@1.0.5:
@@ -19918,7 +19524,6 @@ packages:
       {
         integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==
       }
-    requiresBuild: true
     dev: true
 
   /toposort@2.0.2:
@@ -19928,15 +19533,15 @@ packages:
       }
     dev: true
 
-  /tough-cookie@4.1.3:
+  /tough-cookie@4.1.4:
     resolution:
       {
-        integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
+        integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
       }
     engines: { node: '>=6' }
     dependencies:
       psl: 1.9.0
-      punycode: 2.3.0
+      punycode: 2.3.1
       universalify: 0.2.0
       url-parse: 1.5.10
     dev: true
@@ -19955,7 +19560,7 @@ packages:
       }
     engines: { node: '>=8' }
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: true
 
   /tree-kill@1.2.2:
@@ -19997,7 +19602,7 @@ packages:
       }
     dev: true
 
-  /ts-jest@27.1.0(@babel/core@7.23.3)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4):
+  /ts-jest@27.1.0(@babel/core@7.25.2)(@types/jest@27.5.0)(jest@27.5.0)(typescript@4.9.4):
     resolution:
       {
         integrity: sha512-ZouWlP03JMtzfNHg0ZeDrxAESYGmVhWyHtIl2/01kBbXaMbTr4Vhv6/GeMxUed6GFg/4ycMo+yU6Eo9gI16xTQ==
@@ -20018,7 +19623,7 @@ packages:
       babel-jest:
         optional: true
     dependencies:
-      '@babel/core': 7.23.3
+      '@babel/core': 7.25.2
       '@types/jest': 27.5.0
       bs-logger: 0.2.6
       esbuild: 0.14.54
@@ -20028,7 +19633,7 @@ packages:
       json5: 2.2.3
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.5.4
+      semver: 7.6.3
       typescript: 4.9.4
       yargs-parser: 20.2.9
     dev: true
@@ -20040,7 +19645,7 @@ packages:
       }
     dev: true
 
-  /ts-node@10.9.1(@types/node@18.19.3)(typescript@4.9.4):
+  /ts-node@10.9.1(@types/node@18.19.0)(typescript@4.9.4):
     resolution:
       {
         integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
@@ -20058,13 +19663,47 @@ packages:
         optional: true
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 18.19.0
+      acorn: 8.12.1
+      acorn-walk: 8.3.3
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.9.4
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: true
+
+  /ts-node@10.9.2(@types/node@18.19.0)(typescript@4.9.4):
+    resolution:
+      {
+        integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==
+      }
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 18.19.3
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
+      '@types/node': 18.19.0
+      acorn: 8.12.1
+      acorn-walk: 8.3.3
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
@@ -20074,10 +19713,10 @@ packages:
       yn: 3.1.1
     dev: true
 
-  /tsconfig-paths@3.14.2:
+  /tsconfig-paths@3.15.0:
     resolution:
       {
-        integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
+        integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
       }
     dependencies:
       '@types/json5': 0.0.29
@@ -20097,16 +19736,28 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /tsconfig@7.0.0:
+    resolution:
+      {
+        integrity: sha512-vZXmzPrL+EmC4T/4rVlT2jNVMWCi/O4DIiSj3UHg1OE5kCKbk4mfrXc6dZksLgRM/TZlKnousKH9bbTazUWRRw==
+      }
+    dependencies:
+      '@types/strip-bom': 3.0.0
+      '@types/strip-json-comments': 0.0.30
+      strip-bom: 3.0.0
+      strip-json-comments: 2.0.1
+    dev: true
+
   /tslib@1.14.1:
     resolution:
       {
         integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
       }
 
-  /tslib@2.5.0:
+  /tslib@2.5.3:
     resolution:
       {
-        integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+        integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
       }
     dev: false
 
@@ -20117,10 +19768,10 @@ packages:
       }
     dev: false
 
-  /tslib@2.6.2:
+  /tslib@2.6.3:
     resolution:
       {
-        integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+        integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
       }
 
   /tsutils@3.21.0(typescript@4.9.4):
@@ -20145,7 +19796,7 @@ packages:
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
       '@tufjs/models': 1.0.4
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       make-fetch-happen: 11.1.1
     transitivePeerDependencies:
       - supports-color
@@ -20255,59 +19906,65 @@ packages:
     engines: { node: '>=12.20' }
     dev: true
 
-  /type-fest@4.9.0:
+  /type-fest@4.23.0:
     resolution:
       {
-        integrity: sha512-KS/6lh/ynPGiHD/LnAobrEFq3Ad4pBzOlJ1wAnJx9N4EYoqFhMfLIBjUT2UEx4wg5ZE+cC1ob6DCSpppVo+rtg==
+        integrity: sha512-ZiBujro2ohr5+Z/hZWHESLz3g08BBdrdLMieYFULJO+tWc437sn8kQsWLJoZErY8alNhxre9K4p3GURAG11n+w==
       }
     engines: { node: '>=16' }
     dev: true
 
-  /typed-array-buffer@1.0.0:
+  /typed-array-buffer@1.0.2:
     resolution:
       {
-        integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==
+        integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      is-typed-array: 1.1.12
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-typed-array: 1.1.13
 
-  /typed-array-byte-length@1.0.0:
+  /typed-array-byte-length@1.0.1:
     resolution:
       {
-        integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==
+        integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
       for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
+      gopd: 1.0.1
+      has-proto: 1.0.3
+      is-typed-array: 1.1.13
 
-  /typed-array-byte-offset@1.0.0:
+  /typed-array-byte-offset@1.0.2:
     resolution:
       {
-        integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==
+        integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.7
       for-each: 0.3.3
-      has-proto: 1.0.1
-      is-typed-array: 1.1.12
+      gopd: 1.0.1
+      has-proto: 1.0.3
+      is-typed-array: 1.1.13
 
-  /typed-array-length@1.0.4:
+  /typed-array-length@1.0.6:
     resolution:
       {
-        integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+        integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
       }
+    engines: { node: '>= 0.4' }
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
       for-each: 0.3.3
-      is-typed-array: 1.1.12
+      gopd: 1.0.1
+      has-proto: 1.0.3
+      is-typed-array: 1.1.13
+      possible-typed-array-names: 1.0.0
 
   /typedarray-to-buffer@3.1.5:
     resolution:
@@ -20342,10 +19999,17 @@ packages:
     hasBin: true
     dev: true
 
-  /uglify-js@3.17.4:
+  /ufo@1.5.4:
+    resolution:
+      {
+        integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
+      }
+    dev: false
+
+  /uglify-js@3.19.1:
     resolution:
       {
-        integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==
+        integrity: sha512-y/2wiW+ceTYR2TSSptAhfnEtpLaQ4Ups5zrjB2d3kuVxHj16j/QJwPl5PvuGy9uARb39J0+iKxcRPvtpsx4A4A==
       }
     engines: { node: '>=0.8.0' }
     hasBin: true
@@ -20359,7 +20023,7 @@ packages:
         integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
       }
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
       has-bigints: 1.0.2
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
@@ -20421,10 +20085,10 @@ packages:
       crypto-random-string: 2.0.0
     dev: true
 
-  /universal-user-agent@6.0.0:
+  /universal-user-agent@6.0.1:
     resolution:
       {
-        integrity: sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
+        integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==
       }
     dev: true
 
@@ -20444,10 +20108,10 @@ packages:
     engines: { node: '>= 4.0.0' }
     dev: true
 
-  /universalify@2.0.0:
+  /universalify@2.0.1:
     resolution:
       {
-        integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+        integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
       }
     engines: { node: '>= 10.0.0' }
     dev: true
@@ -20458,6 +20122,7 @@ packages:
         integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
       }
     engines: { node: '>=8' }
+    dev: true
 
   /upath@2.0.1:
     resolution:
@@ -20467,18 +20132,18 @@ packages:
     engines: { node: '>=4' }
     dev: true
 
-  /update-browserslist-db@1.0.11(browserslist@4.21.9):
+  /update-browserslist-db@1.1.0(browserslist@4.23.2):
     resolution:
       {
-        integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
+        integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
       }
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.21.9
-      escalade: 3.1.1
-      picocolors: 1.0.0
+      browserslist: 4.23.2
+      escalade: 3.1.2
+      picocolors: 1.0.1
     dev: true
 
   /upper-case-first@2.0.2:
@@ -20487,7 +20152,7 @@ packages:
         integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
       }
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.6.3
     dev: true
 
   /uri-js@4.4.1:
@@ -20496,7 +20161,7 @@ packages:
         integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
       }
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
 
   /urix@0.1.0:
     resolution:
@@ -20504,7 +20169,9 @@ packages:
         integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==
       }
     deprecated: Please see https://github.com/lydell/urix#deprecated
+    requiresBuild: true
     dev: true
+    optional: true
 
   /url-parse@1.5.10:
     resolution:
@@ -20529,19 +20196,6 @@ packages:
         integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
       }
 
-  /util@0.12.5:
-    resolution:
-      {
-        integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==
-      }
-    dependencies:
-      inherits: 2.0.4
-      is-arguments: 1.1.1
-      is-generator-function: 1.0.10
-      is-typed-array: 1.1.12
-      which-typed-array: 1.1.11
-    dev: true
-
   /uuid@8.3.2:
     resolution:
       {
@@ -20587,7 +20241,7 @@ packages:
       }
     engines: { node: '>=10.12.0' }
     dependencies:
-      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 1.9.0
       source-map: 0.7.4
     dev: true
@@ -20618,23 +20272,21 @@ packages:
       }
     engines: { node: ^12.13.0 || ^14.15.0 || >=16.0.0 }
     dependencies:
-      builtins: 5.0.1
+      builtins: 5.1.0
     dev: true
 
-  /validate-npm-package-name@5.0.0:
+  /validate-npm-package-name@5.0.1:
     resolution:
       {
-        integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==
+        integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==
       }
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
-    dependencies:
-      builtins: 5.0.1
     dev: true
 
-  /validator@13.9.0:
+  /validator@13.12.0:
     resolution:
       {
-        integrity: sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==
+        integrity: sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==
       }
     engines: { node: '>= 0.10' }
     dev: true
@@ -20648,32 +20300,32 @@ packages:
     dependencies:
       assert-plus: 1.0.0
       core-util-is: 1.0.2
-      extsprintf: 1.4.1
+      extsprintf: 1.3.0
     dev: true
 
-  /vite-plugin-vue-inspector@4.0.0(vite@4.5.0):
+  /vite-plugin-vue-inspector@5.1.2(vite@4.5.0):
     resolution:
       {
-        integrity: sha512-xNjMbRj3YrebuuInTvlC8ghPtzT+3LjMIQPeeR/5CaFd+WcbA9wBnECZmlcP3GITCVED0SxGmTyoJ3iVKsK4vQ==
+        integrity: sha512-M+yH2LlQtVNzJAljQM+61CqDXBvHim8dU5ImGaQuwlo13tMDHue5D7IC20YwDJuWDODiYc/cZBUYspVlyPf2vQ==
       }
     peerDependencies:
-      vite: ^3.0.0-0 || ^4.0.0-0
-    dependencies:
-      '@babel/core': 7.23.3
-      '@babel/plugin-proposal-decorators': 7.23.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-import-attributes': 7.23.3(@babel/core@7.23.3)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.3)
-      '@babel/plugin-transform-typescript': 7.23.3(@babel/core@7.23.3)
-      '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.3)
-      '@vue/compiler-dom': 3.3.4
+      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-attributes': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
+      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2)
+      '@vue/compiler-dom': 3.4.35
       kolorist: 1.8.0
-      magic-string: 0.30.5
-      vite: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
+      magic-string: 0.30.11
+      vite: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-vue2@2.0.2(vite@4.5.0)(vue-template-compiler@2.7.14)(vue@2.7.14):
+  /vite-plugin-vue2@2.0.2(vite@4.5.0)(vue-template-compiler@2.7.16)(vue@2.7.16):
     resolution:
       {
         integrity: sha512-Oo1iwc5Zo376s3MYXqS7j+KXs26EjiyWV8/dmI23SoorO3zaAgnBefR45Zme+QtM407tJ2MVq0mqfI10qA5+LQ==
@@ -20682,37 +20334,37 @@ packages:
       vite: ^2.0.0 || ^3.0.0
       vue-template-compiler: ^2.2.0
     dependencies:
-      '@babel/core': 7.22.9
-      '@babel/parser': 7.22.7
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.9)
-      '@babel/plugin-proposal-decorators': 7.22.7(@babel/core@7.22.9)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.22.9)
-      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.22.9)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.22.9)
-      '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.22.9)
-      '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.22.9)
-      '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.22.9)
-      '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.22.9)
-      '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.9)
-      '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.22.9)
-      '@babel/plugin-transform-typescript': 7.22.9(@babel/core@7.22.9)
+      '@babel/core': 7.25.2
+      '@babel/parser': 7.25.3
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.25.2)
+      '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.25.2)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.25.2)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-arrow-functions': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-block-scoping': 7.25.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-computed-properties': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-destructuring': 7.24.8(@babel/core@7.25.2)
+      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-spread': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
       '@rollup/pluginutils': 4.2.1
       '@vue/babel-helper-vue-jsx-merge-props': 1.4.0
-      '@vue/babel-preset-jsx': 1.4.0(@babel/core@7.22.9)(vue@2.7.14)
-      '@vue/component-compiler-utils': 3.3.0(pug@3.0.2)
+      '@vue/babel-preset-jsx': 1.4.0(@babel/core@7.25.2)(vue@2.7.16)
+      '@vue/component-compiler-utils': 3.3.0(pug@3.0.3)
       consolidate: 0.16.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       fs-extra: 10.1.0
       hash-sum: 2.0.0
       magic-string: 0.26.7
-      prettier: 2.8.3
+      prettier: 2.8.8
       querystring: 0.2.1
       rollup: 2.79.1
       slash: 3.0.0
       source-map: 0.7.4
-      vite: 4.5.0(@types/node@18.19.3)(sass@1.70.0)
-      vue-template-babel-compiler: 1.2.0(vue-template-compiler@2.7.14)
-      vue-template-compiler: 2.7.14(vue@2.7.14)
+      vite: 4.5.0(@types/node@18.19.0)(sass@1.70.0)
+      vue-template-babel-compiler: 1.2.0(vue-template-compiler@2.7.16)
+      vue-template-compiler: 2.7.16(vue@2.7.16)
     transitivePeerDependencies:
       - arc-templates
       - atpl
@@ -20771,7 +20423,7 @@ packages:
       - whiskers
     dev: true
 
-  /vite@4.5.0(@types/node@18.19.3)(sass@1.70.0):
+  /vite@4.5.0(@types/node@18.19.0)(sass@1.70.0):
     resolution:
       {
         integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==
@@ -20802,9 +20454,9 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.19.3
+      '@types/node': 18.19.0
       esbuild: 0.18.20
-      postcss: 8.4.27
+      postcss: 8.4.40
       rollup: 3.29.4
       sass: 1.70.0
     optionalDependencies:
@@ -20817,10 +20469,9 @@ packages:
         integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
       }
     engines: { node: '>=0.10.0' }
-    requiresBuild: true
     dev: true
 
-  /vue-class-component@7.2.6(vue@2.7.14):
+  /vue-class-component@7.2.6(vue@2.7.16):
     resolution:
       {
         integrity: sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
@@ -20828,30 +20479,20 @@ packages:
     peerDependencies:
       vue: ^2.0.0
     dependencies:
-      vue: 2.7.14
+      vue: 2.7.16
+    dev: true
 
-  /vue-demi@0.14.6(vue@2.7.14):
+  /vue-component-type-helpers@2.0.29:
     resolution:
       {
-        integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+        integrity: sha512-58i+ZhUAUpwQ+9h5Hck0D+jr1qbYl4voRt5KffBx8qzELViQ4XdT/Tuo+mzq8u63teAG8K0lLaOiL5ofqW38rg==
       }
-    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: 2.7.14
-    dev: false
+    dev: true
 
-  /vue-demi@0.14.6(vue@3.4.22):
+  /vue-demi@0.14.10(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+        integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
       }
     engines: { node: '>=12' }
     hasBin: true
@@ -20863,45 +20504,47 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.22(typescript@4.9.4)
+      vue: 3.4.31(typescript@4.9.4)
     dev: false
 
-  /vue-docgen-api@4.73.1(vue@2.7.14):
+  /vue-docgen-api@4.79.2(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-hlrUhRMm/4oD4nwuwVNKmuC9qExUIxVkXHT7vApkXkGuep1HGpZ168Msq4Ooc1euoFTGafte4Qs2e9uZWZuE/g==
+        integrity: sha512-n9ENAcs+40awPZMsas7STqjkZiVlIjxIKgiJr5rSohDP0/JCrD9VtlzNojafsA1MChm/hz2h3PDtUedx3lbgfA==
       }
+    peerDependencies:
+      vue: '>=2'
     dependencies:
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
-      '@vue/compiler-dom': 3.4.21
-      '@vue/compiler-sfc': 3.4.21
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+      '@vue/compiler-dom': 3.4.35
+      '@vue/compiler-sfc': 3.4.35
       ast-types: 0.16.1
+      esm-resolve: 1.0.11
       hash-sum: 2.0.0
       lru-cache: 8.0.5
-      pug: 3.0.2
-      recast: 0.23.3
+      pug: 3.0.3
+      recast: 0.23.9
       ts-map: 1.0.3
-      vue-inbrowser-compiler-independent-utils: 4.71.1(vue@2.7.14)
-    transitivePeerDependencies:
-      - vue
+      vue: 3.4.31(typescript@4.9.4)
+      vue-inbrowser-compiler-independent-utils: 4.71.1(vue@3.4.31)
     dev: true
 
-  /vue-docgen-cli@4.67.0(vue@2.7.14):
+  /vue-docgen-cli@4.79.0(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-+61rC7H7zd5NWydAkKCuwW6TnStEJbgxsHk5i4Nb3S8eReuAge35SJ1gvEm6ILj3lUztJzKolpevAfL42OHySw==
+        integrity: sha512-ye4/HAy1i/ULWpvLC+k7FGr7QiXyCPyduFoWAaXeMgmhxAu5H3jPSLQwf6MQwOWlMw4phRQnMlGfyHH1/NjsrQ==
       }
     engines: { node: '>=16.3', npm: '>=7' }
     hasBin: true
     dependencies:
       cac: 6.7.14
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       globby: 11.1.0
       lodash.memoize: 4.1.2
-      loglevel: 1.8.1
+      loglevel: 1.9.1
       prettier: 2.8.8
-      vue-docgen-api: 4.73.1(vue@2.7.14)
+      vue-docgen-api: 4.79.2(vue@3.4.31)
     transitivePeerDependencies:
       - vue
     dev: true
@@ -20915,14 +20558,14 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.32.0
-      eslint-scope: 7.2.1
-      eslint-visitor-keys: 3.4.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       lodash: 4.17.21
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -20936,79 +20579,88 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.33.0
-      eslint-scope: 7.2.1
-      eslint-visitor-keys: 3.4.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       lodash: 4.17.21
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vue-eslint-parser@9.3.1(eslint@8.32.0):
+  /vue-eslint-parser@9.4.3(eslint@8.32.0):
     resolution:
       {
-        integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==
+        integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
       }
     engines: { node: ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.32.0
-      eslint-scope: 7.2.1
-      eslint-visitor-keys: 3.4.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       lodash: 4.17.21
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /vue-eslint-parser@9.3.1(eslint@8.33.0):
+  /vue-eslint-parser@9.4.3(eslint@8.33.0):
     resolution:
       {
-        integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==
+        integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
       }
     engines: { node: ^14.17.0 || >=16.0.0 }
     peerDependencies:
       eslint: '>=6.0.0'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.6(supports-color@8.1.1)
       eslint: 8.33.0
-      eslint-scope: 7.2.1
-      eslint-visitor-keys: 3.4.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       lodash: 4.17.21
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vue-global-events@1.2.1:
+  /vue-global-events@3.0.1(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-035Su/+5GUFnj9potJThJXu9DnayRKSENbuBw5k5sMa6hetiY+6Yu+5zUtPXT4X0S9y8tX7uSxGZJMMYiqhFfg==
+        integrity: sha512-9S7S3bG0XDBnpm2DJSSjpx6xIX/YIleycpnvmRRYSdiMltnzRfJQ8uVB3QX5eCLkmiv/Udg9UjO2wwpTO5LDvQ==
       }
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      pkg-types: 1.1.3
+      vue: 3.4.31(typescript@4.9.4)
     dev: false
 
-  /vue-i18n@8.28.2(vue@2.7.14):
+  /vue-i18n@9.14.0(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==
+        integrity: sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==
       }
+    engines: { node: '>= 16' }
     peerDependencies:
-      vue: ^2
+      vue: ^3.0.0
     dependencies:
-      vue: 2.7.14
+      '@intlify/core-base': 9.14.0
+      '@intlify/shared': 9.14.0
+      '@vue/devtools-api': 6.5.1
+      vue: 3.4.31(typescript@4.9.4)
     dev: false
 
-  /vue-inbrowser-compiler-independent-utils@4.71.1(vue@2.7.14):
+  /vue-inbrowser-compiler-independent-utils@4.71.1(vue@3.4.31):
     resolution:
       {
         integrity: sha512-K3wt3iVmNGaFEOUR4JIThQRWfqokxLfnPslD41FDZB2ajXp789+wCqJyGYlIFsvEQ2P61PInw6/ph5iiqg51gg==
@@ -21016,10 +20668,10 @@ packages:
     peerDependencies:
       vue: '>=2'
     dependencies:
-      vue: 2.7.14
+      vue: 3.4.31(typescript@4.9.4)
     dev: true
 
-  /vue-property-decorator@8.5.0(vue-class-component@7.2.6)(vue@2.7.14):
+  /vue-property-decorator@8.5.0(vue-class-component@7.2.6)(vue@2.7.16):
     resolution:
       {
         integrity: sha512-0RueJN/shPWf5gM8GLUD6bYiXr+q7bu+S1tgr7XwgBSng10H5DLQjVYfJ5XHAOPFo7fBfY1nxljBQ95qryAiWg==
@@ -21028,39 +20680,29 @@ packages:
       vue: '*'
       vue-class-component: '*'
     dependencies:
-      vue: 2.7.14
-      vue-class-component: 7.2.6(vue@2.7.14)
-
-  /vue-router@3.6.5(vue@2.7.14):
-    resolution:
-      {
-        integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
-      }
-    peerDependencies:
-      vue: ^2
-    dependencies:
-      vue: 2.7.14
+      vue: 2.7.16
+      vue-class-component: 7.2.6(vue@2.7.16)
     dev: true
 
-  /vue-router@4.3.0(vue@3.4.22):
+  /vue-router@4.4.0(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==
+        integrity: sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==
       }
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.22(typescript@4.9.4)
-    dev: false
+      vue: 3.4.31(typescript@4.9.4)
 
   /vue-runtime-helpers@1.1.2:
     resolution:
       {
         integrity: sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q==
       }
+    dev: true
 
-  /vue-template-babel-compiler@1.2.0(vue-template-compiler@2.7.14):
+  /vue-template-babel-compiler@1.2.0(vue-template-compiler@2.7.16):
     resolution:
       {
         integrity: sha512-CScBSX1/wCdmmZ/Lvj/63p2CCVTS0FMj0F69VRBo73CuJrjvPAPGmeNJ7D/cwt/VS2PduowRWbO8N4Zh4Z3b0g==
@@ -21069,47 +20711,47 @@ packages:
     peerDependencies:
       vue-template-compiler: ^2.6.0
     dependencies:
-      '@babel/core': 7.23.3
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.23.3)
-      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.23.3)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.23.3)
-      '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.23.3)
-      '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.23.3)
-      '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.23.3)
-      '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.23.3)
-      '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.23.3)
-      '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.23.3)
-      '@babel/types': 7.23.3
+      '@babel/core': 7.25.2
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.25.2)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.25.2)
+      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-arrow-functions': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-block-scoping': 7.25.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-computed-properties': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-destructuring': 7.24.8(@babel/core@7.25.2)
+      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-spread': 7.24.7(@babel/core@7.25.2)
+      '@babel/types': 7.25.2
       deepmerge: 4.3.1
-      vue-template-compiler: 2.7.14(vue@2.7.14)
+      vue-template-compiler: 2.7.16(vue@2.7.16)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vue-template-compiler@2.7.14(vue@2.7.14):
+  /vue-template-compiler@2.7.16(vue@2.7.16):
     resolution:
       {
-        integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
+        integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
       }
     peerDependencies:
       vue: ~2.7.14
     dependencies:
       de-indent: 1.0.2
       he: 1.2.0
-      vue: 2.7.14
+      vue: 2.7.16
     dev: true
 
-  /vue-template-compiler@2.7.14(vue@3.4.22):
+  /vue-template-compiler@2.7.16(vue@3.4.31):
     resolution:
       {
-        integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
+        integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
       }
     peerDependencies:
       vue: ~2.7.14
     dependencies:
       de-indent: 1.0.2
       he: 1.2.0
-      vue: 3.4.22(typescript@4.9.4)
+      vue: 3.4.31(typescript@4.9.4)
     dev: true
 
   /vue-template-es2015-compiler@1.9.1:
@@ -21119,7 +20761,7 @@ packages:
       }
     dev: true
 
-  /vue-tsc@2.0.13(typescript@4.9.4)(vue@3.4.22):
+  /vue-tsc@2.0.13(typescript@4.9.4)(vue@3.4.31):
     resolution:
       {
         integrity: sha512-a3nL3FvguCWVJUQW/jFrUxdeUtiEkbZoQjidqvMeBK//tuE2w6NWQAbdrEpY2+6nSa4kZoKZp8TZUMtHpjt4mQ==
@@ -21129,8 +20771,8 @@ packages:
       typescript: '*'
     dependencies:
       '@volar/typescript': 2.2.0-alpha.8
-      '@vue/language-core': 2.0.13(typescript@4.9.4)(vue@3.4.22)
-      semver: 7.5.4
+      '@vue/language-core': 2.0.13(typescript@4.9.4)(vue@3.4.31)
+      semver: 7.6.3
       typescript: 4.9.4
     transitivePeerDependencies:
       - vue
@@ -21141,40 +20783,46 @@ packages:
       {
         integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
       }
+    deprecated:
+      Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for
+      more details.
     dependencies:
       '@vue/compiler-sfc': 2.7.14
-      csstype: 3.1.2
+      csstype: 3.1.3
+    dev: true
 
-  /vue@3.4.22(typescript@4.9.4):
+  /vue@2.7.16:
     resolution:
       {
-        integrity: sha512-CIx7NiP+n5WHBCG/fDNaUPP4qbQ5CIa8XIHZE3HpfS/rb2vmSIsp74BxsZyrrGKF0vHW3GoToqP3l0hzrMTecw==
+        integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
       }
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+    deprecated:
+      Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for
+      more details.
     dependencies:
-      '@vue/compiler-dom': 3.4.22
-      '@vue/compiler-sfc': 3.4.22
-      '@vue/runtime-dom': 3.4.22
-      '@vue/server-renderer': 3.4.22(vue@3.4.22)
-      '@vue/shared': 3.4.22
-      typescript: 4.9.4
+      '@vue/compiler-sfc': 2.7.16
+      csstype: 3.1.3
+    dev: true
 
-  /vuex@3.6.2(vue@2.7.14):
+  /vue@3.4.31(typescript@4.9.4):
     resolution:
       {
-        integrity: sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+        integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==
       }
     peerDependencies:
-      vue: ^2.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
     dependencies:
-      vue: 2.7.14
-    dev: true
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-sfc': 3.4.31
+      '@vue/runtime-dom': 3.4.31
+      '@vue/server-renderer': 3.4.31(vue@3.4.31)
+      '@vue/shared': 3.4.31
+      typescript: 4.9.4
 
-  /vuex@4.0.2(vue@3.4.22):
+  /vuex@4.0.2(vue@3.4.31):
     resolution:
       {
         integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
@@ -21182,9 +20830,8 @@ packages:
     peerDependencies:
       vue: ^3.0.2
     dependencies:
-      '@vue/devtools-api': 6.5.1
-      vue: 3.4.22(typescript@4.9.4)
-    dev: false
+      '@vue/devtools-api': 6.5.0
+      vue: 3.4.31(typescript@4.9.4)
 
   /w3c-hr-time@1.0.2:
     resolution:
@@ -21215,10 +20862,10 @@ packages:
     hasBin: true
     dependencies:
       axios: 0.27.2(debug@4.3.4)
-      joi: 17.9.2
+      joi: 17.13.3
       lodash: 4.17.21
       minimist: 1.2.8
-      rxjs: 7.8.0
+      rxjs: 7.8.1
     transitivePeerDependencies:
       - debug
     dev: true
@@ -21321,18 +20968,18 @@ packages:
       is-string: 1.0.7
       is-symbol: 1.0.4
 
-  /which-typed-array@1.1.11:
+  /which-typed-array@1.1.15:
     resolution:
       {
-        integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==
+        integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
       }
     engines: { node: '>= 0.4' }
     dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.7
       for-each: 0.3.3
       gopd: 1.0.1
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
 
   /which@2.0.2:
     resolution:
@@ -21370,14 +21017,20 @@ packages:
         integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==
       }
     engines: { node: '>= 10.0.0' }
-    requiresBuild: true
     dependencies:
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
-      assert-never: 1.2.1
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+      assert-never: 1.3.0
       babel-walk: 3.0.0-canary-5
     dev: true
 
+  /word-wrap@1.2.5:
+    resolution:
+      {
+        integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+      }
+    engines: { node: '>=0.10.0' }
+
   /wordwrap@1.0.0:
     resolution:
       {
@@ -21385,10 +21038,10 @@ packages:
       }
     dev: true
 
-  /workerpool@6.2.1:
+  /workerpool@6.5.1:
     resolution:
       {
-        integrity: sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
+        integrity: sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
       }
     dev: true
 
@@ -21476,7 +21129,7 @@ packages:
     engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
     dependencies:
       imurmurhash: 0.1.4
-      signal-exit: 4.0.2
+      signal-exit: 4.1.0
     dev: true
 
   /write-json-file@3.2.0:
@@ -21506,10 +21159,10 @@ packages:
       write-json-file: 3.2.0
     dev: true
 
-  /ws@7.5.9:
+  /ws@7.5.10:
     resolution:
       {
-        integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+        integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
       }
     engines: { node: '>=8.3.0' }
     peerDependencies:
@@ -21579,6 +21232,7 @@ packages:
       {
         integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
       }
+    dev: true
 
   /yaml@1.10.2:
     resolution:
@@ -21596,12 +21250,13 @@ packages:
     engines: { node: '>= 14' }
     dev: true
 
-  /yaml@2.3.4:
+  /yaml@2.5.0:
     resolution:
       {
-        integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==
+        integrity: sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==
       }
     engines: { node: '>= 14' }
+    hasBin: true
     dev: true
 
   /yargs-parser@20.2.4:
@@ -21649,7 +21304,7 @@ packages:
     engines: { node: '>=10' }
     dependencies:
       cliui: 7.0.4
-      escalade: 3.1.1
+      escalade: 3.1.2
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
@@ -21665,7 +21320,7 @@ packages:
     engines: { node: '>=12' }
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.1
+      escalade: 3.1.2
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
@@ -21704,7 +21359,7 @@ packages:
         integrity: sha512-PPqYKSAXjpRCgLgLKVGPA33v5c/WgEx3wi6NFjIiegz90zSwyMpvTFp/uGcVnnbx6to28pgnzp/q8ih3QRjLMQ==
       }
     dependencies:
-      property-expr: 2.0.5
+      property-expr: 2.0.6
       tiny-case: 1.0.3
       toposort: 2.0.2
       type-fest: 2.19.0
@@ -21720,7 +21375,7 @@ packages:
     dependencies:
       lodash.get: 4.4.2
       lodash.isequal: 4.5.0
-      validator: 13.9.0
+      validator: 13.12.0
     optionalDependencies:
       commander: 9.5.0
     dev: true