@askdialog/dialog-vue 3.2.0 → 3.3.0

package/dist/dialog-vue.js

@@ -1,16 +1,27 @@
-import { defineComponent as _, createElementBlock as u, openBlock as l, createElementVNode as c, toDisplayString as E, Fragment as A, renderList as N, createVNode as v, createBlock as k, ref as m, withDirectives as O, withKeys as y, vModelText as U, onMounted as b, watch as L, renderSlot as $, computed as T, withCtx as K, createCommentVNode as B } from "vue";
-const V = /* @__PURE__ */ new Set(["ar", "he", "iw", "fa", "ur"]), P = (t) => t !== void 0 && V.has(t.trim().toLowerCase().slice(0, 2)), M = (t) => P(t) ? "rtl" : "ltr";
-var h;
+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;
 (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";
-})(h || (h = {}));
-var I;
+})(P || (P = {}));
+var H;
 (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";
-})(I || (I = {}));
-h.TRACK_ADD_TO_CART, h.TRACK_SUBMIT_CHECKOUT, h.TRACK_VIEW_SEARCH_RESULTS, h.TRACK_SELECT_SEARCH_RESULT;
-const R = "multiple installation methods detected:", q = () => typeof window > "u" ? void 0 : window, w = () => {
-  const t = q();
+})(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");
+    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();
   if (t !== void 0)
     return t.dialog = t.dialog ?? {}, t.dialog.audit = t.dialog.audit ?? {
       methods: [],
@@ -18,28 +29,225 @@ const R = "multiple installation methods detected:", q = () => typeof window > "
       capabilities: [],
       warnings: []
     }, t.dialog.audit;
-}, x = (t) => {
-  if (t.warnings = t.warnings.filter((e) => !e.startsWith(R)), t.methods.length >= 2) {
+}, he = (t) => {
+  if (t.warnings = t.warnings.filter((e) => !e.startsWith(K)), t.methods.length >= 2) {
     const e = t.methods.map((o) => o.method).join(", ");
-    t.warnings.push(`${R} ${e}`);
+    t.warnings.push(`${K} ${e}`);
   }
-}, H = (t, e) => e === void 0 ? t : {
+}, fe = (t, e) => e === void 0 ? t : {
   version: (t == null ? void 0 : t.version) ?? e.version,
   commit: (t == null ? void 0 : t.commit) ?? e.commit
-}, F = (t) => {
-  const e = w();
+}, J = (t) => {
+  const e = Z();
   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() }), x(e);
+    e.methods.push({ ...t, registeredAt: (/* @__PURE__ */ new Date()).toISOString() }), he(e);
     return;
   }
-  o.version = o.version ?? t.version, o.build = H(o.build, t.build), o.source = o.source ?? t.source;
-}, G = (t) => {
-  const e = w();
+  o.version = o.version ?? t.version, o.build = fe(o.build, t.build), o.source = o.source ?? t.source;
+}, ge = (t) => {
+  const e = Z();
   e !== void 0 && (e.capabilities.includes(t) || e.capabilities.push(t));
-}, j = { class: "dialog-block-header-container" }, Q = { class: "dialog-block-title" }, W = { class: "dialog-block-description" }, Z = /* @__PURE__ */ _({
+}, R = {
+  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();
+  let u;
+  const h = () => {
+    clearTimeout(u), !(s === void 0 || r.length === 0) && (t({ ...s, items: r }), r = []);
+  }, m = (c) => {
+    if (s === 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();
+        return;
+      }
+      clearTimeout(u), u = setTimeout(h, 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));
+    }
+  }, { 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);
+    }
+  };
+  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();
+    },
+    observe(c, l) {
+      g.set(c, l), p.observe(c);
+    },
+    forceImpression(c) {
+      m(c), h();
+    },
+    flush: h,
+    disconnect() {
+      h(), b(), window.removeEventListener("pagehide", S), window.removeEventListener("pageshow", w);
+    }
+  };
+}
+const F = (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) {
+  let e, o;
+  const n = () => (e ?? (e = be({
+    emit: t.trackViewSearchResults
+  })), e);
+  return {
+    onResponse(i) {
+      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,
+        surface: t.surface,
+        // 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: [] });
+    },
+    observeResult(i, s, r) {
+      n().observe(i, F(s, r));
+    },
+    select(i, s) {
+      if (o === void 0)
+        return;
+      const r = F(i, s);
+      n().forceImpression(r), t.trackSelectSearchResult({ ...o, items: [r] });
+    },
+    dispose() {
+      e == null || e.disconnect();
+    }
+  };
+}
+const Te = 250, Ie = 12, we = 2, G = {
+  status: R.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 });
+    try {
+      const $ = await t(A, {
+        signal: u.signal
+      });
+      if (T !== h)
+        return;
+      a.onResponse($), C({
+        status: $.nbHits === 0 ? R.EMPTY : R.SUCCESS,
+        response: $,
+        error: void 0
+      });
+    } catch ($) {
+      if ($ instanceof DOMException && $.name === "AbortError" || T !== h)
+        return;
+      C({ status: R.ERROR, error: $, response: void 0 });
+    }
+  }, w = (c) => {
+    const l = c.trim();
+    if (p(), _ = void 0, [...l].length < we) {
+      h += 1, C(G);
+      return;
+    }
+    return l;
+  };
+  return {
+    setQuery(c) {
+      const l = m ? void 0 : w(c);
+      l !== void 0 && (_ = l, g = setTimeout(() => {
+        _ = void 0, S(l, 0);
+      }, n));
+    },
+    submit(c) {
+      const l = m ? void 0 : w(c);
+      l !== void 0 && S(l, 0);
+    },
+    setPage(c) {
+      if (!m) {
+        if (_ !== void 0) {
+          const l = _;
+          _ = void 0, S(l, 0);
+          return;
+        }
+        s.query !== "" && S(s.query, c);
+      }
+    },
+    retry() {
+      m || s.status !== R.ERROR || S(s.query, s.page);
+    },
+    observeResult(c, l) {
+      s.response !== void 0 && a.observeResult(c, s.response, l);
+    },
+    selectResult(c, l) {
+      const T = s.response;
+      if (T === 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;
+    },
+    subscribe(c) {
+      return r.add(c), () => {
+        r.delete(c);
+      };
+    },
+    getState: () => s,
+    dispose() {
+      m = !0, p(), h += 1, _ = void 0, r.clear(), a.dispose();
+    }
+  };
+}
+const Re = { class: "dialog-block-header-container" }, ye = { class: "dialog-block-title" }, Ae = { class: "dialog-block-description" }, Le = /* @__PURE__ */ E({
   __name: "DialogBlockHeader",
   props: {
     title: {},
@@ -47,32 +255,32 @@ const R = "multiple installation methods detected:", q = () => typeof window > "
   },
   setup(t) {
     const e = t;
-    return (o, n) => (l(), u("div", j, [
-      c("div", Q, E(e.title ?? "Your expert"), 1),
-      c("div", W, E(e.description ?? "A question about this product?"), 1)
+    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)
     ]));
   }
-}), S = (t, e) => {
+}), D = (t, e) => {
   const o = t.__vccOpts || t;
-  for (const [n, a] of e)
-    o[n] = a;
+  for (const [n, i] of e)
+    o[n] = i;
   return o;
-}, z = /* @__PURE__ */ S(Z, [["__scopeId", "data-v-28e6dda7"]]), X = {
+}, $e = /* @__PURE__ */ D(Le, [["__scopeId", "data-v-28e6dda7"]]), De = {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, Y = { "clip-path": "url(#clip0_466_934)" }, J = ["stroke"], ee = ["stroke"], te = /* @__PURE__ */ _({
+}, Pe = { "clip-path": "url(#clip0_466_934)" }, Oe = ["stroke"], Ne = ["stroke"], Ue = /* @__PURE__ */ E({
   __name: "AiStarsIcon",
   props: {
     color: {}
   },
   setup(t) {
     const e = t;
-    return (o, n) => (l(), u("svg", X, [
-      c("g", Y, [
-        c("path", {
+    return (o, n) => (f(), v("svg", De, [
+      d("g", Pe, [
+        d("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
@@ -87,8 +295,8 @@ const R = "multiple installation methods detected:", q = () => typeof window > "
           "stroke-width": "1.5",
           "stroke-linecap": "round",
           "stroke-linejoin": "round"
-        }, null, 8, J),
-        c("path", {
+        }, null, 8, Oe),
+        d("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
@@ -103,11 +311,11 @@ const R = "multiple installation methods detected:", q = () => typeof window > "
           "stroke-width": "1.5",
           "stroke-linecap": "round",
           "stroke-linejoin": "round"
-        }, null, 8, ee)
+        }, null, 8, Ne)
       ]),
-      n[0] || (n[0] = c("defs", null, [
-        c("clipPath", { id: "clip0_466_934" }, [
-          c("rect", {
+      n[0] || (n[0] = d("defs", null, [
+        d("clipPath", { id: "clip0_466_934" }, [
+          d("rect", {
             width: "20",
             height: "20",
             fill: "white"
@@ -116,7 +324,7 @@ const R = "multiple installation methods detected:", q = () => typeof window > "
       ], -1))
     ]));
   }
-}), oe = ["onClick"], ne = { class: "dialog-block-suggestions-item-label" }, ie = /* @__PURE__ */ _({
+}), xe = ["onClick"], Me = { class: "dialog-block-suggestions-item-label" }, qe = /* @__PURE__ */ E({
   __name: "DialogBlockSuggestions",
   props: {
     client: {},
@@ -135,27 +343,27 @@ const R = "multiple installation methods detected:", q = () => typeof window > "
         fromQuestionSuggestion: !0
       });
     };
-    return (n, a) => (l(!0), u(A, null, N(e.questions, (i) => (l(), u("button", {
-      key: i.question,
+    return (n, i) => (f(!0), v(O, null, W(e.questions, (s) => (f(), v("button", {
+      key: s.question,
       class: "dialog-block-suggestions-item",
-      onClick: (r) => o(i.question)
+      onClick: (r) => o(s.question)
     }, [
-      v(te, {
+      L(Ue, {
         class: "dialog-block-suggestions-item-icon",
         color: e.client.theme.primaryColor
       }, null, 8, ["color"]),
-      c("span", ne, E(i.question), 1)
-    ], 8, oe))), 128));
+      d("span", Me, k(s.question), 1)
+    ], 8, xe))), 128));
   }
-}), se = /* @__PURE__ */ S(ie, [["__scopeId", "data-v-db34d4b4"]]), ce = {};
-function re(t, e) {
-  return l(), u(A, null, [
-    e[0] || (e[0] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
-    e[1] || (e[1] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
-    e[2] || (e[2] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1))
+}), 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))
   ], 64);
 }
-const de = /* @__PURE__ */ S(ce, [["render", re], ["__scopeId", "data-v-26a64b58"]]), le = { class: "dialog-block-suggestions-container" }, ae = /* @__PURE__ */ _({
+const Ke = /* @__PURE__ */ D(Ve, [["render", He], ["__scopeId", "data-v-26a64b58"]]), Fe = { class: "dialog-block-suggestions-container" }, Ge = /* @__PURE__ */ E({
   __name: "DialogBlockSuggestionsContainer",
   props: {
     client: {},
@@ -167,8 +375,8 @@ const de = /* @__PURE__ */ S(ce, [["render", re], ["__scopeId", "data-v-26a64b58
   },
   setup(t) {
     const e = t;
-    return (o, n) => (l(), u("div", le, [
-      e.isLoading || !e.questions ? (l(), k(de, { key: 0 })) : (l(), k(se, {
+    return (o, n) => (f(), v("div", Fe, [
+      e.isLoading || !e.questions ? (f(), N(Ke, { key: 0 })) : (f(), N(Be, {
         key: 1,
         client: e.client,
         questions: e.questions,
@@ -178,30 +386,30 @@ const de = /* @__PURE__ */ S(ce, [["render", re], ["__scopeId", "data-v-26a64b58
       }, null, 8, ["client", "questions", "product-id", "product-title", "selected-variant-id"]))
     ]));
   }
-}), ue = /* @__PURE__ */ S(ae, [["__scopeId", "data-v-18c9e78b"]]), _e = {
+}), Qe = /* @__PURE__ */ D(Ge, [["__scopeId", "data-v-18c9e78b"]]), je = {
   width: "20",
   height: "20",
   viewBox: "0 0 20 20",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, pe = ["stroke"], ge = /* @__PURE__ */ _({
+}, We = ["stroke"], Ye = /* @__PURE__ */ E({
   __name: "ArrowIcon",
   props: {
     color: {}
   },
   setup(t) {
     const e = t;
-    return (o, n) => (l(), u("svg", _e, [
-      c("path", {
+    return (o, n) => (f(), v("svg", je, [
+      d("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, pe)
+      }, null, 8, We)
     ]));
   }
-}), Ce = ["placeholder"], he = ["disabled"], Se = /* @__PURE__ */ _({
+}), ze = ["placeholder"], Xe = ["disabled"], Ze = /* @__PURE__ */ E({
   __name: "DialogInput",
   props: {
     client: {},
@@ -211,10 +419,10 @@ const de = /* @__PURE__ */ S(ce, [["render", re], ["__scopeId", "data-v-26a64b58
     selectedVariantId: {}
   },
   setup(t) {
-    const e = t, o = m(), n = m(""), a = () => {
+    const e = t, o = y(), n = y(""), i = () => {
       var r;
       (r = o.value) == null || r.focus();
-    }, i = () => {
+    }, s = () => {
       const r = n.value;
       r.trim() && (e.client.sendProductMessage({
         productId: e.productId,
@@ -224,80 +432,80 @@ const de = /* @__PURE__ */ S(ce, [["render", re], ["__scopeId", "data-v-26a64b58
         fromQuestionSuggestion: !0
       }), n.value = "");
     };
-    return (r, d) => (l(), u("div", {
+    return (r, a) => (f(), v("div", {
       class: "dialog-input-wrapper",
-      onClick: a
+      onClick: i
     }, [
-      O(c("input", {
+      Y(d("input", {
         id: "dialog-ask-anything-input-ai-input",
         ref_key: "inputRef",
         ref: o,
-        "onUpdate:modelValue": d[0] || (d[0] = (p) => n.value = p),
+        "onUpdate:modelValue": a[0] || (a[0] = (g) => n.value = g),
         class: "dialog-ask-anything-input-ai-input",
         placeholder: e.placeholder ?? "Ask anything...",
-        onKeydown: y(i, ["enter"])
-      }, null, 40, Ce), [
-        [U, n.value]
+        onKeydown: oe(s, ["enter"])
+      }, null, 40, ze), [
+        [z, n.value]
       ]),
-      c("button", {
+      d("button", {
         id: "send-message-button-ai-input",
         class: "dialog-input-submit",
         disabled: !n.value.trim(),
-        onClick: i
+        onClick: s
       }, [
-        v(ge, {
+        L(Ye, {
           color: e.client.theme.ctaTextColor
         }, null, 8, ["color"])
-      ], 8, he)
+      ], 8, Xe)
     ]));
   }
-}), me = /* @__PURE__ */ S(Se, [["__scopeId", "data-v-4f5901c9"]]), fe = /* @__PURE__ */ _({
+}), Je = /* @__PURE__ */ D(Ze, [["__scopeId", "data-v-4f5901c9"]]), et = /* @__PURE__ */ E({
   __name: "ThemeProvider",
   props: {
     theme: {}
   },
   setup(t) {
-    const e = t, o = document.body, n = (i) => i.replace(/([A-Z])/g, "-$1").toLowerCase(), a = (i) => {
-      i && Object.keys(i).forEach((r) => {
-        const d = r, p = n(r);
-        if (i[d] !== void 0) {
-          if (typeof i[d] == "object") {
-            Object.keys(i[d]).forEach((C) => {
-              var g;
-              const s = C;
-              if (s !== void 0) {
-                const f = n(C), D = i[d];
+    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 = _;
+              if (u !== void 0) {
+                const m = n(_), C = s[a];
                 o.style.setProperty(
-                  `--dialog-theme-${p}-${f}`,
-                  (g = D[s]) == null ? void 0 : g.toString()
+                  `--dialog-theme-${g}-${m}`,
+                  (h = C[u]) == null ? void 0 : h.toString()
                 );
               }
             });
             return;
           }
-          if (d === "ctaBorderType") {
-            const C = i[d] === "rounded" ? "24px" : "0";
-            o.style.setProperty(`--dialog-theme-${p}`, C);
+          if (a === "ctaBorderType") {
+            const _ = s[a] === "rounded" ? "24px" : "0";
+            o.style.setProperty(`--dialog-theme-${g}`, _);
             return;
           }
           o.style.setProperty(
-            `--dialog-theme-${p}`,
-            i[d].toString()
+            `--dialog-theme-${g}`,
+            s[a].toString()
           );
         }
       });
     };
-    return b(() => {
-      e.theme && a(e.theme);
-    }), L(
+    return B(() => {
+      e.theme && i(e.theme);
+    }), U(
       () => e.theme,
-      (i) => {
-        i && a(i);
+      (s) => {
+        s && i(s);
       },
       { deep: !0 }
-    ), (i, r) => $(i.$slots, "default");
+    ), (s, r) => se(s.$slots, "default");
   }
-}), Te = ["dir"], ve = /* @__PURE__ */ _({
+}), tt = ["dir"], ot = /* @__PURE__ */ E({
   __name: "DialogProductBlock",
   props: {
     client: {},
@@ -308,85 +516,464 @@ const de = /* @__PURE__ */ S(ce, [["render", re], ["__scopeId", "data-v-26a64b58
   },
   setup(t) {
     const e = t;
-    b(() => {
-      F({
+    B(() => {
+      J({
         method: "vue",
-        version: "3.2.0"
-      }), G("pdp-block");
+        version: "3.3.0"
+      }), ge("pdp-block");
     });
-    const o = m(!0), n = m(void 0), a = m(0), i = T(() => {
-      var s;
-      return o.value ? "" : (s = n.value) == null ? void 0 : s.assistantName;
-    }), r = T(() => {
-      var s;
-      return o.value ? "" : (s = n.value) == null ? void 0 : s.description;
-    }), d = T(() => {
-      var s;
-      return o.value ? "" : (s = n.value) == null ? void 0 : s.inputPlaceholder;
-    }), p = T(
+    const o = y(!0), n = y(void 0), i = y(0), s = I(() => {
+      var u;
+      return o.value ? "" : (u = n.value) == null ? void 0 : u.assistantName;
+    }), r = I(() => {
+      var u;
+      return o.value ? "" : (u = n.value) == null ? void 0 : u.description;
+    }), a = I(() => {
+      var u;
+      return o.value ? "" : (u = n.value) == null ? void 0 : u.inputPlaceholder;
+    }), g = I(
       () => {
-        var s;
-        return M(
-          (s = e.client.getLocalizationInformations()) == null ? void 0 : s.languageCode
+        var u;
+        return de(
+          (u = e.client.getLocalizationInformations()) == null ? void 0 : u.languageCode
         );
       }
-    ), C = async () => {
-      const s = ++a.value;
+    ), _ = async () => {
+      const u = ++i.value;
       o.value = !0, n.value = void 0;
       try {
-        const g = await e.client.getSuggestions(e.productId);
-        s === a.value && (n.value = g);
-      } catch (g) {
-        console.error("error", g);
+        const h = await e.client.getSuggestions(e.productId);
+        u === i.value && (n.value = h);
+      } catch (h) {
+        console.error("error", h);
       } finally {
-        s === a.value && (o.value = !1);
+        u === i.value && (o.value = !1);
       }
     };
-    return L(
+    return U(
       () => [e.client, e.productId],
       () => {
-        C();
+        _();
       },
       { immediate: !0 }
-    ), (s, g) => (l(), k(fe, {
+    ), (u, h) => (f(), N(et, {
       theme: e.client.theme
     }, {
-      default: K(() => {
-        var f;
+      default: ne(() => {
+        var m;
         return [
-          c("div", {
+          d("div", {
             id: "dialog-instant",
             class: "dialog-block-container",
-            dir: p.value
+            dir: g.value
           }, [
-            v(z, {
-              title: i.value,
+            L($e, {
+              title: s.value,
               description: r.value
             }, null, 8, ["title", "description"]),
-            v(ue, {
+            L(Qe, {
               client: e.client,
-              questions: (f = n.value) == null ? void 0 : f.questions,
+              questions: (m = n.value) == null ? void 0 : m.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 ? (l(), k(me, {
+            e.enableInput ? (f(), N(Je, {
               key: 0,
               client: e.client,
-              placeholder: d.value,
+              placeholder: a.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"])) : B("", !0)
-          ], 8, Te)
+            }, null, 8, ["client", "placeholder", "product-id", "product-title", "selected-variant-id"])) : x("", !0)
+          ], 8, tt)
         ];
       }),
       _: 1
     }, 8, ["theme"]));
   }
-}), Ee = /* @__PURE__ */ S(ve, [["__scopeId", "data-v-c57aa677"]]);
+}), Bt = /* @__PURE__ */ D(ot, [["__scopeId", "data-v-c57aa677"]]), st = {}, nt = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  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", {
+      d: "M8 13V3M8 3L3 8M8 3L13 8",
+      stroke: "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ]));
+}
+const it = /* @__PURE__ */ D(st, [["render", rt]]), at = {
+  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({
+  __name: "ShurikenIcon",
+  props: {
+    color: {}
+  },
+  setup(t) {
+    const e = t;
+    return (o, n) => (f(), v("svg", at, [
+      d("path", {
+        d: lt,
+        fill: e.color || "currentColor"
+      }, null, 8, ct)
+    ]));
+  }
+}), dt = { class: "dialog-search-bar-field" }, pt = { class: "dialog-search-bar-icon" }, _t = ["aria-label", "placeholder", "autofocus"], ht = ["aria-label"], Vt = /* @__PURE__ */ E({
+  __name: "DialogSearchBar",
+  props: {
+    controller: {},
+    placeholder: { default: "Search products..." },
+    autoFocus: { type: Boolean, default: !1 },
+    submitAriaLabel: { default: "Search" }
+  },
+  setup(t) {
+    const e = t, o = y(""), n = () => {
+      e.controller.setQuery(o.value);
+    }, i = () => {
+      e.controller.submit(o.value);
+    };
+    return (s, r) => (f(), v("form", {
+      class: "dialog-search-bar",
+      role: "search",
+      onSubmit: re(i, ["prevent"])
+    }, [
+      d("div", dt, [
+        d("span", pt, [
+          L(ut)
+        ]),
+        Y(d("input", {
+          "onUpdate:modelValue": r[0] || (r[0] = (a) => o.value = a),
+          type: "text",
+          name: "dialog-search-query",
+          class: "dialog-search-bar-input",
+          "aria-label": e.placeholder,
+          placeholder: e.placeholder,
+          autofocus: e.autoFocus,
+          onInput: n
+        }, null, 40, _t), [
+          [z, o.value]
+        ])
+      ]),
+      d("button", {
+        type: "submit",
+        class: "dialog-search-bar-submit",
+        "aria-label": e.submitAriaLabel
+      }, [
+        L(it)
+      ], 8, ht)
+    ], 32));
+  }
+}), ft = {
+  key: 0,
+  "aria-label": "Search results pages",
+  class: "dialog-search-pagination"
+}, gt = ["disabled"], vt = ["disabled"], mt = /* @__PURE__ */ E({
+  __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", {
+        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", {
+        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);
+  }
+}), St = (t) => {
+  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)}`;
+  } catch {
+    return "";
+  }
+}, Ct = (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 = {
+  key: 0,
+  class: "dialog-search-card-price"
+}, Q = /* @__PURE__ */ E({
+  __name: "DialogSearchProductCardContent",
+  props: {
+    hit: {}
+  },
+  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", {
+          key: 0,
+          src: e.hit.product.imageUrl,
+          alt: o.value,
+          loading: "lazy"
+        }, null, 8, Et)) : x("", !0)
+      ]),
+      d("div", Tt, [
+        d("p", It, k(o.value), 1),
+        n.value !== "" ? (f(), v("p", wt, k(n.value), 1)) : x("", !0)
+      ])
+    ], 64));
+  }
+}), kt = {
+  key: 0,
+  class: "dialog-search-card-body"
+}, Rt = ["href"], yt = /* @__PURE__ */ E({
+  __name: "DialogSearchProductCard",
+  props: {
+    controller: {},
+    hit: {},
+    index: {}
+  },
+  setup(t) {
+    const e = t, o = y();
+    U(
+      () => 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)
+    );
+    return (r, a) => (f(), 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", {
+        key: 1,
+        class: "dialog-search-card-body",
+        href: s.value,
+        onClick: n,
+        onAuxclick: i
+      }, [
+        L(Q, {
+          hit: e.hit
+        }, null, 8, ["hit"])
+      ], 40, Rt))
+    ], 512));
+  }
+}), At = (t) => {
+  const e = y(), o = y(void 0), n = y(0);
+  return U(
+    t,
+    (i, s, r) => {
+      if (!i)
+        return;
+      const a = () => {
+        const g = e.value;
+        if (g === void 0)
+          return;
+        const _ = g.previousElementSibling ?? g, { top: u, bottom: h, left: m, width: C } = _.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 });
+      };
+      a(), window.addEventListener("scroll", a, !0), window.addEventListener("resize", a), r(() => {
+        window.removeEventListener("scroll", a, !0), window.removeEventListener("resize", a);
+      });
+    },
+    { 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
+  );
+  U(
+    () => t.value.query,
+    () => {
+      o.value = !1;
+    }
+  ), U(
+    i,
+    (r, a, g) => {
+      if (!r)
+        return;
+      const _ = (u) => {
+        var b, S;
+        const h = u.target;
+        if (!(h 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);
+      };
+      document.addEventListener("pointerdown", _), g(
+        () => document.removeEventListener("pointerdown", _)
+      );
+    },
+    { immediate: !0 }
+  );
+  const s = () => {
+    o.value = !1;
+  };
+  return B(() => {
+    var r, a;
+    (a = (r = e.value) == null ? void 0 : r.previousElementSibling) == null || a.addEventListener(
+      "focusin",
+      s
+    );
+  }), X(() => {
+    var r, a;
+    (a = (r = e.value) == null ? void 0 : r.previousElementSibling) == null || a.removeEventListener(
+      "focusin",
+      s
+    );
+  }), { isOpen: i, panelRef: n };
+}, $t = {
+  key: 0,
+  role: "status",
+  class: "dialog-search-status"
+}, Dt = {
+  key: 1,
+  class: "dialog-search-error"
+}, Pt = {
+  role: "alert",
+  class: "dialog-search-status dialog-search-status-error"
+}, Ot = {
+  key: 2,
+  role: "status",
+  class: "dialog-search-status"
+}, Nt = {
+  role: "status",
+  class: "dialog-search-status"
+}, Ut = { class: "dialog-search-results" }, q = 8, j = 16, xt = 200, Ht = /* @__PURE__ */ E({
+  __name: "DialogSearchResults",
+  props: {
+    controller: {},
+    state: {}
+  },
+  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`
+      } : {
+        ...c,
+        top: `${p.bottom + q}px`,
+        maxHeight: `${Math.max(S, 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)
+    );
+    return (p, b) => {
+      var S;
+      return f(), v(O, null, [
+        d("div", {
+          ref_key: "anchorRef",
+          ref: a
+        }, null, 512),
+        m.value ? (f(), N(ie, {
+          key: 0,
+          to: "body"
+        }, [
+          d("div", {
+            ref_key: "panelRef",
+            ref: h,
+            class: "dialog-search-panel",
+            style: ae(C.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", {
+                type: "button",
+                class: "dialog-search-retry",
+                onClick: b[0] || (b[0] = (w) => 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,
+                  controller: e.controller,
+                  hit: w,
+                  index: c
+                }, null, 8, ["controller", "hit", "index"]))), 128))
+              ]),
+              L(mt, {
+                controller: e.controller,
+                state: e.state
+              }, null, 8, ["controller", "state"])
+            ], 64)) : x("", !0)
+          ], 4)
+        ])) : x("", !0)
+      ], 64);
+    };
+  }
+}), Kt = (t) => {
+  const { client: e, surface: o = "search_page", ...n } = t, i = ke({
+    search: (a, g) => e.search(a, g),
+    analytics: {
+      surface: o,
+      trackViewSearchResults: (a) => e.trackViewSearchResults(a),
+      trackSelectSearchResult: (a) => e.trackSelectSearchResult(a)
+    },
+    ...n
+  }), s = ce(i.getState()), r = i.subscribe(() => {
+    s.value = i.getState();
+  });
+  return B(() => {
+    J({
+      method: "vue",
+      version: "3.3.0"
+    });
+  }), X(() => {
+    r(), i.dispose();
+  }), { controller: i, state: s };
+};
 export {
-  me as DialogInput,
-  Ee as DialogProductBlock
+  Je as DialogInput,
+  Bt as DialogProductBlock,
+  Vt as DialogSearchBar,
+  mt as DialogSearchPagination,
+  yt as DialogSearchProductCard,
+  Ht as DialogSearchResults,
+  Kt as useDialogSearch
 };