@envive-ai/react-toolkit 0.2.7 → 0.2.9

package/dist/SearchResultsStates/index.cjs

@@ -1,12 +1,12 @@
 require('../Typography-CFNWgbM5.cjs');
 require('../DynamicFiltersScrollbar-50i_InZz.cjs');
 require('../ImageWithFallback-1LqhQK1q.cjs');
-require('../ProductCard-CByKIsUN.cjs');
+require('../ProductCard-DksbHI3v.cjs');
 require('../Spinner-DjK8ts9E.cjs');
-require('../ProductGrid-BeFeluHo.cjs');
-require('../colorsConfig-CJTKbJsm.cjs');
-const require_SearchResultsStates = require('../SearchResultsStates-CG8-Ga-G.cjs');
-require('../searchFilterSidebarVariants-Bv_5N0Qd.cjs');
+require('../ProductGrid-CStAsiRj.cjs');
+require('../colorsConfig-BjmNL7s7.cjs');
+const require_SearchResultsStates = require('../SearchResultsStates-CKoDWkXP.cjs');
+require('../searchFilterSidebarVariants-B1P8YS86.cjs');
 require('../SparkleAnimation-CvGlWUqv.cjs');
 
 exports.NoSearchResultsFound = require_SearchResultsStates.NoSearchResultsFound;

package/dist/SearchResultsStates/index.d.cts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant } from "../index-DZG-p0HX.cjs";
-import { SearchFilterSidebarVariant } from "../index-Br1B7Jta.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant } from "../index-Dz7MKQfH.cjs";
+import { SearchFilterSidebarVariant } from "../index-Dfe_lkL2.cjs";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -16,7 +16,7 @@ declare const NoSearchResultsFound: ({
   includeBottomMargin,
   noResultsFoundText,
   sparkleIconColor
-}: NoSearchResultsFoundProps) => react_jsx_runtime2.JSX.Element;
+}: NoSearchResultsFoundProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsGrid.d.ts
 interface SearchResultsGridProps {
@@ -53,7 +53,7 @@ declare const SearchResultsGrid: ({
   productGridClasses,
   onRemoveFilter,
   onToggleDynamicFilter
-}: SearchResultsGridProps) => react_jsx_runtime2.JSX.Element;
+}: SearchResultsGridProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts
 declare const SearchResultsLoadingGrid: ({
@@ -64,6 +64,6 @@ declare const SearchResultsLoadingGrid: ({
   productGridVariant: ProductGridVariant;
   productGridClasses: string;
   sparkleIconColor?: string;
-}) => react_jsx_runtime2.JSX.Element;
+}) => react_jsx_runtime8.JSX.Element;
 //#endregion
 export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/SearchResultsStates/index.d.ts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant } from "../index-CoKLba8Y.js";
-import { SearchFilterSidebarVariant } from "../index-qY2eo4Dx.js";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant } from "../index-Wd_cQHmW.js";
+import { SearchFilterSidebarVariant } from "../index-DL1kptAp.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -16,7 +16,7 @@ declare const NoSearchResultsFound: ({
   includeBottomMargin,
   noResultsFoundText,
   sparkleIconColor
-}: NoSearchResultsFoundProps) => react_jsx_runtime10.JSX.Element;
+}: NoSearchResultsFoundProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsGrid.d.ts
 interface SearchResultsGridProps {
@@ -53,7 +53,7 @@ declare const SearchResultsGrid: ({
   productGridClasses,
   onRemoveFilter,
   onToggleDynamicFilter
-}: SearchResultsGridProps) => react_jsx_runtime10.JSX.Element;
+}: SearchResultsGridProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts
 declare const SearchResultsLoadingGrid: ({
@@ -64,6 +64,6 @@ declare const SearchResultsLoadingGrid: ({
   productGridVariant: ProductGridVariant;
   productGridClasses: string;
   sparkleIconColor?: string;
-}) => react_jsx_runtime10.JSX.Element;
+}) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/SearchResultsStates/index.js

@@ -1,12 +1,12 @@
 import "../Typography-D3vDkBMS.js";
 import "../DynamicFiltersScrollbar-AhyHehrB.js";
 import "../ImageWithFallback-Ckwsmd8P.js";
-import "../ProductCard-BIlnM2nV.js";
+import "../ProductCard-DRczevG8.js";
 import "../Spinner-BqTt55uu.js";
-import "../ProductGrid-Cgkb4vNf.js";
-import "../colorsConfig-CYZ8f_gj.js";
-import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-CTgVvFe9.js";
-import "../searchFilterSidebarVariants-Dc0irQTl.js";
+import "../ProductGrid-B36atUp5.js";
+import "../colorsConfig-E7w6Ol6W.js";
+import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-DF65ZU2r.js";
+import "../searchFilterSidebarVariants-CN9_kzJ8.js";
 import "../SparkleAnimation-paLhSu5E.js";
 
 export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/{SearchResultsStates-CG8-Ga-G.cjs → SearchResultsStates-CKoDWkXP.cjs}

@@ -1,9 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-CFNWgbM5.cjs');
 const require_DynamicFiltersScrollbar = require('./DynamicFiltersScrollbar-50i_InZz.cjs');
-const require_ProductCard = require('./ProductCard-CByKIsUN.cjs');
-const require_ProductGrid = require('./ProductGrid-BeFeluHo.cjs');
-const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-Bv_5N0Qd.cjs');
+const require_ProductCard = require('./ProductCard-DksbHI3v.cjs');
+const require_ProductGrid = require('./ProductGrid-CStAsiRj.cjs');
+const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-B1P8YS86.cjs');
 const require_SparkleAnimation = require('./SparkleAnimation-CvGlWUqv.cjs');
 let framer_motion = require("framer-motion");
 framer_motion = require_chunk.__toESM(framer_motion);

package/dist/{SearchResultsStates-CTgVvFe9.js → SearchResultsStates-DF65ZU2r.js}

@@ -1,8 +1,8 @@
 import { Typography } from "./Typography-D3vDkBMS.js";
 import { AppliedFiltersScrollbar, DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-AhyHehrB.js";
-import { ProductCardSkeleton } from "./ProductCard-BIlnM2nV.js";
-import { ProductGrid, productGridVariantClasses } from "./ProductGrid-Cgkb4vNf.js";
-import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-Dc0irQTl.js";
+import { ProductCardSkeleton } from "./ProductCard-DRczevG8.js";
+import { ProductGrid, productGridVariantClasses } from "./ProductGrid-B36atUp5.js";
+import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-CN9_kzJ8.js";
 import { SparkleAnimation } from "./SparkleAnimation-paLhSu5E.js";
 import { motion } from "framer-motion";
 import classNames from "classnames";

package/dist/SparkleAnimation/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/SparkleAnimation/SparkleAnimation.d.ts
 interface SparkleAnimationProps {
@@ -10,7 +10,7 @@ declare const SparkleAnimation: ({
   color,
   className,
   animate
-}: SparkleAnimationProps) => react_jsx_runtime13.JSX.Element;
+}: SparkleAnimationProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 //#region src/components/SparkleAnimation/types.d.ts
 declare enum SparkleAnimationOverride {

package/dist/Spinner/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Spinner/Spinner.d.ts
 type SpinnerProps = {
@@ -6,6 +6,6 @@ type SpinnerProps = {
 };
 declare const Spinner: ({
   className
-}: SpinnerProps) => react_jsx_runtime27.JSX.Element;
+}: SpinnerProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Spinner };

package/dist/Spinner/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/Spinner/Spinner.d.ts
 type SpinnerProps = {
@@ -6,6 +6,6 @@ type SpinnerProps = {
 };
 declare const Spinner: ({
   className
-}: SpinnerProps) => react_jsx_runtime4.JSX.Element;
+}: SpinnerProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { Spinner };

package/dist/SuggestionButton/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SuggestionButton/types.d.ts
@@ -30,6 +30,6 @@ declare const SuggestionButton: ({
   dataAttributes,
   dataTestId,
   onClick
-}: SuggestionButtonProps) => react_jsx_runtime4.JSX.Element;
+}: SuggestionButtonProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };

package/dist/SuggestionButton/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SuggestionButton/types.d.ts
@@ -30,6 +30,6 @@ declare const SuggestionButton: ({
   dataAttributes,
   dataTestId,
   onClick
-}: SuggestionButtonProps) => react_jsx_runtime15.JSX.Element;
+}: SuggestionButtonProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };

package/dist/TextInput/index.cjs

@@ -1,4 +1,4 @@
 require('../Typography-CFNWgbM5.cjs');
-const require_TextInput = require('../TextInput-Cih-pWCJ.cjs');
+const require_TextInput = require('../TextInput-BTTG_drp.cjs');
 
 exports.TextInput = require_TextInput.TextInput;

package/dist/TextInput/index.js

@@ -1,4 +1,4 @@
 import "../Typography-D3vDkBMS.js";
-import { TextInput } from "../TextInput-C9wyXFlx.js";
+import { TextInput } from "../TextInput-BfUhaQUc.js";
 
 export { TextInput };

package/dist/ToggleButton/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime16.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/{index-qY2eo4Dx.d.ts → index-DL1kptAp.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime14.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-Br1B7Jta.d.cts → index-Dfe_lkL2.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime0.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-CoKLba8Y.d.ts → index-Dz7MKQfH.d.cts}

@@ -1,6 +1,6 @@
-import { FC } from "react";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
+import { FC } from "react";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
 //#region src/util/trim.d.ts
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime26.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime20.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime26.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime20.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -288,7 +288,7 @@ interface ProductCardProps extends TestProps {
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
-  handleClick?: (clickedUrl: string) => void;
+  onClick?: () => void;
 }
 declare const ProductCard: ({
   productCardConfig,
@@ -307,8 +307,8 @@ declare const ProductCard: ({
   zoomOnHover,
   aspectRatio,
   growWithContainer,
-  handleClick
-}: ProductCardProps) => react_jsx_runtime26.JSX.Element;
+  onClick
+}: ProductCardProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-DZG-p0HX.d.cts → index-Wd_cQHmW.d.ts}

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
 import { FC } from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
 //#region src/util/trim.d.ts
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime19.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime6.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime19.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime6.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -288,7 +288,7 @@ interface ProductCardProps extends TestProps {
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
-  handleClick?: (clickedUrl: string) => void;
+  onClick?: () => void;
 }
 declare const ProductCard: ({
   productCardConfig,
@@ -307,8 +307,8 @@ declare const ProductCard: ({
   zoomOnHover,
   aspectRatio,
   growWithContainer,
-  handleClick
-}: ProductCardProps) => react_jsx_runtime19.JSX.Element;
+  onClick
+}: ProductCardProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{searchFilterSidebarVariants-Bv_5N0Qd.cjs → searchFilterSidebarVariants-B1P8YS86.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-CJTKbJsm.cjs');
+const require_colorsConfig = require('./colorsConfig-BjmNL7s7.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-Dc0irQTl.js → searchFilterSidebarVariants-CN9_kzJ8.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-CYZ8f_gj.js";
+import { ColorNames, colorVar } from "./colorsConfig-E7w6Ol6W.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -28,16 +28,16 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.8",
+    "@envive-ai/react-hooks": "0.2.5",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha"
   },
   "peerDependencies": {
+    "framer-motion": ">=12.23.24",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "framer-motion": ">=12.23.24"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^24.3.2",

package/src/components/ProductCard/ProductCard.tsx

@@ -5,6 +5,7 @@ import { Typography } from 'src/components/Typography';
 import { formatPrice } from 'src/util/formatPrice';
 import { TestProps } from '@envive-ai/react-hooks/types';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
+import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
   variantClassMap,
   variantHoverClassMap,
@@ -112,7 +113,7 @@ interface ProductCardProps extends TestProps {
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
-  handleClick?: (clickedUrl: string) => void;
+  onClick?: () => void;
 }
 
 export const ProductCard = ({
@@ -132,7 +133,7 @@ export const ProductCard = ({
   zoomOnHover = false,
   aspectRatio = 'none',
   growWithContainer = false,
-  handleClick,
+  onClick,
 }: ProductCardProps) => {
   const { resolve } = useImageResolver();
 
@@ -141,6 +142,8 @@ export const ProductCard = ({
   const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? 'normal';
   const pricePrefix = productCardConfig?.pricePrefix;
 
+  const handleClick = () => onClick();
+
   if (productCardConfig == null) {
     Logger.logError('[ProductCard] productCardConfig is null', undefined, {
       merchant: merchantShortName,
@@ -161,6 +164,7 @@ export const ProductCard = ({
       'spiffy-tw-h-full': growWithContainer,
       'spiffy-tw-w-full': growWithContainer,
       'spiffy-tw-max-w-full': growWithContainer,
+      'spiffy-tw-rounded-[8px]': layoutVariant === 'normal',
     },
     !growWithContainer && layoutClasses.container,
     variantClassMap.get(finalVariant) ?? [],
@@ -209,11 +213,11 @@ export const ProductCard = ({
     linkClassnames,
     zoomOnHover
       ? [
-          'spiffy-tw-transition-transform',
-          'spiffy-tw-duration-200',
-          'spiffy-tw-origin-top',
-          'hover:spiffy-tw-scale-105',
-        ]
+        'spiffy-tw-transition-transform',
+        'spiffy-tw-duration-200',
+        'spiffy-tw-origin-top',
+        'hover:spiffy-tw-scale-105',
+      ]
       : [],
   );
 
@@ -260,8 +264,8 @@ export const ProductCard = ({
   );
 
   return (
-    <div className={containerClassnames} data-testid={dataTestId}>
-      <a href={url} onClick={() => handleClick(url)} target="_self" draggable={false}>
+    <div className={containerClassnames} data-testid={dataTestId ?? PRODUCT_CARD_TESTID}>
+      <a href={url} onClick={() => handleClick()} target="_self" draggable={false}>
         <div className={verticalContainerClassnames}>
           <div className={imageClipContainerClassnames}>
             <div className={imageContainerClassnames}>

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,14 +1,13 @@
 import classNames from 'classnames';
-import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
-import { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
+import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
 import { productGridVariantClasses } from './productGridVariants';
 import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
 
 interface ProductGridProps {
-  productList: SearchResponseProduct[];
+  productList: SearchResponseProductAttributes['attributes'][];
   productGridVariant: ProductGridVariant;
   productGridClasses: string;
-  productCardConfig?: ProductCardConfig;
+  productCardConfig: ProductCardConfig;
   merchantShortName: string;
   cardsGrowWithContainer?: boolean;
 }
@@ -36,31 +35,27 @@ export const ProductGrid = ({
 
   return (
     <div className={productGridClasses}>
-      {productList.map((product: SearchResponseProduct) => {
-        const camelCasedProduct: CamelCasedPropertiesDeep<SearchResponseProduct> = product;
-        return (
-          <div key={camelCasedProduct.id} className={cardContainerClasses}>
-            <ProductCard
-              productCardConfig={productCardConfig}
-              merchantShortName={merchantShortName}
-              key={camelCasedProduct.id}
-              imageUrl={camelCasedProduct.imageUrl}
-              title={camelCasedProduct.title}
-              url={camelCasedProduct.url}
-              originalPrice={camelCasedProduct.originalPrice}
-              salePrice={camelCasedProduct.salePrice}
-              averageRating={camelCasedProduct.averageRating}
-              numberReviews={camelCasedProduct.numberReviews}
-              layoutVariant={productCardLayoutVariant}
-              variant={productCardVariant}
-              hoverVariant={productCardHoverVariant}
-              zoomOnHover={zoomOnHover}
-              aspectRatio={productCardImageAspectRatio}
-              growWithContainer={cardsGrowWithContainer}
-            />
-          </div>
-        );
-      })}
+      {productList.map((product: (typeof productList)[0]) => (
+        <div key={product.id} className={cardContainerClasses}>
+          <ProductCard
+            productCardConfig={productCardConfig}
+            merchantShortName={merchantShortName}
+            imageUrl={product.imageUrl}
+            title={product.title}
+            url={product.url}
+            originalPrice={product.originalPrice}
+            salePrice={product.salePrice}
+            averageRating={product.averageRating}
+            numberReviews={product.numberReviews}
+            layoutVariant={productCardLayoutVariant}
+            variant={productCardVariant}
+            hoverVariant={productCardHoverVariant}
+            zoomOnHover={zoomOnHover}
+            aspectRatio={productCardImageAspectRatio}
+            growWithContainer={cardsGrowWithContainer}
+          />
+        </div>
+      ))}
     </div>
   );
 };

package/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { useState } from 'react';
 import { TestProps } from '@envive-ai/react-hooks/types';
+import { Typography } from '../Typography';
 
 interface RadioButtonProps extends TestProps {
   isDisabled?: boolean;
@@ -55,7 +56,13 @@ export const RadioButton = ({
   };
 
   return (
-    <>
+    <label
+      className={containerClassName}
+      onMouseEnter={() => !isDisabled && setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      aria-label={label}
+      htmlFor={id}
+    >
       <div className="spiffy-tw-relative">
         <input
           type="radio"
@@ -80,15 +87,7 @@ export const RadioButton = ({
           {checked && <circle cx="12" cy="12" r="9" fill={getFillColor()} />}
         </svg>
       </div>
-      <label
-        className={containerClassName}
-        onMouseEnter={() => !isDisabled && setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        aria-label={label}
-        htmlFor={id}
-      >
-        {label}
-      </label>
-    </>
+      <Typography variant="body3">{label}</Typography>
+    </label>
   );
 };

package/src/config/chatElementDisplayLocation.ts

@@ -14,6 +14,7 @@ export enum ChatElementDisplayLocation {
   SEARCH_NAV_ENTRYPOINT = 'search_nav_entrypoint',
   SEARCH_PROMPT = 'search_prompt',
   SEARCH_PROMPT_BUTTON = 'search_prompt_button',
+  SEARCH_ZERO_STATE_SUGGESTED_PRODUCTS = 'search_zero_state_suggested_products',
   PRODUCT_GRID = 'product_grid',
   UNSPECIFIED = 'unspecified',
   FILTER_MODAL = 'filter_modal',