@envive-ai/react-widgets 0.1.2-arthur-3 → 0.1.3

package/dist/packages/icons/dist/node_modules/react/jsx-runtime.js

@@ -0,0 +1,13 @@
+import { __commonJS } from "../../_virtual/rolldown_runtime.js";
+import { require_react_jsx_runtime_production_min } from "./cjs/react-jsx-runtime.production.min.js";
+import { require_react_jsx_runtime_development } from "./cjs/react-jsx-runtime.development.js";
+
+//#region ../icons/dist/node_modules/react/jsx-runtime.js
+var require_jsx_runtime = /* @__PURE__ */ __commonJS({ "../../node_modules/react/jsx-runtime.js": ((exports, module) => {
+	if (process.env.NODE_ENV === "production") module.exports = require_react_jsx_runtime_production_min();
+	else module.exports = require_react_jsx_runtime_development();
+}) });
+var jsx_runtime_default = require_jsx_runtime();
+
+//#endregion
+export { require_jsx_runtime };

package/dist/util/useHorizontalScrollAnimation.cjs

@@ -0,0 +1,88 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useReducedMotionWithOverride = require('./useReducedMotionWithOverride.cjs');
+let react = require("react");
+
+//#region src/util/useHorizontalScrollAnimation.ts
+function useHorizontalScrollAnimation({ scrollContainerRef, animationSpeed = "standard" }) {
+	const reducedMotion = require_useReducedMotionWithOverride.useReducedMotionWithOverride();
+	const resumeTimeoutRef = (0, react.useRef)(null);
+	const scrollAnimationRef = (0, react.useRef)(null);
+	const pauseOnHover = true;
+	let PIXELS_PER_SECOND = 40;
+	switch (animationSpeed) {
+		case "standard":
+			PIXELS_PER_SECOND = 40;
+			break;
+		case "slow":
+			PIXELS_PER_SECOND = 25;
+			break;
+		case "none":
+			PIXELS_PER_SECOND = 0;
+			break;
+		default: PIXELS_PER_SECOND = 40;
+	}
+	const RESUME_DELAY_MS = 2e3;
+	const isAnimated = animationSpeed !== "none";
+	(0, react.useEffect)(() => {
+		if (!isAnimated || reducedMotion || !scrollContainerRef) return () => {};
+		const container = scrollContainerRef.current;
+		if (!container) return () => {};
+		if (container.scrollWidth <= container.clientWidth) return () => {};
+		let isPaused = false;
+		let lastTimestamp = null;
+		let accumulatedScroll = 0;
+		const step = (timestamp) => {
+			if (lastTimestamp === null) lastTimestamp = timestamp;
+			if (!isPaused) {
+				const delta = timestamp - lastTimestamp;
+				lastTimestamp = timestamp;
+				accumulatedScroll += PIXELS_PER_SECOND * (delta / 1e3);
+				const pixelsToScroll = Math.floor(accumulatedScroll);
+				if (pixelsToScroll > 0) {
+					container.scrollLeft += pixelsToScroll;
+					accumulatedScroll -= pixelsToScroll;
+					if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
+						container.scrollLeft = 0;
+						accumulatedScroll = 0;
+					}
+				}
+			}
+			scrollAnimationRef.current = requestAnimationFrame(step);
+		};
+		scrollAnimationRef.current = requestAnimationFrame(step);
+		const pauseAnimation = () => {
+			isPaused = true;
+			if (resumeTimeoutRef.current) {
+				clearTimeout(resumeTimeoutRef.current);
+				resumeTimeoutRef.current = null;
+			}
+		};
+		const scheduleResumeAnimation = () => {
+			resumeTimeoutRef.current = setTimeout(() => {
+				isPaused = false;
+				lastTimestamp = null;
+			}, RESUME_DELAY_MS);
+		};
+		container.addEventListener("mouseenter", pauseAnimation);
+		container.addEventListener("mouseleave", scheduleResumeAnimation);
+		container.addEventListener("touchstart", pauseAnimation);
+		container.addEventListener("touchend", scheduleResumeAnimation);
+		return function cleanup() {
+			if (scrollAnimationRef.current) cancelAnimationFrame(scrollAnimationRef.current);
+			container.removeEventListener("mouseenter", pauseAnimation);
+			container.removeEventListener("mouseleave", scheduleResumeAnimation);
+			container.removeEventListener("touchstart", pauseAnimation);
+			container.removeEventListener("touchend", scheduleResumeAnimation);
+			if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
+		};
+	}, [
+		isAnimated,
+		reducedMotion,
+		PIXELS_PER_SECOND,
+		pauseOnHover,
+		scrollContainerRef
+	]);
+}
+
+//#endregion
+exports.useHorizontalScrollAnimation = useHorizontalScrollAnimation;

package/dist/util/useHorizontalScrollAnimation.js

@@ -0,0 +1,87 @@
+import { useReducedMotionWithOverride } from "./useReducedMotionWithOverride.js";
+import { useEffect, useRef } from "react";
+
+//#region src/util/useHorizontalScrollAnimation.ts
+function useHorizontalScrollAnimation({ scrollContainerRef, animationSpeed = "standard" }) {
+	const reducedMotion = useReducedMotionWithOverride();
+	const resumeTimeoutRef = useRef(null);
+	const scrollAnimationRef = useRef(null);
+	const pauseOnHover = true;
+	let PIXELS_PER_SECOND = 40;
+	switch (animationSpeed) {
+		case "standard":
+			PIXELS_PER_SECOND = 40;
+			break;
+		case "slow":
+			PIXELS_PER_SECOND = 25;
+			break;
+		case "none":
+			PIXELS_PER_SECOND = 0;
+			break;
+		default: PIXELS_PER_SECOND = 40;
+	}
+	const RESUME_DELAY_MS = 2e3;
+	const isAnimated = animationSpeed !== "none";
+	useEffect(() => {
+		if (!isAnimated || reducedMotion || !scrollContainerRef) return () => {};
+		const container = scrollContainerRef.current;
+		if (!container) return () => {};
+		if (container.scrollWidth <= container.clientWidth) return () => {};
+		let isPaused = false;
+		let lastTimestamp = null;
+		let accumulatedScroll = 0;
+		const step = (timestamp) => {
+			if (lastTimestamp === null) lastTimestamp = timestamp;
+			if (!isPaused) {
+				const delta = timestamp - lastTimestamp;
+				lastTimestamp = timestamp;
+				accumulatedScroll += PIXELS_PER_SECOND * (delta / 1e3);
+				const pixelsToScroll = Math.floor(accumulatedScroll);
+				if (pixelsToScroll > 0) {
+					container.scrollLeft += pixelsToScroll;
+					accumulatedScroll -= pixelsToScroll;
+					if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
+						container.scrollLeft = 0;
+						accumulatedScroll = 0;
+					}
+				}
+			}
+			scrollAnimationRef.current = requestAnimationFrame(step);
+		};
+		scrollAnimationRef.current = requestAnimationFrame(step);
+		const pauseAnimation = () => {
+			isPaused = true;
+			if (resumeTimeoutRef.current) {
+				clearTimeout(resumeTimeoutRef.current);
+				resumeTimeoutRef.current = null;
+			}
+		};
+		const scheduleResumeAnimation = () => {
+			resumeTimeoutRef.current = setTimeout(() => {
+				isPaused = false;
+				lastTimestamp = null;
+			}, RESUME_DELAY_MS);
+		};
+		container.addEventListener("mouseenter", pauseAnimation);
+		container.addEventListener("mouseleave", scheduleResumeAnimation);
+		container.addEventListener("touchstart", pauseAnimation);
+		container.addEventListener("touchend", scheduleResumeAnimation);
+		return function cleanup() {
+			if (scrollAnimationRef.current) cancelAnimationFrame(scrollAnimationRef.current);
+			container.removeEventListener("mouseenter", pauseAnimation);
+			container.removeEventListener("mouseleave", scheduleResumeAnimation);
+			container.removeEventListener("touchstart", pauseAnimation);
+			container.removeEventListener("touchend", scheduleResumeAnimation);
+			if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
+		};
+	}, [
+		isAnimated,
+		reducedMotion,
+		PIXELS_PER_SECOND,
+		pauseOnHover,
+		scrollContainerRef
+	]);
+}
+
+//#endregion
+export { useHorizontalScrollAnimation };

package/dist/util/useReducedMotionWithOverride.cjs

@@ -0,0 +1,15 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let framer_motion = require("framer-motion");
+
+//#region src/util/useReducedMotionWithOverride.ts
+const useReducedMotionWithOverride = () => {
+	const reducedMotionConfig = (0, framer_motion.useReducedMotionConfig)();
+	return (0, react.useMemo)(() => {
+		if (window?._spiffy?.reducedMotionOverride) return window?._spiffy?.reducedMotionOverride;
+		return reducedMotionConfig;
+	}, [reducedMotionConfig]);
+};
+
+//#endregion
+exports.useReducedMotionWithOverride = useReducedMotionWithOverride;

package/dist/util/useReducedMotionWithOverride.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useReducedMotionConfig } from "framer-motion";
+
+//#region src/util/useReducedMotionWithOverride.ts
+const useReducedMotionWithOverride = () => {
+	const reducedMotionConfig = useReducedMotionConfig();
+	return useMemo(() => {
+		if (window?._spiffy?.reducedMotionOverride) return window?._spiffy?.reducedMotionOverride;
+		return reducedMotionConfig;
+	}, [reducedMotionConfig]);
+};
+
+//#endregion
+export { useReducedMotionWithOverride };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets",
-  "version": "0.1.2-arthur-3",
+  "version": "0.1.3",
   "description": "React widget library for Envive services.",
   "keywords": [
     "react",
@@ -23,17 +23,15 @@
   "scripts": {
     "build": "tsdown",
     "build:watch": "tsdown --watch",
+    "dev": "npm run get-merchants && storybook dev -p 6006",
     "prepublish": "npm run build",
+    "storybook": "tsx ./.storybook/getMerchants.ts && storybook dev -p 6006",
+    "storybook:build": "npm run get-merchants && storybook build",
+    "storybook:get-merchants": "tsx ./.storybook/getMerchants.ts",
     "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"
+    "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.8-arthur-2",
-    "@envive-ai/react-toolkit": "0.2.13-arthur-1",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.24",
@@ -55,7 +53,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 +67,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 {
@@ -56,7 +54,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
   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>
@@ -205,7 +202,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
             onKeyDown={onKeyDown}
             onAutocompleteSelect={onAutocompleteSelect}
             onSearchInputChange={searchChange}
-            onSearchSubmit={submitSearchString}
+            onSearchSubmit={() => submitSearchString}
             onSearchInputFocus={onSearchInputFocus}
             onSearchInputBlur={onSearchInputBlur}
           />
@@ -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),
   },
 };