@askdialog/dialog-react 2.1.0 → 2.2.1

package/README.md

@@ -86,6 +86,71 @@ Standalone input component for asking questions.
 />
 ```
 
+### Storefront search
+
+React binding of the SDK search controller (`createSearchController`): debounce, cancellation, stale-response protection, pagination and search attribution analytics all come from the SDK — these components only render and route.
+
+```tsx
+import { Dialog } from '@askdialog/dialog-sdk';
+import {
+  DialogSearchBar,
+  DialogSearchResults,
+  useDialogSearch,
+} from '@askdialog/dialog-react';
+import '@askdialog/dialog-react/style.css';
+
+const client = new Dialog({ apiKey: 'your-api-key', locale: 'en' });
+
+function SearchPage() {
+  const { controller, state } = useDialogSearch({ client });
+
+  return (
+    <>
+      <DialogSearchBar controller={controller} placeholder="Search products..." />
+      <DialogSearchResults controller={controller} state={state} />
+    </>
+  );
+}
+```
+
+#### useDialogSearch
+
+Creates one search controller per hook instance and disposes it on unmount.
+
+**Options:**
+- `client` (Dialog) - Dialog SDK client instance (required)
+- `surface` (SearchSurface, optional) - Where results are displayed, for analytics (default: `'search_page'`)
+- `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)
+
+**Returns:** `{ controller, state }` — pass both to the components below. `state.status` is `idle` / `loading` / `success` / `empty` / `error`.
+
+#### DialogSearchBar
+
+Search input: typing runs a debounced search, submitting (Enter) searches immediately.
+
+**Props:**
+- `controller` (SearchController) - From `useDialogSearch` (required)
+- `placeholder` (string, optional) - Input placeholder text
+- `autoFocus` (boolean, optional) - Focus the input on mount
+
+#### DialogSearchResults
+
+Floating results panel overlaying the page content: portaled to `document.body` in `position: fixed`, anchored under the spot where the component is rendered (place it right after the bar), so no ancestor stacking context or `overflow: hidden` can hide it. Renders the controller states; successful searches render a scrollable list of `DialogSearchProductCard` rows plus the pagination controls. Each card links to the product page and records search attribution (viewport impressions, select on click and middle-click) automatically. Clicking outside the panel (and outside the bar) closes it; typing again or re-focusing the bar reopens it with the results kept.
+
+**Props:**
+- `controller` (SearchController) - From `useDialogSearch` (required)
+- `state` (SearchControllerState) - From `useDialogSearch` (required)
+
+#### DialogSearchPagination
+
+Previous/next controls with a page indicator; hidden while there is a single page. Rendered by `DialogSearchResults` — exported only for custom layouts.
+
+**Props:**
+- `controller` (SearchController) - From `useDialogSearch` (required)
+- `state` (SearchControllerState) - From `useDialogSearch` (required)
+
 ## Theming
 
 The components use CSS variables for theming. You can customize the theme through the Dialog SDK client:

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SearchController } from '@askdialog/dialog-sdk';
+interface DialogSearchBarProps {
+    controller: SearchController;
+    placeholder?: string;
+    autoFocus?: boolean;
+    submitAriaLabel?: string;
+}
+export declare const DialogSearchBar: FC<DialogSearchBarProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SearchController, SearchControllerState } from '@askdialog/dialog-sdk';
+interface DialogSearchPaginationProps {
+    controller: SearchController;
+    state: SearchControllerState;
+}
+export declare const DialogSearchPagination: FC<DialogSearchPaginationProps>;
+export {};

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { SearchController, SearchHit } from '@askdialog/dialog-sdk';
+interface DialogSearchProductCardProps {
+    controller: SearchController;
+    hit: SearchHit;
+    index: number;
+}
+export declare const DialogSearchProductCard: FC<DialogSearchProductCardProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SearchController, SearchControllerState } from '@askdialog/dialog-sdk';
+interface DialogSearchResultsProps {
+    controller: SearchController;
+    state: SearchControllerState;
+}
+export declare const DialogSearchResults: FC<DialogSearchResultsProps>;
+export {};

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

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

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

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+export interface AnchorRect {
+    top: number;
+    bottom: number;
+    left: number;
+    width: number;
+}
+export declare const useAnchorRect: (active: boolean) => {
+    anchorRef: RefObject<HTMLDivElement | null>;
+    rect: AnchorRect | undefined;
+    viewportHeight: number;
+};

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

@@ -0,0 +1,16 @@
+import { Dialog, SearchController, SearchControllerState, SearchHit, SearchSurface } from '@askdialog/dialog-sdk';
+export interface UseDialogSearchOptions {
+    client: Dialog;
+    /** Where the results are displayed, for search analytics. */
+    surface?: SearchSurface;
+    /** Router adapter called after selection attribution; omit to let the cards' `<a href>` navigate natively. */
+    navigate?: (url: string, hit: SearchHit) => void;
+    debounceMs?: number;
+    hitsPerPage?: number;
+}
+export interface DialogSearch {
+    controller: SearchController;
+    state: SearchControllerState;
+}
+/** Options are read when the controller is created — later changes don't rebind a live controller. */
+export declare const useDialogSearch: (options: UseDialogSearchOptions) => DialogSearch;

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

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+import { SearchControllerState } from '@askdialog/dialog-sdk';
+export declare const useOutsideDismiss: (state: SearchControllerState, anchorRef: RefObject<HTMLDivElement | null>) => {
+    isOpen: boolean;
+    panelRef: RefObject<HTMLDivElement | null>;
+};

package/dist/components/index.d.ts

@@ -1,2 +1,7 @@
 export { DialogProductBlock } from './DialogProductBlock/DialogProductBlock';
 export { DialogInput } from './DialogProductBlock/DialogInput';
+export { DialogSearchBar } from './DialogSearch/DialogSearchBar';
+export { DialogSearchPagination } from './DialogSearch/DialogSearchPagination';
+export { DialogSearchProductCard } from './DialogSearch/DialogSearchProductCard';
+export { DialogSearchResults } from './DialogSearch/DialogSearchResults';
+export { useDialogSearch, type DialogSearch, type UseDialogSearchOptions, } from './DialogSearch/useDialogSearch';

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:left;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-right: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);right: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-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,13 +1,14 @@
-import { jsxs as d, jsx as t, Fragment as f } from "react/jsx-runtime";
-import { useRef as L, useState as k, useEffect as C, useMemo as m } from "react";
-import { registerDialogInstallation as v, addAuditCapability as w } from "@askdialog/dialog-sdk";
-const S = ({
+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 S, useLayoutEffect as R, useCallback as N, useSyncExternalStore as x } from "react";
+import { registerDialogInstallation as E, addAuditCapability as A, resolveTextDirection as D, SearchStatus as b, DialogSearchError as I, createSearchController as M } from "@askdialog/dialog-sdk";
+import { createPortal as B } from "react-dom";
+const _ = ({
   title: e = "Your expert",
-  description: i = "A question about this product?"
-}) => /* @__PURE__ */ d("div", { className: "dialog-block-header-container", children: [
-  /* @__PURE__ */ t("div", { className: "dialog-block-title", children: e }),
-  /* @__PURE__ */ t("div", { className: "dialog-block-description", children: i })
-] }), N = ({ color: e = "#181825" }) => /* @__PURE__ */ d(
+  description: t = "A question about this product?"
+}) => /* @__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 })
+] }), H = ({ color: e = "#181825" }) => /* @__PURE__ */ h(
   "svg",
   {
     width: "20",
@@ -16,8 +17,8 @@ const S = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ d("g", { clipPath: "url(#clip0_466_934)", children: [
-        /* @__PURE__ */ t(
+      /* @__PURE__ */ h("g", { clipPath: "url(#clip0_466_934)", children: [
+        /* @__PURE__ */ n(
           "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",
@@ -27,7 +28,7 @@ const S = ({
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ n(
           "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",
@@ -38,58 +39,58 @@ const S = ({
           }
         )
       ] }),
-      /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ t("rect", { width: "20", height: "20", fill: "white" }) }) })
+      /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ n("rect", { width: "20", height: "20", fill: "white" }) }) })
     ]
   }
-), P = ({
+), K = ({
   client: e,
-  questions: i,
-  productId: l,
-  productTitle: s,
-  selectedVariantId: a
+  questions: t,
+  productId: s,
+  productTitle: r,
+  selectedVariantId: c
 }) => {
-  const n = (r) => {
+  const l = (o) => {
     e.sendProductMessage({
-      productId: l,
-      productTitle: s,
-      selectedVariantId: a,
-      question: r,
+      productId: s,
+      productTitle: r,
+      selectedVariantId: c,
+      question: o,
       fromQuestionSuggestion: !0
     });
   };
-  return /* @__PURE__ */ t(f, { children: i.map((r) => /* @__PURE__ */ d(
+  return /* @__PURE__ */ n(y, { children: t.map((o) => /* @__PURE__ */ h(
     "button",
     {
       className: "dialog-block-suggestions-item",
-      onClick: () => n(r.question),
+      onClick: () => l(o.question),
       children: [
-        /* @__PURE__ */ t(N, { color: e.theme.primaryColor }),
-        /* @__PURE__ */ t("span", { className: "dialog-block-suggestions-item-label", children: r.question })
+        /* @__PURE__ */ n(H, { color: e.theme.primaryColor }),
+        /* @__PURE__ */ n("span", { className: "dialog-block-suggestions-item-label", children: o.question })
       ]
     },
-    r.question
+    o.question
   )) });
-}, x = () => /* @__PURE__ */ d(f, { children: [
-  /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" }),
-  /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" }),
-  /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" })
-] }), j = ({
+}, 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" })
+] }), $ = ({
   client: e,
-  questions: i,
-  isLoading: l,
-  productId: s,
-  productTitle: a,
-  selectedVariantId: n
-}) => /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-container", children: l || !i ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(
-  P,
+  questions: t,
+  isLoading: s,
+  productId: r,
+  productTitle: c,
+  selectedVariantId: l
+}) => /* @__PURE__ */ n("div", { className: "dialog-block-suggestions-container", children: s || !t ? /* @__PURE__ */ n(O, {}) : /* @__PURE__ */ n(
+  K,
   {
     client: e,
-    questions: i,
-    productId: s,
-    productTitle: a,
-    selectedVariantId: n
+    questions: t,
+    productId: r,
+    productTitle: c,
+    selectedVariantId: l
   }
-) }), B = ({ color: e = "#ffffff" }) => /* @__PURE__ */ t(
+) }), T = ({ color: e = "#ffffff" }) => /* @__PURE__ */ n(
   "svg",
   {
     width: "20",
@@ -97,7 +98,7 @@ const S = ({
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ t(
+    children: /* @__PURE__ */ n(
       "path",
       {
         d: "M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",
@@ -108,154 +109,513 @@ const S = ({
       }
     )
   }
-), M = ({
+), V = ({
   client: e,
-  placeholder: i = "Ask anything...",
-  productId: l,
-  productTitle: s,
-  selectedVariantId: a
+  placeholder: t = "Ask anything...",
+  productId: s,
+  productTitle: r,
+  selectedVariantId: c
 }) => {
-  const n = L(null), [r, o] = k(""), u = () => {
-    var c;
-    (c = n.current) == null || c.focus();
-  }, g = () => {
-    const c = r;
-    c.trim() && (e.sendProductMessage({
-      productId: l,
-      productTitle: s,
-      selectedVariantId: a,
-      question: c,
+  const l = v(null), [o, i] = C(""), a = () => {
+    var d;
+    (d = l.current) == null || d.focus();
+  }, u = () => {
+    const d = o;
+    d.trim() && (e.sendProductMessage({
+      productId: s,
+      productTitle: r,
+      selectedVariantId: c,
+      question: d,
       fromQuestionSuggestion: !0
-    }), o(""));
+    }), i(""));
   };
-  return /* @__PURE__ */ d("div", { className: "dialog-input-wrapper", onClick: u, children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ h("div", { className: "dialog-input-wrapper", onClick: a, children: [
+    /* @__PURE__ */ n(
       "input",
       {
         id: "dialog-ask-anything-input-ai-input",
-        ref: n,
-        value: r,
-        onChange: (c) => o(c.target.value),
+        ref: l,
+        value: o,
+        onChange: (d) => i(d.target.value),
         className: "dialog-ask-anything-input-ai-input",
-        placeholder: i,
-        onKeyDown: (c) => {
-          c.key === "Enter" && g();
+        placeholder: t,
+        onKeyDown: (d) => {
+          d.key === "Enter" && u();
         }
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ n(
       "button",
       {
         id: "send-message-button-ai-input",
         className: "dialog-input-submit",
-        disabled: !r.trim(),
-        onClick: g,
-        children: /* @__PURE__ */ t(B, { color: e.theme.ctaTextColor })
+        disabled: !o.trim(),
+        onClick: u,
+        children: /* @__PURE__ */ n(T, { color: e.theme.ctaTextColor })
       }
     )
   ] });
-}, y = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), A = (e) => {
+}, L = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), j = (e) => {
   if (!e) return;
-  const i = document.body;
-  Object.keys(e).forEach((l) => {
-    const s = l, a = y(l);
-    if (e[s] !== void 0) {
-      if (typeof e[s] == "object") {
-        Object.keys(e[s]).forEach(
-          (n) => {
-            var o;
-            const r = n;
-            if (r !== void 0) {
-              const u = y(n), g = e[s];
-              i.style.setProperty(
-                `--dialog-theme-${a}-${u}`,
-                (o = g[r]) == null ? void 0 : o.toString()
+  const t = document.body;
+  Object.keys(e).forEach((s) => {
+    const r = s, c = L(s);
+    if (e[r] !== void 0) {
+      if (typeof e[r] == "object") {
+        Object.keys(e[r]).forEach(
+          (l) => {
+            var i;
+            const o = l;
+            if (o !== void 0) {
+              const a = L(l), u = e[r];
+              t.style.setProperty(
+                `--dialog-theme-${c}-${a}`,
+                (i = u[o]) == null ? void 0 : i.toString()
               );
             }
           }
         );
         return;
       }
-      if (s === "ctaBorderType") {
-        const n = e[s] === "rounded" ? "24px" : "0";
-        i.style.setProperty(`--dialog-theme-${a}`, n);
+      if (r === "ctaBorderType") {
+        const l = e[r] === "rounded" ? "24px" : "0";
+        t.style.setProperty(`--dialog-theme-${c}`, l);
         return;
       }
-      i.style.setProperty(
-        `--dialog-theme-${a}`,
-        e[s].toString()
+      t.style.setProperty(
+        `--dialog-theme-${c}`,
+        e[r].toString()
       );
     }
   });
-}, K = ({ theme: e, children: i }) => (C(() => {
-  e && A(e);
-}, [e]), /* @__PURE__ */ t(f, { children: i })), E = ({
+}, q = ({ theme: e, children: t }) => (f(() => {
+  e && j(e);
+}, [e]), /* @__PURE__ */ n(y, { children: t })), de = ({
   client: e,
-  productId: i,
-  productTitle: l,
-  selectedVariantId: s,
-  enableInput: a = !0
+  productId: t,
+  productTitle: s,
+  selectedVariantId: r,
+  enableInput: c = !0
 }) => {
-  const [n, r] = k(!0), [o, u] = k(
+  const [l, o] = C(!0), [i, a] = C(
     void 0
   );
-  C(() => {
-    v({
+  f(() => {
+    E({
       method: "react",
-      version: "2.1.0"
-    }), w("pdp-block");
+      version: "2.2.1"
+    }), A("pdp-block");
   }, []);
-  const g = m(
-    () => n ? "" : o == null ? void 0 : o.assistantName,
-    [o, n]
-  ), b = m(
-    () => n ? "" : o == null ? void 0 : o.description,
-    [o, n]
-  ), c = m(
-    () => n ? "" : o == null ? void 0 : o.inputPlaceholder,
-    [o, n]
+  const u = S(
+    () => l ? "" : i == null ? void 0 : i.assistantName,
+    [i, l]
+  ), m = S(
+    () => l ? "" : i == null ? void 0 : i.description,
+    [i, l]
+  ), d = S(
+    () => l ? "" : i == null ? void 0 : i.inputPlaceholder,
+    [i, l]
+  ), p = S(
+    () => {
+      var g;
+      return D((g = e.getLocalizationInformations()) == null ? void 0 : g.languageCode);
+    },
+    [e]
   );
-  return C(() => {
-    let h = !0;
+  return f(() => {
+    let g = !0;
     return (async () => {
-      r(!0), u(void 0);
+      o(!0), a(void 0);
       try {
-        const p = await e.getSuggestions(i);
-        h && u(p);
-      } catch (p) {
-        console.error("error", p);
+        const w = await e.getSuggestions(t);
+        g && a(w);
+      } catch (w) {
+        console.error("error", w);
       } finally {
-        h && r(!1);
+        g && o(!1);
       }
     })(), () => {
-      h = !1;
+      g = !1;
     };
-  }, [e, i]), /* @__PURE__ */ t(K, { theme: e.theme, children: /* @__PURE__ */ d("div", { id: "dialog-instant", className: "dialog-block-container", children: [
-    /* @__PURE__ */ t(S, { title: g, description: b }),
-    /* @__PURE__ */ t(
-      j,
+  }, [e, t]), /* @__PURE__ */ n(q, { theme: e.theme, children: /* @__PURE__ */ h(
+    "div",
+    {
+      id: "dialog-instant",
+      className: "dialog-block-container",
+      dir: p,
+      children: [
+        /* @__PURE__ */ n(_, { title: u, description: m }),
+        /* @__PURE__ */ n(
+          $,
+          {
+            client: e,
+            questions: i == null ? void 0 : i.questions,
+            isLoading: l,
+            productId: t,
+            productTitle: s,
+            selectedVariantId: r
+          }
+        ),
+        c && /* @__PURE__ */ n(
+          V,
+          {
+            client: e,
+            placeholder: d,
+            productId: t,
+            productTitle: s,
+            selectedVariantId: r
+          }
+        )
+      ]
+    }
+  ) });
+}, F = () => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ n(
+      "path",
       {
-        client: e,
-        questions: o == null ? void 0 : o.questions,
-        isLoading: n,
-        productId: i,
-        productTitle: l,
-        selectedVariantId: s
+        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", U = ({
+  color: e = "currentColor"
+}) => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ n("path", { d: Q, fill: e })
+  }
+), ue = ({
+  controller: e,
+  placeholder: t = "Search products...",
+  autoFocus: s = !1,
+  submitAriaLabel: r = "Search"
+}) => {
+  const [c, l] = C("");
+  return /* @__PURE__ */ h("form", { className: "dialog-search-bar", role: "search", onSubmit: (i) => {
+    i.preventDefault(), e.submit(c);
+  }, children: [
+    /* @__PURE__ */ h("div", { className: "dialog-search-bar-field", children: [
+      /* @__PURE__ */ n("span", { className: "dialog-search-bar-icon", children: /* @__PURE__ */ n(U, {}) }),
+      /* @__PURE__ */ n(
+        "input",
+        {
+          type: "text",
+          name: "dialog-search-query",
+          className: "dialog-search-bar-input",
+          value: c,
+          "aria-label": t,
+          placeholder: t,
+          autoFocus: s,
+          onChange: (i) => {
+            l(i.target.value), e.setQuery(i.target.value);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "submit",
+        className: "dialog-search-bar-submit",
+        "aria-label": r,
+        children: /* @__PURE__ */ n(F, {})
+      }
+    )
+  ] });
+}, W = ({
+  controller: e,
+  state: t
+}) => {
+  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: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        disabled: s.page === 0,
+        onClick: () => e.setPage(s.page - 1),
+        children: "Previous"
       }
     ),
-    a && /* @__PURE__ */ t(
-      M,
+    /* @__PURE__ */ h("span", { children: [
+      "Page ",
+      s.page + 1,
+      " / ",
+      s.nbPages
+    ] }),
+    /* @__PURE__ */ n(
+      "button",
       {
-        client: e,
-        placeholder: c,
-        productId: i,
-        productTitle: l,
-        selectedVariantId: s
+        type: "button",
+        disabled: s.page >= s.nbPages - 1,
+        onClick: () => e.setPage(s.page + 1),
+        children: "Next"
       }
     )
-  ] }) });
+  ] });
+}, z = (e) => {
+  if (e === void 0)
+    return "";
+  const { min: t, max: s } = e, r = ({ amount: c, currencyCode: l }) => new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency: l
+  }).format(Number(c));
+  try {
+    return t.amount === s.amount ? r(t) : `${r(t)} – ${r(s)}`;
+  } catch {
+    return "";
+  }
+}, Z = (e) => {
+  try {
+    const { protocol: t } = new URL(e, window.location.href);
+    return t === "http:" || t === "https:" ? e : void 0;
+  } catch {
+    return;
+  }
+}, X = ({
+  controller: e,
+  hit: t,
+  index: s
+}) => {
+  const r = v(null);
+  f(() => {
+    r.current !== null && e.observeResult(r.current, s);
+  }, [e, t, s]);
+  const c = (d) => {
+    const p = d.metaKey || d.ctrlKey || d.shiftKey || d.altKey;
+    e.selectResult(s, { navigate: !p }) && d.preventDefault();
+  }, l = (d) => {
+    d.button === 1 && e.selectResult(s, { navigate: !1 });
+  }, { product: o } = t, i = o.title ?? o.id, a = z(o.priceRange), u = o.url === void 0 ? void 0 : Z(o.url), m = /* @__PURE__ */ h(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__ */ h("div", { className: "dialog-search-card-info", children: [
+      /* @__PURE__ */ n("p", { className: "dialog-search-card-title", children: i }),
+      a !== "" && /* @__PURE__ */ n("p", { className: "dialog-search-card-price", children: a })
+    ] })
+  ] });
+  return /* @__PURE__ */ n("li", { ref: r, className: "dialog-search-card", children: u === void 0 ? /* @__PURE__ */ n("div", { className: "dialog-search-card-body", children: m }) : /* @__PURE__ */ n(
+    "a",
+    {
+      className: "dialog-search-card-body",
+      href: u,
+      onClick: c,
+      onAuxClick: l,
+      children: m
+    }
+  ) });
+}, G = (e) => {
+  const t = v(null), [s, r] = C(void 0), [c, l] = C(0);
+  return R(() => {
+    if (!e)
+      return;
+    const o = () => {
+      const i = t.current;
+      if (i === null)
+        return;
+      const a = i.previousElementSibling ?? i, { top: u, bottom: m, left: d, width: p } = a.getBoundingClientRect();
+      l(window.innerHeight), r(
+        (g) => g !== void 0 && g.top === u && g.bottom === m && g.left === d && g.width === p ? g : { top: u, bottom: m, left: d, width: p }
+      );
+    };
+    return o(), window.addEventListener("scroll", o, !0), window.addEventListener("resize", o), () => {
+      window.removeEventListener("scroll", o, !0), window.removeEventListener("resize", o);
+    };
+  }, [e]), { anchorRef: t, rect: s, viewportHeight: c };
+}, Y = (e, t) => {
+  const [s, r] = C(!1), c = v(null), l = e.status !== b.IDLE && !s;
+  return f(() => {
+    r(!1);
+  }, [e.query]), f(() => {
+    if (!l)
+      return;
+    const o = (i) => {
+      var p, g;
+      const a = i.target;
+      if (!(a instanceof Node))
+        return;
+      const u = (p = t.current) == null ? void 0 : p.previousElementSibling, m = ((g = c.current) == null ? void 0 : g.contains(a)) ?? !1, d = (u == null ? void 0 : u.contains(a)) ?? !1;
+      !m && !d && r(!0);
+    };
+    return document.addEventListener("pointerdown", o), () => document.removeEventListener("pointerdown", o);
+  }, [l, t]), f(() => {
+    var a;
+    const o = (a = t.current) == null ? void 0 : a.previousElementSibling;
+    if (o == null)
+      return;
+    const i = () => r(!1);
+    return o.addEventListener("focusin", i), () => o.removeEventListener("focusin", i);
+  }, [t]), { isOpen: l, panelRef: c };
+}, k = 8, P = 16, J = 200, ee = (e) => e instanceof I ? `Search failed (${e.status}${e.code ? ` ${e.code}` : ""}): ${e.message}` : "Search failed: network error. Check your connection and try again.", te = (e, t) => e.bottom > 0 && e.top < t, se = (e, t) => {
+  const s = t - e.bottom - k - P, r = e.top - k - P, c = { left: e.left, width: e.width };
+  return s < J && r > s ? {
+    ...c,
+    bottom: t - e.top + k,
+    maxHeight: Math.max(r, 0)
+  } : {
+    ...c,
+    top: e.bottom + k,
+    maxHeight: Math.max(s, 0)
+  };
+}, re = (e, t) => {
+  const s = 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: ee(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 “",
+        s == null ? void 0 : s.query,
+        "”."
+      ] });
+    case b.SUCCESS:
+      return s === void 0 ? null : /* @__PURE__ */ h(y, { children: [
+        /* @__PURE__ */ h("p", { role: "status", className: "dialog-search-status", children: [
+          s.nbHits,
+          " result",
+          s.nbHits > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ n("ul", { className: "dialog-search-results", children: s.hits.map((r, c) => /* @__PURE__ */ n(
+          X,
+          {
+            controller: e,
+            hit: r,
+            index: c
+          },
+          r.id
+        )) }),
+        /* @__PURE__ */ n(W, { controller: e, state: t })
+      ] });
+    default:
+      return null;
+  }
+}, he = ({
+  controller: e,
+  state: t
+}) => {
+  const s = t.status !== b.IDLE, { anchorRef: r, rect: c, viewportHeight: l } = G(s), { isOpen: o, panelRef: i } = Y(t, r);
+  return /* @__PURE__ */ h(y, { children: [
+    /* @__PURE__ */ n("div", { ref: r }),
+    o && c !== void 0 && te(c, l) && B(
+      /* @__PURE__ */ n(
+        "div",
+        {
+          ref: i,
+          className: "dialog-search-panel",
+          style: se(c, l),
+          children: re(e, t)
+        }
+      ),
+      document.body
+    )
+  ] });
+}, ne = {
+  status: b.IDLE,
+  query: "",
+  page: 0
+}, ge = (e) => {
+  const t = v(e);
+  t.current = e;
+  const s = v(void 0), r = N(() => {
+    if (s.current === void 0) {
+      const { client: a, surface: u = "search_page", ...m } = t.current;
+      s.current = M({
+        search: (d, p) => a.search(d, p),
+        analytics: {
+          surface: u,
+          trackViewSearchResults: (d) => a.trackViewSearchResults(d),
+          trackSelectSearchResult: (d) => a.trackSelectSearchResult(d)
+        },
+        ...m
+      });
+    }
+    return s.current;
+  }, []), c = v(void 0);
+  c.current ?? (c.current = {
+    setQuery: (a) => r().setQuery(a),
+    submit: (a) => r().submit(a),
+    setPage: (a) => r().setPage(a),
+    retry: () => r().retry(),
+    observeResult: (a, u) => r().observeResult(a, u),
+    selectResult: (a, u) => r().selectResult(a, u),
+    subscribe: (a) => r().subscribe(a),
+    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 a;
+      (a = s.current) == null || a.dispose(), s.current = void 0;
+    }
+  }), f(() => {
+    E({
+      method: "react",
+      version: "2.2.1"
+    });
+    const a = r();
+    return () => {
+      a.dispose(), s.current === a && (s.current = void 0);
+    };
+  }, [r]);
+  const l = N(
+    (a) => r().subscribe(a),
+    [r]
+  ), o = N(
+    () => r().getState(),
+    [r]
+  ), i = x(
+    l,
+    o,
+    () => ne
+  );
+  return { controller: c.current, state: i };
 };
 export {
-  M as DialogInput,
-  E as DialogProductBlock
+  V as DialogInput,
+  de as DialogProductBlock,
+  ue as DialogSearchBar,
+  W as DialogSearchPagination,
+  X as DialogSearchProductCard,
+  he as DialogSearchResults,
+  ge as useDialogSearch
 };

package/dist/dialog-react.umd.cjs

@@ -1 +1 @@
-(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["dialog-react"]={},d["react/jsx-runtime"],d.React,d.dialogSdk))})(this,(function(d,e,g,C){"use strict";const L=({title:o="Your expert",description:t="A question about this product?"})=>e.jsxs("div",{className:"dialog-block-header-container",children:[e.jsx("div",{className:"dialog-block-title",children:o}),e.jsx("div",{className:"dialog-block-description",children:t})]}),v=({color:o="#181825"})=>e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[e.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:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.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:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),e.jsx("defs",{children:e.jsx("clipPath",{id:"clip0_466_934",children:e.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),S=({client:o,questions:t,productId:a,productTitle:n,selectedVariantId:l})=>{const i=r=>{o.sendProductMessage({productId:a,productTitle:n,selectedVariantId:l,question:r,fromQuestionSuggestion:!0})};return e.jsx(e.Fragment,{children:t.map(r=>e.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>i(r.question),children:[e.jsx(v,{color:o.theme.primaryColor}),e.jsx("span",{className:"dialog-block-suggestions-item-label",children:r.question})]},r.question))})},w=()=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),N=({client:o,questions:t,isLoading:a,productId:n,productTitle:l,selectedVariantId:i})=>e.jsx("div",{className:"dialog-block-suggestions-container",children:a||!t?e.jsx(w,{}):e.jsx(S,{client:o,questions:t,productId:n,productTitle:l,selectedVariantId:i})}),m=({color:o="#ffffff"})=>e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),b=({client:o,placeholder:t="Ask anything...",productId:a,productTitle:n,selectedVariantId:l})=>{const i=g.useRef(null),[r,s]=g.useState(""),u=()=>{var c;(c=i.current)==null||c.focus()},h=()=>{const c=r;c.trim()&&(o.sendProductMessage({productId:a,productTitle:n,selectedVariantId:l,question:c,fromQuestionSuggestion:!0}),s(""))},p=c=>{c.key==="Enter"&&h()};return e.jsxs("div",{className:"dialog-input-wrapper",onClick:u,children:[e.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:i,value:r,onChange:c=>s(c.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:t,onKeyDown:p}),e.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!r.trim(),onClick:h,children:e.jsx(m,{color:o.theme.ctaTextColor})})]})},y=o=>o.replace(/([A-Z])/g,"-$1").toLowerCase(),P=o=>{if(!o)return;const t=document.body;Object.keys(o).forEach(a=>{const n=a,l=y(a);if(o[n]!==void 0){if(typeof o[n]=="object"){Object.keys(o[n]).forEach(i=>{var s;const r=i;if(r!==void 0){const u=y(i),h=o[n];t.style.setProperty(`--dialog-theme-${l}-${u}`,(s=h[r])==null?void 0:s.toString())}});return}if(n==="ctaBorderType"){const i=o[n]==="rounded"?"24px":"0";t.style.setProperty(`--dialog-theme-${l}`,i);return}t.style.setProperty(`--dialog-theme-${l}`,o[n].toString())}})},M=({theme:o,children:t})=>(g.useEffect(()=>{o&&P(o)},[o]),e.jsx(e.Fragment,{children:t})),j=({client:o,productId:t,productTitle:a,selectedVariantId:n,enableInput:l=!0})=>{const[i,r]=g.useState(!0),[s,u]=g.useState(void 0);g.useEffect(()=>{C.registerDialogInstallation({method:"react",version:"2.1.0"}),C.addAuditCapability("pdp-block")},[]);const h=g.useMemo(()=>i?"":s==null?void 0:s.assistantName,[s,i]),p=g.useMemo(()=>i?"":s==null?void 0:s.description,[s,i]),c=g.useMemo(()=>i?"":s==null?void 0:s.inputPlaceholder,[s,i]);return g.useEffect(()=>{let f=!0;return(async()=>{r(!0),u(void 0);try{const k=await o.getSuggestions(t);f&&u(k)}catch(k){console.error("error",k)}finally{f&&r(!1)}})(),()=>{f=!1}},[o,t]),e.jsx(M,{theme:o.theme,children:e.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",children:[e.jsx(L,{title:h,description:p}),e.jsx(N,{client:o,questions:s==null?void 0:s.questions,isLoading:i,productId:t,productTitle:a,selectedVariantId:n}),l&&e.jsx(b,{client:o,placeholder:c,productId:t,productTitle:a,selectedVariantId:n})]})})};d.DialogInput=b,d.DialogProductBlock=j,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+(function(g,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):(g=typeof globalThis<"u"?globalThis:g||self,s(g["dialog-react"]={},g["react/jsx-runtime"],g.React,g.dialogSdk,g.ReactDOM))})(this,(function(g,s,d,p,N){"use strict";const P=({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})]}),m=({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"})})})]}),E=({client:e,questions:t,productId:r,productTitle:o,selectedVariantId:i})=>{const l=n=>{e.sendProductMessage({productId:r,productTitle:o,selectedVariantId:i,question:n,fromQuestionSuggestion:!0})};return s.jsx(s.Fragment,{children:t.map(n=>s.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>l(n.question),children:[s.jsx(m,{color:e.theme.primaryColor}),s.jsx("span",{className:"dialog-block-suggestions-item-label",children:n.question})]},n.question))})},L=()=>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(L,{}):s.jsx(E,{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"})}),C=({client:e,placeholder:t="Ask anything...",productId:r,productTitle:o,selectedVariantId:i})=>{const l=d.useRef(null),[n,a]=d.useState(""),c=()=>{var u;(u=l.current)==null||u.focus()},h=()=>{const u=n;u.trim()&&(e.sendProductMessage({productId:r,productTitle:o,selectedVariantId:i,question:u,fromQuestionSuggestion:!0}),a(""))},b=u=>{u.key==="Enter"&&h()};return s.jsxs("div",{className:"dialog-input-wrapper",onClick:c,children:[s.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:l,value:n,onChange:u=>a(u.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:t,onKeyDown:b}),s.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!n.trim(),onClick:h,children:s.jsx(A,{color:e.theme.ctaTextColor})})]})},y=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),D=e=>{if(!e)return;const t=document.body;Object.keys(e).forEach(r=>{const o=r,i=y(r);if(e[o]!==void 0){if(typeof e[o]=="object"){Object.keys(e[o]).forEach(l=>{var a;const n=l;if(n!==void 0){const c=y(l),h=e[o];t.style.setProperty(`--dialog-theme-${i}-${c}`,(a=h[n])==null?void 0:a.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&&D(e)},[e]),s.jsx(s.Fragment,{children:t})),I=({client:e,productId:t,productTitle:r,selectedVariantId:o,enableInput:i=!0})=>{const[l,n]=d.useState(!0),[a,c]=d.useState(void 0);d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.2.1"}),p.addAuditCapability("pdp-block")},[]);const h=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 f;return p.resolveTextDirection((f=e.getLocalizationInformations())==null?void 0:f.languageCode)},[e]);return d.useEffect(()=>{let f=!0;return(async()=>{n(!0),c(void 0);try{const v=await e.getSuggestions(t);f&&c(v)}catch(v){console.error("error",v)}finally{f&&n(!1)}})(),()=>{f=!1}},[e,t]),s.jsx(M,{theme:e.theme,children:s.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:S,children:[s.jsx(P,{title:h,description:b}),s.jsx(_,{client:e,questions:a==null?void 0:a.questions,isLoading:l,productId:t,productTitle:r,selectedVariantId:o}),i&&s.jsx(C,{client:e,placeholder:u,productId:t,productTitle:r,selectedVariantId:o})]})})},F=()=>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"})}),O="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",T=({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:O,fill:e})}),B=({controller:e,placeholder:t="Search products...",autoFocus:r=!1,submitAriaLabel:o="Search"})=>{const[i,l]=d.useState(""),n=a=>{a.preventDefault(),e.submit(i)};return s.jsxs("form",{className:"dialog-search-bar",role:"search",onSubmit:n,children:[s.jsxs("div",{className:"dialog-search-bar-field",children:[s.jsx("span",{className:"dialog-search-bar-icon",children:s.jsx(T,{})}),s.jsx("input",{type:"text",name:"dialog-search-query",className:"dialog-search-bar-input",value:i,"aria-label":t,placeholder:t,autoFocus:r,onChange:a=>{l(a.target.value),e.setQuery(a.target.value)}})]}),s.jsx("button",{type:"submit",className:"dialog-search-bar-submit","aria-label":o,children:s.jsx(F,{})})]})},w=({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"})]})},q=e=>{if(e===void 0)return"";const{min:t,max:r}=e,o=({amount:i,currencyCode:l})=>new Intl.NumberFormat(void 0,{style:"currency",currency:l}).format(Number(i));try{return t.amount===r.amount?o(t):`${o(t)} – ${o(r)}`}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})=>{const o=d.useRef(null);d.useEffect(()=>{o.current!==null&&e.observeResult(o.current,r)},[e,t,r]);const i=u=>{const S=u.metaKey||u.ctrlKey||u.shiftKey||u.altKey;e.selectResult(r,{navigate:!S})&&u.preventDefault()},l=u=>{u.button===1&&e.selectResult(r,{navigate:!1})},{product:n}=t,a=n.title??n.id,c=q(n.priceRange),h=n.url===void 0?void 0:x(n.url),b=s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"dialog-search-card-image",children:n.imageUrl!==void 0&&s.jsx("img",{src:n.imageUrl,alt:a,loading:"lazy"})}),s.jsxs("div",{className:"dialog-search-card-info",children:[s.jsx("p",{className:"dialog-search-card-title",children:a}),c!==""&&s.jsx("p",{className:"dialog-search-card-price",children:c})]})]});return s.jsx("li",{ref:o,className:"dialog-search-card",children:h===void 0?s.jsx("div",{className:"dialog-search-card-body",children:b}):s.jsx("a",{className:"dialog-search-card-body",href:h,onClick:i,onAuxClick:l,children:b})})},H=e=>{const t=d.useRef(null),[r,o]=d.useState(void 0),[i,l]=d.useState(0);return d.useLayoutEffect(()=>{if(!e)return;const n=()=>{const a=t.current;if(a===null)return;const c=a.previousElementSibling??a,{top:h,bottom:b,left:u,width:S}=c.getBoundingClientRect();l(window.innerHeight),o(f=>f!==void 0&&f.top===h&&f.bottom===b&&f.left===u&&f.width===S?f:{top:h,bottom:b,left:u,width:S})};return n(),window.addEventListener("scroll",n,!0),window.addEventListener("resize",n),()=>{window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",n)}},[e]),{anchorRef:t,rect:r,viewportHeight:i}},V=(e,t)=>{const[r,o]=d.useState(!1),i=d.useRef(null),l=e.status!==p.SearchStatus.IDLE&&!r;return d.useEffect(()=>{o(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const n=a=>{var S,f;const c=a.target;if(!(c instanceof Node))return;const h=(S=t.current)==null?void 0:S.previousElementSibling,b=((f=i.current)==null?void 0:f.contains(c))??!1,u=(h==null?void 0:h.contains(c))??!1;!b&&!u&&o(!0)};return document.addEventListener("pointerdown",n),()=>document.removeEventListener("pointerdown",n)},[l,t]),d.useEffect(()=>{var c;const n=(c=t.current)==null?void 0:c.previousElementSibling;if(n==null)return;const a=()=>o(!1);return n.addEventListener("focusin",a),()=>n.removeEventListener("focusin",a)},[t]),{isOpen:l,panelRef:i}},K=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.",$=(e,t)=>e.bottom>0&&e.top<t,X=(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)}},j=(e,t)=>{const r=t.response;switch(t.status){case p.SearchStatus.LOADING:return s.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",t.query,"”…"]});case p.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:K(t.error)}),s.jsx("button",{type:"button",className:"dialog-search-retry",onClick:()=>e.retry(),children:"Retry"})]});case p.SearchStatus.EMPTY:return s.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:s.jsxs(s.Fragment,{children:[s.jsxs("p",{role:"status",className:"dialog-search-status",children:[r.nbHits," result",r.nbHits>1?"s":""]}),s.jsx("ul",{className:"dialog-search-results",children:r.hits.map((o,i)=>s.jsx(k,{controller:e,hit:o,index:i},o.id))}),s.jsx(w,{controller:e,state:t})]});default:return null}},W=({controller:e,state:t})=>{const r=t.status!==p.SearchStatus.IDLE,{anchorRef:o,rect:i,viewportHeight:l}=H(r),{isOpen:n,panelRef:a}=V(t,o);return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:o}),n&&i!==void 0&&$(i,l)&&N.createPortal(s.jsx("div",{ref:a,className:"dialog-search-panel",style:X(i,l),children:j(e,t)}),document.body)]})},Q={status:p.SearchStatus.IDLE,query:"",page:0},U=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:c,surface:h="search_page",...b}=t.current;r.current=p.createSearchController({search:(u,S)=>c.search(u,S),analytics:{surface:h,trackViewSearchResults:u=>c.trackViewSearchResults(u),trackSelectSearchResult:u=>c.trackSelectSearchResult(u)},...b})}return r.current},[]),i=d.useRef(void 0);i.current??(i.current={setQuery:c=>o().setQuery(c),submit:c=>o().submit(c),setPage:c=>o().setPage(c),retry:()=>o().retry(),observeResult:(c,h)=>o().observeResult(c,h),selectResult:(c,h)=>o().selectResult(c,h),subscribe:c=>o().subscribe(c),getState:()=>o().getState(),dispose:()=>{var c;(c=r.current)==null||c.dispose(),r.current=void 0}}),d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.2.1"});const c=o();return()=>{c.dispose(),r.current===c&&(r.current=void 0)}},[o]);const l=d.useCallback(c=>o().subscribe(c),[o]),n=d.useCallback(()=>o().getState(),[o]),a=d.useSyncExternalStore(l,n,()=>Q);return{controller:i.current,state:a}};g.DialogInput=C,g.DialogProductBlock=I,g.DialogSearchBar=B,g.DialogSearchPagination=w,g.DialogSearchProductCard=k,g.DialogSearchResults=W,g.useDialogSearch=U,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));

package/dist/icons/ArrowUpIcon.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const ArrowUpIcon: FC;

package/dist/icons/ShurikenIcon.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface ShurikenIconProps {
+    color?: string;
+}
+export declare const ShurikenIcon: FC<ShurikenIconProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askdialog/dialog-react",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "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.3.0"
+    "@askdialog/dialog-sdk": "2.8.1"
   },
   "author": "Dialog",
   "publishConfig": {