@trafilea/afrodita-components 6.15.0 → 6.15.2

package/build/index.d.ts

@@ -1154,6 +1154,7 @@ declare type AutoshipProps = {
 };
 declare const Autoship: React.FC<AutoshipProps>;
 
+declare type AutoshipRadios = 'one-time-purchase' | 'autoship-subscribe-and-save';
 declare type AutoshipPropsV2 = {
     singlePurchaseLabel: string;
     subscriptionLabel: string;
@@ -1163,6 +1164,8 @@ declare type AutoshipPropsV2 = {
     };
     tooltipHeader?: {
         title: string;
+        iconFill?: string;
+        iconRight?: string;
     };
     pricing: {
         listPrice: number;
@@ -1183,8 +1186,9 @@ declare type AutoshipPropsV2 = {
     closeIcon?: boolean;
     currencySymbol: string;
     discountLabel?: string;
+    disabledInputs?: AutoshipRadios[];
 };
-declare const AutoshipV2: React.FC<AutoshipPropsV2>;
+declare const AutoshipV2: React__default.FC<AutoshipPropsV2>;
 
 declare enum BeforeAfterVariant {
     UserInfoText = "UserInfoText",
@@ -3121,8 +3125,10 @@ interface SizeFitGuideProps {
 declare const SizeFitGuide: ({ title, fitPercentage, onClick, onClickFitPercentage, hideIcon, }: SizeFitGuideProps) => JSX.Element;
 
 declare type Size = 'S' | 'XS / S' | 'M' | 'M / L' | 'L' | 'XL' | 'XL / 2XL' | '2XL' | '3XL' | '4XL';
-declare type SizeTipReference = {
-    [key in Size]?: string;
+declare type SizeTip = {
+    size: Size;
+    tip: string;
+    cta: string;
 };
 interface SizeSelectorProps {
     label: string;
@@ -3133,7 +3139,7 @@ interface SizeSelectorProps {
     inline?: boolean;
     width?: string;
     hasSizeGuide?: boolean;
-    sizeTipReferences?: SizeTipReference;
+    sizeTipReferences?: SizeTip[];
 }
 declare const SizeSelector: ({ label, sizes, selectedValue, onChange, onClickSizeTip, inline, width, hasSizeGuide, sizeTipReferences, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
@@ -3354,7 +3360,7 @@ declare type TextTagProps = {
     href?: never;
 };
 declare type TextProps<T = Element> = AriaAttributes & HTMLAttributes<T> & {
-    children: ReactNode;
+    children?: ReactNode;
     style?: CSSProperties;
     className?: string;
     testId?: string;
@@ -3413,11 +3419,13 @@ interface TooltipProps {
         titleColor?: string;
         Icon?: IconType;
         iconFill?: string;
+        iconRight?: string;
     };
     onClick?: () => void;
     withArrow?: boolean;
+    closeBtnSize?: number;
 }
-declare const Tooltip: ({ children, position, content, backgroundColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ children, position, content, backgroundColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, closeBtnSize, }: TooltipProps) => JSX.Element;
 
 declare type SubtotalOption = {
     label: string;

package/build/index.esm.js

@@ -5204,7 +5204,10 @@ var Title$7 = newStyled.h1(templateObject_6$q || (templateObject_6$q = __makeTem
     return color;
 });
 var IconContainer$5 = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
-var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: 0.3rem;\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"], ["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: 0.3rem;\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])));
+var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ", ";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"], ["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ", ";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])), function (_a) {
+    var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
+    return right;
+});
 var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
 
 var useOnClickOutside = function (ref, handler) {
@@ -5281,13 +5284,13 @@ var useWindowDimensions = function (breakpoints, _a) {
 
 var Tooltip = function (_a) {
     var _b;
-    var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d;
+    var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.closeBtnSize, closeBtnSize = _e === void 0 ? 0.5 : _e;
     var theme = useTheme();
-    var _e = useState(0), childrenWidth = _e[0], setChildrenWidth = _e[1];
+    var _f = useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
     var childrenRef = createRef();
-    var _f = useState(0), tooltipHeight = _f[0], setTooltipHeight = _f[1];
+    var _g = useState(0), tooltipHeight = _g[0], setTooltipHeight = _g[1];
     var tooltipRef = createRef();
-    var _g = useState(false), closeTooltip = _g[0], setCloseTooltip = _g[1];
+    var _h = useState(false), closeTooltip = _h[0], setCloseTooltip = _h[1];
     var isMobile = useWindowDimensions().isMobile;
     useLayoutEffect(function () {
         var ref = childrenRef.current;
@@ -5297,7 +5300,7 @@ var Tooltip = function (_a) {
         var ref = tooltipRef.current;
         setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
     }, [tooltipRef]);
-    return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip === true && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: 0.5, height: 0.5, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
+    return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
                                             testId: 'HeaderIcon',
                                             fill: (header === null || header === void 0 ? void 0 : header.iconFill)
                                                 ? header === null || header === void 0 ? void 0 : header.iconFill
@@ -5867,7 +5870,7 @@ var radioIds = {
 var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
 var DEFAULT_FREQUENCY_UNIT = 'months';
 var AutoshipV2 = function (_a) {
-    var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel;
+    var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
     var theme = useTheme();
     var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
         ? frequencyValues.map(function (value) {
@@ -5875,7 +5878,9 @@ var AutoshipV2 = function (_a) {
             return { key: "".concat(value), label: label, value: value, disabled: false };
         })
         : [DEFAULT_DROPDOWN_OPTIONS];
-    var _d = useState(radioIds.autoship), radioCheck = _d[0], setRadioCheck = _d[1];
+    var initialRadioChecked = radioIds.autoship &&
+        ((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.includes(radioIds.autoship.id)) ? radioIds.oneTime : radioIds.autoship);
+    var _d = useState(initialRadioChecked), radioCheck = _d[0], setRadioCheck = _d[1];
     var _e = useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
     var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
     var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
@@ -5884,7 +5889,7 @@ var AutoshipV2 = function (_a) {
     var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
     var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
     var updatedAutoshipBenefits = benefits !== null && benefits !== void 0 ? benefits : __spreadArray([
-        "Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
+        "<span style=\"font-weight: 600\">Save up to ".concat(autoShipPctOverListPriceRounded, "% always.</span>")
     ], autoshipBenefits.slice(0), true);
     var createDataObject = function () {
         return {
@@ -5898,6 +5903,9 @@ var AutoshipV2 = function (_a) {
         onChange(createDataObject());
     }, []);
     var handleChange = function (value, type) {
+        if (disabledInputs && disabledInputs.includes(value.id)) {
+            return;
+        }
         var dataObj = createDataObject();
         if (type === 'radio') {
             setRadioCheck(value);
@@ -5909,9 +5917,9 @@ var AutoshipV2 = function (_a) {
         onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
     };
     var benefitsColor = benefitsColorMapper(theme);
-    return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { 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(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
+    return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, 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(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
                                         ? benefitsColor.selected
-                                        : benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(FlexContainer, { children: dropdownOptions.length > 1 ? (jsxs$1(Fragment$2, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
+                                        : benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(FlexContainer, { children: dropdownOptions.length > 1 ? (jsxs$1(Fragment$2, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
 };
 
 var _a$2;
@@ -19310,11 +19318,12 @@ var templateObject_1$d, templateObject_2$9;
 var SizeSelector = function (_a) {
     var _b;
     var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, onClickSizeTip = _a.onClickSizeTip, _c = _a.inline, inline = _c === void 0 ? false : _c, width = _a.width, _d = _a.hasSizeGuide, hasSizeGuide = _d === void 0 ? false : _d, sizeTipReferences = _a.sizeTipReferences;
+    var activeSizeTip = sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences.find(function (sizeTip) { return (sizeTip === null || sizeTip === void 0 ? void 0 : sizeTip.size) === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label); });
     return (jsxs("div", __assign$1({ css: {
             display: 'flex',
             flexDirection: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : 'start',
-        } }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: (_b = sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences[selectedValue.label]) !== null && _b !== void 0 ? _b : 'Refer to our' }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { title: "Size and Fit Guide", onClick: onClickSizeTip, hideIcon: true }, void 0))] }, void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
+        } }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, __assign$1({ "data-testid": "sizing-tip" }, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.tip }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { hideIcon: true, onClick: onClickSizeTip, title: (_b = activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.cta) !== null && _b !== void 0 ? _b : 'Size and Fit Guide' }, void 0))] }), void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes === null || sizes === void 0 ? void 0 : sizes.map(function (size) {
                     var active = !size.disabled && size.label === selectedValue.label;
                     return (jsx(SelectorSecondary, { css: {
                             padding: '0.75rem 1rem 0.625rem',