@envive-ai/react-widgets 0.1.2-arthur-2 → 0.1.2

package/dist/SearchResults/index.cjs

@@ -1,4 +1,4 @@
-const require_chunk = require('../chunk-DWy1uDak.cjs');
+const require_chunk = require('../chunk-DSlc6foC.cjs');
 let react = require("react");
 let jotai = require("jotai");
 let __envive_ai_react_hooks_atoms_globalSearch = require("@envive-ai/react-hooks/atoms/globalSearch");

package/dist/SearchZeroState/index.cjs

@@ -1,6 +1,6 @@
-const require_chunk = require('../chunk-DWy1uDak.cjs');
-const require_SuggestionBar = require('../SuggestionBar-BOThXJvJ.cjs');
-require('../SuggestionButtonContainer-BeWPpeQk.cjs');
+const require_chunk = require('../chunk-DSlc6foC.cjs');
+const require_SuggestionBar = require('../SuggestionBar-CK5aU2bb.cjs');
+require('../SuggestionButtonContainer-Dm38gJiJ.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let __envive_ai_react_hooks_hooks_NewOrgConfig = require("@envive-ai/react-hooks/hooks/NewOrgConfig");
@@ -20,11 +20,30 @@ let react_dom = require("react-dom");
 let __envive_ai_react_hooks_contexts_types = require("@envive-ai/react-hooks/contexts/types");
 let __envive_ai_react_toolkit_ProductGrid = require("@envive-ai/react-toolkit/ProductGrid");
 
-//#region ../icons/dist/jsx-runtime-Dg2m6dxZ.js
+//#region ../icons/dist/jsx-runtime-X3VJvQR_.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __commonJS = (cb, mod) => function() {
 	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n$2 = keys.length, key; i < n$2; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k$1) => from[k$1]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 /**
 * @license React
 * react.production.min.js
@@ -358,6 +377,7 @@ var require_react_production_min = /* @__PURE__ */ __commonJS({ "../../node_modu
 */
 var require_react_development = /* @__PURE__ */ __commonJS({ "../../node_modules/react/cjs/react.development.js": ((exports$1, module$1) => {
 	if (process.env.NODE_ENV !== "production") (function() {
+		"use strict";
 		if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(/* @__PURE__ */ new Error());
 		var ReactVersion = "18.3.1";
 		var REACT_ELEMENT_TYPE = Symbol.for("react.element");
@@ -1917,6 +1937,7 @@ var require_react_jsx_runtime_production_min = /* @__PURE__ */ __commonJS({ "../
 */
 var require_react_jsx_runtime_development = /* @__PURE__ */ __commonJS({ "../../node_modules/react/cjs/react-jsx-runtime.development.js": ((exports$1) => {
 	if (process.env.NODE_ENV !== "production") (function() {
+		"use strict";
 		var React$3 = require_react();
 		var REACT_ELEMENT_TYPE = Symbol.for("react.element");
 		var REACT_PORTAL_TYPE = Symbol.for("react.portal");
@@ -2600,7 +2621,7 @@ var require_jsx_runtime = /* @__PURE__ */ __commonJS({ "../../node_modules/react
 
 //#endregion
 //#region ../icons/dist/Sparkles.js
-var import_jsx_runtime$3 = require_jsx_runtime();
+var import_jsx_runtime$3 = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgSparkles = (props) => /* @__PURE__ */ (0, import_jsx_runtime$3.jsxs)("svg", {
 	width: 24,
 	height: 24,
@@ -2639,7 +2660,7 @@ var Sparkles_default = SvgSparkles;
 
 //#endregion
 //#region ../icons/dist/IconCloseVariant.js
-var import_jsx_runtime$2 = require_jsx_runtime();
+var import_jsx_runtime$2 = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgIconCloseVariant = (props) => /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("svg", {
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg",
@@ -2703,6 +2724,7 @@ const SearchOverlay = react.default.forwardRef(({ children, className, dataTestI
 		return node;
 	}
 });
+SearchOverlay.displayName = "SearchOverlay";
 
 //#endregion
 //#region src/SearchZeroState/zeroStateSearchVariants.ts
@@ -2723,7 +2745,7 @@ const searchZeroStateVariantClasses = {
 
 //#endregion
 //#region ../icons/dist/AiSearchBold.js
-var import_jsx_runtime$1 = require_jsx_runtime();
+var import_jsx_runtime$1 = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgAiSearchBold = (props) => /* @__PURE__ */ (0, import_jsx_runtime$1.jsxs)("svg", {
 	width: 32,
 	height: 32,
@@ -2757,7 +2779,7 @@ var AiSearchBold_default = SvgAiSearchBold;
 
 //#endregion
 //#region ../icons/dist/AiSearchThin.js
-var import_jsx_runtime = require_jsx_runtime();
+var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgAiSearchThin = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
 	width: 26,
 	height: 23,
@@ -2891,7 +2913,7 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 	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)();
+	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 } = searchZeroStateVariantClasses[searchZeroStateVariant && searchZeroStateVariantClasses[searchZeroStateVariant] ? searchZeroStateVariant : "backgroundTertiary"];
@@ -2952,7 +2974,7 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 						variant: "t3",
 						children: searchOverlayHeading
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sparkles_default, {
-						className: "sm:spiffy-tw-w-[36px] sm:spiffy-tw-h-[45px] spiffy-tw-w-[24px] spiffy-tw-h-[36px] spiffy-tw-ml-2",
+						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"
 					})]
@@ -2962,11 +2984,11 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				onClick: handleClose,
-				className: "spiffy-tw-absolute spiffy-tw-top-4 spiffy-tw-right-4 sm:spiffy-tw-top-8 sm:spiffy-tw-right-8 ",
+				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)(IconCloseVariant_default, {
-					className: "spiffy-tw-w-[20px] spiffy-tw-h-[20px] sm:spiffy-tw-w-[28px] sm:spiffy-tw-h-[28px]",
+					className: "spiffy-tw-h-[20px] spiffy-tw-w-[20px] sm:spiffy-tw-h-[28px] sm:spiffy-tw-w-[28px]",
 					strokeWidth: "2px"
 				})
 			})] }),
@@ -2987,7 +3009,7 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 				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-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+				className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				exit: { opacity: 0 },

package/dist/SearchZeroState/index.js

@@ -1,5 +1,5 @@
-import { t as SuggestionBar } from "../SuggestionBar-DeMmAK4M.js";
-import "../SuggestionButtonContainer-CZhOkZaJ.js";
+import { t as SuggestionBar } from "../SuggestionBar-BHAXhgcd.js";
+import "../SuggestionButtonContainer-s2e9YGW_.js";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNewOrgConfig } from "@envive-ai/react-hooks/hooks/NewOrgConfig";
 import classNames from "classnames";
@@ -17,11 +17,30 @@ import { createPortal } from "react-dom";
 import { ColorNames, colorVar } from "@envive-ai/react-hooks/contexts/types";
 import { ProductGrid } from "@envive-ai/react-toolkit/ProductGrid";
 
-//#region ../icons/dist/jsx-runtime-Dg2m6dxZ.js
+//#region ../icons/dist/jsx-runtime-X3VJvQR_.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __commonJS = (cb, mod) => function() {
 	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n$2 = keys.length, key; i < n$2; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k$1) => from[k$1]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 /**
 * @license React
 * react.production.min.js
@@ -355,6 +374,7 @@ var require_react_production_min = /* @__PURE__ */ __commonJS({ "../../node_modu
 */
 var require_react_development = /* @__PURE__ */ __commonJS({ "../../node_modules/react/cjs/react.development.js": ((exports, module) => {
 	if (process.env.NODE_ENV !== "production") (function() {
+		"use strict";
 		if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(/* @__PURE__ */ new Error());
 		var ReactVersion = "18.3.1";
 		var REACT_ELEMENT_TYPE = Symbol.for("react.element");
@@ -1914,6 +1934,7 @@ var require_react_jsx_runtime_production_min = /* @__PURE__ */ __commonJS({ "../
 */
 var require_react_jsx_runtime_development = /* @__PURE__ */ __commonJS({ "../../node_modules/react/cjs/react-jsx-runtime.development.js": ((exports) => {
 	if (process.env.NODE_ENV !== "production") (function() {
+		"use strict";
 		var React$1 = require_react();
 		var REACT_ELEMENT_TYPE = Symbol.for("react.element");
 		var REACT_PORTAL_TYPE = Symbol.for("react.portal");
@@ -2597,7 +2618,7 @@ var require_jsx_runtime = /* @__PURE__ */ __commonJS({ "../../node_modules/react
 
 //#endregion
 //#region ../icons/dist/Sparkles.js
-var import_jsx_runtime$3 = require_jsx_runtime();
+var import_jsx_runtime$3 = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgSparkles = (props) => /* @__PURE__ */ (0, import_jsx_runtime$3.jsxs)("svg", {
 	width: 24,
 	height: 24,
@@ -2636,7 +2657,7 @@ var Sparkles_default = SvgSparkles;
 
 //#endregion
 //#region ../icons/dist/IconCloseVariant.js
-var import_jsx_runtime$2 = require_jsx_runtime();
+var import_jsx_runtime$2 = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgIconCloseVariant = (props) => /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("svg", {
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg",
@@ -2700,6 +2721,7 @@ const SearchOverlay = React.forwardRef(({ children, className, dataTestId, role,
 		return node;
 	}
 });
+SearchOverlay.displayName = "SearchOverlay";
 
 //#endregion
 //#region src/SearchZeroState/zeroStateSearchVariants.ts
@@ -2720,7 +2742,7 @@ const searchZeroStateVariantClasses = {
 
 //#endregion
 //#region ../icons/dist/AiSearchBold.js
-var import_jsx_runtime$1 = require_jsx_runtime();
+var import_jsx_runtime$1 = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgAiSearchBold = (props) => /* @__PURE__ */ (0, import_jsx_runtime$1.jsxs)("svg", {
 	width: 32,
 	height: 32,
@@ -2754,7 +2776,7 @@ var AiSearchBold_default = SvgAiSearchBold;
 
 //#endregion
 //#region ../icons/dist/AiSearchThin.js
-var import_jsx_runtime = require_jsx_runtime();
+var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime());
 const SvgAiSearchThin = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
 	width: 26,
 	height: 23,
@@ -2888,7 +2910,7 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 	const { variant: suggestionButtonVariant, hoverVariant: suggestionButtonHoverVariant, borderRadius: suggestionButtonBorderRadius } = suggestionButtonConfig;
 	const [isOpen, setIsOpen] = useState(!!initialIsOpen);
 	const searchInputRef = useRef(null);
-	const searchInput = useSearch();
+	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"];
@@ -2949,7 +2971,7 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 						variant: "t3",
 						children: searchOverlayHeading
 					}), /* @__PURE__ */ jsx(Sparkles_default, {
-						className: "sm:spiffy-tw-w-[36px] sm:spiffy-tw-h-[45px] spiffy-tw-w-[24px] spiffy-tw-h-[36px] spiffy-tw-ml-2",
+						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"
 					})]
@@ -2959,11 +2981,11 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 				})]
 			}), /* @__PURE__ */ jsx("button", {
 				onClick: handleClose,
-				className: "spiffy-tw-absolute spiffy-tw-top-4 spiffy-tw-right-4 sm:spiffy-tw-top-8 sm:spiffy-tw-right-8 ",
+				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-w-[20px] spiffy-tw-h-[20px] sm:spiffy-tw-w-[28px] sm:spiffy-tw-h-[28px]",
+					className: "spiffy-tw-h-[20px] spiffy-tw-w-[20px] sm:spiffy-tw-h-[28px] sm:spiffy-tw-w-[28px]",
 					strokeWidth: "2px"
 				})
 			})] }),
@@ -2984,7 +3006,7 @@ const SearchZeroState = ({ widgetConfig, initialIsOpen, entryPointRef }) => {
 				onSearchInputBlur
 			}),
 			/* @__PURE__ */ jsxs(AnimatePresence, { children: [initialSuggestions && initialSuggestions.length > 0 && /* @__PURE__ */ jsx(motion.div, {
-				className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+				className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				exit: { opacity: 0 },

package/dist/SuggestionBar/index.cjs

@@ -1,5 +1,5 @@
-const require_SuggestionBar = require('../SuggestionBar-BOThXJvJ.cjs');
-require('../SuggestionButtonContainer-BeWPpeQk.cjs');
+const require_SuggestionBar = require('../SuggestionBar-CK5aU2bb.cjs');
+require('../SuggestionButtonContainer-Dm38gJiJ.cjs');
 
 exports.SuggestionBar = require_SuggestionBar.SuggestionBar;
 exports.SuggestionBarLocationForMetrics = require_SuggestionBar.SuggestionBarLocationForMetrics;

package/dist/SuggestionBar/index.js

@@ -1,4 +1,4 @@
-import { n as SuggestionBarLocationForMetrics, t as SuggestionBar } from "../SuggestionBar-DeMmAK4M.js";
-import "../SuggestionButtonContainer-CZhOkZaJ.js";
+import { n as SuggestionBarLocationForMetrics, t as SuggestionBar } from "../SuggestionBar-BHAXhgcd.js";
+import "../SuggestionButtonContainer-s2e9YGW_.js";
 
 export { SuggestionBar, SuggestionBarLocationForMetrics };

package/dist/{SuggestionBar-DeMmAK4M.js → SuggestionBar-BHAXhgcd.js}

@@ -1,4 +1,4 @@
-import { t as SuggestionButtonContainer } from "./SuggestionButtonContainer-CZhOkZaJ.js";
+import { t as SuggestionButtonContainer } from "./SuggestionButtonContainer-s2e9YGW_.js";
 import { useCallback, useRef } from "react";
 import { useSetAtom } from "jotai";
 import { jsx } from "react/jsx-runtime";
@@ -96,16 +96,9 @@ function SuggestionBar({ id, locationForMetrics, buttonTexts, buttonVariation, h
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		id,
-		className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+		className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
 		children: /* @__PURE__ */ jsx("div", {
-			className: `
-          spiffy-tw-relative 
-          spiffy-tw-w-full 
-          spiffy-tw-overflow-x-scroll 
-          spiffy-tw-overflow-y-hidden 
-          spiffy-tw-no-scrollbar
-          ${twoRowsOnMobile && isSmallScreen ? "spiffy-tw-h-20" : "spiffy-tw-h-9"}
-        `,
+			className: `spiffy-tw-no-scrollbar spiffy-tw-relative spiffy-tw-w-full spiffy-tw-overflow-y-hidden spiffy-tw-overflow-x-scroll ${twoRowsOnMobile && isSmallScreen ? "spiffy-tw-h-20" : "spiffy-tw-h-9"} `,
 			ref: handleContainerRef,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "spiffy-tw-relative spiffy-tw-inline-block spiffy-tw-whitespace-nowrap",

package/dist/{SuggestionBar-BOThXJvJ.cjs → SuggestionBar-CK5aU2bb.cjs}

@@ -1,5 +1,5 @@
-const require_chunk = require('./chunk-DWy1uDak.cjs');
-const require_SuggestionButtonContainer = require('./SuggestionButtonContainer-BeWPpeQk.cjs');
+const require_chunk = require('./chunk-DSlc6foC.cjs');
+const require_SuggestionButtonContainer = require('./SuggestionButtonContainer-Dm38gJiJ.cjs');
 let react = require("react");
 let jotai = require("jotai");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -407,16 +407,9 @@ function SuggestionBar({ id, locationForMetrics, buttonTexts, buttonVariation, h
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id,
-		className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+		className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `
-          spiffy-tw-relative 
-          spiffy-tw-w-full 
-          spiffy-tw-overflow-x-scroll 
-          spiffy-tw-overflow-y-hidden 
-          spiffy-tw-no-scrollbar
-          ${twoRowsOnMobile && isSmallScreen ? "spiffy-tw-h-20" : "spiffy-tw-h-9"}
-        `,
+			className: `spiffy-tw-no-scrollbar spiffy-tw-relative spiffy-tw-w-full spiffy-tw-overflow-y-hidden spiffy-tw-overflow-x-scroll ${twoRowsOnMobile && isSmallScreen ? "spiffy-tw-h-20" : "spiffy-tw-h-9"} `,
 			ref: handleContainerRef,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "spiffy-tw-relative spiffy-tw-inline-block spiffy-tw-whitespace-nowrap",

package/dist/SuggestionButtonContainer/index.cjs

@@ -1,3 +1,3 @@
-const require_SuggestionButtonContainer = require('../SuggestionButtonContainer-BeWPpeQk.cjs');
+const require_SuggestionButtonContainer = require('../SuggestionButtonContainer-Dm38gJiJ.cjs');
 
 exports.SuggestionButtonContainer = require_SuggestionButtonContainer.SuggestionButtonContainer;

package/dist/SuggestionButtonContainer/index.js

@@ -1,3 +1,3 @@
-import { t as SuggestionButtonContainer } from "../SuggestionButtonContainer-CZhOkZaJ.js";
+import { t as SuggestionButtonContainer } from "../SuggestionButtonContainer-s2e9YGW_.js";
 
 export { SuggestionButtonContainer };

package/dist/{SuggestionButtonContainer-BeWPpeQk.cjs → SuggestionButtonContainer-Dm38gJiJ.cjs}

@@ -1,4 +1,4 @@
-const require_chunk = require('./chunk-DWy1uDak.cjs');
+const require_chunk = require('./chunk-DSlc6foC.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -104,7 +104,7 @@ function useHorizontalScrollAnimation({ scrollContainerRef, animationSpeed = "st
 //#region src/SuggestionButtonContainer/SuggestionButtonContainer.tsx
 function ButtonContainer({ children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "spiffy-tw-flex \n      spiffy-tw-flex-row\n      spiffy-tw-items-center\n      spiffy-tw-space-x-2\n      spiffy-tw-h-full\n      spiffy-tw-pl-0",
+		className: "spiffy-tw-pl-0 spiffy-tw-flex spiffy-tw-h-full spiffy-tw-flex-row spiffy-tw-items-center spiffy-tw-space-x-2",
 		children
 	});
 }
@@ -120,7 +120,7 @@ const SuggestionButtonContainer = ({ buttonVariation, hoverButtonVariation, butt
 	const visibleButtonsFirstRow = buttonTexts.slice(0, twoRowsOnMobile && isSmallScreen ? Math.ceil((buttonTexts.length + 1) / 2) : void 0);
 	const visibleButtonsSecondRow = buttonTexts.slice(Math.ceil((buttonTexts.length + 1) / 2), buttonTexts.length);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "spiffy-tw-overflow-x-scroll spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-whitespace-nowrap",
+		className: "spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-overflow-x-scroll spiffy-tw-whitespace-nowrap",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonContainer, { children: [visibleButtonsFirstRow.map((suggestion, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_SuggestionButton.SuggestionButton, {
 			variant: buttonVariation,
 			hoverVariant: hoverButtonVariation,

package/dist/{SuggestionButtonContainer-CZhOkZaJ.js → SuggestionButtonContainer-s2e9YGW_.js}

@@ -103,7 +103,7 @@ function useHorizontalScrollAnimation({ scrollContainerRef, animationSpeed = "st
 //#region src/SuggestionButtonContainer/SuggestionButtonContainer.tsx
 function ButtonContainer({ children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "spiffy-tw-flex \n      spiffy-tw-flex-row\n      spiffy-tw-items-center\n      spiffy-tw-space-x-2\n      spiffy-tw-h-full\n      spiffy-tw-pl-0",
+		className: "spiffy-tw-pl-0 spiffy-tw-flex spiffy-tw-h-full spiffy-tw-flex-row spiffy-tw-items-center spiffy-tw-space-x-2",
 		children
 	});
 }
@@ -119,7 +119,7 @@ const SuggestionButtonContainer = ({ buttonVariation, hoverButtonVariation, butt
 	const visibleButtonsFirstRow = buttonTexts.slice(0, twoRowsOnMobile && isSmallScreen ? Math.ceil((buttonTexts.length + 1) / 2) : void 0);
 	const visibleButtonsSecondRow = buttonTexts.slice(Math.ceil((buttonTexts.length + 1) / 2), buttonTexts.length);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "spiffy-tw-overflow-x-scroll spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-whitespace-nowrap",
+		className: "spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-overflow-x-scroll spiffy-tw-whitespace-nowrap",
 		children: [/* @__PURE__ */ jsxs(ButtonContainer, { children: [visibleButtonsFirstRow.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
 			variant: buttonVariation,
 			hoverVariant: hoverButtonVariation,

package/dist/{chunk-DWy1uDak.cjs → chunk-DSlc6foC.cjs}

@@ -9,12 +9,16 @@ var __commonJS = (cb, mod) => function() {
 	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
 	}
 	return to;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets",
-  "version": "0.1.2-arthur-2",
+  "version": "0.1.2",
   "description": "React widget library for Envive services.",
   "keywords": [
     "react",
@@ -23,17 +23,17 @@
   "scripts": {
     "build": "tsdown",
     "build:watch": "tsdown --watch",
+    "dev": "npm run get-merchants && storybook dev -p 6006",
     "prepublish": "npm run build",
-    "typecheck": "tsc",
-    "test": "vitest",
-    "storybook": "npm run get-merchants && storybook dev -p 6006",
     "build-storybook": "npm run get-merchants && storybook build",
-    "dev": "npm run get-merchants && storybook dev -p 6006",
-    "get-merchants": "tsx ./.storybook/getMerchants.ts"
+    "storybook": "npm run get-merchants && storybook dev -p 6006",
+    "storybook:get-merchants": "tsx ./.storybook/getMerchants.ts",
+    "typecheck": "tsc",
+    "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.8",
-    "@envive-ai/react-toolkit": "0.2.13-arthur-1",
+    "@envive-ai/react-hooks": "0.2.9",
+    "@envive-ai/react-toolkit": "*",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.24",
@@ -55,7 +55,12 @@
     "@storybook/react-vite": "^9.1.4",
     "@types/node": "^24.3.2",
     "@types/react": "^19.1.12",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
     "eslint-plugin-storybook": "^9.1.4",
+    "playwright": "^1.56.0",
     "postcss": "^8.5.6",
     "storybook": "^9.1.4",
     "tailwindcss": "^3.4.17",
@@ -64,6 +69,9 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*"
+  },
   "exports": {
     "./SearchResults": {
       "import": "./dist/SearchResults/index.js",

package/src/SearchResults/SearchResults.tsx

@@ -3,13 +3,11 @@ import { useEffect } from 'react';
 import { SearchResultsContent } from '@envive-ai/react-toolkit/SearchResultsContent';
 import { SearchResultsFilterModal } from '@envive-ai/react-toolkit/SearchResultsFilterModal';
 import { SearchResultsToolbar } from '@envive-ai/react-toolkit/SearchResultsToolbar';
-import { useStickyVisibility } from '@envive-ai/react-toolkit/util'
+import { useStickyVisibility } from '@envive-ai/react-toolkit/util';
 import { SearchResultsHocProps } from '@envive-ai/react-hooks/hooks/Search';
 import { SearchResultsEntryPointWidgetConfig } from './types';
 import { withSearchResults } from './withSearchResults';
 
-
-
 export interface SearchResultsProps extends SearchResultsHocProps {
   widgetConfig: SearchResultsEntryPointWidgetConfig;
 }
@@ -141,4 +139,4 @@ export const SearchResultsComponent = ({
   );
 };
 
-export const SearchResults = withSearchResults(SearchResultsComponent);
+export const SearchResults = withSearchResults(SearchResultsComponent);

package/src/SearchResults/SearchResultsWidget.tsx

@@ -40,4 +40,4 @@ export const SearchResultsWidget = () => {
   }
 
   return <SearchResults widgetConfig={widgetConfig as SearchResultsEntryPointWidgetConfig} />;
-};
+};

package/src/SearchResults/types.ts

@@ -1,6 +1,3 @@
-
-
-
 import { SearchFilterSidebarVariant } from '@envive-ai/react-toolkit/SearchResultsFilterSidebar';
 import { ProductGridVariant } from '@envive-ai/react-toolkit/ProductCard';
 import { BaseWidgetConfig } from 'src/config/BaseWidgetConfig';

package/src/SearchZeroState/SearchIcon.tsx

@@ -1,11 +1,11 @@
-import { SearchIconVariant } from "@envive-ai/react-hooks/contexts/types";
-import AiSearchBold from "@envive-ai/react-icons/AiSearchBold";
-import AiSearchThin from "@envive-ai/react-icons/AiSearchThin";
-import { Typography } from "@envive-ai/react-toolkit/Typography";
-import classNames from "classnames";
-import React from "react";
+import { SearchIconVariant } from '@envive-ai/react-hooks/contexts/types';
+import AiSearchBold from '@envive-ai/react-icons/AiSearchBold';
+import AiSearchThin from '@envive-ai/react-icons/AiSearchThin';
+import { Typography } from '@envive-ai/react-toolkit/Typography';
+import classNames from 'classnames';
+import React from 'react';
 
-const SEARCH_ENTRYPOINT_BUTTON_TESTID = "spiffy-search-entrypoint-button";
+const SEARCH_ENTRYPOINT_BUTTON_TESTID = 'spiffy-search-entrypoint-button';
 
 interface SearchIconProps {
   size?: number; // in px
@@ -46,9 +46,16 @@ export const SearchIcon: React.FC<SearchIconProps> = ({
       data-testid={SEARCH_ENTRYPOINT_BUTTON_TESTID}
       ref={entryPointRef}
     >
-      <IconComponent style={{ width: size, height: size }} fill={color} strokeWidth={iconStrokeWidth} />
+      <IconComponent
+        style={{ width: size, height: size }}
+        fill={color}
+        strokeWidth={iconStrokeWidth}
+      />
       {label && (
-        <Typography variant="body3" className="spiffy-global-search-text">
+        <Typography
+          variant="body3"
+          className="spiffy-global-search-text"
+        >
           {label}
         </Typography>
       )}

package/src/SearchZeroState/SearchOverlay.tsx

@@ -65,10 +65,10 @@ export const SearchOverlay = React.forwardRef<HTMLDivElement, SearchOverlayProps
     }
 
     // If we are usingPortal, we need to create a portal widget in the orgConfig
-    // so that we can properly identify the portal target. This is often used to 
+    // so that we can properly identify the portal target. This is often used to
     // get around z-index context hell because it will move the overlay wherever
     // you need to insert it. In most cases, appending it as a child of body is
-    // sufficient. Typically this is not needed, but look into how it's done in 
+    // sufficient. Typically this is not needed, but look into how it's done in
     // Bandolier for more info.
     try {
       const target = getOverlayPortalTarget();
@@ -79,3 +79,4 @@ export const SearchOverlay = React.forwardRef<HTMLDivElement, SearchOverlayProps
     }
   },
 );
+SearchOverlay.displayName = 'SearchOverlay';

package/src/SearchZeroState/SearchZeroState.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAmplitudeTracking } from '@envive-ai/react-hooks/hooks/AmplitudeOperations';
 import { useSearch } from '@envive-ai/react-hooks/hooks/Search';
@@ -20,7 +20,6 @@ import { searchZeroStateVariantClasses } from './zeroStateSearchVariants';
 import { SearchIcon } from './SearchIcon';
 import { RecommendedProducts } from './components/RecommendedProducts';
 
-
 const SEARCH_ENTRYPOINT_INPUT_TESTID = 'spiffy-search-entrypoint-input';
 
 export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
@@ -28,7 +27,6 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
   initialIsOpen,
   entryPointRef,
 }) => {
-
   // eslint-disable-next-line no-console
   console.log('SearchZeroState: widgetConfig', widgetConfig);
   const {
@@ -53,10 +51,10 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
   const [isOpen, setIsOpen] = useState(!!initialIsOpen);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const searchInput = useSearch();
+  const searchInput = useSearch({ allowRedirect: true });
 
   const { track } = useAmplitudeTracking();
-  
+
   const {
     recommendedProductsHeading,
     searchOverlayHeading,
@@ -86,8 +84,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
   const { overlayBackgroundClasses, sparklesIconColor } =
     searchZeroStateVariantClasses[validVariant];
 
-  const { searchInputIconColor } =
-    searchInputVariantClasses[searchInputVariant];
+  const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
 
   const handleOpen = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
@@ -105,7 +102,6 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
 
   useEffect(() => {
     if (isOpen) {
-
       resetSearch(); // Reset search state when opening
       searchInputRef.current?.focus();
     }
@@ -166,29 +162,30 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
           <>
             <div className="spiffy-tw-relative spiffy-tw-mb-4">
               <div className="spiffy-tw-flex spiffy-tw-items-center">
-                <Typography id="global-search-title" variant="t3">
+                <Typography
+                  id="global-search-title"
+                  variant="t3"
+                >
                   {searchOverlayHeading}
                 </Typography>
                 <Sparkles
-                  className="sm:spiffy-tw-w-[36px] sm:spiffy-tw-h-[45px] spiffy-tw-w-[24px] spiffy-tw-h-[36px] spiffy-tw-ml-2"
+                  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"
                 />
               </div>
-              {
-                includeSubtitle && (
-                  <Typography variant="body2">Go ahead, get as specific as you like...</Typography>
-                )
-              }
+              {includeSubtitle && (
+                <Typography variant="body2">Go ahead, get as specific as you like...</Typography>
+              )}
             </div>
             <button
               onClick={handleClose}
-              className="spiffy-tw-absolute spiffy-tw-top-4 spiffy-tw-right-4 sm:spiffy-tw-top-8 sm:spiffy-tw-right-8 "
+              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"
             >
               <IconCloseVariant
-                className="spiffy-tw-w-[20px] spiffy-tw-h-[20px] sm:spiffy-tw-w-[28px] sm:spiffy-tw-h-[28px]"
+                className="spiffy-tw-h-[20px] spiffy-tw-w-[20px] sm:spiffy-tw-h-[28px] sm:spiffy-tw-w-[28px]"
                 strokeWidth="2px"
               />
             </button>
@@ -213,7 +210,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
             {initialSuggestions &&
               initialSuggestions.length > 0 && ( // Conditionally render suggestions
                 <motion.div
-                  className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden"
+                  className="spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden"
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}

package/src/SearchZeroState/SearchZeroStateWidget.tsx

@@ -1,16 +1,19 @@
-import { SearchEntryPointWidgetConfig } from "@envive-ai/react-hooks/contexts/types";
-import { useNewOrgConfig } from "@envive-ai/react-hooks/hooks/NewOrgConfig";
-import { useMemo } from "react";
-import { SearchZeroState } from "./SearchZeroState";
-
+import { SearchEntryPointWidgetConfig } from '@envive-ai/react-hooks/contexts/types';
+import { useNewOrgConfig } from '@envive-ai/react-hooks/hooks/NewOrgConfig';
+import { useMemo } from 'react';
+import { SearchZeroState } from './SearchZeroState';
 
 type SearchZeroStateWidgetProps = {
   initialIsOpen: boolean;
   widgetConfigId?: string;
   entryPointRef: React.Ref<HTMLButtonElement>;
-}
+};
 
-export const SearchZeroStateWidget = ({ initialIsOpen, widgetConfigId = 'searchEntryPointIcon', entryPointRef }: SearchZeroStateWidgetProps) => {
+export const SearchZeroStateWidget = ({
+  initialIsOpen,
+  widgetConfigId = 'searchEntryPointIcon',
+  entryPointRef,
+}: SearchZeroStateWidgetProps) => {
   const newConfig = useNewOrgConfig();
 
   const widgetConfig = useMemo(() => {
@@ -29,5 +32,11 @@ export const SearchZeroStateWidget = ({ initialIsOpen, widgetConfigId = 'searchE
     return null;
   }
 
-  return <SearchZeroState widgetConfig={widgetConfig as SearchEntryPointWidgetConfig} initialIsOpen={initialIsOpen} entryPointRef={entryPointRef} />;
+  return (
+    <SearchZeroState
+      widgetConfig={widgetConfig as SearchEntryPointWidgetConfig}
+      initialIsOpen={initialIsOpen}
+      entryPointRef={entryPointRef}
+    />
+  );
 };

package/src/SearchZeroState/components/RecommendedProducts.tsx

@@ -6,7 +6,10 @@ import { useAmplitudeTracking } from '@envive-ai/react-hooks/hooks/AmplitudeOper
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import { Typography } from '@envive-ai/react-toolkit/Typography';
 import { ProductCardConfig, ProductGridVariant } from '@envive-ai/react-hooks/contexts/types';
-import { ChatElementDisplayLocation, SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocation,
+  SearchResponseProductAttributes,
+} from '@envive-ai/react-hooks/application/models';
 import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 
 interface RecommendedProductsProps {
@@ -64,7 +67,6 @@ export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
   }
 
   const handleProductClick = (product: SearchResponseProduct, index: number) => {
-    
     track(SpiffyMetricsEventName.ProductCardClicked, {
       eventProps: {
         url: product.url,
@@ -100,7 +102,10 @@ export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
     >
       {heading && (
         <div className={titleContainerClasses}>
-          <Typography variant="h1" className="spiffy-tw-text-[--spiffy-colors-text-accent]">
+          <Typography
+            variant="h1"
+            className="spiffy-tw-text-[--spiffy-colors-text-accent]"
+          >
             {heading}
           </Typography>
         </div>

package/src/SearchZeroState/overlay/overlayHostLocator.ts

@@ -4,9 +4,7 @@ export const SEARCH_OVERLAY_PORTAL_ID = 'spiffy-ai-search-overlay-portal'; // Th
 /**
  * Find the portal target inside the overlay host's ShadowRoot.
  */
-export function getOverlayPortalTarget(
-  hostId: string = SEARCH_OVERLAY_ENTRYPOINT_ID,
-): HTMLElement {
+export function getOverlayPortalTarget(hostId: string = SEARCH_OVERLAY_ENTRYPOINT_ID): HTMLElement {
   const bareMount = document.getElementById(SEARCH_OVERLAY_PORTAL_ID) as HTMLElement | null;
   if (bareMount) return bareMount;
   const host = document.getElementById(hostId);
@@ -16,4 +14,4 @@ export function getOverlayPortalTarget(
   const mount = sr.getElementById(SEARCH_OVERLAY_PORTAL_ID) as HTMLElement | null;
   if (!mount) throw new Error('[Overlay] Portal mount missing inside ShadowRoot');
   return mount;
-}
+}

package/src/SearchZeroState/types.ts

@@ -1,4 +1,7 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
+import {
+  SearchEntryPointWidgetConfig,
+  SearchInputVariant,
+} from '@envive-ai/react-hooks/contexts/types';
 
 export type { SearchInputVariant, SearchEntryPointWidgetConfig };
 

package/src/SearchZeroState/zeroStateSearchVariants.ts

@@ -1,17 +1,26 @@
-import { ColorNames, colorVar, SearchZeroStateVariant } from "@envive-ai/react-hooks/contexts/types";
+import {
+  ColorNames,
+  SearchZeroStateVariant,
+  colorVar,
+} from '@envive-ai/react-hooks/contexts/types';
 
 interface SearchZeroStateVariantClasses {
   overlayBackgroundClasses: string;
   sparklesIconColor: string;
 }
 
-export const searchZeroStateVariantClasses: Record<SearchZeroStateVariant, SearchZeroStateVariantClasses> = {
-  backgroundTertiary: { // standard light mode
+export const searchZeroStateVariantClasses: Record<
+  SearchZeroStateVariant,
+  SearchZeroStateVariantClasses
+> = {
+  backgroundTertiary: {
+    // standard light mode
     overlayBackgroundClasses:
       'spiffy-tw-bg-[--spiffy-colors-background-tertiary] spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-bg-opacity-90 spiffy-tw-backdrop-blur-20',
     sparklesIconColor: colorVar(ColorNames.AccentPrimary),
   },
-  backgroundDark: { // standard dark mode
+  backgroundDark: {
+    // standard dark mode
     overlayBackgroundClasses:
       'spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light] spiffy-tw-bg-opacity-90 spiffy-tw-backdrop-blur-20',
     sparklesIconColor: colorVar(ColorNames.AccentPrimary),
@@ -19,6 +28,6 @@ export const searchZeroStateVariantClasses: Record<SearchZeroStateVariant, Searc
   backgroundPrimary: {
     overlayBackgroundClasses:
       'spiffy-tw-bg-[--spiffy-colors-background-primary] spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-bg-opacity-90 spiffy-tw-backdrop-blur-20',
-    sparklesIconColor: colorVar(ColorNames.AccentPrimary)
+    sparklesIconColor: colorVar(ColorNames.AccentPrimary),
   },
 };

package/src/SuggestionBar/SuggestionBar.tsx

@@ -3,9 +3,8 @@ import { useScrollContainer } from 'react-indiana-drag-scroll';
 import { v4 as uuid } from 'uuid';
 import { useSetAtom } from 'jotai';
 
-
-import { SpiffyWidgets, MessageRole, MessageType } from '@envive-ai/react-hooks/application/models';
-import { logPerfMetricAtom, PerfMetricsEvents } from '@envive-ai/react-hooks/atoms/chat';
+import { MessageRole, MessageType, SpiffyWidgets } from '@envive-ai/react-hooks/application/models';
+import { PerfMetricsEvents, logPerfMetricAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { SUGGESTION_BAR_TESTID } from '@envive-ai/react-hooks/config';
 import { useIsSmallScreen } from '@envive-ai/react-hooks/hooks/IsSmallScreen';
 import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
@@ -16,7 +15,6 @@ import { SuggestionButtonVariant } from '@envive-ai/react-hooks/contexts/types';
 import { SuggestionBarLocationForMetrics } from './types';
 import { SuggestionButtonContainer } from '../SuggestionButtonContainer';
 
-
 // SuggestionBarV2 Props
 interface SuggestionBarProps extends TestProps {
   id: string;
@@ -57,11 +55,9 @@ function SuggestionBar({
   const isAnimated = animationSpeed !== 'none';
 
   // Track component visibility
-  useTrackComponentVisibleEvent(
-    SpiffyWidgets.SuggestionBar,
-    componentVisibleTriggerRef,
-    { animated: isAnimated },
-  );
+  useTrackComponentVisibleEvent(SpiffyWidgets.SuggestionBar, componentVisibleTriggerRef, {
+    animated: isAnimated,
+  });
 
   // Handle button click
   const handleClickSuggestion = useCallback(
@@ -102,16 +98,12 @@ function SuggestionBar({
   );
 
   return (
-    <div id={id} className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden">
+    <div
+      id={id}
+      className="spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden"
+    >
       <div
-        className={`
-          spiffy-tw-relative 
-          spiffy-tw-w-full 
-          spiffy-tw-overflow-x-scroll 
-          spiffy-tw-overflow-y-hidden 
-          spiffy-tw-no-scrollbar
-          ${twoRowsOnMobile && isSmallScreen ? 'spiffy-tw-h-20' : 'spiffy-tw-h-9'}
-        `}
+        className={`spiffy-tw-no-scrollbar spiffy-tw-relative spiffy-tw-w-full spiffy-tw-overflow-y-hidden spiffy-tw-overflow-x-scroll ${twoRowsOnMobile && isSmallScreen ? 'spiffy-tw-h-20' : 'spiffy-tw-h-9'} `}
         ref={handleContainerRef}
       >
         <div

package/src/SuggestionBar/types.ts

@@ -1,4 +1,4 @@
 export enum SuggestionBarLocationForMetrics {
-    SUGGESTION_BAR_TOP = 'top',
-    SUGGESTION_BAR_BOTTOM = 'bottom'
-}
+  SUGGESTION_BAR_TOP = 'top',
+  SUGGESTION_BAR_BOTTOM = 'bottom',
+}

package/src/SuggestionButtonContainer/SuggestionButtonContainer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import { useRef } from 'react';
 import { SuggestionButton } from '@envive-ai/react-toolkit/SuggestionButton';
 import { SpiffyWidgets } from '@envive-ai/react-hooks/application/models';
@@ -15,20 +16,12 @@ interface ButtonContainerProps {
 // ButtonContainer is reused twice within SuggestionBarV2, so we declare it as a seperate functional component
 function ButtonContainer({ children }: ButtonContainerProps) {
   return (
-    <div
-      className="spiffy-tw-flex 
-      spiffy-tw-flex-row
-      spiffy-tw-items-center
-      spiffy-tw-space-x-2
-      spiffy-tw-h-full
-      spiffy-tw-pl-0"
-    >
+    <div className="spiffy-tw-pl-0 spiffy-tw-flex spiffy-tw-h-full spiffy-tw-flex-row spiffy-tw-items-center spiffy-tw-space-x-2">
       {children}
     </div>
   );
 }
 
-
 const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
   buttonVariation,
   hoverButtonVariation,
@@ -47,17 +40,15 @@ const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
   useHorizontalScrollAnimation({
     scrollContainerRef,
     animationSpeed,
-  })
+  });
   const isSmallScreen = useIsSmallScreen();
 
   const isAnimated = animationSpeed !== 'none';
 
   // Track component visibility
-  useTrackComponentVisibleEvent(
-    SpiffyWidgets.SuggestionBar,
-    componentVisibleTriggerRef,
-    { animated: isAnimated },
-  );
+  useTrackComponentVisibleEvent(SpiffyWidgets.SuggestionBar, componentVisibleTriggerRef, {
+    animated: isAnimated,
+  });
 
   const visibleButtonsFirstRow = buttonTexts.slice(
     0,
@@ -70,7 +61,7 @@ const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
   );
 
   return (
-    <div className="spiffy-tw-overflow-x-scroll spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-whitespace-nowrap">
+    <div className="spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-overflow-x-scroll spiffy-tw-whitespace-nowrap">
       <ButtonContainer>
         {visibleButtonsFirstRow.map((suggestion, i) => (
           <SuggestionButton
@@ -136,6 +127,6 @@ const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
       )}
     </div>
   );
-}
+};
 
 export { SuggestionButtonContainer };

package/src/SuggestionButtonContainer/types.ts

@@ -1,6 +1,5 @@
-import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
-import { TestProps } from "@envive-ai/react-hooks/types";
-
+import { SuggestionButtonVariant } from '@envive-ai/react-hooks/contexts/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 
 // SuggestionButtonContainer Props
 export interface SuggestionButtonContainerProps extends TestProps {
@@ -13,4 +12,4 @@ export interface SuggestionButtonContainerProps extends TestProps {
   twoRowsOnMobile?: boolean | undefined;
   animationSpeed?: 'standard' | 'slow' | 'none';
   buttonBorderRadius?: 'sm' | 'md' | 'lg';
-}
+}

package/src/stories/SearchResults.stories.tsx

@@ -18,7 +18,7 @@ const meta = {
       productGridVariant: 'standard',
       searchBoxPlaceholder: '',
       widgetConfigId: '',
-      type: WidgetType.SearchResultsEntryPoint
+      type: WidgetType.SearchResultsEntryPoint,
     },
   },
 } satisfies Meta<typeof SearchResults>;

package/src/stories/SearchZeroState.stories.tsx

@@ -30,11 +30,19 @@ const meta = {
     },
     searchZeroStateVariant: {
       control: 'select',
-      options: ['backgroundTertiary', 'backgroundPrimary', 'backgroundSecondary', 'backgroundQuaternary'],
+      options: [
+        'backgroundTertiary',
+        'backgroundPrimary',
+        'backgroundSecondary',
+        'backgroundQuaternary',
+      ],
     },
   },
   render: (args: SearchEntryPointWidgetConfig & { initialIsOpen: boolean }) => (
-    <SearchZeroState widgetConfig={{ ...args }} initialIsOpen={args.initialIsOpen} />
+    <SearchZeroState
+      widgetConfig={{ ...args }}
+      initialIsOpen={args.initialIsOpen}
+    />
   ),
 } satisfies Meta;
 

package/src/stories/SuggestionBar.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof SuggestionBar> = {
       options: ['none', 'standard', 'slow'],
     },
   },
-  render: (args) => (
+  render: args => (
     <div style={{ width: '300px', height: '100px' }}>
       <SuggestionBar {...args} />
     </div>
@@ -35,7 +35,6 @@ export const Default: Story = {
     handleReply: () => {},
     boldFirstButton: false,
   },
-  
 };
 
 export const Animated: Story = {

package/src/util/useHorizontalScrollAnimation.ts

@@ -1,4 +1,4 @@
-import { useEffect, RefObject, useRef } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
 import { useReducedMotionWithOverride } from 'src/util/useReducedMotionWithOverride';
 
 // IMPORTANT: All refs passed to this hook must be mutable (not Readonly)