@trafilea/afrodita-components 6.32.1 → 6.33.1

package/build/index.d.ts

@@ -147,7 +147,7 @@ declare type StyledIconProps = {
 };
 
 declare type Actions$1 = 'actions/add' | 'actions/check_box_empty' | 'actions/check_box_light' | 'actions/check_box_solid' | 'actions/check' | 'actions/circle_check' | 'actions/circle_clear' | 'actions/circle_info' | 'actions/circle_minus' | 'actions/circle_plus' | 'actions/circle_question' | 'actions/circle_solid_check' | 'actions/circle_solid_clear' | 'actions/circle_solid_info' | 'actions/circle_solid_minus' | 'actions/circle_solid_plus' | 'actions/circle_solid_question' | 'actions/circle_solid_styled_check' | 'actions/circle_solid_warning' | 'actions/circle_solid_reload' | 'actions/circle_warning' | 'actions/clear_light' | 'actions/close' | 'actions/copy_outlined' | 'actions/copy' | 'actions/edit' | 'actions/light_check' | 'actions/light_exclamation' | 'actions/like_solid' | 'actions/like' | 'actions/minus' | 'actions/not_allowed' | 'actions/question' | 'actions/radio_empty' | 'actions/radio_filled' | 'actions/settings_solid' | 'actions/settings' | 'actions/share' | 'actions/signout' | 'actions/signout_light' | 'actions/trash' | 'actions/warning' | 'actions/navigate' | 'actions/camera';
-declare type Arrows$1 = 'arrows/chevron_down' | 'arrows/chevron_down_variant' | 'arrows/chevron_left' | 'arrows/chevron_left_lite' | 'arrows/chevron_left_variant' | 'arrows/chevron_right' | 'arrows/chevron_right_lite' | 'arrows/chevron_right_variant' | 'arrows/chevron_up' | 'arrows/chevron_up_solid' | 'arrows/chevron_up_variant' | 'arrows/circle_chevron_down' | 'arrows/circle_chevron_left' | 'arrows/circle_chevron_right' | 'arrows/circle_chevron_up' | 'arrows/circle_line_down' | 'arrows/circle_line_left' | 'arrows/circle_line_right' | 'arrows/circle_line_up' | 'arrows/circle_up' | 'arrows/double_arrow_up' | 'arrows/chevron_right_grey';
+declare type Arrows$1 = 'arrows/chevron_down' | 'arrows/chevron_down_variant' | 'arrows/chevron_left' | 'arrows/chevron_left_lite' | 'arrows/chevron_left_variant' | 'arrows/chevron_right' | 'arrows/chevron_right_lite' | 'arrows/chevron_right_variant' | 'arrows/chevron_up' | 'arrows/chevron_up_solid' | 'arrows/chevron_up_variant' | 'arrows/circle_chevron_down' | 'arrows/circle_chevron_left' | 'arrows/circle_chevron_right' | 'arrows/circle_chevron_up' | 'arrows/circle_line_down' | 'arrows/circle_line_left' | 'arrows/circle_line_right' | 'arrows/circle_line_up' | 'arrows/circle_up' | 'arrows/double_arrow_up' | 'arrows/chevron_right_grey' | 'arrows/circle_round';
 declare type Custom$1 = 'custom/atom' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort' | 'custom/wire_free_comfort_bold' | 'custom/tk_sixty_days_bold' | 'custom/free_shipping_truck' | 'custom/higher_discounts' | 'custom/zoom' | 'custom/focus' | 'custom/beauty_face' | 'custom/bar' | 'custom/ears' | 'custom/pain' | 'custom/rociar' | 'custom/star' | 'custom/time' | 'custom/winter_light' | 'custom/priority_support' | 'custom/sound_on' | 'custom/sound_off';
 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';
@@ -2483,6 +2483,7 @@ declare type CTAProps = {
 declare type DropdownOption<T> = {
     key: string;
     label: string;
+    selectedLabel?: string;
     value: T;
     disabled: boolean;
     imageURL?: string;
@@ -3189,11 +3190,12 @@ interface RadioProps {
     checked?: boolean;
     disabled?: boolean;
     onChange: (option: RadioGroupOption$1) => void;
-    style?: react__default.CSSProperties;
-    labelStyle?: react__default.CSSProperties;
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
     useV2Style?: boolean;
+    icon?: ReactNode;
 }
-declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, useV2Style, labelStyle, }: RadioProps) => JSX.Element;
+declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, useV2Style, labelStyle, icon, }: RadioProps) => JSX.Element;
 
 interface StarListProps {
     rating: number;
@@ -3786,12 +3788,13 @@ declare type VideoProps = {
 } & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
 declare const Video: React.FC<VideoProps>;
 
-declare type AutoshipFrequency$1 = {
+declare type AutoshipFrequency = {
     values: number[];
     unit: string;
+    labels?: string[];
 };
 interface ISubscriptionFrequencyDropdown {
-    frequency: AutoshipFrequency$1;
+    frequency: AutoshipFrequency;
     onChange?: (value: DropdownOption<number>) => void;
 }
 declare const AutoshipFrequencyDropdown: FC<ISubscriptionFrequencyDropdown>;
@@ -3965,6 +3968,7 @@ declare type SelectorOnChangeProps = {
 };
 declare type RadioConfig = {
     label: string;
+    icon?: ReactNode;
     disabled: boolean;
     checked: boolean;
 };
@@ -3972,10 +3976,6 @@ declare type RadiosConfig = {
     oneTime: RadioConfig;
     subscription: RadioConfig;
 };
-declare type AutoshipFrequency = {
-    values: number[];
-    unit: string;
-};
 declare type TooltipContent = {
     text: string;
     color?: string;

package/build/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx as jsx$1, jsxs as jsxs$1, Fragment as Fragment$2 } from 'react/jsx-runtime';
 import * as React$2 from 'react';
-import React__default, { useContext, createContext, forwardRef, createElement, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement, memo, useImperativeHandle } from 'react';
+import React__default, { useContext, createContext, forwardRef, createElement, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement, memo, useImperativeHandle, Children } from 'react';
 import { createPortal } from 'react-dom';
 
 /*! *****************************************************************************
@@ -5639,8 +5639,9 @@ function SimpleDropdown(_a) {
     var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder, selectedOptionWeight = _a.selectedOptionWeight;
     var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
     var selectedOptionLabel = useMemo(function () {
+        var _a;
         if (selectedValue) {
-            return selectedValue.label;
+            return (_a = selectedValue.selectedLabel) !== null && _a !== void 0 ? _a : selectedValue.label;
         }
         return showRequiredPlaceholder ? (jsx$1(RequiredPlaceholder, { children: placeHolder }, void 0)) : (placeHolder);
     }, [selectedValue, showRequiredPlaceholder, placeHolder]);
@@ -5748,21 +5749,24 @@ var StyledLabel$3 = newStyled(Label$6)(templateObject_3$14 || (templateObject_3$
     var theme = _a.theme;
     return theme.component.radio.lineHeight;
 });
-var StyledLabelV2 = newStyled(Label$6)(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 600 !important;\n  line-height: ", " !important;\n"], ["\n  font-size: ", ";\n  font-weight: 600 !important;\n  line-height: ", " !important;\n"])), function (_a) {
+var StyledLabelV2 = newStyled(Label$6)(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 600 !important;\n  line-height: ", " !important;\n\n  color: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: 600 !important;\n  line-height: ", " !important;\n\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.radio.textSize;
 }, function (_a) {
     var theme = _a.theme;
     return theme.component.radio.lineHeight;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'var(--colors-shades-250-color)' : 'inherit');
 });
 var RadioInput = function (_a) {
-    var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e, labelStyle = _a.labelStyle;
+    var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e, labelStyle = _a.labelStyle, icon = _a.icon;
     var theme = useTheme();
     var handleChange = function (event, label) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1a, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
+    return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1a, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
 };
 var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$U;
 
@@ -20548,10 +20552,20 @@ var AutoshipFrequencyDropdown = function (_a) {
     };
     return (jsx$1(Fragment$2, { children: options.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: options[0], options: options, onChange: handleChange, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", options[0].label.toLowerCase()] }), void 0)) }, void 0));
 };
+var getLabel = function (number, frequency) {
+    return "".concat(number, " ").concat(number === 1 ? frequency.unit.slice(0, -1) : frequency.unit);
+};
+var getSelectedLabel = function (number, index, frequency) {
+    var _a;
+    var label = getLabel(number, frequency);
+    var additionalLabel = ((_a = frequency.labels) === null || _a === void 0 ? void 0 : _a[index]) ? " ".concat(frequency.labels[index]) : '';
+    return "".concat(label).concat(additionalLabel);
+};
 var getDropdownOptions = function (frequency) {
-    return frequency.values.map(function (number) { return ({
+    return frequency.values.map(function (number, index) { return ({
         key: "drop-down-autoship-".concat(number),
-        label: "".concat(number, " ").concat(number === 1 ? frequency.unit.slice(0, -1) : frequency.unit),
+        label: getLabel(number, frequency),
+        selectedLabel: getSelectedLabel(number, index, frequency),
         value: number,
         disabled: false,
     }); });
@@ -20563,7 +20577,7 @@ var templateObject_1$a, templateObject_2$9;
 
 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, index) { return (jsxs$1(Benefit$1, { 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)] }, index)); }) }, void 0));
+    return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) { return (jsxs$1(Benefit$1, { 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 ContainerWrapper$1 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  max-height: 180px;\n  width: auto;\n  max-width: 450px;\n  gap: 5px;\n  @media (max-width: 480px) {\n    gap: 0px;\n    font-size: 12px !important;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  max-height: 180px;\n  width: auto;\n  max-width: 450px;\n  gap: 5px;\n  @media (max-width: 480px) {\n    gap: 0px;\n    font-size: 12px !important;\n  }\n"])));
@@ -21174,10 +21188,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");
@@ -21190,13 +21204,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;
@@ -21213,10 +21227,13 @@ var SubscriptionHeader = newStyled.div(templateObject_6 || (templateObject_6 = _
     var theme = _a.theme;
     return theme.colors.pallete.primary.color;
 });
-var BenefitsContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
+var BenefitsContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: 5px;\n\n  p {\n    color: ", ";\n  }\n"], ["\n  margin-bottom: 5px;\n\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
+    var disabled = _a.disabled;
+    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) {
@@ -21226,24 +21243,16 @@ var TooltipWrapper = newStyled.div(templateObject_10 || (templateObject_10 = __m
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 var SubscriptionPlanSelector = function (_a) {
-    var _b, _c;
     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 _d = useState({
+    var _b = useState({
         oneTime: radios.oneTime,
         subscription: radios.subscription,
-    }), radiosStatuses = _d[0], setRadiosStatuses = _d[1];
-    // Only for Autoship
-    var getDropDownOptions = function (frequency) {
-        return frequency.values.map(function (number) { return ({
-            key: "drop-down-subscription-plan-selector-".concat(number),
-            label: "".concat(number, " ").concat(number === 1 ? frequency.unit.slice(0, -1) : frequency),
-            value: number,
-            disabled: false,
-        }); });
-    };
-    var dropdownOptions = frequency ? getDropDownOptions(frequency) : undefined;
-    var _e = useState((_c = (_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : undefined), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
+    }), radiosStatuses = _b[0], setRadiosStatuses = _b[1];
+    useEffect(function () {
+        setRadiosStatuses(function (prevStatuses) { return (__assign$1(__assign$1({}, prevStatuses), { oneTime: __assign$1(__assign$1({}, prevStatuses.oneTime), { checked: prevStatuses.oneTime.disabled ? false : prevStatuses.oneTime.checked }), subscription: __assign$1(__assign$1({}, prevStatuses.subscription), { checked: prevStatuses.subscription.disabled ? false : prevStatuses.subscription.checked }) })); });
+    }, [radiosStatuses.oneTime.disabled, radiosStatuses.subscription.disabled]);
+    var _c = useState(frequency === null || frequency === void 0 ? void 0 : frequency.values[0]), subscriptionPeriod = _c[0], setSubscriptionPeriod = _c[1];
     var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, subscriptionDiscountPercentage = pricing.subscriptionDiscountPercentage;
     var subscriptionAdditionalDiscount = discountedPrice * (subscriptionDiscountPercentage / 100);
     var subscriptionFinalPrice = Number((discountedPrice - subscriptionAdditionalDiscount).toFixed(2));
@@ -21268,33 +21277,52 @@ var SubscriptionPlanSelector = function (_a) {
         }
     }, [dataObject, onChange]);
     var handleRadioClicked = function (radioValue) {
+        var isDisabled = function (value) {
+            return ((value === 'subscription' && radiosStatuses.subscription.disabled) ||
+                (value === 'oneTime' && radiosStatuses.oneTime.disabled));
+        };
+        if (isDisabled(radioValue)) {
+            return;
+        }
         setRadiosStatuses(function (prevStatuses) { return (__assign$1(__assign$1({}, prevStatuses), { oneTime: __assign$1(__assign$1({}, prevStatuses.oneTime), { checked: radioValue === 'oneTime' }), subscription: __assign$1(__assign$1({}, prevStatuses.subscription), { checked: radioValue === 'subscription' }) })); });
+        if (radioValue === 'oneTime') {
+            setSubscriptionPeriod(undefined);
+        }
+        else if (radioValue === 'subscription' && frequency) {
+            setSubscriptionPeriod(frequency.values[0]);
+        }
     };
-    var handleValueChanged = function (value) {
-        console.log('value', value);
-        setSubscriptionPeriod(value.value);
+    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) {
-            return children;
+            var disabledStyle_1 = isDisabled ? { opacity: 0.5, pointerEvents: 'none' } : {};
+            return Children.map(children, function (child) {
+                return isValidElement(child)
+                    ? cloneElement(child, { style: __assign$1(__assign$1({}, child.props.style), disabledStyle_1) })
+                    : child;
+            });
         }
         else if (benefits) {
-            return (jsx$1(BenefitsList, { benefits: benefits, isSelected: radiosStatuses.subscription.checked, selectedColor: benefitsColor.selected, baseColor: benefitsColor.base }, void 0));
+            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 null;
     };
-    return (jsxs$1(Container, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", selected: radiosStatuses.subscription.checked }, { children: [jsx$1(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), 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, name: "subscription", id: "subscription", value: "subscription", size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
+    return (jsxs$1(Container, __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 () {
                                             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.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))), selected: radiosStatuses.subscription.checked, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: renderBenefitsOrChildren() }, void 0), frequency && (jsx$1(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleValueChanged }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radiosStatuses.oneTime.checked, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsx$1(RadioInput, { label: radios.oneTime.label, 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, 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.checked, disabled: radiosStatuses.oneTime.disabled }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radiosStatuses.oneTime.checked, 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, 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 };