@envive-ai/react-toolkit 0.2.9 → 0.2.11

package/dist/ProductCard/index.d.cts

@@ -1,2 +1,82 @@
-import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, RatingSummaryProps, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../index-Dz7MKQfH.cjs";
-export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, RatingSummaryProps, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };
+import * as react_jsx_runtime26 from "react/jsx-runtime";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, TestProps } from "@envive-ai/types";
+import { FC } from "react";
+
+//#region src/components/ProductCard/ProductCard.d.ts
+interface RatingSummaryProps {
+  stars: number;
+  reviewCount: number;
+  className?: string;
+}
+declare const RatingSummary: ({
+  stars,
+  reviewCount,
+  className
+}: RatingSummaryProps) => react_jsx_runtime26.JSX.Element;
+interface PriceSectionProps {
+  originalPrice?: string;
+  salePrice?: string;
+  pricePrefix?: string;
+}
+declare const PriceSection: ({
+  originalPrice,
+  salePrice,
+  pricePrefix
+}: PriceSectionProps) => react_jsx_runtime26.JSX.Element;
+interface ProductCardProps extends TestProps {
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  title: string;
+  url: string;
+  imageUrl?: string;
+  originalPrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  salePrice?: number;
+  variant?: ProductCardVariant;
+  hoverVariant?: ProductCardHoverVariant;
+  layoutVariant?: ProductCardLayoutVariant;
+  zoomOnHover?: boolean;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  growWithContainer?: boolean;
+  onClick?: () => void;
+}
+declare const ProductCard: ({
+  productCardConfig,
+  merchantShortName,
+  imageUrl,
+  title,
+  url,
+  originalPrice,
+  averageRating,
+  numberReviews,
+  salePrice,
+  variant,
+  hoverVariant,
+  dataTestId,
+  layoutVariant,
+  zoomOnHover,
+  aspectRatio,
+  growWithContainer,
+  onClick
+}: ProductCardProps) => react_jsx_runtime26.JSX.Element;
+//#endregion
+//#region src/components/ProductCard/ProductCardSkeleton.d.ts
+type ProductCardImageAspectRatio = '3:4' | 'square' | 'none';
+interface ProductCardSkeletonProps {
+  layoutVariant: ProductCardLayoutVariant;
+  aspectRatio: ProductCardImageAspectRatio;
+  growWithContainer?: boolean;
+}
+declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;
+//#endregion
+//#region src/components/ProductCard/productCardVariants.d.ts
+/**
+ * Shared variant mapping configurations for ProductCard components
+ */
+declare const variantClassMap: Map<ProductCardVariant, string[]>;
+declare const variantHoverClassMap: Map<ProductCardHoverVariant, string[]>;
+declare const variantTitleColorMap: Map<ProductCardVariant, string>;
+declare const productCardLayoutVariantClasses: Record<ProductCardLayoutVariant, Record<string, string[]>>;
+//#endregion
+export { PriceSection, ProductCard, ProductCardSkeleton, RatingSummary, RatingSummaryProps, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/ProductCard/index.d.ts

@@ -1,2 +1,82 @@
-import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, RatingSummaryProps, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../index-Wd_cQHmW.js";
-export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, RatingSummaryProps, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };
+import * as react_jsx_runtime22 from "react/jsx-runtime";
+import { FC } from "react";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, TestProps } from "@envive-ai/types";
+
+//#region src/components/ProductCard/ProductCard.d.ts
+interface RatingSummaryProps {
+  stars: number;
+  reviewCount: number;
+  className?: string;
+}
+declare const RatingSummary: ({
+  stars,
+  reviewCount,
+  className
+}: RatingSummaryProps) => react_jsx_runtime22.JSX.Element;
+interface PriceSectionProps {
+  originalPrice?: string;
+  salePrice?: string;
+  pricePrefix?: string;
+}
+declare const PriceSection: ({
+  originalPrice,
+  salePrice,
+  pricePrefix
+}: PriceSectionProps) => react_jsx_runtime22.JSX.Element;
+interface ProductCardProps extends TestProps {
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  title: string;
+  url: string;
+  imageUrl?: string;
+  originalPrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  salePrice?: number;
+  variant?: ProductCardVariant;
+  hoverVariant?: ProductCardHoverVariant;
+  layoutVariant?: ProductCardLayoutVariant;
+  zoomOnHover?: boolean;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  growWithContainer?: boolean;
+  onClick?: () => void;
+}
+declare const ProductCard: ({
+  productCardConfig,
+  merchantShortName,
+  imageUrl,
+  title,
+  url,
+  originalPrice,
+  averageRating,
+  numberReviews,
+  salePrice,
+  variant,
+  hoverVariant,
+  dataTestId,
+  layoutVariant,
+  zoomOnHover,
+  aspectRatio,
+  growWithContainer,
+  onClick
+}: ProductCardProps) => react_jsx_runtime22.JSX.Element;
+//#endregion
+//#region src/components/ProductCard/ProductCardSkeleton.d.ts
+type ProductCardImageAspectRatio = '3:4' | 'square' | 'none';
+interface ProductCardSkeletonProps {
+  layoutVariant: ProductCardLayoutVariant;
+  aspectRatio: ProductCardImageAspectRatio;
+  growWithContainer?: boolean;
+}
+declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;
+//#endregion
+//#region src/components/ProductCard/productCardVariants.d.ts
+/**
+ * Shared variant mapping configurations for ProductCard components
+ */
+declare const variantClassMap: Map<ProductCardVariant, string[]>;
+declare const variantHoverClassMap: Map<ProductCardHoverVariant, string[]>;
+declare const variantTitleColorMap: Map<ProductCardVariant, string>;
+declare const productCardLayoutVariantClasses: Record<ProductCardLayoutVariant, Record<string, string[]>>;
+//#endregion
+export { PriceSection, ProductCard, ProductCardSkeleton, RatingSummary, RatingSummaryProps, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/ProductCard/index.js

@@ -1,6 +1,6 @@
-import "../Typography-D3vDkBMS.js";
-import "../ImageWithFallback-Ckwsmd8P.js";
-import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardSkeleton, ProductCardSkeletonOverrides, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../ProductCard-DRczevG8.js";
-import "../Spinner-BqTt55uu.js";
+import "../Typography-C3QmJzFK.js";
+import "../ImageWithFallback-BW57cQw-.js";
+import { PriceSection, ProductCard, ProductCardSkeleton, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../ProductCard-BiWAcPO4.js";
+import "../Spinner-D2HbRsuw.js";
 
-export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardSkeleton, ProductCardSkeletonOverrides, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };
+export { PriceSection, ProductCard, ProductCardSkeleton, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/{ProductCard-DRczevG8.js → ProductCard-BiWAcPO4.js}

@@ -1,8 +1,8 @@
-import { Typography } from "./Typography-D3vDkBMS.js";
-import { ImageWithFallback } from "./ImageWithFallback-Ckwsmd8P.js";
-import { Spinner } from "./Spinner-BqTt55uu.js";
-import classNames from "classnames";
+import { Typography } from "./Typography-C3QmJzFK.js";
+import { ImageWithFallback } from "./ImageWithFallback-BW57cQw-.js";
+import { Spinner } from "./Spinner-D2HbRsuw.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 import { MdStar } from "react-icons/md";
 import { useImageResolver } from "@envive-ai/react-hooks/hooks/ImageResolver";
 import { PRODUCT_CARD_TESTID } from "@envive-ai/react-hooks/config";
@@ -216,20 +216,12 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 };
 
 //#endregion
-//#region src/components/ProductCard/types.ts
-let ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
+//#region src/components/ProductCard/ProductCardSkeleton.tsx
+var ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
 	ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON_CONTAINER"] = "spiffy-product-card-skeleton-container";
 	ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON"] = "spiffy-product-card-skeleton";
 	return ProductCardSkeletonOverrides$1;
-}({});
-let AnimatedProductCardOverrides = /* @__PURE__ */ function(AnimatedProductCardOverrides$1) {
-	AnimatedProductCardOverrides$1["PRODUCT_CARD_ANIMATED_CONTAINER"] = "spiffy-product-card-animated-container";
-	AnimatedProductCardOverrides$1["PRODUCT_CARD_ANIMATED_IMAGE_CONTAINER"] = "spiffy-product-card-animated";
-	return AnimatedProductCardOverrides$1;
-}({});
-
-//#endregion
-//#region src/components/ProductCard/ProductCardSkeleton.tsx
+}(ProductCardSkeletonOverrides || {});
 const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
 	const layoutClasses = productCardLayoutVariantClasses[layoutVariant || "normal"];
 	const containerClasses = classNames(ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON_CONTAINER, "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-bg-transparent", !growWithContainer ? layoutClasses.container : "");
@@ -254,4 +246,4 @@ const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = f
 };
 
 //#endregion
-export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardSkeleton, ProductCardSkeletonOverrides, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };
+export { PriceSection, ProductCard, ProductCardSkeleton, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/{ProductCard-DksbHI3v.cjs → ProductCard-C2KvH4MN.cjs}

@@ -1,11 +1,11 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Typography = require('./Typography-CFNWgbM5.cjs');
-const require_ImageWithFallback = require('./ImageWithFallback-1LqhQK1q.cjs');
-const require_Spinner = require('./Spinner-DjK8ts9E.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
+const require_ImageWithFallback = require('./ImageWithFallback-DvaVpR6v.cjs');
+const require_Spinner = require('./Spinner-Ccy6VFEp.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
 let react_icons_md = require("react-icons/md");
 react_icons_md = require_chunk.__toESM(react_icons_md);
 let __envive_ai_react_hooks_hooks_ImageResolver = require("@envive-ai/react-hooks/hooks/ImageResolver");
@@ -222,20 +222,12 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 };
 
 //#endregion
-//#region src/components/ProductCard/types.ts
-let ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
+//#region src/components/ProductCard/ProductCardSkeleton.tsx
+var ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
 	ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON_CONTAINER"] = "spiffy-product-card-skeleton-container";
 	ProductCardSkeletonOverrides$1["PRODUCT_CARD_SKELETON"] = "spiffy-product-card-skeleton";
 	return ProductCardSkeletonOverrides$1;
-}({});
-let AnimatedProductCardOverrides = /* @__PURE__ */ function(AnimatedProductCardOverrides$1) {
-	AnimatedProductCardOverrides$1["PRODUCT_CARD_ANIMATED_CONTAINER"] = "spiffy-product-card-animated-container";
-	AnimatedProductCardOverrides$1["PRODUCT_CARD_ANIMATED_IMAGE_CONTAINER"] = "spiffy-product-card-animated";
-	return AnimatedProductCardOverrides$1;
-}({});
-
-//#endregion
-//#region src/components/ProductCard/ProductCardSkeleton.tsx
+}(ProductCardSkeletonOverrides || {});
 const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
 	const layoutClasses = productCardLayoutVariantClasses[layoutVariant || "normal"];
 	const containerClasses = (0, classnames.default)(ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON_CONTAINER, "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-bg-transparent", !growWithContainer ? layoutClasses.container : "");
@@ -260,12 +252,6 @@ const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = f
 };
 
 //#endregion
-Object.defineProperty(exports, 'AnimatedProductCardOverrides', {
-  enumerable: true,
-  get: function () {
-    return AnimatedProductCardOverrides;
-  }
-});
 Object.defineProperty(exports, 'PriceSection', {
   enumerable: true,
   get: function () {
@@ -284,12 +270,6 @@ Object.defineProperty(exports, 'ProductCardSkeleton', {
     return ProductCardSkeleton;
   }
 });
-Object.defineProperty(exports, 'ProductCardSkeletonOverrides', {
-  enumerable: true,
-  get: function () {
-    return ProductCardSkeletonOverrides;
-  }
-});
 Object.defineProperty(exports, 'RatingSummary', {
   enumerable: true,
   get: function () {

package/dist/ProductGrid/index.cjs

@@ -1,8 +1,8 @@
-require('../Typography-CFNWgbM5.cjs');
-require('../ImageWithFallback-1LqhQK1q.cjs');
-require('../ProductCard-DksbHI3v.cjs');
-require('../Spinner-DjK8ts9E.cjs');
-const require_ProductGrid = require('../ProductGrid-CStAsiRj.cjs');
+require('../Typography-Ds4gfOJz.cjs');
+require('../ImageWithFallback-DvaVpR6v.cjs');
+require('../ProductCard-C2KvH4MN.cjs');
+require('../Spinner-Ccy6VFEp.cjs');
+const require_ProductGrid = require('../ProductGrid-DkOyRAEg.cjs');
 
 exports.ProductGrid = require_ProductGrid.ProductGrid;
 exports.productGridVariantClasses = require_ProductGrid.productGridVariantClasses;

package/dist/ProductGrid/index.d.cts

@@ -1,6 +1,5 @@
-import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-Dz7MKQfH.cjs";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
-import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant, SearchResponseProductAttributes } from "@envive-ai/types";
 
 //#region src/components/ProductGrid/ProductGrid.d.ts
 interface ProductGridProps {
@@ -10,6 +9,7 @@ interface ProductGridProps {
   productCardConfig: ProductCardConfig;
   merchantShortName: string;
   cardsGrowWithContainer?: boolean;
+  onProductClick?: (product: SearchResponseProductAttributes['attributes'], index: number) => void;
 }
 declare const ProductGrid: ({
   productList,
@@ -17,8 +17,9 @@ declare const ProductGrid: ({
   productGridClasses,
   productCardConfig,
   merchantShortName,
-  cardsGrowWithContainer
-}: ProductGridProps) => react_jsx_runtime19.JSX.Element;
+  cardsGrowWithContainer,
+  onProductClick
+}: ProductGridProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 //#region src/components/ProductGrid/productGridVariants.d.ts
 interface ProductGridVariantClasses {

package/dist/ProductGrid/index.d.ts

@@ -1,6 +1,5 @@
-import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-Wd_cQHmW.js";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
-import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant, SearchResponseProductAttributes } from "@envive-ai/types";
 
 //#region src/components/ProductGrid/ProductGrid.d.ts
 interface ProductGridProps {
@@ -10,6 +9,7 @@ interface ProductGridProps {
   productCardConfig: ProductCardConfig;
   merchantShortName: string;
   cardsGrowWithContainer?: boolean;
+  onProductClick?: (product: SearchResponseProductAttributes['attributes'], index: number) => void;
 }
 declare const ProductGrid: ({
   productList,
@@ -17,8 +17,9 @@ declare const ProductGrid: ({
   productGridClasses,
   productCardConfig,
   merchantShortName,
-  cardsGrowWithContainer
-}: ProductGridProps) => react_jsx_runtime19.JSX.Element;
+  cardsGrowWithContainer,
+  onProductClick
+}: ProductGridProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 //#region src/components/ProductGrid/productGridVariants.d.ts
 interface ProductGridVariantClasses {

package/dist/ProductGrid/index.js

@@ -1,7 +1,7 @@
-import "../Typography-D3vDkBMS.js";
-import "../ImageWithFallback-Ckwsmd8P.js";
-import "../ProductCard-DRczevG8.js";
-import "../Spinner-BqTt55uu.js";
-import { ProductGrid, productGridVariantClasses } from "../ProductGrid-B36atUp5.js";
+import "../Typography-C3QmJzFK.js";
+import "../ImageWithFallback-BW57cQw-.js";
+import "../ProductCard-BiWAcPO4.js";
+import "../Spinner-D2HbRsuw.js";
+import { ProductGrid, productGridVariantClasses } from "../ProductGrid-B1RtE58G.js";
 
 export { ProductGrid, productGridVariantClasses };

package/dist/{ProductGrid-B36atUp5.js → ProductGrid-B1RtE58G.js}

@@ -1,6 +1,6 @@
-import { ProductCard } from "./ProductCard-DRczevG8.js";
-import classNames from "classnames";
+import { ProductCard } from "./ProductCard-BiWAcPO4.js";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/ProductGrid/productGridVariants.ts
 const productGridVariantClasses = {
@@ -22,7 +22,7 @@ const productGridVariantClasses = {
 
 //#endregion
 //#region src/components/ProductGrid/ProductGrid.tsx
-const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true }) => {
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true, onProductClick }) => {
 	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
 	const cardContainerClasses = classNames({
 		"spiffy-tw-w-full": cardsGrowWithContainer,
@@ -30,7 +30,7 @@ const ProductGrid = ({ productList, productGridVariant, productGridClasses, prod
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: productGridClasses,
-		children: productList.map((product) => /* @__PURE__ */ jsx("div", {
+		children: productList.map((product, index) => /* @__PURE__ */ jsx("div", {
 			className: cardContainerClasses,
 			children: /* @__PURE__ */ jsx(ProductCard, {
 				productCardConfig,
@@ -47,7 +47,8 @@ const ProductGrid = ({ productList, productGridVariant, productGridClasses, prod
 				hoverVariant: productCardHoverVariant,
 				zoomOnHover,
 				aspectRatio: productCardImageAspectRatio,
-				growWithContainer: cardsGrowWithContainer
+				growWithContainer: cardsGrowWithContainer,
+				onClick: () => onProductClick?.(product, index)
 			})
 		}, product.id))
 	});

package/dist/{ProductGrid-CStAsiRj.cjs → ProductGrid-DkOyRAEg.cjs}

@@ -1,9 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_ProductCard = require('./ProductCard-DksbHI3v.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+const require_ProductCard = require('./ProductCard-C2KvH4MN.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
 
 //#region src/components/ProductGrid/productGridVariants.ts
 const productGridVariantClasses = {
@@ -25,7 +25,7 @@ const productGridVariantClasses = {
 
 //#endregion
 //#region src/components/ProductGrid/ProductGrid.tsx
-const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true }) => {
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, cardsGrowWithContainer = true, onProductClick }) => {
 	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
 	const cardContainerClasses = (0, classnames.default)({
 		"spiffy-tw-w-full": cardsGrowWithContainer,
@@ -33,7 +33,7 @@ const ProductGrid = ({ productList, productGridVariant, productGridClasses, prod
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: productGridClasses,
-		children: productList.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: productList.map((product, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cardContainerClasses,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCard, {
 				productCardConfig,
@@ -50,7 +50,8 @@ const ProductGrid = ({ productList, productGridVariant, productGridClasses, prod
 				hoverVariant: productCardHoverVariant,
 				zoomOnHover,
 				aspectRatio: productCardImageAspectRatio,
-				growWithContainer: cardsGrowWithContainer
+				growWithContainer: cardsGrowWithContainer,
+				onClick: () => onProductClick?.(product, index)
 			})
 		}, product.id))
 	});

package/dist/RadioButton/index.cjs

@@ -1,4 +1,4 @@
-require('../Typography-CFNWgbM5.cjs');
-const require_RadioButton = require('../RadioButton-OqwNhq7S.cjs');
+require('../Typography-Ds4gfOJz.cjs');
+const require_RadioButton = require('../RadioButton-DP-qs5cy.cjs');
 
 exports.RadioButton = require_RadioButton.RadioButton;

package/dist/RadioButton/index.d.cts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/types";
 
 //#region src/components/RadioButton/RadioButton.d.ts
 interface RadioButtonProps extends TestProps {
@@ -27,6 +27,6 @@ declare const RadioButton: ({
   checked,
   onChange,
   id
-}: RadioButtonProps) => react_jsx_runtime15.JSX.Element;
+}: RadioButtonProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { RadioButton };

package/dist/RadioButton/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime24 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/types";
 
 //#region src/components/RadioButton/RadioButton.d.ts
 interface RadioButtonProps extends TestProps {
@@ -27,6 +27,6 @@ declare const RadioButton: ({
   checked,
   onChange,
   id
-}: RadioButtonProps) => react_jsx_runtime24.JSX.Element;
+}: RadioButtonProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { RadioButton };

package/dist/RadioButton/index.js

@@ -1,4 +1,4 @@
-import "../Typography-D3vDkBMS.js";
-import { RadioButton } from "../RadioButton-DoqlQgeW.js";
+import "../Typography-C3QmJzFK.js";
+import { RadioButton } from "../RadioButton-CQ6qOvBl.js";
 
 export { RadioButton };

package/dist/{RadioButton-DoqlQgeW.js → RadioButton-CQ6qOvBl.js}

@@ -1,7 +1,7 @@
-import { Typography } from "./Typography-D3vDkBMS.js";
+import { Typography } from "./Typography-C3QmJzFK.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/RadioButton/RadioButton.tsx
 const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {

package/dist/{RadioButton-OqwNhq7S.cjs → RadioButton-DP-qs5cy.cjs}

@@ -1,11 +1,11 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Typography = require('./Typography-CFNWgbM5.cjs');
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
 //#region src/components/RadioButton/RadioButton.tsx
 const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {

package/dist/RadioButtonGroup/index.cjs

@@ -1,6 +1,6 @@
-require('../Typography-CFNWgbM5.cjs');
-require('../RadioButton-OqwNhq7S.cjs');
-const require_RadioButtonGroup = require('../RadioButtonGroup-DwMWFYga.cjs');
+require('../Typography-Ds4gfOJz.cjs');
+require('../RadioButton-DP-qs5cy.cjs');
+const require_RadioButtonGroup = require('../RadioButtonGroup-CJPWfAaA.cjs');
 
 exports.RadioButtonGroup = require_RadioButtonGroup.RadioButtonGroup;
 exports.SPIFFY_RADIO_BUTTON_GROUP_CLASS = require_RadioButtonGroup.SPIFFY_RADIO_BUTTON_GROUP_CLASS;

package/dist/RadioButtonGroup/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime16 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
+import { TestProps } from "@envive-ai/types";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
 declare const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";

package/dist/RadioButtonGroup/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/types";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
 declare const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
@@ -31,6 +31,6 @@ declare const RadioButtonGroup: ({
   gap,
   textButtonGap,
   onChange
-}: RadioButtonGroupProps) => react_jsx_runtime9.JSX.Element;
+}: RadioButtonGroupProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/RadioButtonGroup/index.js

@@ -1,5 +1,5 @@
-import "../Typography-D3vDkBMS.js";
-import "../RadioButton-DoqlQgeW.js";
-import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "../RadioButtonGroup-BP4aECu6.js";
+import "../Typography-C3QmJzFK.js";
+import "../RadioButton-CQ6qOvBl.js";
+import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "../RadioButtonGroup-Ce8cKqYw.js";
 
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/{RadioButtonGroup-DwMWFYga.cjs → RadioButtonGroup-CJPWfAaA.cjs}

@@ -1,9 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_RadioButton = require('./RadioButton-OqwNhq7S.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+const require_RadioButton = require('./RadioButton-DP-qs5cy.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
 const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";

package/dist/{RadioButtonGroup-BP4aECu6.js → RadioButtonGroup-Ce8cKqYw.js}

@@ -1,6 +1,6 @@
-import { RadioButton } from "./RadioButton-DoqlQgeW.js";
-import classNames from "classnames";
+import { RadioButton } from "./RadioButton-CQ6qOvBl.js";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
 const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";

package/dist/SearchAutocomplete/index.cjs

@@ -1,4 +1,4 @@
-require('../Typography-CFNWgbM5.cjs');
-const require_SearchAutocomplete = require('../SearchAutocomplete-DAEDHeqr.cjs');
+require('../Typography-Ds4gfOJz.cjs');
+const require_SearchAutocomplete = require('../SearchAutocomplete-bbMvWWjI.cjs');
 
 exports.SearchAutocomplete = require_SearchAutocomplete.SearchAutocomplete;

package/dist/SearchAutocomplete/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/SearchAutocomplete/SearchAutocomplete.d.ts
 interface GlobalSearchAutocompleteProps {
@@ -16,6 +16,6 @@ declare const SearchAutocomplete: ({
   searchText,
   onSuggestionSelect,
   iconColor
-}: GlobalSearchAutocompleteProps) => react_jsx_runtime12.JSX.Element;
+}: GlobalSearchAutocompleteProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { SearchAutocomplete };