diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 60e75eebc3..c581047070 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -130,7 +130,7 @@
     "vue": "~3.4.31",
     "vue-docgen-cli": "~4.79.0",
     "vue-router": "~4.4.0",
-    "vuex": "~4.1.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 10a34c358a..fa3cf7c41e 100644
--- a/packages/x-components/src/App.vue
+++ b/packages/x-components/src/App.vue
@@ -13,7 +13,6 @@
 <script setup>
   import { useRouter } from 'vue-router';
   const $router = useRouter();
-  console.log($router);
 </script>
 
 <style lang="scss">
diff --git a/packages/x-components/src/components/animations/animate-width.vue b/packages/x-components/src/components/animations/animate-width.vue
index 835d43604c..778dee36c0 100644
--- a/packages/x-components/src/components/animations/animate-width.vue
+++ b/packages/x-components/src/components/animations/animate-width.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-animate-width-">
+  <transition v-bind="$attrs" name="x-animate-width-">
     <!-- @slot (Required) Transition content -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue
index 7c512b4871..c459374f95 100644
--- a/packages/x-components/src/components/animations/collapse-height.vue
+++ b/packages/x-components/src/components/animations/collapse-height.vue
@@ -2,7 +2,6 @@
   <!-- eslint-disable vue/attributes-order -->
   <transition
     v-bind="$attrs"
-    v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
diff --git a/packages/x-components/src/components/animations/collapse-width.vue b/packages/x-components/src/components/animations/collapse-width.vue
index ca59254b75..8ed8c0b580 100644
--- a/packages/x-components/src/components/animations/collapse-width.vue
+++ b/packages/x-components/src/components/animations/collapse-width.vue
@@ -2,7 +2,6 @@
   <!-- eslint-disable vue/attributes-order -->
   <transition
     v-bind="$attrs"
-    v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
index f61f14c711..0fb08f6774 100644
--- a/packages/x-components/src/components/animations/cross-fade.vue
+++ b/packages/x-components/src/components/animations/cross-fade.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
+  <transition v-bind="$attrs" name="x-cross-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
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..1bb7a97249 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -2,7 +2,6 @@
   <!-- eslint-disable vue/attributes-order -->
   <transition-group
     v-bind="$attrs"
-    v-on="$listeners"
     class="x-fade-and-slide"
     :name="name"
     :tag="tag"
diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
index a1bc38bb99..66bb7d2af1 100644
--- a/packages/x-components/src/components/animations/fade.vue
+++ b/packages/x-components/src/components/animations/fade.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-fade-" :appear="appear">
+  <transition v-bind="$attrs" name="x-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
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..beedd06cc3 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
@@ -2,7 +2,6 @@
   <!-- eslint-disable vue/attributes-order -->
   <StaggeringTransitionGroup
     v-bind="$attrs"
-    v-on="$listeners"
     class="x-staggered-fade-and-slide"
     :name="name"
     :appear="appear"
diff --git a/packages/x-components/src/components/base-event-button.vue b/packages/x-components/src/components/base-event-button.vue
index 37c295d034..41dfe9259d 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" v-bind="$attrs" @click="emitEvents" data-test="event-button">
     <!-- @slot (Required) Button content with a text, an icon or both -->
     <slot />
   </button>
@@ -20,6 +20,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     name: 'BaseEventButton',
     props: {
       /** An object where the keys are the {@link XEvent} and the values are the payload. */
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 1d4a096948..7d68e12477 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -229,11 +229,14 @@
        *
        * @internal
        */
-      const resizeObserver = useResizeObserver(
-        gridEl as MaybeComputedElementRef,
-        updateRenderedColumnsNumber
-      );
-      onBeforeUnmount(() => resizeObserver.stop());
+      let resizeObserver: any;
+      if (gridEl.value) {
+        resizeObserver = useResizeObserver(
+          gridEl as MaybeComputedElementRef,
+          updateRenderedColumnsNumber
+        );
+      }
+      onBeforeUnmount(() => resizeObserver?.stop());
 
       return {
         gridItems,
diff --git a/packages/x-components/src/components/global-x-bus.vue b/packages/x-components/src/components/global-x-bus.vue
index 240c03dbaf..f85e3b7d60 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,22 +12,25 @@
    */
   export default defineComponent({
     name: 'GlobalXBus',
-    inheritAttrs: false,
-    setup(_, { attrs, 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.
        */
-      console.log(attrs);
-      Object.entries(attrs.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>
diff --git a/packages/x-components/src/components/highlight.vue b/packages/x-components/src/components/highlight.vue
index bcf0965523..bdbebb8b7a 100644
--- a/packages/x-components/src/components/highlight.vue
+++ b/packages/x-components/src/components/highlight.vue
@@ -1,36 +1,33 @@
 <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>
+  <slot v-bind="{ text, hasMatch, ...matchParts, ...$attrs }" >
+    <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>
 </template>
 
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
   import { normalizeString } from '../utils/normalize';
   import { VueCSSClasses } from '../utils/types';
-  import { NoElement } from './no-element';
 
   /**
    * Highlights the given part of the text. The component is smart enough to do matches
@@ -39,8 +36,8 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     name: 'Highlight',
-    components: { NoElement },
     props: {
       /**
        * The text to highlight some part of it.
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..e156454689 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: '100%' }"
   >
     <header class="x-layout__header">
-      <div v-if="hasContent('header-start')" class="x-list x-layout__header-start">
+      <div 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 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 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 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,7 @@
       </div>
     </div>
 
-    <section v-if="hasContent('toolbar-aside', 'toolbar-body')" class="x-layout__toolbar">
+    <section 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 +54,6 @@
 
     <main class="x-layout__main">
       <BaseIdTogglePanel
-        v-if="hasContent('main-aside')"
         panelId="aside-panel"
         :animation="asideAnimation"
         class="x-layout__collapse-aside"
@@ -70,7 +69,7 @@
       </BaseIdTogglePanel>
 
       <MainScroll class="x-flex x-flex-auto">
-        <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
+        <Scroll 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 +80,7 @@
       </MainScroll>
     </main>
 
-    <div v-if="hasContent('scroll-to-top')" class="x-layout__scroll-to-top">
+    <div 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>
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..d0adf47ed4 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,6 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
+    v-bind="$attrs"
     :events="events"
     class="x-events-modal-close-button x-button"
     data-test="close-modal"
@@ -24,6 +24,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     components: {
       BaseEventButton
     },
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..6f58736248 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,6 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
+    v-bind="$attrs"
     :events="events"
     class="x-events-modal-open-button x-button"
     data-test="open-modal"
@@ -24,6 +24,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     components: {
       BaseEventButton
     },
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 9850fce2f9..4f96ff3664 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,21 +1,19 @@
 <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>
+  <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>
 </template>
 
 <script lang="ts">
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..0ab74ac687 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,21 +1,19 @@
 <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>
+  <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>
 </template>
 
 <script lang="ts">
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..a2a3b0f22e 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,6 @@
 <template>
   <BaseEventsModalClose
-    v-on="$listeners"
+    v-bind="$attrs"
     class="x-close-main-modal"
     data-test="close-main-modal"
     :closingEvent="closingEvent"
@@ -20,6 +20,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     components: {
       BaseEventsModalClose
     },
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..172cc27a02 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,6 @@
 <template>
   <BaseEventsModalOpen
-    v-on="$listeners"
+    v-bind="$attrs"
     class="x-open-main-modal"
     data-test="open-main-modal"
     :openingEvent="openingEvent"
@@ -20,6 +20,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     components: {
       BaseEventsModalOpen
     },
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..bff483bd3e 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,6 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
+    v-bind="$attrs"
     :events="events"
     class="x-base-id-toggle-panel-button x-button"
     data-test="base-id-toggle-button"
@@ -28,6 +28,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     name: 'BaseIdTogglePanelButton',
     components: { BaseEventButton },
     props: {
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..94ab5c50ee 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,6 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
+    v-bind="$attrs"
     :events="events"
     class="x-result-add-to-cart x-button"
     data-test="result-add-to-cart"
@@ -23,6 +23,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     components: { BaseEventButton },
     props: {
       /**
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..f9c7214268 100644
--- a/packages/x-components/src/components/result/base-result-image.vue
+++ b/packages/x-components/src/components/result/base-result-image.vue
@@ -41,7 +41,16 @@
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
-  import { computed, DefineComponent, defineComponent, PropType, Ref, ref, watch } from 'vue';
+  import {
+    computed,
+    DefineComponent,
+    defineComponent,
+    markRaw,
+    PropType,
+    Ref,
+    ref,
+    watch
+  } from 'vue';
   import { NoElement } from '../no-element';
   import { animationProp } from '../../utils/options-api';
 
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..dccf2782c9 100644
--- a/packages/x-components/src/components/result/result-variant-selector.vue
+++ b/packages/x-components/src/components/result/result-variant-selector.vue
@@ -1,51 +1,54 @@
 <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"
-        >
-          <!--
+  <slot
+    v-if="result && variants"
+    :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"
+      >
+        <!--
             @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
+          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>
-        </li>
-      </ul>
-    </slot>
-  </NoElement>
+            <slot
+              name="variant-content"
+              :variant="variant"
+              :isSelected="variantIsSelected(variant)"
+            >
+              {{ variant }}
+            </slot>
+          </button>
+        </slot>
+      </li>
+    </ul>
+  </slot>
 </template>
 
 <script lang="ts">
diff --git a/packages/x-components/src/components/snippet-callbacks.vue b/packages/x-components/src/components/snippet-callbacks.vue
index 8f8432f816..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" class="x-w-full"/>
+  <GlobalXBus :listeners="eventListeners" />
 </template>
 
 <script lang="ts">
diff --git a/packages/x-components/src/components/suggestions/base-suggestion.vue b/packages/x-components/src/components/suggestions/base-suggestion.vue
index f0f6a8437f..1ae98c900d 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" v-bind="$attrs" :class="dynamicCSSClasses">
     <!--
       @slot Button content
           @binding {Suggestion} suggestion - Suggestion data
@@ -33,6 +33,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     components: { Highlight },
     props: {
       /**
diff --git a/packages/x-components/src/composables/use-alias-api.ts b/packages/x-components/src/composables/use-alias-api.ts
index a506efc879..9d15de0a9e 100644
--- a/packages/x-components/src/composables/use-alias-api.ts
+++ b/packages/x-components/src/composables/use-alias-api.ts
@@ -47,7 +47,7 @@ export function useAliasApi(): UseAliasAPI {
   const query = queryModules.reduce((acc, moduleName) => {
     return Object.defineProperty(acc, moduleName, {
       get(): string {
-        return store.state.x[moduleName]?.query ?? '';
+        return store?.state.x[moduleName]?.query ?? '';
       },
       enumerable: true
     });
@@ -66,91 +66,91 @@ export function useAliasApi(): UseAliasAPI {
     query,
     status,
     get device() {
-      return store.state.x.device?.name ?? null;
+      return store?.state.x.device?.name ?? null;
     },
     get facets() {
-      return store.getters[getGetterPath('facets', 'facets')] ?? {};
+      return store?.getters[getGetterPath('facets', 'facets')] ?? {};
     },
     get historyQueries() {
-      return store.getters[getGetterPath('historyQueries', 'historyQueries')] ?? [];
+      return store?.getters[getGetterPath('historyQueries', 'historyQueries')] ?? [];
     },
     get historyQueriesWithResults() {
-      return store.getters[getGetterPath('historyQueries', 'historyQueriesWithResults')] ?? [];
+      return store?.getters[getGetterPath('historyQueries', 'historyQueriesWithResults')] ?? [];
     },
     get fullHistoryQueries() {
-      return store.state.x.historyQueries?.historyQueries ?? [];
+      return store?.state.x.historyQueries?.historyQueries ?? [];
     },
     get isHistoryQueriesEnabled() {
-      return store.state.x.historyQueries?.isEnabled ?? false;
+      return store?.state.x.historyQueries?.isEnabled ?? false;
     },
     get fromNoResultsWithFilters() {
-      return store.state.x.search?.fromNoResultsWithFilters ?? false;
+      return store?.state.x.search?.fromNoResultsWithFilters ?? false;
     },
     get identifierResults() {
-      return store.state.x.identifierResults?.identifierResults ?? [];
+      return store?.state.x.identifierResults?.identifierResults ?? [];
     },
     get searchBoxStatus() {
-      return store.state.x.searchBox?.inputStatus ?? undefined;
+      return store?.state.x.searchBox?.inputStatus ?? undefined;
     },
     get isEmpathizeOpen() {
-      return store.state.x.empathize?.isOpen ?? false;
+      return store?.state.x.empathize?.isOpen ?? false;
     },
     get nextQueries() {
-      return store.getters[getGetterPath('nextQueries', 'nextQueries')] ?? [];
+      return store?.getters[getGetterPath('nextQueries', 'nextQueries')] ?? [];
     },
     get noResults() {
-      return store.state.x.search?.isNoResults ?? false;
+      return store?.state.x.search?.isNoResults ?? false;
     },
     get partialResults() {
-      return store.state.x.search?.partialResults ?? [];
+      return store?.state.x.search?.partialResults ?? [];
     },
     get popularSearches() {
-      return store.state.x.popularSearches?.popularSearches ?? [];
+      return store?.state.x.popularSearches?.popularSearches ?? [];
     },
     get querySuggestions() {
-      return store.getters[getGetterPath('querySuggestions', 'querySuggestions')] ?? [];
+      return store?.getters[getGetterPath('querySuggestions', 'querySuggestions')] ?? [];
     },
     get fullQuerySuggestions() {
-      return store.state.x.querySuggestions?.suggestions ?? [];
+      return store?.state.x.querySuggestions?.suggestions ?? [];
     },
     get recommendations() {
-      return store.state.x.recommendations?.recommendations ?? [];
+      return store?.state.x.recommendations?.recommendations ?? [];
     },
     get redirections() {
-      return store.state.x.search?.redirections ?? [];
+      return store?.state.x.search?.redirections ?? [];
     },
     get relatedTags() {
-      return store.getters[getGetterPath('relatedTags', 'relatedTags')] ?? [];
+      return store?.getters[getGetterPath('relatedTags', 'relatedTags')] ?? [];
     },
     get results() {
-      return store.state.x.search?.results ?? [];
+      return store?.state.x.search?.results ?? [];
     },
     get scroll() {
-      return store.state.x.scroll?.data ?? {};
+      return store?.state.x.scroll?.data ?? {};
     },
     get selectedFilters() {
-      return store.getters[getGetterPath('facets', 'selectedFilters')] ?? [];
+      return store?.getters[getGetterPath('facets', 'selectedFilters')] ?? [];
     },
     get selectedRelatedTags() {
-      return store.state.x.relatedTags?.selectedRelatedTags ?? [];
+      return store?.state.x.relatedTags?.selectedRelatedTags ?? [];
     },
     get semanticQueries() {
-      return store.state.x.semanticQueries?.semanticQueries ?? [];
+      return store?.state.x.semanticQueries?.semanticQueries ?? [];
     },
     get spellcheckedQuery() {
-      return store.state.x.search?.spellcheckedQuery ?? null;
+      return store?.state.x.search?.spellcheckedQuery ?? null;
     },
     get totalResults() {
-      return store.state.x.search?.totalResults ?? 0;
+      return store?.state.x.search?.totalResults ?? 0;
     },
     get selectedSort() {
-      return store.state.x.search?.sort ?? '';
+      return store?.state.x.search?.sort ?? '';
     }
   };
 }
 
 /**
- * Alias to facilitate retrieving values from the store.
+ * Alias to facilitate retrieving values from the store?.
  *
  * @public
  */
diff --git a/packages/x-components/src/composables/use-no-element-render.ts b/packages/x-components/src/composables/use-no-element-render.ts
index 04c418d3df..893f3bc51e 100644
--- a/packages/x-components/src/composables/use-no-element-render.ts
+++ b/packages/x-components/src/composables/use-no-element-render.ts
@@ -14,5 +14,5 @@ export function useNoElementRender(
 ): VNode | VNode[] {
   const defaultSlotContent = typeof slots.default === 'function' ? slots.default() : slots.default;
 
-  return defaultSlotContent ?? h();
+  return defaultSlotContent ?? h([]);
 }
diff --git a/packages/x-components/src/plugins/x-plugin.ts b/packages/x-components/src/plugins/x-plugin.ts
index 26041a2dd5..867795cfa2 100644
--- a/packages/x-components/src/plugins/x-plugin.ts
+++ b/packages/x-components/src/plugins/x-plugin.ts
@@ -1,6 +1,6 @@
 import { deepMerge } from '@empathyco/x-deep-merge';
 import { forEach, Dictionary } from '@empathyco/x-utils';
-import { PluginObject, VueConstructor } from 'vue';
+import { App, PluginObject, VueConstructor } from 'vue';
 import Vuex, { createStore, Module, Store } from 'vuex';
 import { XComponentsAdapter } from '@empathyco/x-types';
 import { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';
@@ -207,7 +207,7 @@ export class XPlugin implements PluginObject<XPluginOptions> {
    *
    * @internal
    */
-  install(vue: VueConstructor, options?: XPluginOptions): void {
+  install(vue: App, options?: XPluginOptions): void {
     if (this.isInstalled) {
       throw new Error('XPlugin has already been installed');
     }
@@ -356,7 +356,7 @@ 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
+    // 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 ??
@@ -366,6 +366,7 @@ export class XPlugin implements PluginObject<XPluginOptions> {
     // if (!this.options.store) {
     //   this.vue.prototype.$store = this.store;
     // }
+    this.vue.use(this.store);
     this.store.registerModule('x', RootXStoreModule);
   }
 
@@ -375,7 +376,7 @@ export class XPlugin implements PluginObject<XPluginOptions> {
    * @internal
    */
   protected applyMixins(): void {
-    this.vue.mixin(createXComponentAPIMixin(this.bus));
+    // this.vue.mixin(createXComponentAPIMixin(this.bus));
   }
 
   /**
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 8737328e43..afcdd8b475 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -99,7 +99,7 @@
         </label>
       </li>
     </ul>
-    <MainModal :animation="modalAnimation">
+    <MainModal>
       <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">
@@ -131,7 +131,7 @@
               </template>
             </Spellcheck>
 
-            <SlidingPanel v-if="$x.relatedTags.length">
+            <SlidingPanel v-if="aliasApi.relatedTags.length">
               <template #sliding-panel-left-button>
                 <ChevronLeft />
               </template>
@@ -155,7 +155,7 @@
 
         <template #toolbar-aside>
           <BaseIdTogglePanelButton
-            v-if="$x.totalResults > 0"
+            v-if="aliasApi.totalResults > 0"
             class="x-button--ghost x-button"
             panelId="aside-panel"
           >
@@ -164,8 +164,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="aliasApi.totalResults > 0" class="x-flex x-items-center x-gap-12">
+            <span class="x-text1">{{ aliasApi.totalResults }} Results</span>
             <BaseColumnPickerList
               @update:modelValue="col => (selectedColumns = col)"
               :modelValue="selectedColumns"
@@ -204,7 +204,7 @@
         </template>
 
         <template #main-aside>
-          <Aside v-if="$x.totalResults > 0" />
+          <Aside v-if="aliasApi.totalResults > 0" />
         </template>
 
         <template #main-body>
@@ -229,23 +229,23 @@
             <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
           </Redirection>
 
-          <template v-if="!$x.redirections.length">
+          <template v-if="!aliasApi.redirections.length">
             <FallbackDisclaimer class="x-message" />
 
             <!--  No Results Message  -->
             <div
-              v-if="$x.noResults && !$x.fromNoResultsWithFilters"
+              v-if="aliasApi.noResults && !aliasApi.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">{{ aliasApi.query.search }}</span>
               </p>
               <p>You may be interested in these:</p>
             </div>
 
-            <template v-if="!$x.query.searchBox">
+            <template v-if="!aliasApi.query.searchBox">
               <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
               <LocationProvider location="no_results">
                 <QueryPreviewList
@@ -262,38 +262,38 @@
                   data-test="brand-recommendations-list"
                   :persistInCache="true"
                 >
-                  <DisplayEmitter
-                    :payload="displayTagging"
-                    :eventMetadata="{ feature: 'customer' }"
-                  >
-                    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-                      <QueryPreviewButton
-                        class="x-w-fit x-button-xl x-button-ghost"
-                        :queryPreviewInfo="queryPreviewInfo"
-                      >
-                        {{ `${queryPreviewInfo.query} (${totalResults})` }}
-                      </QueryPreviewButton>
-                      <DisplayResultProvider :queryTagging="queryTagging">
-                        <SlidingPanel :resetOnContentChange="false">
-                          <div class="x-flex x-gap-8">
-                            <Result
-                              v-for="result in results"
-                              :key="result.id"
-                              :result="result"
-                              style="max-width: 180px"
-                            />
-                          </div>
-                        </SlidingPanel>
-                      </DisplayResultProvider>
-                    </div>
-                  </DisplayEmitter>
+                  <!--                  <DisplayEmitter-->
+                  <!--                    :payload="displayTagging"-->
+                  <!--                    :eventMetadata="{ feature: 'customer' }"-->
+                  <!--                  >-->
+                  <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                    <QueryPreviewButton
+                      class="x-w-fit x-button-xl x-button-ghost"
+                      :queryPreviewInfo="queryPreviewInfo"
+                    >
+                      {{ `${queryPreviewInfo.query} (${totalResults})` }}
+                    </QueryPreviewButton>
+                    <DisplayResultProvider :queryTagging="queryTagging">
+                      <SlidingPanel :resetOnContentChange="false">
+                        <div class="x-flex x-gap-8">
+                          <Result
+                            v-for="result in results"
+                            :key="result.id"
+                            :result="result"
+                            style="max-width: 180px"
+                          />
+                        </div>
+                      </SlidingPanel>
+                    </DisplayResultProvider>
+                  </div>
+                  <!--                  </DisplayEmitter>-->
                 </QueryPreviewList>
               </LocationProvider>
             </template>
 
             <!-- Results -->
             <LocationProvider location="results">
-              <ResultsList v-infinite-scroll:main-scroll>
+              <ResultsList>
                 <PromotedsList>
                   <BannersList>
                     <NextQueriesList
@@ -302,8 +302,7 @@
                       <BaseVariableColumnGrid
                         style="--x-size-min-width-grid-item: 150px"
                         class="x-gap-12"
-                        :animation="resultsAnimation"
-                        :columns="$x.device === 'mobile' ? 2 : 4"
+                        :columns="aliasApi.device === 'mobile' ? 2 : 4"
                       >
                         <template #result="{ item: result }">
                           <MainScrollItem :item="result">
@@ -368,7 +367,7 @@
                 <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
                   Similar Semantic Queries
                 </h1>
-                <LocationProvider :location="$x.noResults ? 'no_results' : 'low_results'">
+                <LocationProvider :location="aliasApi.noResults ? 'no_results' : 'low_results'">
                   <QueryPreviewList
                     :queries-preview-info="queries.map(q => ({ query: q }))"
                     #default="{ queryPreviewInfo: { query }, results, queryTagging }"
@@ -407,17 +406,14 @@
 
             <!-- Partials -->
             <PartialResultsList
-              v-if="!$x.fromNoResultsWithFilters && ($x.totalResults <= 4 || $x.noResults)"
-              :animation="resultsAnimation"
+              v-if="
+                !aliasApi.fromNoResultsWithFilters &&
+                (aliasApi.totalResults <= 4 || aliasApi.noResults)
+              "
             >
               <template #default="{ partialResult }">
                 <span data-test="partial-query">{{ partialResult.query }}</span>
-                <BaseGrid
-                  #result="{ item }"
-                  :animation="resultsAnimation"
-                  :columns="4"
-                  :items="partialResult.results"
-                >
+                <BaseGrid #result="{ item }" :columns="4" :items="partialResult.results">
                   <Result :result="item" data-test="partial-result-item" />
                 </BaseGrid>
                 <PartialQueryButton :query="partialResult.query">
@@ -427,12 +423,11 @@
             </PartialResultsList>
 
             <!-- Recommendations -->
-            <Recommendations v-if="!$x.query.search || $x.noResults" #layout="{ recommendations }">
-              <BaseVariableColumnGrid
-                #default="{ item: result }"
-                :animation="resultsAnimation"
-                :items="recommendations"
-              >
+            <Recommendations
+              v-if="!aliasApi.query.search || aliasApi.noResults"
+              #layout="{ recommendations }"
+            >
+              <BaseVariableColumnGrid #default="{ item: result }" :items="recommendations">
                 <Result :result="result" data-test="recommendation-item" />
               </BaseVariableColumnGrid>
             </Recommendations>
@@ -452,8 +447,6 @@
 <script lang="ts">
   /* eslint-disable max-len */
   import { computed, ComputedRef, defineComponent, provide } from 'vue';
-  import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
-  import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
   import AutoProgressBar from '../../components/auto-progress-bar.vue';
   import BaseDropdown from '../../components/base-dropdown.vue';
   import BaseGrid from '../../components/base-grid.vue';
@@ -517,6 +510,7 @@
   import Result from './result.vue';
   import { HomeControls } from './types';
   import DisplayResultProvider from './display-result-provider.vue';
+  import { use$x } from '../../composables';
 
   export default defineComponent({
     directives: {
@@ -583,6 +577,7 @@
       MainModal
     },
     setup() {
+      const aliasApi = use$x();
       const stores = ['Spain', 'Portugal', 'Italy'];
       const initialExtraParams = { store: 'Portugal' };
       const searchInputPlaceholderMessages = [
@@ -593,8 +588,8 @@
         'Find sunglasses'
       ];
       const columnPickerValues = [0, 2, 4];
-      const resultsAnimation = StaggeredFadeAndSlide;
-      const modalAnimation = animateClipPath();
+      // const resultsAnimation = StaggeredFadeAndSlide;
+      // const modalAnimation = animateClipPath();
       const selectedColumns = 4;
       const sortValues = ['', 'price asc', 'price desc'];
       const isAnyQueryLoadedInPreview = useQueriesPreview().isAnyQueryLoadedInPreview;
@@ -654,9 +649,9 @@
       const toggleE2EAdapter = () => {
         adapterConfig.e2e = !adapterConfig.e2e;
       };
+
       return {
-        resultsAnimation,
-        modalAnimation,
+        aliasApi,
         queriesPreviewInfo,
         stores,
         initialExtraParams,
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 127938dc12..609b85c658 100644
--- a/packages/x-components/src/views/home/display-result-provider.vue
+++ b/packages/x-components/src/views/home/display-result-provider.vue
@@ -1,7 +1,5 @@
 <template>
-  <NoElement>
-    <slot />
-  </NoElement>
+  <slot />
 </template>
 
 <script lang="ts">
diff --git a/packages/x-components/src/views/home/result.vue b/packages/x-components/src/views/home/result.vue
index 5bdf5e1396..39da389958 100644
--- a/packages/x-components/src/views/home/result.vue
+++ b/packages/x-components/src/views/home/result.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, PropType } from 'vue';
+import {defineComponent, markRaw, PropType} from 'vue';
   import { Result } from '@empathyco/x-types';
   import BaseResultAddToCart from '../../components/result/base-result-add-to-cart.vue';
   import BaseResultImage from '../../components/result/base-result-image.vue';
@@ -59,7 +59,7 @@
     },
     data() {
       return {
-        crossFade: CrossFade
+        crossFade: markRaw(CrossFade)
       };
     }
   });
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 c7258312d9..31f2420f46 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,7 +1,5 @@
 <template>
-  <NoElement>
-    <slot v-bind="{ value, updateValue }"></slot>
-  </NoElement>
+  <slot v-bind="{ value, updateValue }"></slot>
 </template>
 
 <script lang="ts">
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 f98a2985bd..691f51c3ed 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
@@ -1,7 +1,9 @@
 <template>
-  <NoElement v-if="isVisible" class="x-selected-filters">
-    <slot v-bind="{ selectedFilters }">{{ selectedFilters.length }}</slot>
-  </NoElement>
+  <!--  <NoElement v-if="isVisible" class="x-selected-filters">-->
+  <slot v-if="isVisible" v-bind="{ selectedFilters, class: 'x-selected-filters' }">
+    {{ selectedFilters.length }}
+  </slot>
+  <!--  </NoElement>-->
 </template>
 
 <script lang="ts">
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..656321b2e0 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
@@ -70,7 +70,7 @@
        */
       watch(preselectedFilters, emitPreselectedFilters, { immediate: true });
 
-      return () => useNoElementRender(slots);
+      return () => {};
     }
   });
 </script>
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..adb47622db 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,19 +1,17 @@
 <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>
+  <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>
 </template>
 
 <script lang="ts">
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 df8e415a37..f0f1079fa1 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,6 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
+    v-bind="$attrs"
     :events="events"
     class="x-query-preview-button x-button"
     data-test="query-preview-button"
@@ -30,6 +30,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     name: 'QueryPreviewButton',
     xModule: queriesPreviewXModule.name,
     components: { BaseEventButton },
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 b32734f395..42a427255c 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,5 +1,5 @@
 <template>
-  <NoElement v-if="queryPreviewResults && queryPreviewResults.totalResults > 0">
+<!--  <NoElement v-if="queryPreviewResults && queryPreviewResults.totalResults > 0">-->
     <!--
       @slot Query Preview default slot.
           @binding {QueryPreviewInfo} queryPreviewInfo - The information about the request of the
@@ -8,6 +8,7 @@
           @binding {number} totalResults - The total results of the search request
     -->
     <slot
+      v-if="queryPreviewResults && queryPreviewResults.totalResults > 0"
       :queryPreviewInfo="queryPreviewInfo"
       :results="queryPreviewResults.results"
       :totalResults="queryPreviewResults.totalResults"
@@ -31,7 +32,7 @@
         </li>
       </ul>
     </slot>
-  </NoElement>
+<!--  </NoElement>-->
 </template>
 
 <script lang="ts">
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..8e0c91a862 100644
--- a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
+++ b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
@@ -1,27 +1,25 @@
 <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 v-if="recommendations.length" 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>
+        <slot :recommendation="recommendation" />
+      </li>
+    </component>
+  </slot>
 </template>
 
 <script lang="ts">
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 6d573d64e6..fc0e551686 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,5 +1,5 @@
 <template>
-  <component :is="tag" ref="rootRef" v-on="$listeners" :data-scroll="item.id">
+  <component :is="tag" ref="rootRef" v-bind="$attrs" :data-scroll="item.id">
     <slot />
   </component>
 </template>
@@ -31,6 +31,7 @@
    */
   export default defineComponent({
     name: 'MainScrollItem',
+    inheritAttrs: false,
     xModule: scrollXModule.name,
     props: {
       /** The item data. Used to set the scroll identifier. */
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..395c5d9f60 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,7 @@
   <component :is="animation">
     <BaseEventButton
       v-if="isVisible"
-      v-on="$listeners"
+      v-bind="$attrs"
       class="x-scroll-to-top x-button"
       data-test="scroll-to-top"
       aria-label="Scroll to top"
@@ -31,6 +31,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     name: 'ScrollToTop',
     xModule: scrollXModule.name,
     components: { BaseEventButton },
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..d139f1e27e 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/scroll.vue
@@ -6,7 +6,6 @@
     @scroll:at-start="emitScrollAtStart"
     @scroll:almost-at-end="emitScrollAlmostAtEnd"
     @scroll:at-end="emitScrollAtEnd"
-    v-on="$listeners"
     v-bind="$attrs"
     :id="id"
   >
@@ -30,6 +29,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     name: 'Scroll',
     xModule: scrollXModule.name,
     components: { BaseScroll },
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..2c0a91792d 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,7 @@
     @keydown.enter="emitUserPressedEnterKey"
     @keydown.up.down.prevent="emitUserPressedArrowKey"
     @beforeinput="preventSpecialKey"
-    v-on="$listeners"
+    v-bind="$attrs"
     :maxlength="maxLength"
     :value="query"
     autocomplete="off"
@@ -41,6 +41,7 @@
    * @public
    */
   export default defineComponent({
+    inheritAttrs: false,
     name: 'SearchInput',
     xModule: searchBoxXModule.name,
     props: {
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..d20c9af416 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,5 +1,4 @@
 <template>
-  <NoElement>
     <!--
       @slot Customized BannersList layout.
         @binding {Banner[]} items - Banners plus the injected list items to render.
@@ -12,7 +11,6 @@
         </template>
       </ItemsList>
     </slot>
-  </NoElement>
 </template>
 
 <script lang="ts">
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..8887898e6b 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,18 +1,16 @@
 <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>
+  <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>
 </template>
 
 <script lang="ts">
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..03dcc59736 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,5 +1,4 @@
 <template>
-  <NoElement>
     <!--
       @slot Customize ResultsList.
         @binding {Result[]} items - Results to render.
@@ -12,7 +11,6 @@
         </template>
       </ItemsList>
     </slot>
-  </NoElement>
 </template>
 
 <script lang="ts">
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..5d65ddb3bc 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,43 +1,42 @@
 <template>
-  <NoElement v-if="suggestions.length">
-    <!-- eslint-disable max-len -->
-    <!--
+  <!-- eslint-disable max-len -->
+  <!--
       @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
     -->
-    <!-- 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 -->
-        <!--
+  <!-- eslint-enable max-len -->
+  <slot
+    v-if="suggestions.length"
+    name="default"
+    v-bind="{ queries, suggestions, findSemanticQuery }"
+  >
+    <BaseSuggestions
+      v-bind="$attrs"
+      class="x-semantic-queries"
+      :suggestions="suggestions"
+      #default="baseSuggestionsScope"
+    >
+      <!-- eslint-disable max-len -->
+      <!--
           @slot Semantic Query content
               @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind BaseSuggestion bindings
         -->
-        <!-- eslint-enable max-len -->
-        <slot name="suggestion" v-bind="baseSuggestionsScope">
-          <SemanticQuery
-            :suggestion="baseSuggestionsScope.suggestion"
-            #default="baseSuggestionScope"
-          >
-            <!-- eslint-disable max-len -->
-            <!--
+      <!-- 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>
-  </NoElement>
+          <!-- eslint-enable max-len -->
+          <slot name="suggestion-content" v-bind="baseSuggestionScope" />
+        </SemanticQuery>
+      </slot>
+    </BaseSuggestions>
+  </slot>
 </template>
 
 <script lang="ts">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b92f3110c..f4a75cf21a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -452,6 +452,9 @@ importers:
       '@empathyco/x-utils':
         specifier: ^1.0.3-alpha.1
         version: link:../x-utils
+      '@vue/compat':
+        specifier: ^3.4.22
+        version: 3.4.22(vue@3.4.31)
       '@vue/devtools-api':
         specifier: ~6.5.0
         version: 6.5.0
@@ -507,9 +510,6 @@ importers:
       '@types/testing-library__jest-dom':
         specifier: ~5.14.5
         version: 5.14.5
-      '@vitejs/plugin-vue':
-        specifier: ^5.0.4
-        version: 5.0.4(vite@4.5.0)(vue@3.4.31)
       '@vue/test-utils':
         specifier: ~2.4.6
         version: 2.4.6
@@ -598,8 +598,8 @@ importers:
         specifier: ~4.4.0
         version: 4.4.0(vue@3.4.31)
       vuex:
-        specifier: ~4.1.0
-        version: 4.1.0(vue@3.4.31)
+        specifier: 4.0.2
+        version: 4.0.2(vue@3.4.31)
     publishDirectory: dist
 
   packages/x-priority-queue:
@@ -845,10 +845,10 @@ packages:
       '@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/parser': 7.24.7
       '@babel/template': 7.22.5
       '@babel/traverse': 7.22.8
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
       convert-source-map: 1.9.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -868,10 +868,10 @@ packages:
       '@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/parser': 7.24.7
       '@babel/template': 7.22.15
       '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
       convert-source-map: 2.0.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -885,7 +885,7 @@ packages:
     resolution: {integrity: sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
       jsesc: 2.5.2
@@ -895,7 +895,7 @@ packages:
     resolution: {integrity: sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
       jsesc: 2.5.2
@@ -905,7 +905,7 @@ packages:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/helper-compilation-targets@7.22.15:
@@ -998,7 +998,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/helper-function-name@7.23.0:
@@ -1006,35 +1006,35 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     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
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/helper-member-expression-to-functions@7.23.0:
     resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/helper-module-imports@7.22.5:
     resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9):
@@ -1048,7 +1048,7 @@ packages:
       '@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/helper-validator-identifier': 7.24.7
     dev: true
 
   /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.3):
@@ -1062,14 +1062,14 @@ packages:
       '@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
+      '@babel/helper-validator-identifier': 7.24.7
     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
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/helper-plugin-utils@7.22.5:
@@ -1117,40 +1117,30 @@ packages:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     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
+      '@babel/types': 7.24.7
     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
+      '@babel/types': 7.24.7
     dev: true
 
-  /@babel/helper-string-parser@7.22.5:
-    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
-    engines: {node: '>=6.9.0'}
-
   /@babel/helper-string-parser@7.24.7:
     resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
     engines: {node: '>=6.9.0'}
-    dev: true
-
-  /@babel/helper-validator-identifier@7.22.20:
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
-    engines: {node: '>=6.9.0'}
 
   /@babel/helper-validator-identifier@7.24.7:
     resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-option@7.22.15:
     resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
@@ -1168,7 +1158,7 @@ packages:
     dependencies:
       '@babel/template': 7.22.15
       '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1179,7 +1169,7 @@ packages:
     dependencies:
       '@babel/template': 7.22.15
       '@babel/traverse': 7.23.3
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1188,7 +1178,7 @@ packages:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-validator-identifier': 7.24.7
       chalk: 2.4.2
       js-tokens: 4.0.0
     dev: true
@@ -1198,7 +1188,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/parser@7.24.4:
@@ -1206,14 +1196,15 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
+    dev: false
 
   /@babel/parser@7.24.7:
     resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
 
   /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.22.9):
     resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
@@ -1697,7 +1688,7 @@ packages:
     dependencies:
       '@babel/code-frame': 7.22.13
       '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/template@7.22.5:
@@ -1705,8 +1696,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.22.13
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.23.3
+      '@babel/parser': 7.24.7
+      '@babel/types': 7.24.7
     dev: true
 
   /@babel/traverse@7.22.8:
@@ -1719,8 +1710,8 @@ packages:
       '@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
+      '@babel/parser': 7.24.7
+      '@babel/types': 7.24.7
       debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
@@ -1738,7 +1729,7 @@ packages:
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
       debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
     transitivePeerDependencies:
@@ -1749,9 +1740,10 @@ packages:
     resolution: {integrity: sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==}
     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.7
+      '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
+    dev: true
 
   /@babel/types@7.24.7:
     resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
@@ -1760,12 +1752,11 @@ packages:
       '@babel/helper-string-parser': 7.24.7
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
-    dev: true
 
   /@badeball/cypress-configuration@6.1.0:
     resolution: {integrity: sha512-30M6frVmhP8MUKscg8CEWnPbDLYDRHswUdny1ajRJlW/kdlMZ5da+eDnzMW3qUW73JfqLRk1pteejwlcZOt0GQ==}
     dependencies:
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.24.7
       debug: 4.3.4(supports-color@8.1.1)
       esbuild: 0.14.54
       glob: 7.2.3
@@ -4127,7 +4118,7 @@ packages:
     resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
     dependencies:
       '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.20.1
@@ -4136,20 +4127,20 @@ packages:
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
       '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@types/babel__traverse@7.20.1:
     resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==}
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /@types/cssnano@5.1.0(postcss@8.4.12):
@@ -4640,17 +4631,6 @@ packages:
       vue: 3.4.22(typescript@4.9.4)
     dev: true
 
-  /@vitejs/plugin-vue@5.0.4(vite@4.5.0)(vue@3.4.31):
-    resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
-    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.31(typescript@4.9.4)
-    dev: true
-
   /@volar/language-core@2.2.0-alpha.8:
     resolution: {integrity: sha512-Ew1Iw7/RIRNuDLn60fWJdOLApAlfTVPxbPiSLzc434PReC9kleYtaa//Wo2WlN1oiRqneW0pWQQV0CwYqaimLQ==}
     dependencies:
@@ -4804,6 +4784,17 @@ packages:
       vue: 3.4.22(typescript@4.9.4)
     dev: false
 
+  /@vue/compat@3.4.22(vue@3.4.31):
+    resolution: {integrity: sha512-xT9vVVLJhEG6nKT2gDKIlyLhHj0MUvZbXNXvV6UTnNuOaXhty2KLGJi7s/TL9C1qnlwmu6Py5TeLAa5vvuRFeQ==}
+    peerDependencies:
+      vue: 3.4.22
+    dependencies:
+      '@babel/parser': 7.24.7
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+      vue: 3.4.31(typescript@4.9.4)
+    dev: false
+
   /@vue/compiler-core@3.4.21:
     resolution: {integrity: sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==}
     dependencies:
@@ -4854,14 +4845,14 @@ packages:
   /@vue/compiler-sfc@2.7.14:
     resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
     dependencies:
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.24.7
       postcss: 8.4.38
       source-map: 0.6.1
 
   /@vue/compiler-sfc@3.4.22:
     resolution: {integrity: sha512-Pncp5Vc8E2Ef1o5uveO8WA1IqM7rt0R1jN8D4qitQYOUxC97iITGYA8oMInQ3UcDS7ip+SegyA2HbAEB4V6NMQ==}
     dependencies:
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.24.7
       '@vue/compiler-core': 3.4.22
       '@vue/compiler-dom': 3.4.22
       '@vue/compiler-ssr': 3.4.22
@@ -5543,12 +5534,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
-    dependencies:
-      call-bind: 1.0.7
-      is-array-buffer: 3.0.4
-
   /array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
     engines: {node: '>= 0.4'}
@@ -5625,17 +5610,6 @@ packages:
       get-intrinsic: 1.2.1
     dev: true
 
-  /arraybuffer.prototype.slice@1.0.1:
-    resolution: {integrity: sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.1
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.4
-      is-array-buffer: 3.0.4
-      is-shared-array-buffer: 1.0.3
-
   /arraybuffer.prototype.slice@1.0.3:
     resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
     engines: {node: '>= 0.4'}
@@ -5749,10 +5723,6 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-
   /available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -5860,7 +5830,7 @@ 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
+      '@babel/types': 7.24.7
       '@types/babel__core': 7.20.1
       '@types/babel__traverse': 7.20.1
     dev: true
@@ -5912,7 +5882,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     requiresBuild: true
     dependencies:
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /balanced-match@1.0.2:
@@ -6183,8 +6153,8 @@ packages:
   /call-bind@1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.1
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
 
   /call-bind@1.0.7:
     resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
@@ -7044,7 +7014,7 @@ packages:
     requiresBuild: true
     dependencies:
       '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
     dev: true
 
   /conventional-changelog-angular@5.0.12:
@@ -7645,7 +7615,7 @@ packages:
     resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-property-descriptors: 1.0.0
+      has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
   /define-properties@1.2.1:
@@ -7980,45 +7950,45 @@ packages:
     resolution: {integrity: sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==}
     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
+      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
+      function.prototype.name: 1.1.6
+      get-intrinsic: 1.2.4
+      get-symbol-description: 1.0.2
       globalthis: 1.0.3
       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
+      internal-slot: 1.0.7
+      is-array-buffer: 3.0.4
       is-callable: 1.2.7
-      is-negative-zero: 2.0.2
+      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-abstract@1.23.3:
     resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
@@ -8091,14 +8061,6 @@ packages:
     dependencies:
       es-errors: 1.3.0
 
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.4
-      has: 1.0.3
-      has-tostringtag: 1.0.2
-
   /es-set-tostringtag@2.0.3:
     resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==}
     engines: {node: '>= 0.4'}
@@ -9598,15 +9560,6 @@ packages:
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  /function.prototype.name@1.1.5:
-    resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      functions-have-names: 1.2.3
-
   /function.prototype.name@1.1.6:
     resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
     engines: {node: '>= 0.4'}
@@ -9666,9 +9619,9 @@ packages:
   /get-intrinsic@1.2.1:
     resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
     dependencies:
-      function-bind: 1.1.1
+      function-bind: 1.1.2
       has: 1.0.3
-      has-proto: 1.0.1
+      has-proto: 1.0.3
       has-symbols: 1.0.3
 
   /get-intrinsic@1.2.4:
@@ -9725,13 +9678,6 @@ packages:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-
   /get-symbol-description@1.0.2:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
@@ -10036,20 +9982,11 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  /has-property-descriptors@1.0.0:
-    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
-    dependencies:
-      get-intrinsic: 1.2.4
-
   /has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
     dependencies:
       es-define-property: 1.0.0
 
-  /has-proto@1.0.1:
-    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
-    engines: {node: '>= 0.4'}
-
   /has-proto@1.0.3:
     resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
     engines: {node: '>= 0.4'}
@@ -10421,9 +10358,10 @@ packages:
     resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      get-intrinsic: 1.2.1
+      get-intrinsic: 1.2.4
       has: 1.0.3
       side-channel: 1.0.4
+    dev: true
 
   /internal-slot@1.0.7:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
@@ -10458,13 +10396,6 @@ packages:
       has-tostringtag: 1.0.2
     dev: true
 
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      is-typed-array: 1.1.13
-
   /is-array-buffer@3.0.4:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
@@ -10651,10 +10582,6 @@ packages:
       define-properties: 1.2.1
     dev: true
 
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
-
   /is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
@@ -10739,11 +10666,6 @@ packages:
       call-bind: 1.0.7
       has-tostringtag: 1.0.2
 
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.7
-
   /is-shared-array-buffer@1.0.3:
     resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
     engines: {node: '>= 0.4'}
@@ -10793,12 +10715,6 @@ packages:
       text-extensions: 1.9.0
     dev: true
 
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.15
-
   /is-typed-array@1.1.13:
     resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
     engines: {node: '>= 0.4'}
@@ -10897,7 +10813,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.23.3
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.24.7
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -11402,7 +11318,7 @@ packages:
       '@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/types': 7.24.7
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
       '@types/babel__traverse': 7.20.1
@@ -13172,9 +13088,6 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-
   /object-inspect@1.13.2:
     resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
     engines: {node: '>= 0.4'}
@@ -13202,10 +13115,11 @@ packages:
     resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
     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
+    dev: true
 
   /object.assign@4.1.5:
     resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
@@ -14821,9 +14735,10 @@ packages:
     resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
     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
       functions-have-names: 1.2.3
+    dev: true
 
   /regexp.prototype.flags@1.5.2:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
@@ -15178,15 +15093,6 @@ packages:
       tslib: 2.6.2
     dev: true
 
-  /safe-array-concat@1.0.0:
-    resolution: {integrity: sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-
   /safe-array-concat@1.1.2:
     resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
     engines: {node: '>=0.4'}
@@ -15204,13 +15110,6 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      is-regex: 1.1.4
-
   /safe-regex-test@1.0.3:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
@@ -15402,9 +15301,9 @@ packages:
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
-      object-inspect: 1.12.3
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
+      object-inspect: 1.13.2
 
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
@@ -15788,14 +15687,6 @@ packages:
       side-channel: 1.0.4
     dev: true
 
-  /string.prototype.trim@1.2.7:
-    resolution: {integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-
   /string.prototype.trim@1.2.9:
     resolution: {integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==}
     engines: {node: '>= 0.4'}
@@ -15805,13 +15696,6 @@ packages:
       es-abstract: 1.23.3
       es-object-atoms: 1.0.0
 
-  /string.prototype.trimend@1.0.6:
-    resolution: {integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==}
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-
   /string.prototype.trimend@1.0.8:
     resolution: {integrity: sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==}
     dependencies:
@@ -15819,13 +15703,6 @@ packages:
       define-properties: 1.2.1
       es-object-atoms: 1.0.0
 
-  /string.prototype.trimstart@1.0.6:
-    resolution: {integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==}
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-
   /string.prototype.trimstart@1.0.8:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
@@ -16488,14 +16365,6 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      is-typed-array: 1.1.13
-
   /typed-array-buffer@1.0.2:
     resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
     engines: {node: '>= 0.4'}
@@ -16504,15 +16373,6 @@ packages:
       es-errors: 1.3.0
       is-typed-array: 1.1.13
 
-  /typed-array-byte-length@1.0.0:
-    resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-
   /typed-array-byte-length@1.0.1:
     resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
     engines: {node: '>= 0.4'}
@@ -16523,16 +16383,6 @@ packages:
       has-proto: 1.0.3
       is-typed-array: 1.1.13
 
-  /typed-array-byte-offset@1.0.0:
-    resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-
   /typed-array-byte-offset@1.0.2:
     resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==}
     engines: {node: '>= 0.4'}
@@ -16544,13 +16394,6 @@ packages:
       has-proto: 1.0.3
       is-typed-array: 1.1.13
 
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      is-typed-array: 1.1.13
-
   /typed-array-length@1.0.6:
     resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
     engines: {node: '>= 0.4'}
@@ -17209,7 +17052,7 @@ packages:
       '@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/types': 7.24.7
       deepmerge: 4.3.1
       vue-template-compiler: 2.7.14(vue@2.7.14)
     transitivePeerDependencies:
@@ -17309,10 +17152,10 @@ packages:
       vue: 3.4.22(typescript@4.9.4)
     dev: false
 
-  /vuex@4.1.0(vue@3.4.31):
-    resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
+  /vuex@4.0.2(vue@3.4.31):
+    resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
     peerDependencies:
-      vue: ^3.2.0
+      vue: ^3.0.2
     dependencies:
       '@vue/devtools-api': 6.5.1
       vue: 3.4.31(typescript@4.9.4)
@@ -17411,16 +17254,6 @@ packages:
       is-string: 1.0.7
       is-symbol: 1.0.4
 
-  /which-typed-array@1.1.11:
-    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.2
-
   /which-typed-array@1.1.15:
     resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
     engines: {node: '>= 0.4'}
@@ -17465,7 +17298,7 @@ packages:
     requiresBuild: true
     dependencies:
       '@babel/parser': 7.24.7
-      '@babel/types': 7.23.3
+      '@babel/types': 7.24.7
       assert-never: 1.2.1
       babel-walk: 3.0.0-canary-5
     dev: true