@getlupa/client 1.18.2 → 1.18.5

package/dist/lupaSearch.js

@@ -12619,6 +12619,11 @@ const getRandomString = (length) => {
   }
   return result2;
 };
+const getSocketClientId = () => {
+  const timestamp = Date.now().toString(36);
+  const randomString = getRandomString(8);
+  return `${timestamp}-${randomString}`;
+};
 const toFixedIfNecessary = (value, precision = 2) => {
   return (+parseFloat(value).toFixed(precision)).toString();
 };
@@ -12733,6 +12738,10 @@ const DEFAULT_SEARCH_BOX_OPTIONS$1 = {
   links: {
     searchResults: "/search"
   },
+  voiceSearch: {
+    enabled: false,
+    queryKey: ""
+  },
   panels: [
     {
       type: "suggestion",
@@ -14314,10 +14323,354 @@ const useSearchBoxStore = defineStore("searchBox", () => {
     resetHighlightIndex
   };
 });
+const Env = {
+  production: "https://api.lupasearch.com/v1/",
+  staging: "https://api.staging.lupasearch.com/v1/"
+};
+const VoiceServiceEnv = {
+  production: "ws://voice.lupasearch.com:3001",
+  staging: "ws://voice.lupasearch.dev:3001"
+};
+const DEFAULT_REQUEST_CONFIG = {
+  method: "POST",
+  headers: { "Content-Type": "application/json" }
+};
+const DEFAULT_HEADERS = DEFAULT_REQUEST_CONFIG.headers;
+const getVoiceServiceApiUrl = (environment, customVoiceServiceUrl) => {
+  if (customVoiceServiceUrl) {
+    return customVoiceServiceUrl;
+  }
+  return VoiceServiceEnv[environment] || VoiceServiceEnv["production"];
+};
+const getApiUrl = (environment, customBaseUrl) => {
+  if (customBaseUrl) {
+    return customBaseUrl;
+  }
+  return Env[environment] || Env["production"];
+};
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+  __name: "VoiceSearchProgressCircle",
+  props: {
+    isRecording: { type: Boolean },
+    timesliceLimit: {},
+    timeSliceLength: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const progressBar = ref(null);
+    const getProgressBarColor = (progressBarStyle) => {
+      if (!progressBarStyle.backgroundImage.startsWith("conic-gradient")) {
+        return progressBarStyle.backgroundColor;
+      }
+      const colorStops = progressBarStyle.backgroundImage.replace(/conic-gradient\(|\)$/g, "").split(")");
+      if (colorStops.length > 1) {
+        return `${colorStops[0]})`;
+      } else {
+        return progressBarStyle.backgroundColor;
+      }
+    };
+    const startProgressBar = () => {
+      if (!progressBar.value || !props.isRecording) {
+        return;
+      }
+      const duration = props.timesliceLimit * props.timeSliceLength;
+      const progressBarStyle = window.getComputedStyle(progressBar.value);
+      const progressBarColor = getProgressBarColor(progressBarStyle);
+      progressBar.value.style.background = `conic-gradient(${progressBarColor} 0%, transparent 0%)`;
+      let startTime = null;
+      function updateProgress(timestamp) {
+        if (!progressBar.value || !props.isRecording) {
+          return;
+        }
+        if (!startTime)
+          startTime = timestamp;
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(elapsed / duration, 1) * 100;
+        progressBar.value.style.background = `conic-gradient(${progressBarColor} ${progress}%, transparent ${progress}%)`;
+        if (elapsed < duration) {
+          requestAnimationFrame(updateProgress);
+        }
+      }
+      requestAnimationFrame(updateProgress);
+    };
+    const stopProgressBar = () => {
+      if (!progressBar.value) {
+        return;
+      }
+      progressBar.value.style.background = "";
+    };
+    __expose({
+      startProgressBar,
+      stopProgressBar
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "progressBar",
+        ref: progressBar,
+        class: "lupa-progress-circle"
+      }, null, 512);
+    };
+  }
+});
+const buildSocketMessageFrameHeader = (event, payloadLength) => {
+  const headerObj = { event, length: payloadLength };
+  const headerJson = JSON.stringify(headerObj);
+  const headerBytes = new TextEncoder().encode(headerJson);
+  const headerLength = new Uint32Array([headerBytes.length]);
+  const headerLengthBytes = new Uint8Array(headerLength.buffer);
+  const result2 = new Uint8Array(4 + headerBytes.length);
+  result2.set(headerLengthBytes, 0);
+  result2.set(headerBytes, 4);
+  return result2;
+};
+function useVoiceRecorder(options) {
+  const socket = ref(null);
+  const mediaStream = ref(null);
+  const mediaRecorder = ref(null);
+  const isRecording = ref(false);
+  const errorRef = ref(null);
+  const transcription = ref("");
+  const timeSliceLength = computed(() => {
+    var _a;
+    return (_a = options.timesliceLength) != null ? _a : 1e3;
+  });
+  onBeforeUnmount(() => {
+    closeSocket();
+    stopRecording();
+  });
+  const initSocket = (url, onMessage) => {
+    socket.value = new WebSocket(url);
+    socket.value.onopen = () => __async2(this, null, function* () {
+      var _a;
+      if (((_a = mediaRecorder.value) == null ? void 0 : _a.state) !== "recording") {
+        yield startRecording();
+      }
+    });
+    socket.value.onmessage = (event) => {
+      const msg = JSON.parse(event.data);
+      if (msg.event === "transcription") {
+        transcription.value = msg.transcription;
+        onMessage == null ? void 0 : onMessage(msg.transcription);
+        stopSocketConnection();
+      } else if (msg.event === "error") {
+        errorRef.value = "Server error during transcription";
+        stopRecording();
+      }
+    };
+    socket.value.onclose = () => {
+      stopRecording();
+    };
+    socket.value.onerror = () => {
+      stopRecording();
+      errorRef.value = "Service connection error";
+    };
+  };
+  const onMediaRecorderDataAvailable = (event) => __async2(this, null, function* () {
+    var _a, _b;
+    if (((_a = mediaRecorder.value) == null ? void 0 : _a.state) !== "recording")
+      return;
+    const audioBuffer = yield event.data.arrayBuffer();
+    const header = buildSocketMessageFrameHeader("audio-chunk", audioBuffer.byteLength);
+    const buffer = new Uint8Array(header.length + audioBuffer.byteLength);
+    buffer.set(header, 0);
+    buffer.set(new Uint8Array(audioBuffer), header.length);
+    (_b = socket.value) == null ? void 0 : _b.send(buffer);
+  });
+  const startRecording = () => __async2(this, null, function* () {
+    mediaStream.value = yield navigator.mediaDevices.getUserMedia({
+      video: false,
+      audio: {
+        channelCount: 1,
+        echoCancellation: true,
+        sampleRate: 16e3
+      }
+    });
+    mediaRecorder.value = new MediaRecorder(mediaStream.value, {
+      mimeType: "audio/webm; codecs=opus"
+    });
+    mediaRecorder.value.ondataavailable = onMediaRecorderDataAvailable;
+    mediaRecorder.value.start(timeSliceLength.value);
+    isRecording.value = true;
+  });
+  const stopRecording = () => {
+    var _a, _b;
+    (_a = mediaRecorder.value) == null ? void 0 : _a.stop();
+    (_b = mediaStream.value) == null ? void 0 : _b.getTracks().forEach((track2) => {
+      track2.stop();
+    });
+    isRecording.value = false;
+  };
+  const stopSocketConnection = () => {
+    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
+      const endHeader = buildSocketMessageFrameHeader("audio-chunk-end", 0);
+      socket.value.send(endHeader);
+      setTimeout(() => {
+        closeSocket();
+      }, 1e3);
+    }
+  };
+  const closeSocket = () => {
+    var _a;
+    (_a = socket.value) == null ? void 0 : _a.close();
+    socket.value = null;
+  };
+  const reset = () => {
+    stopRecording();
+    closeSocket();
+    transcription.value = "";
+    errorRef.value = null;
+    isRecording.value = false;
+  };
+  return {
+    isRecording,
+    transcription,
+    errorRef,
+    initSocket,
+    startRecording,
+    stopRecording,
+    stopSocketConnection,
+    reset,
+    closeSocket
+  };
+}
+const _hoisted_1$1l = {
+  key: 0,
+  class: "lupa-dialog-overlay"
+};
+const _hoisted_2$W = { class: "lupa-dialog-content" };
+const _hoisted_3$F = { class: "lupa-listening-text" };
+const _hoisted_4$v = { class: "lupa-mic-button-wrapper" };
+const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+  __name: "VoiceSearchDialog",
+  props: {
+    isOpen: { type: Boolean },
+    options: {}
+  },
+  emits: [
+    "close",
+    "transcript-update",
+    "stop-recognize"
+  ],
+  setup(__props, { expose: __expose, emit: emit2 }) {
+    const props = __props;
+    const optionsStore = useOptionsStore();
+    const {
+      isRecording,
+      transcription,
+      errorRef,
+      initSocket,
+      stopSocketConnection,
+      reset
+    } = useVoiceRecorder(props.options);
+    const clientId = ref(null);
+    const voiceSearchProgressBar = ref(null);
+    const timesliceLimit = computed(() => {
+      var _a;
+      return (_a = props.options.timesliceLimit) != null ? _a : 4;
+    });
+    const timeSliceLength = computed(() => {
+      var _a;
+      return (_a = props.options.timesliceLength) != null ? _a : 1e3;
+    });
+    const stopDelay = computed(() => {
+      var _a;
+      return (_a = props.options.stopDelay) != null ? _a : 700;
+    });
+    const labels = computed(() => {
+      var _a;
+      return (_a = props.options.labels) != null ? _a : {};
+    });
+    const description = computed(() => {
+      var _a, _b, _c;
+      if (errorRef.value) {
+        return (_a = labels.value.serviceError) != null ? _a : errorRef.value;
+      }
+      if (!isRecording.value) {
+        return (_b = labels.value.microphoneOff) != null ? _b : "Microphone is off. Try again.";
+      }
+      return (_c = labels.value.listening) != null ? _c : "Listening...";
+    });
+    watch(transcription, (newValue) => {
+      emit2("transcript-update", newValue);
+    });
+    const handleRecordingButtonClick = () => {
+      var _a, _b;
+      if (isRecording.value) {
+        setTimeout(() => {
+          stopSocketConnection();
+          handleOnStopEvent();
+        }, stopDelay.value);
+        return;
+      }
+      const voiceServiceUrl = getVoiceServiceApiUrl(
+        optionsStore.envOptions.environment,
+        props.options.customVoiceServiceUrl
+      );
+      const socketUrl = `${voiceServiceUrl}?clientId=${clientId.value}&queryKey=${props.options.queryKey}&languageCode=${(_a = props.options.language) != null ? _a : "en-US"}&connectionType=write-first`;
+      initSocket(socketUrl);
+      (_b = voiceSearchProgressBar.value) == null ? void 0 : _b.startProgressBar();
+      setTimeout(() => {
+        stopSocketConnection();
+        handleOnStopEvent();
+      }, timesliceLimit.value * timeSliceLength.value);
+    };
+    const handleOnStopEvent = () => {
+      var _a;
+      setTimeout(() => {
+        if (errorRef.value)
+          return;
+        emit2("stop-recognize", transcription.value);
+      }, 1500);
+      (_a = voiceSearchProgressBar.value) == null ? void 0 : _a.stopProgressBar();
+    };
+    onMounted(() => {
+      clientId.value = getSocketClientId();
+    });
+    onBeforeUnmount(() => {
+      clientId.value = null;
+    });
+    const dialogReset = () => {
+      var _a;
+      reset();
+      (_a = voiceSearchProgressBar.value) == null ? void 0 : _a.stopProgressBar();
+    };
+    __expose({
+      handleRecordingButtonClick,
+      reset: dialogReset
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        props.isOpen ? (openBlock(), createElementBlock("div", _hoisted_1$1l, [
+          createBaseVNode("button", {
+            class: "lupa-dialog-box-close-button",
+            onClick: _cache[0] || (_cache[0] = () => emit2("close"))
+          }),
+          createBaseVNode("div", _hoisted_2$W, [
+            createBaseVNode("p", _hoisted_3$F, toDisplayString(description.value), 1),
+            createBaseVNode("div", _hoisted_4$v, [
+              createBaseVNode("button", {
+                class: normalizeClass(["lupa-mic-button", { recording: unref(isRecording) }]),
+                onClick: handleRecordingButtonClick
+              }, null, 2),
+              createVNode(_sfc_main$1z, {
+                ref_key: "voiceSearchProgressBar",
+                ref: voiceSearchProgressBar,
+                class: "lupa-progress-circle",
+                isRecording: unref(isRecording),
+                timesliceLimit: timesliceLimit.value,
+                timeSliceLength: timeSliceLength.value
+              }, null, 8, ["isRecording", "timesliceLimit", "timeSliceLength"])
+            ])
+          ])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 const _hoisted_1$1k = { id: "lupa-search-box-input-container" };
 const _hoisted_2$V = { class: "lupa-input-clear" };
 const _hoisted_3$E = { id: "lupa-search-box-input" };
-const _hoisted_4$v = ["value"];
+const _hoisted_4$u = ["value"];
 const _hoisted_5$l = ["aria-label", "placeholder"];
 const _hoisted_6$9 = /* @__PURE__ */ createBaseVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
 const _hoisted_7$7 = [
@@ -14327,6 +14680,7 @@ const _hoisted_8$3 = {
   key: 0,
   class: "lupa-close-label"
 };
+const _hoisted_9$3 = { key: 1 };
 const _sfc_main$1x = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxInput",
   props: {
@@ -14342,6 +14696,8 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     const searchBoxStore = useSearchBoxStore();
     const { query } = storeToRefs(paramStore);
     const mainInput = ref(null);
+    const voiceDialogOverlay = ref(null);
+    const isVoiceDialogOpen = ref(false);
     const emitInputOnFocus = computed(() => {
       var _a;
       return (_a = props.emitInputOnFocus) != null ? _a : true;
@@ -14352,6 +14708,10 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
         return (_a = props.suggestedValue) != null ? _a : { value: "", override: false, item: { suggestion: "" } };
       }
     );
+    const isVoiceSearchEnabled = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.options.voiceSearch) == null ? void 0 : _a.enabled) != null ? _b : false;
+    });
     const labels = computed(() => props.options.labels);
     const input2 = ref("");
     const inputValue = computed({
@@ -14375,6 +14735,12 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
       var _a;
       return (_a = labels.value.searchInputAriaLabel) != null ? _a : "Search input";
     });
+    onMounted(() => {
+      document.addEventListener("click", handleClickOutsideVoiceDialogOverlay);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutsideVoiceDialogOverlay);
+    });
     watch(suggestedValue, () => {
       if (suggestedValue.value.override) {
         input2.value = suggestedValue.value.item.suggestion;
@@ -14409,6 +14775,37 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
       }
       (_a = mainInput == null ? void 0 : mainInput.value) == null ? void 0 : _a.focus();
     };
+    const openVoiceSearchDialog = () => {
+      var _a;
+      isVoiceDialogOpen.value = true;
+      (_a = voiceDialogOverlay.value) == null ? void 0 : _a.handleRecordingButtonClick();
+    };
+    const closeDialog = () => {
+      var _a;
+      isVoiceDialogOpen.value = false;
+      (_a = voiceDialogOverlay.value) == null ? void 0 : _a.reset();
+    };
+    const handleVoiceSearchOutput = (transcription) => {
+      inputValue.value = transcription;
+      handleSubmit();
+    };
+    const stopRecognition = (trascription) => {
+      setTimeout(() => {
+        isVoiceDialogOpen.value = false;
+        handleVoiceSearchOutput(trascription);
+      }, 500);
+    };
+    const handleClickOutsideVoiceDialogOverlay = (event) => {
+      if (event.target.classList.contains("lupa-voice-search-button")) {
+        return;
+      }
+      if (voiceDialogOverlay.value && voiceDialogOverlay.value.$el.contains(event.target)) {
+        return;
+      }
+      if (isVoiceDialogOpen.value) {
+        closeDialog();
+      }
+    };
     __expose({ focus });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$1k, [
@@ -14424,7 +14821,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
             "aria-hidden": "true",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$v),
+          }, null, 8, _hoisted_4$u),
           withDirectives(createBaseVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -14452,7 +14849,23 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
           onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("close"))
         }, [
           labels.value.close ? (openBlock(), createElementBlock("span", _hoisted_8$3, toDisplayString(labels.value.close), 1)) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        isVoiceSearchEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_9$3, [
+          createBaseVNode("button", {
+            onClick: openVoiceSearchDialog,
+            class: "lupa-voice-search-button"
+          })
+        ])) : createCommentVNode("", true),
+        isVoiceSearchEnabled.value ? (openBlock(), createBlock(_sfc_main$1y, {
+          key: 2,
+          ref_key: "voiceDialogOverlay",
+          ref: voiceDialogOverlay,
+          isOpen: isVoiceDialogOpen.value,
+          options: props.options.voiceSearch,
+          onClose: closeDialog,
+          onTranscriptUpdate: handleVoiceSearchOutput,
+          onStopRecognize: stopRecognition
+        }, null, 8, ["isOpen", "options"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -14650,7 +15063,7 @@ const _hoisted_3$D = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$u = {
+const _hoisted_4$t = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -14696,7 +15109,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$1g)) : (openBlock(), createElementBlock("div", _hoisted_2$T, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$D, [
-          createBaseVNode("span", _hoisted_4$u, toDisplayString(facetLabel.value), 1),
+          createBaseVNode("span", _hoisted_4$t, toDisplayString(facetLabel.value), 1),
           createBaseVNode("span", _hoisted_5$k, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
@@ -24190,7 +24603,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
 const _hoisted_1$1a = ["innerHTML"];
 const _hoisted_2$P = { key: 0 };
 const _hoisted_3$C = { key: 1 };
-const _hoisted_4$t = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$s = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$j = { class: "lupa-search-box-custom-text" };
 const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
@@ -24223,7 +24636,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$C, [
-          createBaseVNode("div", _hoisted_4$t, toDisplayString(label.value), 1),
+          createBaseVNode("div", _hoisted_4$s, toDisplayString(label.value), 1),
           createBaseVNode("div", _hoisted_5$j, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -24573,7 +24986,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
 const _hoisted_1$18 = { class: "lupa-search-box-add-to-cart-wrapper" };
 const _hoisted_2$O = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$B = ["disabled"];
-const _hoisted_4$s = ["href"];
+const _hoisted_4$r = ["href"];
 const _hoisted_5$i = ["onClick", "disabled"];
 const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductAddToCart",
@@ -24621,7 +25034,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-add-to-cart",
             disabled: !inStockValue.value || loading.value
           }, _ctx.dynamicAttributes, { onClick: handleClick }), [
-            createBaseVNode("a", { href: _ctx.link }, toDisplayString(label.value), 9, _hoisted_4$s)
+            createBaseVNode("a", { href: _ctx.link }, toDisplayString(label.value), 9, _hoisted_4$r)
           ], 16, _hoisted_3$B)) : (openBlock(), createElementBlock("button", mergeProps({
             key: 1,
             onClick: withModifiers(handleClick, ["stop", "prevent"]),
@@ -24741,7 +25154,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
 const _hoisted_1$16 = { class: "lupa-badge-title" };
 const _hoisted_2$N = ["src"];
 const _hoisted_3$A = { key: 1 };
-const _hoisted_4$r = {
+const _hoisted_4$q = {
   key: 0,
   class: "lupa-badge-full-text"
 };
@@ -24785,7 +25198,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
           }, null, 8, _hoisted_2$N)) : createCommentVNode("", true),
           hasTitleText.value && showTitle.value ? (openBlock(), createElementBlock("span", _hoisted_3$A, toDisplayString(_ctx.badge.titleText), 1)) : createCommentVNode("", true)
         ]),
-        hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$r, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
+        hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$q, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
       ], 6);
     };
   }
@@ -25700,7 +26113,7 @@ const _hoisted_3$y = {
   key: 0,
   class: "lupa-panel-title lupa-panel-title-top-results"
 };
-const _hoisted_4$q = {
+const _hoisted_4$p = {
   key: 1,
   class: "lupa-panel-title"
 };
@@ -25893,7 +26306,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
                 ((_a = panel.labels) == null ? void 0 : _a.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$y, toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : createCommentVNode("", true),
-                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$q, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
+                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
                 panel.queryKey && canShowPanel(panel) ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
                   key: 2,
                   panel,
@@ -25991,7 +26404,8 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
         "labels",
         "links",
         "inputAttributes",
-        "showSubmitButton"
+        "showSubmitButton",
+        "voiceSearch"
       ])
     );
     const panelOptions = computed(
@@ -26391,7 +26805,7 @@ const _hoisted_3$x = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$p = { key: 1 };
+const _hoisted_4$o = { key: 1 };
 const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
@@ -26442,7 +26856,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
                 class: "lupa-did-you-mean lupa-highlighted-search-text",
                 "data-cy": "did-you-mean-value",
                 onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$p, toDisplayString(label) + " ", 1))
+              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$o, toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : createCommentVNode("", true)
@@ -26492,7 +26906,7 @@ const _hoisted_3$w = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$o = { class: "lupa-results-total-count-number" };
+const _hoisted_4$n = { class: "lupa-results-total-count-number" };
 const _hoisted_5$g = ["innerHTML"];
 const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsTitle",
@@ -26542,7 +26956,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           queryText.value && !searchResultsTitleTemplate.value ? (openBlock(), createElementBlock("span", _hoisted_2$G, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
           showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$w, [
             createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
-            createBaseVNode("span", _hoisted_4$o, toDisplayString(unref(totalItems)), 1),
+            createBaseVNode("span", _hoisted_4$n, toDisplayString(unref(totalItems)), 1),
             createTextVNode(")")
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
@@ -26575,22 +26989,42 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   emits: ["remove"],
   setup(__props, { emit: emit2 }) {
     const props = __props;
-    const facetKeyClass = computed(() => {
-      return `lupa-facet-active-filter-${props.filter.key}`;
+    const facetKeyClass = computed(() => `lupa-facet-active-filter-${props.filter.key}`);
+    const { searchResultOptions } = storeToRefs(useOptionsStore());
+    const units = computed(() => {
+      var _a, _b, _c, _d, _e;
+      return (_e = (_d = (_c = (_b = (_a = searchResultOptions.value) == null ? void 0 : _a.filters) == null ? void 0 : _b.facets) == null ? void 0 : _c.stats) == null ? void 0 : _d.units) != null ? _e : {};
     });
-    const handleClick = () => {
+    function handleClick() {
       emit2("remove", { filter: props.filter });
-    };
+    }
+    function formatFilterValue(filter2) {
+      const unit = units.value[filter2.key] || "";
+      let min, max;
+      if (Array.isArray(filter2.value)) {
+        [min, max] = filter2.value.map(String);
+      } else if (typeof filter2.value === "string" && filter2.value.includes("-")) {
+        const parts = filter2.value.split("-").map((s) => s.trim());
+        if (parts.length === 2)
+          [min, max] = parts;
+      }
+      if (min != null && max != null) {
+        return `${min} ${unit} – ${max} ${unit}`;
+      }
+      return `${filter2.value} ${unit}`.trim();
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["lupa-search-result-filter-value", { [facetKeyClass.value]: true }])
+        class: normalizeClass(["lupa-search-result-filter-value", [facetKeyClass.value]]),
+        "data-cy": "lupa-current-filter-item"
       }, [
         createBaseVNode("div", {
           class: "lupa-current-filter-action",
-          onClick: handleClick
-        }, "⨉"),
+          onClick: handleClick,
+          "aria-label": "Remove filter"
+        }, " ⨉ "),
         createBaseVNode("div", _hoisted_1$U, toDisplayString(_ctx.filter.label) + ": ", 1),
-        createBaseVNode("div", _hoisted_2$F, toDisplayString(_ctx.filter.value), 1)
+        createBaseVNode("div", _hoisted_2$F, toDisplayString(formatFilterValue(props.filter)), 1)
       ], 2);
     };
   }
@@ -26604,7 +27038,7 @@ const _hoisted_3$v = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$n = { class: "lupa-current-filter-list" };
+const _hoisted_4$m = { class: "lupa-current-filter-list" };
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "CurrentFilters",
   props: {
@@ -26612,6 +27046,14 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     expandable: { type: Boolean }
   },
   setup(__props) {
+    const optionsStore = useOptionsStore();
+    const { searchResultOptions } = storeToRefs(optionsStore);
+    const units = computed(
+      () => {
+        var _a, _b, _c, _d, _e;
+        return (_e = (_d = (_c = (_b = (_a = searchResultOptions == null ? void 0 : searchResultOptions.value) == null ? void 0 : _a.filters) == null ? void 0 : _b.facets) == null ? void 0 : _c.stats) == null ? void 0 : _d.units) != null ? _e : {};
+      }
+    );
     const isOpen = ref(false);
     const paramsStore = useParamsStore();
     const optionStore = useOptionsStore();
@@ -26688,13 +27130,14 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           }, null, 2)) : createCommentVNode("", true)
         ]),
         !_ctx.expandable || isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3$v, [
-          createBaseVNode("div", _hoisted_4$n, [
+          createBaseVNode("div", _hoisted_4$m, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(currentDisplayFilters.value, (filter2) => {
               return openBlock(), createBlock(_sfc_main$_, {
                 key: filter2.key + "_" + filter2.value,
                 filter: filter2,
+                units: units.value,
                 onRemove: handleRemove
-              }, null, 8, ["filter"]);
+              }, null, 8, ["filter", "units"]);
             }), 128))
           ]),
           createBaseVNode("div", {
@@ -26756,7 +27199,7 @@ const _hoisted_1$R = {
 };
 const _hoisted_2$D = { class: "lupa-category-back" };
 const _hoisted_3$u = ["href"];
-const _hoisted_4$m = ["href"];
+const _hoisted_4$l = ["href"];
 const _hoisted_5$f = { class: "lupa-child-category-list" };
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "CategoryFilter",
@@ -26863,7 +27306,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
             href: parentUrlLink.value,
             class: normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, toDisplayString(parentTitle.value), 11, _hoisted_4$m)
+          }, toDisplayString(parentTitle.value), 11, _hoisted_4$l)
         ], 2),
         createBaseVNode("div", _hoisted_5$f, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(categoryChildren.value, (child) => {
@@ -26884,7 +27327,7 @@ const _hoisted_1$Q = {
 };
 const _hoisted_2$C = ["placeholder"];
 const _hoisted_3$t = { class: "lupa-terms-list" };
-const _hoisted_4$l = ["onClick"];
+const _hoisted_4$k = ["onClick"];
 const _hoisted_5$e = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$8 = { class: "lupa-term-label" };
 const _hoisted_7$6 = {
@@ -27011,7 +27454,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
                 createBaseVNode("span", _hoisted_6$8, toDisplayString(getItemLabel(item)), 1),
                 _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_7$6, "(" + toDisplayString(item.count) + ")", 1)) : createCommentVNode("", true)
               ], 2)
-            ], 10, _hoisted_4$l);
+            ], 10, _hoisted_4$k);
           }), 128))
         ]),
         displayShowMore.value ? (openBlock(), createElementBlock("div", {
@@ -28011,22 +28454,24 @@ const _hoisted_3$s = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$k = {
+const _hoisted_4$j = {
   key: 0,
   class: "lupa-stats-range-label"
 };
 const _hoisted_5$d = { class: "lupa-stats-from" };
 const _hoisted_6$7 = ["max", "min", "pattern", "aria-label"];
 const _hoisted_7$5 = { key: 0 };
-const _hoisted_8$1 = /* @__PURE__ */ createBaseVNode("div", { class: "lupa-stats-separator" }, null, -1);
-const _hoisted_9$1 = {
+const _hoisted_8$1 = { key: 1 };
+const _hoisted_9$1 = /* @__PURE__ */ createBaseVNode("div", { class: "lupa-stats-separator" }, null, -1);
+const _hoisted_10 = {
   key: 0,
   class: "lupa-stats-range-label"
 };
-const _hoisted_10 = { class: "lupa-stats-to" };
-const _hoisted_11 = ["max", "min", "pattern", "aria-label"];
-const _hoisted_12 = { key: 0 };
-const _hoisted_13 = {
+const _hoisted_11 = { class: "lupa-stats-to" };
+const _hoisted_12 = ["max", "min", "pattern", "aria-label"];
+const _hoisted_13 = { key: 0 };
+const _hoisted_14 = { key: 1 };
+const _hoisted_15 = {
   key: 2,
   class: "lupa-stats-slider-wrapper"
 };
@@ -28093,7 +28538,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         if (!value || value > facetMax.value) {
           return;
         }
-        innerSliderRange.value = [value, sliderRange.value[1]];
+        innerSliderRange.value = [sliderRange.value[1], value];
         handleInputChange();
       }
     });
@@ -28149,7 +28594,18 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     });
     const statsSummary = computed(() => {
       const [min, max] = sliderRange.value;
-      return isPrice.value ? formatPriceSummary([min, max], currency.value, separator.value, currencyTemplate.value) : formatRange({ gte: min, lte: max });
+      if (isPrice.value) {
+        return formatPriceSummary(
+          [min, max],
+          currency.value,
+          separator.value,
+          currencyTemplate.value
+        );
+      }
+      if (unit.value) {
+        return `${min} ${unit.value} - ${max} ${unit.value}`;
+      }
+      return formatRange({ gte: min, lte: max });
     });
     const separator = computed(() => {
       var _a, _b, _c;
@@ -28210,11 +28666,17 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     const handleDragging = (value) => {
       innerSliderRange.value = value;
     };
+    const unit = computed(
+      () => {
+        var _a, _b, _c, _d, _e;
+        return (_e = (_d = (_a = props.options.stats) == null ? void 0 : _a.units) == null ? void 0 : _d[(_c = (_b = props.facet) == null ? void 0 : _b.key) != null ? _c : ""]) != null ? _e : "";
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$P, [
         !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$B, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$s, [
           createBaseVNode("div", null, [
-            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$k, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
+            rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
             createBaseVNode("div", _hoisted_5$d, [
               withDirectives(createBaseVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -28232,13 +28694,14 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
                   { lazy: true }
                 ]
               ]),
-              isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(currency.value), 1)) : createCommentVNode("", true)
+              isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(currency.value), 1)) : createCommentVNode("", true),
+              unit.value ? (openBlock(), createElementBlock("span", _hoisted_8$1, toDisplayString(unit.value), 1)) : createCommentVNode("", true)
             ])
           ]),
-          _hoisted_8$1,
+          _hoisted_9$1,
           createBaseVNode("div", null, [
-            rangeLabelTo.value ? (openBlock(), createElementBlock("div", _hoisted_9$1, toDisplayString(rangeLabelTo.value), 1)) : createCommentVNode("", true),
-            createBaseVNode("div", _hoisted_10, [
+            rangeLabelTo.value ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(rangeLabelTo.value), 1)) : createCommentVNode("", true),
+            createBaseVNode("div", _hoisted_11, [
               withDirectives(createBaseVNode("input", {
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
                 type: "text",
@@ -28247,7 +28710,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
                 min: facetMin.value,
                 pattern: sliderInputFormat.value,
                 "aria-label": ariaLabelTo.value
-              }, null, 8, _hoisted_11), [
+              }, null, 8, _hoisted_12), [
                 [
                   vModelText,
                   toValue.value,
@@ -28255,11 +28718,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
                   { lazy: true }
                 ]
               ]),
-              isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(currency.value), 1)) : createCommentVNode("", true)
+              isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(currency.value), 1)) : createCommentVNode("", true),
+              unit.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unit.value), 1)) : createCommentVNode("", true)
             ])
           ])
         ])),
-        isSliderVisible.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+        isSliderVisible.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
           createVNode(unref(m), {
             class: "slider",
             tooltips: false,
@@ -28284,7 +28748,7 @@ const _hoisted_3$r = {
   key: 0,
   class: "lupa-term-count"
 };
-const _hoisted_4$j = {
+const _hoisted_4$i = {
   key: 0,
   class: "lupa-facet-level"
 };
@@ -28353,7 +28817,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_3$r, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
           ], 2)
         ]),
-        showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, [
+        showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_4$i, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(treeItem.value.children, (itemChild) => {
             return openBlock(), createBlock(_component_HierarchyFacetLevel, {
               key: itemChild.title,
@@ -28886,7 +29350,7 @@ const _hoisted_1$H = {
 };
 const _hoisted_2$w = ["onClick"];
 const _hoisted_3$p = { class: "lupa-mobile-sidebar-content" };
-const _hoisted_4$i = { class: "lupa-sidebar-top" };
+const _hoisted_4$h = { class: "lupa-sidebar-top" };
 const _hoisted_5$c = { class: "lupa-sidebar-title" };
 const _hoisted_6$6 = {
   key: 0,
@@ -28930,7 +29394,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           onClick: withModifiers(handleMobileToggle, ["stop"])
         }, null, 8, _hoisted_2$w),
         createBaseVNode("div", _hoisted_3$p, [
-          createBaseVNode("div", _hoisted_4$i, [
+          createBaseVNode("div", _hoisted_4$h, [
             createBaseVNode("div", _hoisted_5$c, [
               createTextVNode(toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (openBlock(), createElementBlock("span", _hoisted_6$6, toDisplayString(unref(currentFilterCount)), 1)) : createCommentVNode("", true)
@@ -28958,7 +29422,7 @@ const _hoisted_3$o = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$h = { key: 2 };
+const _hoisted_4$g = { key: 2 };
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
@@ -29000,7 +29464,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 return handleNavigation(e2, (_a2 = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a2 : "");
               }
             }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$v)) : (openBlock(), createElementBlock("span", _hoisted_3$o, toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$h, toDisplayString((_a = breadcrumb.separator) != null ? _a : "/"), 1)) : createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$g, toDisplayString((_a = breadcrumb.separator) != null ? _a : "/"), 1)) : createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -29162,7 +29626,7 @@ const _hoisted_2$u = {
   class: "lupa-page-number-separator"
 };
 const _hoisted_3$n = ["onClick"];
-const _hoisted_4$g = {
+const _hoisted_4$f = {
   key: 0,
   class: "lupa-page-number-separator"
 };
@@ -29268,7 +29732,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           }, toDisplayString(page), 11, _hoisted_3$n);
         }), 128)),
         showLastPage.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$g, "...")) : createCommentVNode("", true),
+          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$f, "...")) : createCommentVNode("", true),
           createBaseVNode("div", {
             class: "lupa-page-number lupa-page-number-last",
             onClick: _cache[2] || (_cache[2] = () => {
@@ -29293,7 +29757,7 @@ const _hoisted_1$B = {
 };
 const _hoisted_2$t = { id: "lupa-select" };
 const _hoisted_3$m = { class: "lupa-select-label" };
-const _hoisted_4$f = ["aria-label"];
+const _hoisted_4$e = ["aria-label"];
 const _hoisted_5$b = ["value"];
 const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsPageSize",
@@ -29340,7 +29804,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 value: option
               }, toDisplayString(prefixLabel.value) + toDisplayString(option), 9, _hoisted_5$b);
             }), 128))
-          ], 40, _hoisted_4$f)
+          ], 40, _hoisted_4$e)
         ])
       ]);
     };
@@ -29352,7 +29816,7 @@ const _hoisted_1$A = {
 };
 const _hoisted_2$s = { id: "lupa-select" };
 const _hoisted_3$l = { class: "lupa-select-label" };
-const _hoisted_4$e = ["aria-label"];
+const _hoisted_4$d = ["aria-label"];
 const _hoisted_5$a = ["value"];
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsSort",
@@ -29420,7 +29884,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                 value: option.key
               }, toDisplayString(option.label), 9, _hoisted_5$a);
             }), 128))
-          ], 40, _hoisted_4$e), [
+          ], 40, _hoisted_4$d), [
             [vModelSelect, selectedKey.value]
           ])
         ])
@@ -29434,7 +29898,7 @@ const _hoisted_2$r = {
   class: "lupa-toolbar-right-title"
 };
 const _hoisted_3$k = { key: 2 };
-const _hoisted_4$d = { key: 4 };
+const _hoisted_4$c = { key: 4 };
 const _hoisted_5$9 = { key: 6 };
 const _hoisted_6$5 = { class: "lupa-toolbar-right" };
 const _hoisted_7$3 = {
@@ -29562,7 +30026,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             label: searchSummaryLabel.value,
             clearable: unref(hasAnyFilter) && showFilterClear.value,
             onClear: handleClearAll
-          }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$d)),
+          }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$c)),
           displayPageSelect.value ? (openBlock(), createBlock(_sfc_main$H, {
             key: 5,
             options: paginationOptions.value.pageSelect,
@@ -29615,7 +30079,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
 const _hoisted_1$y = ["title", "innerHTML"];
 const _hoisted_2$q = ["title"];
 const _hoisted_3$j = ["href", "innerHTML"];
-const _hoisted_4$c = ["title"];
+const _hoisted_4$b = ["title"];
 const _hoisted_5$8 = {
   key: 0,
   class: "lupa-search-results-product-title-text"
@@ -29683,7 +30147,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           class: "lupa-search-results-product-title-text lupa-title-link",
           onClick: handleNavigation
         }, toDisplayString(title.value), 9, _hoisted_6$4)) : createCommentVNode("", true)
-      ], 12, _hoisted_4$c));
+      ], 12, _hoisted_4$b));
     };
   }
 });
@@ -29726,7 +30190,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
 const _hoisted_1$w = { id: "lupa-search-results-rating" };
 const _hoisted_2$p = { class: "lupa-ratings" };
 const _hoisted_3$i = { class: "lupa-ratings-base" };
-const _hoisted_4$b = ["innerHTML"];
+const _hoisted_4$a = ["innerHTML"];
 const _hoisted_5$7 = { class: "lupa-rating-wrapper" };
 const _hoisted_6$3 = ["innerHTML"];
 const _hoisted_7$2 = ["href"];
@@ -29776,7 +30240,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                 key: index,
                 innerHTML: star,
                 class: "lupa-rating lupa-rating-not-highlighted"
-              }, null, 8, _hoisted_4$b);
+              }, null, 8, _hoisted_4$a);
             }), 128))
           ]),
           createBaseVNode("div", _hoisted_5$7, [
@@ -29863,7 +30327,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
 const _hoisted_1$u = { class: "lupa-search-results-add-to-cart-wrapper" };
 const _hoisted_2$o = { class: "lupa-search-results-product-addtocart" };
 const _hoisted_3$h = ["disabled"];
-const _hoisted_4$a = ["href"];
+const _hoisted_4$9 = ["href"];
 const _hoisted_5$6 = ["id", "disabled", "onClick"];
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductAddToCart",
@@ -29882,6 +30346,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       return (_a = props.inStock) != null ? _a : true;
     });
     const searchResultStore = useSearchResultStore();
+    const optionsStore = useOptionsStore();
+    const { searchResultOptions } = storeToRefs(optionsStore);
     const { addToCartAmount } = storeToRefs(searchResultStore);
     const loading = ref(false);
     const label = computed(() => {
@@ -29892,7 +30358,16 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const id2 = (_a = props.item.id) != null ? _a : "";
       return `lupa-add-to-cart-${id2}`;
     });
-    const handleClick = () => __async2(this, null, function* () {
+    const productCardIsClickable = computed(() => {
+      return searchResultOptions.value.isLink;
+    });
+    const hasLink = computed(() => {
+      return Boolean(props.link && props.options.link);
+    });
+    const handleClick = (e2) => __async2(this, null, function* () {
+      if (productCardIsClickable.value && !hasLink.value) {
+        e2.preventDefault();
+      }
       loading.value = true;
       if (props.options.emitEvent) {
         const event = new CustomEvent(props.options.emitEvent, { detail: { item: props.item } });
@@ -29904,9 +30379,6 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       emit2("productEvent", { type: "addToCart" });
       loading.value = false;
     });
-    const hasLink = computed(() => {
-      return Boolean(props.link && props.options.link);
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$u, [
         createBaseVNode("div", _hoisted_2$o, [
@@ -29916,7 +30388,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-add-to-cart",
             disabled: !inStockValue.value || loading.value
           }, _ctx.dynamicAttributes, { onClick: handleClick }), [
-            createBaseVNode("a", { href: _ctx.link }, toDisplayString(label.value), 9, _hoisted_4$a)
+            createBaseVNode("a", { href: _ctx.link }, toDisplayString(label.value), 9, _hoisted_4$9)
           ], 16, _hoisted_3$h)) : (openBlock(), createElementBlock("button", mergeProps({
             key: 1,
             id: id.value,
@@ -29934,7 +30406,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
 const _hoisted_1$t = ["innerHTML"];
 const _hoisted_2$n = { key: 0 };
 const _hoisted_3$g = { key: 1 };
-const _hoisted_4$9 = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$8 = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$5 = { class: "lupa-search-box-custom-text" };
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductCustom",
@@ -29979,7 +30451,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         class: className.value
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$n, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$g, [
-          createBaseVNode("div", _hoisted_4$9, toDisplayString(label.value), 1),
+          createBaseVNode("div", _hoisted_4$8, toDisplayString(label.value), 1),
           createBaseVNode("div", _hoisted_5$5, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -30025,7 +30497,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 const _hoisted_1$r = { id: "lupa-search-results-rating" };
 const _hoisted_2$m = ["innerHTML"];
 const _hoisted_3$f = { class: "lupa-ratings" };
-const _hoisted_4$8 = ["href"];
+const _hoisted_4$7 = ["href"];
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductSingleStarRating",
   props: {
@@ -30063,7 +30535,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         createBaseVNode("a", {
           href: ratingLink.value,
           class: "lupa-total-ratings"
-        }, toDisplayString(totalRatings.value), 9, _hoisted_4$8)
+        }, toDisplayString(totalRatings.value), 9, _hoisted_4$7)
       ]);
     };
   }
@@ -30164,13 +30636,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
     };
   }
 }));
-const _hoisted_1$q = ["onMouseup"];
-const _hoisted_2$l = ["href"];
-const _hoisted_3$e = {
+const _hoisted_1$q = ["href"];
+const _hoisted_2$l = {
   key: 0,
   class: "lupa-out-of-stock"
 };
-const _hoisted_4$7 = { class: "lupa-search-result-product-details-section" };
+const _hoisted_3$e = { class: "lupa-search-result-product-details-section" };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsProductCard",
   props: {
@@ -30199,6 +30670,9 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const listLayoutClass = computed(() => {
       return layout.value === ResultsLayoutEnum.LIST && !props.isAdditionalPanel ? "lupa-search-result-product-contents-list" : "";
     });
+    const useLinkWrapper = computed(() => {
+      return props.options.isLink;
+    });
     const badgesOptions = computed(() => {
       return __spreadProps2(__spreadValues2({}, props.options.badges), { product: props.product });
     });
@@ -30327,78 +30801,84 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       checkIfIsInStock();
     }
     return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", mergeProps({
+      return openBlock(), createBlock(resolveDynamicComponent(useLinkWrapper.value ? "a" : "div"), mergeProps({
+        href: useLinkWrapper.value ? link.value : null,
         id: "lupa-search-result-product-card",
         "data-cy": "lupa-search-result-product-card",
         class: ["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]
       }, customDocumentHtmlAttributes.value, {
         onClick: handleClick,
         onMouseup: withModifiers(handleClick, ["middle", "exact"])
-      }), [
-        createVNode(_sfc_main$19, { options: badgesOptions.value }, null, 8, ["options"]),
-        createBaseVNode("div", {
-          class: normalizeClass(["lupa-search-result-product-contents", listLayoutClass.value])
-        }, [
-          createBaseVNode("a", {
-            class: "lupa-search-result-product-image-section",
-            href: link.value,
-            onClick: handleNavigation
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
-              return openBlock(), createBlock(_sfc_main$t, {
-                class: "lupa-search-results-product-element",
-                item: _ctx.product,
-                element,
-                key: element.key,
-                labels: labels.value,
-                inStock: isInStock.value,
-                link: link.value,
-                onProductEvent: handleProductEvent
-              }, null, 8, ["item", "element", "labels", "inStock", "link"]);
-            }), 128)),
-            createVNode(_sfc_main$19, {
-              options: badgesOptions.value,
-              position: "image",
-              class: "lupa-image-badges"
-            }, null, 8, ["options"]),
-            ((_a = labels.value) == null ? void 0 : _a.outOfStock) && !isInStock.value ? (openBlock(), createElementBlock("div", _hoisted_3$e, toDisplayString(labels.value.outOfStock), 1)) : createCommentVNode("", true)
-          ], 8, _hoisted_2$l),
-          createBaseVNode("div", _hoisted_4$7, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
-              return openBlock(), createBlock(_sfc_main$t, {
-                class: "lupa-search-results-product-element",
-                item: _ctx.product,
-                element,
-                key: element.key,
-                labels: labels.value,
-                inStock: isInStock.value,
-                link: link.value,
-                onProductEvent: handleProductEvent
-              }, null, 8, ["item", "element", "labels", "inStock", "link"]);
-            }), 128))
-          ]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(elementGroups.value, (group) => {
-            return openBlock(), createElementBlock("div", {
-              key: group,
-              class: normalizeClass("lupa-element-group-" + group)
+      }), {
+        default: withCtx(() => {
+          var _a;
+          return [
+            createVNode(_sfc_main$19, { options: badgesOptions.value }, null, 8, ["options"]),
+            createBaseVNode("div", {
+              class: normalizeClass(["lupa-search-result-product-contents", listLayoutClass.value])
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(getGroupElements(group), (element) => {
-                return openBlock(), createBlock(_sfc_main$t, {
-                  class: "lupa-search-results-product-element",
-                  item: _ctx.product,
-                  element,
-                  key: element.key,
-                  labels: labels.value,
-                  inStock: isInStock.value,
-                  link: link.value,
-                  onProductEvent: handleProductEvent
-                }, null, 8, ["item", "element", "labels", "inStock", "link"]);
+              createBaseVNode("a", {
+                class: "lupa-search-result-product-image-section",
+                href: link.value,
+                onClick: handleNavigation
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
+                  return openBlock(), createBlock(_sfc_main$t, {
+                    class: "lupa-search-results-product-element",
+                    item: _ctx.product,
+                    element,
+                    key: element.key,
+                    labels: labels.value,
+                    inStock: isInStock.value,
+                    link: link.value,
+                    onProductEvent: handleProductEvent
+                  }, null, 8, ["item", "element", "labels", "inStock", "link"]);
+                }), 128)),
+                createVNode(_sfc_main$19, {
+                  options: badgesOptions.value,
+                  position: "image",
+                  class: "lupa-image-badges"
+                }, null, 8, ["options"]),
+                ((_a = labels.value) == null ? void 0 : _a.outOfStock) && !isInStock.value ? (openBlock(), createElementBlock("div", _hoisted_2$l, toDisplayString(labels.value.outOfStock), 1)) : createCommentVNode("", true)
+              ], 8, _hoisted_1$q),
+              createBaseVNode("div", _hoisted_3$e, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
+                  return openBlock(), createBlock(_sfc_main$t, {
+                    class: "lupa-search-results-product-element",
+                    item: _ctx.product,
+                    element,
+                    key: element.key,
+                    labels: labels.value,
+                    inStock: isInStock.value,
+                    link: link.value,
+                    onProductEvent: handleProductEvent
+                  }, null, 8, ["item", "element", "labels", "inStock", "link"]);
+                }), 128))
+              ]),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(elementGroups.value, (group) => {
+                return openBlock(), createElementBlock("div", {
+                  key: group,
+                  class: normalizeClass("lupa-element-group-" + group)
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(getGroupElements(group), (element) => {
+                    return openBlock(), createBlock(_sfc_main$t, {
+                      class: "lupa-search-results-product-element",
+                      item: _ctx.product,
+                      element,
+                      key: element.key,
+                      labels: labels.value,
+                      inStock: isInStock.value,
+                      link: link.value,
+                      onProductEvent: handleProductEvent
+                    }, null, 8, ["item", "element", "labels", "inStock", "link"]);
+                  }), 128))
+                ], 2);
               }), 128))
-            ], 2);
-          }), 128))
-        ], 2)
-      ], 16, _hoisted_1$q);
+            ], 2)
+          ];
+        }),
+        _: 1
+      }, 16, ["href", "class", "onMouseup"]);
     };
   }
 });
@@ -31331,6 +31811,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         "queryKey",
         "idKey",
         "titleKey",
+        "isLink",
         "routingBehavior",
         "customDocumentHtmlAttributes"
       ]);
@@ -33145,21 +33626,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Env = {
-  production: "https://api.lupasearch.com/v1/",
-  staging: "https://api.staging.lupasearch.com/v1/"
-};
-const DEFAULT_REQUEST_CONFIG = {
-  method: "POST",
-  headers: { "Content-Type": "application/json" }
-};
-const DEFAULT_HEADERS = DEFAULT_REQUEST_CONFIG.headers;
-const getApiUrl = (environment, customBaseUrl) => {
-  if (customBaseUrl) {
-    return customBaseUrl;
-  }
-  return Env[environment] || Env["production"];
-};
 const suggestSearchChatPhrases = (options, request, chatSettings) => __async2(void 0, null, function* () {
   var _a, _b, _c;
   const { environment, customBaseUrl } = options;
@@ -33666,7 +34132,7 @@ const _hoisted_4 = {
   key: 0,
   class: "lupasearch-chat-content"
 };
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const _sfc_main$1A = /* @__PURE__ */ defineComponent({
   __name: "ChatContainer",
   props: {
     options: {}
@@ -40320,7 +40786,7 @@ const chat = (options, mountOptions) => {
   const instance = createVue(
     options.displayOptions.containerSelector,
     mountOptions == null ? void 0 : mountOptions.mountingBehavior,
-    _sfc_main$1y,
+    _sfc_main$1A,
     {
       options
     }