@envive-ai/react-toolkit 0.2.11 → 0.2.12

package/dist/{Accordion-FyCFBOen.cjs → Accordion-B0TzPN3m.cjs}

@@ -1,15 +1,12 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-let framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let react = require("react");
-react = require_chunk.__toESM(react);
+let framer_motion = require("framer-motion");
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let __envive_ai_react_icons_ChevronDown = require("@envive-ai/react-icons/ChevronDown");
 __envive_ai_react_icons_ChevronDown = require_chunk.__toESM(__envive_ai_react_icons_ChevronDown);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Accordion/Accordion.tsx
 const ANIMATION_DURATION = .3;

package/dist/{Accordion-B8aUlf0q.js → Accordion-D8Vm8J1y.js}

@@ -1,9 +1,9 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { motion } from "framer-motion";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Typography } from "./Typography-xehJH05l.js";
 import { useRef, useState } from "react";
+import { motion } from "framer-motion";
 import classNames from "classnames";
 import ChevronDown from "@envive-ai/react-icons/ChevronDown";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Accordion/Accordion.tsx
 const ANIMATION_DURATION = .3;
@@ -74,4 +74,4 @@ const Accordion = ({ title, content }) => {
 };
 
 //#endregion
-export { Accordion };
+export { Accordion as t };

package/dist/{AnimatedChevron-wpcAHp6d.cjs → AnimatedChevron-9xf90bpP.cjs}

@@ -1,8 +1,6 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 let framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
 //#region src/components/AnimatedChevron/AnimatedChevron.tsx
 const AnimatedChevron = ({ animationKey, chevronColor }) => {

package/dist/{AnimatedChevron-Dee6Pe81.js → AnimatedChevron-DghLnmlM.js}

@@ -26,4 +26,4 @@ const AnimatedChevron = ({ animationKey, chevronColor }) => {
 };
 
 //#endregion
-export { AnimatedChevron };
+export { AnimatedChevron as t };

package/dist/{ButtonBase-B6vDKbGQ.cjs → ButtonBase-BMEAmPnS.cjs}

@@ -1,11 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let react = require("react");
-react = require_chunk.__toESM(react);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ButtonBase/types.ts
 let ButtonBaseOverrides = /* @__PURE__ */ function(ButtonBaseOverrides$1) {

package/dist/{ButtonBase-Bpc7nOpz.js → ButtonBase-CT397aT3.js}

@@ -1,7 +1,7 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Typography } from "./Typography-xehJH05l.js";
 import { createElement, useEffect, useRef } from "react";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ButtonBase/types.ts
 let ButtonBaseOverrides = /* @__PURE__ */ function(ButtonBaseOverrides$1) {
@@ -57,4 +57,4 @@ const ButtonBase = ({ isDisabled = false, dataAttributes, buttonClass, text, tex
 };
 
 //#endregion
-export { ButtonBase, ButtonBaseOverrides };
+export { ButtonBaseOverrides as n, ButtonBase as t };

package/dist/{DynamicFiltersScrollbar-D8OqC4DA.js → DynamicFiltersScrollbar-CibstqNd.js}

@@ -1,13 +1,12 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Typography } from "./Typography-xehJH05l.js";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 import ScrollContainer from "react-indiana-drag-scroll";
 
 //#region src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx
 const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
 	if (selectedFilterOptions.length === 0) return null;
-	const filterDefaultWithoutBg = filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim();
-	const buttonClasses = classNames(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultWithoutBg, appliedFilterBackgroundClasses);
+	const buttonClasses = classNames(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim(), appliedFilterBackgroundClasses);
 	const iconColor = "currentColor";
 	return /* @__PURE__ */ jsx(ScrollContainer, {
 		className: filterBarClassNames,
@@ -44,10 +43,9 @@ const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames,
 	className: filterBarClassNames,
 	hideScrollbars: true,
 	children: availableDynamicFilters.map(({ name, displayName }) => {
-		const buttonClasses = classNames("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses);
 		return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: buttonClasses,
+			className: classNames("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses),
 			onClick: () => {
 				onToggleDynamicFilter({
 					filter: name,
@@ -63,4 +61,4 @@ const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames,
 });
 
 //#endregion
-export { AppliedFiltersScrollbar, DynamicFiltersScrollbar };
+export { AppliedFiltersScrollbar as n, DynamicFiltersScrollbar as t };

package/dist/{DynamicFiltersScrollbar-DIwHWq6v.cjs → DynamicFiltersScrollbar-DqIydLJu.cjs}

@@ -1,17 +1,15 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 let react_indiana_drag_scroll = require("react-indiana-drag-scroll");
 react_indiana_drag_scroll = require_chunk.__toESM(react_indiana_drag_scroll);
 
 //#region src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx
 const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
 	if (selectedFilterOptions.length === 0) return null;
-	const filterDefaultWithoutBg = filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim();
-	const buttonClasses = (0, classnames.default)(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultWithoutBg, appliedFilterBackgroundClasses);
+	const buttonClasses = (0, classnames.default)(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim(), appliedFilterBackgroundClasses);
 	const iconColor = "currentColor";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_indiana_drag_scroll.default, {
 		className: filterBarClassNames,
@@ -48,10 +46,9 @@ const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames,
 	className: filterBarClassNames,
 	hideScrollbars: true,
 	children: availableDynamicFilters.map(({ name, displayName }) => {
-		const buttonClasses = (0, classnames.default)("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: buttonClasses,
+			className: (0, classnames.default)("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses),
 			onClick: () => {
 				onToggleDynamicFilter({
 					filter: name,

package/dist/{ImageWithFallback-DvaVpR6v.cjs → ImageWithFallback-CuPe6XF6.cjs}

@@ -1,10 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ImageWithFallback/ImageWithFallback.tsx
 const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {

package/dist/{ImageWithFallback-BW57cQw-.js → ImageWithFallback-_QZT0EKI.js}

@@ -1,6 +1,6 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useState } from "react";
 import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ImageWithFallback/ImageWithFallback.tsx
 const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
@@ -39,4 +39,4 @@ const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback,
 };
 
 //#endregion
-export { ImageWithFallback };
+export { ImageWithFallback as t };

package/dist/{ModalSheet-BvM2PJbH.cjs → ModalSheet-Be7-bkXK.cjs}

@@ -1,15 +1,11 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_AnimatedChevron = require('./AnimatedChevron-wpcAHp6d.cjs');
-let framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+const require_AnimatedChevron = require('./AnimatedChevron-9xf90bpP.cjs');
 let react = require("react");
-react = require_chunk.__toESM(react);
+let framer_motion = require("framer-motion");
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_hooks_IsSmallScreen = require("@envive-ai/react-hooks/hooks/IsSmallScreen");
-__envive_ai_react_hooks_hooks_IsSmallScreen = require_chunk.__toESM(__envive_ai_react_hooks_hooks_IsSmallScreen);
 
 //#region src/components/ModalSheet/mobile/mobileHeader.tsx
 const modalSheetVariants$1 = { primary: {
@@ -154,16 +150,15 @@ const modalSheetVariants = { primary: {
 	"spiffy-tw-text-[--spiffy-colors-text-light]": true
 } };
 const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
-	const headerStyles = (0, classnames.default)({
-		"spiffy-modal-sheet-header": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-items-center": true,
-		"spiffy-tw-justify-between": true,
-		"spiffy-tw-w-full": true,
-		...modalSheetVariants[headerVariant]
-	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: headerStyles,
+		className: (0, classnames.default)({
+			"spiffy-modal-sheet-header": true,
+			"spiffy-tw-flex": true,
+			"spiffy-tw-items-center": true,
+			"spiffy-tw-justify-between": true,
+			"spiffy-tw-w-full": true,
+			...modalSheetVariants[headerVariant]
+		}),
 		children: headerContent
 	});
 };

package/dist/{ModalSheet-DFva7krP.js → ModalSheet-DVrY7Mw0.js}

@@ -1,8 +1,8 @@
-import { AnimatedChevron } from "./AnimatedChevron-Dee6Pe81.js";
-import { motion, useMotionValue } from "framer-motion";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as AnimatedChevron } from "./AnimatedChevron-DghLnmlM.js";
 import { useEffect, useState } from "react";
+import { motion, useMotionValue } from "framer-motion";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useIsSmallScreen } from "@envive-ai/react-hooks/hooks/IsSmallScreen";
 
 //#region src/components/ModalSheet/mobile/mobileHeader.tsx
@@ -148,16 +148,15 @@ const modalSheetVariants = { primary: {
 	"spiffy-tw-text-[--spiffy-colors-text-light]": true
 } };
 const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
-	const headerStyles = 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,
-		...modalSheetVariants[headerVariant]
-	});
 	return /* @__PURE__ */ jsx("div", {
-		className: headerStyles,
+		className: 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,
+			...modalSheetVariants[headerVariant]
+		}),
 		children: headerContent
 	});
 };
@@ -299,4 +298,4 @@ const ModalSheet = ({ children, isOpen, closeModal, animationDuration = ANIMATIO
 };
 
 //#endregion
-export { ModalSheet };
+export { ModalSheet as t };

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

@@ -1,17 +1,14 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_formatPrice = require('./formatPrice-CyfkjZ3R.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-const require_ImageWithFallback = require('./ImageWithFallback-DvaVpR6v.cjs');
-const require_Spinner = require('./Spinner-Ccy6VFEp.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+const require_ImageWithFallback = require('./ImageWithFallback-CuPe6XF6.cjs');
+const require_Spinner = require('./Spinner-FQpy5bGu.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("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_ImageResolver = require("@envive-ai/react-hooks/hooks/ImageResolver");
-__envive_ai_react_hooks_hooks_ImageResolver = require_chunk.__toESM(__envive_ai_react_hooks_hooks_ImageResolver);
 let __envive_ai_react_hooks_config = require("@envive-ai/react-hooks/config");
-__envive_ai_react_hooks_config = require_chunk.__toESM(__envive_ai_react_hooks_config);
 
 //#region src/logging/logger.ts
 var Logger = class {
@@ -30,18 +27,6 @@ var Logger = class {
 };
 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/ProductCard/productCardVariants.ts
 /**
@@ -93,14 +78,12 @@ const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
 	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,
+			className: (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]"),
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_md.MdStar, { className: starClassnames }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_md.MdStar, { className: (0, classnames.default)("spiffy-product-card-rating-star-color", "spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-w-[14px]", "spiffy-tw-h-[14px]") }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 					variant: "body3",
 					children: formatReviews(stars)
@@ -207,8 +190,8 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 					}), /* @__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),
+							originalPrice: require_formatPrice.formatPrice(originalPrice),
+							salePrice: require_formatPrice.formatPrice(salePrice),
 							pricePrefix
 						}), averageRating && numberReviews && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingSummary, {
 							stars: averageRating,
@@ -222,12 +205,20 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 };
 
 //#endregion
-//#region src/components/ProductCard/ProductCardSkeleton.tsx
-var ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
+//#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;
-}(ProductCardSkeletonOverrides || {});
+}({});
+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 : "");
@@ -252,6 +243,12 @@ const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = f
 };
 
 //#endregion
+Object.defineProperty(exports, 'AnimatedProductCardOverrides', {
+  enumerable: true,
+  get: function () {
+    return AnimatedProductCardOverrides;
+  }
+});
 Object.defineProperty(exports, 'PriceSection', {
   enumerable: true,
   get: function () {
@@ -270,6 +267,12 @@ Object.defineProperty(exports, 'ProductCardSkeleton', {
     return ProductCardSkeleton;
   }
 });
+Object.defineProperty(exports, 'ProductCardSkeletonOverrides', {
+  enumerable: true,
+  get: function () {
+    return ProductCardSkeletonOverrides;
+  }
+});
 Object.defineProperty(exports, 'RatingSummary', {
   enumerable: true,
   get: function () {

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

@@ -1,8 +1,9 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { ImageWithFallback } from "./ImageWithFallback-BW57cQw-.js";
-import { Spinner } from "./Spinner-D2HbRsuw.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { 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 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";
@@ -24,18 +25,6 @@ var Logger = class {
 };
 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/ProductCard/productCardVariants.ts
 /**
@@ -87,14 +76,12 @@ const formatReviews = (stars) => String(Number(stars).toLocaleString("en-US", {
 	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,
+			className: 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]"),
 			children: [
-				/* @__PURE__ */ jsx(MdStar, { className: starClassnames }),
+				/* @__PURE__ */ jsx(MdStar, { className: classNames("spiffy-product-card-rating-star-color", "spiffy-tw-fill-[--spiffy-colors-accent-primary]", "spiffy-tw-w-[14px]", "spiffy-tw-h-[14px]") }),
 				/* @__PURE__ */ jsx(Typography, {
 					variant: "body3",
 					children: formatReviews(stars)
@@ -216,12 +203,20 @@ const ProductCard = ({ productCardConfig, merchantShortName, imageUrl, title, ur
 };
 
 //#endregion
-//#region src/components/ProductCard/ProductCardSkeleton.tsx
-var ProductCardSkeletonOverrides = /* @__PURE__ */ function(ProductCardSkeletonOverrides$1) {
+//#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;
-}(ProductCardSkeletonOverrides || {});
+}({});
+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 : "");
@@ -246,4 +241,4 @@ const ProductCardSkeleton = ({ layoutVariant, aspectRatio, growWithContainer = f
 };
 
 //#endregion
-export { PriceSection, ProductCard, ProductCardSkeleton, RatingSummary, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };
+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 };

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

@@ -1,9 +1,8 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_ProductCard = require('./ProductCard-C2KvH4MN.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+const require_ProductCard = require('./ProductCard-BeY85PBf.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ProductGrid/productGridVariants.ts
 const productGridVariantClasses = {

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

@@ -1,6 +1,6 @@
-import { ProductCard } from "./ProductCard-BiWAcPO4.js";
-import { jsx } from "react/jsx-runtime";
+import { a as ProductCard } from "./ProductCard-BoyYu6mI.js";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/ProductGrid/productGridVariants.ts
 const productGridVariantClasses = {
@@ -55,4 +55,4 @@ const ProductGrid = ({ productList, productGridVariant, productGridClasses, prod
 };
 
 //#endregion
-export { ProductGrid, productGridVariantClasses };
+export { productGridVariantClasses as n, ProductGrid as t };

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
-import { RadioButton } from "./RadioButton-CQ6qOvBl.js";
-import { jsx } from "react/jsx-runtime";
+import { t as RadioButton } from "./RadioButton-Bm0qK3bX.js";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
 const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
@@ -35,4 +35,4 @@ const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorde
 };
 
 //#endregion
-export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };
+export { SPIFFY_RADIO_BUTTON_GROUP_CLASS as n, RadioButtonGroup as t };

package/dist/RecommendedProducts-C2eNVrLo.cjs

@@ -0,0 +1,56 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
+const require_ProductGrid = require('./ProductGrid-CxKK7w_X.cjs');
+let framer_motion = require("framer-motion");
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/RecommendedProducts/RecommendedProducts.tsx
+const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCardConfig = {
+	variant: "minimal",
+	hoverVariant: "none",
+	layoutVariant: "square"
+}, productGridVariant = "square", heading, onProductClick }) => {
+	const containerClasses = (0, classnames.default)("spiffy-tw-justify-center", "spiffy-tw-overflow-hidden", "spiffy-tw-bg-white", "spiffy-tw-relative", "spiffy-tw-px-[24px]", "spiffy-tw-py-[16px]", "sm:spiffy-tw-px-[41px]", "sm:spiffy-tw-py-[40px]");
+	const titleContainerClasses = (0, classnames.default)("spiffy-tw-w-full", "spiffy-tw-border-b", "spiffy-tw-border-solid", "spiffy-tw-border-b-[--spiffy-colors-text-accent]", "spiffy-tw-pb-[8px]", "spiffy-tw-mb-[16px]");
+	const productGridClasses = (0, classnames.default)("spiffy-tw-grid", "spiffy-tw-justify-items-stretch", "spiffy-tw-grid-cols-2", "md:spiffy-tw-grid-cols-3", "lg:spiffy-tw-grid-cols-4", "spiffy-tw-gap-x-[4px]", "spiffy-tw-gap-y-[24px]", "spiffy-tw-h-full", "spiffy-tw-w-full", "spiffy-tw-items-stretch");
+	if (retrievedProducts == null || retrievedProducts.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+		className: containerClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		style: {
+			left: "50%",
+			right: "50%",
+			marginLeft: "-50vw",
+			marginRight: "-50vw",
+			width: "100vw"
+		},
+		children: [heading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: titleContainerClasses,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "h1",
+				className: "spiffy-tw-text-[--spiffy-colors-text-accent]",
+				children: heading
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductGrid.ProductGrid, {
+			productList: retrievedProducts,
+			productGridVariant,
+			productGridClasses,
+			productCardConfig,
+			merchantShortName,
+			onProductClick
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'RecommendedProducts', {
+  enumerable: true,
+  get: function () {
+    return RecommendedProducts;
+  }
+});