@trafilea/afrodita-components 6.44.0 → 6.45.0

package/build/index.d.ts

@@ -3984,7 +3984,7 @@ declare type SizeOptionProps = {
     value: string;
     disabled: boolean;
 };
-declare type OfferAtCartProps = {
+declare type OfferAtCartPropsBase = {
     className?: string;
     title: {
         content: string | ReactElement | {
@@ -3992,17 +3992,26 @@ declare type OfferAtCartProps = {
         };
         bold?: boolean;
     };
-    image: ImageProps;
+    image?: ImageProps;
     benefits: OfferAtCartBenefitProps[];
-    sizeOptions: SizeOptionProps[];
-    onAddToCart: (size: string, color?: string) => void;
     ctaText?: string;
     rating?: number;
     bottomCopy?: string;
-};
+};
+declare type OfferAtCartWithSizeOptions = OfferAtCartPropsBase & {
+    sizeOptions: SizeOptionProps[];
+    onAddToCart: (size: string, color?: string) => void;
+};
+declare type OfferAtCartWithoutSizeOptions = OfferAtCartPropsBase & {
+    sizeOptions?: never;
+    onAddToCart: () => void;
+};
+declare type OfferAtCartProps = OfferAtCartWithSizeOptions | OfferAtCartWithoutSizeOptions;
 
 declare const OfferAtCart: FC<OfferAtCartProps>;
 
+declare const OfferAtCartV2: FC<OfferAtCartProps>;
+
 interface DiscountTagProps {
     value: string;
     pos: 'next to price' | 'below price';
@@ -4309,6 +4318,7 @@ declare const isDangerouslySetInnerHTML: (content: any) => content is {
 declare const title: JSX.Element;
 declare const benefits: (size: 'xsmall' | 'small' | 'regular') => OfferAtCartBenefitProps[];
 declare const benefitsRawHtml: OfferAtCartBenefitProps[];
+declare const benefitsRawHtmlV2: OfferAtCartBenefitProps[];
 declare const sizeOptions: SizeOptionProps[];
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequency, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, BenefitsListProps, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerOption, ColorPickerWithTooltip, ColorsState, CommonProps, ComponentPosition, ComponentSize, ContentType, CouponCard, index_d as CrossSell, DeliveryDetails, DeviceType, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HorizontalDivider, HorizontalDividerProps, HurryUp, HurryUpProps, ISubscriptionFrequencyDropdown, Icon, IconButton, IconName, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, IconProps$1 as LibIconProps, LikeButton, LikeButtonColors, LikeButtonProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartBenefitProps, OfferAtCartProps, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Partner, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, PriceType, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioConfig, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, RadiosConfig, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SelectorOnChangeProps, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeOption, SizeOptionProps, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, SubscriptionPlanSelector, SubscriptionPlanSelectorProps, SubscriptionPlanSelectorRadios, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, TooltipContent, TooltipHeader, TooltipType, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithBenefits, WithChildren, WithTestId, benefits, benefitsRawHtml, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequency, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, BenefitsListProps, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerOption, ColorPickerWithTooltip, ColorsState, CommonProps, ComponentPosition, ComponentSize, ContentType, CouponCard, index_d as CrossSell, DeliveryDetails, DeviceType, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HorizontalDivider, HorizontalDividerProps, HurryUp, HurryUpProps, ISubscriptionFrequencyDropdown, Icon, IconButton, IconName, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, IconProps$1 as LibIconProps, LikeButton, LikeButtonColors, LikeButtonProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartBenefitProps, OfferAtCartProps, OfferAtCartV2, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Partner, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, PriceType, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioConfig, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, RadiosConfig, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SelectorOnChangeProps, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeOption, SizeOptionProps, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, SubscriptionPlanSelector, SubscriptionPlanSelectorProps, SubscriptionPlanSelectorRadios, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, TooltipContent, TooltipHeader, TooltipType, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithBenefits, WithChildren, WithTestId, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -5370,6 +5370,14 @@ var benefitsRawHtml = [
         text: 'Receive it every 3 months. Cancel anytime',
     },
 ];
+var benefitsRawHtmlV2 = [
+    benefitsRawHtml[0],
+    benefitsRawHtml[2],
+    {
+        icon: __assign$1({ name: 'pdp/shipping_empty' }, commonIconProps),
+        text: "<div>\n              <span style=line-height:22px>Club: Free \n              <span style=font-weight:600>priority shipping</span> \n                always\n              </span> \n              <small style=display:block;line-height:18px>Free for 30 days. Only $4.99/month after.\n              </small>\n            </div>",
+    },
+];
 var sizeOptions = [
     {
         key: 'S',
@@ -6779,7 +6787,7 @@ var Rating = function (_a) {
     return (jsxs$1(Container$14, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
 };
 
-var ImageWrapper$4 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  width: ", ";\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n"], ["\n  position: relative;\n  display: flex;\n  width: ", ";\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n"])), function (_a) {
+var ImageWrapper$4 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  width: ", ";\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n"], ["\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  width: ", ";\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n"])), function (_a) {
     var width = _a.width;
     return width;
 });
@@ -20506,17 +20514,17 @@ var JoinClubCard = function (_a) {
 var templateObject_1$l;
 
 var Container$i = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n"])));
-var Body = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  width: 100%;\n  height: ", ";\n"], ["\n  display: flex;\n  gap: 8px;\n  width: 100%;\n  height: ", ";\n"])), function (_a) {
+var Body = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n  width: 100%;\n  height: ", ";\n  margin-bottom: 1%;\n"], ["\n  display: flex;\n  gap: 8px;\n  width: 100%;\n  height: ", ";\n  margin-bottom: 1%;\n"])), function (_a) {
     var height = _a.height;
     return height;
 });
-var RightContent = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 8px;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 8px;\n  height: 100%;\n"])));
-var Benefits = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  height: ", ";\n  padding: 6px 10px;\n  border-radius: 8px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  height: ", ";\n  padding: 6px 10px;\n  border-radius: 8px;\n  background-color: ", ";\n"])), function (_a) {
+var RightContent = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 8px;\n  height: 100%;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 8px;\n  height: 100%;\n  width: 100%;\n"])));
+var Benefits = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 8px;\n  height: ", ";\n  padding: 6px 10px;\n  border-radius: 8px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  gap: 8px;\n  height: ", ";\n  padding: 6px 10px;\n  border-radius: 8px;\n  background-color: ", ";\n"])), function (_a) {
     var height = _a.height;
-    return height;
+    return height !== null && height !== void 0 ? height : '100%';
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.shades['10'].color;
+    var theme = _a.theme, backgroundColor = _a.backgroundColor;
+    return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
 });
 var Actions = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n"], ["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n"])));
 var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$9;
@@ -20533,26 +20541,39 @@ var getTitleProps = function (_a) {
         return { content: titleContent };
     }
 };
-var OfferAtCart = function (_a) {
-    var className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, _c = _a.image, src = _c.src, alt = _c.alt, benefits = _a.benefits, _d = _a.ctaText, ctaText = _d === void 0 ? 'Yes, I want this offer' : _d, sizeOptions = _a.sizeOptions, rating = _a.rating, onAddToCart = _a.onAddToCart;
+var OfferAtCart = function (props) {
+    var className = props.className, _a = props.title, titleContent = _a.content, bold = _a.bold, image = props.image, benefits = props.benefits, _b = props.ctaText, ctaText = _b === void 0 ? 'Yes, I want this offer' : _b, sizeOptions = props.sizeOptions, rating = props.rating, bottomCopy = props.bottomCopy;
     var theme = useTheme();
     var isMobile = useDeviceType() === 'mobile';
-    var _e = useState(), selectedSize = _e[0], setSelectedSize = _e[1];
-    var _f = useState(false), showErrorMessage = _f[0], setShowErrorMessage = _f[1];
-    var ActionsSection = (jsxs$1(Actions, { children: [jsx$1(SimpleDropdown, { placeHolder: "Size", options: sizeOptions, onChange: function (sizeOption) {
+    var _c = useState(), selectedSize = _c[0], setSelectedSize = _c[1];
+    var _d = useState(false), showErrorMessage = _d[0], setShowErrorMessage = _d[1];
+    var handleOnClick = function () {
+        if ('sizeOptions' in props && props.sizeOptions) {
+            if (selectedSize) {
+                setShowErrorMessage(false);
+                props.onAddToCart(selectedSize.key);
+            }
+            else {
+                setShowErrorMessage(true);
+            }
+        }
+        else {
+            props.onAddToCart();
+        }
+    };
+    var ActionsSection = (jsxs$1(Actions, { children: [sizeOptions && (jsx$1(SimpleDropdown, { placeHolder: "Size", options: sizeOptions, onChange: function (sizeOption) {
                     setShowErrorMessage(false);
                     setSelectedSize(sizeOption);
-                } }, void 0), jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
-                    if (selectedSize) {
-                        setShowErrorMessage(false);
-                        onAddToCart(selectedSize.key);
-                    }
-                    else {
-                        setShowErrorMessage(true);
-                    }
-                } }, void 0)] }, void 0));
-    var ErrorMessage = showErrorMessage ? (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0)) : null;
-    return (jsxs$1(Container$i, __assign$1({ className: className }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating }, void 0), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && ErrorMessage] }), void 0));
+                } }, void 0)), jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: handleOnClick }, void 0)] }, void 0));
+    var ErrorMessage = (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0));
+    return (jsxs$1(Container$i, __assign$1({ className: className }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [image && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ id: "benefits" }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && showErrorMessage && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && showErrorMessage && ErrorMessage, bottomCopy && jsx$1("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0));
+};
+
+var renderBottomCopy = function (text) {
+    if (typeof text === 'string') {
+        return jsx$1("span", { dangerouslySetInnerHTML: { __html: text } }, void 0);
+    }
+    return text;
 };
 
 var VariantType;
@@ -20560,15 +20581,33 @@ var VariantType;
     VariantType["V1"] = "v1";
     VariantType["V2"] = "v2";
 })(VariantType || (VariantType = {}));
-newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"])), function (_a) {
+var ContainerV2 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"])), function (_a) {
     var variant = _a.variant;
     return (variant === VariantType.V2 ? '#F7F7F7' : 'white');
 });
-newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"], ["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"])));
-newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"])));
-newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"], ["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"])));
+var ActionsV2 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"], ["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"])));
+var SizeCardItem = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"])));
+var SizeCardWrapper = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"], ["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"])));
 var templateObject_1$j, templateObject_2$d, templateObject_3$d, templateObject_4$a;
 
+var SizeOptions = function (_a) {
+    var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
+    return (jsx$1(SizeCardWrapper, __assign$1({ "data-testid": "sizeCardWrapper" }, { children: sizeOptions.map(function (sizeOption) { return (jsx$1(SizeCardItem, __assign$1({ onClick: function () {
+                onAddToCart(sizeOption.key);
+            } }, { children: sizeOption.label }), sizeOption.key)); }) }), void 0));
+};
+
+var OfferAtCartV2 = function (_a) {
+    var className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, image = _a.image, benefits = _a.benefits, _c = _a.ctaText, ctaText = _c === void 0 ? 'Yes, I want this offer' : _c, sizeOptions = _a.sizeOptions, rating = _a.rating, onAddToCart = _a.onAddToCart, bottomCopy = _a.bottomCopy;
+    var isMobile = useDeviceType() === 'mobile';
+    var _d = useState(true), showButton = _d[0], setShowButton = _d[1];
+    var _e = image !== null && image !== void 0 ? image : {}, src = _e.src, alt = _e.alt;
+    var ActionsSection = (jsx$1(ActionsV2, { children: showButton ? (jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: function () {
+                setShowButton(false);
+            } }, void 0)) : (sizeOptions && jsx$1(SizeOptions, { sizeOptions: sizeOptions, onAddToCart: onAddToCart }, void 0)) }, void 0));
+    return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType.V2 : VariantType.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [src && alt && jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating }, void 0), jsx$1(RightContent, { children: jsx$1(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0) }, void 0)] }), void 0), jsx$1("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && renderBottomCopy(bottomCopy)] }), void 0));
+};
+
 var ImageContainer$1 = newStyled.div(function (_a) {
     var width = _a.width, height = _a.height;
     return ({
@@ -22160,5 +22199,5 @@ var SubscriptionPlanSelector = function (_a) {
                         }, useV2Style: true, checked: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), disabled: radiosStatuses.oneTime.disabled, highlighted: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
 };
 
-export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, benefits, benefitsRawHtml, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map