@trafilea/afrodita-components 6.43.4 → 6.43.7

package/build/index.d.ts

@@ -2595,12 +2595,16 @@ interface ISubscriptionFrequencyDropdown {
 }
 declare const AutoshipFrequencyDropdown: FC<ISubscriptionFrequencyDropdown>;
 
-declare type BenefitsListProps = {
-    benefits: string[];
-    isSelected: boolean;
-    selectedColor: string;
-    baseColor: string;
+declare type Benefit = {
+    iconName: IconName;
+    htmlText: string;
+    fill?: string;
 };
+declare type BenefitsListProps = {
+    benefits: Benefit[];
+    disabled?: boolean;
+};
+
 declare const BenefitsList: FC<BenefitsListProps>;
 
 declare type TimeProps = {
@@ -3698,13 +3702,14 @@ declare type TextPricingProps = {
 declare type TextLinkProps = {
     variant: 'link';
     weight?: 'demi' | 'regular';
-    size?: 'regular' | 'small';
+    size?: 'regular' | 'small' | 'xsmall';
     underline?: boolean;
     disabled?: boolean;
     wide?: never;
     original?: never;
     allCaps?: never;
     href?: string;
+    target?: string;
 };
 declare type TextLabelProps = {
     variant: 'label';
@@ -3958,8 +3963,9 @@ declare type JoinClubProps = {
     titleCopy: string | JSX.Element;
     style?: React.CSSProperties;
     showButton?: boolean;
-    buttonText?: string;
+    buttonText?: string | JSX.Element;
     buttonStyle?: React.CSSProperties;
+    termsText?: string | JSX.Element;
 };
 
 declare const JoinClubCard: React.FC<JoinClubProps>;
@@ -4126,24 +4132,31 @@ interface TableProps {
 declare const SizeChartTableV3: React.FC<TableProps>;
 
 declare type WithBenefits = {
-    benefits: string[];
+    benefits: Benefit[];
     children?: never;
 };
 declare type WithChildren = {
     benefits?: never;
     children: ReactNode;
 };
+declare type TermsLink = {
+    text: string;
+    url: string;
+};
 declare type CommonProps = {
     pricing: PriceType;
     currencySymbol: string;
     radios: RadiosConfig;
     onChange: (values: SelectorOnChangeProps) => void;
     tooltip?: TooltipType;
-    frequency?: AutoshipFrequency;
+    frequency?: AutoshipFrequency & {
+        showFrequencyText?: boolean;
+    };
     className?: string;
     discountTagClassName?: string;
     closeIcon?: boolean;
     discountLabel?: string;
+    termsAndConditions?: TermsLink;
 };
 declare type SubscriptionPlanSelectorProps = (WithBenefits | WithChildren) & CommonProps;
 declare type SubscriptionPlanSelectorRadios = 'oneTime' | 'subscription';
@@ -4292,4 +4305,4 @@ declare const benefits: (size: 'xsmall' | 'small' | 'regular') => BenefitProps[]
 declare const benefitsRawHtml: BenefitProps[];
 declare const sizeOptions: SizeOptionProps[];
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequency, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitProps, 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, 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, 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, BenefitProps, 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, 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 };

package/build/index.esm.js

@@ -4883,7 +4883,7 @@ var Text$7 = function (_a) {
         }
         return propsHref;
     }, [props.disabled, propsHref]);
-    return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, "data-testid": testId }, { children: children }), void 0));
+    return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, target: variant === 'link' ? props.target : undefined, "data-testid": testId }, { children: children }), void 0));
 };
 var DEFAULTS = {
     heading1: {
@@ -6676,8 +6676,12 @@ var BenefitText$1 = newStyled(Text$7)(templateObject_2$1g || (templateObject_2$1
 var templateObject_1$1G, templateObject_2$1g;
 
 var BenefitsList = function (_a) {
-    var benefits = _a.benefits, isSelected = _a.isSelected, selectedColor = _a.selectedColor, baseColor = _a.baseColor;
-    return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) { return (jsxs$1(Benefit$2, { children: [jsx$1(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
+    var benefits = _a.benefits, disabled = _a.disabled;
+    var colors = useTheme().colors;
+    return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) {
+            var _a;
+            return (jsxs$1(Benefit$2, { children: [jsx$1(Icon$1, { name: benefit.iconName, fill: disabled ? colors.shades['250'].color : (_a = benefit.fill) !== null && _a !== void 0 ? _a : colors.shades['700'].color, width: "24px", height: "24px" }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit.htmlText } }, void 0)] }, benefit.iconName));
+        }) }, void 0));
 };
 
 var TimerContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
@@ -20431,8 +20435,8 @@ var ClubCopyTextWrapper = newStyled.div(templateObject_5$a || (templateObject_5$
 var templateObject_1$l, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$a;
 
 function Card(_a) {
-    var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
-    return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxs$1(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }), void 0))] }), void 0));
+    var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
+    return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxs$1(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
 }
 
 var StyledButton = newStyled.button(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  padding: 10px 20px;\n  border-radius: 8px;\n  background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n  color: var(--neutrals-white-ffffff, #fff);\n  text-align: center;\n  font-family: 'Avenir Next';\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 18px;\n  text-transform: uppercase;\n  border: none;\n  cursor: pointer;\n  ", ";\n"], ["\n  padding: 10px 20px;\n  border-radius: 8px;\n  background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n  color: var(--neutrals-white-ffffff, #fff);\n  text-align: center;\n  font-family: 'Avenir Next';\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 18px;\n  text-transform: uppercase;\n  border: none;\n  cursor: pointer;\n  ", ";\n"])), function (_a) {
@@ -20440,13 +20444,13 @@ var StyledButton = newStyled.button(templateObject_1$k || (templateObject_1$k =
     return customStyle && __assign$1({}, customStyle);
 });
 var JoinClubCard = function (_a) {
-    var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _b = _a.showButton, showButton = _b === void 0 ? false : _b, _c = _a.buttonText, buttonText = _c === void 0 ? 'ADD' : _c, _d = _a.buttonStyle, buttonStyle = _d === void 0 ? {} : _d;
+    var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _b = _a.showButton, showButton = _b === void 0 ? false : _b, _c = _a.buttonText, buttonText = _c === void 0 ? 'ADD' : _c, _d = _a.buttonStyle, buttonStyle = _d === void 0 ? {} : _d, termsText = _a.termsText;
     var _e = useState(isChecked), checked = _e[0], setChecked = _e[1];
     var handleToggleValue = function (value) {
         setChecked(value);
         onCheckToggle(value);
     };
-    return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style }, { children: showButton ? (jsx$1(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
+    return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsx$1(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
 };
 var templateObject_1$k;
 
@@ -21900,8 +21904,12 @@ var getSelectedBorder = function (_a) {
     return "1.5px solid ".concat(colors.shades['700'].color);
 };
 var ContainerBase = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  border-radius: 8px;\n\n  border: ", ";\n\n  ", "\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n\n  & label {\n    cursor: pointer;\n  }\n"], ["\n  border-radius: 8px;\n\n  border: ", ";\n\n  ", "\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n\n  & label {\n    cursor: pointer;\n  }\n"])), function (_a) {
-    var disabled = _a.disabled, theme = _a.theme;
-    return disabled ? "1px solid ".concat(theme.colors.shades[200].color) : getSelectedBorder(theme);
+    var disabled = _a.disabled, highlighted = _a.highlighted, theme = _a.theme;
+    return disabled
+        ? "1px solid ".concat(theme.colors.shades[200].color)
+        : highlighted
+            ? getSelectedBorder(theme)
+            : "1.5px solid ".concat(theme.colors.shades[150].color);
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled
@@ -21916,9 +21924,15 @@ var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$1 || (te
     return (onClick ? 'cursor: pointer;' : '');
 });
 var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  padding: 16px;\n  margin-bottom: 8px;\n  position: relative;\n"], ["\n  padding: 16px;\n  margin-bottom: 8px;\n  position: relative;\n"])));
-var SubscriptionHeader = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  margin-bottom: 8px;\n  cursor: pointer;\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px solid ", ";\n  padding-bottom: 10px;\n  margin-bottom: 8px;\n  cursor: pointer;\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.shades[200].color;
+var SubscriptionHeader = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n  cursor: pointer;\n  border-bottom: ", ";\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n  cursor: pointer;\n  border-bottom: ", ";\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"])), function (_a) {
+    var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b;
+    return (showBorder ? '10px' : '');
+}, function (_a) {
+    var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b;
+    return (showBorder ? '8px' : '0');
+}, function (_a) {
+    var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b, theme = _a.theme;
+    return showBorder ? "1px solid ".concat(theme.colors.shades[200].color) : 'none';
 }, function (_a) {
     var theme = _a.theme;
     return theme.colors.pallete.primary.color;
@@ -21946,8 +21960,7 @@ var TooltipWrapper = newStyled.div(templateObject_10 || (templateObject_10 = __m
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10;
 
 var SubscriptionPlanSelector = function (_a) {
-    var children = _a.children, benefits = _a.benefits, tooltip = _a.tooltip, pricing = _a.pricing, frequency = _a.frequency, onChange = _a.onChange, className = _a.className, discountTagClassName = _a.discountTagClassName, closeIcon = _a.closeIcon, currencySymbol = _a.currencySymbol, discountLabel = _a.discountLabel, radios = _a.radios;
-    var theme = useTheme();
+    var children = _a.children, benefits = _a.benefits, tooltip = _a.tooltip, pricing = _a.pricing, frequency = _a.frequency, onChange = _a.onChange, className = _a.className, discountTagClassName = _a.discountTagClassName, closeIcon = _a.closeIcon, currencySymbol = _a.currencySymbol, discountLabel = _a.discountLabel, radios = _a.radios, termsAndConditions = _a.termsAndConditions;
     var _b = useState({
         oneTime: radios.oneTime,
         subscription: radios.subscription,
@@ -21998,7 +22011,6 @@ var SubscriptionPlanSelector = function (_a) {
     var handleFrequencyChange = function (value) {
         setSubscriptionPeriod(radiosStatuses.subscription.checked ? value.value : undefined);
     };
-    var benefitsColor = benefitsColorMapper(theme);
     var renderBenefitsOrChildren = function () {
         var isDisabled = radiosStatuses.subscription.disabled;
         if (children) {
@@ -22010,17 +22022,16 @@ var SubscriptionPlanSelector = function (_a) {
             });
         }
         else if (benefits) {
-            var isSelected = radiosStatuses.subscription.checked;
-            return (jsx$1(BenefitsList, { benefits: benefits, isSelected: isSelected, selectedColor: benefitsColor.selected, baseColor: isDisabled ? 'var(--colors-shades-250-color)' : benefitsColor.base }, void 0));
+            return jsx$1(BenefitsList, { benefits: benefits, disabled: isDisabled }, void 0);
         }
         return null;
     };
-    return (jsxs$1(Container$1, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsx$1(DiscountTag, __assign$1({ className: discountTagClassName, disabled: radiosStatuses.subscription.disabled }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, { children: [jsxs$1(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsx$1(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
+    return (jsxs$1(Container$1, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ highlighted: radiosStatuses.subscription.checked, onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsx$1(DiscountTag, __assign$1({ className: discountTagClassName, disabled: radiosStatuses.subscription.disabled }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, __assign$1({ showBorder: radiosStatuses.subscription.checked }, { children: [jsxs$1(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsx$1(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
                                             setRadiosStatuses(function (prev) { return ({
                                                 subscription: __assign$1(__assign$1({}, prev.subscription), { checked: true }),
                                                 oneTime: __assign$1(__assign$1({}, prev.oneTime), { checked: false }),
                                             }); });
-                                        }, checked: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.checked, disabled: radiosStatuses.subscription.disabled }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltip === null || tooltip === void 0 ? void 0 : tooltip.content, header: tooltip === null || tooltip === void 0 ? void 0 : tooltip.header, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }), void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(subscriptionFinalPrice))), disabled: radiosStatuses.subscription.disabled, highlighted: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, __assign$1({ disabled: radiosStatuses.subscription.disabled }, { children: renderBenefitsOrChildren() }), void 0), radiosStatuses.subscription.checked && frequency && (jsx$1(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", disabled: radiosStatuses.oneTime.disabled, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsx$1(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: ComponentSize.Medium, onChange: function () {
+                                        }, checked: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.checked, disabled: radiosStatuses.subscription.disabled }, void 0), tooltip && (jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltip.content, header: tooltip.header, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0))] }), void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(subscriptionFinalPrice))), disabled: radiosStatuses.subscription.disabled, highlighted: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), radiosStatuses.subscription.checked && (jsxs$1(Fragment$2, { children: [jsx$1(BenefitsContainer, __assign$1({ disabled: radiosStatuses.subscription.disabled }, { children: renderBenefitsOrChildren() }), void 0), termsAndConditions && (jsx$1(Text$7, __assign$1({ variant: "link", underline: true, href: termsAndConditions.url, size: "regular", target: "_blank" }, { children: termsAndConditions.text }), void 0)), (frequency === null || frequency === void 0 ? void 0 : frequency.showFrequencyText) && (jsx$1(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", highlighted: radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsx$1(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: ComponentSize.Medium, onChange: function () {
                             setRadiosStatuses(function (prev) { return ({
                                 subscription: __assign$1(__assign$1({}, prev.subscription), { checked: false }),
                                 oneTime: __assign$1(__assign$1({}, prev.oneTime), { checked: true }),