@trafilea/afrodita-components 6.33.0 → 6.33.2

package/build/index.js

@@ -6766,7 +6766,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) {
@@ -6781,7 +6781,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;
@@ -21214,10 +21217,10 @@ var FlexContainer = newStyled.div(templateObject_1 || (templateObject_1 = __make
         "\n    [data-testid='subscription-frequency'] {\n      border: 0;\n      padding-left: 0 !important;\n      padding-right: 32px !important;\n    }\n\n    [role='listbox']{\n      margin-left: -20px;\n    }\n  ";
 });
 var DiscountTag = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: -24px;\n  right: 18px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  font-weight: bold;\n  line-height: 14px;\n  border-radius: ", ";\n"], ["\n  position: absolute;\n  top: -24px;\n  right: 18px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  font-weight: bold;\n  line-height: 14px;\n  border-radius: ", ";\n"])), function (_a) {
-    var theme = _a.theme, isSelected = _a.isSelected;
-    return isSelected
-        ? theme.component.autoship.discountTag.backgroundColor
-        : theme.colors.shades[350].color;
+    var theme = _a.theme, disabled = _a.disabled;
+    return disabled
+        ? theme.colors.shades[350].color
+        : theme.component.autoship.discountTag.backgroundColor;
 }, function (_a) {
     var theme = _a.theme;
     return "".concat(theme.component.autoship.discountTag.borderRadius, " \n      ").concat(theme.component.autoship.discountTag.borderRadius, " 0 0");
@@ -21230,13 +21233,13 @@ var getSelectedBorder = function (_a) {
     return "1.5px solid ".concat(colors.shades['700'].color);
 };
 var ContainerBase = newStyled.div(templateObject_3 || (templateObject_3 = __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 selected = _a.selected, theme = _a.theme;
-    return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
+    var disabled = _a.disabled, theme = _a.theme;
+    return disabled ? "1px solid ".concat(theme.colors.shades[200].color) : getSelectedBorder(theme);
 }, function (_a) {
-    var selected = _a.selected;
-    return selected
-        ? "& label {\n        font-weight: 700;\n      }"
-        : '';
+    var disabled = _a.disabled;
+    return disabled
+        ? ''
+        : "& label {\n        font-weight: 700;\n      }";
 }, function (_a) {
     var theme = _a.theme;
     return theme.colors.pallete.primary.color;
@@ -21258,8 +21261,8 @@ 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 selected = _a.selected, theme = _a.theme;
-    return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
+    var disabled = _a.disabled, theme = _a.theme;
+    return disabled ? theme.colors.shades[200].color : theme.colors.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) {
@@ -21323,7 +21326,7 @@ var SubscriptionPlanSelector = function (_a) {
     };
     var benefitsColor = benefitsColorMapper(theme);
     var renderBenefitsOrChildren = function () {
-        var isDisabled = radiosStatuses.subscription.disabled || !radiosStatuses.subscription.checked;
+        var isDisabled = radiosStatuses.subscription.disabled;
         if (children) {
             var disabledStyle_1 = isDisabled ? { opacity: 0.5, pointerEvents: 'none' } : {};
             return React$2.Children.map(children, function (child) {
@@ -21338,17 +21341,17 @@ var SubscriptionPlanSelector = function (_a) {
         }
         return null;
     };
-    return (jsxRuntime.jsxs(Container, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", selected: radiosStatuses.subscription.checked }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ className: discountTagClassName, isSelected: radiosStatuses.subscription.checked }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader, { children: [jsxRuntime.jsxs(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
+    return (jsxRuntime.jsxs(Container, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(SubscriptionHeader, { children: [jsxRuntime.jsxs(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: exports.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.checked }, void 0), jsxRuntime.jsx(TooltipWrapper, { children: jsxRuntime.jsx(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: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }), void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(subscriptionFinalPrice))), selected: radiosStatuses.subscription.checked, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer, __assign$1({ disabled: !radiosStatuses.subscription.checked }, { children: renderBenefitsOrChildren() }), void 0), radiosStatuses.subscription.checked && frequency && (jsxRuntime.jsx(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radiosStatuses.oneTime.checked, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: exports.ComponentSize.Medium, onChange: function () {
+                                        }, checked: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.checked, disabled: radiosStatuses.subscription.disabled }, void 0), jsxRuntime.jsx(TooltipWrapper, { children: jsxRuntime.jsx(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: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }), void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(subscriptionFinalPrice))), disabled: radiosStatuses.subscription.disabled, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer, __assign$1({ disabled: radiosStatuses.subscription.disabled }, { children: renderBenefitsOrChildren() }), void 0), radiosStatuses.subscription.checked && frequency && (jsxRuntime.jsx(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", disabled: radiosStatuses.oneTime.disabled, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: exports.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), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radiosStatuses.oneTime.checked, size: exports.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), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), disabled: radiosStatuses.oneTime.disabled, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
 };
 
 exports.AbsorbencyLevel = AbsorbencyLevel;