@askdialog/dialog-vue 3.3.0 → 3.4.0

package/dist/dialog-vue.js

@@ -1,27 +1,27 @@
-var ee = Object.defineProperty;
-var te = (t, e, o) => e in t ? ee(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var V = (t, e, o) => te(t, typeof e != "symbol" ? e + "" : e, o);
-import { defineComponent as E, createElementBlock as v, openBlock as f, createElementVNode as d, toDisplayString as k, Fragment as O, renderList as W, createVNode as L, createBlock as N, ref as y, withDirectives as Y, withKeys as oe, vModelText as z, onMounted as B, watch as U, renderSlot as se, computed as I, withCtx as ne, createCommentVNode as x, withModifiers as re, onUnmounted as X, Teleport as ie, normalizeStyle as ae, unref as M, shallowRef as ce } from "vue";
-const le = /* @__PURE__ */ new Set(["ar", "he", "iw", "fa", "ur"]), ue = (t) => t !== void 0 && le.has(t.trim().toLowerCase().slice(0, 2)), de = (t) => ue(t) ? "rtl" : "ltr";
-var P;
+var se = Object.defineProperty;
+var re = (t, e, o) => e in t ? se(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var K = (t, e, o) => re(t, typeof e != "symbol" ? e + "" : e, o);
+import { defineComponent as y, createElementBlock as v, openBlock as p, createElementVNode as l, toDisplayString as I, Fragment as x, renderList as X, createVNode as D, createBlock as M, ref as A, withDirectives as Z, withKeys as ie, vModelText as J, onMounted as H, watch as q, renderSlot as ae, computed as T, withCtx as ce, createCommentVNode as N, withModifiers as le, createTextVNode as ue, onUnmounted as ee, Teleport as de, normalizeStyle as pe, unref as B, shallowRef as _e } from "vue";
+const he = /* @__PURE__ */ new Set(["ar", "he", "iw", "fa", "ur"]), fe = (t) => t !== void 0 && he.has(t.trim().toLowerCase().slice(0, 2)), ge = (t) => fe(t) ? "rtl" : "ltr";
+var U;
 (function(t) {
   t.OPEN_ASSISTANT = "open_assistant", t.CLOSE_ASSISTANT = "close_assistant", t.SEND_MESSAGE = "PRODUCT_QUESTION", t.SEND_GENERIC_QUESTION = "GENERIC_QUESTION", t.TRACK_ADD_TO_CART = "TRACK_ADD_TO_CART", t.TRACK_SUBMIT_CHECKOUT = "TRACK_SUBMIT_CHECKOUT", t.TRACK_VIEW_SEARCH_RESULTS = "TRACK_VIEW_SEARCH_RESULTS", t.TRACK_SELECT_SEARCH_RESULT = "TRACK_SELECT_SEARCH_RESULT";
-})(P || (P = {}));
-var H;
+})(U || (U = {}));
+var G;
 (function(t) {
   t.USER_OPENED_ASSISTANT = "userOpenedAssistant", t.USER_CLOSED_ASSISTANT = "userClosedAssistant", t.USER_SENT_MESSAGE = "userSentMessage", t.USER_CLICKED_ON_PRODUCT_CARD = "userClickedOnProductCard", t.USER_OPENED_RECOMMENDATION = "userOpenedRecommendation", t.USER_ADDED_TO_CART = "userAddedToCart", t.USER_SEND_POSITIVE_FEEDBACK = "userSendPositiveFeedback", t.USER_SEND_NEGATIVE_FEEDBACK = "userSendNegativeFeedback";
-})(H || (H = {}));
-P.TRACK_ADD_TO_CART, P.TRACK_SUBMIT_CHECKOUT, P.TRACK_VIEW_SEARCH_RESULTS, P.TRACK_SELECT_SEARCH_RESULT;
-class pe extends Error {
-  constructor({ status: o, code: n, message: i }) {
-    super(i);
-    V(this, "status");
-    V(this, "code");
+})(G || (G = {}));
+U.TRACK_ADD_TO_CART, U.TRACK_SUBMIT_CHECKOUT, U.TRACK_VIEW_SEARCH_RESULTS, U.TRACK_SELECT_SEARCH_RESULT;
+class ve extends Error {
+  constructor({ status: o, code: n, message: a }) {
+    super(a);
+    K(this, "status");
+    K(this, "code");
     this.name = "DialogSearchError", this.status = o, this.code = n;
   }
 }
-const K = "multiple installation methods detected:", _e = () => typeof window > "u" ? void 0 : window, Z = () => {
-  const t = _e();
+const Q = "multiple installation methods detected:", me = () => typeof window > "u" ? void 0 : window, te = () => {
+  const t = me();
   if (t !== void 0)
     return t.dialog = t.dialog ?? {}, t.dialog.audit = t.dialog.audit ?? {
       methods: [],
@@ -29,225 +29,229 @@ const K = "multiple installation methods detected:", _e = () => typeof window >
       capabilities: [],
       warnings: []
     }, t.dialog.audit;
-}, he = (t) => {
-  if (t.warnings = t.warnings.filter((e) => !e.startsWith(K)), t.methods.length >= 2) {
+}, Se = (t) => {
+  if (t.warnings = t.warnings.filter((e) => !e.startsWith(Q)), t.methods.length >= 2) {
     const e = t.methods.map((o) => o.method).join(", ");
-    t.warnings.push(`${K} ${e}`);
+    t.warnings.push(`${Q} ${e}`);
   }
-}, fe = (t, e) => e === void 0 ? t : {
+}, Ce = (t, e) => e === void 0 ? t : {
   version: (t == null ? void 0 : t.version) ?? e.version,
   commit: (t == null ? void 0 : t.commit) ?? e.commit
-}, J = (t) => {
-  const e = Z();
+}, oe = (t) => {
+  const e = te();
   if (e === void 0)
     return;
   const o = e.methods.find((n) => n.method === t.method);
   if (o === void 0) {
-    e.methods.push({ ...t, registeredAt: (/* @__PURE__ */ new Date()).toISOString() }), he(e);
+    e.methods.push({ ...t, registeredAt: (/* @__PURE__ */ new Date()).toISOString() }), Se(e);
     return;
   }
-  o.version = o.version ?? t.version, o.build = fe(o.build, t.build), o.source = o.source ?? t.source;
-}, ge = (t) => {
-  const e = Z();
+  o.version = o.version ?? t.version, o.build = Ce(o.build, t.build), o.source = o.source ?? t.source;
+}, be = (t) => {
+  const e = te();
   e !== void 0 && (e.capabilities.includes(t) || e.capabilities.push(t));
-}, R = {
+}, w = {
   IDLE: "idle",
   LOADING: "loading",
   SUCCESS: "success",
   /** The request succeeded with zero hits — distinct from `success` so views render a no-results state. */
   EMPTY: "empty",
   ERROR: "error"
-}, ve = 0.5, me = 500, Se = 1500, Ce = 100;
-function be({ emit: t, visibilityThreshold: e = ve, dwellMs: o = me, idleFlushMs: n = Se, maxItemsPerEvent: i = Ce }) {
-  let s, r = [];
-  const a = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
+}, Ee = 0.5, Re = 500, Te = 1500, ye = 100;
+function Ie({ emit: t, visibilityThreshold: e = Ee, dwellMs: o = Re, idleFlushMs: n = Te, maxItemsPerEvent: a = ye }) {
+  let r, i = [];
+  const s = /* @__PURE__ */ new Set(), _ = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
   let u;
-  const h = () => {
-    clearTimeout(u), !(s === void 0 || r.length === 0) && (t({ ...s, items: r }), r = []);
-  }, m = (c) => {
-    if (s === void 0)
+  const d = () => {
+    clearTimeout(u), !(r === void 0 || i.length === 0) && (t({ ...r, items: i }), i = []);
+  }, S = (h) => {
+    if (r === void 0)
       return;
-    const l = `${s.query_id}:${c.product_id}`;
-    if (!a.has(l)) {
-      if (a.add(l), r.push(c), r.length >= i) {
-        h();
+    const C = `${r.query_id}:${h.product_id}`;
+    if (!s.has(C)) {
+      if (s.add(C), i.push(h), i.length >= a) {
+        d();
         return;
       }
-      clearTimeout(u), u = setTimeout(h, n);
+      clearTimeout(u), u = setTimeout(d, n);
     }
-  }, C = (c) => {
-    const l = _.get(c);
-    l !== void 0 && (clearTimeout(l), _.delete(c));
-  }, p = new IntersectionObserver((c) => {
-    for (const l of c) {
-      const T = g.get(l.target);
-      T !== void 0 && (l.intersectionRatio >= e ? _.has(l.target) || _.set(l.target, setTimeout(() => {
-        _.delete(l.target), m(T);
-      }, o)) : C(l.target));
+  }, E = (h) => {
+    const C = f.get(h);
+    C !== void 0 && (clearTimeout(C), f.delete(h));
+  }, c = new IntersectionObserver((h) => {
+    for (const C of h) {
+      const g = _.get(C.target);
+      g !== void 0 && (C.intersectionRatio >= e ? f.has(C.target) || f.set(C.target, setTimeout(() => {
+        f.delete(C.target), S(g);
+      }, o)) : E(C.target));
     }
   }, { threshold: e }), b = () => {
-    p.disconnect();
-    for (const c of _.values())
-      clearTimeout(c);
-    _.clear(), g.clear();
-  }, S = () => {
-    h();
-  }, w = (c) => {
-    if (c.persisted) {
-      a.clear();
-      for (const l of g.keys())
-        C(l), p.unobserve(l), p.observe(l);
+    c.disconnect();
+    for (const h of f.values())
+      clearTimeout(h);
+    f.clear(), _.clear();
+  }, R = () => {
+    d();
+  }, L = (h) => {
+    if (h.persisted) {
+      s.clear();
+      for (const C of _.keys())
+        E(C), c.unobserve(C), c.observe(C);
     }
   };
-  return window.addEventListener("pagehide", S), window.addEventListener("pageshow", w), {
-    setContext(c) {
-      h(), s !== void 0 && s.query_id !== c.query_id && a.clear(), s = c, b();
+  return window.addEventListener("pagehide", R), window.addEventListener("pageshow", L), {
+    setContext(h) {
+      d(), r !== void 0 && r.query_id !== h.query_id && s.clear(), r = h, b();
     },
-    observe(c, l) {
-      g.set(c, l), p.observe(c);
+    observe(h, C) {
+      _.set(h, C), c.observe(h);
     },
-    forceImpression(c) {
-      m(c), h();
+    forceImpression(h) {
+      S(h), d();
     },
-    flush: h,
+    flush: d,
     disconnect() {
-      h(), b(), window.removeEventListener("pagehide", S), window.removeEventListener("pageshow", w);
+      d(), b(), window.removeEventListener("pagehide", R), window.removeEventListener("pageshow", L);
     }
   };
 }
-const F = (t, e) => ({
+const j = (t, e) => ({
   product_id: t.hits[e].product.id,
   // 1-based and absolute across pages (page 2, first item, 20/page → 21).
   position: t.page * t.hitsPerPage + e + 1
 });
-function Ee(t) {
+function ke(t) {
   let e, o;
-  const n = () => (e ?? (e = be({
+  const n = () => (e ?? (e = Ie({
     emit: t.trackViewSearchResults
   })), e);
   return {
-    onResponse(i) {
+    onResponse(a) {
       o = {
         // Straight off the response: the controller resends the previous
         // queryId while the query text is unchanged, so the id is stable
         // across pagination and rotates with the query.
-        query_id: i.queryId,
+        query_id: a.queryId,
         surface: t.surface,
+        // The storefront search API is lexical-only today.
+        search_type: "lexical",
         // Analytics pages are 1-based; the wire response is 0-based.
-        page: i.page + 1,
-        total_hits: i.nbHits,
-        query_length: [...i.query].length
-      }, n().setContext(o), i.nbHits === 0 && t.trackViewSearchResults({ ...o, items: [] });
+        page: a.page + 1,
+        total_hits: a.nbHits,
+        query_length: [...a.query].length
+      }, n().setContext(o), a.nbHits === 0 && t.trackViewSearchResults({ ...o, items: [] });
     },
-    observeResult(i, s, r) {
-      n().observe(i, F(s, r));
+    observeResult(a, r, i) {
+      n().observe(a, j(r, i));
     },
-    select(i, s) {
+    select(a, r) {
       if (o === void 0)
         return;
-      const r = F(i, s);
-      n().forceImpression(r), t.trackSelectSearchResult({ ...o, items: [r] });
+      const i = j(a, r);
+      n().forceImpression(i), t.trackSelectSearchResult({ ...o, items: [i] });
     },
     dispose() {
       e == null || e.disconnect();
     }
   };
 }
-const Te = 250, Ie = 12, we = 2, G = {
-  status: R.IDLE,
+const we = 250, Ae = 12, Le = 2, W = {
+  status: w.IDLE,
   query: "",
   page: 0,
   response: void 0,
   error: void 0
 };
-function ke({ search: t, analytics: e, navigate: o, debounceMs: n = Te, hitsPerPage: i = Ie }) {
-  let s = G;
-  const r = /* @__PURE__ */ new Set(), a = Ee(e);
-  let g, _, u, h = 0, m = !1;
-  const C = (c) => {
-    s = { ...s, ...c };
-    for (const l of r)
-      l(s);
-  }, p = () => {
-    clearTimeout(g), u == null || u.abort(), u = void 0;
-  }, b = (c, l) => {
-    const T = { query: c, page: l, hitsPerPage: i }, A = s.response;
-    return (A == null ? void 0 : A.query) === c && (T.queryId = A.queryId), T;
-  }, S = async (c, l) => {
-    p(), u = new AbortController();
-    const T = ++h, A = b(c, l);
-    C({ status: R.LOADING, query: c, page: l });
+function $e({ search: t, analytics: e, navigate: o, debounceMs: n = we, hitsPerPage: a = Ae, locale: r, countryCode: i }) {
+  let s = W;
+  const _ = /* @__PURE__ */ new Set(), f = ke(e);
+  let u, d, S, E = 0, c = !1;
+  const b = (g) => {
+    s = { ...s, ...g };
+    for (const m of _)
+      m(s);
+  }, R = () => {
+    clearTimeout(u), S == null || S.abort(), S = void 0;
+  }, L = (g, m) => {
+    const k = { query: g, page: m, hitsPerPage: a };
+    r !== void 0 && (k.locale = r), i !== void 0 && (k.countryCode = i);
+    const $ = s.response;
+    return ($ == null ? void 0 : $.query) === g && (k.queryId = $.queryId), k;
+  }, h = async (g, m) => {
+    R(), S = new AbortController();
+    const k = ++E, $ = L(g, m);
+    b({ status: w.LOADING, query: g, page: m });
     try {
-      const $ = await t(A, {
-        signal: u.signal
+      const P = await t($, {
+        signal: S.signal
       });
-      if (T !== h)
+      if (k !== E)
         return;
-      a.onResponse($), C({
-        status: $.nbHits === 0 ? R.EMPTY : R.SUCCESS,
-        response: $,
+      f.onResponse(P), b({
+        status: P.nbHits === 0 ? w.EMPTY : w.SUCCESS,
+        response: P,
         error: void 0
       });
-    } catch ($) {
-      if ($ instanceof DOMException && $.name === "AbortError" || T !== h)
+    } catch (P) {
+      if (P instanceof DOMException && P.name === "AbortError" || k !== E)
         return;
-      C({ status: R.ERROR, error: $, response: void 0 });
+      b({ status: w.ERROR, error: P, response: void 0 });
     }
-  }, w = (c) => {
-    const l = c.trim();
-    if (p(), _ = void 0, [...l].length < we) {
-      h += 1, C(G);
+  }, C = (g) => {
+    const m = g.trim();
+    if (R(), d = void 0, [...m].length < Le) {
+      E += 1, b(W);
       return;
     }
-    return l;
+    return m;
   };
   return {
-    setQuery(c) {
-      const l = m ? void 0 : w(c);
-      l !== void 0 && (_ = l, g = setTimeout(() => {
-        _ = void 0, S(l, 0);
+    setQuery(g) {
+      const m = c ? void 0 : C(g);
+      m !== void 0 && (d = m, u = setTimeout(() => {
+        d = void 0, h(m, 0);
       }, n));
     },
-    submit(c) {
-      const l = m ? void 0 : w(c);
-      l !== void 0 && S(l, 0);
+    submit(g) {
+      const m = c ? void 0 : C(g);
+      m !== void 0 && h(m, 0);
     },
-    setPage(c) {
-      if (!m) {
-        if (_ !== void 0) {
-          const l = _;
-          _ = void 0, S(l, 0);
+    setPage(g) {
+      if (!c) {
+        if (d !== void 0) {
+          const m = d;
+          d = void 0, h(m, 0);
           return;
         }
-        s.query !== "" && S(s.query, c);
+        s.query !== "" && h(s.query, g);
       }
     },
     retry() {
-      m || s.status !== R.ERROR || S(s.query, s.page);
+      c || s.status !== w.ERROR || h(s.query, s.page);
     },
-    observeResult(c, l) {
-      s.response !== void 0 && a.observeResult(c, s.response, l);
+    observeResult(g, m) {
+      s.response !== void 0 && f.observeResult(g, s.response, m);
     },
-    selectResult(c, l) {
-      const T = s.response;
-      if (T === void 0)
+    selectResult(g, m) {
+      const k = s.response;
+      if (k === void 0)
         return !1;
-      a.select(T, c);
-      const A = T.hits[c].product.url;
-      return ((l == null ? void 0 : l.navigate) ?? !0) && o !== void 0 && A !== void 0 ? (o(A, T.hits[c]), !0) : !1;
+      f.select(k, g);
+      const $ = k.hits[g].product.url;
+      return ((m == null ? void 0 : m.navigate) ?? !0) && o !== void 0 && $ !== void 0 ? (o($, k.hits[g]), !0) : !1;
     },
-    subscribe(c) {
-      return r.add(c), () => {
-        r.delete(c);
+    subscribe(g) {
+      return _.add(g), () => {
+        _.delete(g);
       };
     },
     getState: () => s,
     dispose() {
-      m = !0, p(), h += 1, _ = void 0, r.clear(), a.dispose();
+      c = !0, R(), E += 1, d = void 0, _.clear(), f.dispose();
     }
   };
 }
-const Re = { class: "dialog-block-header-container" }, ye = { class: "dialog-block-title" }, Ae = { class: "dialog-block-description" }, Le = /* @__PURE__ */ E({
+const De = { class: "dialog-block-header-container" }, Pe = { class: "dialog-block-title" }, Ne = { class: "dialog-block-description" }, Oe = /* @__PURE__ */ y({
   __name: "DialogBlockHeader",
   props: {
     title: {},
@@ -255,32 +259,32 @@ const Re = { class: "dialog-block-header-container" }, ye = { class: "dialog-blo
   },
   setup(t) {
     const e = t;
-    return (o, n) => (f(), v("div", Re, [
-      d("div", ye, k(e.title ?? "Your expert"), 1),
-      d("div", Ae, k(e.description ?? "A question about this product?"), 1)
+    return (o, n) => (p(), v("div", De, [
+      l("div", Pe, I(e.title ?? "Your expert"), 1),
+      l("div", Ne, I(e.description ?? "A question about this product?"), 1)
     ]));
   }
-}), D = (t, e) => {
+}), O = (t, e) => {
   const o = t.__vccOpts || t;
-  for (const [n, i] of e)
-    o[n] = i;
+  for (const [n, a] of e)
+    o[n] = a;
   return o;
-}, $e = /* @__PURE__ */ D(Le, [["__scopeId", "data-v-28e6dda7"]]), De = {
+}, Ue = /* @__PURE__ */ O(Oe, [["__scopeId", "data-v-28e6dda7"]]), xe = {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, Pe = { "clip-path": "url(#clip0_466_934)" }, Oe = ["stroke"], Ne = ["stroke"], Ue = /* @__PURE__ */ E({
+}, Me = { "clip-path": "url(#clip0_466_934)" }, qe = ["stroke"], Be = ["stroke"], Ve = /* @__PURE__ */ y({
   __name: "AiStarsIcon",
   props: {
     color: {}
   },
   setup(t) {
     const e = t;
-    return (o, n) => (f(), v("svg", De, [
-      d("g", Pe, [
-        d("path", {
+    return (o, n) => (p(), v("svg", xe, [
+      l("g", Me, [
+        l("path", {
           d: `M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011
         12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684
         13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559
@@ -295,8 +299,8 @@ const Re = { class: "dialog-block-header-container" }, ye = { class: "dialog-blo
           "stroke-width": "1.5",
           "stroke-linecap": "round",
           "stroke-linejoin": "round"
-        }, null, 8, Oe),
-        d("path", {
+        }, null, 8, qe),
+        l("path", {
           d: `M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175
         5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687
         6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632
@@ -311,11 +315,11 @@ const Re = { class: "dialog-block-header-container" }, ye = { class: "dialog-blo
           "stroke-width": "1.5",
           "stroke-linecap": "round",
           "stroke-linejoin": "round"
-        }, null, 8, Ne)
+        }, null, 8, Be)
       ]),
-      n[0] || (n[0] = d("defs", null, [
-        d("clipPath", { id: "clip0_466_934" }, [
-          d("rect", {
+      n[0] || (n[0] = l("defs", null, [
+        l("clipPath", { id: "clip0_466_934" }, [
+          l("rect", {
             width: "20",
             height: "20",
             fill: "white"
@@ -324,7 +328,7 @@ const Re = { class: "dialog-block-header-container" }, ye = { class: "dialog-blo
       ], -1))
     ]));
   }
-}), xe = ["onClick"], Me = { class: "dialog-block-suggestions-item-label" }, qe = /* @__PURE__ */ E({
+}), He = ["onClick"], Ke = { class: "dialog-block-suggestions-item-label" }, Fe = /* @__PURE__ */ y({
   __name: "DialogBlockSuggestions",
   props: {
     client: {},
@@ -343,27 +347,27 @@ const Re = { class: "dialog-block-header-container" }, ye = { class: "dialog-blo
         fromQuestionSuggestion: !0
       });
     };
-    return (n, i) => (f(!0), v(O, null, W(e.questions, (s) => (f(), v("button", {
-      key: s.question,
+    return (n, a) => (p(!0), v(x, null, X(e.questions, (r) => (p(), v("button", {
+      key: r.question,
       class: "dialog-block-suggestions-item",
-      onClick: (r) => o(s.question)
+      onClick: (i) => o(r.question)
     }, [
-      L(Ue, {
+      D(Ve, {
         class: "dialog-block-suggestions-item-icon",
         color: e.client.theme.primaryColor
       }, null, 8, ["color"]),
-      d("span", Me, k(s.question), 1)
-    ], 8, xe))), 128));
+      l("span", Ke, I(r.question), 1)
+    ], 8, He))), 128));
   }
-}), Be = /* @__PURE__ */ D(qe, [["__scopeId", "data-v-db34d4b4"]]), Ve = {};
-function He(t, e) {
-  return f(), v(O, null, [
-    e[0] || (e[0] = d("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
-    e[1] || (e[1] = d("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
-    e[2] || (e[2] = d("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1))
+}), Ge = /* @__PURE__ */ O(Fe, [["__scopeId", "data-v-db34d4b4"]]), Qe = {};
+function je(t, e) {
+  return p(), v(x, null, [
+    e[0] || (e[0] = l("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
+    e[1] || (e[1] = l("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
+    e[2] || (e[2] = l("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1))
   ], 64);
 }
-const Ke = /* @__PURE__ */ D(Ve, [["render", He], ["__scopeId", "data-v-26a64b58"]]), Fe = { class: "dialog-block-suggestions-container" }, Ge = /* @__PURE__ */ E({
+const We = /* @__PURE__ */ O(Qe, [["render", je], ["__scopeId", "data-v-26a64b58"]]), Ye = { class: "dialog-block-suggestions-container" }, ze = /* @__PURE__ */ y({
   __name: "DialogBlockSuggestionsContainer",
   props: {
     client: {},
@@ -375,8 +379,8 @@ const Ke = /* @__PURE__ */ D(Ve, [["render", He], ["__scopeId", "data-v-26a64b58
   },
   setup(t) {
     const e = t;
-    return (o, n) => (f(), v("div", Fe, [
-      e.isLoading || !e.questions ? (f(), N(Ke, { key: 0 })) : (f(), N(Be, {
+    return (o, n) => (p(), v("div", Ye, [
+      e.isLoading || !e.questions ? (p(), M(We, { key: 0 })) : (p(), M(Ge, {
         key: 1,
         client: e.client,
         questions: e.questions,
@@ -386,30 +390,30 @@ const Ke = /* @__PURE__ */ D(Ve, [["render", He], ["__scopeId", "data-v-26a64b58
       }, null, 8, ["client", "questions", "product-id", "product-title", "selected-variant-id"]))
     ]));
   }
-}), Qe = /* @__PURE__ */ D(Ge, [["__scopeId", "data-v-18c9e78b"]]), je = {
+}), Xe = /* @__PURE__ */ O(ze, [["__scopeId", "data-v-18c9e78b"]]), Ze = {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, We = ["stroke"], Ye = /* @__PURE__ */ E({
+}, Je = ["stroke"], et = /* @__PURE__ */ y({
   __name: "ArrowIcon",
   props: {
     color: {}
   },
   setup(t) {
     const e = t;
-    return (o, n) => (f(), v("svg", je, [
-      d("path", {
+    return (o, n) => (p(), v("svg", Ze, [
+      l("path", {
         d: "M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",
         stroke: e.color || "#ffffff",
         "stroke-width": "1.5",
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
-      }, null, 8, We)
+      }, null, 8, Je)
     ]));
   }
-}), ze = ["placeholder"], Xe = ["disabled"], Ze = /* @__PURE__ */ E({
+}), tt = ["placeholder"], ot = ["disabled"], nt = /* @__PURE__ */ y({
   __name: "DialogInput",
   props: {
     client: {},
@@ -419,93 +423,93 @@ const Ke = /* @__PURE__ */ D(Ve, [["render", He], ["__scopeId", "data-v-26a64b58
     selectedVariantId: {}
   },
   setup(t) {
-    const e = t, o = y(), n = y(""), i = () => {
-      var r;
-      (r = o.value) == null || r.focus();
-    }, s = () => {
-      const r = n.value;
-      r.trim() && (e.client.sendProductMessage({
+    const e = t, o = A(), n = A(""), a = () => {
+      var i;
+      (i = o.value) == null || i.focus();
+    }, r = () => {
+      const i = n.value;
+      i.trim() && (e.client.sendProductMessage({
         productId: e.productId,
         productTitle: e.productTitle,
         selectedVariantId: e.selectedVariantId,
-        question: r,
+        question: i,
         fromQuestionSuggestion: !0
       }), n.value = "");
     };
-    return (r, a) => (f(), v("div", {
+    return (i, s) => (p(), v("div", {
       class: "dialog-input-wrapper",
-      onClick: i
+      onClick: a
     }, [
-      Y(d("input", {
+      Z(l("input", {
         id: "dialog-ask-anything-input-ai-input",
         ref_key: "inputRef",
         ref: o,
-        "onUpdate:modelValue": a[0] || (a[0] = (g) => n.value = g),
+        "onUpdate:modelValue": s[0] || (s[0] = (_) => n.value = _),
         class: "dialog-ask-anything-input-ai-input",
         placeholder: e.placeholder ?? "Ask anything...",
-        onKeydown: oe(s, ["enter"])
-      }, null, 40, ze), [
-        [z, n.value]
+        onKeydown: ie(r, ["enter"])
+      }, null, 40, tt), [
+        [J, n.value]
       ]),
-      d("button", {
+      l("button", {
         id: "send-message-button-ai-input",
         class: "dialog-input-submit",
         disabled: !n.value.trim(),
-        onClick: s
+        onClick: r
       }, [
-        L(Ye, {
+        D(et, {
           color: e.client.theme.ctaTextColor
         }, null, 8, ["color"])
-      ], 8, Xe)
+      ], 8, ot)
     ]));
   }
-}), Je = /* @__PURE__ */ D(Ze, [["__scopeId", "data-v-4f5901c9"]]), et = /* @__PURE__ */ E({
+}), st = /* @__PURE__ */ O(nt, [["__scopeId", "data-v-4f5901c9"]]), rt = /* @__PURE__ */ y({
   __name: "ThemeProvider",
   props: {
     theme: {}
   },
   setup(t) {
-    const e = t, o = document.body, n = (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase(), i = (s) => {
-      s && Object.keys(s).forEach((r) => {
-        const a = r, g = n(r);
-        if (s[a] !== void 0) {
-          if (typeof s[a] == "object") {
-            Object.keys(s[a]).forEach((_) => {
-              var h;
-              const u = _;
+    const e = t, o = document.body, n = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase(), a = (r) => {
+      r && Object.keys(r).forEach((i) => {
+        const s = i, _ = n(i);
+        if (r[s] !== void 0) {
+          if (typeof r[s] == "object") {
+            Object.keys(r[s]).forEach((f) => {
+              var d;
+              const u = f;
               if (u !== void 0) {
-                const m = n(_), C = s[a];
+                const S = n(f), E = r[s];
                 o.style.setProperty(
-                  `--dialog-theme-${g}-${m}`,
-                  (h = C[u]) == null ? void 0 : h.toString()
+                  `--dialog-theme-${_}-${S}`,
+                  (d = E[u]) == null ? void 0 : d.toString()
                 );
               }
             });
             return;
           }
-          if (a === "ctaBorderType") {
-            const _ = s[a] === "rounded" ? "24px" : "0";
-            o.style.setProperty(`--dialog-theme-${g}`, _);
+          if (s === "ctaBorderType") {
+            const f = r[s] === "rounded" ? "24px" : "0";
+            o.style.setProperty(`--dialog-theme-${_}`, f);
             return;
           }
           o.style.setProperty(
-            `--dialog-theme-${g}`,
-            s[a].toString()
+            `--dialog-theme-${_}`,
+            r[s].toString()
           );
         }
       });
     };
-    return B(() => {
-      e.theme && i(e.theme);
-    }), U(
+    return H(() => {
+      e.theme && a(e.theme);
+    }), q(
       () => e.theme,
-      (s) => {
-        s && i(s);
+      (r) => {
+        r && a(r);
       },
       { deep: !0 }
-    ), (s, r) => se(s.$slots, "default");
+    ), (r, i) => ae(r.$slots, "default");
   }
-}), tt = ["dir"], ot = /* @__PURE__ */ E({
+}), it = ["dir"], at = /* @__PURE__ */ y({
   __name: "DialogProductBlock",
   props: {
     client: {},
@@ -516,84 +520,84 @@ const Ke = /* @__PURE__ */ D(Ve, [["render", He], ["__scopeId", "data-v-26a64b58
   },
   setup(t) {
     const e = t;
-    B(() => {
-      J({
+    H(() => {
+      oe({
         method: "vue",
-        version: "3.3.0"
-      }), ge("pdp-block");
+        version: "3.4.0"
+      }), be("pdp-block");
     });
-    const o = y(!0), n = y(void 0), i = y(0), s = I(() => {
+    const o = A(!0), n = A(void 0), a = A(0), r = T(() => {
       var u;
       return o.value ? "" : (u = n.value) == null ? void 0 : u.assistantName;
-    }), r = I(() => {
+    }), i = T(() => {
       var u;
       return o.value ? "" : (u = n.value) == null ? void 0 : u.description;
-    }), a = I(() => {
+    }), s = T(() => {
       var u;
       return o.value ? "" : (u = n.value) == null ? void 0 : u.inputPlaceholder;
-    }), g = I(
+    }), _ = T(
       () => {
         var u;
-        return de(
+        return ge(
           (u = e.client.getLocalizationInformations()) == null ? void 0 : u.languageCode
         );
       }
-    ), _ = async () => {
-      const u = ++i.value;
+    ), f = async () => {
+      const u = ++a.value;
       o.value = !0, n.value = void 0;
       try {
-        const h = await e.client.getSuggestions(e.productId);
-        u === i.value && (n.value = h);
-      } catch (h) {
-        console.error("error", h);
+        const d = await e.client.getSuggestions(e.productId);
+        u === a.value && (n.value = d);
+      } catch (d) {
+        console.error("error", d);
       } finally {
-        u === i.value && (o.value = !1);
+        u === a.value && (o.value = !1);
       }
     };
-    return U(
+    return q(
       () => [e.client, e.productId],
       () => {
-        _();
+        f();
       },
       { immediate: !0 }
-    ), (u, h) => (f(), N(et, {
+    ), (u, d) => (p(), M(rt, {
       theme: e.client.theme
     }, {
-      default: ne(() => {
-        var m;
+      default: ce(() => {
+        var S;
         return [
-          d("div", {
+          l("div", {
             id: "dialog-instant",
             class: "dialog-block-container",
-            dir: g.value
+            dir: _.value
           }, [
-            L($e, {
-              title: s.value,
-              description: r.value
+            D(Ue, {
+              title: r.value,
+              description: i.value
             }, null, 8, ["title", "description"]),
-            L(Qe, {
+            D(Xe, {
               client: e.client,
-              questions: (m = n.value) == null ? void 0 : m.questions,
+              questions: (S = n.value) == null ? void 0 : S.questions,
               "is-loading": o.value,
               "product-id": e.productId,
               "product-title": e.productTitle,
               "selected-variant-id": e == null ? void 0 : e.selectedVariantId
             }, null, 8, ["client", "questions", "is-loading", "product-id", "product-title", "selected-variant-id"]),
-            e.enableInput ? (f(), N(Je, {
+            e.enableInput ? (p(), M(st, {
               key: 0,
               client: e.client,
-              placeholder: a.value,
+              placeholder: s.value,
               "product-id": e.productId,
               "product-title": e.productTitle,
               "selected-variant-id": e == null ? void 0 : e.selectedVariantId
-            }, null, 8, ["client", "placeholder", "product-id", "product-title", "selected-variant-id"])) : x("", !0)
-          ], 8, tt)
+            }, null, 8, ["client", "placeholder", "product-id", "product-title", "selected-variant-id"])) : N("", !0)
+          ], 8, it)
         ];
       }),
       _: 1
     }, 8, ["theme"]));
   }
-}), Bt = /* @__PURE__ */ D(ot, [["__scopeId", "data-v-c57aa677"]]), st = {}, nt = {
+}), jt = /* @__PURE__ */ O(at, [["__scopeId", "data-v-c57aa677"]]), ct = {}, lt = {
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
@@ -601,9 +605,9 @@ const Ke = /* @__PURE__ */ D(Ve, [["render", He], ["__scopeId", "data-v-26a64b58
   xmlns: "http://www.w3.org/2000/svg",
   "aria-hidden": "true"
 };
-function rt(t, e) {
-  return f(), v("svg", nt, e[0] || (e[0] = [
-    d("path", {
+function ut(t, e) {
+  return p(), v("svg", lt, e[0] || (e[0] = [
+    l("path", {
       d: "M8 13V3M8 3L3 8M8 3L13 8",
       stroke: "currentColor",
       "stroke-width": "1.5",
@@ -612,28 +616,28 @@ function rt(t, e) {
     }, null, -1)
   ]));
 }
-const it = /* @__PURE__ */ D(st, [["render", rt]]), at = {
+const dt = /* @__PURE__ */ O(ct, [["render", ut]]), pt = {
   width: "16",
   height: "16",
   viewBox: "0 0 12 12",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-hidden": "true"
-}, ct = ["fill"], lt = "M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z", ut = /* @__PURE__ */ E({
+}, _t = ["fill"], ht = "M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z", ft = /* @__PURE__ */ y({
   __name: "ShurikenIcon",
   props: {
     color: {}
   },
   setup(t) {
     const e = t;
-    return (o, n) => (f(), v("svg", at, [
-      d("path", {
-        d: lt,
+    return (o, n) => (p(), v("svg", pt, [
+      l("path", {
+        d: ht,
         fill: e.color || "currentColor"
-      }, null, 8, ct)
+      }, null, 8, _t)
     ]));
   }
-}), dt = { class: "dialog-search-bar-field" }, pt = { class: "dialog-search-bar-icon" }, _t = ["aria-label", "placeholder", "autofocus"], ht = ["aria-label"], Vt = /* @__PURE__ */ E({
+}), gt = { class: "dialog-search-bar-field" }, vt = { class: "dialog-search-bar-icon" }, mt = ["aria-label", "placeholder", "autofocus"], St = ["aria-label"], Wt = /* @__PURE__ */ y({
   __name: "DialogSearchBar",
   props: {
     controller: {},
@@ -642,22 +646,22 @@ const it = /* @__PURE__ */ D(st, [["render", rt]]), at = {
     submitAriaLabel: { default: "Search" }
   },
   setup(t) {
-    const e = t, o = y(""), n = () => {
+    const e = t, o = A(""), n = () => {
       e.controller.setQuery(o.value);
-    }, i = () => {
+    }, a = () => {
       e.controller.submit(o.value);
     };
-    return (s, r) => (f(), v("form", {
+    return (r, i) => (p(), v("form", {
       class: "dialog-search-bar",
       role: "search",
-      onSubmit: re(i, ["prevent"])
+      onSubmit: le(a, ["prevent"])
     }, [
-      d("div", dt, [
-        d("span", pt, [
-          L(ut)
+      l("div", gt, [
+        l("span", vt, [
+          D(ft)
         ]),
-        Y(d("input", {
-          "onUpdate:modelValue": r[0] || (r[0] = (a) => o.value = a),
+        Z(l("input", {
+          "onUpdate:modelValue": i[0] || (i[0] = (s) => o.value = s),
           type: "text",
           name: "dialog-search-query",
           class: "dialog-search-bar-input",
@@ -665,315 +669,339 @@ const it = /* @__PURE__ */ D(st, [["render", rt]]), at = {
           placeholder: e.placeholder,
           autofocus: e.autoFocus,
           onInput: n
-        }, null, 40, _t), [
-          [z, o.value]
+        }, null, 40, mt), [
+          [J, o.value]
         ])
       ]),
-      d("button", {
+      l("button", {
         type: "submit",
         class: "dialog-search-bar-submit",
         "aria-label": e.submitAriaLabel
       }, [
-        L(it)
-      ], 8, ht)
+        D(dt)
+      ], 8, St)
     ], 32));
   }
-}), ft = {
+}), Ct = {
   key: 0,
   "aria-label": "Search results pages",
   class: "dialog-search-pagination"
-}, gt = ["disabled"], vt = ["disabled"], mt = /* @__PURE__ */ E({
+}, bt = ["disabled"], Et = ["disabled"], Rt = /* @__PURE__ */ y({
   __name: "DialogSearchPagination",
   props: {
     controller: {},
     state: {}
   },
   setup(t) {
-    const e = t, o = I(() => e.state.response);
-    return (n, i) => o.value !== void 0 && o.value.nbPages > 1 ? (f(), v("nav", ft, [
-      d("button", {
+    const e = t, o = T(() => e.state.response);
+    return (n, a) => o.value !== void 0 && o.value.nbPages > 1 ? (p(), v("nav", Ct, [
+      l("button", {
         type: "button",
         disabled: o.value.page === 0,
-        onClick: i[0] || (i[0] = (s) => e.controller.setPage(o.value.page - 1))
-      }, " Previous ", 8, gt),
-      d("span", null, " Page " + k(o.value.page + 1) + " / " + k(o.value.nbPages), 1),
-      d("button", {
+        onClick: a[0] || (a[0] = (r) => e.controller.setPage(o.value.page - 1))
+      }, " Previous ", 8, bt),
+      l("span", null, " Page " + I(o.value.page + 1) + " / " + I(o.value.nbPages), 1),
+      l("button", {
         type: "button",
         disabled: o.value.page >= o.value.nbPages - 1,
-        onClick: i[1] || (i[1] = (s) => e.controller.setPage(o.value.page + 1))
-      }, " Next ", 8, vt)
-    ])) : x("", !0);
+        onClick: a[1] || (a[1] = (r) => e.controller.setPage(o.value.page + 1))
+      }, " Next ", 8, Et)
+    ])) : N("", !0);
   }
-}), St = (t) => {
+}), F = ({ amount: t, currencyCode: e }, o) => new Intl.NumberFormat(o, {
+  style: "currency",
+  currency: e
+}).format(Number(t)), ne = ({ min: t, max: e }, o) => t.amount === e.amount ? F(t, o) : `${F(t, o)} – ${F(e, o)}`, Tt = (t, e) => {
   if (t === void 0)
     return "";
-  const { min: e, max: o } = t, n = ({ amount: i, currencyCode: s }) => new Intl.NumberFormat(void 0, {
-    style: "currency",
-    currency: s
-  }).format(Number(i));
   try {
-    return e.amount === o.amount ? n(e) : `${n(e)} – ${n(o)}`;
+    return ne(t, e);
   } catch {
     return "";
   }
-}, Ct = (t) => {
+}, yt = (t, e) => {
+  const o = t.priceRange, n = t.compareAtPriceRange;
+  if (o === void 0 || n === void 0 || Number(n.min.amount) <= Number(o.min.amount))
+    return "";
+  try {
+    return ne(n, e);
+  } catch {
+    return "";
+  }
+}, It = (t) => {
   try {
     const { protocol: e } = new URL(t, window.location.href);
     return e === "http:" || e === "https:" ? t : void 0;
   } catch {
     return;
   }
-}, bt = { class: "dialog-search-card-image" }, Et = ["src", "alt"], Tt = { class: "dialog-search-card-info" }, It = { class: "dialog-search-card-title" }, wt = {
+}, kt = { class: "dialog-search-card-image" }, wt = ["src", "alt"], At = { class: "dialog-search-card-info" }, Lt = { class: "dialog-search-card-title" }, $t = {
   key: 0,
   class: "dialog-search-card-price"
-}, Q = /* @__PURE__ */ E({
+}, Dt = {
+  key: 0,
+  class: "dialog-search-card-compare-at"
+}, Y = /* @__PURE__ */ y({
   __name: "DialogSearchProductCardContent",
   props: {
-    hit: {}
+    hit: {},
+    locale: {}
   },
   setup(t) {
-    const e = t, o = I(() => e.hit.product.title ?? e.hit.product.id), n = I(() => St(e.hit.product.priceRange));
-    return (i, s) => (f(), v(O, null, [
-      d("div", bt, [
-        e.hit.product.imageUrl !== void 0 ? (f(), v("img", {
+    const e = t, o = T(() => e.hit.product.title ?? e.hit.product.id), n = T(
+      () => Tt(e.hit.product.priceRange, e.locale)
+    ), a = T(
+      () => yt(e.hit.product, e.locale)
+    );
+    return (r, i) => (p(), v(x, null, [
+      l("div", kt, [
+        e.hit.product.imageUrl !== void 0 ? (p(), v("img", {
           key: 0,
           src: e.hit.product.imageUrl,
           alt: o.value,
           loading: "lazy"
-        }, null, 8, Et)) : x("", !0)
+        }, null, 8, wt)) : N("", !0)
       ]),
-      d("div", Tt, [
-        d("p", It, k(o.value), 1),
-        n.value !== "" ? (f(), v("p", wt, k(n.value), 1)) : x("", !0)
+      l("div", At, [
+        l("p", Lt, I(o.value), 1),
+        n.value !== "" ? (p(), v("p", $t, [
+          ue(I(n.value), 1),
+          a.value !== "" ? (p(), v("s", Dt, I(" " + a.value), 1)) : N("", !0)
+        ])) : N("", !0)
       ])
     ], 64));
   }
-}), kt = {
+}), Pt = {
   key: 0,
   class: "dialog-search-card-body"
-}, Rt = ["href"], yt = /* @__PURE__ */ E({
+}, Nt = ["href"], Ot = /* @__PURE__ */ y({
   __name: "DialogSearchProductCard",
   props: {
     controller: {},
     hit: {},
-    index: {}
+    index: {},
+    locale: {}
   },
   setup(t) {
-    const e = t, o = y();
-    U(
+    const e = t, o = A();
+    q(
       () => e.hit,
       () => {
         o.value !== void 0 && e.controller.observeResult(o.value, e.index);
       },
       { immediate: !0, flush: "post" }
     );
-    const n = (r) => {
-      const a = r.metaKey || r.ctrlKey || r.shiftKey || r.altKey;
-      e.controller.selectResult(e.index, { navigate: !a }) && r.preventDefault();
-    }, i = (r) => {
-      r.button === 1 && e.controller.selectResult(e.index, { navigate: !1 });
-    }, s = I(
-      () => e.hit.product.url === void 0 ? void 0 : Ct(e.hit.product.url)
+    const n = (i) => {
+      const s = i.metaKey || i.ctrlKey || i.shiftKey || i.altKey;
+      e.controller.selectResult(e.index, { navigate: !s }) && i.preventDefault();
+    }, a = (i) => {
+      i.button === 1 && e.controller.selectResult(e.index, { navigate: !1 });
+    }, r = T(
+      () => e.hit.product.url === void 0 ? void 0 : It(e.hit.product.url)
     );
-    return (r, a) => (f(), v("li", {
+    return (i, s) => (p(), v("li", {
       ref_key: "cardRef",
       ref: o,
       class: "dialog-search-card"
     }, [
-      s.value === void 0 ? (f(), v("div", kt, [
-        L(Q, {
-          hit: e.hit
-        }, null, 8, ["hit"])
-      ])) : (f(), v("a", {
+      r.value === void 0 ? (p(), v("div", Pt, [
+        D(Y, {
+          hit: e.hit,
+          locale: e.locale
+        }, null, 8, ["hit", "locale"])
+      ])) : (p(), v("a", {
         key: 1,
         class: "dialog-search-card-body",
-        href: s.value,
+        href: r.value,
         onClick: n,
-        onAuxclick: i
+        onAuxclick: a
       }, [
-        L(Q, {
-          hit: e.hit
-        }, null, 8, ["hit"])
-      ], 40, Rt))
+        D(Y, {
+          hit: e.hit,
+          locale: e.locale
+        }, null, 8, ["hit", "locale"])
+      ], 40, Nt))
     ], 512));
   }
-}), At = (t) => {
-  const e = y(), o = y(void 0), n = y(0);
-  return U(
+}), Ut = (t) => {
+  const e = A(), o = A(void 0), n = A(0);
+  return q(
     t,
-    (i, s, r) => {
-      if (!i)
+    (a, r, i) => {
+      if (!a)
         return;
-      const a = () => {
-        const g = e.value;
-        if (g === void 0)
+      const s = () => {
+        const _ = e.value;
+        if (_ === void 0)
           return;
-        const _ = g.previousElementSibling ?? g, { top: u, bottom: h, left: m, width: C } = _.getBoundingClientRect();
+        const f = _.previousElementSibling ?? _, { top: u, bottom: d, left: S, width: E } = f.getBoundingClientRect();
         n.value = window.innerHeight;
-        const p = o.value;
-        (p === void 0 || p.top !== u || p.bottom !== h || p.left !== m || p.width !== C) && (o.value = { top: u, bottom: h, left: m, width: C });
+        const c = o.value;
+        (c === void 0 || c.top !== u || c.bottom !== d || c.left !== S || c.width !== E) && (o.value = { top: u, bottom: d, left: S, width: E });
       };
-      a(), window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), r(() => {
-        window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
+      s(), window.addEventListener("scroll", s, !0), window.addEventListener("resize", s), i(() => {
+        window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s);
       });
     },
     { immediate: !0, flush: "post" }
   ), { anchorRef: e, rect: o, viewportHeight: n };
-}, Lt = (t, e) => {
-  const o = y(!1), n = y(), i = I(
-    () => t.value.status !== R.IDLE && !o.value
+}, xt = (t, e) => {
+  const o = A(!1), n = A(), a = T(
+    () => t.value.status !== w.IDLE && !o.value
   );
-  U(
+  q(
     () => t.value.query,
     () => {
       o.value = !1;
     }
-  ), U(
-    i,
-    (r, a, g) => {
-      if (!r)
+  ), q(
+    a,
+    (i, s, _) => {
+      if (!i)
         return;
-      const _ = (u) => {
-        var b, S;
-        const h = u.target;
-        if (!(h instanceof Node))
+      const f = (u) => {
+        var b, R;
+        const d = u.target;
+        if (!(d instanceof Node))
           return;
-        const m = (b = e.value) == null ? void 0 : b.previousElementSibling, C = ((S = n.value) == null ? void 0 : S.contains(h)) ?? !1, p = (m == null ? void 0 : m.contains(h)) ?? !1;
-        !C && !p && (o.value = !0);
+        const S = (b = e.value) == null ? void 0 : b.previousElementSibling, E = ((R = n.value) == null ? void 0 : R.contains(d)) ?? !1, c = (S == null ? void 0 : S.contains(d)) ?? !1;
+        !E && !c && (o.value = !0);
       };
-      document.addEventListener("pointerdown", _), g(
-        () => document.removeEventListener("pointerdown", _)
+      document.addEventListener("pointerdown", f), _(
+        () => document.removeEventListener("pointerdown", f)
       );
     },
     { immediate: !0 }
   );
-  const s = () => {
+  const r = () => {
     o.value = !1;
   };
-  return B(() => {
-    var r, a;
-    (a = (r = e.value) == null ? void 0 : r.previousElementSibling) == null || a.addEventListener(
+  return H(() => {
+    var i, s;
+    (s = (i = e.value) == null ? void 0 : i.previousElementSibling) == null || s.addEventListener(
       "focusin",
-      s
+      r
     );
-  }), X(() => {
-    var r, a;
-    (a = (r = e.value) == null ? void 0 : r.previousElementSibling) == null || a.removeEventListener(
+  }), ee(() => {
+    var i, s;
+    (s = (i = e.value) == null ? void 0 : i.previousElementSibling) == null || s.removeEventListener(
       "focusin",
-      s
+      r
     );
-  }), { isOpen: i, panelRef: n };
-}, $t = {
+  }), { isOpen: a, panelRef: n };
+}, Mt = {
   key: 0,
   role: "status",
   class: "dialog-search-status"
-}, Dt = {
+}, qt = {
   key: 1,
   class: "dialog-search-error"
-}, Pt = {
+}, Bt = {
   role: "alert",
   class: "dialog-search-status dialog-search-status-error"
-}, Ot = {
+}, Vt = {
   key: 2,
   role: "status",
   class: "dialog-search-status"
-}, Nt = {
+}, Ht = {
   role: "status",
   class: "dialog-search-status"
-}, Ut = { class: "dialog-search-results" }, q = 8, j = 16, xt = 200, Ht = /* @__PURE__ */ E({
+}, Kt = { class: "dialog-search-results" }, V = 8, z = 16, Ft = 200, Yt = /* @__PURE__ */ y({
   __name: "DialogSearchResults",
   props: {
     controller: {},
-    state: {}
+    state: {},
+    locale: {}
   },
   setup(t) {
-    const e = t, o = (p) => p instanceof pe ? `Search failed (${p.status}${p.code ? ` ${p.code}` : ""}): ${p.message}` : "Search failed: network error. Check your connection and try again.", n = (p, b) => p.bottom > 0 && p.top < b, i = (p, b) => {
-      const S = b - p.bottom - q - j, w = p.top - q - j, c = { left: `${p.left}px`, width: `${p.width}px` };
-      return S < xt && w > S ? {
-        ...c,
-        bottom: `${b - p.top + q}px`,
-        maxHeight: `${Math.max(w, 0)}px`
+    const e = t, o = (c) => c instanceof ve ? `Search failed (${c.status}${c.code ? ` ${c.code}` : ""}): ${c.message}` : "Search failed: network error. Check your connection and try again.", n = (c, b) => c.bottom > 0 && c.top < b, a = (c, b) => {
+      const R = b - c.bottom - V - z, L = c.top - V - z, h = { left: `${c.left}px`, width: `${c.width}px` };
+      return R < Ft && L > R ? {
+        ...h,
+        bottom: `${b - c.top + V}px`,
+        maxHeight: `${Math.max(L, 0)}px`
       } : {
-        ...c,
-        top: `${p.bottom + q}px`,
-        maxHeight: `${Math.max(S, 0)}px`
+        ...h,
+        top: `${c.bottom + V}px`,
+        maxHeight: `${Math.max(R, 0)}px`
       };
-    }, s = I(() => e.state), r = I(() => e.state.status !== R.IDLE), { anchorRef: a, rect: g, viewportHeight: _ } = At(r), { isOpen: u, panelRef: h } = Lt(s, a), m = I(
-      () => u.value && g.value !== void 0 && n(g.value, _.value)
-    ), C = I(
-      () => g.value === void 0 ? void 0 : i(g.value, _.value)
+    }, r = T(() => e.state), i = T(() => e.state.status !== w.IDLE), { anchorRef: s, rect: _, viewportHeight: f } = Ut(i), { isOpen: u, panelRef: d } = xt(r, s), S = T(
+      () => u.value && _.value !== void 0 && n(_.value, f.value)
+    ), E = T(
+      () => _.value === void 0 ? void 0 : a(_.value, f.value)
     );
-    return (p, b) => {
-      var S;
-      return f(), v(O, null, [
-        d("div", {
+    return (c, b) => {
+      var R;
+      return p(), v(x, null, [
+        l("div", {
           ref_key: "anchorRef",
-          ref: a
+          ref: s
         }, null, 512),
-        m.value ? (f(), N(ie, {
+        S.value ? (p(), M(de, {
           key: 0,
           to: "body"
         }, [
-          d("div", {
+          l("div", {
             ref_key: "panelRef",
-            ref: h,
+            ref: d,
             class: "dialog-search-panel",
-            style: ae(C.value)
+            style: pe(E.value)
           }, [
-            e.state.status === M(R).LOADING ? (f(), v("p", $t, " Searching “" + k(e.state.query) + "”… ", 1)) : e.state.status === M(R).ERROR ? (f(), v("div", Dt, [
-              d("p", Pt, k(o(e.state.error)), 1),
-              d("button", {
+            e.state.status === B(w).LOADING ? (p(), v("p", Mt, " Searching “" + I(e.state.query) + "”… ", 1)) : e.state.status === B(w).ERROR ? (p(), v("div", qt, [
+              l("p", Bt, I(o(e.state.error)), 1),
+              l("button", {
                 type: "button",
                 class: "dialog-search-retry",
-                onClick: b[0] || (b[0] = (w) => e.controller.retry())
+                onClick: b[0] || (b[0] = (L) => e.controller.retry())
               }, " Retry ")
-            ])) : e.state.status === M(R).EMPTY ? (f(), v("p", Ot, " No products match “" + k((S = e.state.response) == null ? void 0 : S.query) + "”. ", 1)) : e.state.status === M(R).SUCCESS && e.state.response !== void 0 ? (f(), v(O, { key: 3 }, [
-              d("p", Nt, k(e.state.response.nbHits) + " result" + k(e.state.response.nbHits > 1 ? "s" : ""), 1),
-              d("ul", Ut, [
-                (f(!0), v(O, null, W(e.state.response.hits, (w, c) => (f(), N(yt, {
-                  key: w.id,
+            ])) : e.state.status === B(w).EMPTY ? (p(), v("p", Vt, " No products match “" + I((R = e.state.response) == null ? void 0 : R.query) + "”. ", 1)) : e.state.status === B(w).SUCCESS && e.state.response !== void 0 ? (p(), v(x, { key: 3 }, [
+              l("p", Ht, I(e.state.response.nbHits) + " result" + I(e.state.response.nbHits > 1 ? "s" : ""), 1),
+              l("ul", Kt, [
+                (p(!0), v(x, null, X(e.state.response.hits, (L, h) => (p(), M(Ot, {
+                  key: L.id,
                   controller: e.controller,
-                  hit: w,
-                  index: c
-                }, null, 8, ["controller", "hit", "index"]))), 128))
+                  hit: L,
+                  index: h,
+                  locale: e.locale
+                }, null, 8, ["controller", "hit", "index", "locale"]))), 128))
               ]),
-              L(mt, {
+              D(Rt, {
                 controller: e.controller,
                 state: e.state
               }, null, 8, ["controller", "state"])
-            ], 64)) : x("", !0)
+            ], 64)) : N("", !0)
           ], 4)
-        ])) : x("", !0)
+        ])) : N("", !0)
       ], 64);
     };
   }
-}), Kt = (t) => {
-  const { client: e, surface: o = "search_page", ...n } = t, i = ke({
-    search: (a, g) => e.search(a, g),
+}), zt = (t) => {
+  const { client: e, surface: o = "search_page", ...n } = t, a = $e({
+    search: (s, _) => e.search(s, _),
     analytics: {
       surface: o,
-      trackViewSearchResults: (a) => e.trackViewSearchResults(a),
-      trackSelectSearchResult: (a) => e.trackSelectSearchResult(a)
+      trackViewSearchResults: (s) => e.trackViewSearchResults(s),
+      trackSelectSearchResult: (s) => e.trackSelectSearchResult(s)
     },
     ...n
-  }), s = ce(i.getState()), r = i.subscribe(() => {
-    s.value = i.getState();
+  }), r = _e(a.getState()), i = a.subscribe(() => {
+    r.value = a.getState();
   });
-  return B(() => {
-    J({
+  return H(() => {
+    oe({
       method: "vue",
-      version: "3.3.0"
+      version: "3.4.0"
     });
-  }), X(() => {
-    r(), i.dispose();
-  }), { controller: i, state: s };
+  }), ee(() => {
+    i(), a.dispose();
+  }), { controller: a, state: r };
 };
 export {
-  Je as DialogInput,
-  Bt as DialogProductBlock,
-  Vt as DialogSearchBar,
-  mt as DialogSearchPagination,
-  yt as DialogSearchProductCard,
-  Ht as DialogSearchResults,
-  Kt as useDialogSearch
+  st as DialogInput,
+  jt as DialogProductBlock,
+  Wt as DialogSearchBar,
+  Rt as DialogSearchPagination,
+  Ot as DialogSearchProductCard,
+  Yt as DialogSearchResults,
+  zt as useDialogSearch
 };