@envive-ai/react-toolkit 0.2.13 → 0.3.0

package/dist/components/ModalSheet/mobile/mobileHeader.js

@@ -0,0 +1,36 @@
+import { AnimatedChevron } from "../../AnimatedChevron/AnimatedChevron.js";
+import { motion, useMotionValue } from "framer-motion";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ModalSheet/mobile/mobileHeader.tsx
+const modalSheetVariants = { primary: {
+	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
+	"spiffy-tw-text-[--spiffy-colors-text-light]": true
+} };
+const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
+	const animationKey = useMotionValue(-1);
+	const headerClassName = classNames({
+		"spiffy-modal-sheet-header": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-pt-[16px]": true,
+		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
+		...modalSheetVariants[headerVariant]
+	});
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: headerClassName,
+		onTouchStart: handleHeaderClick,
+		onMouseDown: handleHeaderClick,
+		children: [/* @__PURE__ */ jsx(AnimatedChevron, {
+			animationKey,
+			chevronColor
+		}), headerContent]
+	});
+};
+
+//#endregion
+export { ModalSheetMobileHeader };

package/dist/components/ModalSheet/{index-C_8baIZK.d.cts → types.d.cts}

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
-
 //#region src/components/ModalSheet/types.d.ts
 type ModalSheetProps = {
   children: React.ReactNode;
@@ -24,15 +22,4 @@ type ModalSheetFooterProps = {
 };
 type ModalSheetHeaderVariant = 'primary';
 //#endregion
-//#region src/components/ModalSheet/ModalSheet.d.ts
-declare const ModalSheet: ({
-  children,
-  isOpen,
-  closeModal,
-  animationDuration,
-  desktopWidth,
-  headerProps,
-  footerProps
-}: ModalSheetProps) => react_jsx_runtime3.JSX.Element;
-//#endregion
-export { ModalSheet };
+export { ModalSheetProps };

package/dist/components/ModalSheet/{index-CI0qFVA7.d.ts → types.d.ts}

@@ -1,5 +1,3 @@
-import * as react_jsx_runtime25 from "react/jsx-runtime";
-
 //#region src/components/ModalSheet/types.d.ts
 type ModalSheetProps = {
   children: React.ReactNode;
@@ -24,15 +22,4 @@ type ModalSheetFooterProps = {
 };
 type ModalSheetHeaderVariant = 'primary';
 //#endregion
-//#region src/components/ModalSheet/ModalSheet.d.ts
-declare const ModalSheet: ({
-  children,
-  isOpen,
-  closeModal,
-  animationDuration,
-  desktopWidth,
-  headerProps,
-  footerProps
-}: ModalSheetProps) => react_jsx_runtime25.JSX.Element;
-//#endregion
-export { ModalSheet };
+export { ModalSheetProps };

package/dist/{ProductCard-C3seoFWE.cjs → components/ProductCard/ProductCard.cjs}

@@ -1,77 +1,20 @@
-const require_chunk = require('./chunk-CbDLau6x.cjs');
-const require_formatPrice = require('./formatPrice-CyfkjZ3R.cjs');
-const require_Typography = require('./Typography-Csg-nd_w.cjs');
-const require_ImageWithFallback = require('./ImageWithFallback-BiBjNK-9.cjs');
-const require_Spinner = require('./Spinner-CUrXDajS.cjs');
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_formatPrice = require('../../util/formatPrice.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_logger = require('../../logging/logger.cjs');
+const require_productCardVariants = require('./productCardVariants.cjs');
+const require_ImageWithFallback = require('../ImageWithFallback/ImageWithFallback.cjs');
+require('../ImageWithFallback/index.cjs');
+const require_Spinner = require('../Spinner/Spinner.cjs');
+require('../Spinner/index.cjs');
 let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_icons_md = require("react-icons/md");
 let __envive_ai_react_hooks_hooks_ImageResolver = require("@envive-ai/react-hooks/hooks/ImageResolver");
 let __envive_ai_react_hooks_config = require("@envive-ai/react-hooks/config");
 
-//#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/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/components/ProductCard/ProductCard.tsx
 const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
 	minimumFractionDigits: 1,
@@ -124,17 +67,17 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 	const pricePrefix = productCardConfig?.pricePrefix;
 	const handleClick = () => onClick();
 	if (productCardConfig == null) {
-		logger_default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
+		require_logger.default.logError("[ProductCard] productCardConfig is null", void 0, { merchant: merchantShortName });
 		return null;
 	}
-	const layoutClasses = productCardLayoutVariantClasses[finalLayoutVariant];
+	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,
 		"spiffy-tw-rounded-[8px]": layoutVariant === "normal"
-	}, !growWithContainer && layoutClasses.container, variantClassMap.get(finalVariant) ?? [], variantHoverClassMap.get(finalHoverVariant) ?? []);
-	const verticalContainerVariantClasses = productCardLayoutVariantClasses[layoutVariant].verticalContainer;
+	}, !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,
@@ -157,7 +100,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", 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", 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", {
@@ -205,101 +148,6 @@ 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 () {
-    return PriceSection;
-  }
-});
-Object.defineProperty(exports, 'ProductCard', {
-  enumerable: true,
-  get: function () {
-    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;
-  }
-});
+exports.PriceSection = PriceSection;
+exports.ProductCard = ProductCard;
+exports.RatingSummary = RatingSummary;

package/dist/components/ProductCard/ProductCard.d.cts

@@ -0,0 +1,64 @@
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant } from "./types.cjs";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/components/ProductCard/ProductCard.d.ts
+interface RatingSummaryProps {
+  stars: number;
+  reviewCount: number;
+  className?: string;
+}
+declare const RatingSummary: ({
+  stars,
+  reviewCount,
+  className
+}: RatingSummaryProps) => react_jsx_runtime13.JSX.Element;
+interface PriceSectionProps {
+  originalPrice?: string;
+  salePrice?: string;
+  pricePrefix?: string;
+}
+declare const PriceSection: ({
+  originalPrice,
+  salePrice,
+  pricePrefix
+}: PriceSectionProps) => react_jsx_runtime13.JSX.Element;
+interface ProductCardProps {
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  title: string;
+  url: string;
+  imageUrl?: string;
+  originalPrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  salePrice?: number;
+  variant?: ProductCardVariant;
+  hoverVariant?: ProductCardHoverVariant;
+  layoutVariant?: ProductCardLayoutVariant;
+  zoomOnHover?: boolean;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  growWithContainer?: boolean;
+  onClick?: () => void;
+  dataTestId?: string;
+}
+declare const ProductCard: ({
+  productCardConfig,
+  merchantShortName,
+  imageUrl,
+  title,
+  url,
+  originalPrice,
+  averageRating,
+  numberReviews,
+  salePrice,
+  variant,
+  hoverVariant,
+  dataTestId,
+  layoutVariant,
+  zoomOnHover,
+  aspectRatio,
+  growWithContainer,
+  onClick
+}: ProductCardProps) => react_jsx_runtime13.JSX.Element;
+//#endregion
+export { PriceSection, ProductCard, RatingSummary, RatingSummaryProps };

package/dist/components/ProductCard/ProductCard.d.ts

@@ -0,0 +1,64 @@
+import { ProductCardConfig, ProductCardHoverVariant, ProductCardLayoutVariant, ProductCardVariant } from "./types.js";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
+
+//#region src/components/ProductCard/ProductCard.d.ts
+interface RatingSummaryProps {
+  stars: number;
+  reviewCount: number;
+  className?: string;
+}
+declare const RatingSummary: ({
+  stars,
+  reviewCount,
+  className
+}: RatingSummaryProps) => react_jsx_runtime21.JSX.Element;
+interface PriceSectionProps {
+  originalPrice?: string;
+  salePrice?: string;
+  pricePrefix?: string;
+}
+declare const PriceSection: ({
+  originalPrice,
+  salePrice,
+  pricePrefix
+}: PriceSectionProps) => react_jsx_runtime21.JSX.Element;
+interface ProductCardProps {
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  title: string;
+  url: string;
+  imageUrl?: string;
+  originalPrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  salePrice?: number;
+  variant?: ProductCardVariant;
+  hoverVariant?: ProductCardHoverVariant;
+  layoutVariant?: ProductCardLayoutVariant;
+  zoomOnHover?: boolean;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  growWithContainer?: boolean;
+  onClick?: () => void;
+  dataTestId?: string;
+}
+declare const ProductCard: ({
+  productCardConfig,
+  merchantShortName,
+  imageUrl,
+  title,
+  url,
+  originalPrice,
+  averageRating,
+  numberReviews,
+  salePrice,
+  variant,
+  hoverVariant,
+  dataTestId,
+  layoutVariant,
+  zoomOnHover,
+  aspectRatio,
+  growWithContainer,
+  onClick
+}: ProductCardProps) => react_jsx_runtime21.JSX.Element;
+//#endregion
+export { PriceSection, ProductCard, RatingSummary, RatingSummaryProps };

package/dist/{ProductCard-ChitHvuc.js → components/ProductCard/ProductCard.js}

@@ -1,75 +1,18 @@
-import { t as formatPrice } from "./formatPrice-DexQu2aZ.js";
-import { t as Typography } from "./Typography-xehJH05l.js";
-import { t as ImageWithFallback } from "./ImageWithFallback-_QZT0EKI.js";
-import { t as Spinner } from "./Spinner-CDDFWySo.js";
+import { formatPrice } from "../../util/formatPrice.js";
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import logger_default from "../../logging/logger.js";
+import { productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap } from "./productCardVariants.js";
+import { ImageWithFallback } from "../ImageWithFallback/ImageWithFallback.js";
+import "../ImageWithFallback/index.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import "../Spinner/index.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/ImageResolver";
 import { PRODUCT_CARD_TESTID } from "@envive-ai/react-hooks/config";
 
-//#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/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/components/ProductCard/ProductCard.tsx
 const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
 	minimumFractionDigits: 1,
@@ -203,42 +146,4 @@ 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 = 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 { ProductCard as a, variantClassMap as c, PriceSection as i, variantHoverClassMap as l, AnimatedProductCardOverrides as n, RatingSummary as o, ProductCardSkeletonOverrides as r, productCardLayoutVariantClasses as s, ProductCardSkeleton as t, variantTitleColorMap as u };
+export { PriceSection, ProductCard, RatingSummary };

package/dist/components/ProductCard/ProductCardSkeleton.cjs

@@ -0,0 +1,33 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_productCardVariants = require('./productCardVariants.cjs');
+const require_types = require('./types.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ProductCard/ProductCardSkeleton.tsx
+const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = false }) => {
+	const layoutClasses = require_productCardVariants.productCardLayoutVariantClasses[layoutVariant || "normal"];
+	const containerClasses = (0, classnames.default)(require_types.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)(require_types.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
+exports.ProductCardSkeleton = ProductCardSkeleton;

package/dist/components/ProductCard/ProductCardSkeleton.d.cts

@@ -0,0 +1,7 @@
+import { ProductCardSkeletonProps } from "./types.cjs";
+import { FC } from "react";
+
+//#region src/components/ProductCard/ProductCardSkeleton.d.ts
+declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;
+//#endregion
+export { ProductCardSkeleton };

package/dist/components/ProductCard/ProductCardSkeleton.d.ts

@@ -0,0 +1,7 @@
+import { ProductCardSkeletonProps } from "./types.js";
+import { FC } from "react";
+
+//#region src/components/ProductCard/ProductCardSkeleton.d.ts
+declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;
+//#endregion
+export { ProductCardSkeleton };

package/dist/components/ProductCard/ProductCardSkeleton.js

@@ -0,0 +1,31 @@
+import { productCardLayoutVariantClasses } from "./productCardVariants.js";
+import { ProductCardSkeletonOverrides } from "./types.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#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 { ProductCardSkeleton };