@envive-ai/react-toolkit 0.1.1 → 0.1.2

package/dist/ProductCard-Btg8tHGc.js

@@ -0,0 +1,172 @@
+import { Text } from "./Text-Bdv7F5-u.js";
+import { Headline } from "./Headline-ro_Nigw5.js";
+import { ImageWithFallback } from "./ImageWithFallback-CfmkC58B.js";
+import { productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "./productCardVariants-C_QIZ-KF.js";
+import { Spinner } from "./Spinner-BZ-kTOpm.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MdStar } from "react-icons/md";
+
+//#region src/logging/logger.ts
+var Logger = class {
+	static logInfo(message, ...args) {
+		console.info(`INFO: ${message}`, ...args);
+	}
+	static logDebug(message, ...args) {
+		console.debug(`DEBUG: ${message}`, ...args);
+	}
+	static logError(message, error, ...args) {
+		console.error(`ERROR: ${message} error=${error}`, args);
+	}
+	static logWarn(message, error, ...args) {
+		console.warn(`WARN: ${message} error=${error}`, args);
+	}
+};
+var logger_default = Logger;
+
+//#endregion
+//#region src/util/formatPrice.ts
+const formatPrice = (price, currency = "$") => {
+	if (price == null) return "";
+	const options = {};
+	if (!Number.isInteger(price)) {
+		options.minimumFractionDigits = 2;
+		options.maximumFractionDigits = 2;
+	}
+	return `${currency}${price.toLocaleString("en-US", options)}`;
+};
+
+//#endregion
+//#region src/components/common/ProductCard/ProductCard.tsx
+const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
+	minimumFractionDigits: 1,
+	maximumFractionDigits: 1
+}));
+const RatingSummary = ({ stars, reviewCount, className }) => {
+	const group = classNames("spiffy-product-card-rating", "spiffy-product-card-text-color", "spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-items-center", "spiffy-tw-gap-1", "spiffy-tw-text-[--spiffy-colors-text-primary]", "spiffy-tw-tracking-[0.8px]");
+	const starClassnames = classNames("spiffy-product-card-rating-star-color", "spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-w-[14px]", "spiffy-tw-h-[14px]");
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: group,
+			children: [
+				/* @__PURE__ */ jsx(MdStar, { className: starClassnames }),
+				/* @__PURE__ */ jsx(Text, {
+					variant: "body3",
+					children: formatReviews(stars)
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					variant: "body3",
+					children: [
+						"(",
+						reviewCount,
+						")"
+					]
+				})
+			]
+		})
+	});
+};
+const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
+	if (!originalPrice) return null;
+	const priceClassName = classNames("spiffy-product-card-price", "spiffy-product-card-text-color", "spiffy-tw-font-regular", "spiffy-tw-flex", "spiffy-tw-flex-wrap", "spiffy-tw-gap-1", "spiffy-tw-text-sm", "spiffy-tw-font-[400]", "spiffy-tw-leading-[100%]", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-text-[--spiffy-colors-text-primary]");
+	const showSalePrice = salePrice && originalPrice !== salePrice;
+	return /* @__PURE__ */ jsxs("div", {
+		className: priceClassName,
+		children: [
+			pricePrefix && /* @__PURE__ */ jsx(Text, { children: pricePrefix }),
+			showSalePrice && /* @__PURE__ */ jsx(Text, { children: salePrice }),
+			/* @__PURE__ */ jsx(Text, {
+				className: showSalePrice ? "spiffy-tw-line-through" : "",
+				children: originalPrice
+			})
+		]
+	});
+};
+const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, handleClick }) => {
+	const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
+	const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
+	const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
+	const pricePrefix = productCardConfig?.pricePrefix;
+	if (productCardConfig == null) {
+		logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
+		return null;
+	}
+	const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
+	const containerClassnames = classNames("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, variantClassMap.get(finalVariant) ?? [], variantHoverClassMap.get(finalHoverVariant) ?? []);
+	const verticalContainerVariantClasses = productCardLayoutVariantClasses[layoutVariant].verticalContainer;
+	const verticalContainerClassnames = classNames("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,
+		"spiffy-tw-flex-1": growWithContainer
+	}, ...!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []);
+	const linkClassnames = classNames({
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-h-full": true,
+		"spiffy-tw-overflow-hidden": true,
+		"spiffy-tw-select-none": true
+	});
+	const imageClipContainerClassnames = classNames("spiffy-tw-w-full", "spiffy-tw-overflow-hidden", {
+		"spiffy-tw-flex-shrink-0": growWithContainer,
+		"spiffy-tw-tw-h-full": !growWithContainer
+	}, aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "");
+	const imageContainerClassnames = classNames(linkClassnames, zoomOnHover ? [
+		"spiffy-tw-transition-transform",
+		"spiffy-tw-duration-200",
+		"spiffy-tw-origin-top",
+		"hover:spiffy-tw-scale-105"
+	] : []);
+	const contentClassnames = classNames("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 = classNames("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 = classNames("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 = classNames("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__ */ jsx("div", {
+		className: containerClassnames,
+		"data-testid": dataTestId,
+		children: /* @__PURE__ */ jsx("a", {
+			href: url,
+			onClick: () => handleClick(url || ""),
+			target: "_self",
+			draggable: false,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: verticalContainerClassnames,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: imageClipContainerClassnames,
+					children: /* @__PURE__ */ jsx("div", {
+						className: imageContainerClassnames,
+						children: imageUrl && /* @__PURE__ */ jsx(ImageWithFallback, {
+							src: imageUrl,
+							alt: title,
+							fallback: /* @__PURE__ */ jsx(Spinner, { className: "spiffy-tw-w-6 spiffy-tw-h-6" }),
+							imageClassnames
+						})
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: contentClassnames,
+					children: [/* @__PURE__ */ jsx(Headline, {
+						variant: "h4",
+						className: productTitleClassnames,
+						children: title
+					}), /* @__PURE__ */ jsxs("div", {
+						className: priceAndRatingContainerClassnames,
+						children: [(originalPrice || salePrice) && /* @__PURE__ */ jsx(PriceSection, {
+							originalPrice: formatPrice(originalPrice),
+							salePrice: formatPrice(salePrice),
+							pricePrefix
+						}), averageRating && numberReviews && /* @__PURE__ */ jsx(RatingSummary, {
+							stars: averageRating,
+							reviewCount: numberReviews
+						})]
+					})]
+				})]
+			})
+		})
+	});
+};
+
+//#endregion
+export { PriceSection, ProductCard, RatingSummary };

package/dist/ProductCard-CS6DZAwO.cjs

@@ -0,0 +1,193 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-C04c4Z93.cjs');
+const require_Headline = require('./Headline-L7w3BsBF.cjs');
+const require_ImageWithFallback = require('./ImageWithFallback-P3AjyL2Y.cjs');
+const require_productCardVariants = require('./productCardVariants-Dd-wrJKP.cjs');
+const require_Spinner = require('./Spinner-CfQ85Ajl.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);
+
+//#region src/logging/logger.ts
+var Logger = class {
+	static logInfo(message, ...args) {
+		console.info(`INFO: ${message}`, ...args);
+	}
+	static logDebug(message, ...args) {
+		console.debug(`DEBUG: ${message}`, ...args);
+	}
+	static logError(message, error, ...args) {
+		console.error(`ERROR: ${message} error=${error}`, args);
+	}
+	static logWarn(message, error, ...args) {
+		console.warn(`WARN: ${message} error=${error}`, args);
+	}
+};
+var logger_default = Logger;
+
+//#endregion
+//#region src/util/formatPrice.ts
+const formatPrice = (price, currency = "$") => {
+	if (price == null) return "";
+	const options = {};
+	if (!Number.isInteger(price)) {
+		options.minimumFractionDigits = 2;
+		options.maximumFractionDigits = 2;
+	}
+	return `${currency}${price.toLocaleString("en-US", options)}`;
+};
+
+//#endregion
+//#region src/components/common/ProductCard/ProductCard.tsx
+const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
+	minimumFractionDigits: 1,
+	maximumFractionDigits: 1
+}));
+const RatingSummary = ({ stars, reviewCount, className }) => {
+	const group = (0, classnames.default)("spiffy-product-card-rating", "spiffy-product-card-text-color", "spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-items-center", "spiffy-tw-gap-1", "spiffy-tw-text-[--spiffy-colors-text-primary]", "spiffy-tw-tracking-[0.8px]");
+	const starClassnames = (0, classnames.default)("spiffy-product-card-rating-star-color", "spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-w-[14px]", "spiffy-tw-h-[14px]");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: group,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_md.MdStar, { className: starClassnames }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+					variant: "body3",
+					children: formatReviews(stars)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
+					variant: "body3",
+					children: [
+						"(",
+						reviewCount,
+						")"
+					]
+				})
+			]
+		})
+	});
+};
+const PriceSection = ({ originalPrice, salePrice, pricePrefix }) => {
+	if (!originalPrice) return null;
+	const priceClassName = (0, classnames.default)("spiffy-product-card-price", "spiffy-product-card-text-color", "spiffy-tw-font-regular", "spiffy-tw-flex", "spiffy-tw-flex-wrap", "spiffy-tw-gap-1", "spiffy-tw-text-sm", "spiffy-tw-font-[400]", "spiffy-tw-leading-[100%]", "spiffy-tw-tracking-[0.8px]", "spiffy-tw-text-[--spiffy-colors-text-primary]");
+	const showSalePrice = salePrice && originalPrice !== salePrice;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: priceClassName,
+		children: [
+			pricePrefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, { children: pricePrefix }),
+			showSalePrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, { children: salePrice }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				className: showSalePrice ? "spiffy-tw-line-through" : "",
+				children: originalPrice
+			})
+		]
+	});
+};
+const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, url, originalPrice, averageRating, numberReviews, salePrice, variant, hoverVariant, dataTestId, layoutVariant = "normal", zoomOnHover = false, aspectRatio = "none", growWithContainer = false, handleClick }) => {
+	const finalVariant = variant ?? productCardConfig?.variant ?? "filled";
+	const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? "backgroundDark";
+	const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? "normal";
+	const pricePrefix = productCardConfig?.pricePrefix;
+	if (productCardConfig == null) {
+		logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
+		return null;
+	}
+	const layoutClasses = require_productCardVariants.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;
+	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,
+		"spiffy-tw-flex-1": growWithContainer
+	}, ...!growWithContainer && layoutVariant ? verticalContainerVariantClasses : []);
+	const linkClassnames = (0, classnames.default)({
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-h-full": true,
+		"spiffy-tw-overflow-hidden": true,
+		"spiffy-tw-select-none": true
+	});
+	const imageClipContainerClassnames = (0, classnames.default)("spiffy-tw-w-full", "spiffy-tw-overflow-hidden", {
+		"spiffy-tw-flex-shrink-0": growWithContainer,
+		"spiffy-tw-tw-h-full": !growWithContainer
+	}, aspectRatio === "3:4" ? "spiffy-tw-aspect-[3/4]" : "", aspectRatio === "square" ? "spiffy-tw-aspect-square" : "");
+	const imageContainerClassnames = (0, classnames.default)(linkClassnames, zoomOnHover ? [
+		"spiffy-tw-transition-transform",
+		"spiffy-tw-duration-200",
+		"spiffy-tw-origin-top",
+		"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 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", {
+		className: containerClassnames,
+		"data-testid": dataTestId,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			href: url,
+			onClick: () => handleClick(url || ""),
+			target: "_self",
+			draggable: false,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: verticalContainerClassnames,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: imageClipContainerClassnames,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: imageContainerClassnames,
+						children: imageUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageWithFallback.ImageWithFallback, {
+							src: imageUrl,
+							alt: title,
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { className: "spiffy-tw-w-6 spiffy-tw-h-6" }),
+							imageClassnames
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: contentClassnames,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Headline.Headline, {
+						variant: "h4",
+						className: productTitleClassnames,
+						children: title
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: priceAndRatingContainerClassnames,
+						children: [(originalPrice || salePrice) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PriceSection, {
+							originalPrice: formatPrice(originalPrice),
+							salePrice: formatPrice(salePrice),
+							pricePrefix
+						}), averageRating && numberReviews && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingSummary, {
+							stars: averageRating,
+							reviewCount: numberReviews
+						})]
+					})]
+				})]
+			})
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'PriceSection', {
+  enumerable: true,
+  get: function () {
+    return PriceSection;
+  }
+});
+Object.defineProperty(exports, 'ProductCard', {
+  enumerable: true,
+  get: function () {
+    return ProductCard;
+  }
+});
+Object.defineProperty(exports, 'RatingSummary', {
+  enumerable: true,
+  get: function () {
+    return RatingSummary;
+  }
+});

package/dist/ProductCardSkeleton-BPfp6IOp.js

@@ -0,0 +1,38 @@
+import { productCardLayoutVariantClasses } from "./productCardVariants-C_QIZ-KF.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/common/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;
+}({});
+
+//#endregion
+//#region src/components/common/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 { ProductCardSkeleton };

package/dist/ProductCardSkeleton-BgvDlaty.cjs

@@ -0,0 +1,46 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_productCardVariants = require('./productCardVariants-Dd-wrJKP.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);
+
+//#region src/components/common/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;
+}({});
+
+//#endregion
+//#region src/components/common/ProductCard/ProductCardSkeleton.tsx
+const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
+	const layoutClasses = require_productCardVariants.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, 'ProductCardSkeleton', {
+  enumerable: true,
+  get: function () {
+    return ProductCardSkeleton;
+  }
+});

package/dist/ProductGrid-B7QZfW-v.cjs

@@ -0,0 +1,77 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_ProductCard = require('./ProductCard-CS6DZAwO.cjs');
+const require_productGridVariants = require('./productGridVariants-DVzvjK9i.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);
+
+//#region src/config/chatElementDisplayLocation.ts
+let ChatElementDisplayLocation = /* @__PURE__ */ function(ChatElementDisplayLocation$1) {
+	ChatElementDisplayLocation$1["IN_CHAT"] = "in_chat";
+	ChatElementDisplayLocation$1["CHAT_PREVIEW"] = "chat_preview";
+	ChatElementDisplayLocation$1["FLOATING_BUTTON"] = "floating_button";
+	ChatElementDisplayLocation$1["HELP_ME_CHOOSE"] = "help_me_choose";
+	ChatElementDisplayLocation$1["PLP_IMAGE_BANNER"] = "plp_image_banner";
+	ChatElementDisplayLocation$1["TOP_REVIEWS_SNIPPET"] = "top_reviews_snippet";
+	ChatElementDisplayLocation$1["BOTTOM_REVIEWS_SNIPPET"] = "bottom_reviews_snippet";
+	ChatElementDisplayLocation$1["BLOCK_BACK_BUTTON"] = "block_back_button";
+	ChatElementDisplayLocation$1["SWITCH_TO_AGENT"] = "switch_to_agent";
+	ChatElementDisplayLocation$1["CONVERSATIONAL_SEARCH"] = "conversational_search";
+	ChatElementDisplayLocation$1["GLOBAL_SEARCH_ENTRYPOINT"] = "global_search_entrypoint";
+	ChatElementDisplayLocation$1["SEARCH_NAV_ENTRYPOINT"] = "search_nav_entrypoint";
+	ChatElementDisplayLocation$1["SEARCH_PROMPT"] = "search_prompt";
+	ChatElementDisplayLocation$1["SEARCH_PROMPT_BUTTON"] = "search_prompt_button";
+	ChatElementDisplayLocation$1["PRODUCT_GRID"] = "product_grid";
+	ChatElementDisplayLocation$1["UNSPECIFIED"] = "unspecified";
+	ChatElementDisplayLocation$1["FILTER_MODAL"] = "filter_modal";
+	ChatElementDisplayLocation$1["PROMPT_CARD"] = "prompt_card";
+	ChatElementDisplayLocation$1["WINDOW_API_CALL"] = "window_api_call";
+	return ChatElementDisplayLocation$1;
+}({});
+
+//#endregion
+//#region src/components/common/ProductGrid/ProductGrid.tsx
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer = true, handleClick }) => {
+	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = require_productGridVariants.productGridVariantClasses[productGridVariant];
+	const cardContainerClasses = (0, classnames.default)({
+		"spiffy-tw-w-full": cardsGrowWithContainer,
+		"spiffy-tw-h-full": cardsGrowWithContainer
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: productGridClasses,
+		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,
+				merchantShortName,
+				imageUrl: product.imageUrl,
+				searchResponseId,
+				productResponseId: product.responseId,
+				title: product.title,
+				url: product.url,
+				originalPrice: product.originalPrice,
+				salePrice: product.salePrice,
+				averageRating: product.averageRating,
+				numberReviews: product.numberReviews,
+				cardDisplayLocation: ChatElementDisplayLocation.PRODUCT_GRID,
+				layoutVariant: productCardLayoutVariant,
+				variant: productCardVariant,
+				hoverVariant: productCardHoverVariant,
+				zoomOnHover,
+				aspectRatio: productCardImageAspectRatio,
+				clickPosition: index,
+				growWithContainer: cardsGrowWithContainer,
+				handleClick
+			}, product.id)
+		}, product.id))
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'ProductGrid', {
+  enumerable: true,
+  get: function () {
+    return ProductGrid;
+  }
+});

package/dist/ProductGrid-DB_Uq5F-.js

@@ -0,0 +1,69 @@
+import { ProductCard } from "./ProductCard-Btg8tHGc.js";
+import { productGridVariantClasses } from "./productGridVariants-CxCKx5Fq.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/config/chatElementDisplayLocation.ts
+let ChatElementDisplayLocation = /* @__PURE__ */ function(ChatElementDisplayLocation$1) {
+	ChatElementDisplayLocation$1["IN_CHAT"] = "in_chat";
+	ChatElementDisplayLocation$1["CHAT_PREVIEW"] = "chat_preview";
+	ChatElementDisplayLocation$1["FLOATING_BUTTON"] = "floating_button";
+	ChatElementDisplayLocation$1["HELP_ME_CHOOSE"] = "help_me_choose";
+	ChatElementDisplayLocation$1["PLP_IMAGE_BANNER"] = "plp_image_banner";
+	ChatElementDisplayLocation$1["TOP_REVIEWS_SNIPPET"] = "top_reviews_snippet";
+	ChatElementDisplayLocation$1["BOTTOM_REVIEWS_SNIPPET"] = "bottom_reviews_snippet";
+	ChatElementDisplayLocation$1["BLOCK_BACK_BUTTON"] = "block_back_button";
+	ChatElementDisplayLocation$1["SWITCH_TO_AGENT"] = "switch_to_agent";
+	ChatElementDisplayLocation$1["CONVERSATIONAL_SEARCH"] = "conversational_search";
+	ChatElementDisplayLocation$1["GLOBAL_SEARCH_ENTRYPOINT"] = "global_search_entrypoint";
+	ChatElementDisplayLocation$1["SEARCH_NAV_ENTRYPOINT"] = "search_nav_entrypoint";
+	ChatElementDisplayLocation$1["SEARCH_PROMPT"] = "search_prompt";
+	ChatElementDisplayLocation$1["SEARCH_PROMPT_BUTTON"] = "search_prompt_button";
+	ChatElementDisplayLocation$1["PRODUCT_GRID"] = "product_grid";
+	ChatElementDisplayLocation$1["UNSPECIFIED"] = "unspecified";
+	ChatElementDisplayLocation$1["FILTER_MODAL"] = "filter_modal";
+	ChatElementDisplayLocation$1["PROMPT_CARD"] = "prompt_card";
+	ChatElementDisplayLocation$1["WINDOW_API_CALL"] = "window_api_call";
+	return ChatElementDisplayLocation$1;
+}({});
+
+//#endregion
+//#region src/components/common/ProductGrid/ProductGrid.tsx
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer = true, handleClick }) => {
+	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
+	const cardContainerClasses = classNames({
+		"spiffy-tw-w-full": cardsGrowWithContainer,
+		"spiffy-tw-h-full": cardsGrowWithContainer
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: productGridClasses,
+		children: productList.map((product, index) => /* @__PURE__ */ jsx("div", {
+			className: cardContainerClasses,
+			children: /* @__PURE__ */ jsx(ProductCard, {
+				productCardConfig,
+				merchantShortName,
+				imageUrl: product.imageUrl,
+				searchResponseId,
+				productResponseId: product.responseId,
+				title: product.title,
+				url: product.url,
+				originalPrice: product.originalPrice,
+				salePrice: product.salePrice,
+				averageRating: product.averageRating,
+				numberReviews: product.numberReviews,
+				cardDisplayLocation: ChatElementDisplayLocation.PRODUCT_GRID,
+				layoutVariant: productCardLayoutVariant,
+				variant: productCardVariant,
+				hoverVariant: productCardHoverVariant,
+				zoomOnHover,
+				aspectRatio: productCardImageAspectRatio,
+				clickPosition: index,
+				growWithContainer: cardsGrowWithContainer,
+				handleClick
+			}, product.id)
+		}, product.id))
+	});
+};
+
+//#endregion
+export { ProductGrid };

package/dist/SearchAutocomplete-C5FL82xC.js

@@ -0,0 +1,51 @@
+import classNames from "classnames";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import OutlinedStar from "@envive-ai/react-icons/src/OutlinedStar";
+
+//#region src/components/search/SearchInputAutocomplete/SearchAutocomplete.tsx
+const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: "spiffy-tw-h-full",
+		initial: {
+			opacity: 0,
+			y: -10
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -10
+		},
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ jsx("ul", {
+			id,
+			role: "listbox",
+			className: "spiffy-tw-mt-4 spiffy-tw-space-y-2",
+			children: results.map((result, index) => /* @__PURE__ */ jsxs("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1", { "spiffy-tw-bg-neutral-200": index === focusedIndex }, "hover:spiffy-tw-bg-neutral-100"),
+				onClick: () => onSuggestionSelect(result, index),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
+				},
+				children: [/* @__PURE__ */ jsx(OutlinedStar, {
+					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2",
+					fill: iconColor
+				}), /* @__PURE__ */ jsx("span", {
+					className: "spiffy-tw-font-bold",
+					children: result
+				})]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+export { SearchAutocomplete };