@envive-ai/react-toolkit 0.1.4 → 0.1.6

package/dist/{common/ImageWithFallback/ImageWithFallback.d.ts → ImageWithFallback/index.d.cts}

@@ -1,7 +1,7 @@
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 import React from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
 
-//#region src/components/common/ImageWithFallback/ImageWithFallback.d.ts
+//#region src/components/ImageWithFallback/ImageWithFallback.d.ts
 interface ImageWithFallbackProps {
   src: string | undefined;
   alt: string;
@@ -21,6 +21,6 @@ declare const ImageWithFallback: ({
   imageClassnames,
   onLoad,
   onError
-}: ImageWithFallbackProps) => react_jsx_runtime3.JSX.Element;
+}: ImageWithFallbackProps) => react_jsx_runtime15.JSX.Element;
 //#endregion
 export { ImageWithFallback, ImageWithFallbackProps };

package/dist/{common/ImageWithFallback/ImageWithFallback.d.cts → ImageWithFallback/index.d.ts}

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region src/components/common/ImageWithFallback/ImageWithFallback.d.ts
+//#region src/components/ImageWithFallback/ImageWithFallback.d.ts
 interface ImageWithFallbackProps {
   src: string | undefined;
   alt: string;

package/dist/ImageWithFallback/index.js

@@ -0,0 +1,3 @@
+import { ImageWithFallback } from "../ImageWithFallback-Ckwsmd8P.js";
+
+export { ImageWithFallback };

package/dist/{ImageWithFallback-ioeMFrTf.cjs → ImageWithFallback-1LqhQK1q.cjs}

@@ -1,12 +1,12 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
 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/common/ImageWithFallback/ImageWithFallback.tsx
+//#region src/components/ImageWithFallback/ImageWithFallback.tsx
 const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
 	const [isLoaded, setIsLoaded] = (0, react.useState)(false);
 	const [isError, setIsError] = (0, react.useState)(false);

package/dist/{ImageWithFallback-gN5HDS9L.js → ImageWithFallback-Ckwsmd8P.js}

@@ -1,8 +1,8 @@
-import classNames from "classnames";
 import React, { useState } from "react";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/common/ImageWithFallback/ImageWithFallback.tsx
+//#region src/components/ImageWithFallback/ImageWithFallback.tsx
 const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
 	const [isLoaded, setIsLoaded] = useState(false);
 	const [isError, setIsError] = useState(false);

package/dist/ProductCard/index.cjs

@@ -0,0 +1,17 @@
+require('../textVariantClasses-BnV4wXaw.cjs');
+require('../Text-CgOYTs8D.cjs');
+require('../Headline-iP_MckEO.cjs');
+require('../ImageWithFallback-1LqhQK1q.cjs');
+const require_ProductCard = require('../ProductCard-DZZKutY-.cjs');
+require('../Spinner-DzdIkS6t.cjs');
+
+exports.AnimatedProductCardOverrides = require_ProductCard.AnimatedProductCardOverrides;
+exports.PriceSection = require_ProductCard.PriceSection;
+exports.ProductCard = require_ProductCard.ProductCard;
+exports.ProductCardSkeleton = require_ProductCard.ProductCardSkeleton;
+exports.ProductCardSkeletonOverrides = require_ProductCard.ProductCardSkeletonOverrides;
+exports.RatingSummary = require_ProductCard.RatingSummary;
+exports.productCardLayoutVariantClasses = require_ProductCard.productCardLayoutVariantClasses;
+exports.variantClassMap = require_ProductCard.variantClassMap;
+exports.variantHoverClassMap = require_ProductCard.variantHoverClassMap;
+exports.variantTitleColorMap = require_ProductCard.variantTitleColorMap;

package/dist/ProductCard/index.d.cts

@@ -0,0 +1,3 @@
+import "../types-BQYpWDJ4.cjs";
+import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../index-wYn2mEDm.cjs";
+export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/ProductCard/index.d.ts

@@ -0,0 +1,3 @@
+import "../types-BruEHw-X.js";
+import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../index-CcnuEYQN.js";
+export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/ProductCard/index.js

@@ -0,0 +1,8 @@
+import "../textVariantClasses-CnjwO2Fv.js";
+import "../Text-BMg3d10t.js";
+import "../Headline-XpaAeTSR.js";
+import "../ImageWithFallback-Ckwsmd8P.js";
+import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardSkeleton, ProductCardSkeletonOverrides, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../ProductCard-SF8-lXlT.js";
+import "../Spinner-BgGihEfJ.js";
+
+export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardSkeleton, ProductCardSkeletonOverrides, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/{ProductCard-C7WUShhN.cjs → ProductCard-DZZKutY-.cjs}

@@ -1,16 +1,61 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Text = require('./Text-C04c4Z93.cjs');
-const require_ImageWithFallback = require('./ImageWithFallback-ioeMFrTf.cjs');
-const require_Headline = require('./Headline-CcWn0w-a.cjs');
-const require_productCardVariants = require('./productCardVariants-Dd-wrJKP.cjs');
-const require_Spinner = require('./Spinner-CfQ85Ajl.cjs');
+const require_Text = require('./Text-CgOYTs8D.cjs');
+const require_Headline = require('./Headline-iP_MckEO.cjs');
+const require_ImageWithFallback = require('./ImageWithFallback-1LqhQK1q.cjs');
+const require_Spinner = require('./Spinner-DzdIkS6t.cjs');
 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);
 let react_icons_md = require("react-icons/md");
 react_icons_md = require_chunk.__toESM(react_icons_md);
+let __envive_ai_react_hooks_hooks = require("@envive-ai/react-hooks/hooks");
+__envive_ai_react_hooks_hooks = require_chunk.__toESM(__envive_ai_react_hooks_hooks);
 
+//#region src/components/ProductCard/productCardVariants.ts
+/**
+* Shared variant mapping configurations for ProductCard components
+*/
+const variantClassMap = new Map([
+	["filled", ["spiffy-tw-bg-[--spiffy-colors-background-secondary]", "spiffy-tw-shadow-md"]],
+	["bordered", [
+		"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
+		"spiffy-tw-border",
+		"spiffy-tw-border-[--spiffy-colors-border-light]"
+	]],
+	["minimal", ["spiffy-tw-bg-transparent"]],
+	["transparentBordered", [
+		"spiffy-tw-bg-transparent",
+		"spiffy-tw-border",
+		"spiffy-tw-border-[--spiffy-colors-border-light]"
+	]]
+]);
+const variantHoverClassMap = new Map([["backgroundDark", ["hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]"]], ["none", []]]);
+const variantTitleColorMap = new Map([
+	["filled", "spiffy-tw-text-[--spiffy-colors-text-link]"],
+	["bordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
+	["minimal", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
+	["transparentBordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"]
+]);
+const productCardLayoutVariantClasses = {
+	normal: {
+		productTitle: ["spiffy-product-card-title"],
+		container: ["spiffy-tw-w-[208px]"],
+		verticalContainer: ["spiffy-tw-rounded-[8px]", "spiffy-tw-h-[268px]"]
+	},
+	tall: {
+		productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
+		container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[300px]"],
+		verticalContainer: ["lg:spiffy-tw-h-[496px]"]
+	},
+	square: {
+		productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
+		container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[280px]"],
+		verticalContainer: ["lg:spiffy-tw-h-[400px]"]
+	}
+};
+
+//#endregion
 //#region src/logging/logger.ts
 var Logger = class {
 	static logInfo(message, ...args) {
@@ -41,7 +86,7 @@ const formatPrice = (price, currency = "$") => {
 };
 
 //#endregion
-//#region src/components/common/ProductCard/ProductCard.tsx
+//#region src/components/ProductCard/ProductCard.tsx
 const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
 	minimumFractionDigits: 1,
 	maximumFractionDigits: 1
@@ -88,6 +133,7 @@ const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
 	});
 };
 const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, handleClick }) => {
+	const { resolve } = (0, __envive_ai_react_hooks_hooks.useImageResolver)();
 	const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
 	const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
 	const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
@@ -96,13 +142,13 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 		logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
 		return null;
 	}
-	const layoutClasses = require_productCardVariants.productCardLayoutVariantClasses[finalLayoutVariant];
+	const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
 	const containerClassnames = (0, classnames.default)("spiffy-tw-cursor-pointer", "spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-inherit", "spiffy-tw-overflow-hidden", {
 		"spiffy-tw-h-full": growWithContainer,
 		"spiffy-tw-w-full": growWithContainer,
 		"spiffy-tw-max-w-full": growWithContainer
-	}, !growWithContainer && layoutClasses.container, require_productCardVariants.variantClassMap.get(finalVariant) ?? [], require_productCardVariants.variantHoverClassMap.get(finalHoverVariant) ?? []);
-	const verticalContainerVariantClasses = require_productCardVariants.productCardLayoutVariantClasses[layoutVariant].verticalContainer;
+	}, !growWithContainer && layoutClasses.container, variantClassMap.get(finalVariant) ?? [], variantHoverClassMap.get(finalHoverVariant) ?? []);
+	const verticalContainerVariantClasses = productCardLayoutVariantClasses[layoutVariant].verticalContainer;
 	const verticalContainerClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", {
 		"spiffy-tw-h-full": growWithContainer,
 		"spiffy-tw-w-full": growWithContainer,
@@ -125,7 +171,7 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 		"hover:spiffy-tw-scale-105"
 	] : []);
 	const contentClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-p-2", "spiffy-tw-pr-2", "spiffy-tw-items-start", "spiffy-tw-justify-end", { "spiffy-tw-flex-grow-0": layoutVariant === "tall" || layoutVariant === "square" });
-	const productTitleClassnames = (0, classnames.default)("spiffy-tw-line-clamp-2", "spiffy-tw-overflow-clip", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-whitespace-normal", "spiffy-tw-normal-case", require_productCardVariants.variantTitleColorMap.get(finalVariant) ?? "spiffy-tw-text-[--spiffy-colors-text-primary]", ...layoutClasses.productTitle);
+	const productTitleClassnames = (0, classnames.default)("spiffy-tw-line-clamp-2", "spiffy-tw-overflow-clip", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-whitespace-normal", "spiffy-tw-normal-case", variantTitleColorMap.get(finalVariant) ?? "spiffy-tw-text-[--spiffy-colors-text-primary]", ...layoutClasses.productTitle);
 	const priceAndRatingContainerClassnames = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-justify-between", "spiffy-tw-items-center", "spiffy-tw-w-full", "spiffy-tw-pt-2", "spiffy-tw-gap-2");
 	const imageClassnames = (0, classnames.default)("spiffy-tw-bg-transparent", "spiffy-tw-w-full", "spiffy-tw-h-full", "spiffy-tw-object-cover", "spiffy-tw-object-top", "spiffy-tw-select-none", "spiffy-tw-pointer-events-none");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -133,7 +179,7 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 		"data-testid": dataTestId,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 			href: url,
-			onClick: () => handleClick(url || ""),
+			onClick: () => handleClick(url),
 			target: "_self",
 			draggable: false,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -143,7 +189,7 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: imageContainerClassnames,
 						children: imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageWithFallback.ImageWithFallback, {
-							src: imageUrl,
+							src: resolve(imageUrl, layoutVariant === "tall" ? 300 : 178),
 							alt: title,
 							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { className: "spiffy-tw-w-6 spiffy-tw-h-6" }),
 							imageClassnames
@@ -173,6 +219,50 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 };
 
 //#endregion
+//#region src/components/ProductCard/types.ts
+let 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
+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 : "");
+	const verticalContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", !growWithContainer ? layoutClasses.verticalContainer : "");
+	const imageClipContainerClasses = (0, classnames.default)("spiffy-tw-w-full", aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "", "spiffy-tw-overflow-hidden");
+	const imageSkeletonClasses = (0, classnames.default)("spiffy-tw-bg-[#F4F4F6]", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-w-full", "spiffy-tw-h-full");
+	const contentContainerClasses = (0, classnames.default)("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-2", "spiffy-tw-w-full", "spiffy-tw-p-2");
+	const textSkeletonClasses = (0, classnames.default)(ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON, "spiffy-tw-h-[15px]", "spiffy-tw-block", "spiffy-tw-rounded-sm", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-bg-[#F4F4F6]");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: containerClasses,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: verticalContainerClasses,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: imageClipContainerClasses,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: imageSkeletonClasses })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: contentContainerClasses,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(textSkeletonClasses, "spiffy-tw-w-full") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)(textSkeletonClasses, "spiffy-tw-w-[60%]") })]
+			})]
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'AnimatedProductCardOverrides', {
+  enumerable: true,
+  get: function () {
+    return AnimatedProductCardOverrides;
+  }
+});
 Object.defineProperty(exports, 'PriceSection', {
   enumerable: true,
   get: function () {
@@ -185,9 +275,45 @@ Object.defineProperty(exports, 'ProductCard', {
     return ProductCard;
   }
 });
+Object.defineProperty(exports, 'ProductCardSkeleton', {
+  enumerable: true,
+  get: function () {
+    return ProductCardSkeleton;
+  }
+});
+Object.defineProperty(exports, 'ProductCardSkeletonOverrides', {
+  enumerable: true,
+  get: function () {
+    return ProductCardSkeletonOverrides;
+  }
+});
 Object.defineProperty(exports, 'RatingSummary', {
   enumerable: true,
   get: function () {
     return RatingSummary;
   }
+});
+Object.defineProperty(exports, 'productCardLayoutVariantClasses', {
+  enumerable: true,
+  get: function () {
+    return productCardLayoutVariantClasses;
+  }
+});
+Object.defineProperty(exports, 'variantClassMap', {
+  enumerable: true,
+  get: function () {
+    return variantClassMap;
+  }
+});
+Object.defineProperty(exports, 'variantHoverClassMap', {
+  enumerable: true,
+  get: function () {
+    return variantHoverClassMap;
+  }
+});
+Object.defineProperty(exports, 'variantTitleColorMap', {
+  enumerable: true,
+  get: function () {
+    return variantTitleColorMap;
+  }
 });

package/dist/{ProductCard-B5wnOeR9.js → ProductCard-SF8-lXlT.js}

@@ -1,12 +1,56 @@
-import { Text } from "./Text-Bdv7F5-u.js";
-import { ImageWithFallback } from "./ImageWithFallback-gN5HDS9L.js";
-import { Headline } from "./Headline-8on6ZB9e.js";
-import { productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "./productCardVariants-C_QIZ-KF.js";
-import { Spinner } from "./Spinner-BZ-kTOpm.js";
+import { Text } from "./Text-BMg3d10t.js";
+import { Headline } from "./Headline-XpaAeTSR.js";
+import { ImageWithFallback } from "./ImageWithFallback-Ckwsmd8P.js";
+import { Spinner } from "./Spinner-BgGihEfJ.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { MdStar } from "react-icons/md";
+import { useImageResolver } from "@envive-ai/react-hooks/hooks";
 
+//#region src/components/ProductCard/productCardVariants.ts
+/**
+* Shared variant mapping configurations for ProductCard components
+*/
+const variantClassMap = new Map([
+	["filled", ["spiffy-tw-bg-[--spiffy-colors-background-secondary]", "spiffy-tw-shadow-md"]],
+	["bordered", [
+		"spiffy-tw-bg-[--spiffy-colors-background-secondary]",
+		"spiffy-tw-border",
+		"spiffy-tw-border-[--spiffy-colors-border-light]"
+	]],
+	["minimal", ["spiffy-tw-bg-transparent"]],
+	["transparentBordered", [
+		"spiffy-tw-bg-transparent",
+		"spiffy-tw-border",
+		"spiffy-tw-border-[--spiffy-colors-border-light]"
+	]]
+]);
+const variantHoverClassMap = new Map([["backgroundDark", ["hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]"]], ["none", []]]);
+const variantTitleColorMap = new Map([
+	["filled", "spiffy-tw-text-[--spiffy-colors-text-link]"],
+	["bordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
+	["minimal", "spiffy-tw-text-[--spiffy-colors-text-primary]"],
+	["transparentBordered", "spiffy-tw-text-[--spiffy-colors-text-primary]"]
+]);
+const productCardLayoutVariantClasses = {
+	normal: {
+		productTitle: ["spiffy-product-card-title"],
+		container: ["spiffy-tw-w-[208px]"],
+		verticalContainer: ["spiffy-tw-rounded-[8px]", "spiffy-tw-h-[268px]"]
+	},
+	tall: {
+		productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
+		container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[300px]"],
+		verticalContainer: ["lg:spiffy-tw-h-[496px]"]
+	},
+	square: {
+		productTitle: ["spiffy-product-card-title-tall", "spiffy-tw-pt-[8px]"],
+		container: ["spiffy-tw-w-[160px] lg:spiffy-tw-w-[280px]"],
+		verticalContainer: ["lg:spiffy-tw-h-[400px]"]
+	}
+};
+
+//#endregion
 //#region src/logging/logger.ts
 var Logger = class {
 	static logInfo(message, ...args) {
@@ -37,7 +81,7 @@ const formatPrice = (price, currency = "$") => {
 };
 
 //#endregion
-//#region src/components/common/ProductCard/ProductCard.tsx
+//#region src/components/ProductCard/ProductCard.tsx
 const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
 	minimumFractionDigits: 1,
 	maximumFractionDigits: 1
@@ -84,6 +128,7 @@ const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
 	});
 };
 const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, handleClick }) => {
+	const { resolve } = useImageResolver();
 	const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
 	const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
 	const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
@@ -129,7 +174,7 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 		"data-testid": dataTestId,
 		children: /* @__PURE__ */ jsx("a", {
 			href: url,
-			onClick: () => handleClick(url || ""),
+			onClick: () => handleClick(url),
 			target: "_self",
 			draggable: false,
 			children: /* @__PURE__ */ jsxs("div", {
@@ -139,7 +184,7 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 					children: /* @__PURE__ */ jsx("div", {
 						className: imageContainerClassnames,
 						children: imageUrl && /* @__PURE__ */ jsx(ImageWithFallback, {
-							src: imageUrl,
+							src: resolve(imageUrl, layoutVariant === "tall" ? 300 : 178),
 							alt: title,
 							fallback: /* @__PURE__ */ jsx(Spinner, { className: "spiffy-tw-w-6 spiffy-tw-h-6" }),
 							imageClassnames
@@ -169,4 +214,42 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 };
 
 //#endregion
-export { PriceSection, ProductCard, RatingSummary };
+//#region src/components/ProductCard/types.ts
+let 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
+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 : "");
+	const verticalContainerClasses = classNames("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-overflow-hidden", "spiffy-tw-gap-inherit", !growWithContainer ? layoutClasses.verticalContainer : "");
+	const imageClipContainerClasses = classNames("spiffy-tw-w-full", aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "", "spiffy-tw-overflow-hidden");
+	const imageSkeletonClasses = classNames("spiffy-tw-bg-[#F4F4F6]", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-w-full", "spiffy-tw-h-full");
+	const contentContainerClasses = classNames("spiffy-tw-flex", "spiffy-tw-flex-col", "spiffy-tw-gap-2", "spiffy-tw-w-full", "spiffy-tw-p-2");
+	const textSkeletonClasses = classNames(ProductCardSkeletonOverrides.PRODUCT_CARD_SKELETON, "spiffy-tw-h-[15px]", "spiffy-tw-block", "spiffy-tw-rounded-sm", "spiffy-tw-animate-pulse", "spiffy-tw-opacity-70", "spiffy-tw-bg-[#F4F4F6]");
+	return /* @__PURE__ */ jsx("div", {
+		className: containerClasses,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: verticalContainerClasses,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: imageClipContainerClasses,
+				children: /* @__PURE__ */ jsx("div", { className: imageSkeletonClasses })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: contentContainerClasses,
+				children: [/* @__PURE__ */ jsx("div", { className: classNames(textSkeletonClasses, "spiffy-tw-w-full") }), /* @__PURE__ */ jsx("div", { className: classNames(textSkeletonClasses, "spiffy-tw-w-[60%]") })]
+			})]
+		})
+	});
+};
+
+//#endregion
+export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardSkeleton, ProductCardSkeletonOverrides, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/ProductGrid/index.cjs

@@ -0,0 +1,10 @@
+require('../textVariantClasses-BnV4wXaw.cjs');
+require('../Text-CgOYTs8D.cjs');
+require('../Headline-iP_MckEO.cjs');
+require('../ImageWithFallback-1LqhQK1q.cjs');
+require('../ProductCard-DZZKutY-.cjs');
+require('../Spinner-DzdIkS6t.cjs');
+const require_ProductGrid = require('../ProductGrid-BSSmPr7K.cjs');
+
+exports.ProductGrid = require_ProductGrid.ProductGrid;
+exports.productGridVariantClasses = require_ProductGrid.productGridVariantClasses;

package/dist/ProductGrid/index.d.cts

@@ -0,0 +1,36 @@
+import "../types-BQYpWDJ4.cjs";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-wYn2mEDm.cjs";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#region src/components/ProductGrid/ProductGrid.d.ts
+interface ProductGridProps {
+  productList: SearchResponseProduct[];
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  searchResponseId: string;
+  cardsGrowWithContainer?: boolean;
+}
+declare const ProductGrid: ({
+  productList,
+  productGridVariant,
+  productGridClasses,
+  productCardConfig,
+  merchantShortName,
+  searchResponseId,
+  cardsGrowWithContainer
+}: ProductGridProps) => react_jsx_runtime20.JSX.Element;
+//#endregion
+//#region src/components/ProductGrid/productGridVariants.d.ts
+interface ProductGridVariantClasses {
+  productCardVariant: ProductCardVariant;
+  productCardHoverVariant: ProductCardHoverVariant;
+  productCardLayoutVariant: ProductCardLayoutVariant;
+  productCardImageAspectRatio: '3:4' | 'square' | 'none';
+  zoomOnHover: boolean;
+}
+declare const productGridVariantClasses: Record<ProductGridVariant, ProductGridVariantClasses>;
+//#endregion
+export { ProductGrid, productGridVariantClasses };

package/dist/ProductGrid/index.d.ts

@@ -0,0 +1,36 @@
+import "../types-BruEHw-X.js";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-CcnuEYQN.js";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#region src/components/ProductGrid/ProductGrid.d.ts
+interface ProductGridProps {
+  productList: SearchResponseProduct[];
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  searchResponseId: string;
+  cardsGrowWithContainer?: boolean;
+}
+declare const ProductGrid: ({
+  productList,
+  productGridVariant,
+  productGridClasses,
+  productCardConfig,
+  merchantShortName,
+  searchResponseId,
+  cardsGrowWithContainer
+}: ProductGridProps) => react_jsx_runtime11.JSX.Element;
+//#endregion
+//#region src/components/ProductGrid/productGridVariants.d.ts
+interface ProductGridVariantClasses {
+  productCardVariant: ProductCardVariant;
+  productCardHoverVariant: ProductCardHoverVariant;
+  productCardLayoutVariant: ProductCardLayoutVariant;
+  productCardImageAspectRatio: '3:4' | 'square' | 'none';
+  zoomOnHover: boolean;
+}
+declare const productGridVariantClasses: Record<ProductGridVariant, ProductGridVariantClasses>;
+//#endregion
+export { ProductGrid, productGridVariantClasses };

package/dist/ProductGrid/index.js

@@ -0,0 +1,9 @@
+import "../textVariantClasses-CnjwO2Fv.js";
+import "../Text-BMg3d10t.js";
+import "../Headline-XpaAeTSR.js";
+import "../ImageWithFallback-Ckwsmd8P.js";
+import "../ProductCard-SF8-lXlT.js";
+import "../Spinner-BgGihEfJ.js";
+import { ProductGrid, productGridVariantClasses } from "../ProductGrid-DTUhH219.js";
+
+export { ProductGrid, productGridVariantClasses };