@trafilea/afrodita-components 6.33.1 → 6.33.3

package/build/index.d.ts

@@ -3959,6 +3959,27 @@ interface TableProps {
 
 declare const SizeChartTableV2: ({ headers, data: tableContent, newSizeTableCss }: TableProps) => JSX.Element;
 
+declare type WithBenefits = {
+    benefits: string[];
+    children?: never;
+};
+declare type WithChildren = {
+    benefits?: never;
+    children: ReactNode;
+};
+declare type CommonProps = {
+    pricing: PriceType;
+    currencySymbol: string;
+    radios: RadiosConfig;
+    onChange: (values: SelectorOnChangeProps) => void;
+    tooltip?: TooltipType;
+    frequency?: AutoshipFrequency;
+    className?: string;
+    discountTagClassName?: string;
+    closeIcon?: boolean;
+    discountLabel?: string;
+};
+declare type SubscriptionPlanSelectorProps = (WithBenefits | WithChildren) & CommonProps;
 declare type SubscriptionPlanSelectorRadios = 'oneTime' | 'subscription';
 declare type SelectorOnChangeProps = {
     subscriptionPeriod?: number;
@@ -3968,9 +3989,10 @@ declare type SelectorOnChangeProps = {
 };
 declare type RadioConfig = {
     label: string;
-    icon?: ReactNode;
     disabled: boolean;
     checked: boolean;
+    icon?: ReactNode;
+    highlighted?: boolean;
 };
 declare type RadiosConfig = {
     oneTime: RadioConfig;
@@ -3995,27 +4017,6 @@ declare type PriceType = {
     subscriptionDiscountPercentage: number;
 };
 
-declare type WithBenefits = {
-    benefits: string[];
-    children?: never;
-};
-declare type WithChildren = {
-    benefits?: never;
-    children: ReactNode;
-};
-declare type CommonProps = {
-    pricing: PriceType;
-    currencySymbol: string;
-    radios: RadiosConfig;
-    onChange: (values: SelectorOnChangeProps) => void;
-    tooltip?: TooltipType;
-    frequency?: AutoshipFrequency;
-    className?: string;
-    discountTagClassName?: string;
-    closeIcon?: boolean;
-    discountLabel?: string;
-};
-declare type SubscriptionPlanSelectorProps = (WithBenefits | WithChildren) & CommonProps;
 declare const SubscriptionPlanSelector: FC<SubscriptionPlanSelectorProps>;
 
 declare module '@emotion/react' {
@@ -4088,4 +4089,4 @@ declare type Partner = 'RevelBeauty' | 'TheSpaDr' | 'TheBodCon';
 declare type PartnerContent = 'RevelBeauty-1' | 'RevelBeauty-2' | 'TheSpaDr-1' | 'TheSpaDr-2' | 'TheBodCon';
 declare const CancellationFlowAccordionContentPerPartner: Record<Partner, JSX.Element[]>;
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequency, AutoshipFrequencyDropdown, 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, 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, HurryUp, HurryUpProps, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, JoinClubCard, 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, PriceType, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, 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, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, SubscriptionPlanSelector, 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, 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, AutoshipFrequency, AutoshipFrequencyDropdown, 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, 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, HurryUp, HurryUpProps, ISubscriptionFrequencyDropdown, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, JoinClubCard, 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, PriceType, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, 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, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, SubscriptionPlanSelector, 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, 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

@@ -6740,7 +6740,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
 var ImageHoverContainer$3 = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"], ["\n  opacity: 0;\n  position: absolute;\n  transition: all 0.4s ease-in-out;\n"])));
 var Container$_ = newStyled.a(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  text-decoration: none;\n\n  &:hover .hover__image {\n    opacity: 1;\n  }\n"])));
 var ProdCardContainer$4 = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"])));
-var Title$7 = newStyled.p(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"])), function (_a) {
+var Title$7 = newStyled.p(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n\n  ", "\n\n  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return STYLES_BY_THEME[theme.name].title.fontSize;
 }, function (_a) {
@@ -6755,7 +6755,10 @@ var Title$7 = newStyled.p(templateObject_4$J || (templateObject_4$J = __makeTemp
 }, function (_a) {
     var theme = _a.theme;
     return ['Revel', 'TheSpaDr'].includes(theme.name) &&
-        "\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    max-width: 150px;\n    ";
+        "\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;    \n    ";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.name === 'Revel' && "max-width: 150px;";
 }, function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.mobile;
@@ -21232,8 +21235,15 @@ var BenefitsContainer = newStyled.div(templateObject_7 || (templateObject_7 = __
     return (disabled ? 'var(--colors-shades-250-color)' : 'inherit');
 });
 var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  div p {\n    color: ", ";\n  }\n"], ["\n  div p {\n    color: ", ";\n  }\n"])), function (_a) {
-    var disabled = _a.disabled, theme = _a.theme;
-    return disabled ? theme.colors.shades[200].color : theme.colors.shades[700].color;
+    var disabled = _a.disabled, highlighted = _a.highlighted, theme = _a.theme;
+    var _b = theme.colors, shades = _b.shades, semantic = _b.semantic;
+    if (disabled) {
+        return shades[250].color;
+    }
+    if (highlighted) {
+        return semantic.urgent.color;
+    }
+    return shades[700].color;
 });
 var Container = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-top: 20px;\n"], ["\n  margin-top: 20px;\n"])));
 var TooltipWrapper = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: ", ";\n"], ["\n  margin: ", ";\n"])), function (_a) {
@@ -21317,12 +21327,12 @@ var SubscriptionPlanSelector = function (_a) {
                                                 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, 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), 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 () {
                             setRadiosStatuses(function (prev) { return ({
                                 subscription: __assign$1(__assign$1({}, prev.subscription), { checked: false }),
                                 oneTime: __assign$1(__assign$1({}, prev.oneTime), { checked: true }),
                             }); });
-                        }, 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, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
+                        }, 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, 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, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, 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, 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, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };