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

package/dist/SuggestionButtonContainer/index-B_X537jw.d.cts

@@ -0,0 +1,20 @@
+import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
+import { TestProps } from "@envive-ai/react-hooks/types";
+
+//#region src/SuggestionButtonContainer/types.d.ts
+interface SuggestionButtonContainerProps extends TestProps {
+  buttonVariation: SuggestionButtonVariant;
+  hoverButtonVariation: SuggestionButtonVariant;
+  buttonTexts: string[];
+  onButtonClick: (text: string) => void;
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  boldFirstButton?: boolean | undefined;
+  twoRowsOnMobile?: boolean | undefined;
+  animationSpeed?: 'standard' | 'slow' | 'none';
+  buttonBorderRadius?: 'sm' | 'md' | 'lg';
+}
+//#endregion
+//#region src/SuggestionButtonContainer/SuggestionButtonContainer.d.ts
+declare const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps>;
+//#endregion
+export { SuggestionButtonContainer, SuggestionButtonContainerProps };

package/dist/SuggestionButtonContainer/index-vwelzDzM.d.ts

@@ -0,0 +1,20 @@
+import { TestProps } from "@envive-ai/react-hooks/types";
+import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
+
+//#region src/SuggestionButtonContainer/types.d.ts
+interface SuggestionButtonContainerProps extends TestProps {
+  buttonVariation: SuggestionButtonVariant;
+  hoverButtonVariation: SuggestionButtonVariant;
+  buttonTexts: string[];
+  onButtonClick: (text: string) => void;
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  boldFirstButton?: boolean | undefined;
+  twoRowsOnMobile?: boolean | undefined;
+  animationSpeed?: 'standard' | 'slow' | 'none';
+  buttonBorderRadius?: 'sm' | 'md' | 'lg';
+}
+//#endregion
+//#region src/SuggestionButtonContainer/SuggestionButtonContainer.d.ts
+declare const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps>;
+//#endregion
+export { SuggestionButtonContainer, SuggestionButtonContainerProps };

package/dist/SuggestionButtonContainer/index.cjs

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

package/dist/SuggestionButtonContainer/index.js

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

package/dist/SuggestionButtonContainer-BeWPpeQk.cjs

@@ -0,0 +1,173 @@
+const require_chunk = require('./chunk-DWy1uDak.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_config = require("@envive-ai/react-hooks/config");
+let __envive_ai_react_hooks_hooks_IsSmallScreen = require("@envive-ai/react-hooks/hooks/IsSmallScreen");
+let __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent = require("@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent");
+let __envive_ai_react_toolkit_SuggestionButton = require("@envive-ai/react-toolkit/SuggestionButton");
+
+//#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
+//#region src/util/useHorizontalScrollAnimation.ts
+function useHorizontalScrollAnimation({ scrollContainerRef, animationSpeed = "standard" }) {
+	const reducedMotion = 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
+//#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",
+		children
+	});
+}
+const SuggestionButtonContainer = ({ buttonVariation, hoverButtonVariation, buttonTexts, boldFirstButton = false, twoRowsOnMobile = false, animationSpeed = "none", buttonBorderRadius = "lg", scrollContainerRef, onButtonClick }) => {
+	const componentVisibleTriggerRef = (0, react.useRef)(null);
+	useHorizontalScrollAnimation({
+		scrollContainerRef,
+		animationSpeed
+	});
+	const isSmallScreen = (0, __envive_ai_react_hooks_hooks_IsSmallScreen.useIsSmallScreen)();
+	const isAnimated = animationSpeed !== "none";
+	(0, __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent.useTrackComponentVisibleEvent)(__envive_ai_react_hooks_application_models.SpiffyWidgets.SuggestionBar, componentVisibleTriggerRef, { animated: isAnimated });
+	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",
+		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,
+			isDisabled: false,
+			content: suggestion,
+			boldText: boldFirstButton && i === 0,
+			borderRadius: buttonBorderRadius,
+			onClick: () => onButtonClick(suggestion),
+			dataTestId: __envive_ai_react_hooks_config.SUGGESTION_BAR_BUTTON_TESTID
+		}, i)), isAnimated && buttonTexts.map((suggestion, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_SuggestionButton.SuggestionButton, {
+			variant: buttonVariation,
+			hoverVariant: hoverButtonVariation,
+			isDisabled: false,
+			content: suggestion,
+			boldText: boldFirstButton && i === 0,
+			borderRadius: buttonBorderRadius,
+			onClick: () => onButtonClick(suggestion),
+			dataTestId: __envive_ai_react_hooks_config.SUGGESTION_BAR_BUTTON_TESTID
+		}, `animation-dupe-${i}`))] }), twoRowsOnMobile && isSmallScreen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "spiffy-tw-mt-1.5",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonContainer, { children: [visibleButtonsSecondRow.map((suggestion, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_SuggestionButton.SuggestionButton, {
+				variant: buttonVariation,
+				hoverVariant: hoverButtonVariation,
+				isDisabled: false,
+				content: suggestion,
+				boldText: boldFirstButton && i === 0,
+				borderRadius: buttonBorderRadius,
+				onClick: () => onButtonClick(suggestion),
+				dataTestId: __envive_ai_react_hooks_config.SUGGESTION_BAR_BUTTON_TESTID
+			}, i)), isAnimated && visibleButtonsSecondRow.map((suggestion, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_SuggestionButton.SuggestionButton, {
+				variant: buttonVariation,
+				hoverVariant: hoverButtonVariation,
+				isDisabled: false,
+				content: suggestion,
+				boldText: boldFirstButton && i === 0,
+				borderRadius: buttonBorderRadius,
+				onClick: () => onButtonClick(suggestion),
+				dataTestId: __envive_ai_react_hooks_config.SUGGESTION_BAR_BUTTON_TESTID
+			}, `animation-dupe-${i}`))] })
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SuggestionButtonContainer', {
+  enumerable: true,
+  get: function () {
+    return SuggestionButtonContainer;
+  }
+});

package/dist/SuggestionButtonContainer-CZhOkZaJ.js

@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotionConfig } from "framer-motion";
+import { SpiffyWidgets } from "@envive-ai/react-hooks/application/models";
+import { SUGGESTION_BAR_BUTTON_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";
+import { SuggestionButton } from "@envive-ai/react-toolkit/SuggestionButton";
+
+//#region src/util/useReducedMotionWithOverride.ts
+const useReducedMotionWithOverride = () => {
+	const reducedMotionConfig = useReducedMotionConfig();
+	return useMemo(() => {
+		if (window?._spiffy?.reducedMotionOverride) return window?._spiffy?.reducedMotionOverride;
+		return reducedMotionConfig;
+	}, [reducedMotionConfig]);
+};
+
+//#endregion
+//#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
+//#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",
+		children
+	});
+}
+const SuggestionButtonContainer = ({ buttonVariation, hoverButtonVariation, buttonTexts, boldFirstButton = false, twoRowsOnMobile = false, animationSpeed = "none", buttonBorderRadius = "lg", scrollContainerRef, onButtonClick }) => {
+	const componentVisibleTriggerRef = useRef(null);
+	useHorizontalScrollAnimation({
+		scrollContainerRef,
+		animationSpeed
+	});
+	const isSmallScreen = useIsSmallScreen();
+	const isAnimated = animationSpeed !== "none";
+	useTrackComponentVisibleEvent(SpiffyWidgets.SuggestionBar, componentVisibleTriggerRef, { animated: isAnimated });
+	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",
+		children: [/* @__PURE__ */ jsxs(ButtonContainer, { children: [visibleButtonsFirstRow.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
+			variant: buttonVariation,
+			hoverVariant: hoverButtonVariation,
+			isDisabled: false,
+			content: suggestion,
+			boldText: boldFirstButton && i === 0,
+			borderRadius: buttonBorderRadius,
+			onClick: () => onButtonClick(suggestion),
+			dataTestId: SUGGESTION_BAR_BUTTON_TESTID
+		}, i)), isAnimated && buttonTexts.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
+			variant: buttonVariation,
+			hoverVariant: hoverButtonVariation,
+			isDisabled: false,
+			content: suggestion,
+			boldText: boldFirstButton && i === 0,
+			borderRadius: buttonBorderRadius,
+			onClick: () => onButtonClick(suggestion),
+			dataTestId: SUGGESTION_BAR_BUTTON_TESTID
+		}, `animation-dupe-${i}`))] }), twoRowsOnMobile && isSmallScreen && /* @__PURE__ */ jsx("div", {
+			className: "spiffy-tw-mt-1.5",
+			children: /* @__PURE__ */ jsxs(ButtonContainer, { children: [visibleButtonsSecondRow.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
+				variant: buttonVariation,
+				hoverVariant: hoverButtonVariation,
+				isDisabled: false,
+				content: suggestion,
+				boldText: boldFirstButton && i === 0,
+				borderRadius: buttonBorderRadius,
+				onClick: () => onButtonClick(suggestion),
+				dataTestId: SUGGESTION_BAR_BUTTON_TESTID
+			}, i)), isAnimated && visibleButtonsSecondRow.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
+				variant: buttonVariation,
+				hoverVariant: hoverButtonVariation,
+				isDisabled: false,
+				content: suggestion,
+				boldText: boldFirstButton && i === 0,
+				borderRadius: buttonBorderRadius,
+				onClick: () => onButtonClick(suggestion),
+				dataTestId: SUGGESTION_BAR_BUTTON_TESTID
+			}, `animation-dupe-${i}`))] })
+		})]
+	});
+};
+
+//#endregion
+export { SuggestionButtonContainer as t };

package/dist/chunk-DWy1uDak.cjs

@@ -0,0 +1,39 @@
+//#region rolldown:runtime
+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 = 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;
+};
+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));
+
+//#endregion
+
+Object.defineProperty(exports, '__commonJS', {
+  enumerable: true,
+  get: function () {
+    return __commonJS;
+  }
+});
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets",
-  "version": "0.1.1",
+  "version": "0.1.2-arthur-2",
   "description": "React widget library for Envive services.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "get-merchants": "tsx ./.storybook/getMerchants.ts"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.7",
-    "@envive-ai/react-toolkit": "*",
+    "@envive-ai/react-hooks": "0.2.8",
+    "@envive-ai/react-toolkit": "0.2.13-arthur-1",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.24",
@@ -65,9 +65,21 @@
     "vitest": "^3.2.4"
   },
   "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+    "./SearchResults": {
+      "import": "./dist/SearchResults/index.js",
+      "require": "./dist/SearchResults/index.cjs"
+    },
+    "./SearchZeroState": {
+      "import": "./dist/SearchZeroState/index.js",
+      "require": "./dist/SearchZeroState/index.cjs"
+    },
+    "./SuggestionBar": {
+      "import": "./dist/SuggestionBar/index.js",
+      "require": "./dist/SuggestionBar/index.cjs"
+    },
+    "./SuggestionButtonContainer": {
+      "import": "./dist/SuggestionButtonContainer/index.js",
+      "require": "./dist/SuggestionButtonContainer/index.cjs"
     },
     "./package.json": "./package.json"
   },

package/src/SearchZeroState/SearchIcon.tsx

@@ -0,0 +1,57 @@
+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";
+
+interface SearchIconProps {
+  size?: number; // in px
+  variant?: SearchIconVariant;
+  color?: string;
+  onClick: () => void;
+  label?: string;
+  entryPointRef?: React.Ref<HTMLButtonElement>;
+}
+
+export const SearchIcon: React.FC<SearchIconProps> = ({
+  size = 22,
+  variant = 'thin',
+  color = 'currentColor',
+  onClick,
+  label,
+  entryPointRef,
+}) => {
+  const containerClasses = classNames([
+    'spiffy-global-search-input-container',
+    'spiffy-tw-relative',
+    'spiffy-tw-flex',
+    'spiffy-tw-items-center',
+  ]);
+
+  const iconStrokeWidth = variant === 'thin' ? 'inherit' : '2px';
+
+  const IconComponent = {
+    thin: AiSearchThin,
+    bold: AiSearchBold,
+  }[variant];
+
+  return (
+    <button
+      className={containerClasses}
+      type="button"
+      onClick={onClick}
+      data-testid={SEARCH_ENTRYPOINT_BUTTON_TESTID}
+      ref={entryPointRef}
+    >
+      <IconComponent style={{ width: size, height: size }} fill={color} strokeWidth={iconStrokeWidth} />
+      {label && (
+        <Typography variant="body3" className="spiffy-global-search-text">
+          {label}
+        </Typography>
+      )}
+    </button>
+  );
+};

package/src/SearchZeroState/SearchOverlay.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+import { getOverlayPortalTarget } from './overlay/overlayHostLocator';
+
+export interface SearchOverlayProps {
+  children?: React.ReactNode;
+  className?: string;
+  dataTestId?: string;
+  role?: string;
+  ariaModal?: boolean;
+  ariaLabelledby?: string;
+  id?: string;
+  usingPortal?: boolean;
+}
+
+export const SearchOverlay = React.forwardRef<HTMLDivElement, SearchOverlayProps>(
+  ({ 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 = (
+      <motion.div
+        ref={ref}
+        className={overlayClasses}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2 }}
+      >
+        <div
+          className={overlayContentClasses}
+          data-testid={dataTestId}
+          role={role}
+          aria-modal={ariaModal}
+          aria-labelledby={ariaLabelledby}
+          id={id}
+        >
+          {children}
+        </div>
+      </motion.div>
+    );
+
+    if (!usingPortal) {
+      return node;
+    }
+
+    // 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 
+    // 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 
+    // Bandolier for more info.
+    try {
+      const target = getOverlayPortalTarget();
+      return createPortal(node, target);
+    } catch (err) {
+      // If host is missing (misconfig), fall back inline overlay
+      return node;
+    }
+  },
+);