@envive-ai/react-widgets 0.1.2 → 0.1.3

package/dist/SearchZeroState/SearchOverlay.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_overlayHostLocator = require('./overlay/overlayHostLocator.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+let react_dom = require("react-dom");
+
+//#region src/SearchZeroState/SearchOverlay.tsx
+const SearchOverlay = react.default.forwardRef(({ children, className, dataTestId, role, ariaModal, ariaLabelledby, id, usingPortal }, ref) => {
+	const overlayClasses = (0, classnames.default)("spiffy-search-overlay", "spiffy-tw-fixed", "spiffy-tw-top-[0]", "spiffy-tw-left-[0]", "spiffy-tw-h-[100vh]", "spiffy-tw-w-full", "spiffy-h-[calc(100%-1rem)]", "spiffy-tw-px-[24px] spiffy-tw-pt-[16px] sm:spiffy-tw-px-[41px] sm:spiffy-tw-pt-[40px]", "spiffy-tw-z-[2147483647]", "spiffy-tw-overflow-y-auto", "spiffy-tw-overflow-x-hidden", className);
+	const overlayContentClasses = (0, classnames.default)("spiffy-search-overlay-content", "spiffy-tw-flex spiffy-tw-flex-col", "spiffy-tw-min-h-full", className);
+	const node = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		ref,
+		className: overlayClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: overlayContentClasses,
+			"data-testid": dataTestId,
+			role,
+			"aria-modal": ariaModal,
+			"aria-labelledby": ariaLabelledby,
+			id,
+			children
+		})
+	});
+	if (!usingPortal) return node;
+	try {
+		return (0, react_dom.createPortal)(node, require_overlayHostLocator.getOverlayPortalTarget());
+	} catch (err) {
+		return node;
+	}
+});
+SearchOverlay.displayName = "SearchOverlay";
+
+//#endregion
+exports.SearchOverlay = SearchOverlay;

package/dist/SearchZeroState/SearchOverlay.js

@@ -0,0 +1,39 @@
+import { getOverlayPortalTarget } from "./overlay/overlayHostLocator.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { createPortal } from "react-dom";
+
+//#region src/SearchZeroState/SearchOverlay.tsx
+const SearchOverlay = React.forwardRef(({ children, className, dataTestId, role, ariaModal, ariaLabelledby, id, usingPortal }, ref) => {
+	const overlayClasses = classNames("spiffy-search-overlay", "spiffy-tw-fixed", "spiffy-tw-top-[0]", "spiffy-tw-left-[0]", "spiffy-tw-h-[100vh]", "spiffy-tw-w-full", "spiffy-h-[calc(100%-1rem)]", "spiffy-tw-px-[24px] spiffy-tw-pt-[16px] sm:spiffy-tw-px-[41px] sm:spiffy-tw-pt-[40px]", "spiffy-tw-z-[2147483647]", "spiffy-tw-overflow-y-auto", "spiffy-tw-overflow-x-hidden", className);
+	const overlayContentClasses = classNames("spiffy-search-overlay-content", "spiffy-tw-flex spiffy-tw-flex-col", "spiffy-tw-min-h-full", className);
+	const node = /* @__PURE__ */ jsx(motion.div, {
+		ref,
+		className: overlayClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ jsx("div", {
+			className: overlayContentClasses,
+			"data-testid": dataTestId,
+			role,
+			"aria-modal": ariaModal,
+			"aria-labelledby": ariaLabelledby,
+			id,
+			children
+		})
+	});
+	if (!usingPortal) return node;
+	try {
+		return createPortal(node, getOverlayPortalTarget());
+	} catch (err) {
+		return node;
+	}
+});
+SearchOverlay.displayName = "SearchOverlay";
+
+//#endregion
+export { SearchOverlay };

package/dist/SearchZeroState/SearchZeroState.cjs

@@ -0,0 +1,173 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../packages/components/dist/components/Typography/Typography.cjs');
+require('../packages/components/dist/components/Typography/index.cjs');
+const require_SuggestionBar = require('../SuggestionBar/SuggestionBar.cjs');
+require('../SuggestionBar/index.cjs');
+const require_Sparkles = require('../packages/icons/dist/Sparkles.cjs');
+const require_searchInputVariants = require('../packages/components/dist/components/SearchInput/searchInputVariants.cjs');
+const require_SearchInput = require('../packages/components/dist/components/SearchInput/SearchInput.cjs');
+const require_SearchInputForm = require('../packages/components/dist/components/SearchInputForm/SearchInputForm.cjs');
+require('../packages/components/dist/components/SearchInputForm/index.cjs');
+require('../packages/components/dist/components/SearchInput/index.cjs');
+const require_IconCloseVariant = require('../packages/icons/dist/IconCloseVariant.cjs');
+const require_SearchOverlay = require('./SearchOverlay.cjs');
+const require_zeroStateSearchVariants = require('./zeroStateSearchVariants.cjs');
+const require_SearchIcon = require('./SearchIcon.cjs');
+const require_RecommendedProducts = require('./components/RecommendedProducts.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+let __envive_ai_react_hooks_hooks_Search = require("@envive-ai/react-hooks/hooks/Search");
+let __envive_ai_react_hooks_hooks_AmplitudeOperations = require("@envive-ai/react-hooks/hooks/AmplitudeOperations");
+let __envive_ai_react_hooks_types = require("@envive-ai/react-hooks/types");
+let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+
+//#region src/SearchZeroState/SearchZeroState.tsx
+const SEARCH_ENTRYPOINT_INPUT_TESTID = "spiffy-search-entrypoint-input";
+const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
+	console.log("SearchZeroState: widgetConfig", widgetConfig);
+	const { searchZeroStateVariant, searchInputVariant, searchIconVariant, searchIconSize = 24, searchBoxPlaceholder, layout, compactLabel, initialSuggestions = [], animationSpeed = "standard", suggestionButtonConfig, includeSubtitle, usingPortal = false } = widgetConfig;
+	const { variant: suggestionButtonVariant, hoverVariant: suggestionButtonHoverVariant, borderRadius: suggestionButtonBorderRadius } = suggestionButtonConfig;
+	const [isOpen, setIsOpen] = (0, react.useState)(!!initialIsOpen);
+	const searchInputRef = (0, react.useRef)(null);
+	const searchInput = (0, __envive_ai_react_hooks_hooks_Search.useSearch)({ allowRedirect: true });
+	const { track } = (0, __envive_ai_react_hooks_hooks_AmplitudeOperations.useAmplitudeTracking)();
+	const { recommendedProductsHeading, searchOverlayHeading, productCardConfig, merchantShortName, recommendedProducts, searchText, autocompleteResults, focusedIndex, focusedOptionId, shouldShowAutocomplete, onSearchInputChange, onSearchInputFocus, onSearchInputBlur, onKeyDown, onAutocompleteSelect, onSubmitSearch, resetSearch } = searchInput;
+	const { overlayBackgroundClasses, sparklesIconColor } = require_zeroStateSearchVariants.searchZeroStateVariantClasses[searchZeroStateVariant && require_zeroStateSearchVariants.searchZeroStateVariantClasses[searchZeroStateVariant] ? searchZeroStateVariant : "backgroundTertiary"];
+	const { searchInputIconColor } = require_searchInputVariants.searchInputVariantClasses[searchInputVariant];
+	const handleOpen = () => setIsOpen(true);
+	const handleClose = () => setIsOpen(false);
+	(0, react.useEffect)(() => {
+		if (isOpen) track(__envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.SearchComponentVisible, { eventProps: { search_component: __envive_ai_react_hooks_application_models.SpiffyWidgets.SearchZeroState } });
+	}, [isOpen, track]);
+	(0, react.useEffect)(() => {
+		if (isOpen) {
+			resetSearch();
+			searchInputRef.current?.focus();
+		}
+	}, [isOpen, resetSearch]);
+	const submitSearchString = (0, react.useCallback)((query) => {
+		onSearchInputChange(query);
+		if (onSubmitSearch && query.trim()) {
+			onSubmitSearch();
+			setIsOpen(false);
+		}
+	}, [onSubmitSearch, onSearchInputChange]);
+	const searchChange = (value) => {
+		onSearchInputChange(value);
+	};
+	if (!isOpen) {
+		if (layout === "icon") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchIcon.SearchIcon, {
+			entryPointRef,
+			size: searchIconSize,
+			variant: searchIconVariant,
+			label: compactLabel,
+			onClick: handleOpen,
+			color: searchInputIconColor
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchInput.SearchInput, {
+			value: "",
+			onChange: () => {},
+			placeholder: searchBoxPlaceholder,
+			suggestions: [],
+			onFocus: handleOpen,
+			searchInputVariant,
+			dataTestId: SEARCH_ENTRYPOINT_INPUT_TESTID
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SearchOverlay.SearchOverlay, {
+		role: "dialog",
+		ariaModal: true,
+		ariaLabelledby: "global-search-title",
+		className: overlayBackgroundClasses,
+		usingPortal,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "spiffy-tw-relative spiffy-tw-mb-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "spiffy-tw-flex spiffy-tw-items-center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+						id: "global-search-title",
+						variant: "t3",
+						children: searchOverlayHeading
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sparkles.Sparkles_default, {
+						className: "spiffy-tw-ml-2 spiffy-tw-h-[36px] spiffy-tw-w-[24px] sm:spiffy-tw-h-[45px] sm:spiffy-tw-w-[36px]",
+						color: sparklesIconColor,
+						stroke: "2px"
+					})]
+				}), includeSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+					variant: "body2",
+					children: "Go ahead, get as specific as you like..."
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick: handleClose,
+				className: "spiffy-tw-absolute spiffy-tw-right-4 spiffy-tw-top-4 sm:spiffy-tw-right-8 sm:spiffy-tw-top-8",
+				"aria-label": "Close search",
+				type: "button",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconCloseVariant.IconCloseVariant_default, {
+					className: "spiffy-tw-h-[20px] spiffy-tw-w-[20px] sm:spiffy-tw-h-[28px] sm:spiffy-tw-w-[28px]",
+					strokeWidth: "2px"
+				})
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchInputForm.SearchInputForm, {
+				searchInputRef,
+				searchInputVariant,
+				searchText,
+				autocompleteResults,
+				searchBoxPlaceholder,
+				focusedOptionId,
+				shouldShowAutocomplete,
+				focusedIndex,
+				onKeyDown,
+				onAutocompleteSelect,
+				onSearchInputChange: searchChange,
+				onSearchSubmit: () => submitSearchString,
+				onSearchInputFocus,
+				onSearchInputBlur
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.AnimatePresence, { children: [initialSuggestions && initialSuggestions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: { duration: .2 },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "spiffy-tw-mt-6",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionBar.SuggestionBar, {
+						id: "global-search-suggestions",
+						locationForMetrics: __envive_ai_react_hooks_types.SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+						buttonTexts: initialSuggestions,
+						buttonBorderRadius: suggestionButtonBorderRadius,
+						buttonVariation: suggestionButtonVariant ?? "primary",
+						hoverButtonVariation: suggestionButtonHoverVariant ?? "primary",
+						animationSpeed,
+						handleReply: (message) => {
+							if (message.type === __envive_ai_react_hooks_application_models.MessageType.QueryTyped && message.metadata?.content) {
+								track(__envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.SearchZeroStateSuggestionClicked, { eventProps: {
+									queryText: message.metadata.content,
+									timestamp: (/* @__PURE__ */ new Date()).toISOString()
+								} });
+								submitSearchString(message.metadata.content);
+							}
+						},
+						twoRowsOnMobile: true
+					})
+				})
+			}), recommendedProducts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "spiffy-tw-mt-[40px]",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RecommendedProducts.RecommendedProducts, {
+					retrievedProducts: recommendedProducts,
+					merchantShortName,
+					productCardConfig,
+					productGridVariant: "standard",
+					heading: recommendedProductsHeading
+				})
+			})] })
+		]
+	}) });
+};
+
+//#endregion
+exports.SearchZeroState = SearchZeroState;

package/dist/SearchZeroState/SearchZeroState.d.cts

@@ -0,0 +1,7 @@
+import { SearchZeroStateProps } from "./types.cjs";
+import React from "react";
+
+//#region src/SearchZeroState/SearchZeroState.d.ts
+declare const SearchZeroState: React.FC<SearchZeroStateProps>;
+//#endregion
+export { SearchZeroState };

package/dist/SearchZeroState/SearchZeroState.d.ts

@@ -0,0 +1,7 @@
+import { SearchZeroStateProps } from "./types.js";
+import React from "react";
+
+//#region src/SearchZeroState/SearchZeroState.d.ts
+declare const SearchZeroState: React.FC<SearchZeroStateProps>;
+//#endregion
+export { SearchZeroState };

package/dist/SearchZeroState/SearchZeroState.js

@@ -0,0 +1,171 @@
+import { Typography } from "../packages/components/dist/components/Typography/Typography.js";
+import "../packages/components/dist/components/Typography/index.js";
+import { SuggestionBar } from "../SuggestionBar/SuggestionBar.js";
+import "../SuggestionBar/index.js";
+import { Sparkles_default } from "../packages/icons/dist/Sparkles.js";
+import { searchInputVariantClasses } from "../packages/components/dist/components/SearchInput/searchInputVariants.js";
+import { SearchInput } from "../packages/components/dist/components/SearchInput/SearchInput.js";
+import { SearchInputForm } from "../packages/components/dist/components/SearchInputForm/SearchInputForm.js";
+import "../packages/components/dist/components/SearchInputForm/index.js";
+import "../packages/components/dist/components/SearchInput/index.js";
+import { IconCloseVariant_default } from "../packages/icons/dist/IconCloseVariant.js";
+import { SearchOverlay } from "./SearchOverlay.js";
+import { searchZeroStateVariantClasses } from "./zeroStateSearchVariants.js";
+import { SearchIcon } from "./SearchIcon.js";
+import { RecommendedProducts } from "./components/RecommendedProducts.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { MessageType, SpiffyWidgets } from "@envive-ai/react-hooks/application/models";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import { useSearch } from "@envive-ai/react-hooks/hooks/Search";
+import { useAmplitudeTracking } from "@envive-ai/react-hooks/hooks/AmplitudeOperations";
+import { SuggestionBarLocationForMetrics } from "@envive-ai/react-hooks/types";
+import { SpiffyMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+
+//#region src/SearchZeroState/SearchZeroState.tsx
+const SEARCH_ENTRYPOINT_INPUT_TESTID = "spiffy-search-entrypoint-input";
+const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
+	console.log("SearchZeroState: widgetConfig", widgetConfig);
+	const { searchZeroStateVariant, searchInputVariant, searchIconVariant, searchIconSize = 24, searchBoxPlaceholder, layout, compactLabel, initialSuggestions = [], animationSpeed = "standard", suggestionButtonConfig, includeSubtitle, usingPortal = false } = widgetConfig;
+	const { variant: suggestionButtonVariant, hoverVariant: suggestionButtonHoverVariant, borderRadius: suggestionButtonBorderRadius } = suggestionButtonConfig;
+	const [isOpen, setIsOpen] = useState(!!initialIsOpen);
+	const searchInputRef = useRef(null);
+	const searchInput = useSearch({ allowRedirect: true });
+	const { track } = useAmplitudeTracking();
+	const { recommendedProductsHeading, searchOverlayHeading, productCardConfig, merchantShortName, recommendedProducts, searchText, autocompleteResults, focusedIndex, focusedOptionId, shouldShowAutocomplete, onSearchInputChange, onSearchInputFocus, onSearchInputBlur, onKeyDown, onAutocompleteSelect, onSubmitSearch, resetSearch } = searchInput;
+	const { overlayBackgroundClasses, sparklesIconColor } = searchZeroStateVariantClasses[searchZeroStateVariant && searchZeroStateVariantClasses[searchZeroStateVariant] ? searchZeroStateVariant : "backgroundTertiary"];
+	const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
+	const handleOpen = () => setIsOpen(true);
+	const handleClose = () => setIsOpen(false);
+	useEffect(() => {
+		if (isOpen) track(SpiffyMetricsEventName.SearchComponentVisible, { eventProps: { search_component: SpiffyWidgets.SearchZeroState } });
+	}, [isOpen, track]);
+	useEffect(() => {
+		if (isOpen) {
+			resetSearch();
+			searchInputRef.current?.focus();
+		}
+	}, [isOpen, resetSearch]);
+	const submitSearchString = useCallback((query) => {
+		onSearchInputChange(query);
+		if (onSubmitSearch && query.trim()) {
+			onSubmitSearch();
+			setIsOpen(false);
+		}
+	}, [onSubmitSearch, onSearchInputChange]);
+	const searchChange = (value) => {
+		onSearchInputChange(value);
+	};
+	if (!isOpen) {
+		if (layout === "icon") return /* @__PURE__ */ jsx(SearchIcon, {
+			entryPointRef,
+			size: searchIconSize,
+			variant: searchIconVariant,
+			label: compactLabel,
+			onClick: handleOpen,
+			color: searchInputIconColor
+		});
+		return /* @__PURE__ */ jsx(SearchInput, {
+			value: "",
+			onChange: () => {},
+			placeholder: searchBoxPlaceholder,
+			suggestions: [],
+			onFocus: handleOpen,
+			searchInputVariant,
+			dataTestId: SEARCH_ENTRYPOINT_INPUT_TESTID
+		});
+	}
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(SearchOverlay, {
+		role: "dialog",
+		ariaModal: true,
+		ariaLabelledby: "global-search-title",
+		className: overlayBackgroundClasses,
+		usingPortal,
+		children: [
+			/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "spiffy-tw-relative spiffy-tw-mb-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "spiffy-tw-flex spiffy-tw-items-center",
+					children: [/* @__PURE__ */ jsx(Typography, {
+						id: "global-search-title",
+						variant: "t3",
+						children: searchOverlayHeading
+					}), /* @__PURE__ */ jsx(Sparkles_default, {
+						className: "spiffy-tw-ml-2 spiffy-tw-h-[36px] spiffy-tw-w-[24px] sm:spiffy-tw-h-[45px] sm:spiffy-tw-w-[36px]",
+						color: sparklesIconColor,
+						stroke: "2px"
+					})]
+				}), includeSubtitle && /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					children: "Go ahead, get as specific as you like..."
+				})]
+			}), /* @__PURE__ */ jsx("button", {
+				onClick: handleClose,
+				className: "spiffy-tw-absolute spiffy-tw-right-4 spiffy-tw-top-4 sm:spiffy-tw-right-8 sm:spiffy-tw-top-8",
+				"aria-label": "Close search",
+				type: "button",
+				children: /* @__PURE__ */ jsx(IconCloseVariant_default, {
+					className: "spiffy-tw-h-[20px] spiffy-tw-w-[20px] sm:spiffy-tw-h-[28px] sm:spiffy-tw-w-[28px]",
+					strokeWidth: "2px"
+				})
+			})] }),
+			/* @__PURE__ */ jsx(SearchInputForm, {
+				searchInputRef,
+				searchInputVariant,
+				searchText,
+				autocompleteResults,
+				searchBoxPlaceholder,
+				focusedOptionId,
+				shouldShowAutocomplete,
+				focusedIndex,
+				onKeyDown,
+				onAutocompleteSelect,
+				onSearchInputChange: searchChange,
+				onSearchSubmit: () => submitSearchString,
+				onSearchInputFocus,
+				onSearchInputBlur
+			}),
+			/* @__PURE__ */ jsxs(AnimatePresence, { children: [initialSuggestions && initialSuggestions.length > 0 && /* @__PURE__ */ jsx(motion.div, {
+				className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: { duration: .2 },
+				children: /* @__PURE__ */ jsx("div", {
+					className: "spiffy-tw-mt-6",
+					children: /* @__PURE__ */ jsx(SuggestionBar, {
+						id: "global-search-suggestions",
+						locationForMetrics: SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP,
+						buttonTexts: initialSuggestions,
+						buttonBorderRadius: suggestionButtonBorderRadius,
+						buttonVariation: suggestionButtonVariant ?? "primary",
+						hoverButtonVariation: suggestionButtonHoverVariant ?? "primary",
+						animationSpeed,
+						handleReply: (message) => {
+							if (message.type === MessageType.QueryTyped && message.metadata?.content) {
+								track(SpiffyMetricsEventName.SearchZeroStateSuggestionClicked, { eventProps: {
+									queryText: message.metadata.content,
+									timestamp: (/* @__PURE__ */ new Date()).toISOString()
+								} });
+								submitSearchString(message.metadata.content);
+							}
+						},
+						twoRowsOnMobile: true
+					})
+				})
+			}), recommendedProducts.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "spiffy-tw-mt-[40px]",
+				children: /* @__PURE__ */ jsx(RecommendedProducts, {
+					retrievedProducts: recommendedProducts,
+					merchantShortName,
+					productCardConfig,
+					productGridVariant: "standard",
+					heading: recommendedProductsHeading
+				})
+			})] })
+		]
+	}) });
+};
+
+//#endregion
+export { SearchZeroState };

package/dist/SearchZeroState/SearchZeroStateWidget.cjs

@@ -0,0 +1,23 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_SearchZeroState = require('./SearchZeroState.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_hooks_hooks_NewOrgConfig = require("@envive-ai/react-hooks/hooks/NewOrgConfig");
+
+//#region src/SearchZeroState/SearchZeroStateWidget.tsx
+const SearchZeroStateWidget = ({ initialIsOpen, widgetConfigId = "searchEntryPointIcon", entryPointRef }) => {
+	const newConfig = (0, __envive_ai_react_hooks_hooks_NewOrgConfig.useNewOrgConfig)();
+	const widgetConfig = (0, react.useMemo)(() => {
+		if (newConfig && newConfig.frontendConfig?.widgetConfigs) return { ...(newConfig.frontendConfig?.widgetConfigs).find((widget) => widget.key === widgetConfigId).config };
+		return null;
+	}, [newConfig, widgetConfigId]);
+	if (!widgetConfig) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchZeroState.SearchZeroState, {
+		widgetConfig,
+		initialIsOpen,
+		entryPointRef
+	});
+};
+
+//#endregion
+exports.SearchZeroStateWidget = SearchZeroStateWidget;

package/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/SearchZeroState/SearchZeroStateWidget.d.ts
+type SearchZeroStateWidgetProps = {
+  initialIsOpen: boolean;
+  widgetConfigId?: string;
+  entryPointRef: React.Ref<HTMLButtonElement>;
+};
+declare const SearchZeroStateWidget: ({
+  initialIsOpen,
+  widgetConfigId,
+  entryPointRef
+}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SearchZeroStateWidget };

package/dist/SearchZeroState/SearchZeroStateWidget.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/SearchZeroState/SearchZeroStateWidget.d.ts
+type SearchZeroStateWidgetProps = {
+  initialIsOpen: boolean;
+  widgetConfigId?: string;
+  entryPointRef: React.Ref<HTMLButtonElement>;
+};
+declare const SearchZeroStateWidget: ({
+  initialIsOpen,
+  widgetConfigId,
+  entryPointRef
+}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SearchZeroStateWidget };

package/dist/SearchZeroState/SearchZeroStateWidget.js

@@ -0,0 +1,22 @@
+import { SearchZeroState } from "./SearchZeroState.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useNewOrgConfig } from "@envive-ai/react-hooks/hooks/NewOrgConfig";
+
+//#region src/SearchZeroState/SearchZeroStateWidget.tsx
+const SearchZeroStateWidget = ({ initialIsOpen, widgetConfigId = "searchEntryPointIcon", entryPointRef }) => {
+	const newConfig = useNewOrgConfig();
+	const widgetConfig = useMemo(() => {
+		if (newConfig && newConfig.frontendConfig?.widgetConfigs) return { ...(newConfig.frontendConfig?.widgetConfigs).find((widget) => widget.key === widgetConfigId).config };
+		return null;
+	}, [newConfig, widgetConfigId]);
+	if (!widgetConfig) return null;
+	return /* @__PURE__ */ jsx(SearchZeroState, {
+		widgetConfig,
+		initialIsOpen,
+		entryPointRef
+	});
+};
+
+//#endregion
+export { SearchZeroStateWidget };

package/dist/SearchZeroState/components/RecommendedProducts.cjs

@@ -0,0 +1,74 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../../packages/components/dist/components/Typography/Typography.cjs');
+require('../../packages/components/dist/components/Typography/index.cjs');
+const require_ProductGrid = require('../../packages/components/dist/components/ProductGrid/ProductGrid.cjs');
+require('../../packages/components/dist/components/ProductGrid/index.cjs');
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+let __envive_ai_react_hooks_hooks_AmplitudeOperations = require("@envive-ai/react-hooks/hooks/AmplitudeOperations");
+let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+
+//#region src/SearchZeroState/components/RecommendedProducts.tsx
+const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCardConfig = {
+	variant: "minimal",
+	hoverVariant: "none",
+	layoutVariant: "square"
+}, productGridVariant = "square", heading }) => {
+	const { track } = (0, __envive_ai_react_hooks_hooks_AmplitudeOperations.useAmplitudeTracking)();
+	const containerClasses = (0, classnames.default)("spiffy-tw-justify-center", "spiffy-tw-overflow-hidden", "spiffy-tw-bg-white", "spiffy-tw-relative", "spiffy-tw-px-[24px]", "spiffy-tw-py-[16px]", "sm:spiffy-tw-px-[41px]", "sm:spiffy-tw-py-[40px]");
+	const titleContainerClasses = (0, classnames.default)("spiffy-tw-w-full", "spiffy-tw-border-b", "spiffy-tw-border-solid", "spiffy-tw-border-b-[--spiffy-colors-text-accent]", "spiffy-tw-pb-[8px]", "spiffy-tw-mb-[16px]");
+	const productGridClasses = (0, classnames.default)("spiffy-tw-grid", "spiffy-tw-justify-items-stretch", "spiffy-tw-grid-cols-2", "md:spiffy-tw-grid-cols-3", "lg:spiffy-tw-grid-cols-4", "spiffy-tw-gap-x-[4px]", "spiffy-tw-gap-y-[24px]", "spiffy-tw-h-full", "spiffy-tw-w-full", "spiffy-tw-items-stretch");
+	if (retrievedProducts == null || retrievedProducts.length === 0) return null;
+	const handleProductClick = (product, index) => {
+		track(__envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ProductCardClicked, {
+			eventProps: {
+				url: product.url,
+				search_response_id: void 0,
+				product_response_id: product.response_id,
+				trigger_location: __envive_ai_react_hooks_application_models.ChatElementDisplayLocation.SEARCH_ZERO_STATE_SUGGESTED_PRODUCTS,
+				click_position: index != null ? index + 1 : null,
+				title: product.title,
+				original_price: product.original_price,
+				sale_price: product.sale_price,
+				average_rating: product.average_rating,
+				number_reviews: product.number_reviews
+			},
+			alsoSendToGoogleAnalytics: true
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+		className: containerClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		style: {
+			left: "50%",
+			right: "50%",
+			marginLeft: "-50vw",
+			marginRight: "-50vw",
+			width: "100vw"
+		},
+		children: [heading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: titleContainerClasses,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "h1",
+				className: "spiffy-tw-text-[--spiffy-colors-text-accent]",
+				children: heading
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductGrid.ProductGrid, {
+			productList: retrievedProducts,
+			productGridVariant,
+			productGridClasses,
+			productCardConfig,
+			merchantShortName,
+			onProductClick: handleProductClick
+		})]
+	});
+};
+
+//#endregion
+exports.RecommendedProducts = RecommendedProducts;