@getlupa/client 1.1.3 → 1.1.4

package/dist/lupaSearch.iife.js

@@ -7645,7 +7645,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$12 = { id: "lupa-search-box-input-container" };
   const _hoisted_2$I = { class: "lupa-input-clear" };
   const _hoisted_3$u = { id: "lupa-search-box-input" };
-  const _hoisted_4$m = ["value"];
+  const _hoisted_4$n = ["value"];
   const _hoisted_5$c = ["placeholder"];
   const _hoisted_6$6 = {
     key: 0,
@@ -7740,7 +7740,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               class: "lupa-hint",
               value: showHint.value ? suggestedValue.value.item.suggestion : "",
               disabled: ""
-            }, null, 8, _hoisted_4$m),
+            }, null, 8, _hoisted_4$n),
             withDirectives(createBaseVNode("input", mergeProps({
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
             }, inputAttributes.value, {
@@ -7907,7 +7907,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-suggestion-facet",
     "data-cy": "lupa-suggestion-facet"
   };
-  const _hoisted_4$l = {
+  const _hoisted_4$m = {
     class: "lupa-suggestion-facet-label",
     "data-cy": "lupa-suggestion-facet-label"
   };
@@ -7953,7 +7953,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             innerHTML: _ctx.suggestion.displayHighlight
           }, null, 8, _hoisted_1$$)) : (openBlock(), createElementBlock("div", _hoisted_2$G, toDisplayString(_ctx.suggestion.display), 1)),
           _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
-            createBaseVNode("span", _hoisted_4$l, toDisplayString(facetLabel.value), 1),
+            createBaseVNode("span", _hoisted_4$m, toDisplayString(facetLabel.value), 1),
             createBaseVNode("span", _hoisted_5$b, toDisplayString(_ctx.suggestion.facet.title), 1)
           ])) : createCommentVNode("", true)
         ]);
@@ -8355,7 +8355,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$U = ["innerHTML"];
   const _hoisted_2$D = { key: 0 };
   const _hoisted_3$s = { key: 1 };
-  const _hoisted_4$k = { class: "lupa-search-box-custom-label" };
+  const _hoisted_4$l = { class: "lupa-search-box-custom-label" };
   const _hoisted_5$a = { class: "lupa-search-box-custom-text" };
   const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustom",
@@ -8388,7 +8388,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           class: [className.value, "lupa-search-box-product-custom"]
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
           !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$D, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$s, [
-            createBaseVNode("div", _hoisted_4$k, toDisplayString(label.value), 1),
+            createBaseVNode("div", _hoisted_4$l, toDisplayString(label.value), 1),
             createBaseVNode("div", _hoisted_5$a, toDisplayString(text.value), 1)
           ]))
         ], 16));
@@ -8784,7 +8784,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$R = ["href"];
   const _hoisted_2$B = { class: "lupa-search-box-product-image-section" };
   const _hoisted_3$q = { class: "lupa-search-box-product-details-section" };
-  const _hoisted_4$j = {
+  const _hoisted_4$k = {
     key: 0,
     class: "lupa-search-box-product-add-to-cart-section"
   };
@@ -8905,7 +8905,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               }, null, 8, ["item", "element", "labels", "link"]);
             }), 128))
           ]),
-          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
             createVNode(_sfc_main$W, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
@@ -9037,14 +9037,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
   });
   const _hoisted_1$P = {
+    key: 0,
+    id: "lupa-search-box-panel"
+  };
+  const _hoisted_2$A = {
     class: "lupa-main-panel",
     "data-cy": "lupa-main-panel"
   };
-  const _hoisted_2$A = ["data-cy"];
-  const _hoisted_3$p = {
+  const _hoisted_3$p = ["data-cy"];
+  const _hoisted_4$j = {
     key: 1,
-    id: "lupa-search-box-panel",
-    ref: "panel"
+    id: "lupa-search-box-panel"
   };
   const __default__$3 = {
     components: {
@@ -9110,7 +9113,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       onMounted(() => {
         window.addEventListener("resize", appHeight);
         window.addEventListener("keydown", handleNavigation);
-        appHeight();
+        setTimeout(() => {
+          appHeight();
+        });
       });
       onBeforeUnmount(() => {
         highlightChange({ action: "clear" });
@@ -9160,59 +9165,58 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       return (_ctx, _cache) => {
         var _a;
-        return displayResults.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          id: "lupa-search-box-panel",
+        return openBlock(), createElementBlock("div", {
           ref_key: "panelContainer",
           ref: panelContainer
         }, [
-          createBaseVNode("div", _hoisted_1$P, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
-              return openBlock(), createElementBlock("div", {
-                key: index,
-                class: normalizeClass([
-                  "lupa-panel-" + panel.type + "-index",
-                  panel.customClassName ? panel.customClassName : ""
-                ]),
-                "data-cy": "lupa-panel-" + panel.type + "-index"
-              }, [
-                panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
-                  key: 0,
-                  panel,
-                  options: sdkOptions.value,
-                  debounce: _ctx.options.debounce,
-                  inputValue: getInput(panel),
-                  labels: labels.value,
-                  onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
-                  onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
-                  onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
-                }, createSlots({ _: 2 }, [
-                  _ctx.$slots.productCard ? {
-                    name: "productCard",
-                    fn: withCtx((props2) => [
-                      renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
-                    ]),
-                    key: "0"
-                  } : void 0
-                ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-              ], 10, _hoisted_2$A);
-            }), 128))
-          ]),
-          createVNode(_sfc_main$19, {
-            labels: labels.value,
-            showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
-            onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
-          }, null, 8, ["labels", "showTotalCount"])
-        ], 512)) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
-          createVNode(_sfc_main$17, {
-            ref: "panel",
-            options: _ctx.options.history,
-            history: history.value,
-            onGoToResults: handleGoToResults,
-            onRemove: remove2,
-            onRemoveAll: removeAll
-          }, null, 8, ["options", "history"])
-        ], 512)) : createCommentVNode("", true);
+          displayResults.value ? (openBlock(), createElementBlock("div", _hoisted_1$P, [
+            createBaseVNode("div", _hoisted_2$A, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: normalizeClass([
+                    "lupa-panel-" + panel.type + "-index",
+                    panel.customClassName ? panel.customClassName : ""
+                  ]),
+                  "data-cy": "lupa-panel-" + panel.type + "-index"
+                }, [
+                  panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
+                    key: 0,
+                    panel,
+                    options: sdkOptions.value,
+                    debounce: _ctx.options.debounce,
+                    inputValue: getInput(panel),
+                    labels: labels.value,
+                    onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
+                    onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
+                    onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
+                  }, createSlots({ _: 2 }, [
+                    _ctx.$slots.productCard ? {
+                      name: "productCard",
+                      fn: withCtx((props2) => [
+                        renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
+                ], 10, _hoisted_3$p);
+              }), 128))
+            ]),
+            createVNode(_sfc_main$19, {
+              labels: labels.value,
+              showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
+              onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
+            }, null, 8, ["labels", "showTotalCount"])
+          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+            createVNode(_sfc_main$17, {
+              options: _ctx.options.history,
+              history: history.value,
+              onGoToResults: handleGoToResults,
+              onRemove: remove2,
+              onRemoveAll: removeAll
+            }, null, 8, ["options", "history"])
+          ])) : createCommentVNode("", true)
+        ], 512);
       };
     }
   }));
@@ -26483,7 +26487,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     if (mountToParent) {
       element == null ? void 0 : element.remove();
     }
-    return { mountedApp, mountedComponent, props };
+    return { mountedApp, mountedComponent, props, app: app2, mountElement };
   };
   const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];
@@ -26607,21 +26611,20 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     app.recommendations[options.containerSelector] = instance;
   };
-  const clearInstance = (selector) => {
-    const element = document.querySelector(selector);
-    if (!element) {
-      return;
-    }
-    document.body.removeChild(element);
+  const clearInstance = (element, app2) => {
+    var _a;
+    const content = element.innerHTML;
+    (_a = app2 == null ? void 0 : app2.unmount) == null ? void 0 : _a.call(app2);
+    element.innerHTML = content;
   };
   const clearSearchBox = (selector) => {
     try {
       if (selector) {
         app.box[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.box[selector].mountElement, app.box[selector].app);
       }
       for (const key in app.box) {
-        clearInstance(key);
+        clearInstance(app.box[key].mountElement, app.box[key].app);
       }
       app.box = {};
     } catch (e) {
@@ -26631,10 +26634,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.results[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.results[selector].mountElement, app.results[selector].app);
       }
       for (const key in app.results) {
-        clearInstance(key);
+        clearInstance(app.results[key].mountElement, app.results[key].app);
       }
       app.results = {};
     } catch (e) {
@@ -26644,10 +26647,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.productList[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.productList[selector].mountElement, app.productList[selector].app);
       }
       for (const key in app.productList) {
-        clearInstance(key);
+        clearInstance(app.productList[key].mountElement, app.productList[key].app);
       }
       app.productList = {};
     } catch (e) {
@@ -26657,10 +26660,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.searchContainer[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.searchContainer[selector].mountElement, app.searchContainer[selector].app);
       }
       for (const key in app.searchContainer) {
-        clearInstance(key);
+        clearInstance(app.searchContainer[key].mountElement, app.searchContainer[key].app);
       }
       app.searchContainer = {};
     } catch (e) {
@@ -26670,10 +26673,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.recommendations[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.recommendations[selector].mountElement, app.recommendations[selector].app);
       }
       for (const key in app.recommendations) {
-        clearInstance(key);
+        clearInstance(app.recommendations[key].mountElement, app.recommendations[key].app);
       }
       app.recommendations = {};
     } catch (e) {

package/dist/lupaSearch.js

@@ -7645,7 +7645,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
 const _hoisted_1$12 = { id: "lupa-search-box-input-container" };
 const _hoisted_2$I = { class: "lupa-input-clear" };
 const _hoisted_3$u = { id: "lupa-search-box-input" };
-const _hoisted_4$m = ["value"];
+const _hoisted_4$n = ["value"];
 const _hoisted_5$c = ["placeholder"];
 const _hoisted_6$6 = {
   key: 0,
@@ -7740,7 +7740,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
             class: "lupa-hint",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$m),
+          }, null, 8, _hoisted_4$n),
           withDirectives(createBaseVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -7907,7 +7907,7 @@ const _hoisted_3$t = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$l = {
+const _hoisted_4$m = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -7953,7 +7953,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$$)) : (openBlock(), createElementBlock("div", _hoisted_2$G, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
-          createBaseVNode("span", _hoisted_4$l, toDisplayString(facetLabel.value), 1),
+          createBaseVNode("span", _hoisted_4$m, toDisplayString(facetLabel.value), 1),
           createBaseVNode("span", _hoisted_5$b, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
@@ -8355,7 +8355,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
 const _hoisted_1$U = ["innerHTML"];
 const _hoisted_2$D = { key: 0 };
 const _hoisted_3$s = { key: 1 };
-const _hoisted_4$k = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$l = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$a = { class: "lupa-search-box-custom-text" };
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
@@ -8388,7 +8388,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$D, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$s, [
-          createBaseVNode("div", _hoisted_4$k, toDisplayString(label.value), 1),
+          createBaseVNode("div", _hoisted_4$l, toDisplayString(label.value), 1),
           createBaseVNode("div", _hoisted_5$a, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -8784,7 +8784,7 @@ const useTrackingStore = defineStore("tracking", () => {
 const _hoisted_1$R = ["href"];
 const _hoisted_2$B = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$q = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$j = {
+const _hoisted_4$k = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -8905,7 +8905,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
           createVNode(_sfc_main$W, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -9037,14 +9037,17 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$P = {
+  key: 0,
+  id: "lupa-search-box-panel"
+};
+const _hoisted_2$A = {
   class: "lupa-main-panel",
   "data-cy": "lupa-main-panel"
 };
-const _hoisted_2$A = ["data-cy"];
-const _hoisted_3$p = {
+const _hoisted_3$p = ["data-cy"];
+const _hoisted_4$j = {
   key: 1,
-  id: "lupa-search-box-panel",
-  ref: "panel"
+  id: "lupa-search-box-panel"
 };
 const __default__$3 = {
   components: {
@@ -9110,7 +9113,9 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
     onMounted(() => {
       window.addEventListener("resize", appHeight);
       window.addEventListener("keydown", handleNavigation);
-      appHeight();
+      setTimeout(() => {
+        appHeight();
+      });
     });
     onBeforeUnmount(() => {
       highlightChange({ action: "clear" });
@@ -9160,59 +9165,58 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
     };
     return (_ctx, _cache) => {
       var _a;
-      return displayResults.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        id: "lupa-search-box-panel",
+      return openBlock(), createElementBlock("div", {
         ref_key: "panelContainer",
         ref: panelContainer
       }, [
-        createBaseVNode("div", _hoisted_1$P, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
-            return openBlock(), createElementBlock("div", {
-              key: index,
-              class: normalizeClass([
-                "lupa-panel-" + panel.type + "-index",
-                panel.customClassName ? panel.customClassName : ""
-              ]),
-              "data-cy": "lupa-panel-" + panel.type + "-index"
-            }, [
-              panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
-                key: 0,
-                panel,
-                options: sdkOptions.value,
-                debounce: _ctx.options.debounce,
-                inputValue: getInput(panel),
-                labels: labels.value,
-                onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
-                onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
-                onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
-              }, createSlots({ _: 2 }, [
-                _ctx.$slots.productCard ? {
-                  name: "productCard",
-                  fn: withCtx((props2) => [
-                    renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
-                  ]),
-                  key: "0"
-                } : void 0
-              ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-            ], 10, _hoisted_2$A);
-          }), 128))
-        ]),
-        createVNode(_sfc_main$19, {
-          labels: labels.value,
-          showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
-          onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
-        }, null, 8, ["labels", "showTotalCount"])
-      ], 512)) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
-        createVNode(_sfc_main$17, {
-          ref: "panel",
-          options: _ctx.options.history,
-          history: history.value,
-          onGoToResults: handleGoToResults,
-          onRemove: remove2,
-          onRemoveAll: removeAll
-        }, null, 8, ["options", "history"])
-      ], 512)) : createCommentVNode("", true);
+        displayResults.value ? (openBlock(), createElementBlock("div", _hoisted_1$P, [
+          createBaseVNode("div", _hoisted_2$A, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: index,
+                class: normalizeClass([
+                  "lupa-panel-" + panel.type + "-index",
+                  panel.customClassName ? panel.customClassName : ""
+                ]),
+                "data-cy": "lupa-panel-" + panel.type + "-index"
+              }, [
+                panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
+                  key: 0,
+                  panel,
+                  options: sdkOptions.value,
+                  debounce: _ctx.options.debounce,
+                  inputValue: getInput(panel),
+                  labels: labels.value,
+                  onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
+                  onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
+                  onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
+                }, createSlots({ _: 2 }, [
+                  _ctx.$slots.productCard ? {
+                    name: "productCard",
+                    fn: withCtx((props2) => [
+                      renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
+              ], 10, _hoisted_3$p);
+            }), 128))
+          ]),
+          createVNode(_sfc_main$19, {
+            labels: labels.value,
+            showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
+            onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
+          }, null, 8, ["labels", "showTotalCount"])
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+          createVNode(_sfc_main$17, {
+            options: _ctx.options.history,
+            history: history.value,
+            onGoToResults: handleGoToResults,
+            onRemove: remove2,
+            onRemoveAll: removeAll
+          }, null, 8, ["options", "history"])
+        ])) : createCommentVNode("", true)
+      ], 512);
     };
   }
 }));
@@ -26483,7 +26487,7 @@ const createVue = (selector, rootComponent, options, mountToParent = false) => {
   if (mountToParent) {
     element == null ? void 0 : element.remove();
   }
-  return { mountedApp, mountedComponent, props };
+  return { mountedApp, mountedComponent, props, app: app2, mountElement };
 };
 const applySearchBox = (options, mountOptions) => {
   const existingInstance = app.box[options.inputSelector];
@@ -26607,21 +26611,20 @@ const recommendations = (options, mountOptions) => {
   }
   app.recommendations[options.containerSelector] = instance;
 };
-const clearInstance = (selector) => {
-  const element = document.querySelector(selector);
-  if (!element) {
-    return;
-  }
-  document.body.removeChild(element);
+const clearInstance = (element, app2) => {
+  var _a;
+  const content = element.innerHTML;
+  (_a = app2 == null ? void 0 : app2.unmount) == null ? void 0 : _a.call(app2);
+  element.innerHTML = content;
 };
 const clearSearchBox = (selector) => {
   try {
     if (selector) {
       app.box[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.box[selector].mountElement, app.box[selector].app);
     }
     for (const key in app.box) {
-      clearInstance(key);
+      clearInstance(app.box[key].mountElement, app.box[key].app);
     }
     app.box = {};
   } catch (e) {
@@ -26631,10 +26634,10 @@ const clearSearchResults = (selector) => {
   try {
     if (selector) {
       app.results[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.results[selector].mountElement, app.results[selector].app);
     }
     for (const key in app.results) {
-      clearInstance(key);
+      clearInstance(app.results[key].mountElement, app.results[key].app);
     }
     app.results = {};
   } catch (e) {
@@ -26644,10 +26647,10 @@ const clearProductList = (selector) => {
   try {
     if (selector) {
       app.productList[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.productList[selector].mountElement, app.productList[selector].app);
     }
     for (const key in app.productList) {
-      clearInstance(key);
+      clearInstance(app.productList[key].mountElement, app.productList[key].app);
     }
     app.productList = {};
   } catch (e) {
@@ -26657,10 +26660,10 @@ const clearSearchContainer = (selector) => {
   try {
     if (selector) {
       app.searchContainer[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.searchContainer[selector].mountElement, app.searchContainer[selector].app);
     }
     for (const key in app.searchContainer) {
-      clearInstance(key);
+      clearInstance(app.searchContainer[key].mountElement, app.searchContainer[key].app);
     }
     app.searchContainer = {};
   } catch (e) {
@@ -26670,10 +26673,10 @@ const clearRecommendations = (selector) => {
   try {
     if (selector) {
       app.recommendations[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.recommendations[selector].mountElement, app.recommendations[selector].app);
     }
     for (const key in app.recommendations) {
-      clearInstance(key);
+      clearInstance(app.recommendations[key].mountElement, app.recommendations[key].app);
     }
     app.recommendations = {};
   } catch (e) {

package/dist/lupaSearch.mjs

@@ -7643,7 +7643,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
 const _hoisted_1$12 = { id: "lupa-search-box-input-container" };
 const _hoisted_2$I = { class: "lupa-input-clear" };
 const _hoisted_3$u = { id: "lupa-search-box-input" };
-const _hoisted_4$m = ["value"];
+const _hoisted_4$n = ["value"];
 const _hoisted_5$c = ["placeholder"];
 const _hoisted_6$6 = {
   key: 0,
@@ -7738,7 +7738,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
             class: "lupa-hint",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$m),
+          }, null, 8, _hoisted_4$n),
           withDirectives(createBaseVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -7905,7 +7905,7 @@ const _hoisted_3$t = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$l = {
+const _hoisted_4$m = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -7951,7 +7951,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$$)) : (openBlock(), createElementBlock("div", _hoisted_2$G, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
-          createBaseVNode("span", _hoisted_4$l, toDisplayString(facetLabel.value), 1),
+          createBaseVNode("span", _hoisted_4$m, toDisplayString(facetLabel.value), 1),
           createBaseVNode("span", _hoisted_5$b, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
@@ -8353,7 +8353,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
 const _hoisted_1$U = ["innerHTML"];
 const _hoisted_2$D = { key: 0 };
 const _hoisted_3$s = { key: 1 };
-const _hoisted_4$k = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$l = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$a = { class: "lupa-search-box-custom-text" };
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
@@ -8386,7 +8386,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$D, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$s, [
-          createBaseVNode("div", _hoisted_4$k, toDisplayString(label.value), 1),
+          createBaseVNode("div", _hoisted_4$l, toDisplayString(label.value), 1),
           createBaseVNode("div", _hoisted_5$a, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -8782,7 +8782,7 @@ const useTrackingStore = defineStore("tracking", () => {
 const _hoisted_1$R = ["href"];
 const _hoisted_2$B = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$q = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$j = {
+const _hoisted_4$k = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -8903,7 +8903,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
           createVNode(_sfc_main$W, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -9035,14 +9035,17 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$P = {
+  key: 0,
+  id: "lupa-search-box-panel"
+};
+const _hoisted_2$A = {
   class: "lupa-main-panel",
   "data-cy": "lupa-main-panel"
 };
-const _hoisted_2$A = ["data-cy"];
-const _hoisted_3$p = {
+const _hoisted_3$p = ["data-cy"];
+const _hoisted_4$j = {
   key: 1,
-  id: "lupa-search-box-panel",
-  ref: "panel"
+  id: "lupa-search-box-panel"
 };
 const __default__$3 = {
   components: {
@@ -9108,7 +9111,9 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
     onMounted(() => {
       window.addEventListener("resize", appHeight);
       window.addEventListener("keydown", handleNavigation);
-      appHeight();
+      setTimeout(() => {
+        appHeight();
+      });
     });
     onBeforeUnmount(() => {
       highlightChange({ action: "clear" });
@@ -9158,59 +9163,58 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
     };
     return (_ctx, _cache) => {
       var _a;
-      return displayResults.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        id: "lupa-search-box-panel",
+      return openBlock(), createElementBlock("div", {
         ref_key: "panelContainer",
         ref: panelContainer
       }, [
-        createBaseVNode("div", _hoisted_1$P, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
-            return openBlock(), createElementBlock("div", {
-              key: index,
-              class: normalizeClass([
-                "lupa-panel-" + panel.type + "-index",
-                panel.customClassName ? panel.customClassName : ""
-              ]),
-              "data-cy": "lupa-panel-" + panel.type + "-index"
-            }, [
-              panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
-                key: 0,
-                panel,
-                options: sdkOptions.value,
-                debounce: _ctx.options.debounce,
-                inputValue: getInput(panel),
-                labels: labels.value,
-                onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
-                onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
-                onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
-              }, createSlots({ _: 2 }, [
-                _ctx.$slots.productCard ? {
-                  name: "productCard",
-                  fn: withCtx((props2) => [
-                    renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
-                  ]),
-                  key: "0"
-                } : void 0
-              ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-            ], 10, _hoisted_2$A);
-          }), 128))
-        ]),
-        createVNode(_sfc_main$19, {
-          labels: labels.value,
-          showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
-          onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
-        }, null, 8, ["labels", "showTotalCount"])
-      ], 512)) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
-        createVNode(_sfc_main$17, {
-          ref: "panel",
-          options: _ctx.options.history,
-          history: history.value,
-          onGoToResults: handleGoToResults,
-          onRemove: remove2,
-          onRemoveAll: removeAll
-        }, null, 8, ["options", "history"])
-      ], 512)) : createCommentVNode("", true);
+        displayResults.value ? (openBlock(), createElementBlock("div", _hoisted_1$P, [
+          createBaseVNode("div", _hoisted_2$A, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: index,
+                class: normalizeClass([
+                  "lupa-panel-" + panel.type + "-index",
+                  panel.customClassName ? panel.customClassName : ""
+                ]),
+                "data-cy": "lupa-panel-" + panel.type + "-index"
+              }, [
+                panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
+                  key: 0,
+                  panel,
+                  options: sdkOptions.value,
+                  debounce: _ctx.options.debounce,
+                  inputValue: getInput(panel),
+                  labels: labels.value,
+                  onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
+                  onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
+                  onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
+                }, createSlots({ _: 2 }, [
+                  _ctx.$slots.productCard ? {
+                    name: "productCard",
+                    fn: withCtx((props2) => [
+                      renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
+              ], 10, _hoisted_3$p);
+            }), 128))
+          ]),
+          createVNode(_sfc_main$19, {
+            labels: labels.value,
+            showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
+            onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
+          }, null, 8, ["labels", "showTotalCount"])
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+          createVNode(_sfc_main$17, {
+            options: _ctx.options.history,
+            history: history.value,
+            onGoToResults: handleGoToResults,
+            onRemove: remove2,
+            onRemoveAll: removeAll
+          }, null, 8, ["options", "history"])
+        ])) : createCommentVNode("", true)
+      ], 512);
     };
   }
 }));
@@ -26481,7 +26485,7 @@ const createVue = (selector, rootComponent, options, mountToParent = false) => {
   if (mountToParent) {
     element == null ? void 0 : element.remove();
   }
-  return { mountedApp, mountedComponent, props };
+  return { mountedApp, mountedComponent, props, app: app2, mountElement };
 };
 const applySearchBox = (options, mountOptions) => {
   const existingInstance = app.box[options.inputSelector];
@@ -26605,21 +26609,20 @@ const recommendations = (options, mountOptions) => {
   }
   app.recommendations[options.containerSelector] = instance;
 };
-const clearInstance = (selector) => {
-  const element = document.querySelector(selector);
-  if (!element) {
-    return;
-  }
-  document.body.removeChild(element);
+const clearInstance = (element, app2) => {
+  var _a;
+  const content = element.innerHTML;
+  (_a = app2 == null ? void 0 : app2.unmount) == null ? void 0 : _a.call(app2);
+  element.innerHTML = content;
 };
 const clearSearchBox = (selector) => {
   try {
     if (selector) {
       app.box[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.box[selector].mountElement, app.box[selector].app);
     }
     for (const key in app.box) {
-      clearInstance(key);
+      clearInstance(app.box[key].mountElement, app.box[key].app);
     }
     app.box = {};
   } catch (e) {
@@ -26629,10 +26632,10 @@ const clearSearchResults = (selector) => {
   try {
     if (selector) {
       app.results[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.results[selector].mountElement, app.results[selector].app);
     }
     for (const key in app.results) {
-      clearInstance(key);
+      clearInstance(app.results[key].mountElement, app.results[key].app);
     }
     app.results = {};
   } catch (e) {
@@ -26642,10 +26645,10 @@ const clearProductList = (selector) => {
   try {
     if (selector) {
       app.productList[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.productList[selector].mountElement, app.productList[selector].app);
     }
     for (const key in app.productList) {
-      clearInstance(key);
+      clearInstance(app.productList[key].mountElement, app.productList[key].app);
     }
     app.productList = {};
   } catch (e) {
@@ -26655,10 +26658,10 @@ const clearSearchContainer = (selector) => {
   try {
     if (selector) {
       app.searchContainer[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.searchContainer[selector].mountElement, app.searchContainer[selector].app);
     }
     for (const key in app.searchContainer) {
-      clearInstance(key);
+      clearInstance(app.searchContainer[key].mountElement, app.searchContainer[key].app);
     }
     app.searchContainer = {};
   } catch (e) {
@@ -26668,10 +26671,10 @@ const clearRecommendations = (selector) => {
   try {
     if (selector) {
       app.recommendations[selector] = null;
-      clearInstance(selector);
+      clearInstance(app.recommendations[selector].mountElement, app.recommendations[selector].app);
     }
     for (const key in app.recommendations) {
-      clearInstance(key);
+      clearInstance(app.recommendations[key].mountElement, app.recommendations[key].app);
     }
     app.recommendations = {};
   } catch (e) {

package/dist/lupaSearch.umd.js

@@ -7647,7 +7647,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$12 = { id: "lupa-search-box-input-container" };
   const _hoisted_2$I = { class: "lupa-input-clear" };
   const _hoisted_3$u = { id: "lupa-search-box-input" };
-  const _hoisted_4$m = ["value"];
+  const _hoisted_4$n = ["value"];
   const _hoisted_5$c = ["placeholder"];
   const _hoisted_6$6 = {
     key: 0,
@@ -7742,7 +7742,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               class: "lupa-hint",
               value: showHint.value ? suggestedValue.value.item.suggestion : "",
               disabled: ""
-            }, null, 8, _hoisted_4$m),
+            }, null, 8, _hoisted_4$n),
             withDirectives(createBaseVNode("input", mergeProps({
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
             }, inputAttributes.value, {
@@ -7909,7 +7909,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-suggestion-facet",
     "data-cy": "lupa-suggestion-facet"
   };
-  const _hoisted_4$l = {
+  const _hoisted_4$m = {
     class: "lupa-suggestion-facet-label",
     "data-cy": "lupa-suggestion-facet-label"
   };
@@ -7955,7 +7955,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             innerHTML: _ctx.suggestion.displayHighlight
           }, null, 8, _hoisted_1$$)) : (openBlock(), createElementBlock("div", _hoisted_2$G, toDisplayString(_ctx.suggestion.display), 1)),
           _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
-            createBaseVNode("span", _hoisted_4$l, toDisplayString(facetLabel.value), 1),
+            createBaseVNode("span", _hoisted_4$m, toDisplayString(facetLabel.value), 1),
             createBaseVNode("span", _hoisted_5$b, toDisplayString(_ctx.suggestion.facet.title), 1)
           ])) : createCommentVNode("", true)
         ]);
@@ -8357,7 +8357,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$U = ["innerHTML"];
   const _hoisted_2$D = { key: 0 };
   const _hoisted_3$s = { key: 1 };
-  const _hoisted_4$k = { class: "lupa-search-box-custom-label" };
+  const _hoisted_4$l = { class: "lupa-search-box-custom-label" };
   const _hoisted_5$a = { class: "lupa-search-box-custom-text" };
   const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustom",
@@ -8390,7 +8390,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           class: [className.value, "lupa-search-box-product-custom"]
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
           !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$D, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$s, [
-            createBaseVNode("div", _hoisted_4$k, toDisplayString(label.value), 1),
+            createBaseVNode("div", _hoisted_4$l, toDisplayString(label.value), 1),
             createBaseVNode("div", _hoisted_5$a, toDisplayString(text.value), 1)
           ]))
         ], 16));
@@ -8786,7 +8786,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$R = ["href"];
   const _hoisted_2$B = { class: "lupa-search-box-product-image-section" };
   const _hoisted_3$q = { class: "lupa-search-box-product-details-section" };
-  const _hoisted_4$j = {
+  const _hoisted_4$k = {
     key: 0,
     class: "lupa-search-box-product-add-to-cart-section"
   };
@@ -8907,7 +8907,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               }, null, 8, ["item", "element", "labels", "link"]);
             }), 128))
           ]),
-          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
             createVNode(_sfc_main$W, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
@@ -9039,14 +9039,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
   });
   const _hoisted_1$P = {
+    key: 0,
+    id: "lupa-search-box-panel"
+  };
+  const _hoisted_2$A = {
     class: "lupa-main-panel",
     "data-cy": "lupa-main-panel"
   };
-  const _hoisted_2$A = ["data-cy"];
-  const _hoisted_3$p = {
+  const _hoisted_3$p = ["data-cy"];
+  const _hoisted_4$j = {
     key: 1,
-    id: "lupa-search-box-panel",
-    ref: "panel"
+    id: "lupa-search-box-panel"
   };
   const __default__$3 = {
     components: {
@@ -9112,7 +9115,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       onMounted(() => {
         window.addEventListener("resize", appHeight);
         window.addEventListener("keydown", handleNavigation);
-        appHeight();
+        setTimeout(() => {
+          appHeight();
+        });
       });
       onBeforeUnmount(() => {
         highlightChange({ action: "clear" });
@@ -9162,59 +9167,58 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       return (_ctx, _cache) => {
         var _a;
-        return displayResults.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          id: "lupa-search-box-panel",
+        return openBlock(), createElementBlock("div", {
           ref_key: "panelContainer",
           ref: panelContainer
         }, [
-          createBaseVNode("div", _hoisted_1$P, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
-              return openBlock(), createElementBlock("div", {
-                key: index,
-                class: normalizeClass([
-                  "lupa-panel-" + panel.type + "-index",
-                  panel.customClassName ? panel.customClassName : ""
-                ]),
-                "data-cy": "lupa-panel-" + panel.type + "-index"
-              }, [
-                panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
-                  key: 0,
-                  panel,
-                  options: sdkOptions.value,
-                  debounce: _ctx.options.debounce,
-                  inputValue: getInput(panel),
-                  labels: labels.value,
-                  onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
-                  onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
-                  onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
-                }, createSlots({ _: 2 }, [
-                  _ctx.$slots.productCard ? {
-                    name: "productCard",
-                    fn: withCtx((props2) => [
-                      renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
-                    ]),
-                    key: "0"
-                  } : void 0
-                ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-              ], 10, _hoisted_2$A);
-            }), 128))
-          ]),
-          createVNode(_sfc_main$19, {
-            labels: labels.value,
-            showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
-            onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
-          }, null, 8, ["labels", "showTotalCount"])
-        ], 512)) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
-          createVNode(_sfc_main$17, {
-            ref: "panel",
-            options: _ctx.options.history,
-            history: history.value,
-            onGoToResults: handleGoToResults,
-            onRemove: remove2,
-            onRemoveAll: removeAll
-          }, null, 8, ["options", "history"])
-        ], 512)) : createCommentVNode("", true);
+          displayResults.value ? (openBlock(), createElementBlock("div", _hoisted_1$P, [
+            createBaseVNode("div", _hoisted_2$A, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: normalizeClass([
+                    "lupa-panel-" + panel.type + "-index",
+                    panel.customClassName ? panel.customClassName : ""
+                  ]),
+                  "data-cy": "lupa-panel-" + panel.type + "-index"
+                }, [
+                  panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
+                    key: 0,
+                    panel,
+                    options: sdkOptions.value,
+                    debounce: _ctx.options.debounce,
+                    inputValue: getInput(panel),
+                    labels: labels.value,
+                    onFetched: _cache[0] || (_cache[0] = (data) => _ctx.$emit("fetched", data)),
+                    onItemSelect: _cache[1] || (_cache[1] = (item) => _ctx.$emit("itemSelect", item)),
+                    onProductClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("product-click"))
+                  }, createSlots({ _: 2 }, [
+                    _ctx.$slots.productCard ? {
+                      name: "productCard",
+                      fn: withCtx((props2) => [
+                        renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
+                ], 10, _hoisted_3$p);
+              }), 128))
+            ]),
+            createVNode(_sfc_main$19, {
+              labels: labels.value,
+              showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
+              onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
+            }, null, 8, ["labels", "showTotalCount"])
+          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+            createVNode(_sfc_main$17, {
+              options: _ctx.options.history,
+              history: history.value,
+              onGoToResults: handleGoToResults,
+              onRemove: remove2,
+              onRemoveAll: removeAll
+            }, null, 8, ["options", "history"])
+          ])) : createCommentVNode("", true)
+        ], 512);
       };
     }
   }));
@@ -26485,7 +26489,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     if (mountToParent) {
       element == null ? void 0 : element.remove();
     }
-    return { mountedApp, mountedComponent, props };
+    return { mountedApp, mountedComponent, props, app: app2, mountElement };
   };
   const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];
@@ -26609,21 +26613,20 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     app.recommendations[options.containerSelector] = instance;
   };
-  const clearInstance = (selector) => {
-    const element = document.querySelector(selector);
-    if (!element) {
-      return;
-    }
-    document.body.removeChild(element);
+  const clearInstance = (element, app2) => {
+    var _a;
+    const content = element.innerHTML;
+    (_a = app2 == null ? void 0 : app2.unmount) == null ? void 0 : _a.call(app2);
+    element.innerHTML = content;
   };
   const clearSearchBox = (selector) => {
     try {
       if (selector) {
         app.box[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.box[selector].mountElement, app.box[selector].app);
       }
       for (const key in app.box) {
-        clearInstance(key);
+        clearInstance(app.box[key].mountElement, app.box[key].app);
       }
       app.box = {};
     } catch (e) {
@@ -26633,10 +26636,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.results[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.results[selector].mountElement, app.results[selector].app);
       }
       for (const key in app.results) {
-        clearInstance(key);
+        clearInstance(app.results[key].mountElement, app.results[key].app);
       }
       app.results = {};
     } catch (e) {
@@ -26646,10 +26649,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.productList[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.productList[selector].mountElement, app.productList[selector].app);
       }
       for (const key in app.productList) {
-        clearInstance(key);
+        clearInstance(app.productList[key].mountElement, app.productList[key].app);
       }
       app.productList = {};
     } catch (e) {
@@ -26659,10 +26662,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.searchContainer[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.searchContainer[selector].mountElement, app.searchContainer[selector].app);
       }
       for (const key in app.searchContainer) {
-        clearInstance(key);
+        clearInstance(app.searchContainer[key].mountElement, app.searchContainer[key].app);
       }
       app.searchContainer = {};
     } catch (e) {
@@ -26672,10 +26675,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     try {
       if (selector) {
         app.recommendations[selector] = null;
-        clearInstance(selector);
+        clearInstance(app.recommendations[selector].mountElement, app.recommendations[selector].app);
       }
       for (const key in app.recommendations) {
-        clearInstance(key);
+        clearInstance(app.recommendations[key].mountElement, app.recommendations[key].app);
       }
       app.recommendations = {};
     } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/client",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "dist/lupaSearch.js",
   "module": "dist/index.mjs",
   "types": "dist/src/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@getlupa/client-sdk": "^1.3.1",
-    "@getlupa/vue": "0.1.6",
+    "@getlupa/vue": "0.1.7",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.1",