@trafilea/afrodita-components 6.57.5 → 6.57.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +124 -150
- package/build/index.esm.js.map +1 -1
- package/build/index.js +124 -150
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3197,7 +3197,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3197
3197
|
};
|
|
3198
3198
|
}
|
|
3199
3199
|
};
|
|
3200
|
-
var Container$
|
|
3200
|
+
var Container$1A = newStyled.div(templateObject_1$2G || (templateObject_1$2G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3201
3201
|
var backgroundColor = _a.backgroundColor;
|
|
3202
3202
|
return backgroundColor;
|
|
3203
3203
|
}, function (_a) {
|
|
@@ -3234,7 +3234,7 @@ var H3$2 = newStyled.h3(templateObject_2$1W || (templateObject_2$1W = __makeTemp
|
|
|
3234
3234
|
var ClubOfferTag = function (_a) {
|
|
3235
3235
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
3236
3236
|
var theme = useTheme();
|
|
3237
|
-
return (jsx$1(Container$
|
|
3237
|
+
return (jsx$1(Container$1A, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3238
3238
|
};
|
|
3239
3239
|
var templateObject_1$2G, templateObject_2$1W;
|
|
3240
3240
|
|
|
@@ -3267,7 +3267,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3267
3267
|
};
|
|
3268
3268
|
}
|
|
3269
3269
|
};
|
|
3270
|
-
var Container$
|
|
3270
|
+
var Container$1z = newStyled.div(templateObject_1$2F || (templateObject_1$2F = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3271
3271
|
var backgroundColor = _a.backgroundColor;
|
|
3272
3272
|
return backgroundColor;
|
|
3273
3273
|
}, function (_a) {
|
|
@@ -3304,7 +3304,7 @@ var H3$1 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __makeTemp
|
|
|
3304
3304
|
var DiscountTag$4 = function (_a) {
|
|
3305
3305
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3306
3306
|
var theme = useTheme();
|
|
3307
|
-
return (jsx$1(Container$
|
|
3307
|
+
return (jsx$1(Container$1z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3308
3308
|
};
|
|
3309
3309
|
var templateObject_1$2F, templateObject_2$1V;
|
|
3310
3310
|
|
|
@@ -3375,7 +3375,7 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
3375
3375
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
3376
3376
|
};
|
|
3377
3377
|
|
|
3378
|
-
var Container$
|
|
3378
|
+
var Container$1y = newStyled.div(templateObject_1$2E || (templateObject_1$2E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3379
3379
|
var Price$1 = newStyled.p(templateObject_2$1U || (templateObject_2$1U = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3380
3380
|
var weight = _a.weight;
|
|
3381
3381
|
return (weight ? weight : '400');
|
|
@@ -3478,7 +3478,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3478
3478
|
: ComponentSize.XSmall;
|
|
3479
3479
|
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3480
3480
|
};
|
|
3481
|
-
return (jsxs$1(Container$
|
|
3481
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }), void 0)) : (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsx$1(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3482
3482
|
};
|
|
3483
3483
|
|
|
3484
3484
|
var useOnClickOutside = function (ref, handler) {
|
|
@@ -3770,7 +3770,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3770
3770
|
var savetoString = saveto.toFixed(2);
|
|
3771
3771
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3772
3772
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3773
|
-
return (jsxs$1(Container$
|
|
3773
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [tooltipText && (jsx$1(TooltipContainer$1, __assign$1({ "data-testid": "tooltip-container" }, { children: jsx$1(Tooltip, __assign$1({ showCloseIcon: true, withArrow: true, content: {
|
|
3774
3774
|
text: tooltipText,
|
|
3775
3775
|
}, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : ComponentPosition.BottomRight, closeBtnSize: 0.7, "data-testid": "tooltip" }, { children: jsx$1(Icon$1, { name: tooltipIcon !== null && tooltipIcon !== void 0 ? tooltipIcon : 'actions/circle_info', fill: theme.colors.shades[500].color, testId: "tooltip-icon", showTooltipTitle: isMobile }, void 0) }), void 0) }), void 0)), isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3776
3776
|
? finalPriceArray[0]
|
|
@@ -3842,7 +3842,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3842
3842
|
return null;
|
|
3843
3843
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$2(testId, 'each-one-price') }, { children: [jsxs$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3844
3844
|
};
|
|
3845
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3845
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1y, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1y, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3846
3846
|
marginTop: '-5px',
|
|
3847
3847
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3848
3848
|
marginTop: '-6px',
|
|
@@ -3860,7 +3860,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3860
3860
|
};
|
|
3861
3861
|
var templateObject_1$2B, templateObject_2$1S, templateObject_3$1s;
|
|
3862
3862
|
|
|
3863
|
-
var Container$
|
|
3863
|
+
var Container$1x = newStyled.div(templateObject_1$2A || (templateObject_1$2A = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3864
3864
|
var Price = newStyled.p(templateObject_2$1R || (templateObject_2$1R = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3865
3865
|
var weight = _a.weight;
|
|
3866
3866
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
@@ -3895,7 +3895,7 @@ var PriceLabelV5 = function (_a) {
|
|
|
3895
3895
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3896
3896
|
weight: 700,
|
|
3897
3897
|
};
|
|
3898
|
-
return (jsx$1(Container$
|
|
3898
|
+
return (jsx$1(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsx$1(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3899
3899
|
};
|
|
3900
3900
|
|
|
3901
3901
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2z || (templateObject_1$2z = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
@@ -3921,7 +3921,7 @@ var PriceLabel = function (_a) {
|
|
|
3921
3921
|
};
|
|
3922
3922
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3923
3923
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3924
|
-
return (jsxs$1(Container$
|
|
3924
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3925
3925
|
marginTop: '-5px',
|
|
3926
3926
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3927
3927
|
marginTop: '-6px',
|
|
@@ -3955,7 +3955,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3955
3955
|
var finalPriceString = finalPriceArray[0]
|
|
3956
3956
|
? finalPriceArray[0]
|
|
3957
3957
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3958
|
-
return (jsxs$1(Container$
|
|
3958
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3959
3959
|
};
|
|
3960
3960
|
var templateObject_1$2y;
|
|
3961
3961
|
|
|
@@ -3976,7 +3976,7 @@ var HorizontalDivider = newStyled.div(templateObject_1$2w || (templateObject_1$2
|
|
|
3976
3976
|
});
|
|
3977
3977
|
var templateObject_1$2w;
|
|
3978
3978
|
|
|
3979
|
-
var Container$
|
|
3979
|
+
var Container$1w = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3980
3980
|
var height = _a.height;
|
|
3981
3981
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3982
3982
|
}, function (_a) {
|
|
@@ -4001,7 +4001,7 @@ var Container$1x = newStyled.div(templateObject_1$2v || (templateObject_1$2v = _
|
|
|
4001
4001
|
var SkeletonBox = function (_a) {
|
|
4002
4002
|
var width = _a.width, height = _a.height;
|
|
4003
4003
|
var theme = useTheme();
|
|
4004
|
-
return jsx$1(Container$
|
|
4004
|
+
return jsx$1(Container$1w, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
4005
4005
|
};
|
|
4006
4006
|
var templateObject_1$2v;
|
|
4007
4007
|
|
|
@@ -5275,7 +5275,7 @@ var DEFAULTS = {
|
|
|
5275
5275
|
};
|
|
5276
5276
|
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$16, templateObject_5$S, templateObject_6$J, templateObject_7$z, templateObject_8$s, templateObject_9$h, templateObject_10$f, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$4, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5277
5277
|
|
|
5278
|
-
var Container$
|
|
5278
|
+
var Container$1v = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
5279
5279
|
var Card$4 = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
5280
5280
|
var Tag$2 = newStyled.div(templateObject_3$1p || (templateObject_3$1p = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
5281
5281
|
var Label$7 = newStyled.div(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -5283,7 +5283,7 @@ var Check$1 = newStyled.div(templateObject_5$R || (templateObject_5$R = __makeTe
|
|
|
5283
5283
|
var DiscountContainer$1 = newStyled.div(templateObject_6$I || (templateObject_6$I = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
5284
5284
|
var PackSelectorV2 = function (_a) {
|
|
5285
5285
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5286
|
-
return (jsx$1(Container$
|
|
5286
|
+
return (jsx$1(Container$1v, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5287
5287
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5288
5288
|
}) }), void 0));
|
|
5289
5289
|
};
|
|
@@ -5307,23 +5307,23 @@ var PackCard$1 = function (_a) {
|
|
|
5307
5307
|
};
|
|
5308
5308
|
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$15, templateObject_5$R, templateObject_6$I;
|
|
5309
5309
|
|
|
5310
|
-
var Container$
|
|
5310
|
+
var Container$1u = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5311
5311
|
var DropContainer = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5312
5312
|
var DropList = function (_a) {
|
|
5313
5313
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5314
|
-
return (jsx$1(Container$
|
|
5314
|
+
return (jsx$1(Container$1u, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5315
5315
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5316
5316
|
}) }, void 0));
|
|
5317
5317
|
};
|
|
5318
5318
|
var templateObject_1$2p, templateObject_2$1L;
|
|
5319
5319
|
|
|
5320
5320
|
var DROPS_TOTAL = 5;
|
|
5321
|
-
var Container$
|
|
5321
|
+
var Container$1t = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5322
5322
|
var Title$a = newStyled.p(templateObject_2$1K || (templateObject_2$1K = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
5323
5323
|
var Description$3 = newStyled.p(templateObject_3$1o || (templateObject_3$1o = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
5324
5324
|
var AbsorbencyLevel = function (_a) {
|
|
5325
5325
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5326
|
-
return (jsxs$1(Container$
|
|
5326
|
+
return (jsxs$1(Container$1t, { children: [jsx$1(Title$a, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5327
5327
|
};
|
|
5328
5328
|
var templateObject_1$2o, templateObject_2$1K, templateObject_3$1o;
|
|
5329
5329
|
|
|
@@ -5427,7 +5427,7 @@ var Accordion$1 = function (_a) {
|
|
|
5427
5427
|
};
|
|
5428
5428
|
var templateObject_1$2n;
|
|
5429
5429
|
|
|
5430
|
-
var Container$
|
|
5430
|
+
var Container$1s = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5431
5431
|
var AccordionOptions = function (_a) {
|
|
5432
5432
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5433
5433
|
var _b = useState({
|
|
@@ -5440,7 +5440,7 @@ var AccordionOptions = function (_a) {
|
|
|
5440
5440
|
}
|
|
5441
5441
|
return false;
|
|
5442
5442
|
};
|
|
5443
|
-
return (jsx$1(Container$
|
|
5443
|
+
return (jsx$1(Container$1s, { children: accordions.map(function (accordion, index) {
|
|
5444
5444
|
var forceOpenValue = getForceOpen(index);
|
|
5445
5445
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5446
5446
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5668,7 +5668,7 @@ var Bold = newStyled.span(templateObject_1$2l || (templateObject_1$2l = __makeTe
|
|
|
5668
5668
|
var FlexContainer$5 = newStyled.div(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5669
5669
|
var templateObject_1$2l, templateObject_2$1J;
|
|
5670
5670
|
|
|
5671
|
-
var Container$
|
|
5671
|
+
var Container$1r = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5672
5672
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5673
5673
|
return width;
|
|
5674
5674
|
}, function (_a) {
|
|
@@ -5684,7 +5684,7 @@ var templateObject_1$2k, templateObject_2$1I, templateObject_3$1n, templateObjec
|
|
|
5684
5684
|
var CouponCard = function (_a) {
|
|
5685
5685
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
5686
5686
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5687
|
-
return (jsxs$1(Container$
|
|
5687
|
+
return (jsxs$1(Container$1r, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () {
|
|
5688
5688
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5689
5689
|
setShowCoupon(function (prev) { return !prev; });
|
|
5690
5690
|
} }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
@@ -6027,7 +6027,7 @@ var CustomCheckboxStyles = {
|
|
|
6027
6027
|
},
|
|
6028
6028
|
};
|
|
6029
6029
|
|
|
6030
|
-
var Container$
|
|
6030
|
+
var Container$1q = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
6031
6031
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6032
6032
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6033
6033
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6052,7 +6052,7 @@ var Checkbox = function (_a) {
|
|
|
6052
6052
|
}
|
|
6053
6053
|
onChange(e.target.checked);
|
|
6054
6054
|
};
|
|
6055
|
-
return (jsxs$1(Container$
|
|
6055
|
+
return (jsxs$1(Container$1q, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && (jsx$1(Icon.Actions.Check, { fill: text === 'White'
|
|
6056
6056
|
? theme.colors.shades['black'].color
|
|
6057
6057
|
: theme.colors.shades['white'].color }, void 0)) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6058
6058
|
};
|
|
@@ -6105,7 +6105,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
6105
6105
|
Option: BaseDropdownOption,
|
|
6106
6106
|
});
|
|
6107
6107
|
|
|
6108
|
-
var Container$
|
|
6108
|
+
var Container$1p = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject([""], [""])));
|
|
6109
6109
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
6110
6110
|
var SelectedOption = newStyled.span(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
6111
6111
|
var fontWeight = _a.fontWeight;
|
|
@@ -6140,7 +6140,7 @@ function SimpleDropdown(_a) {
|
|
|
6140
6140
|
}
|
|
6141
6141
|
setSelectedValue(value);
|
|
6142
6142
|
}, [value, options, initialValue]);
|
|
6143
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
6143
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1p : Fragment$1;
|
|
6144
6144
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
6145
6145
|
}
|
|
6146
6146
|
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m;
|
|
@@ -6207,18 +6207,14 @@ var ContainerStyles$2 = {
|
|
|
6207
6207
|
});
|
|
6208
6208
|
},
|
|
6209
6209
|
};
|
|
6210
|
-
var Wrapper$7 = newStyled.div(function (
|
|
6211
|
-
var $horizontal = _a.$horizontal;
|
|
6210
|
+
var Wrapper$7 = newStyled.div(function () {
|
|
6212
6211
|
return {
|
|
6213
6212
|
display: 'flex',
|
|
6214
|
-
|
|
6215
|
-
alignItems: $horizontal ? 'flex-start' : 'center',
|
|
6216
|
-
justifyContent: $horizontal ? 'space-between' : 'flex-start',
|
|
6217
|
-
width: 'auto',
|
|
6213
|
+
alignItems: 'center',
|
|
6218
6214
|
};
|
|
6219
6215
|
});
|
|
6220
|
-
var Container$
|
|
6221
|
-
var HorizontalContainer = newStyled(Container$
|
|
6216
|
+
var Container$1o = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
6217
|
+
var HorizontalContainer = newStyled(Container$1o)({
|
|
6222
6218
|
alignSelf: 'center',
|
|
6223
6219
|
});
|
|
6224
6220
|
var Input$4 = newStyled.input(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
@@ -6255,7 +6251,7 @@ var RadioInput = function (_a) {
|
|
|
6255
6251
|
var value = event.currentTarget.value;
|
|
6256
6252
|
onChange({ value: value, label: label });
|
|
6257
6253
|
};
|
|
6258
|
-
var InputContainer = horizontal ? HorizontalContainer : Container$
|
|
6254
|
+
var InputContainer = horizontal ? HorizontalContainer : Container$1o;
|
|
6259
6255
|
return (jsxs$1(Wrapper$7, __assign$1({ "aria-orientation": horizontal ? 'horizontal' : 'vertical', "$horizontal": horizontal }, { children: [jsxs$1(InputContainer, __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));
|
|
6260
6256
|
};
|
|
6261
6257
|
|
|
@@ -6311,7 +6307,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6311
6307
|
var selected = _a.selected, theme = _a.theme;
|
|
6312
6308
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6313
6309
|
});
|
|
6314
|
-
var Container$
|
|
6310
|
+
var Container$1n = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6315
6311
|
var templateObject_1$2d, templateObject_2$1D, templateObject_3$1k, templateObject_4$13, templateObject_5$P, templateObject_6$H, templateObject_7$y, templateObject_8$r, templateObject_9$g, templateObject_10$e, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6316
6312
|
|
|
6317
6313
|
var radioIds$3 = {
|
|
@@ -6362,7 +6358,7 @@ var Autoship = function (_a) {
|
|
|
6362
6358
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6363
6359
|
};
|
|
6364
6360
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6365
|
-
return (jsxs$1(Container$
|
|
6361
|
+
return (jsxs$1(Container$1n, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$4, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$3.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$3.oneTime.id, id: radioIds$3.oneTime.id, value: radioIds$3.oneTime.id, checked: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$5, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$3.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$5, __assign$1({ onClick: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$3.autoship.id, id: radioIds$3.autoship.id, value: radioIds$3.autoship.id, checked: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$4, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$3.autoship.id === radioCheck.id
|
|
6366
6362
|
? benefitsColor.selected
|
|
6367
6363
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$4, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$4, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6368
6364
|
};
|
|
@@ -6423,7 +6419,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6423
6419
|
var selected = _a.selected, theme = _a.theme;
|
|
6424
6420
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6425
6421
|
});
|
|
6426
|
-
var Container$
|
|
6422
|
+
var Container$1m = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6427
6423
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6428
6424
|
var theme = _a.theme;
|
|
6429
6425
|
return theme.component.autoship.tooltip.margin;
|
|
@@ -6489,7 +6485,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6489
6485
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6490
6486
|
};
|
|
6491
6487
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6492
|
-
return (jsxs$1(Container$
|
|
6488
|
+
return (jsxs$1(Container$1m, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id, borderRadiusValue: borderRadiusValue }, { children: [jsx$1(DiscountTag$3, __assign$1({ isSelected: radioIds$2.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$4, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { 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$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [hasInfoBulletIcons && (jsx$1(BulletIconWrapper, { children: jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6493
6489
|
? benefitsColor.selected
|
|
6494
6490
|
: benefitsColor.base }, void 0) }, void 0)), jsx$1(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery 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: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, borderRadiusValue: borderRadiusValue, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6495
6491
|
};
|
|
@@ -6532,7 +6528,7 @@ var ResultFeedback = function (_a) {
|
|
|
6532
6528
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6533
6529
|
};
|
|
6534
6530
|
|
|
6535
|
-
var Container$
|
|
6531
|
+
var Container$1l = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6536
6532
|
var ImageContainer$7 = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6537
6533
|
var ImageCard = newStyled.div(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6538
6534
|
var UserInfoText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -6620,7 +6616,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6620
6616
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6621
6617
|
var infoText = buildInfoText(name, age, months);
|
|
6622
6618
|
var Component = componentByVariant[variant];
|
|
6623
|
-
return (jsxs$1(Container$
|
|
6619
|
+
return (jsxs$1(Container$1l, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6624
6620
|
};
|
|
6625
6621
|
|
|
6626
6622
|
var Section = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
@@ -6643,7 +6639,7 @@ var CardBody$1 = function (_a) {
|
|
|
6643
6639
|
};
|
|
6644
6640
|
var templateObject_1$28;
|
|
6645
6641
|
|
|
6646
|
-
var Container$
|
|
6642
|
+
var Container$1k = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6647
6643
|
var flex = _a.flex;
|
|
6648
6644
|
return flex &&
|
|
6649
6645
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6658,7 +6654,7 @@ var Container$1l = newStyled.div(templateObject_1$27 || (templateObject_1$27 = _
|
|
|
6658
6654
|
var Card$2 = function (_a) {
|
|
6659
6655
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6660
6656
|
var theme = useTheme();
|
|
6661
|
-
return (jsx$1(Container$
|
|
6657
|
+
return (jsx$1(Container$1k, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6662
6658
|
};
|
|
6663
6659
|
var Card$3 = Object.assign(Card$2, {
|
|
6664
6660
|
Header: CardHeader,
|
|
@@ -6690,14 +6686,14 @@ var Motivator = function (_a) {
|
|
|
6690
6686
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: true, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsx$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: typeof content === 'string' ? (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: content }), void 0)) : (content) }), void 0) }), void 0));
|
|
6691
6687
|
};
|
|
6692
6688
|
|
|
6693
|
-
var Container$
|
|
6689
|
+
var Container$1j = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6694
6690
|
var Title$9 = newStyled.h1(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6695
6691
|
var Details$1 = newStyled.span(templateObject_3$1f || (templateObject_3$1f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6696
6692
|
var PriceContainer$2 = newStyled.span(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6697
6693
|
var Simple = function (_a) {
|
|
6698
6694
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6699
6695
|
var theme = useTheme();
|
|
6700
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6696
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1j, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6701
6697
|
};
|
|
6702
6698
|
var templateObject_1$24, templateObject_2$1y, templateObject_3$1f, templateObject_4$_;
|
|
6703
6699
|
|
|
@@ -6707,7 +6703,7 @@ var Bundle = {
|
|
|
6707
6703
|
Motivator: Motivator,
|
|
6708
6704
|
};
|
|
6709
6705
|
|
|
6710
|
-
var Container$
|
|
6706
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6711
6707
|
var displayBNPL = _a.displayBNPL;
|
|
6712
6708
|
return (displayBNPL ? 'flex' : 'none');
|
|
6713
6709
|
});
|
|
@@ -6732,7 +6728,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6732
6728
|
else {
|
|
6733
6729
|
dynamicText = "or 4 interest-free payments of ";
|
|
6734
6730
|
}
|
|
6735
|
-
return (jsx$1(Container$
|
|
6731
|
+
return (jsx$1(Container$1i, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [dynamicText, jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6736
6732
|
display: 'inline',
|
|
6737
6733
|
fontSize: fontSize,
|
|
6738
6734
|
paddingLeft: '0.25rem',
|
|
@@ -6758,11 +6754,11 @@ var OfferBanner = function (_a) {
|
|
|
6758
6754
|
};
|
|
6759
6755
|
var templateObject_1$22;
|
|
6760
6756
|
|
|
6761
|
-
var Container$
|
|
6757
|
+
var Container$1h = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6762
6758
|
var CloseButton$1 = function (_a) {
|
|
6763
6759
|
var onClick = _a.onClick, size = _a.size;
|
|
6764
6760
|
var theme = useTheme();
|
|
6765
|
-
return (jsx$1(Container$
|
|
6761
|
+
return (jsx$1(Container$1h, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6766
6762
|
};
|
|
6767
6763
|
var templateObject_1$21;
|
|
6768
6764
|
|
|
@@ -6790,13 +6786,13 @@ var Title$8 = function (_a) {
|
|
|
6790
6786
|
};
|
|
6791
6787
|
var templateObject_1$1_;
|
|
6792
6788
|
|
|
6793
|
-
var Container$
|
|
6789
|
+
var Container$1g = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"], ["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6794
6790
|
var templateObject_1$1Z;
|
|
6795
6791
|
|
|
6796
6792
|
var TrashButton = function (_a) {
|
|
6797
6793
|
var onClick = _a.onClick, size = _a.size;
|
|
6798
6794
|
useTheme();
|
|
6799
|
-
return (jsx$1(Container$
|
|
6795
|
+
return (jsx$1(Container$1g, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsx$1(Icon.Actions.Trash, { width: size, height: size, fill: "#292929" }, void 0) }), void 0));
|
|
6800
6796
|
};
|
|
6801
6797
|
|
|
6802
6798
|
var CartProductItem = {
|
|
@@ -6808,8 +6804,8 @@ var CartProductItem = {
|
|
|
6808
6804
|
TrashButton: TrashButton,
|
|
6809
6805
|
};
|
|
6810
6806
|
|
|
6811
|
-
var Container$
|
|
6812
|
-
var MobileContainer = newStyled(Container$
|
|
6807
|
+
var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6808
|
+
var MobileContainer = newStyled(Container$1f)(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6813
6809
|
var DollarPart = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6814
6810
|
var ClubMembersText = newStyled.span(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6815
6811
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6819,7 +6815,7 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (t
|
|
|
6819
6815
|
var ClubPriceLabel = function (_a) {
|
|
6820
6816
|
var clubPrice = _a.clubPrice;
|
|
6821
6817
|
var isMobile = useWindowDimensions().isMobile;
|
|
6822
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6818
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$1f, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6823
6819
|
};
|
|
6824
6820
|
var templateObject_1$1Y, templateObject_2$1w, templateObject_3$1d, templateObject_4$Z, templateObject_5$M, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6825
6821
|
|
|
@@ -6829,7 +6825,7 @@ var Spacing = function (_a) {
|
|
|
6829
6825
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6830
6826
|
};
|
|
6831
6827
|
|
|
6832
|
-
var Container$
|
|
6828
|
+
var Container$1e = newStyled('div')(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6833
6829
|
var Content$2 = newStyled('div')(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6834
6830
|
var BarContainer$1 = newStyled('div')(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6835
6831
|
var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
@@ -6841,7 +6837,7 @@ var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __makeT
|
|
|
6841
6837
|
});
|
|
6842
6838
|
var StrengthBars = function (_a) {
|
|
6843
6839
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6844
|
-
return (jsxs$1(Container$
|
|
6840
|
+
return (jsxs$1(Container$1e, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6845
6841
|
};
|
|
6846
6842
|
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Y;
|
|
6847
6843
|
|
|
@@ -6868,7 +6864,7 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6868
6864
|
|
|
6869
6865
|
var STARTS_NUMBER = 5;
|
|
6870
6866
|
|
|
6871
|
-
var Container$
|
|
6867
|
+
var Container$1d = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6872
6868
|
var templateObject_1$1V;
|
|
6873
6869
|
|
|
6874
6870
|
var StarContainer = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
@@ -6883,7 +6879,7 @@ var StarList = function (_a) {
|
|
|
6883
6879
|
width: theme.component.stars.element[size].width,
|
|
6884
6880
|
height: theme.component.stars.element[size].height,
|
|
6885
6881
|
};
|
|
6886
|
-
return (jsx$1(Container$
|
|
6882
|
+
return (jsx$1(Container$1d, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6887
6883
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6888
6884
|
}) }, void 0));
|
|
6889
6885
|
};
|
|
@@ -6935,7 +6931,7 @@ var LabelStyles = {
|
|
|
6935
6931
|
});
|
|
6936
6932
|
},
|
|
6937
6933
|
};
|
|
6938
|
-
var Container$
|
|
6934
|
+
var Container$1c = newStyled.a(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6939
6935
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6940
6936
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6941
6937
|
return [
|
|
@@ -6976,7 +6972,7 @@ var Rating = function (_a) {
|
|
|
6976
6972
|
href: reviewsContainerId,
|
|
6977
6973
|
}
|
|
6978
6974
|
: {};
|
|
6979
|
-
return (jsxs$1(Container$
|
|
6975
|
+
return (jsxs$1(Container$1c, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), (reviews || reviewsText) && (jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0))] }), void 0));
|
|
6980
6976
|
};
|
|
6981
6977
|
|
|
6982
6978
|
var ImageWrapper$4 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
@@ -7148,7 +7144,7 @@ var HurryUp = function (_a) {
|
|
|
7148
7144
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
7149
7145
|
};
|
|
7150
7146
|
|
|
7151
|
-
var Container$
|
|
7147
|
+
var Container$1b = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
7152
7148
|
var size = _a.size;
|
|
7153
7149
|
return (size ? size : '100%');
|
|
7154
7150
|
}, function (_a) {
|
|
@@ -7180,7 +7176,7 @@ var templateObject_1$1N, templateObject_2$1q;
|
|
|
7180
7176
|
|
|
7181
7177
|
var Spinner = function (_a) {
|
|
7182
7178
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
7183
|
-
return (jsx$1(Container$
|
|
7179
|
+
return (jsx$1(Container$1b, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
7184
7180
|
};
|
|
7185
7181
|
|
|
7186
7182
|
var ProgressContainer = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
@@ -7192,7 +7188,7 @@ var ProgressBar$1 = function (_a) {
|
|
|
7192
7188
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7193
7189
|
};
|
|
7194
7190
|
|
|
7195
|
-
var Container$
|
|
7191
|
+
var Container$1a = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7196
7192
|
var HTMLVideo = newStyled.video(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
7197
7193
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
7198
7194
|
var PlayContainer = newStyled.div(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
@@ -7249,10 +7245,10 @@ var Video$1 = function (_a) {
|
|
|
7249
7245
|
}
|
|
7250
7246
|
setIsLoading(false);
|
|
7251
7247
|
};
|
|
7252
|
-
return (jsxs$1(Container$
|
|
7248
|
+
return (jsxs$1(Container$1a, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: handleOnloadedData, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7253
7249
|
};
|
|
7254
7250
|
|
|
7255
|
-
var Container$
|
|
7251
|
+
var Container$19 = newStyled.div(function (props) { return ({
|
|
7256
7252
|
height: 'auto',
|
|
7257
7253
|
textAlign: 'center',
|
|
7258
7254
|
justifyContent: 'center',
|
|
@@ -7302,10 +7298,10 @@ var IconsWithTitle = function (_a) {
|
|
|
7302
7298
|
textAlign: 'center',
|
|
7303
7299
|
lineHeight: '18px',
|
|
7304
7300
|
};
|
|
7305
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
7301
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$19, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
7306
7302
|
};
|
|
7307
7303
|
|
|
7308
|
-
var Container$
|
|
7304
|
+
var Container$18 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n padding: 16px;\n border: 1px solid #bbbbbb;\n max-width: 100%;\n border-radius: 8px;\n flex-wrap: wrap;\n @media (max-width: 768px) {\n display: grid;\n grid-template-columns: repeat(2, max-content);\n gap: ", ";\n }\n"], ["\n display: flex;\n gap: ", ";\n padding: 16px;\n border: 1px solid #bbbbbb;\n max-width: 100%;\n border-radius: 8px;\n flex-wrap: wrap;\n @media (max-width: 768px) {\n display: grid;\n grid-template-columns: repeat(2, max-content);\n gap: ", ";\n }\n"])), function (props) { var _a; return (_a = props.desktopGap) !== null && _a !== void 0 ? _a : '36px'; }, function (props) { var _a; return (_a = props.mobileGap) !== null && _a !== void 0 ? _a : '16px'; });
|
|
7309
7305
|
var Wrapper$6 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 16px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
|
|
7310
7306
|
var DesktopDivider = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n width: ", ";\n transform: scaleX(0.5);\n transform-origin: center;\n height: ", ";\n background-color: #5a5a5a;\n @media (max-width: 768px) {\n display: none;\n }\n"], ["\n width: ", ";\n transform: scaleX(0.5);\n transform-origin: center;\n height: ", ";\n background-color: #5a5a5a;\n @media (max-width: 768px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '2px'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '16px'; });
|
|
7311
7307
|
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18;
|
|
@@ -7315,7 +7311,7 @@ function IconsWithTitleList(_a) {
|
|
|
7315
7311
|
if (loading) {
|
|
7316
7312
|
return jsx$1(SkeletonBox, { height: skeletonHeight !== null && skeletonHeight !== void 0 ? skeletonHeight : '56px' }, void 0);
|
|
7317
7313
|
}
|
|
7318
|
-
return (jsx$1(Container$
|
|
7314
|
+
return (jsx$1(Container$18, __assign$1({ desktopGap: itemsGapDesktop, mobileGap: itemsGapMobile }, { children: list === null || list === void 0 ? void 0 : list.map(function (item, index) {
|
|
7319
7315
|
var _a, _b, _c, _d, _e, _f;
|
|
7320
7316
|
return (jsxs$1(Wrapper$6, { children: [jsx$1(IconsWithTitle, { iconName: (_a = item.iconName) !== null && _a !== void 0 ? _a : 'CircleSolidCheck', iconFolder: (_b = item.iconFolder) !== null && _b !== void 0 ? _b : 'Actions', iconTitle: item.text, backgroundColor: "none", iconColor: (_c = item.iconColor) !== null && _c !== void 0 ? _c : '#2F806A', iconSizeDesktop: (_d = item.iconSizeDesktop) !== null && _d !== void 0 ? _d : 1.2, iconSizeMobile: (_e = item.iconSizeMobile) !== null && _e !== void 0 ? _e : 1.2, withWrapper: false, iconTitleStyle: (_f = item.iconTitleStyle) !== null && _f !== void 0 ? _f : '{"textTransform": "none", "fontSize":"16px", "marginLeft":"8px"}' }, void 0), index !== list.length - 1 && (jsx$1(DesktopDivider, { width: dividerWidth, height: dividerHeight, "data-testid": "desktop-divider" }, void 0))] }, item.text));
|
|
7321
7317
|
}) }), void 0));
|
|
@@ -7365,7 +7361,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7365
7361
|
};
|
|
7366
7362
|
}
|
|
7367
7363
|
};
|
|
7368
|
-
var Container$
|
|
7364
|
+
var Container$17 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
7369
7365
|
var backgroundColor = _a.backgroundColor;
|
|
7370
7366
|
return backgroundColor;
|
|
7371
7367
|
}, function (_a) {
|
|
@@ -7406,7 +7402,7 @@ var IconButton = function (_a) {
|
|
|
7406
7402
|
var _b, _c;
|
|
7407
7403
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
|
|
7408
7404
|
var theme = useTheme();
|
|
7409
|
-
return (jsx$1(Container$
|
|
7405
|
+
return (jsx$1(Container$17, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
7410
7406
|
};
|
|
7411
7407
|
var templateObject_1$1I;
|
|
7412
7408
|
|
|
@@ -7470,7 +7466,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7470
7466
|
: ComponentSize.XSmall;
|
|
7471
7467
|
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
7472
7468
|
};
|
|
7473
|
-
return (jsxs$1(Container$
|
|
7469
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7474
7470
|
? finalPriceArray[0]
|
|
7475
7471
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7476
7472
|
};
|
|
@@ -7548,7 +7544,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7548
7544
|
});
|
|
7549
7545
|
});
|
|
7550
7546
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1G || (templateObject_1$1G = __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"])));
|
|
7551
|
-
var Container$
|
|
7547
|
+
var Container$16 = newStyled.a(templateObject_2$1k || (templateObject_2$1k = __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 &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\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\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7552
7548
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7553
7549
|
var Title$7 = newStyled.h2(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\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 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) {
|
|
7554
7550
|
var theme = _a.theme;
|
|
@@ -7710,12 +7706,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7710
7706
|
setIsLiked(function (prev) { return !prev; });
|
|
7711
7707
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7712
7708
|
};
|
|
7713
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7709
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$16, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!likeBtn && (jsx(LikeButton, { isLiked: isLiked, likes: likesCount, onClick: handleLikeClick, colors: {
|
|
7714
7710
|
background: {
|
|
7715
7711
|
active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
|
|
7716
7712
|
hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
|
|
7717
7713
|
},
|
|
7718
|
-
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$
|
|
7714
|
+
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$16, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), showDivider && (jsxs(Fragment, { children: [jsx(Divider, { theme: theme }, void 0), jsx(Spacing, { size: space }, void 0)] }, void 0)), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : priceAndReviewInOneLine && !ratingOnTop ? (jsxs(OneLineInfoWrapper, { children: [PriceLabelDisplay(), jsx(RatingDisplay, {}, void 0)] }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7719
7715
|
letterSpacing: '-0.05rem',
|
|
7720
7716
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && !priceAndReviewInOneLine && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7721
7717
|
e.preventDefault();
|
|
@@ -7736,7 +7732,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7736
7732
|
});
|
|
7737
7733
|
});
|
|
7738
7734
|
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
7739
|
-
var Container$
|
|
7735
|
+
var Container$15 = newStyled.a(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
7740
7736
|
var ProdCardContainer$3 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
7741
7737
|
var Title$6 = newStyled.p(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\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 font-size: 0.83rem;\n font-weight: normal;\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"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
7742
7738
|
var getStylesBySize$a = function (size) {
|
|
@@ -7818,9 +7814,9 @@ var ProductItemTK = function (_a) {
|
|
|
7818
7814
|
: undefined }, void 0));
|
|
7819
7815
|
};
|
|
7820
7816
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
7821
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7817
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick, style: {
|
|
7822
7818
|
cursor: 'pointer',
|
|
7823
|
-
} }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$3, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$
|
|
7819
|
+
} }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$3, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: function () {
|
|
7824
7820
|
if (!colorPicker.shouldStopCardClick) {
|
|
7825
7821
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7826
7822
|
}
|
|
@@ -7838,7 +7834,7 @@ var ProductItemTK = function (_a) {
|
|
|
7838
7834
|
if (colorPicker.shouldStopCardClick) {
|
|
7839
7835
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7840
7836
|
}
|
|
7841
|
-
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$
|
|
7837
|
+
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$15, { children: colorPicker.shouldStopCardClick ? jsx(Fragment, { children: colorPicker.component }, void 0) : null }, void 0), jsxs(Container$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: function () {
|
|
7842
7838
|
if (!colorPicker.shouldStopCardClick) {
|
|
7843
7839
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7844
7840
|
}
|
|
@@ -7848,10 +7844,10 @@ var ProductItemTK = function (_a) {
|
|
|
7848
7844
|
};
|
|
7849
7845
|
var templateObject_1$1F, templateObject_2$1j, templateObject_3$15, templateObject_4$T, templateObject_5$I, templateObject_6$B, templateObject_7$u, templateObject_8$n;
|
|
7850
7846
|
|
|
7851
|
-
var Container$
|
|
7847
|
+
var Container$14 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
7852
7848
|
function withProductGrid(ProductItemComponent, data) {
|
|
7853
7849
|
function WithProductGrid(props) {
|
|
7854
|
-
return (jsx$1(Container$
|
|
7850
|
+
return (jsx$1(Container$14, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7855
7851
|
}
|
|
7856
7852
|
/* istanbul ignore next */
|
|
7857
7853
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -7929,7 +7925,7 @@ var OutOfStock = function (_a) {
|
|
|
7929
7925
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7930
7926
|
};
|
|
7931
7927
|
|
|
7932
|
-
var Container$
|
|
7928
|
+
var Container$13 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7933
7929
|
var borderColor = _a.borderColor;
|
|
7934
7930
|
return borderColor;
|
|
7935
7931
|
}, function (_a) {
|
|
@@ -7941,7 +7937,7 @@ var PatternSelector = function (_a) {
|
|
|
7941
7937
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7942
7938
|
var theme = useTheme();
|
|
7943
7939
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7944
|
-
return (jsx$1(Container$
|
|
7940
|
+
return (jsx$1(Container$13, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7945
7941
|
};
|
|
7946
7942
|
var templateObject_1$1C, templateObject_2$1h;
|
|
7947
7943
|
|
|
@@ -8200,14 +8196,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
8200
8196
|
return jsx(BaseCTA, __assign$1({}, props, { css: getStyle(theme) }), void 0);
|
|
8201
8197
|
};
|
|
8202
8198
|
|
|
8203
|
-
var Container$
|
|
8199
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
8204
8200
|
var IconContainer$5 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
8205
8201
|
var Text$3 = newStyled.p(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8206
8202
|
var Details = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
8207
8203
|
var Note = function (_a) {
|
|
8208
8204
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
8209
8205
|
var theme = useTheme();
|
|
8210
|
-
return (jsxs$1(Container$
|
|
8206
|
+
return (jsxs$1(Container$12, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
8211
8207
|
};
|
|
8212
8208
|
var templateObject_1$1y, templateObject_2$1d, templateObject_3$12, templateObject_4$Q;
|
|
8213
8209
|
|
|
@@ -8481,12 +8477,12 @@ var SelectorSecondary = function (_a) {
|
|
|
8481
8477
|
var Title$4 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
8482
8478
|
var P$3 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
8483
8479
|
var ArrowContainer = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8484
|
-
var Container$
|
|
8480
|
+
var Container$11 = newStyled.div(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
8485
8481
|
var Accordion = function (_a) {
|
|
8486
8482
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
8487
8483
|
var theme = useTheme();
|
|
8488
8484
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8489
|
-
return (jsxs$1(Container$
|
|
8485
|
+
return (jsxs$1(Container$11, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8490
8486
|
};
|
|
8491
8487
|
var templateObject_1$1s, templateObject_2$17, templateObject_3$Z, templateObject_4$L;
|
|
8492
8488
|
|
|
@@ -8651,7 +8647,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8651
8647
|
};
|
|
8652
8648
|
|
|
8653
8649
|
var Wrapper$4 = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
8654
|
-
var Container$
|
|
8650
|
+
var Container$10 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
8655
8651
|
var FitGuarantee = function (_a) {
|
|
8656
8652
|
var _b;
|
|
8657
8653
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -8662,7 +8658,7 @@ var FitGuarantee = function (_a) {
|
|
|
8662
8658
|
console.error('Icon', iconName, 'not found');
|
|
8663
8659
|
return null;
|
|
8664
8660
|
}
|
|
8665
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
8661
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8666
8662
|
margin: '0.1rem 0',
|
|
8667
8663
|
width: '100%',
|
|
8668
8664
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -8671,7 +8667,7 @@ var FitGuarantee = function (_a) {
|
|
|
8671
8667
|
};
|
|
8672
8668
|
var templateObject_1$1p, templateObject_2$14;
|
|
8673
8669
|
|
|
8674
|
-
var Container
|
|
8670
|
+
var Container$$ = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
8675
8671
|
var P$2 = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
8676
8672
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8677
8673
|
border: 'none',
|
|
@@ -8685,7 +8681,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8685
8681
|
var FitPredictor = function (_a) {
|
|
8686
8682
|
var onClick = _a.onClick;
|
|
8687
8683
|
var theme = useTheme();
|
|
8688
|
-
return (jsxs(Container
|
|
8684
|
+
return (jsxs(Container$$, __assign$1({ theme: theme }, { children: [jsx(Container$$, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
8689
8685
|
};
|
|
8690
8686
|
var templateObject_1$1o, templateObject_2$13;
|
|
8691
8687
|
|
|
@@ -13025,7 +13021,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
13025
13021
|
|
|
13026
13022
|
var horizontalStyles = css(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
13027
13023
|
var verticalStyles = css(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
13028
|
-
var Container
|
|
13024
|
+
var Container$_ = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
13029
13025
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
13030
13026
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
13031
13027
|
}, function (_a) {
|
|
@@ -13069,7 +13065,7 @@ var ImagePreviewList = function (_a) {
|
|
|
13069
13065
|
var element = document.querySelector(".imageListContainer");
|
|
13070
13066
|
element.scrollBy(0, 200);
|
|
13071
13067
|
};
|
|
13072
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container
|
|
13068
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$_, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, adaptiveHeight: true, dots: false, slidesToShow: 4.2 }, { children: images.map(function (item, index) { return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) {
|
|
13073
13069
|
return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key));
|
|
13074
13070
|
})) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
13075
13071
|
};
|
|
@@ -14665,7 +14661,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14665
14661
|
afterZoomOut: PropTypes.func
|
|
14666
14662
|
} : {};
|
|
14667
14663
|
|
|
14668
|
-
var Container$
|
|
14664
|
+
var Container$Z = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: ", ";\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: ", ";\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
14669
14665
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14670
14666
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14671
14667
|
}, function (_a) {
|
|
@@ -14701,7 +14697,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14701
14697
|
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
14702
14698
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14703
14699
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14704
|
-
return (jsxs$1(Container$
|
|
14700
|
+
return (jsxs$1(Container$Z, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant, position: position }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
14705
14701
|
alt: content.alt,
|
|
14706
14702
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14707
14703
|
loading: 'eager',
|
|
@@ -14709,7 +14705,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14709
14705
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14710
14706
|
};
|
|
14711
14707
|
|
|
14712
|
-
var Container$
|
|
14708
|
+
var Container$Y = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: ", ";\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])), function (_a) {
|
|
14713
14709
|
var thumbnailPosition = _a.thumbnailPosition;
|
|
14714
14710
|
return thumbnailPosition === 'horizontal' ? '1fr' : 'minmax(6rem, max-content) 1fr';
|
|
14715
14711
|
});
|
|
@@ -14739,7 +14735,7 @@ var ProductGallery = function (_a) {
|
|
|
14739
14735
|
setActiveIndex(index);
|
|
14740
14736
|
};
|
|
14741
14737
|
var selectedImage = images[activeIndex];
|
|
14742
|
-
return (jsxs$1(Container$
|
|
14738
|
+
return (jsxs$1(Container$Y, __assign$1({ thumbnailPosition: thumbnailPosition }, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }), void 0));
|
|
14743
14739
|
};
|
|
14744
14740
|
|
|
14745
14741
|
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
@@ -14753,7 +14749,7 @@ var PaypalButton = function (_a) {
|
|
|
14753
14749
|
};
|
|
14754
14750
|
var templateObject_1$1i;
|
|
14755
14751
|
|
|
14756
|
-
var Container$
|
|
14752
|
+
var Container$X = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14757
14753
|
var ImageContainer$4 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14758
14754
|
var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14759
14755
|
var titlePosition = _a.titlePosition;
|
|
@@ -14763,7 +14759,7 @@ var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __ma
|
|
|
14763
14759
|
var ImageCardWithDescription = function (_a) {
|
|
14764
14760
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14765
14761
|
var isMobile = useWindowDimensions().isMobile;
|
|
14766
|
-
return (jsxs$1(Container$
|
|
14762
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14767
14763
|
};
|
|
14768
14764
|
var templateObject_1$1h, templateObject_2$10, templateObject_3$U;
|
|
14769
14765
|
|
|
@@ -14789,7 +14785,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14789
14785
|
return theme.colors.semantic.urgent.color;
|
|
14790
14786
|
return '';
|
|
14791
14787
|
};
|
|
14792
|
-
var Container$
|
|
14788
|
+
var Container$W = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14793
14789
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14794
14790
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14795
14791
|
});
|
|
@@ -14891,7 +14887,7 @@ var BaseInput = function (_a) {
|
|
|
14891
14887
|
}, [status]);
|
|
14892
14888
|
var hasValue = Boolean(value);
|
|
14893
14889
|
var errorMessage = customErrorMessage || (status === InputValidationType.Error && required);
|
|
14894
|
-
return (jsxs$1(Container$
|
|
14890
|
+
return (jsxs$1(Container$W, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14895
14891
|
onChange(event.target.value, event);
|
|
14896
14892
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
14897
14893
|
onChange('', { target: { value: '' } });
|
|
@@ -14912,7 +14908,7 @@ var Button$6 = function (_a) {
|
|
|
14912
14908
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14913
14909
|
};
|
|
14914
14910
|
|
|
14915
|
-
var Container$
|
|
14911
|
+
var Container$V = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14916
14912
|
var theme = _a.theme;
|
|
14917
14913
|
return theme.component.inputCustom.input.borderRadius;
|
|
14918
14914
|
});
|
|
@@ -14931,7 +14927,7 @@ var Custom = function (_a) {
|
|
|
14931
14927
|
text: text,
|
|
14932
14928
|
disabled: rest.disabled,
|
|
14933
14929
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14934
|
-
return (jsx$1(Container$
|
|
14930
|
+
return (jsx$1(Container$V, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14935
14931
|
};
|
|
14936
14932
|
var templateObject_1$1e, templateObject_2$Z;
|
|
14937
14933
|
|
|
@@ -14966,12 +14962,12 @@ var BasePlusButton = function (_a) {
|
|
|
14966
14962
|
};
|
|
14967
14963
|
var templateObject_1$1c;
|
|
14968
14964
|
|
|
14969
|
-
var Container$
|
|
14965
|
+
var Container$U = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14970
14966
|
var IconContainer$3 = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14971
14967
|
var BasePlusIcon = function (_a) {
|
|
14972
14968
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14973
14969
|
var theme = useTheme();
|
|
14974
|
-
return (jsx$1(Container$
|
|
14970
|
+
return (jsx$1(Container$U, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14975
14971
|
};
|
|
14976
14972
|
var templateObject_1$1b, templateObject_2$X;
|
|
14977
14973
|
|
|
@@ -15120,7 +15116,7 @@ var transformStyle = function (_a) {
|
|
|
15120
15116
|
return opened
|
|
15121
15117
|
? css(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
15122
15118
|
};
|
|
15123
|
-
var Container$
|
|
15119
|
+
var Container$T = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) {
|
|
15124
15120
|
return "".concat(props.maxFullScreen || props.countryRedirModalWithCoupon ? '0' : 'var(--radius-regular)');
|
|
15125
15121
|
}, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
15126
15122
|
var width = _a.width;
|
|
@@ -15139,7 +15135,7 @@ var Modal = function (_a) {
|
|
|
15139
15135
|
}
|
|
15140
15136
|
close();
|
|
15141
15137
|
};
|
|
15142
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
15138
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$T, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop, countryRedirModalWithCoupon: countryRedirModalWithCoupon }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
15143
15139
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
15144
15140
|
onDismiss();
|
|
15145
15141
|
} }, void 0)] }), void 0));
|
|
@@ -18990,7 +18986,7 @@ var BarContainer = newStyled.div({
|
|
|
18990
18986
|
padding: '0 16px',
|
|
18991
18987
|
position: 'relative',
|
|
18992
18988
|
});
|
|
18993
|
-
var Container$
|
|
18989
|
+
var Container$S = newStyled.div(function (_a) {
|
|
18994
18990
|
var backgroundColor = _a.backgroundColor;
|
|
18995
18991
|
return ({
|
|
18996
18992
|
width: '475px',
|
|
@@ -19032,11 +19028,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
19032
19028
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
19033
19029
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
19034
19030
|
};
|
|
19035
|
-
return (jsxs$1(Container$
|
|
19031
|
+
return (jsxs$1(Container$S, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
19036
19032
|
};
|
|
19037
19033
|
var templateObject_1$19, templateObject_2$V;
|
|
19038
19034
|
|
|
19039
|
-
var Container$
|
|
19035
|
+
var Container$R = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
19040
19036
|
var theme = _a.theme;
|
|
19041
19037
|
return theme.component.orderBar.backgroundColor;
|
|
19042
19038
|
});
|
|
@@ -19044,11 +19040,11 @@ var H1 = newStyled.h1(templateObject_2$U || (templateObject_2$U = __makeTemplate
|
|
|
19044
19040
|
var OrderBar = function (_a) {
|
|
19045
19041
|
var message = _a.message, color = _a.color;
|
|
19046
19042
|
var theme = useTheme();
|
|
19047
|
-
return (jsxs$1(Container$
|
|
19043
|
+
return (jsxs$1(Container$R, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
19048
19044
|
};
|
|
19049
19045
|
var templateObject_1$18, templateObject_2$U;
|
|
19050
19046
|
|
|
19051
|
-
var Container$
|
|
19047
|
+
var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
19052
19048
|
var Card$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
19053
19049
|
var Tag$1 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
19054
19050
|
var Label$3 = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -19058,7 +19054,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o =
|
|
|
19058
19054
|
var DiscountContainer = newStyled.div(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
19059
19055
|
var PackSelector = function (_a) {
|
|
19060
19056
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
19061
|
-
return (jsx$1(Container$
|
|
19057
|
+
return (jsx$1(Container$Q, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
19062
19058
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
19063
19059
|
}) }), void 0));
|
|
19064
19060
|
};
|
|
@@ -19087,7 +19083,7 @@ var PackCard = function (_a) {
|
|
|
19087
19083
|
};
|
|
19088
19084
|
var templateObject_1$17, templateObject_2$T, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$r, templateObject_7$o, templateObject_8$i;
|
|
19089
19085
|
|
|
19090
|
-
var Container$
|
|
19086
|
+
var Container$P = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
19091
19087
|
var IconContainer$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
19092
19088
|
var PageNumbersContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
19093
19089
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -19155,7 +19151,7 @@ var Pagination = function (_a) {
|
|
|
19155
19151
|
}
|
|
19156
19152
|
return pages;
|
|
19157
19153
|
}, [from, page, showReducedPages, to]);
|
|
19158
|
-
return (jsxs$1(Container$
|
|
19154
|
+
return (jsxs$1(Container$P, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19159
19155
|
};
|
|
19160
19156
|
|
|
19161
19157
|
var PaginatorBlog = function (_a) {
|
|
@@ -19169,12 +19165,12 @@ var PaginatorBlog = function (_a) {
|
|
|
19169
19165
|
setPage(page);
|
|
19170
19166
|
onChange(page);
|
|
19171
19167
|
};
|
|
19172
|
-
return (jsxs$1(Container$
|
|
19168
|
+
return (jsxs$1(Container$P, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
19173
19169
|
? theme.colors.shades['white'].color
|
|
19174
19170
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19175
19171
|
};
|
|
19176
19172
|
|
|
19177
|
-
var Container$
|
|
19173
|
+
var Container$O = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
19178
19174
|
var width = _a.width;
|
|
19179
19175
|
return width;
|
|
19180
19176
|
}, function (_a) {
|
|
@@ -19190,11 +19186,11 @@ var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __
|
|
|
19190
19186
|
var PaymentMethod = function (_a) {
|
|
19191
19187
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
19192
19188
|
var theme = useTheme();
|
|
19193
|
-
return (jsx$1(Container$
|
|
19189
|
+
return (jsx$1(Container$O, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
19194
19190
|
};
|
|
19195
19191
|
var templateObject_1$15;
|
|
19196
19192
|
|
|
19197
|
-
var Container$
|
|
19193
|
+
var Container$N = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
19198
19194
|
var IMAGE_WIDTH$1 = '63px';
|
|
19199
19195
|
var ImageContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH$1);
|
|
19200
19196
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
@@ -19239,7 +19235,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19239
19235
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19240
19236
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
19241
19237
|
var theme = useTheme();
|
|
19242
|
-
return (jsxs$1(Container$
|
|
19238
|
+
return (jsxs$1(Container$N, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
19243
19239
|
};
|
|
19244
19240
|
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$q, templateObject_7$n;
|
|
19245
19241
|
|
|
@@ -19284,7 +19280,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19284
19280
|
position: 'absolute',
|
|
19285
19281
|
});
|
|
19286
19282
|
});
|
|
19287
|
-
var Container$
|
|
19283
|
+
var Container$M = newStyled.div(function (_a) {
|
|
19288
19284
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19289
19285
|
return ({
|
|
19290
19286
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19298,11 +19294,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19298
19294
|
var ProgressBar = function (_a) {
|
|
19299
19295
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
19300
19296
|
var theme = useTheme();
|
|
19301
|
-
return (jsxs$1(Container$
|
|
19297
|
+
return (jsxs$1(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19302
19298
|
};
|
|
19303
19299
|
var templateObject_1$13;
|
|
19304
19300
|
|
|
19305
|
-
var Container$
|
|
19301
|
+
var Container$L = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
19306
19302
|
var Item$1 = newStyled.span(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
19307
19303
|
var Number$1 = newStyled(Item$1)(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19308
19304
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -19328,7 +19324,7 @@ var QuantityPicker = function (_a) {
|
|
|
19328
19324
|
return clamp(value);
|
|
19329
19325
|
});
|
|
19330
19326
|
}, [value, clamp]);
|
|
19331
|
-
return (jsxs$1(Container$
|
|
19327
|
+
return (jsxs$1(Container$L, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19332
19328
|
};
|
|
19333
19329
|
var templateObject_1$12, templateObject_2$Q, templateObject_3$N, templateObject_4$C;
|
|
19334
19330
|
|
|
@@ -19400,7 +19396,7 @@ var ContainerStyles$1 = {
|
|
|
19400
19396
|
};
|
|
19401
19397
|
|
|
19402
19398
|
var Wrapper$3 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19403
|
-
var Container$
|
|
19399
|
+
var Container$K = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19404
19400
|
var Input$2 = newStyled.input(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19405
19401
|
var disabled = _a.disabled;
|
|
19406
19402
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -19417,32 +19413,10 @@ var RadioPrimary = function (_a) {
|
|
|
19417
19413
|
var value = event.currentTarget.value;
|
|
19418
19414
|
onChange({ value: value, label: label });
|
|
19419
19415
|
};
|
|
19420
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
19416
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$K, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { 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$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19421
19417
|
};
|
|
19422
19418
|
var templateObject_1$11, templateObject_2$P, templateObject_3$M;
|
|
19423
19419
|
|
|
19424
|
-
var Container$K = newStyled.div(function (_a) {
|
|
19425
|
-
var $horizontal = _a.$horizontal;
|
|
19426
|
-
var pseudoStyles = {
|
|
19427
|
-
content: "' '",
|
|
19428
|
-
position: 'absolute',
|
|
19429
|
-
top: '11px',
|
|
19430
|
-
left: 25,
|
|
19431
|
-
width: 'calc(100% - 50px)',
|
|
19432
|
-
height: 1,
|
|
19433
|
-
backgroundColor: 'var(--colors-shades-250-color)',
|
|
19434
|
-
zIndex: -1,
|
|
19435
|
-
};
|
|
19436
|
-
return {
|
|
19437
|
-
display: 'flex',
|
|
19438
|
-
flexDirection: $horizontal ? 'row' : 'column',
|
|
19439
|
-
justifyContent: 'space-between',
|
|
19440
|
-
width: '100%',
|
|
19441
|
-
position: 'relative',
|
|
19442
|
-
'&:after': $horizontal ? pseudoStyles : {},
|
|
19443
|
-
};
|
|
19444
|
-
});
|
|
19445
|
-
|
|
19446
19420
|
var RadioGroupInput = function (_a) {
|
|
19447
19421
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, horizontal = _a.horizontal;
|
|
19448
19422
|
var _e = useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
|
|
@@ -19450,7 +19424,7 @@ var RadioGroupInput = function (_a) {
|
|
|
19450
19424
|
setSelectedInput(selected);
|
|
19451
19425
|
onChange(selected);
|
|
19452
19426
|
};
|
|
19453
|
-
return (jsx$1(
|
|
19427
|
+
return (jsx$1("div", __assign$1({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
|
|
19454
19428
|
return (jsx$1(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", horizontal: horizontal, style: style }, index));
|
|
19455
19429
|
}) }), void 0));
|
|
19456
19430
|
};
|