@envive-ai/react-toolkit 0.1.5 → 0.1.7

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

@@ -1,8 +1,8 @@
 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);
 

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

@@ -1,5 +1,5 @@
-import classNames from "classnames";
 import React, { useState } from "react";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ImageWithFallback/ImageWithFallback.tsx

package/dist/ProductCard/index.cjs

@@ -1,16 +1,15 @@
 require('../textVariantClasses-BnV4wXaw.cjs');
 require('../Text-CgOYTs8D.cjs');
-require('../Headline-CdddUGwy.cjs');
-require('../ImageWithFallback-By6QdlCR.cjs');
-const require_ProductCard = require('../ProductCard-CvTRvhm7.cjs');
-require('../Spinner-DX35Epv3.cjs');
-const require_ProductCardSkeleton = require('../ProductCardSkeleton-BzBK36m-.cjs');
+require('../Headline-iP_MckEO.cjs');
+require('../ImageWithFallback-1LqhQK1q.cjs');
+const require_ProductCard = require('../ProductCard-DZZKutY-.cjs');
+require('../Spinner-DzdIkS6t.cjs');
 
-exports.AnimatedProductCardOverrides = require_ProductCardSkeleton.AnimatedProductCardOverrides;
+exports.AnimatedProductCardOverrides = require_ProductCard.AnimatedProductCardOverrides;
 exports.PriceSection = require_ProductCard.PriceSection;
 exports.ProductCard = require_ProductCard.ProductCard;
-exports.ProductCardSkeleton = require_ProductCardSkeleton.ProductCardSkeleton;
-exports.ProductCardSkeletonOverrides = require_ProductCardSkeleton.ProductCardSkeletonOverrides;
+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;

package/dist/ProductCard/index.d.cts

@@ -1,109 +1,3 @@
-import { TestProps } from "../types-BQYpWDJ4.cjs";
-import { AnimatedProductCardOverrides, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, SearchResponseProductAttributes } from "../types-Dvgr3ZeV.cjs";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
-import { FC } from "react";
-
-//#region src/config/chatElementDisplayLocation.d.ts
-declare enum ChatElementDisplayLocation {
-  IN_CHAT = "in_chat",
-  CHAT_PREVIEW = "chat_preview",
-  FLOATING_BUTTON = "floating_button",
-  HELP_ME_CHOOSE = "help_me_choose",
-  PLP_IMAGE_BANNER = "plp_image_banner",
-  TOP_REVIEWS_SNIPPET = "top_reviews_snippet",
-  BOTTOM_REVIEWS_SNIPPET = "bottom_reviews_snippet",
-  BLOCK_BACK_BUTTON = "block_back_button",
-  SWITCH_TO_AGENT = "switch_to_agent",
-  CONVERSATIONAL_SEARCH = "conversational_search",
-  GLOBAL_SEARCH_ENTRYPOINT = "global_search_entrypoint",
-  SEARCH_NAV_ENTRYPOINT = "search_nav_entrypoint",
-  SEARCH_PROMPT = "search_prompt",
-  SEARCH_PROMPT_BUTTON = "search_prompt_button",
-  PRODUCT_GRID = "product_grid",
-  UNSPECIFIED = "unspecified",
-  FILTER_MODAL = "filter_modal",
-  PROMPT_CARD = "prompt_card",
-  WINDOW_API_CALL = "window_api_call",
-}
-//#endregion
-//#region src/components/ProductCard/ProductCard.d.ts
-interface RatingSummaryProps {
-  stars: number;
-  reviewCount: number;
-  className?: string;
-}
-declare const RatingSummary: ({
-  stars,
-  reviewCount,
-  className
-}: RatingSummaryProps) => react_jsx_runtime12.JSX.Element;
-interface PriceSectionProps {
-  originalPrice?: string;
-  salePrice?: string;
-  pricePrefix?: string;
-}
-declare const PriceSection: ({
-  originalPrice,
-  salePrice,
-  pricePrefix
-}: PriceSectionProps) => react_jsx_runtime12.JSX.Element;
-interface ProductCardProps extends TestProps {
-  productCardConfig?: ProductCardConfig;
-  merchantShortName: string;
-  title: string;
-  url?: string;
-  searchResponseId?: string;
-  productResponseId?: string;
-  cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
-  imageUrl?: string;
-  originalPrice?: number;
-  averageRating?: number;
-  numberReviews?: number;
-  salePrice?: number;
-  variant?: ProductCardVariant;
-  hoverVariant?: ProductCardHoverVariant;
-  layoutVariant?: ProductCardLayoutVariant;
-  zoomOnHover?: boolean;
-  aspectRatio?: '3:4' | 'square' | 'none';
-  clickPosition?: number | null;
-  growWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
-}
-declare const ProductCard: ({
-  productCardConfig,
-  merchantShortName,
-  imageUrl,
-  title,
-  url,
-  originalPrice,
-  averageRating,
-  numberReviews,
-  salePrice,
-  variant,
-  hoverVariant,
-  dataTestId,
-  layoutVariant,
-  zoomOnHover,
-  aspectRatio,
-  growWithContainer,
-  handleClick
-}: ProductCardProps) => react_jsx_runtime12.JSX.Element;
-//#endregion
-//#region src/components/ProductCard/ProductCardSkeleton.d.ts
-interface ProductCardSkeletonProps$1 {
-  layoutVariant: ProductCardLayoutVariant;
-  aspectRatio?: '3:4' | 'square' | 'none';
-  growWithContainer?: boolean;
-}
-declare const ProductCardSkeleton: FC<ProductCardSkeletonProps$1>;
-//#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
+import "../types-D2xCS4y9.cjs";
+import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../index-B3iEVxkL.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

@@ -1,109 +1,3 @@
-import { TestProps } from "../types-DpfHwTzY.js";
-import { AnimatedProductCardOverrides, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, SearchResponseProductAttributes } from "../types-B7hf-Lif.js";
-import { FC } from "react";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
-
-//#region src/config/chatElementDisplayLocation.d.ts
-declare enum ChatElementDisplayLocation {
-  IN_CHAT = "in_chat",
-  CHAT_PREVIEW = "chat_preview",
-  FLOATING_BUTTON = "floating_button",
-  HELP_ME_CHOOSE = "help_me_choose",
-  PLP_IMAGE_BANNER = "plp_image_banner",
-  TOP_REVIEWS_SNIPPET = "top_reviews_snippet",
-  BOTTOM_REVIEWS_SNIPPET = "bottom_reviews_snippet",
-  BLOCK_BACK_BUTTON = "block_back_button",
-  SWITCH_TO_AGENT = "switch_to_agent",
-  CONVERSATIONAL_SEARCH = "conversational_search",
-  GLOBAL_SEARCH_ENTRYPOINT = "global_search_entrypoint",
-  SEARCH_NAV_ENTRYPOINT = "search_nav_entrypoint",
-  SEARCH_PROMPT = "search_prompt",
-  SEARCH_PROMPT_BUTTON = "search_prompt_button",
-  PRODUCT_GRID = "product_grid",
-  UNSPECIFIED = "unspecified",
-  FILTER_MODAL = "filter_modal",
-  PROMPT_CARD = "prompt_card",
-  WINDOW_API_CALL = "window_api_call",
-}
-//#endregion
-//#region src/components/ProductCard/ProductCard.d.ts
-interface RatingSummaryProps {
-  stars: number;
-  reviewCount: number;
-  className?: string;
-}
-declare const RatingSummary: ({
-  stars,
-  reviewCount,
-  className
-}: RatingSummaryProps) => react_jsx_runtime17.JSX.Element;
-interface PriceSectionProps {
-  originalPrice?: string;
-  salePrice?: string;
-  pricePrefix?: string;
-}
-declare const PriceSection: ({
-  originalPrice,
-  salePrice,
-  pricePrefix
-}: PriceSectionProps) => react_jsx_runtime17.JSX.Element;
-interface ProductCardProps extends TestProps {
-  productCardConfig?: ProductCardConfig;
-  merchantShortName: string;
-  title: string;
-  url?: string;
-  searchResponseId?: string;
-  productResponseId?: string;
-  cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
-  imageUrl?: string;
-  originalPrice?: number;
-  averageRating?: number;
-  numberReviews?: number;
-  salePrice?: number;
-  variant?: ProductCardVariant;
-  hoverVariant?: ProductCardHoverVariant;
-  layoutVariant?: ProductCardLayoutVariant;
-  zoomOnHover?: boolean;
-  aspectRatio?: '3:4' | 'square' | 'none';
-  clickPosition?: number | null;
-  growWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
-}
-declare const ProductCard: ({
-  productCardConfig,
-  merchantShortName,
-  imageUrl,
-  title,
-  url,
-  originalPrice,
-  averageRating,
-  numberReviews,
-  salePrice,
-  variant,
-  hoverVariant,
-  dataTestId,
-  layoutVariant,
-  zoomOnHover,
-  aspectRatio,
-  growWithContainer,
-  handleClick
-}: ProductCardProps) => react_jsx_runtime17.JSX.Element;
-//#endregion
-//#region src/components/ProductCard/ProductCardSkeleton.d.ts
-interface ProductCardSkeletonProps$1 {
-  layoutVariant: ProductCardLayoutVariant;
-  aspectRatio?: '3:4' | 'square' | 'none';
-  growWithContainer?: boolean;
-}
-declare const ProductCardSkeleton: FC<ProductCardSkeletonProps$1>;
-//#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
+import "../types-C0UWKVvw.js";
+import { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../index-ByucvlTy.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

@@ -1,9 +1,8 @@
 import "../textVariantClasses-CnjwO2Fv.js";
 import "../Text-BMg3d10t.js";
-import "../Headline-COAnonc2.js";
-import "../ImageWithFallback-DtUrq_bk.js";
-import { PriceSection, ProductCard, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "../ProductCard-aJbQz6Q7.js";
-import "../Spinner-D9kkaM9d.js";
-import { AnimatedProductCardOverrides, ProductCardSkeleton, ProductCardSkeletonOverrides } from "../ProductCardSkeleton-B6YetUCT.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-CvTRvhm7.cjs → ProductCard-DZZKutY-.cjs}

@@ -1,14 +1,16 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Text = require('./Text-CgOYTs8D.cjs');
-const require_Headline = require('./Headline-CdddUGwy.cjs');
-const require_ImageWithFallback = require('./ImageWithFallback-By6QdlCR.cjs');
-const require_Spinner = require('./Spinner-DX35Epv3.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
 /**
@@ -131,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";
@@ -176,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", {
@@ -186,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
@@ -216,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 () {
@@ -228,6 +275,18 @@ 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 () {

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

@@ -1,10 +1,11 @@
 import { Text } from "./Text-BMg3d10t.js";
-import { Headline } from "./Headline-COAnonc2.js";
-import { ImageWithFallback } from "./ImageWithFallback-DtUrq_bk.js";
-import { Spinner } from "./Spinner-D9kkaM9d.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
 /**
@@ -127,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";
@@ -172,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", {
@@ -182,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
@@ -212,4 +214,42 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 };
 
 //#endregion
-export { PriceSection, ProductCard, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };
+//#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

@@ -1,10 +1,10 @@
 require('../textVariantClasses-BnV4wXaw.cjs');
 require('../Text-CgOYTs8D.cjs');
-require('../Headline-CdddUGwy.cjs');
-require('../ImageWithFallback-By6QdlCR.cjs');
-require('../ProductCard-CvTRvhm7.cjs');
-require('../Spinner-DX35Epv3.cjs');
-const require_ProductGrid = require('../ProductGrid-CSIH2_G9.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

@@ -1,5 +1,7 @@
-import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant, SearchResponseProduct } from "../types-Dvgr3ZeV.cjs";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import "../types-D2xCS4y9.cjs";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-B3iEVxkL.cjs";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
 //#region src/components/ProductGrid/ProductGrid.d.ts
 interface ProductGridProps {
@@ -10,7 +12,6 @@ interface ProductGridProps {
   merchantShortName: string;
   searchResponseId: string;
   cardsGrowWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
 }
 declare const ProductGrid: ({
   productList,
@@ -19,9 +20,8 @@ declare const ProductGrid: ({
   productCardConfig,
   merchantShortName,
   searchResponseId,
-  cardsGrowWithContainer,
-  handleClick
-}: ProductGridProps) => react_jsx_runtime10.JSX.Element;
+  cardsGrowWithContainer
+}: ProductGridProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/ProductGrid/productGridVariants.d.ts
 interface ProductGridVariantClasses {

package/dist/ProductGrid/index.d.ts

@@ -1,5 +1,7 @@
-import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant, SearchResponseProduct } from "../types-B7hf-Lif.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import "../types-C0UWKVvw.js";
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant, ProductGridVariant } from "../index-ByucvlTy.js";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
 //#region src/components/ProductGrid/ProductGrid.d.ts
 interface ProductGridProps {
@@ -10,7 +12,6 @@ interface ProductGridProps {
   merchantShortName: string;
   searchResponseId: string;
   cardsGrowWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
 }
 declare const ProductGrid: ({
   productList,
@@ -19,9 +20,8 @@ declare const ProductGrid: ({
   productCardConfig,
   merchantShortName,
   searchResponseId,
-  cardsGrowWithContainer,
-  handleClick
-}: ProductGridProps) => react_jsx_runtime5.JSX.Element;
+  cardsGrowWithContainer
+}: ProductGridProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/ProductGrid/productGridVariants.d.ts
 interface ProductGridVariantClasses {

package/dist/ProductGrid/index.js

@@ -1,9 +1,9 @@
 import "../textVariantClasses-CnjwO2Fv.js";
 import "../Text-BMg3d10t.js";
-import "../Headline-COAnonc2.js";
-import "../ImageWithFallback-DtUrq_bk.js";
-import "../ProductCard-aJbQz6Q7.js";
-import "../Spinner-D9kkaM9d.js";
-import { ProductGrid, productGridVariantClasses } from "../ProductGrid-NOCayW9O.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 };