@askdialog/dialog-react 2.3.0 → 2.4.0

package/README.md

@@ -2,6 +2,23 @@
 
 React component library for Dialog AI-powered product assistance.
 
+## Table of contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Available Components](#available-components)
+  - [DialogProductBlock](#dialogproductblock)
+  - [DialogInput](#dialoginput)
+  - [Storefront search](#storefront-search)
+    - [useDialogSearch](#usedialogsearch)
+    - [DialogSearchBar](#dialogsearchbar)
+    - [DialogSearchResults](#dialogsearchresults)
+    - [DialogSearchPagination](#dialogsearchpagination)
+- [Theming](#theming)
+- [Development](#development)
+- [TypeScript](#typescript)
+- [React Version](#react-version)
+
 ## Installation
 
 ```bash
@@ -123,6 +140,7 @@ Creates one search controller per hook instance and disposes it on unmount.
 - `navigate` ((url, hit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `<a href>` links navigate natively.
 - `debounceMs` (number, optional) - Keystroke debounce (default: 250)
 - `hitsPerPage` (number, optional) - Results per page (default: 12)
+- `locale` (string, optional) - Storefront locale naming the searched index (`products_fr`); defaults to the client's
 
 **Returns:** `{ controller, state }` — pass both to the components below. `state.status` is `idle` / `loading` / `success` / `empty` / `error`.
 
@@ -134,6 +152,7 @@ Search input: typing runs a debounced search, submitting (Enter) searches immedi
 - `controller` (SearchController) - From `useDialogSearch` (required)
 - `placeholder` (string, optional) - Input placeholder text
 - `autoFocus` (boolean, optional) - Focus the input on mount
+- `submitAriaLabel` (string, optional) - Accessible label of the submit button (default: `'Search'`)
 
 #### DialogSearchResults
 
@@ -142,6 +161,7 @@ Floating results panel overlaying the page content: portaled to `document.body`
 **Props:**
 - `controller` (SearchController) - From `useDialogSearch` (required)
 - `state` (SearchControllerState) - From `useDialogSearch` (required)
+- `locale` (string, optional) - BCP 47 locale used to format the card prices via `Intl.NumberFormat` (browser default when omitted)
 
 #### DialogSearchPagination
 
@@ -324,6 +344,3 @@ This package includes TypeScript type definitions. The types are automatically a
 
 This package requires React 19 or higher as a peer dependency.
 
-## License
-
-[Your License Here]

package/dist/components/DialogSearch/searchDisplay.d.ts

@@ -1,4 +1,3 @@
-import { SearchPriceRange, SearchProduct } from '@askdialog/dialog-sdk';
+import { SearchPriceRange } from '@askdialog/dialog-sdk';
 export declare const formatSearchPrice: (priceRange: SearchPriceRange | undefined, locale?: string) => string;
-export declare const formatSearchCompareAtPrice: (product: SearchProduct, locale?: string) => string;
 export declare const safeProductHref: (url: string) => string | undefined;

package/dist/components/DialogSearch/useDialogSearch.d.ts

@@ -7,8 +7,8 @@ export interface UseDialogSearchOptions {
     navigate?: (url: string, hit: SearchHit) => void;
     debounceMs?: number;
     hitsPerPage?: number;
+    /** Storefront locale for the searched index (`products_fr`); defaults to the client's. */
     locale?: string;
-    countryCode?: string;
 }
 export interface DialogSearch {
     controller: SearchController;

package/dist/dialog-react.css

@@ -1 +1 @@
-.dialog-block-header-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:start;flex:1}.dialog-block-suggestions-item-icon path{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item,.dialog-block-suggestions-skeleton-item:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-inline-end:35px}.dialog-input-submit{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);inset-inline-end:4px;border:unset}.dialog-input-submit:disabled{opacity:.5}.dialog-block-container{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container>*{box-sizing:border-box}.dialog-search-bar{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:10px 10px 10px 14px;background:#fffc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-bar:focus-within{border-color:#00000026;box-shadow:0 6px 20px -6px #0000001a,0 0 0 2px #1717171f}.dialog-search-bar-field{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:6px;padding:2px 0}.dialog-search-bar-icon{display:inline-flex;flex-shrink:0;color:#737373}.dialog-search-bar-input{flex:1 0 0;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#171717;text-overflow:ellipsis;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.dialog-search-bar-input::placeholder{color:#a3a3a3;opacity:1}.dialog-search-bar-input:focus,.dialog-search-bar-input:focus-visible{outline:none;box-shadow:none;border:none}.dialog-search-bar-submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:6px;border:none;border-radius:9999px;background:#171717;color:#fff;box-shadow:0 1px 1px #1717170d;cursor:pointer}.dialog-search-bar-submit:focus-visible{outline:2px solid #171717;outline-offset:2px}.dialog-search-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-pagination button{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font:inherit;color:inherit;cursor:pointer;transition:background-color .12s ease}.dialog-search-pagination button:hover:not(:disabled){background-color:#fafafa}.dialog-search-pagination button:disabled{opacity:.4;cursor:default}.dialog-search-card{width:100%}.dialog-search-card-body{display:flex;align-items:center;gap:8px;border-radius:12px;color:inherit;text-decoration:none}a.dialog-search-card-body:hover{background:#00000008}.dialog-search-card-image{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#f2f2f2}.dialog-search-card-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:#00000008;pointer-events:none}.dialog-search-card-image img{display:block;width:100%;height:100%;object-fit:cover}.dialog-search-card-info{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:4px}.dialog-search-card-title{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#171717;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-search-card-price{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-card-compare-at{color:#a3a3a3;text-decoration:line-through}.dialog-search-panel{position:fixed;z-index:9999;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 14px;background:#ffffffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-status{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#a3a3a3}.dialog-search-status-error{color:#b3261e}.dialog-search-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.dialog-search-retry{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#737373;cursor:pointer;transition:background-color .12s ease}.dialog-search-retry:hover{background-color:#fafafa}.dialog-search-results{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;max-height:480px;min-height:0;overflow-y:auto}
+.dialog-block-header-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:start;flex:1}.dialog-block-suggestions-item-icon path{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item,.dialog-block-suggestions-skeleton-item:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-inline-end:35px}.dialog-input-submit{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);inset-inline-end:4px;border:unset}.dialog-input-submit:disabled{opacity:.5}.dialog-block-container{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container>*{box-sizing:border-box}.dialog-search-bar{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:10px 10px 10px 14px;background:#fffc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-bar:focus-within{border-color:#00000026;box-shadow:0 6px 20px -6px #0000001a,0 0 0 2px #1717171f}.dialog-search-bar-field{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:6px;padding:2px 0}.dialog-search-bar-icon{display:inline-flex;flex-shrink:0;color:#737373}.dialog-search-bar-input{flex:1 0 0;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#171717;text-overflow:ellipsis;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.dialog-search-bar-input::placeholder{color:#a3a3a3;opacity:1}.dialog-search-bar-input:focus,.dialog-search-bar-input:focus-visible{outline:none;box-shadow:none;border:none}.dialog-search-bar-submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:6px;border:none;border-radius:9999px;background:#171717;color:#fff;box-shadow:0 1px 1px #1717170d;cursor:pointer}.dialog-search-bar-submit:focus-visible{outline:2px solid #171717;outline-offset:2px}.dialog-search-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-pagination button{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font:inherit;color:inherit;cursor:pointer;transition:background-color .12s ease}.dialog-search-pagination button:hover:not(:disabled){background-color:#fafafa}.dialog-search-pagination button:disabled{opacity:.4;cursor:default}.dialog-search-card{width:100%}.dialog-search-card-body{display:flex;align-items:center;gap:8px;border-radius:12px;color:inherit;text-decoration:none}a.dialog-search-card-body:hover{background:#00000008}.dialog-search-card-image{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#f2f2f2}.dialog-search-card-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:#00000008;pointer-events:none}.dialog-search-card-image img{display:block;width:100%;height:100%;object-fit:cover}.dialog-search-card-info{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:4px}.dialog-search-card-title{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#171717;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-search-card-price{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-panel{position:fixed;z-index:9999;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 14px;background:#ffffffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-status{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#a3a3a3}.dialog-search-status-error{color:#b3261e}.dialog-search-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.dialog-search-retry{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#737373;cursor:pointer;transition:background-color .12s ease}.dialog-search-retry:hover{background-color:#fafafa}.dialog-search-results{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;max-height:480px;min-height:0;overflow-y:auto}

package/dist/dialog-react.js

@@ -1,14 +1,14 @@
-import { jsxs as g, jsx as n, Fragment as y } from "react/jsx-runtime";
-import { useRef as v, useState as C, useEffect as f, useMemo as S, useLayoutEffect as D, useCallback as N, useSyncExternalStore as M } from "react";
-import { registerDialogInstallation as A, addAuditCapability as I, resolveTextDirection as B, SearchStatus as b, DialogSearchError as _, createSearchController as H } from "@askdialog/dialog-sdk";
-import { createPortal as K } from "react-dom";
-const O = ({
+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 = ({
   title: e = "Your expert",
   description: t = "A question about this product?"
-}) => /* @__PURE__ */ g("div", { className: "dialog-block-header-container", children: [
+}) => /* @__PURE__ */ h("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 })
-] }), $ = ({ color: e = "#181825" }) => /* @__PURE__ */ g(
+] }), K = ({ color: e = "#181825" }) => /* @__PURE__ */ h(
   "svg",
   {
     width: "20",
@@ -17,7 +17,7 @@ const O = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ g("g", { clipPath: "url(#clip0_466_934)", children: [
+      /* @__PURE__ */ h("g", { clipPath: "url(#clip0_466_934)", children: [
         /* @__PURE__ */ n(
           "path",
           {
@@ -42,7 +42,7 @@ const O = ({
       /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ n("rect", { width: "20", height: "20", fill: "white" }) }) })
     ]
   }
-), T = ({
+), j = ({
   client: e,
   questions: t,
   productId: s,
@@ -58,31 +58,31 @@ const O = ({
       fromQuestionSuggestion: !0
     });
   };
-  return /* @__PURE__ */ n(y, { children: t.map((l) => /* @__PURE__ */ g(
+  return /* @__PURE__ */ n(y, { children: t.map((l) => /* @__PURE__ */ h(
     "button",
     {
       className: "dialog-block-suggestions-item",
       onClick: () => c(l.question),
       children: [
-        /* @__PURE__ */ n($, { color: e.theme.primaryColor }),
+        /* @__PURE__ */ n(K, { color: e.theme.primaryColor }),
         /* @__PURE__ */ n("span", { className: "dialog-block-suggestions-item-label", children: l.question })
       ]
     },
     l.question
   )) });
-}, V = () => /* @__PURE__ */ g(y, { children: [
+}, O = () => /* @__PURE__ */ h(y, { 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" })
-] }), j = ({
+] }), $ = ({
   client: e,
   questions: t,
   isLoading: s,
   productId: r,
   productTitle: a,
   selectedVariantId: c
-}) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(V, {}) : /* @__PURE__ */ n(
-  T,
+}) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(O, {}) : /* @__PURE__ */ n(
+  j,
   {
     client: e,
     questions: t,
@@ -90,7 +90,7 @@ const O = ({
     productTitle: a,
     selectedVariantId: c
   }
-) }), q = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
+) }), T = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
   "svg",
   {
     width: "20",
@@ -109,17 +109,17 @@ const O = ({
       }
     )
   }
-), F = ({
+), V = ({
   client: e,
   placeholder: t = "Ask anything...",
   productId: s,
   productTitle: r,
   selectedVariantId: a
 }) => {
-  const c = v(null), [l, o] = C(""), i = () => {
+  const c = v(null), [l, i] = C(""), o = () => {
     var d;
     (d = c.current) == null || d.focus();
-  }, h = () => {
+  }, u = () => {
     const d = l;
     d.trim() && (e.sendProductMessage({
       productId: s,
@@ -127,20 +127,20 @@ const O = ({
       selectedVariantId: a,
       question: d,
       fromQuestionSuggestion: !0
-    }), o(""));
+    }), i(""));
   };
-  return /* @__PURE__ */ g("div", { className: "dialog-input-wrapper", onClick: i, children: [
+  return /* @__PURE__ */ h("div", { className: "dialog-input-wrapper", onClick: o, children: [
     /* @__PURE__ */ n(
       "input",
       {
         id: "dialog-ask-anything-input-ai-input",
         ref: c,
         value: l,
-        onChange: (d) => o(d.target.value),
+        onChange: (d) => i(d.target.value),
         className: "dialog-ask-anything-input-ai-input",
         placeholder: t,
         onKeyDown: (d) => {
-          d.key === "Enter" && h();
+          d.key === "Enter" && u();
         }
       }
     ),
@@ -150,27 +150,27 @@ const O = ({
         id: "send-message-button-ai-input",
         className: "dialog-input-submit",
         disabled: !l.trim(),
-        onClick: h,
-        children: /* @__PURE__ */ n(q, { color: e.theme.ctaTextColor })
+        onClick: u,
+        children: /* @__PURE__ */ n(T, { color: e.theme.ctaTextColor })
       }
     )
   ] });
-}, R = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), Q = (e) => {
+}, P = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), q = (e) => {
   if (!e) return;
   const t = document.body;
   Object.keys(e).forEach((s) => {
-    const r = s, a = R(s);
+    const r = s, a = P(s);
     if (e[r] !== void 0) {
       if (typeof e[r] == "object") {
         Object.keys(e[r]).forEach(
           (c) => {
-            var o;
+            var i;
             const l = c;
             if (l !== void 0) {
-              const i = R(c), h = e[r];
+              const o = P(c), u = e[r];
               t.style.setProperty(
-                `--dialog-theme-${a}-${i}`,
-                (o = h[l]) == null ? void 0 : o.toString()
+                `--dialog-theme-${a}-${o}`,
+                (i = u[l]) == null ? void 0 : i.toString()
               );
             }
           }
@@ -188,68 +188,68 @@ const O = ({
       );
     }
   });
-}, U = ({ theme: e, children: t }) => (f(() => {
-  e && Q(e);
-}, [e]), /* @__PURE__ */ n(y, { children: t })), ge = ({
+}, F = ({ theme: e, children: t }) => (f(() => {
+  e && q(e);
+}, [e]), /* @__PURE__ */ n(y, { children: t })), he = ({
   client: e,
   productId: t,
   productTitle: s,
   selectedVariantId: r,
   enableInput: a = !0
 }) => {
-  const [c, l] = C(!0), [o, i] = C(
+  const [c, l] = C(!0), [i, o] = C(
     void 0
   );
   f(() => {
-    A({
+    R({
       method: "react",
-      version: "2.3.0"
-    }), I("pdp-block");
+      version: "2.4.0"
+    }), A("pdp-block");
   }, []);
-  const h = S(
-    () => c ? "" : o == null ? void 0 : o.assistantName,
-    [o, c]
-  ), m = S(
-    () => c ? "" : o == null ? void 0 : o.description,
-    [o, c]
-  ), d = S(
-    () => c ? "" : o == null ? void 0 : o.inputPlaceholder,
-    [o, c]
-  ), p = S(
+  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(
     () => {
-      var u;
-      return B((u = e.getLocalizationInformations()) == null ? void 0 : u.languageCode);
+      var g;
+      return I((g = e.getLocalizationInformations()) == null ? void 0 : g.languageCode);
     },
     [e]
   );
   return f(() => {
-    let u = !0;
+    let g = !0;
     return (async () => {
-      l(!0), i(void 0);
+      l(!0), o(void 0);
       try {
-        const w = await e.getSuggestions(t);
-        u && i(w);
-      } catch (w) {
-        console.error("error", w);
+        const k = await e.getSuggestions(t);
+        g && o(k);
+      } catch (k) {
+        console.error("error", k);
       } finally {
-        u && l(!1);
+        g && l(!1);
       }
     })(), () => {
-      u = !1;
+      g = !1;
     };
-  }, [e, t]), /* @__PURE__ */ n(U, { theme: e.theme, children: /* @__PURE__ */ g(
+  }, [e, t]), /* @__PURE__ */ n(F, { theme: e.theme, children: /* @__PURE__ */ h(
     "div",
     {
       id: "dialog-instant",
       className: "dialog-block-container",
-      dir: p,
+      dir: m,
       children: [
-        /* @__PURE__ */ n(O, { title: h, description: m }),
+        /* @__PURE__ */ n(H, { title: u, description: p }),
         /* @__PURE__ */ n(
-          j,
+          $,
           {
             client: e,
-            questions: o == null ? void 0 : o.questions,
+            questions: i == null ? void 0 : i.questions,
             isLoading: c,
             productId: t,
             productTitle: s,
@@ -257,7 +257,7 @@ const O = ({
           }
         ),
         a && /* @__PURE__ */ n(
-          F,
+          V,
           {
             client: e,
             placeholder: d,
@@ -269,7 +269,7 @@ const O = ({
       ]
     }
   ) });
-}, W = () => /* @__PURE__ */ n(
+}, Q = () => /* @__PURE__ */ n(
   "svg",
   {
     width: 16,
@@ -289,7 +289,7 @@ const O = ({
       }
     )
   }
-), z = "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", Z = ({
+), 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 = ({
   color: e = "currentColor"
 }) => /* @__PURE__ */ n(
   "svg",
@@ -300,20 +300,20 @@ const O = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ n("path", { d: z, fill: e })
+    children: /* @__PURE__ */ n("path", { d: U, fill: e })
   }
-), me = ({
+), ge = ({
   controller: e,
   placeholder: t = "Search products...",
   autoFocus: s = !1,
   submitAriaLabel: r = "Search"
 }) => {
   const [a, c] = C("");
-  return /* @__PURE__ */ g("form", { className: "dialog-search-bar", role: "search", onSubmit: (o) => {
-    o.preventDefault(), e.submit(a);
+  return /* @__PURE__ */ h("form", { className: "dialog-search-bar", role: "search", onSubmit: (i) => {
+    i.preventDefault(), e.submit(a);
   }, children: [
-    /* @__PURE__ */ g("div", { className: "dialog-search-bar-field", children: [
-      /* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(Z, {}) }),
+    /* @__PURE__ */ h("div", { className: "dialog-search-bar-field", children: [
+      /* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(W, {}) }),
       /* @__PURE__ */ n(
         "input",
         {
@@ -324,8 +324,8 @@ const O = ({
           "aria-label": t,
           placeholder: t,
           autoFocus: s,
-          onChange: (o) => {
-            c(o.target.value), e.setQuery(o.target.value);
+          onChange: (i) => {
+            c(i.target.value), e.setQuery(i.target.value);
           }
         }
       )
@@ -336,16 +336,16 @@ const O = ({
         type: "submit",
         className: "dialog-search-bar-submit",
         "aria-label": r,
-        children: /* @__PURE__ */ n(W, {})
+        children: /* @__PURE__ */ n(Q, {})
       }
     )
   ] });
-}, X = ({
+}, z = ({
   controller: e,
   state: t
 }) => {
   const s = t.response;
-  return s === void 0 || s.nbPages <= 1 ? null : /* @__PURE__ */ g("nav", { "aria-label": "Search results pages", className: "dialog-search-pagination", children: [
+  return s === void 0 || s.nbPages <= 1 ? null : /* @__PURE__ */ h("nav", { "aria-label": "Search results pages", className: "dialog-search-pagination", children: [
     /* @__PURE__ */ n(
       "button",
       {
@@ -355,7 +355,7 @@ const O = ({
         children: "Previous"
       }
     ),
-    /* @__PURE__ */ g("span", { children: [
+    /* @__PURE__ */ h("span", { children: [
       "Page ",
       s.page + 1,
       " / ",
@@ -371,34 +371,25 @@ const O = ({
       }
     )
   ] });
-}, L = ({ amount: e, currencyCode: t }, s) => new Intl.NumberFormat(s, {
+}, L = ({ 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)), x = ({ min: e, max: t }, s) => e.amount === t.amount ? L(e, s) : `${L(e, s)} – ${L(t, s)}`, G = (e, 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) => {
   if (e === void 0)
     return "";
   try {
-    return x(e, t);
+    return Z(e, t);
   } catch {
     return "";
   }
-}, Y = (e, t) => {
-  const s = e.priceRange, r = e.compareAtPriceRange;
-  if (s === void 0 || r === void 0 || Number(r.min.amount) <= Number(s.min.amount))
-    return "";
-  try {
-    return x(r, t);
-  } catch {
-    return "";
-  }
-}, J = (e) => {
+}, G = (e) => {
   try {
     const { protocol: t } = new URL(e, window.location.href);
     return t === "http:" || t === "https:" ? e : void 0;
   } catch {
     return;
   }
-}, ee = ({
+}, Y = ({
   controller: e,
   hit: t,
   index: s,
@@ -408,104 +399,98 @@ const O = ({
   f(() => {
     a.current !== null && e.observeResult(a.current, s);
   }, [e, t, s]);
-  const c = (u) => {
-    const P = u.metaKey || u.ctrlKey || u.shiftKey || u.altKey;
-    e.selectResult(s, { navigate: !P }) && u.preventDefault();
-  }, l = (u) => {
-    u.button === 1 && e.selectResult(s, { navigate: !1 });
-  }, { product: o } = t, i = o.title ?? o.id, h = G(o.priceRange, r), m = Y(o, r), d = o.url === void 0 ? void 0 : J(o.url), p = /* @__PURE__ */ g(y, { children: [
-    /* @__PURE__ */ n("div", { className: "dialog-search-card-image", children: o.imageUrl !== void 0 && /* @__PURE__ */ n("img", { src: o.imageUrl, alt: i, loading: "lazy" }) }),
-    /* @__PURE__ */ g("div", { className: "dialog-search-card-info", children: [
+  const c = (d) => {
+    const m = d.metaKey || d.ctrlKey || d.shiftKey || d.altKey;
+    e.selectResult(s, { navigate: !m }) && d.preventDefault();
+  }, l = (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 }),
-      h !== "" && /* @__PURE__ */ g("p", { className: "dialog-search-card-price", children: [
-        h,
-        m !== "" && /* @__PURE__ */ g("s", { className: "dialog-search-card-compare-at", children: [
-          " ",
-          m
-        ] })
-      ] })
+      o !== "" && /* @__PURE__ */ n("p", { className: "dialog-search-card-price", children: o })
     ] })
   ] });
-  return /* @__PURE__ */ n("li", { ref: a, className: "dialog-search-card", children: d === void 0 ? /* @__PURE__ */ n("div", { className: "dialog-search-card-body", children: p }) : /* @__PURE__ */ n(
+  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(
     "a",
     {
       className: "dialog-search-card-body",
-      href: d,
+      href: u,
       onClick: c,
       onAuxClick: l,
       children: p
     }
   ) });
-}, te = (e) => {
+}, J = (e) => {
   const t = v(null), [s, r] = C(void 0), [a, c] = C(0);
   return D(() => {
     if (!e)
       return;
     const l = () => {
-      const o = t.current;
-      if (o === null)
+      const i = t.current;
+      if (i === null)
         return;
-      const i = o.previousElementSibling ?? o, { top: h, bottom: m, left: d, width: p } = i.getBoundingClientRect();
+      const o = i.previousElementSibling ?? i, { top: u, bottom: p, left: d, width: m } = o.getBoundingClientRect();
       c(window.innerHeight), r(
-        (u) => u !== void 0 && u.top === h && u.bottom === m && u.left === d && u.width === p ? u : { top: h, bottom: m, left: d, width: p }
+        (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 }
       );
     };
     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 };
-}, re = (e, t) => {
+}, ee = (e, t) => {
   const [s, r] = C(!1), a = v(null), c = e.status !== b.IDLE && !s;
   return f(() => {
     r(!1);
   }, [e.query]), f(() => {
     if (!c)
       return;
-    const l = (o) => {
-      var p, u;
-      const i = o.target;
-      if (!(i instanceof Node))
+    const l = (i) => {
+      var m, g;
+      const o = i.target;
+      if (!(o instanceof Node))
         return;
-      const h = (p = t.current) == null ? void 0 : p.previousElementSibling, m = ((u = a.current) == null ? void 0 : u.contains(i)) ?? !1, d = (h == null ? void 0 : h.contains(i)) ?? !1;
-      !m && !d && r(!0);
+      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;
+      !p && !d && r(!0);
     };
     return document.addEventListener("pointerdown", l), () => document.removeEventListener("pointerdown", l);
   }, [c, t]), f(() => {
-    var i;
-    const l = (i = t.current) == null ? void 0 : i.previousElementSibling;
+    var o;
+    const l = (o = t.current) == null ? void 0 : o.previousElementSibling;
     if (l == null)
       return;
-    const o = () => r(!1);
-    return l.addEventListener("focusin", o), () => l.removeEventListener("focusin", o);
+    const i = () => r(!1);
+    return l.addEventListener("focusin", i), () => l.removeEventListener("focusin", i);
   }, [t]), { isOpen: c, panelRef: a };
-}, k = 8, E = 16, se = 200, ne = (e) => e instanceof _ ? `Search failed (${e.status}${e.code ? ` ${e.code}` : ""}): ${e.message}` : "Search failed: network error. Check your connection and try again.", oe = (e, t) => e.bottom > 0 && e.top < t, ie = (e, t) => {
-  const s = t - e.bottom - k - E, r = e.top - k - E, a = { left: e.left, width: e.width };
-  return s < se && r > s ? {
+}, 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 + k,
+    bottom: t - e.top + S,
     maxHeight: Math.max(r, 0)
   } : {
     ...a,
-    top: e.bottom + k,
+    top: e.bottom + S,
     maxHeight: Math.max(s, 0)
   };
-}, ae = (e, t, s) => {
+}, oe = (e, t, s) => {
   const r = t.response;
   switch (t.status) {
     case b.LOADING:
-      return /* @__PURE__ */ g("p", { role: "status", className: "dialog-search-status", children: [
+      return /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
         "Searching “",
         t.query,
         "”…"
       ] });
     case b.ERROR:
-      return /* @__PURE__ */ g("div", { className: "dialog-search-error", children: [
+      return /* @__PURE__ */ h("div", { className: "dialog-search-error", children: [
         /* @__PURE__ */ n(
           "p",
           {
             role: "alert",
             className: "dialog-search-status dialog-search-status-error",
-            children: ne(t.error)
+            children: se(t.error)
           }
         ),
         /* @__PURE__ */ n(
@@ -519,120 +504,126 @@ const O = ({
         )
       ] });
     case b.EMPTY:
-      return /* @__PURE__ */ g("p", { role: "status", className: "dialog-search-status", children: [
+      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__ */ g(y, { children: [
-        /* @__PURE__ */ g("p", { role: "status", className: "dialog-search-status", children: [
+      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(
-          ee,
+          Y,
           {
             controller: e,
             hit: a,
             index: c,
             locale: s
           },
-          a.id
+          a.objectID
         )) }),
-        /* @__PURE__ */ n(X, { controller: e, state: t })
+        /* @__PURE__ */ n(z, { controller: e, state: t })
       ] });
     default:
       return null;
   }
-}, pe = ({
+}, me = ({
   controller: e,
   state: t,
   locale: s
 }) => {
-  const r = t.status !== b.IDLE, { anchorRef: a, rect: c, viewportHeight: l } = te(r), { isOpen: o, panelRef: i } = re(t, a);
-  return /* @__PURE__ */ g(y, { children: [
+  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 }),
-    o && c !== void 0 && oe(c, l) && K(
+    i && c !== void 0 && re(c, l) && _(
       /* @__PURE__ */ n(
         "div",
         {
-          ref: i,
+          ref: o,
           className: "dialog-search-panel",
-          style: ie(c, l),
-          children: ae(e, t, s)
+          style: ne(c, l),
+          children: oe(e, t, s)
         }
       ),
       document.body
     )
   ] });
-}, ce = {
+}, ie = {
   status: b.IDLE,
   query: "",
   page: 0
-}, fe = (e) => {
+}, pe = (e) => {
   const t = v(e);
   t.current = e;
   const s = v(void 0), r = N(() => {
     if (s.current === void 0) {
-      const { client: i, surface: h = "search_page", ...m } = t.current;
-      s.current = H({
-        search: (d, p) => i.search(d, p),
+      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,
         analytics: {
-          surface: h,
-          trackViewSearchResults: (d) => i.trackViewSearchResults(d),
-          trackSelectSearchResult: (d) => i.trackSelectSearchResult(d)
+          surface: u,
+          trackViewSearchResults: (m) => o.trackViewSearchResults(m),
+          trackSelectSearchResult: (m) => o.trackSelectSearchResult(m)
         },
-        ...m
+        ...d
       });
     }
     return s.current;
   }, []), a = v(void 0);
   a.current ?? (a.current = {
-    setQuery: (i) => r().setQuery(i),
-    submit: (i) => r().submit(i),
-    setPage: (i) => r().setPage(i),
+    setQuery: (o) => r().setQuery(o),
+    submit: (o) => r().submit(o),
+    setPage: (o) => r().setPage(o),
     retry: () => r().retry(),
-    observeResult: (i, h) => r().observeResult(i, h),
-    selectResult: (i, h) => r().selectResult(i, h),
-    subscribe: (i) => r().subscribe(i),
+    observeResult: (o, u) => r().observeResult(o, u),
+    selectResult: (o, u) => r().selectResult(o, u),
+    subscribe: (o) => r().subscribe(o),
     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.
     dispose: () => {
-      var i;
-      (i = s.current) == null || i.dispose(), s.current = void 0;
+      var o;
+      (o = s.current) == null || o.dispose(), s.current = void 0;
     }
   }), f(() => {
-    A({
+    R({
       method: "react",
-      version: "2.3.0"
+      version: "2.4.0"
     });
-    const i = r();
+    const o = r();
     return () => {
-      i.dispose(), s.current === i && (s.current = void 0);
+      o.dispose(), s.current === o && (s.current = void 0);
     };
   }, [r]);
   const c = N(
-    (i) => r().subscribe(i),
+    (o) => r().subscribe(o),
     [r]
   ), l = N(
     () => r().getState(),
     [r]
-  ), o = M(
+  ), i = x(
     c,
     l,
-    () => ce
+    () => ie
   );
-  return { controller: a.current, state: o };
+  return { controller: a.current, state: i };
 };
 export {
-  F as DialogInput,
-  ge as DialogProductBlock,
-  me as DialogSearchBar,
-  X as DialogSearchPagination,
-  ee as DialogSearchProductCard,
-  pe as DialogSearchResults,
-  fe as useDialogSearch
+  V as DialogInput,
+  he as DialogProductBlock,
+  ge as DialogSearchBar,
+  z as DialogSearchPagination,
+  Y as DialogSearchProductCard,
+  me as DialogSearchResults,
+  pe as useDialogSearch
 };

package/dist/dialog-react.umd.cjs

@@ -1 +1 @@
-(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk","react-dom"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f["dialog-react"]={},f["react/jsx-runtime"],f.React,f.dialogSdk,f.ReactDOM))})(this,(function(f,t,d,p,E){"use strict";const L=({title:e="Your expert",description:s="A question about this product?"})=>t.jsxs("div",{className:"dialog-block-header-container",children:[t.jsx("div",{className:"dialog-block-title",children:e}),t.jsx("div",{className:"dialog-block-description",children:s})]}),A=({color:e="#181825"})=>t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[t.jsx("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 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("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 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),t.jsx("defs",{children:t.jsx("clipPath",{id:"clip0_466_934",children:t.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),_=({client:e,questions:s,productId:o,productTitle:r,selectedVariantId:i})=>{const l=c=>{e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:c,fromQuestionSuggestion:!0})};return t.jsx(t.Fragment,{children:s.map(c=>t.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>l(c.question),children:[t.jsx(A,{color:e.theme.primaryColor}),t.jsx("span",{className:"dialog-block-suggestions-item-label",children:c.question})]},c.question))})},D=()=>t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),M=({client:e,questions:s,isLoading:o,productId:r,productTitle:i,selectedVariantId:l})=>t.jsx("div",{className:"dialog-block-suggestions-container",children:o||!s?t.jsx(D,{}):t.jsx(_,{client:e,questions:s,productId:r,productTitle:i,selectedVariantId:l})}),I=({color:e="#ffffff"})=>t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),y=({client:e,placeholder:s="Ask anything...",productId:o,productTitle:r,selectedVariantId:i})=>{const l=d.useRef(null),[c,a]=d.useState(""),n=()=>{var u;(u=l.current)==null||u.focus()},g=()=>{const u=c;u.trim()&&(e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:u,fromQuestionSuggestion:!0}),a(""))},b=u=>{u.key==="Enter"&&g()};return t.jsxs("div",{className:"dialog-input-wrapper",onClick:n,children:[t.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:l,value:c,onChange:u=>a(u.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:s,onKeyDown:b}),t.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!c.trim(),onClick:g,children:t.jsx(I,{color:e.theme.ctaTextColor})})]})},m=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),F=e=>{if(!e)return;const s=document.body;Object.keys(e).forEach(o=>{const r=o,i=m(o);if(e[r]!==void 0){if(typeof e[r]=="object"){Object.keys(e[r]).forEach(l=>{var a;const c=l;if(c!==void 0){const n=m(l),g=e[r];s.style.setProperty(`--dialog-theme-${i}-${n}`,(a=g[c])==null?void 0:a.toString())}});return}if(r==="ctaBorderType"){const l=e[r]==="rounded"?"24px":"0";s.style.setProperty(`--dialog-theme-${i}`,l);return}s.style.setProperty(`--dialog-theme-${i}`,e[r].toString())}})},O=({theme:e,children:s})=>(d.useEffect(()=>{e&&F(e)},[e]),t.jsx(t.Fragment,{children:s})),T=({client:e,productId:s,productTitle:o,selectedVariantId:r,enableInput:i=!0})=>{const[l,c]=d.useState(!0),[a,n]=d.useState(void 0);d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.0"}),p.addAuditCapability("pdp-block")},[]);const g=d.useMemo(()=>l?"":a==null?void 0:a.assistantName,[a,l]),b=d.useMemo(()=>l?"":a==null?void 0:a.description,[a,l]),u=d.useMemo(()=>l?"":a==null?void 0:a.inputPlaceholder,[a,l]),S=d.useMemo(()=>{var h;return p.resolveTextDirection((h=e.getLocalizationInformations())==null?void 0:h.languageCode)},[e]);return d.useEffect(()=>{let h=!0;return(async()=>{c(!0),n(void 0);try{const C=await e.getSuggestions(s);h&&n(C)}catch(C){console.error("error",C)}finally{h&&c(!1)}})(),()=>{h=!1}},[e,s]),t.jsx(O,{theme:e.theme,children:t.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:S,children:[t.jsx(L,{title:g,description:b}),t.jsx(M,{client:e,questions:a==null?void 0:a.questions,isLoading:l,productId:s,productTitle:o,selectedVariantId:r}),i&&t.jsx(y,{client:e,placeholder:u,productId:s,productTitle:o,selectedVariantId:r})]})})},B=()=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),q="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",H=({color:e="currentColor"})=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:q,fill:e})}),V=({controller:e,placeholder:s="Search products...",autoFocus:o=!1,submitAriaLabel:r="Search"})=>{const[i,l]=d.useState(""),c=a=>{a.preventDefault(),e.submit(i)};return t.jsxs("form",{className:"dialog-search-bar",role:"search",onSubmit:c,children:[t.jsxs("div",{className:"dialog-search-bar-field",children:[t.jsx("span",{className:"dialog-search-bar-icon",children:t.jsx(H,{})}),t.jsx("input",{type:"text",name:"dialog-search-query",className:"dialog-search-bar-input",value:i,"aria-label":s,placeholder:s,autoFocus:o,onChange:a=>{l(a.target.value),e.setQuery(a.target.value)}})]}),t.jsx("button",{type:"submit",className:"dialog-search-bar-submit","aria-label":r,children:t.jsx(B,{})})]})},w=({controller:e,state:s})=>{const o=s.response;return o===void 0||o.nbPages<=1?null:t.jsxs("nav",{"aria-label":"Search results pages",className:"dialog-search-pagination",children:[t.jsx("button",{type:"button",disabled:o.page===0,onClick:()=>e.setPage(o.page-1),children:"Previous"}),t.jsxs("span",{children:["Page ",o.page+1," / ",o.nbPages]}),t.jsx("button",{type:"button",disabled:o.page>=o.nbPages-1,onClick:()=>e.setPage(o.page+1),children:"Next"})]})},v=({amount:e,currencyCode:s},o)=>new Intl.NumberFormat(o,{style:"currency",currency:s}).format(Number(e)),N=({min:e,max:s},o)=>e.amount===s.amount?v(e,o):`${v(e,o)} – ${v(s,o)}`,x=(e,s)=>{if(e===void 0)return"";try{return N(e,s)}catch{return""}},K=(e,s)=>{const o=e.priceRange,r=e.compareAtPriceRange;if(o===void 0||r===void 0||Number(r.min.amount)<=Number(o.min.amount))return"";try{return N(r,s)}catch{return""}},$=e=>{try{const{protocol:s}=new URL(e,window.location.href);return s==="http:"||s==="https:"?e:void 0}catch{return}},P=({controller:e,hit:s,index:o,locale:r})=>{const i=d.useRef(null);d.useEffect(()=>{i.current!==null&&e.observeResult(i.current,o)},[e,s,o]);const l=h=>{const k=h.metaKey||h.ctrlKey||h.shiftKey||h.altKey;e.selectResult(o,{navigate:!k})&&h.preventDefault()},c=h=>{h.button===1&&e.selectResult(o,{navigate:!1})},{product:a}=s,n=a.title??a.id,g=x(a.priceRange,r),b=K(a,r),u=a.url===void 0?void 0:$(a.url),S=t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-search-card-image",children:a.imageUrl!==void 0&&t.jsx("img",{src:a.imageUrl,alt:n,loading:"lazy"})}),t.jsxs("div",{className:"dialog-search-card-info",children:[t.jsx("p",{className:"dialog-search-card-title",children:n}),g!==""&&t.jsxs("p",{className:"dialog-search-card-price",children:[g,b!==""&&t.jsxs("s",{className:"dialog-search-card-compare-at",children:[" ",b]})]})]})]});return t.jsx("li",{ref:i,className:"dialog-search-card",children:u===void 0?t.jsx("div",{className:"dialog-search-card-body",children:S}):t.jsx("a",{className:"dialog-search-card-body",href:u,onClick:l,onAuxClick:c,children:S})})},X=e=>{const s=d.useRef(null),[o,r]=d.useState(void 0),[i,l]=d.useState(0);return d.useLayoutEffect(()=>{if(!e)return;const c=()=>{const a=s.current;if(a===null)return;const n=a.previousElementSibling??a,{top:g,bottom:b,left:u,width:S}=n.getBoundingClientRect();l(window.innerHeight),r(h=>h!==void 0&&h.top===g&&h.bottom===b&&h.left===u&&h.width===S?h:{top:g,bottom:b,left:u,width:S})};return c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}},[e]),{anchorRef:s,rect:o,viewportHeight:i}},j=(e,s)=>{const[o,r]=d.useState(!1),i=d.useRef(null),l=e.status!==p.SearchStatus.IDLE&&!o;return d.useEffect(()=>{r(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const c=a=>{var S,h;const n=a.target;if(!(n instanceof Node))return;const g=(S=s.current)==null?void 0:S.previousElementSibling,b=((h=i.current)==null?void 0:h.contains(n))??!1,u=(g==null?void 0:g.contains(n))??!1;!b&&!u&&r(!0)};return document.addEventListener("pointerdown",c),()=>document.removeEventListener("pointerdown",c)},[l,s]),d.useEffect(()=>{var n;const c=(n=s.current)==null?void 0:n.previousElementSibling;if(c==null)return;const a=()=>r(!1);return c.addEventListener("focusin",a),()=>c.removeEventListener("focusin",a)},[s]),{isOpen:l,panelRef:i}},W=e=>e instanceof p.DialogSearchError?`Search failed (${e.status}${e.code?` ${e.code}`:""}): ${e.message}`:"Search failed: network error. Check your connection and try again.",Q=(e,s)=>e.bottom>0&&e.top<s,U=(e,s)=>{const o=s-e.bottom-8-16,r=e.top-8-16,i={left:e.left,width:e.width};return o<200&&r>o?{...i,bottom:s-e.top+8,maxHeight:Math.max(r,0)}:{...i,top:e.bottom+8,maxHeight:Math.max(o,0)}},z=(e,s,o)=>{const r=s.response;switch(s.status){case p.SearchStatus.LOADING:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",s.query,"”…"]});case p.SearchStatus.ERROR:return t.jsxs("div",{className:"dialog-search-error",children:[t.jsx("p",{role:"alert",className:"dialog-search-status dialog-search-status-error",children:W(s.error)}),t.jsx("button",{type:"button",className:"dialog-search-retry",onClick:()=>e.retry(),children:"Retry"})]});case p.SearchStatus.EMPTY:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["No products match “",r==null?void 0:r.query,"”."]});case p.SearchStatus.SUCCESS:return r===void 0?null:t.jsxs(t.Fragment,{children:[t.jsxs("p",{role:"status",className:"dialog-search-status",children:[r.nbHits," result",r.nbHits>1?"s":""]}),t.jsx("ul",{className:"dialog-search-results",children:r.hits.map((i,l)=>t.jsx(P,{controller:e,hit:i,index:l,locale:o},i.id))}),t.jsx(w,{controller:e,state:s})]});default:return null}},G=({controller:e,state:s,locale:o})=>{const r=s.status!==p.SearchStatus.IDLE,{anchorRef:i,rect:l,viewportHeight:c}=X(r),{isOpen:a,panelRef:n}=j(s,i);return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:i}),a&&l!==void 0&&Q(l,c)&&E.createPortal(t.jsx("div",{ref:n,className:"dialog-search-panel",style:U(l,c),children:z(e,s,o)}),document.body)]})},Z={status:p.SearchStatus.IDLE,query:"",page:0},Y=e=>{const s=d.useRef(e);s.current=e;const o=d.useRef(void 0),r=d.useCallback(()=>{if(o.current===void 0){const{client:n,surface:g="search_page",...b}=s.current;o.current=p.createSearchController({search:(u,S)=>n.search(u,S),analytics:{surface:g,trackViewSearchResults:u=>n.trackViewSearchResults(u),trackSelectSearchResult:u=>n.trackSelectSearchResult(u)},...b})}return o.current},[]),i=d.useRef(void 0);i.current??(i.current={setQuery:n=>r().setQuery(n),submit:n=>r().submit(n),setPage:n=>r().setPage(n),retry:()=>r().retry(),observeResult:(n,g)=>r().observeResult(n,g),selectResult:(n,g)=>r().selectResult(n,g),subscribe:n=>r().subscribe(n),getState:()=>r().getState(),dispose:()=>{var n;(n=o.current)==null||n.dispose(),o.current=void 0}}),d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.0"});const n=r();return()=>{n.dispose(),o.current===n&&(o.current=void 0)}},[r]);const l=d.useCallback(n=>r().subscribe(n),[r]),c=d.useCallback(()=>r().getState(),[r]),a=d.useSyncExternalStore(l,c,()=>Z);return{controller:i.current,state:a}};f.DialogInput=y,f.DialogProductBlock=T,f.DialogSearchBar=V,f.DialogSearchPagination=w,f.DialogSearchProductCard=P,f.DialogSearchResults=G,f.useDialogSearch=Y,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+(function(f,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk","react-dom"],s):(f=typeof globalThis<"u"?globalThis:f||self,s(f["dialog-react"]={},f["react/jsx-runtime"],f.React,f.dialogSdk,f.ReactDOM))})(this,(function(f,s,d,b,P){"use strict";const m=({title:e="Your expert",description:t="A question about this product?"})=>s.jsxs("div",{className:"dialog-block-header-container",children:[s.jsx("div",{className:"dialog-block-title",children:e}),s.jsx("div",{className:"dialog-block-description",children:t})]}),E=({color:e="#181825"})=>s.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[s.jsx("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 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),s.jsx("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 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),s.jsx("defs",{children:s.jsx("clipPath",{id:"clip0_466_934",children:s.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),L=({client:e,questions:t,productId:r,productTitle:o,selectedVariantId:i})=>{const l=c=>{e.sendProductMessage({productId:r,productTitle:o,selectedVariantId:i,question:c,fromQuestionSuggestion:!0})};return s.jsx(s.Fragment,{children:t.map(c=>s.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>l(c.question),children:[s.jsx(E,{color:e.theme.primaryColor}),s.jsx("span",{className:"dialog-block-suggestions-item-label",children:c.question})]},c.question))})},D=()=>s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),s.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),s.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),_=({client:e,questions:t,isLoading:r,productId:o,productTitle:i,selectedVariantId:l})=>s.jsx("div",{className:"dialog-block-suggestions-container",children:r||!t?s.jsx(D,{}):s.jsx(L,{client:e,questions:t,productId:o,productTitle:i,selectedVariantId:l})}),A=({color:e="#ffffff"})=>s.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),y=({client:e,placeholder:t="Ask anything...",productId:r,productTitle:o,selectedVariantId:i})=>{const l=d.useRef(null),[c,n]=d.useState(""),a=()=>{var u;(u=l.current)==null||u.focus()},h=()=>{const u=c;u.trim()&&(e.sendProductMessage({productId:r,productTitle:o,selectedVariantId:i,question:u,fromQuestionSuggestion:!0}),n(""))},S=u=>{u.key==="Enter"&&h()};return s.jsxs("div",{className:"dialog-input-wrapper",onClick:a,children:[s.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:l,value:c,onChange:u=>n(u.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:t,onKeyDown:S}),s.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!c.trim(),onClick:h,children:s.jsx(A,{color:e.theme.ctaTextColor})})]})},w=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),I=e=>{if(!e)return;const t=document.body;Object.keys(e).forEach(r=>{const o=r,i=w(r);if(e[o]!==void 0){if(typeof e[o]=="object"){Object.keys(e[o]).forEach(l=>{var n;const c=l;if(c!==void 0){const a=w(l),h=e[o];t.style.setProperty(`--dialog-theme-${i}-${a}`,(n=h[c])==null?void 0:n.toString())}});return}if(o==="ctaBorderType"){const l=e[o]==="rounded"?"24px":"0";t.style.setProperty(`--dialog-theme-${i}`,l);return}t.style.setProperty(`--dialog-theme-${i}`,e[o].toString())}})},M=({theme:e,children:t})=>(d.useEffect(()=>{e&&I(e)},[e]),s.jsx(s.Fragment,{children:t})),F=({client:e,productId:t,productTitle:r,selectedVariantId:o,enableInput:i=!0})=>{const[l,c]=d.useState(!0),[n,a]=d.useState(void 0);d.useEffect(()=>{b.registerDialogInstallation({method:"react",version:"2.4.0"}),b.addAuditCapability("pdp-block")},[]);const h=d.useMemo(()=>l?"":n==null?void 0:n.assistantName,[n,l]),S=d.useMemo(()=>l?"":n==null?void 0:n.description,[n,l]),u=d.useMemo(()=>l?"":n==null?void 0:n.inputPlaceholder,[n,l]),p=d.useMemo(()=>{var g;return b.resolveTextDirection((g=e.getLocalizationInformations())==null?void 0:g.languageCode)},[e]);return d.useEffect(()=>{let g=!0;return(async()=>{c(!0),a(void 0);try{const C=await e.getSuggestions(t);g&&a(C)}catch(C){console.error("error",C)}finally{g&&c(!1)}})(),()=>{g=!1}},[e,t]),s.jsx(M,{theme:e.theme,children:s.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:p,children:[s.jsx(m,{title:h,description:S}),s.jsx(_,{client:e,questions:n==null?void 0:n.questions,isLoading:l,productId:t,productTitle:r,selectedVariantId:o}),i&&s.jsx(y,{client:e,placeholder:u,productId:t,productTitle:r,selectedVariantId:o})]})})},O=()=>s.jsx("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:s.jsx("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),T="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",B=({color:e="currentColor"})=>s.jsx("svg",{width:16,height:16,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:s.jsx("path",{d:T,fill:e})}),q=({controller:e,placeholder:t="Search products...",autoFocus:r=!1,submitAriaLabel:o="Search"})=>{const[i,l]=d.useState(""),c=n=>{n.preventDefault(),e.submit(i)};return s.jsxs("form",{className:"dialog-search-bar",role:"search",onSubmit:c,children:[s.jsxs("div",{className:"dialog-search-bar-field",children:[s.jsx("span",{className:"dialog-search-bar-icon",children:s.jsx(B,{})}),s.jsx("input",{type:"text",name:"dialog-search-query",className:"dialog-search-bar-input",value:i,"aria-label":t,placeholder:t,autoFocus:r,onChange:n=>{l(n.target.value),e.setQuery(n.target.value)}})]}),s.jsx("button",{type:"submit",className:"dialog-search-bar-submit","aria-label":o,children:s.jsx(O,{})})]})},N=({controller:e,state:t})=>{const r=t.response;return r===void 0||r.nbPages<=1?null:s.jsxs("nav",{"aria-label":"Search results pages",className:"dialog-search-pagination",children:[s.jsx("button",{type:"button",disabled:r.page===0,onClick:()=>e.setPage(r.page-1),children:"Previous"}),s.jsxs("span",{children:["Page ",r.page+1," / ",r.nbPages]}),s.jsx("button",{type:"button",disabled:r.page>=r.nbPages-1,onClick:()=>e.setPage(r.page+1),children:"Next"})]})},v=({amount:e,currencyCode:t},r)=>t===void 0?new Intl.NumberFormat(r).format(Number(e)):new Intl.NumberFormat(r,{style:"currency",currency:t}).format(Number(e)),H=({min:e,max:t},r)=>e.amount===t.amount?v(e,r):`${v(e,r)} – ${v(t,r)}`,V=(e,t)=>{if(e===void 0)return"";try{return H(e,t)}catch{return""}},x=e=>{try{const{protocol:t}=new URL(e,window.location.href);return t==="http:"||t==="https:"?e:void 0}catch{return}},k=({controller:e,hit:t,index:r,locale:o})=>{const i=d.useRef(null);d.useEffect(()=>{i.current!==null&&e.observeResult(i.current,r)},[e,t,r]);const l=u=>{const p=u.metaKey||u.ctrlKey||u.shiftKey||u.altKey;e.selectResult(r,{navigate:!p})&&u.preventDefault()},c=u=>{u.button===1&&e.selectResult(r,{navigate:!1})},n=t.title??t.objectID,a=V(t.priceRange,o),h=t.url===void 0?void 0:x(t.url),S=s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"dialog-search-card-image",children:t.imageUrl!==void 0&&s.jsx("img",{src:t.imageUrl,alt:n,loading:"lazy"})}),s.jsxs("div",{className:"dialog-search-card-info",children:[s.jsx("p",{className:"dialog-search-card-title",children:n}),a!==""&&s.jsx("p",{className:"dialog-search-card-price",children:a})]})]});return s.jsx("li",{ref:i,className:"dialog-search-card",children:h===void 0?s.jsx("div",{className:"dialog-search-card-body",children:S}):s.jsx("a",{className:"dialog-search-card-body",href:h,onClick:l,onAuxClick:c,children:S})})},K=e=>{const t=d.useRef(null),[r,o]=d.useState(void 0),[i,l]=d.useState(0);return d.useLayoutEffect(()=>{if(!e)return;const c=()=>{const n=t.current;if(n===null)return;const a=n.previousElementSibling??n,{top:h,bottom:S,left:u,width:p}=a.getBoundingClientRect();l(window.innerHeight),o(g=>g!==void 0&&g.top===h&&g.bottom===S&&g.left===u&&g.width===p?g:{top:h,bottom:S,left:u,width:p})};return c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}},[e]),{anchorRef:t,rect:r,viewportHeight:i}},$=(e,t)=>{const[r,o]=d.useState(!1),i=d.useRef(null),l=e.status!==b.SearchStatus.IDLE&&!r;return d.useEffect(()=>{o(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const c=n=>{var p,g;const a=n.target;if(!(a instanceof Node))return;const h=(p=t.current)==null?void 0:p.previousElementSibling,S=((g=i.current)==null?void 0:g.contains(a))??!1,u=(h==null?void 0:h.contains(a))??!1;!S&&!u&&o(!0)};return document.addEventListener("pointerdown",c),()=>document.removeEventListener("pointerdown",c)},[l,t]),d.useEffect(()=>{var a;const c=(a=t.current)==null?void 0:a.previousElementSibling;if(c==null)return;const n=()=>o(!1);return c.addEventListener("focusin",n),()=>c.removeEventListener("focusin",n)},[t]),{isOpen:l,panelRef:i}},X=e=>e instanceof b.DialogSearchError?`Search failed (${e.status}${e.code?` ${e.code}`:""}): ${e.message}`:"Search failed: network error. Check your connection and try again.",j=(e,t)=>e.bottom>0&&e.top<t,W=(e,t)=>{const r=t-e.bottom-8-16,o=e.top-8-16,i={left:e.left,width:e.width};return r<200&&o>r?{...i,bottom:t-e.top+8,maxHeight:Math.max(o,0)}:{...i,top:e.bottom+8,maxHeight:Math.max(r,0)}},Q=(e,t,r)=>{const o=t.response;switch(t.status){case b.SearchStatus.LOADING:return s.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",t.query,"”…"]});case b.SearchStatus.ERROR:return s.jsxs("div",{className:"dialog-search-error",children:[s.jsx("p",{role:"alert",className:"dialog-search-status dialog-search-status-error",children:X(t.error)}),s.jsx("button",{type:"button",className:"dialog-search-retry",onClick:()=>e.retry(),children:"Retry"})]});case b.SearchStatus.EMPTY:return s.jsxs("p",{role:"status",className:"dialog-search-status",children:["No products match “",o==null?void 0:o.query,"”."]});case b.SearchStatus.SUCCESS:return o===void 0?null:s.jsxs(s.Fragment,{children:[s.jsxs("p",{role:"status",className:"dialog-search-status",children:[o.nbHits," result",o.nbHits>1?"s":""]}),s.jsx("ul",{className:"dialog-search-results",children:o.hits.map((i,l)=>s.jsx(k,{controller:e,hit:i,index:l,locale:r},i.objectID))}),s.jsx(N,{controller:e,state:t})]});default:return null}},U=({controller:e,state:t,locale:r})=>{const o=t.status!==b.SearchStatus.IDLE,{anchorRef:i,rect:l,viewportHeight:c}=K(o),{isOpen:n,panelRef:a}=$(t,i);return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:i}),n&&l!==void 0&&j(l,c)&&P.createPortal(s.jsx("div",{ref:a,className:"dialog-search-panel",style:W(l,c),children:Q(e,t,r)}),document.body)]})},z={status:b.SearchStatus.IDLE,query:"",page:0},G=e=>{const t=d.useRef(e);t.current=e;const r=d.useRef(void 0),o=d.useCallback(()=>{if(r.current===void 0){const{client:a,surface:h="search_page",locale:S=a.locale,...u}=t.current;r.current=b.createSearchController({search:(p,g)=>a.search(p,g),locale:S,analytics:{surface:h,trackViewSearchResults:p=>a.trackViewSearchResults(p),trackSelectSearchResult:p=>a.trackSelectSearchResult(p)},...u})}return r.current},[]),i=d.useRef(void 0);i.current??(i.current={setQuery:a=>o().setQuery(a),submit:a=>o().submit(a),setPage:a=>o().setPage(a),retry:()=>o().retry(),observeResult:(a,h)=>o().observeResult(a,h),selectResult:(a,h)=>o().selectResult(a,h),subscribe:a=>o().subscribe(a),getState:()=>o().getState(),dispose:()=>{var a;(a=r.current)==null||a.dispose(),r.current=void 0}}),d.useEffect(()=>{b.registerDialogInstallation({method:"react",version:"2.4.0"});const a=o();return()=>{a.dispose(),r.current===a&&(r.current=void 0)}},[o]);const l=d.useCallback(a=>o().subscribe(a),[o]),c=d.useCallback(()=>o().getState(),[o]),n=d.useSyncExternalStore(l,c,()=>z);return{controller:i.current,state:n}};f.DialogInput=y,f.DialogProductBlock=F,f.DialogSearchBar=q,f.DialogSearchPagination=N,f.DialogSearchProductCard=k,f.DialogSearchResults=U,f.useDialogSearch=G,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askdialog/dialog-react",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": false,
   "type": "module",
   "main": "./dist/dialog-react.umd.js",
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@askdialog/dialog-sdk": "2.9.0"
+    "@askdialog/dialog-sdk": "2.10.0"
   },
   "author": "Dialog",
   "publishConfig": {