@askdialog/dialog-react 2.4.0 → 2.6.0

package/dist/dialog-react.js

@@ -1,14 +1,14 @@
-import { jsxs as h, jsx as n, Fragment as y } from "react/jsx-runtime";
-import { useRef as v, useState as C, useEffect as f, useMemo as w, useLayoutEffect as D, useCallback as N, useSyncExternalStore as x } from "react";
-import { registerDialogInstallation as R, addAuditCapability as A, resolveTextDirection as I, SearchStatus as b, DialogSearchError as M, createSearchController as B } from "@askdialog/dialog-sdk";
-import { createPortal as _ } from "react-dom";
-const H = ({
+import { jsxs as g, jsx as n, Fragment as C } from "react/jsx-runtime";
+import { useRef as b, useState as v, useEffect as m, useMemo as y, useLayoutEffect as j, useCallback as x, useSyncExternalStore as V } from "react";
+import { registerDialogInstallation as D, addAuditCapability as K, resolveTextDirection as F, SearchStatus as L, DialogSearchError as q, createSearchController as z } from "@askdialog/dialog-sdk";
+import { createPortal as U } from "react-dom";
+const W = ({
   title: e = "Your expert",
   description: t = "A question about this product?"
-}) => /* @__PURE__ */ h("div", { className: "dialog-block-header-container", children: [
+}) => /* @__PURE__ */ g("div", { className: "dialog-block-header-container", children: [
   /* @__PURE__ */ n("div", { className: "dialog-block-title", children: e }),
   /* @__PURE__ */ n("div", { className: "dialog-block-description", children: t })
-] }), K = ({ color: e = "#181825" }) => /* @__PURE__ */ h(
+] }), Q = ({ color: e = "#181825" }) => /* @__PURE__ */ g(
   "svg",
   {
     width: "20",
@@ -17,7 +17,7 @@ const H = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ h("g", { clipPath: "url(#clip0_466_934)", children: [
+      /* @__PURE__ */ g("g", { clipPath: "url(#clip0_466_934)", children: [
         /* @__PURE__ */ n(
           "path",
           {
@@ -42,55 +42,55 @@ const H = ({
       /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ n("rect", { width: "20", height: "20", fill: "white" }) }) })
     ]
   }
-), j = ({
+), Z = ({
   client: e,
   questions: t,
   productId: s,
   productTitle: r,
-  selectedVariantId: a
+  selectedVariantId: o
 }) => {
   const c = (l) => {
     e.sendProductMessage({
       productId: s,
       productTitle: r,
-      selectedVariantId: a,
+      selectedVariantId: o,
       question: l,
       fromQuestionSuggestion: !0
     });
   };
-  return /* @__PURE__ */ n(y, { children: t.map((l) => /* @__PURE__ */ h(
+  return /* @__PURE__ */ n(C, { children: t.map((l) => /* @__PURE__ */ g(
     "button",
     {
       className: "dialog-block-suggestions-item",
       onClick: () => c(l.question),
       children: [
-        /* @__PURE__ */ n(K, { color: e.theme.primaryColor }),
+        /* @__PURE__ */ n(Q, { color: e.theme.primaryColor }),
         /* @__PURE__ */ n("span", { className: "dialog-block-suggestions-item-label", children: l.question })
       ]
     },
     l.question
   )) });
-}, O = () => /* @__PURE__ */ h(y, { children: [
+}, X = () => /* @__PURE__ */ g(C, { children: [
   /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-skeleton-item" }),
   /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-skeleton-item" }),
   /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-skeleton-item" })
-] }), $ = ({
+] }), G = ({
   client: e,
   questions: t,
   isLoading: s,
   productId: r,
-  productTitle: a,
+  productTitle: o,
   selectedVariantId: c
-}) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(O, {}) : /* @__PURE__ */ n(
-  j,
+}) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(X, {}) : /* @__PURE__ */ n(
+  Z,
   {
     client: e,
     questions: t,
     productId: r,
-    productTitle: a,
+    productTitle: o,
     selectedVariantId: c
   }
-) }), T = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
+) }), Y = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
   "svg",
   {
     width: "20",
@@ -109,14 +109,14 @@ const H = ({
       }
     )
   }
-), V = ({
+), J = ({
   client: e,
   placeholder: t = "Ask anything...",
   productId: s,
   productTitle: r,
-  selectedVariantId: a
+  selectedVariantId: o
 }) => {
-  const c = v(null), [l, i] = C(""), o = () => {
+  const c = b(null), [l, a] = v(""), i = () => {
     var d;
     (d = c.current) == null || d.focus();
   }, u = () => {
@@ -124,19 +124,19 @@ const H = ({
     d.trim() && (e.sendProductMessage({
       productId: s,
       productTitle: r,
-      selectedVariantId: a,
+      selectedVariantId: o,
       question: d,
       fromQuestionSuggestion: !0
-    }), i(""));
+    }), a(""));
   };
-  return /* @__PURE__ */ h("div", { className: "dialog-input-wrapper", onClick: o, children: [
+  return /* @__PURE__ */ g("div", { className: "dialog-input-wrapper", onClick: i, children: [
     /* @__PURE__ */ n(
       "input",
       {
         id: "dialog-ask-anything-input-ai-input",
         ref: c,
         value: l,
-        onChange: (d) => i(d.target.value),
+        onChange: (d) => a(d.target.value),
         className: "dialog-ask-anything-input-ai-input",
         placeholder: t,
         onKeyDown: (d) => {
@@ -151,26 +151,26 @@ const H = ({
         className: "dialog-input-submit",
         disabled: !l.trim(),
         onClick: u,
-        children: /* @__PURE__ */ n(T, { color: e.theme.ctaTextColor })
+        children: /* @__PURE__ */ n(Y, { color: e.theme.ctaTextColor })
       }
     )
   ] });
-}, P = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), q = (e) => {
+}, E = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), ee = (e) => {
   if (!e) return;
   const t = document.body;
   Object.keys(e).forEach((s) => {
-    const r = s, a = P(s);
+    const r = s, o = E(s);
     if (e[r] !== void 0) {
       if (typeof e[r] == "object") {
         Object.keys(e[r]).forEach(
           (c) => {
-            var i;
+            var a;
             const l = c;
             if (l !== void 0) {
-              const o = P(c), u = e[r];
+              const i = E(c), u = e[r];
               t.style.setProperty(
-                `--dialog-theme-${a}-${o}`,
-                (i = u[l]) == null ? void 0 : i.toString()
+                `--dialog-theme-${o}-${i}`,
+                (a = u[l]) == null ? void 0 : a.toString()
               );
             }
           }
@@ -179,85 +179,85 @@ const H = ({
       }
       if (r === "ctaBorderType") {
         const c = e[r] === "rounded" ? "24px" : "0";
-        t.style.setProperty(`--dialog-theme-${a}`, c);
+        t.style.setProperty(`--dialog-theme-${o}`, c);
         return;
       }
       t.style.setProperty(
-        `--dialog-theme-${a}`,
+        `--dialog-theme-${o}`,
         e[r].toString()
       );
     }
   });
-}, F = ({ theme: e, children: t }) => (f(() => {
-  e && q(e);
-}, [e]), /* @__PURE__ */ n(y, { children: t })), he = ({
+}, te = ({ theme: e, children: t }) => (m(() => {
+  e && ee(e);
+}, [e]), /* @__PURE__ */ n(C, { children: t })), Fe = ({
   client: e,
   productId: t,
   productTitle: s,
   selectedVariantId: r,
-  enableInput: a = !0
+  enableInput: o = !0
 }) => {
-  const [c, l] = C(!0), [i, o] = C(
+  const [c, l] = v(!0), [a, i] = v(
     void 0
   );
-  f(() => {
-    R({
+  m(() => {
+    D({
       method: "react",
-      version: "2.4.0"
-    }), A("pdp-block");
+      version: "2.6.0"
+    }), K("pdp-block");
   }, []);
-  const u = w(
-    () => c ? "" : i == null ? void 0 : i.assistantName,
-    [i, c]
-  ), p = w(
-    () => c ? "" : i == null ? void 0 : i.description,
-    [i, c]
-  ), d = w(
-    () => c ? "" : i == null ? void 0 : i.inputPlaceholder,
-    [i, c]
-  ), m = w(
+  const u = y(
+    () => c ? "" : a == null ? void 0 : a.assistantName,
+    [a, c]
+  ), p = y(
+    () => c ? "" : a == null ? void 0 : a.description,
+    [a, c]
+  ), d = y(
+    () => c ? "" : a == null ? void 0 : a.inputPlaceholder,
+    [a, c]
+  ), f = y(
     () => {
-      var g;
-      return I((g = e.getLocalizationInformations()) == null ? void 0 : g.languageCode);
+      var h;
+      return F((h = e.getLocalizationInformations()) == null ? void 0 : h.languageCode);
     },
     [e]
   );
-  return f(() => {
-    let g = !0;
+  return m(() => {
+    let h = !0;
     return (async () => {
-      l(!0), o(void 0);
+      l(!0), i(void 0);
       try {
         const k = await e.getSuggestions(t);
-        g && o(k);
+        h && i(k);
       } catch (k) {
         console.error("error", k);
       } finally {
-        g && l(!1);
+        h && l(!1);
       }
     })(), () => {
-      g = !1;
+      h = !1;
     };
-  }, [e, t]), /* @__PURE__ */ n(F, { theme: e.theme, children: /* @__PURE__ */ h(
+  }, [e, t]), /* @__PURE__ */ n(te, { theme: e.theme, children: /* @__PURE__ */ g(
     "div",
     {
       id: "dialog-instant",
       className: "dialog-block-container",
-      dir: m,
+      dir: f,
       children: [
-        /* @__PURE__ */ n(H, { title: u, description: p }),
+        /* @__PURE__ */ n(W, { title: u, description: p }),
         /* @__PURE__ */ n(
-          $,
+          G,
           {
             client: e,
-            questions: i == null ? void 0 : i.questions,
+            questions: a == null ? void 0 : a.questions,
             isLoading: c,
             productId: t,
             productTitle: s,
             selectedVariantId: r
           }
         ),
-        a && /* @__PURE__ */ n(
-          V,
+        o && /* @__PURE__ */ n(
+          J,
           {
             client: e,
             placeholder: d,
@@ -269,7 +269,7 @@ const H = ({
       ]
     }
   ) });
-}, Q = () => /* @__PURE__ */ n(
+}, re = () => /* @__PURE__ */ n(
   "svg",
   {
     width: 16,
@@ -289,7 +289,7 @@ const H = ({
       }
     )
   }
-), U = "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", W = ({
+), se = "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", ne = ({
   color: e = "currentColor"
 }) => /* @__PURE__ */ n(
   "svg",
@@ -300,32 +300,32 @@ const H = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ n("path", { d: U, fill: e })
+    children: /* @__PURE__ */ n("path", { d: se, fill: e })
   }
-), ge = ({
+), qe = ({
   controller: e,
   placeholder: t = "Search products...",
   autoFocus: s = !1,
   submitAriaLabel: r = "Search"
 }) => {
-  const [a, c] = C("");
-  return /* @__PURE__ */ h("form", { className: "dialog-search-bar", role: "search", onSubmit: (i) => {
-    i.preventDefault(), e.submit(a);
+  const [o, c] = v("");
+  return /* @__PURE__ */ g("form", { className: "dialog-search-bar", role: "search", onSubmit: (a) => {
+    a.preventDefault(), e.submit(o);
   }, children: [
-    /* @__PURE__ */ h("div", { className: "dialog-search-bar-field", children: [
-      /* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(W, {}) }),
+    /* @__PURE__ */ g("div", { className: "dialog-search-bar-field", children: [
+      /* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(ne, {}) }),
       /* @__PURE__ */ n(
         "input",
         {
           type: "text",
           name: "dialog-search-query",
           className: "dialog-search-bar-input",
-          value: a,
+          value: o,
           "aria-label": t,
           placeholder: t,
           autoFocus: s,
-          onChange: (i) => {
-            c(i.target.value), e.setQuery(i.target.value);
+          onChange: (a) => {
+            c(a.target.value), e.setQuery(a.target.value);
           }
         }
       )
@@ -336,294 +336,555 @@ const H = ({
         type: "submit",
         className: "dialog-search-bar-submit",
         "aria-label": r,
-        children: /* @__PURE__ */ n(Q, {})
+        children: /* @__PURE__ */ n(re, {})
       }
     )
   ] });
-}, z = ({
+}, oe = (e, t) => {
+  try {
+    return new Intl.NumberFormat(t).format(e);
+  } catch {
+    return String(e);
+  }
+}, A = {
+  en: (e) => ({
+    searching: (t) => `Searching “${t}”…`,
+    noResults: "No matching products",
+    retry: "Retry",
+    collectionsLabel: "Collections",
+    productsLabel: "Products",
+    collectionsCount: (t) => t === 1 ? "1 collection" : `${e(t)} collections`,
+    resultsCount: (t) => t === 1 ? "1 result" : `${e(t)} results`,
+    seeAllLabel: (t) => t === 1 ? "See the result" : `See all ${e(t)} results`,
+    previous: "Previous",
+    next: "Next",
+    pageOf: (t, s) => `Page ${e(t)} / ${e(s)}`
+  }),
+  fr: (e) => ({
+    searching: (t) => `Recherche de « ${t} »…`,
+    noResults: "Aucun produit correspondant",
+    retry: "Réessayer",
+    collectionsLabel: "Collections",
+    productsLabel: "Produits",
+    collectionsCount: (t) => t === 1 ? "1 collection" : `${e(t)} collections`,
+    resultsCount: (t) => t === 1 ? "1 résultat" : `${e(t)} résultats`,
+    seeAllLabel: (t) => t === 1 ? "Voir le résultat" : `Voir les ${e(t)} résultats`,
+    previous: "Précédent",
+    next: "Suivant",
+    pageOf: (t, s) => `Page ${e(t)} / ${e(s)}`
+  }),
+  de: (e) => ({
+    searching: (t) => `Suche nach „${t}“…`,
+    noResults: "Keine passenden Produkte",
+    retry: "Erneut versuchen",
+    collectionsLabel: "Kollektionen",
+    productsLabel: "Produkte",
+    collectionsCount: (t) => t === 1 ? "1 Kollektion" : `${e(t)} Kollektionen`,
+    resultsCount: (t) => t === 1 ? "1 Ergebnis" : `${e(t)} Ergebnisse`,
+    seeAllLabel: (t) => t === 1 ? "Das Ergebnis anzeigen" : `Alle ${e(t)} Ergebnisse anzeigen`,
+    previous: "Zurück",
+    next: "Weiter",
+    pageOf: (t, s) => `Seite ${e(t)} / ${e(s)}`
+  }),
+  es: (e) => ({
+    searching: (t) => `Buscando «${t}»…`,
+    noResults: "No hay productos que coincidan",
+    retry: "Reintentar",
+    collectionsLabel: "Colecciones",
+    productsLabel: "Productos",
+    collectionsCount: (t) => t === 1 ? "1 colección" : `${e(t)} colecciones`,
+    resultsCount: (t) => t === 1 ? "1 resultado" : `${e(t)} resultados`,
+    seeAllLabel: (t) => t === 1 ? "Ver el resultado" : `Ver los ${e(t)} resultados`,
+    previous: "Anterior",
+    next: "Siguiente",
+    pageOf: (t, s) => `Página ${e(t)} / ${e(s)}`
+  }),
+  it: (e) => ({
+    searching: (t) => `Ricerca di “${t}”…`,
+    noResults: "Nessun prodotto corrispondente",
+    retry: "Riprova",
+    collectionsLabel: "Collezioni",
+    productsLabel: "Prodotti",
+    collectionsCount: (t) => t === 1 ? "1 collezione" : `${e(t)} collezioni`,
+    resultsCount: (t) => t === 1 ? "1 risultato" : `${e(t)} risultati`,
+    seeAllLabel: (t) => t === 1 ? "Vedi il risultato" : `Vedi tutti i ${e(t)} risultati`,
+    previous: "Precedente",
+    next: "Successivo",
+    pageOf: (t, s) => `Pagina ${e(t)} / ${e(s)}`
+  })
+}, I = (e) => {
+  var r;
+  const t = ((r = e == null ? void 0 : e.split("-")[0]) == null ? void 0 : r.toLowerCase()) ?? "en";
+  return (A[t] ?? A.en)((o) => oe(o, e));
+}, M = (e) => e.status !== L.LOADING && e.response !== void 0 && e.response.nbPages > 1, ae = ({
   controller: e,
-  state: t
+  state: t,
+  locale: s
 }) => {
-  const s = t.response;
-  return s === void 0 || s.nbPages <= 1 ? null : /* @__PURE__ */ h("nav", { "aria-label": "Search results pages", className: "dialog-search-pagination", children: [
+  const r = t.response;
+  if (r === void 0 || !M(t))
+    return null;
+  const o = I(s);
+  return /* @__PURE__ */ g("nav", { "aria-label": "Search results pages", className: "dialog-search-pagination", children: [
     /* @__PURE__ */ n(
       "button",
       {
         type: "button",
-        disabled: s.page === 0,
-        onClick: () => e.setPage(s.page - 1),
-        children: "Previous"
+        disabled: r.page === 0,
+        onClick: () => e.setPage(r.page - 1),
+        children: o.previous
       }
     ),
-    /* @__PURE__ */ h("span", { children: [
-      "Page ",
-      s.page + 1,
-      " / ",
-      s.nbPages
-    ] }),
+    /* @__PURE__ */ n("span", { children: o.pageOf(r.page + 1, r.nbPages) }),
     /* @__PURE__ */ n(
       "button",
       {
         type: "button",
-        disabled: s.page >= s.nbPages - 1,
-        onClick: () => e.setPage(s.page + 1),
-        children: "Next"
+        disabled: r.page >= r.nbPages - 1,
+        onClick: () => e.setPage(r.page + 1),
+        children: o.next
       }
     )
   ] });
-}, L = ({ amount: e, currencyCode: t }, s) => t === void 0 ? new Intl.NumberFormat(s).format(Number(e)) : new Intl.NumberFormat(s, {
+}, $ = (e) => e.normalize("NFD").replace(new RegExp("\\p{M}", "gu"), "").replace(/ẞ/gu, "ß").toUpperCase().toLowerCase().replace(/ς/g, "σ"), ie = (e, t) => {
+  const s = { before: "", match: e, after: "" }, r = $(t.trim());
+  if (r === "")
+    return s;
+  const o = [...e], c = [];
+  let l = "";
+  o.forEach((p, d) => {
+    const f = $(p);
+    for (let h = 0; h < f.length; h += 1)
+      c.push(d);
+    l += f;
+  });
+  const a = l.indexOf(r);
+  if (a === -1)
+    return s;
+  const i = c[a], u = c[a + r.length - 1] + 1;
+  return {
+    before: o.slice(0, i).join(""),
+    match: o.slice(i, u).join(""),
+    after: o.slice(u).join("")
+  };
+}, T = ({
+  title: e,
+  query: t
+}) => {
+  const { before: s, match: r, after: o } = ie(e, t);
+  return /* @__PURE__ */ g(C, { children: [
+    s !== "" && /* @__PURE__ */ n("span", { className: "dialog-search-muted", children: s }),
+    /* @__PURE__ */ n("span", { className: "dialog-search-match", children: r }),
+    o !== "" && /* @__PURE__ */ n("span", { className: "dialog-search-muted", children: o })
+  ] });
+}, ce = ({ amount: e, currencyCode: t }, s) => t === void 0 ? new Intl.NumberFormat(s).format(Number(e)) : new Intl.NumberFormat(s, {
   style: "currency",
   currency: t
-}).format(Number(e)), Z = ({ min: e, max: t }, s) => e.amount === t.amount ? L(e, s) : `${L(e, s)} – ${L(t, s)}`, X = (e, t) => {
+}).format(Number(e)), le = (e, t) => {
   if (e === void 0)
     return "";
   try {
-    return Z(e, t);
+    return ce(e.min, t);
   } catch {
     return "";
   }
-}, G = (e) => {
+}, de = (e) => {
   try {
     const { protocol: t } = new URL(e, window.location.href);
     return t === "http:" || t === "https:" ? e : void 0;
   } catch {
     return;
   }
-}, Y = ({
+}, O = (e) => e.url === void 0 || e.url === "" ? void 0 : de(e.url), _ = (e) => e.title ?? e.handle ?? e.objectID, ue = ({
   controller: e,
   hit: t,
   index: s,
-  locale: r
+  locale: r,
+  query: o = ""
 }) => {
-  const a = v(null);
-  f(() => {
-    a.current !== null && e.observeResult(a.current, s);
+  const c = b(null);
+  m(() => {
+    c.current !== null && e.observeResult(c.current, s);
   }, [e, t, s]);
-  const c = (d) => {
-    const m = d.metaKey || d.ctrlKey || d.shiftKey || d.altKey;
-    e.selectResult(s, { navigate: !m }) && d.preventDefault();
-  }, l = (d) => {
+  const l = (d) => {
+    const f = d.metaKey || d.ctrlKey || d.shiftKey || d.altKey;
+    e.selectResult(s, { navigate: !f }) && d.preventDefault();
+  }, a = (d) => {
     d.button === 1 && e.selectResult(s, { navigate: !1 });
-  }, i = t.title ?? t.objectID, o = X(t.priceRange, r), u = t.url === void 0 ? void 0 : G(t.url), p = /* @__PURE__ */ h(y, { children: [
-    /* @__PURE__ */ n("div", { className: "dialog-search-card-image", children: t.imageUrl !== void 0 && /* @__PURE__ */ n("img", { src: t.imageUrl, alt: i, loading: "lazy" }) }),
-    /* @__PURE__ */ h("div", { className: "dialog-search-card-info", children: [
-      /* @__PURE__ */ n("p", { className: "dialog-search-card-title", children: i }),
-      o !== "" && /* @__PURE__ */ n("p", { className: "dialog-search-card-price", children: o })
-    ] })
+  }, i = le(t.priceRange, r), u = O(t), p = /* @__PURE__ */ g(C, { children: [
+    /* @__PURE__ */ n("span", { className: "dialog-search-product-thumb", "aria-hidden": !0, children: t.imageUrl !== void 0 && t.imageUrl !== "" && /* @__PURE__ */ n("img", { src: t.imageUrl, alt: "", loading: "lazy" }) }),
+    /* @__PURE__ */ n("span", { className: "dialog-search-product-title", children: /* @__PURE__ */ n(T, { title: _(t), query: o }) }),
+    i !== "" && /* @__PURE__ */ n("span", { className: "dialog-search-product-price", children: i })
   ] });
-  return /* @__PURE__ */ n("li", { ref: a, className: "dialog-search-card", children: u === void 0 ? /* @__PURE__ */ n("div", { className: "dialog-search-card-body", children: p }) : /* @__PURE__ */ n(
+  return /* @__PURE__ */ n("li", { ref: c, className: "dialog-search-card", children: u === void 0 ? /* @__PURE__ */ n("div", { className: "dialog-search-product", children: p }) : /* @__PURE__ */ n(
     "a",
     {
-      className: "dialog-search-card-body",
+      className: "dialog-search-product",
       href: u,
-      onClick: c,
-      onAuxClick: l,
+      onClick: l,
+      onAuxClick: a,
       children: p
     }
   ) });
-}, J = (e) => {
-  const t = v(null), [s, r] = C(void 0), [a, c] = C(0);
-  return D(() => {
+}, he = () => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ n("path", { d: "M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" })
+  }
+), ge = () => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ n("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" })
+  }
+), H = (e) => (e ?? []).flatMap((t) => {
+  const s = O(t);
+  return s === void 0 ? [] : [{ collection: t, href: s }];
+}), pe = ({
+  collections: e,
+  query: t,
+  messages: s
+}) => {
+  const r = H(e);
+  return r.length === 0 ? null : /* @__PURE__ */ g("aside", { className: "dialog-search-collections", children: [
+    /* @__PURE__ */ g("div", { className: "dialog-search-section-head", children: [
+      /* @__PURE__ */ n("p", { className: "dialog-search-label", children: s.collectionsLabel }),
+      /* @__PURE__ */ n("span", { className: "dialog-search-count", children: s.collectionsCount(r.length) })
+    ] }),
+    /* @__PURE__ */ n("ul", { className: "dialog-search-collection-list", children: r.map(({ collection: o, href: c }) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ g("a", { className: "dialog-search-collection", href: c, children: [
+      /* @__PURE__ */ n("span", { className: "dialog-search-collection-thumb", "aria-hidden": !0, children: o.imageUrl !== void 0 && o.imageUrl !== "" && /* @__PURE__ */ n("img", { src: o.imageUrl, alt: "", loading: "lazy" }) }),
+      /* @__PURE__ */ n("span", { className: "dialog-search-collection-title", children: /* @__PURE__ */ n(T, { title: _(o), query: t }) }),
+      /* @__PURE__ */ n("span", { className: "dialog-search-caret", children: /* @__PURE__ */ n(ge, {}) })
+    ] }) }, o.objectID)) })
+  ] });
+}, fe = ({
+  controller: e,
+  response: t,
+  locale: s,
+  messages: r
+}) => /* @__PURE__ */ g("section", { className: "dialog-search-products", children: [
+  /* @__PURE__ */ n("div", { className: "dialog-search-section-head", children: /* @__PURE__ */ g("p", { className: "dialog-search-label", children: [
+    r.productsLabel,
+    t.nbHits > 0 && /* @__PURE__ */ n("span", { className: "dialog-search-label-count", children: ` · ${r.resultsCount(t.nbHits)}` })
+  ] }) }),
+  /* @__PURE__ */ n("ul", { className: "dialog-search-results", children: t.hits.length === 0 ? /* @__PURE__ */ n("li", { className: "dialog-search-empty", role: "status", children: r.noResults }) : t.hits.map((o, c) => /* @__PURE__ */ n(
+    ue,
+    {
+      controller: e,
+      hit: o,
+      index: c,
+      locale: s,
+      query: t.query
+    },
+    o.objectID
+  )) })
+] }), S = 8, w = 16, me = 200, be = 1440, ve = (e, t) => e.bottom > 0 && e.top < t, Ce = (e, t) => {
+  const s = Math.min(
+    be,
+    t - 2 * w
+  ), r = e.left + e.width / 2 - s / 2;
+  return { left: Math.min(
+    Math.max(r, w),
+    t - w - s
+  ), width: s };
+}, ye = (e, t, s) => {
+  const r = s - e.bottom - S - w, o = e.top - S - w, c = Ce(e, t);
+  return r < me && o > r ? {
+    ...c,
+    bottom: s - e.top + S,
+    maxHeight: Math.max(o, 0)
+  } : {
+    ...c,
+    top: e.bottom + S,
+    maxHeight: Math.max(r, 0)
+  };
+}, we = (e) => {
+  const t = e.trim().replace(/^#/, "");
+  if (!/^(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t))
+    return;
+  const s = t.length <= 4 ? [...t].map((r) => r + r).join("") : t;
+  return [0, 2, 4].map(
+    (r) => Number.parseInt(s.slice(r, r + 2), 16)
+  );
+}, Le = (e) => {
+  const t = /^rgba?\((\d+), (\d+), (\d+)(?:, [\d.]+)?\)$/.exec(e);
+  if (t !== null)
+    return [t[1], t[2], t[3]].map(Number);
+}, Se = (e) => {
+  if (typeof document > "u")
+    return;
+  const t = document.createElement("span");
+  if (t.style.color = e, t.style.color === "")
+    return;
+  document.body.appendChild(t);
+  const s = Le(getComputedStyle(t).color);
+  return t.remove(), s;
+}, Ne = (e) => we(e) ?? Se(e), ke = (e) => {
+  const t = e / 255;
+  return t <= 0.03928 ? t / 12.92 : ((t + 0.055) / 1.055) ** 2.4;
+}, B = (e) => {
+  const t = Ne(e);
+  if (t === void 0)
+    return;
+  const [s, r, o] = t.map(ke);
+  return 0.2126 * s + 0.7152 * r + 0.0722 * o;
+}, xe = "#181825", Pe = "#ffffff", Re = "straight", P = 0.5, R = {
+  light: {
+    panel: "#ffffff",
+    side: "#fafbfc",
+    text: "#111827",
+    "text-sec": "#6b7280",
+    border: "#eceef2",
+    hover: "#eef2f7",
+    thumb: "#eef1f5"
+  },
+  dark: {
+    panel: "#15171c",
+    side: "#1b1e25",
+    text: "#f3f4f6",
+    "text-sec": "#9ca3af",
+    border: "#2b2f38",
+    hover: "#242830",
+    thumb: "#2b2f38"
+  }
+}, Ee = {
+  rectangle: {
+    "r-panel": "4px",
+    "r-item": "4px",
+    "r-thumb": "2px",
+    "r-btn": "4px"
+  },
+  "rectangle-rounded": {
+    "r-panel": "16px",
+    "r-item": "10px",
+    "r-thumb": "8px",
+    "r-btn": "10px"
+  }
+}, N = (e) => e === void 0 || e.trim() === "" ? void 0 : e.trim(), Ae = (e) => {
+  const t = e === void 0 ? void 0 : B(e);
+  return t === void 0 ? "light" : t < P ? "dark" : "light";
+}, $e = (e, t) => {
+  const s = B(e);
+  return s === void 0 ? R[t].text : (t === "light" ? s < P : s >= P) ? e : R[t].text;
+}, De = (e) => {
+  const t = Ae(N(e == null ? void 0 : e.backgroundColor)), s = (e == null ? void 0 : e.ctaBorderType) === Re ? "rectangle" : "rectangle-rounded", r = N(e == null ? void 0 : e.primaryColor) ?? xe, o = N(e == null ? void 0 : e.fontFamily), c = {
+    ...R[t],
+    ...Ee[s],
+    primary: r,
+    accent: $e(r, t),
+    "cta-text": N(e == null ? void 0 : e.ctaTextColor) ?? Pe,
+    ...o === void 0 ? {} : { font: o }
+  };
+  return Object.fromEntries(
+    Object.entries(c).map(([l, a]) => [`--dso-${l}`, a])
+  );
+}, Ie = (e) => {
+  const t = b(null), [s, r] = v(void 0), [o, c] = v({ width: 0, height: 0 });
+  return j(() => {
     if (!e)
       return;
     const l = () => {
-      const i = t.current;
-      if (i === null)
+      const a = t.current;
+      if (a === null)
         return;
-      const o = i.previousElementSibling ?? i, { top: u, bottom: p, left: d, width: m } = o.getBoundingClientRect();
-      c(window.innerHeight), r(
-        (g) => g !== void 0 && g.top === u && g.bottom === p && g.left === d && g.width === m ? g : { top: u, bottom: p, left: d, width: m }
+      const i = a.previousElementSibling ?? a, { top: u, bottom: p, left: d, width: f } = i.getBoundingClientRect();
+      c(
+        (h) => h.width === window.innerWidth && h.height === window.innerHeight ? h : { width: window.innerWidth, height: window.innerHeight }
+      ), r(
+        (h) => h !== void 0 && h.top === u && h.bottom === p && h.left === d && h.width === f ? h : { top: u, bottom: p, left: d, width: f }
       );
     };
     return l(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), () => {
       window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
     };
-  }, [e]), { anchorRef: t, rect: s, viewportHeight: a };
-}, ee = (e, t) => {
-  const [s, r] = C(!1), a = v(null), c = e.status !== b.IDLE && !s;
-  return f(() => {
+  }, [e]), { anchorRef: t, rect: s, viewport: o };
+}, Me = (e, t) => {
+  const [s, r] = v(!1), o = b(null), c = e.status !== L.IDLE && !s;
+  return m(() => {
     r(!1);
-  }, [e.query]), f(() => {
+  }, [e.query]), m(() => {
     if (!c)
       return;
-    const l = (i) => {
-      var m, g;
-      const o = i.target;
-      if (!(o instanceof Node))
+    const l = (a) => {
+      var f, h;
+      const i = a.target;
+      if (!(i instanceof Node))
         return;
-      const u = (m = t.current) == null ? void 0 : m.previousElementSibling, p = ((g = a.current) == null ? void 0 : g.contains(o)) ?? !1, d = (u == null ? void 0 : u.contains(o)) ?? !1;
+      const u = (f = t.current) == null ? void 0 : f.previousElementSibling, p = ((h = o.current) == null ? void 0 : h.contains(i)) ?? !1, d = (u == null ? void 0 : u.contains(i)) ?? !1;
       !p && !d && r(!0);
     };
     return document.addEventListener("pointerdown", l), () => document.removeEventListener("pointerdown", l);
-  }, [c, t]), f(() => {
-    var o;
-    const l = (o = t.current) == null ? void 0 : o.previousElementSibling;
+  }, [c, t]), m(() => {
+    var i;
+    const l = (i = t.current) == null ? void 0 : i.previousElementSibling;
     if (l == null)
       return;
-    const i = () => r(!1);
-    return l.addEventListener("focusin", i), () => l.removeEventListener("focusin", i);
-  }, [t]), { isOpen: c, panelRef: a };
-}, S = 8, E = 16, te = 200, se = (e) => e instanceof M ? `Search failed (${e.status}${e.code ? ` ${e.code}` : ""}): ${e.message}` : "Search failed: network error. Check your connection and try again.", re = (e, t) => e.bottom > 0 && e.top < t, ne = (e, t) => {
-  const s = t - e.bottom - S - E, r = e.top - S - E, a = { left: e.left, width: e.width };
-  return s < te && r > s ? {
-    ...a,
-    bottom: t - e.top + S,
-    maxHeight: Math.max(r, 0)
-  } : {
-    ...a,
-    top: e.bottom + S,
-    maxHeight: Math.max(s, 0)
-  };
-}, oe = (e, t, s) => {
-  const r = t.response;
-  switch (t.status) {
-    case b.LOADING:
-      return /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
-        "Searching “",
-        t.query,
-        "”…"
-      ] });
-    case b.ERROR:
-      return /* @__PURE__ */ h("div", { className: "dialog-search-error", children: [
-        /* @__PURE__ */ n(
-          "p",
-          {
-            role: "alert",
-            className: "dialog-search-status dialog-search-status-error",
-            children: se(t.error)
-          }
-        ),
-        /* @__PURE__ */ n(
-          "button",
-          {
-            type: "button",
-            className: "dialog-search-retry",
-            onClick: () => e.retry(),
-            children: "Retry"
-          }
-        )
-      ] });
-    case b.EMPTY:
-      return /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
-        "No products match “",
-        r == null ? void 0 : r.query,
-        "”."
-      ] });
-    case b.SUCCESS:
-      return r === void 0 ? null : /* @__PURE__ */ h(y, { children: [
-        /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
-          r.nbHits,
-          " result",
-          r.nbHits > 1 ? "s" : ""
-        ] }),
-        /* @__PURE__ */ n("ul", { className: "dialog-search-results", children: r.hits.map((a, c) => /* @__PURE__ */ n(
-          Y,
-          {
-            controller: e,
-            hit: a,
-            index: c,
-            locale: s
-          },
-          a.objectID
-        )) }),
-        /* @__PURE__ */ n(z, { controller: e, state: t })
-      ] });
-    default:
-      return null;
-  }
-}, me = ({
-  controller: e,
-  state: t,
-  locale: s
-}) => {
-  const r = t.status !== b.IDLE, { anchorRef: a, rect: c, viewportHeight: l } = J(r), { isOpen: i, panelRef: o } = ee(t, a);
-  return /* @__PURE__ */ h(y, { children: [
-    /* @__PURE__ */ n("div", { ref: a }),
-    i && c !== void 0 && re(c, l) && _(
+    const a = () => r(!1);
+    return l.addEventListener("focusin", a), () => l.removeEventListener("focusin", a);
+  }, [t]), { isOpen: c, panelRef: o };
+}, Te = (e) => e instanceof q ? `Search failed (${e.status}${e.code ? ` ${e.code}` : ""}): ${e.message}` : "Search failed: network error. Check your connection and try again.", Oe = (e, t) => {
+  var f, h;
+  const { controller: s, state: r, locale: o, seeAllHref: c } = e, { status: l, response: a } = r;
+  if (l === L.ERROR)
+    return /* @__PURE__ */ g("div", { className: "dialog-search-error", children: [
+      /* @__PURE__ */ n(
+        "p",
+        {
+          role: "alert",
+          className: "dialog-search-status dialog-search-status-error",
+          children: Te(r.error)
+        }
+      ),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "dialog-search-retry",
+          onClick: () => s.retry(),
+          children: t.retry
+        }
+      )
+    ] });
+  if (a === void 0)
+    return /* @__PURE__ */ n("p", { role: "status", className: "dialog-search-status", children: t.searching(r.query) });
+  const i = ((h = (f = r.sections) == null ? void 0 : f.collections) == null ? void 0 : h.hits) ?? [], u = H(i).length > 0, p = c !== void 0 && a.nbHits > 0, d = !p && M(r);
+  return /* @__PURE__ */ g(C, { children: [
+    /* @__PURE__ */ g(
+      "div",
+      {
+        className: `dialog-search-body${u ? "" : " dialog-search-body--no-collections"}`,
+        children: [
+          /* @__PURE__ */ n(
+            pe,
+            {
+              collections: i,
+              query: a.query,
+              messages: t
+            }
+          ),
+          /* @__PURE__ */ n(
+            fe,
+            {
+              controller: s,
+              response: a,
+              locale: o,
+              messages: t
+            }
+          )
+        ]
+      }
+    ),
+    (p || d) && /* @__PURE__ */ n("div", { className: "dialog-search-footer", children: p ? /* @__PURE__ */ g("a", { className: "dialog-search-cta", href: c(a.query), children: [
+      t.seeAllLabel(a.nbHits),
+      /* @__PURE__ */ n(he, {})
+    ] }) : /* @__PURE__ */ n(
+      ae,
+      {
+        controller: s,
+        state: r,
+        locale: o
+      }
+    ) })
+  ] });
+}, ze = (e) => {
+  const { state: t, locale: s, theme: r, layout: o = "list" } = e, c = t.status !== L.IDLE, { anchorRef: l, rect: a, viewport: i } = Ie(c), { isOpen: u, panelRef: p } = Me(t, l), d = I(s), f = y(
+    () => De(r),
+    [r]
+  );
+  return /* @__PURE__ */ g(C, { children: [
+    /* @__PURE__ */ n("div", { ref: l }),
+    u && a !== void 0 && ve(a, i.height) && U(
       /* @__PURE__ */ n(
         "div",
         {
-          ref: o,
-          className: "dialog-search-panel",
-          style: ne(c, l),
-          children: oe(e, t, s)
+          ref: p,
+          className: `dialog-search-panel dialog-search-panel--${o}`,
+          style: {
+            ...ye(a, i.width, i.height),
+            ...f
+          },
+          children: Oe(e, d)
         }
       ),
       document.body
     )
   ] });
-}, ie = {
-  status: b.IDLE,
+}, _e = {
+  status: L.IDLE,
   query: "",
   page: 0
-}, pe = (e) => {
-  const t = v(e);
+}, Ue = (e) => {
+  const t = b(e);
   t.current = e;
-  const s = v(void 0), r = N(() => {
+  const s = b(void 0), r = x(() => {
     if (s.current === void 0) {
-      const {
-        client: o,
-        surface: u = "search_page",
-        locale: p = o.locale,
-        ...d
-      } = t.current;
-      s.current = B({
-        search: (m, g) => o.search(m, g),
-        locale: p,
+      const { client: i, surface: u = "search_page", ...p } = t.current;
+      s.current = z({
+        search: (d, f) => i.search(d, f),
         analytics: {
           surface: u,
-          trackViewSearchResults: (m) => o.trackViewSearchResults(m),
-          trackSelectSearchResult: (m) => o.trackSelectSearchResult(m)
+          trackViewSearchResults: (d) => i.trackViewSearchResults(d),
+          trackSelectSearchResult: (d) => i.trackSelectSearchResult(d)
         },
-        ...d
+        ...p
       });
     }
     return s.current;
-  }, []), a = v(void 0);
-  a.current ?? (a.current = {
-    setQuery: (o) => r().setQuery(o),
-    submit: (o) => r().submit(o),
-    setPage: (o) => r().setPage(o),
+  }, []), o = b(void 0);
+  o.current ?? (o.current = {
+    setQuery: (i) => r().setQuery(i),
+    submit: (i) => r().submit(i),
+    setPage: (i) => r().setPage(i),
     retry: () => r().retry(),
-    observeResult: (o, u) => r().observeResult(o, u),
-    selectResult: (o, u) => r().selectResult(o, u),
-    subscribe: (o) => r().subscribe(o),
+    observeResult: (i, u) => r().observeResult(i, u),
+    selectResult: (i, u) => r().selectResult(i, u),
+    subscribe: (i) => r().subscribe(i),
     getState: () => r().getState(),
-    // Clear the ref so the next access creates a fresh controller instead of
-    // dispatching into the disposed one; never create a controller here.
+    // Create a replacement on next access after disposal.
     dispose: () => {
-      var o;
-      (o = s.current) == null || o.dispose(), s.current = void 0;
+      var i;
+      (i = s.current) == null || i.dispose(), s.current = void 0;
     }
-  }), f(() => {
-    R({
+  }), m(() => {
+    D({
       method: "react",
-      version: "2.4.0"
+      version: "2.6.0"
     });
-    const o = r();
+    const i = r();
     return () => {
-      o.dispose(), s.current === o && (s.current = void 0);
+      i.dispose(), s.current === i && (s.current = void 0);
     };
   }, [r]);
-  const c = N(
-    (o) => r().subscribe(o),
+  const c = x(
+    (i) => r().subscribe(i),
     [r]
-  ), l = N(
+  ), l = x(
     () => r().getState(),
     [r]
-  ), i = x(
+  ), a = V(
     c,
     l,
-    () => ie
+    () => _e
   );
-  return { controller: a.current, state: i };
+  return { controller: o.current, state: a, theme: e.client.theme };
 };
 export {
-  V as DialogInput,
-  he as DialogProductBlock,
-  ge as DialogSearchBar,
-  z as DialogSearchPagination,
-  Y as DialogSearchProductCard,
-  me as DialogSearchResults,
-  pe as useDialogSearch
+  J as DialogInput,
+  Fe as DialogProductBlock,
+  qe as DialogSearchBar,
+  ae as DialogSearchPagination,
+  ue as DialogSearchProductCard,
+  ze as DialogSearchResults,
+  Ue as useDialogSearch
 };