@trafilea/afrodita-components 6.16.0 → 6.16.2

package/build/index.d.ts

@@ -54,7 +54,7 @@ declare type Download$1 = 'download/apple_store' | 'download/google_play';
 declare type Emoji$1 = 'emoji/blowing_kiss' | 'emoji/frowning' | 'emoji/grinning' | 'emoji/grinning_with_sweat' | 'emoji/relieved' | 'emoji/smiling_v2' | 'emoji/smiling_v3' | 'emoji/thinking';
 declare type Messaging$1 = 'messaging/ada_chat' | 'messaging/comment' | 'messaging/comment_dots' | 'messaging/comment_light' | 'messaging/comment_money' | 'messaging/community' | 'messaging/light' | 'messaging/light_bulb' | 'messaging/light_bulb_solid' | 'messaging/mail' | 'messaging/messenger' | 'messaging/question_circle' | 'messaging/quote_left' | 'messaging/quote_right' | 'messaging/quote_solid_left' | 'messaging/quote_solid_right' | 'messaging/question_circle_light';
 declare type MyAccount$1 = 'myaccount/birthday_gifts' | 'myaccount/community' | 'myaccount/deals_offers' | 'myaccount/free_returns' | 'myaccount/free_shipping' | 'myaccount/guard' | 'myaccount/members_only_discount' | 'myaccount/members_only_discount_opposite' | 'myaccount/personal_stylist' | 'myaccount/priority_shipping' | 'myaccount/profile' | 'myaccount/place_image' | 'myaccount/sale_tag' | 'myaccount/style_fashion_content' | 'myaccount/cart' | 'myaccount/vip';
-declare type Navigation$1 = 'navigation/address_information' | 'navigation/benefits' | 'navigation/club_membership' | 'navigation/ellipsis' | 'navigation/ellipsis_horizontal' | 'navigation/filters' | 'navigation/hamburger' | 'navigation/home' | 'navigation/home_solid' | 'navigation/loading' | 'navigation/lock' | 'navigation/lock_solid' | 'navigation/map_marker' | 'navigation/map_marker_light' | 'navigation/map_solid' | 'navigation/menu_lines' | 'navigation/search' | 'navigation/shaperbox' | 'navigation/shopping_bag' | 'navigation/shopping_bag_v2' | 'navigation/shopping_bag_v3' | 'navigation/shopping_cart' | 'navigation/shopping_cart_v2' | 'navigation/slide_dot' | 'navigation/slide_dot_solid' | 'navigation/user' | 'navigation/address_information_light' | 'navigation/user_solid' | 'navigation/user_v2';
+declare type Navigation$1 = 'navigation/address_information' | 'navigation/benefits' | 'navigation/club_membership' | 'navigation/ellipsis' | 'navigation/ellipsis_horizontal' | 'navigation/filters' | 'navigation/hamburger' | 'navigation/home' | 'navigation/home_solid' | 'navigation/loading' | 'navigation/lock' | 'navigation/lock_solid' | 'navigation/map_marker' | 'navigation/map_marker_light' | 'navigation/map_solid' | 'navigation/menu_lines' | 'navigation/search' | 'navigation/shaperbox' | 'navigation/shopping_bag' | 'navigation/shopping_bag_v2' | 'navigation/shopping_bag_v3' | 'navigation/shopping_cart' | 'navigation/shopping_cart_v2' | 'navigation/slide_dot' | 'navigation/slide_dot_solid' | 'navigation/user' | 'navigation/address_information_light' | 'navigation/user_solid' | 'navigation/user_v2' | 'navigation/filters_v2';
 declare type Other$1 = 'other/bod_con_label' | 'other/bod_con_mobile_label' | 'other/call_us' | 'other/chat' | 'other/email' | 'other/express_shipping' | 'other/fit_guarantee' | 'other/fit_predictor' | 'other/free_exchange' | 'other/get_discount' | 'other/hassel_free_returns' | 'other/loading' | 'other/mc_afee' | 'other/play' | 'other/qr_code' | 'other/question_with_circle' | 'other/revel_beauty' | 'other/shapermint' | 'other/shapermint_club_icon' | 'other/shapermint_club_icon2' | 'other/shapermint_club_label' | 'other/shapermint_club_mobile_label' | 'other/shapermint_logo' | 'other/shm_club' | 'other/shop_now' | 'other/sign_form' | 'other/sixty_days_tsd' | 'other/the_bod_con' | 'other/the_spa_dr' | 'other/lock';
 declare type Payment$1 = 'payment/amazon' | 'payment/amex' | 'payment/jcb' | 'payment/klarna' | 'payment/master_card' | 'payment/paypal' | 'payment/visa';
 declare type PDP$1 = 'pdp/circle_number' | 'pdp/clock' | 'pdp/drop' | 'pdp/drop_empty' | 'pdp/error_cross' | 'pdp/flag_usa' | 'pdp/hours' | 'pdp/klarna_logo' | 'pdp/light_bulb' | 'pdp/free_returns_v2' | 'pdp/free_shipping_v2' | 'pdp/minus' | 'pdp/moon' | 'pdp/new_clock' | 'pdp/play_mini' | 'pdp/play_video' | 'pdp/plus' | 'pdp/rule' | 'pdp/shipping' | 'pdp/shipping_empty' | 'pdp/size_empty' | 'pdp/size_empty_v2' | 'pdp/star' | 'pdp/stars' | 'pdp/star_empty' | 'pdp/star_half' | 'pdp/stopwatch' | 'pdp/trust_badge';
@@ -667,6 +667,8 @@ declare const EllipsisHorizontal: IconComponent;
 
 declare const Filters$1: IconComponent;
 
+declare const FiltersV2: IconComponent;
+
 declare const Hamburger: IconComponent;
 
 declare const Home: IconComponent;
@@ -714,6 +716,7 @@ declare const Navigation_Benefits: typeof Benefits;
 declare const Navigation_ClubMembership: typeof ClubMembership;
 declare const Navigation_Ellipsis: typeof Ellipsis;
 declare const Navigation_EllipsisHorizontal: typeof EllipsisHorizontal;
+declare const Navigation_FiltersV2: typeof FiltersV2;
 declare const Navigation_Hamburger: typeof Hamburger;
 declare const Navigation_Home: typeof Home;
 declare const Navigation_HomeSolid: typeof HomeSolid;
@@ -741,6 +744,7 @@ declare namespace Navigation {
     Navigation_Ellipsis as Ellipsis,
     Navigation_EllipsisHorizontal as EllipsisHorizontal,
     Filters$1 as Filters,
+    Navigation_FiltersV2 as FiltersV2,
     Navigation_Hamburger as Hamburger,
     Navigation_Home as Home,
     Navigation_HomeSolid as HomeSolid,
@@ -1314,6 +1318,7 @@ declare type Theme = {
     config?: {
         cdn: string;
         useTrafileaImages?: boolean;
+        useTrafileaAssets?: boolean;
     };
     fontSizes: number[];
     fontWeights: number[];
@@ -3510,6 +3515,7 @@ interface CouponProps {
     title: string;
     content: ReactNode;
     width?: string;
+    height?: string;
     btnText?: string;
     couponCode?: string;
     offerLink?: string;
@@ -3527,7 +3533,7 @@ declare type BasicAccordionProps = {
     openIcon: IconType;
     closeIcon: IconType;
     fillControlsCollor: string;
-    contentWidth?: string;
+    width?: string;
     onClick?: (index: number) => void;
 };
 declare const BasicAccordion: FC<BasicAccordionProps>;
@@ -3630,7 +3636,8 @@ declare const isNumber: (value: string) => boolean;
 declare const isPhoneNumber: (value: string) => boolean;
 declare const isValidDate: (value: string) => boolean;
 
+declare type Partner = 'RevelBeauty' | 'TheSpaDr' | 'TheBodCon';
 declare type PartnerContent = 'RevelBeauty-1' | 'RevelBeauty-2' | 'TheSpaDr-1' | 'TheSpaDr-2' | 'TheBodCon';
-declare const CancellationFlowAccordionContentPerPartner: Record<string, JSX.Element[]>;
+declare const CancellationFlowAccordionContentPerPartner: Record<Partner, JSX.Element[]>;
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, ContentType, Coupon, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, HurryUpProps, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, Icon$1 as LibIcon, IconProps$1 as LibIconProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithTestId, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, ContentType, Coupon, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, HurryUpProps, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, Icon$1 as LibIcon, IconProps$1 as LibIconProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Partner, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithTestId, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -3070,9 +3070,9 @@ var ThemeProvider = function (_a) {
     var _b;
     var unparsedTheme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children, config = _a.config;
     //TODO Analyze why we are doing this and remove
-    var theme = useMemo(function () { return (__assign$1(__assign$1({}, applyVariablesIntoTheme(__assign$1({}, unparsedTheme))), { config: config })); }, [unparsedTheme]);
-    var assets = __assign$1(__assign$1({}, theme.assets), { isSameOriginIcons: isSameOriginIcons, cdn: theme.config ? "".concat(theme.config.cdn, "/assets/common") : (_b = theme.assets) === null || _b === void 0 ? void 0 : _b.cdn });
-    var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets });
+    var theme = useMemo(function () { return applyVariablesIntoTheme(__assign$1({}, unparsedTheme)); }, [unparsedTheme]);
+    var assets = __assign$1(__assign$1({}, theme.assets), { isSameOriginIcons: isSameOriginIcons, cdn: config && config.useTrafileaAssets ? "".concat(config.cdn, "/assets/common") : (_b = theme.assets) === null || _b === void 0 ? void 0 : _b.cdn });
+    var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets, config: config });
     return (jsx$1(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsx$1(AssetsProvider, __assign$1({ assets: assets }, { children: children }), void 0) }), void 0));
 };
 var useTheme = function () { return useTheme$1(); };
@@ -3808,6 +3808,8 @@ var EllipsisHorizontal = function (props) { return (jsx$1(Icon$1, __assign$1({},
 
 var Filters$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/filters" }), void 0); };
 
+var FiltersV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/filters_v2" }), void 0); };
+
 var Hamburger = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/hamburger" }), void 0); };
 
 var Home = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/home" }), void 0); };
@@ -3858,6 +3860,7 @@ var Navigation = /*#__PURE__*/Object.freeze({
     Ellipsis: Ellipsis,
     EllipsisHorizontal: EllipsisHorizontal,
     Filters: Filters$1,
+    FiltersV2: FiltersV2,
     Hamburger: Hamburger,
     Home: Home,
     HomeSolid: HomeSolid,
@@ -4642,22 +4645,18 @@ var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = _
     var _b = _a.height, height = _b === void 0 ? '100%' : _b;
     return height;
 });
-var FlexCentered = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  margin-bottom: 3px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  margin-bottom: 3px;\n"])));
-var LeftSide = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n  width: 40%;\n  height: 100%;\n  resize: vertical;\n"], ["\n  width: 40%;\n  height: 100%;\n  resize: vertical;\n"])));
-var RightSide = newStyled.div(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 60%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 60%;\n  height: 100%;\n"])));
+var FlexCentered = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 90%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 90%;\n  height: 100%;\n"])));
+var LeftSide = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n  width: 110px;\n  height: 100%;\n  flex-shrink: 0;\n  resize: vertical;\n"], ["\n  width: 110px;\n  height: 100%;\n  flex-shrink: 0;\n  resize: vertical;\n"])));
+var RightSide = newStyled.div(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n"])));
 var FlexStart = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: 5px;\n  width: 100%;\n  padding: 12px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: 5px;\n  width: 100%;\n  padding: 12px;\n"])));
 var templateObject_1$1R, templateObject_2$1f, templateObject_3$Z, templateObject_4$K, templateObject_5$w;
 
 var _this$1 = undefined;
 var Coupon = function (_a) {
-    var imgSrc = _a.imgSrc, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
+    var imgSrc = _a.imgSrc, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
     var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
-    var _d = useState('176px'), containerHeight = _d[0], setContainerHeight = _d[1];
     var handleCopy = useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
-    useEffect(function () {
-        setContainerHeight(function (prev) { return (showCoupon ? '220px' : prev); });
-    }, [showCoupon]);
-    return (jsxs$1(Container$19, __assign$1({ height: containerHeight, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
+    return (jsxs$1(Container$19, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
                                         name: 'actions/copy_outlined',
                                         position: 'right',
                                         margin: '10px',
@@ -4677,15 +4676,18 @@ var cancellationFlowContentPerKey = {
     'TheSpaDr-2': CouponDefaultBody('Nourish Antioxidant Serum', '$10 OFF'),
     TheBodCon: TheBodConContent(),
 };
-var couponWidth = '90%';
+var couponDimensions = {
+    width: '95%',
+    height: '215px',
+};
 var CancellationFlowAccordionContentPerPartner = {
     RevelBeauty: [
-        jsx$1(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Beauty_Lift_and_Tighten_Serum.png?v=1709316823', content: cancellationFlowContentPerKey['RevelBeauty-1'], couponCode: 'CLUBFRIENDS', offerLink: 'https://revelbeauty.com/products/lift-tighten-serum' }, "RevelBeauty-1"),
-        jsx$1(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/revel-beauty-orders-above-50.png?v=1709326588', content: cancellationFlowContentPerKey['RevelBeauty-2'], couponCode: 'SHIPPINGONUS', offerLink: 'https://revelbeauty.com/' }, "RevelBeauty-2"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Beauty_Lift_and_Tighten_Serum.png?v=1709316823', content: cancellationFlowContentPerKey['RevelBeauty-1'], couponCode: 'CLUBFRIENDS', offerLink: 'https://revelbeauty.com/products/lift-tighten-serum' }, "RevelBeauty-1"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/revel-beauty-orders-above-50.png?v=1709326588', content: cancellationFlowContentPerKey['RevelBeauty-2'], couponCode: 'SHIPPINGONUS', offerLink: 'https://revelbeauty.com/' }, "RevelBeauty-2"),
     ],
     TheSpaDr: [
-        jsx$1(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Daily_Essentials_4-Step_Skin_Care_System.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-1'], couponCode: 'SHMCLUBFRIENDS', offerLink: 'https://thespadr.com/products/4-step-age-defying-clean-skincare-system-3?variant=42658350727366' }, "TheSpaDr-1"),
-        jsx$1(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Nourish_Antioxidant_Serum.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-2'], couponCode: 'SHMCLUB10OFF', offerLink: 'https://thespadr.com/products/step-2-age-defying-lift-tight-serum?variant=15992476860510' }, "TheSpaDr-2"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Daily_Essentials_4-Step_Skin_Care_System.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-1'], couponCode: 'SHMCLUBFRIENDS', offerLink: 'https://thespadr.com/products/4-step-age-defying-clean-skincare-system-3?variant=42658350727366' }, "TheSpaDr-1"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Nourish_Antioxidant_Serum.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-2'], couponCode: 'SHMCLUB10OFF', offerLink: 'https://thespadr.com/products/step-2-age-defying-lift-tight-serum?variant=15992476860510' }, "TheSpaDr-2"),
     ],
     TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
 };
@@ -19862,6 +19864,7 @@ var templateObject_1$4, templateObject_2$3, templateObject_3$1, templateObject_4
 var StyledButton = newStyled(Ye.Button)(function (props) { return ({
     background: props.bgColor,
     height: '100%',
+    width: '100%',
     maxHeight: '48px',
     border: 'none',
     display: 'flex',
@@ -19891,14 +19894,14 @@ var StyledController = newStyled.div(templateObject_2$2 || (templateObject_2$2 =
 var templateObject_1$3, templateObject_2$2;
 
 var StyledDisclosure = newStyled(Ye)(function (_a) {
-    var background = _a.background;
+    var background = _a.background, width = _a.width;
     return ({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
         gap: '10px',
         background: background !== null && background !== void 0 ? background : '',
-        width: 'auto',
+        width: width !== null && width !== void 0 ? width : 'auto',
         borderRadius: '8px',
         border: '0.063rem solid',
         borderColor: '#e5e5e5',
@@ -19922,10 +19925,10 @@ var AccordionContent = function (_a) {
     return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsx$1(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxs$1(StyledController, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsx$1("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsx$1(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsx$1(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsx$1(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
 };
 var BasicAccordion = function (_a) {
-    var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.contentWidth, contentWidth = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
-    return (jsx$1(StyledDisclosure, __assign$1({ as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick }, { children: function (_a) {
+    var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
+    return (jsx$1(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
             var open = _a.open;
-            return (jsx$1(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon, contentWidth: contentWidth }, { children: children }), void 0));
+            return (jsx$1(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
         } }), void 0));
 };