@trafilea/afrodita-components 6.57.4 → 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 +125 -151
- package/build/index.esm.js.map +1 -1
- package/build/index.js +125 -151
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3223,7 +3223,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3223
3223
|
};
|
|
3224
3224
|
}
|
|
3225
3225
|
};
|
|
3226
|
-
var Container$
|
|
3226
|
+
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) {
|
|
3227
3227
|
var backgroundColor = _a.backgroundColor;
|
|
3228
3228
|
return backgroundColor;
|
|
3229
3229
|
}, function (_a) {
|
|
@@ -3260,7 +3260,7 @@ var H3$2 = newStyled.h3(templateObject_2$1W || (templateObject_2$1W = __makeTemp
|
|
|
3260
3260
|
var ClubOfferTag = function (_a) {
|
|
3261
3261
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
3262
3262
|
var theme = useTheme();
|
|
3263
|
-
return (jsxRuntime.jsx(Container$
|
|
3263
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
3264
3264
|
};
|
|
3265
3265
|
var templateObject_1$2G, templateObject_2$1W;
|
|
3266
3266
|
|
|
@@ -3293,7 +3293,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3293
3293
|
};
|
|
3294
3294
|
}
|
|
3295
3295
|
};
|
|
3296
|
-
var Container$
|
|
3296
|
+
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) {
|
|
3297
3297
|
var backgroundColor = _a.backgroundColor;
|
|
3298
3298
|
return backgroundColor;
|
|
3299
3299
|
}, function (_a) {
|
|
@@ -3330,7 +3330,7 @@ var H3$1 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __makeTemp
|
|
|
3330
3330
|
var DiscountTag$4 = function (_a) {
|
|
3331
3331
|
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 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3332
3332
|
var theme = useTheme();
|
|
3333
|
-
return (jsxRuntime.jsx(Container$
|
|
3333
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
3334
3334
|
};
|
|
3335
3335
|
var templateObject_1$2F, templateObject_2$1V;
|
|
3336
3336
|
|
|
@@ -3401,7 +3401,7 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
3401
3401
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
3402
3402
|
};
|
|
3403
3403
|
|
|
3404
|
-
var Container$
|
|
3404
|
+
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"])));
|
|
3405
3405
|
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) {
|
|
3406
3406
|
var weight = _a.weight;
|
|
3407
3407
|
return (weight ? weight : '400');
|
|
@@ -3504,7 +3504,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3504
3504
|
: exports.ComponentSize.XSmall;
|
|
3505
3505
|
return (jsxRuntime.jsx(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));
|
|
3506
3506
|
};
|
|
3507
|
-
return (jsxRuntime.jsxs(Container$
|
|
3507
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(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)) : (jsxRuntime.jsxs(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3508
3508
|
};
|
|
3509
3509
|
|
|
3510
3510
|
var useOnClickOutside = function (ref, handler) {
|
|
@@ -3598,7 +3598,7 @@ var getArrowStyles = function (position, borderColor, backgroundColor) {
|
|
|
3598
3598
|
case exports.ComponentPosition.BottomLeft:
|
|
3599
3599
|
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left: 171px;\n margin-top: -9px;\n border: 10px solid transparent;\n border-top: 0;\n }\n \n &::before {\n border-bottom: 10px solid ".concat(borderColor, ";\n margin-top: -10px;\n }\n &::after {\n border-bottom: 10px solid ").concat(backgroundColor, ";\n z-index: 999;\n }");
|
|
3600
3600
|
case exports.ComponentPosition.BottomRight:
|
|
3601
|
-
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 2%;\n left: 28px;\n margin-top: -9px;\n border: 10px solid transparent;\n border-top: 0;\n @media (max-width: 768px) {\n left: 10px;\n }\n }\n \n &::before {\n border-bottom: 10px solid ".concat(borderColor, ";\n margin-top: -10px;\n }\n &::after {\n border-bottom: 10px solid ").concat(backgroundColor, ";\n z-index:
|
|
3601
|
+
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 2%;\n left: 28px;\n margin-top: -9px;\n border: 10px solid transparent;\n border-top: 0;\n @media (max-width: 768px) {\n left: 10px;\n }\n }\n \n &::before {\n border-bottom: 10px solid ".concat(borderColor, ";\n margin-top: -10px;\n }\n &::after {\n border-bottom: 10px solid ").concat(backgroundColor, ";\n z-index: 40;\n }");
|
|
3602
3602
|
case exports.ComponentPosition.Left:
|
|
3603
3603
|
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 50%;\n left: 100%;\n margin-top: -10px;\n border: 10px solid transparent;\n border-right: 0;s\n border-left: 10px solid transparent;\n margin-left: -1px;\n }\n \n &::before {\n border-left: 10px solid ".concat(borderColor, ";\n \n }\n &::after {\n border-left: 10px solid ").concat(backgroundColor, ";\n z-index: 999;\n }");
|
|
3604
3604
|
case exports.ComponentPosition.Right:
|
|
@@ -3796,7 +3796,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3796
3796
|
var savetoString = saveto.toFixed(2);
|
|
3797
3797
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price$1, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3798
3798
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3799
|
-
return (jsxRuntime.jsxs(Container$
|
|
3799
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [tooltipText && (jsxRuntime.jsx(TooltipContainer$1, __assign$1({ "data-testid": "tooltip-container" }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ showCloseIcon: true, withArrow: true, content: {
|
|
3800
3800
|
text: tooltipText,
|
|
3801
3801
|
}, position: tooltipPosition !== null && tooltipPosition !== void 0 ? tooltipPosition : exports.ComponentPosition.BottomRight, closeBtnSize: 0.7, "data-testid": "tooltip" }, { children: jsxRuntime.jsx(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 && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3802
3802
|
? finalPriceArray[0]
|
|
@@ -3868,7 +3868,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3868
3868
|
return null;
|
|
3869
3869
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$2(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3870
3870
|
};
|
|
3871
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
3871
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1y, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1y, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3872
3872
|
marginTop: '-5px',
|
|
3873
3873
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3874
3874
|
marginTop: '-6px',
|
|
@@ -3886,7 +3886,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3886
3886
|
};
|
|
3887
3887
|
var templateObject_1$2B, templateObject_2$1S, templateObject_3$1s;
|
|
3888
3888
|
|
|
3889
|
-
var Container$
|
|
3889
|
+
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"])));
|
|
3890
3890
|
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) {
|
|
3891
3891
|
var weight = _a.weight;
|
|
3892
3892
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
@@ -3921,7 +3921,7 @@ var PriceLabelV5 = function (_a) {
|
|
|
3921
3921
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3922
3922
|
weight: 700,
|
|
3923
3923
|
};
|
|
3924
|
-
return (jsxRuntime.jsx(Container$
|
|
3924
|
+
return (jsxRuntime.jsx(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsxRuntime.jsx(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3925
3925
|
};
|
|
3926
3926
|
|
|
3927
3927
|
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"])));
|
|
@@ -3947,7 +3947,7 @@ var PriceLabel = function (_a) {
|
|
|
3947
3947
|
};
|
|
3948
3948
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price$1, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3949
3949
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3950
|
-
return (jsxRuntime.jsxs(Container$
|
|
3950
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3951
3951
|
marginTop: '-5px',
|
|
3952
3952
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3953
3953
|
marginTop: '-6px',
|
|
@@ -3981,7 +3981,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3981
3981
|
var finalPriceString = finalPriceArray[0]
|
|
3982
3982
|
? finalPriceArray[0]
|
|
3983
3983
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3984
|
-
return (jsxRuntime.jsxs(Container$
|
|
3984
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3985
3985
|
};
|
|
3986
3986
|
var templateObject_1$2y;
|
|
3987
3987
|
|
|
@@ -4002,7 +4002,7 @@ var HorizontalDivider = newStyled.div(templateObject_1$2w || (templateObject_1$2
|
|
|
4002
4002
|
});
|
|
4003
4003
|
var templateObject_1$2w;
|
|
4004
4004
|
|
|
4005
|
-
var Container$
|
|
4005
|
+
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) {
|
|
4006
4006
|
var height = _a.height;
|
|
4007
4007
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
4008
4008
|
}, function (_a) {
|
|
@@ -4027,7 +4027,7 @@ var Container$1x = newStyled.div(templateObject_1$2v || (templateObject_1$2v = _
|
|
|
4027
4027
|
var SkeletonBox = function (_a) {
|
|
4028
4028
|
var width = _a.width, height = _a.height;
|
|
4029
4029
|
var theme = useTheme();
|
|
4030
|
-
return jsxRuntime.jsx(Container$
|
|
4030
|
+
return jsxRuntime.jsx(Container$1w, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
4031
4031
|
};
|
|
4032
4032
|
var templateObject_1$2v;
|
|
4033
4033
|
|
|
@@ -5301,7 +5301,7 @@ var DEFAULTS = {
|
|
|
5301
5301
|
};
|
|
5302
5302
|
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;
|
|
5303
5303
|
|
|
5304
|
-
var Container$
|
|
5304
|
+
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"])));
|
|
5305
5305
|
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"])));
|
|
5306
5306
|
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"])));
|
|
5307
5307
|
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"])));
|
|
@@ -5309,7 +5309,7 @@ var Check$1 = newStyled.div(templateObject_5$R || (templateObject_5$R = __makeTe
|
|
|
5309
5309
|
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"])));
|
|
5310
5310
|
var PackSelectorV2 = function (_a) {
|
|
5311
5311
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5312
|
-
return (jsxRuntime.jsx(Container$
|
|
5312
|
+
return (jsxRuntime.jsx(Container$1v, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5313
5313
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5314
5314
|
}) }), void 0));
|
|
5315
5315
|
};
|
|
@@ -5333,23 +5333,23 @@ var PackCard$1 = function (_a) {
|
|
|
5333
5333
|
};
|
|
5334
5334
|
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$15, templateObject_5$R, templateObject_6$I;
|
|
5335
5335
|
|
|
5336
|
-
var Container$
|
|
5336
|
+
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"])));
|
|
5337
5337
|
var DropContainer = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5338
5338
|
var DropList = function (_a) {
|
|
5339
5339
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5340
|
-
return (jsxRuntime.jsx(Container$
|
|
5340
|
+
return (jsxRuntime.jsx(Container$1u, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5341
5341
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5342
5342
|
}) }, void 0));
|
|
5343
5343
|
};
|
|
5344
5344
|
var templateObject_1$2p, templateObject_2$1L;
|
|
5345
5345
|
|
|
5346
5346
|
var DROPS_TOTAL = 5;
|
|
5347
|
-
var Container$
|
|
5347
|
+
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"])));
|
|
5348
5348
|
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"])));
|
|
5349
5349
|
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"])));
|
|
5350
5350
|
var AbsorbencyLevel = function (_a) {
|
|
5351
5351
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5352
|
-
return (jsxRuntime.jsxs(Container$
|
|
5352
|
+
return (jsxRuntime.jsxs(Container$1t, { children: [jsxRuntime.jsx(Title$a, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5353
5353
|
};
|
|
5354
5354
|
var templateObject_1$2o, templateObject_2$1K, templateObject_3$1o;
|
|
5355
5355
|
|
|
@@ -5453,7 +5453,7 @@ var Accordion$1 = function (_a) {
|
|
|
5453
5453
|
};
|
|
5454
5454
|
var templateObject_1$2n;
|
|
5455
5455
|
|
|
5456
|
-
var Container$
|
|
5456
|
+
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"])));
|
|
5457
5457
|
var AccordionOptions = function (_a) {
|
|
5458
5458
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5459
5459
|
var _b = React$2.useState({
|
|
@@ -5466,7 +5466,7 @@ var AccordionOptions = function (_a) {
|
|
|
5466
5466
|
}
|
|
5467
5467
|
return false;
|
|
5468
5468
|
};
|
|
5469
|
-
return (jsxRuntime.jsx(Container$
|
|
5469
|
+
return (jsxRuntime.jsx(Container$1s, { children: accordions.map(function (accordion, index) {
|
|
5470
5470
|
var forceOpenValue = getForceOpen(index);
|
|
5471
5471
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5472
5472
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5694,7 +5694,7 @@ var Bold = newStyled.span(templateObject_1$2l || (templateObject_1$2l = __makeTe
|
|
|
5694
5694
|
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"])));
|
|
5695
5695
|
var templateObject_1$2l, templateObject_2$1J;
|
|
5696
5696
|
|
|
5697
|
-
var Container$
|
|
5697
|
+
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) {
|
|
5698
5698
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5699
5699
|
return width;
|
|
5700
5700
|
}, function (_a) {
|
|
@@ -5710,7 +5710,7 @@ var templateObject_1$2k, templateObject_2$1I, templateObject_3$1n, templateObjec
|
|
|
5710
5710
|
var CouponCard = function (_a) {
|
|
5711
5711
|
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;
|
|
5712
5712
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5713
|
-
return (jsxRuntime.jsxs(Container$
|
|
5713
|
+
return (jsxRuntime.jsxs(Container$1r, __assign$1({ height: height, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Large, onClick: function () {
|
|
5714
5714
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5715
5715
|
setShowCoupon(function (prev) { return !prev; });
|
|
5716
5716
|
} }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
|
|
@@ -6053,7 +6053,7 @@ var CustomCheckboxStyles = {
|
|
|
6053
6053
|
},
|
|
6054
6054
|
};
|
|
6055
6055
|
|
|
6056
|
-
var Container$
|
|
6056
|
+
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"])));
|
|
6057
6057
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6058
6058
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6059
6059
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -6078,7 +6078,7 @@ var Checkbox = function (_a) {
|
|
|
6078
6078
|
}
|
|
6079
6079
|
onChange(e.target.checked);
|
|
6080
6080
|
};
|
|
6081
|
-
return (jsxRuntime.jsxs(Container$
|
|
6081
|
+
return (jsxRuntime.jsxs(Container$1q, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && (jsxRuntime.jsx(Icon.Actions.Check, { fill: text === 'White'
|
|
6082
6082
|
? theme.colors.shades['black'].color
|
|
6083
6083
|
: theme.colors.shades['white'].color }, void 0)) }), void 0), jsxRuntime.jsx(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));
|
|
6084
6084
|
};
|
|
@@ -6131,7 +6131,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
6131
6131
|
Option: BaseDropdownOption,
|
|
6132
6132
|
});
|
|
6133
6133
|
|
|
6134
|
-
var Container$
|
|
6134
|
+
var Container$1p = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject([""], [""])));
|
|
6135
6135
|
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"])));
|
|
6136
6136
|
var SelectedOption = newStyled.span(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
6137
6137
|
var fontWeight = _a.fontWeight;
|
|
@@ -6166,7 +6166,7 @@ function SimpleDropdown(_a) {
|
|
|
6166
6166
|
}
|
|
6167
6167
|
setSelectedValue(value);
|
|
6168
6168
|
}, [value, options, initialValue]);
|
|
6169
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
6169
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1p : React$2.Fragment;
|
|
6170
6170
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(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) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
6171
6171
|
}
|
|
6172
6172
|
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m;
|
|
@@ -6233,18 +6233,14 @@ var ContainerStyles$2 = {
|
|
|
6233
6233
|
});
|
|
6234
6234
|
},
|
|
6235
6235
|
};
|
|
6236
|
-
var Wrapper$7 = newStyled.div(function (
|
|
6237
|
-
var $horizontal = _a.$horizontal;
|
|
6236
|
+
var Wrapper$7 = newStyled.div(function () {
|
|
6238
6237
|
return {
|
|
6239
6238
|
display: 'flex',
|
|
6240
|
-
|
|
6241
|
-
alignItems: $horizontal ? 'flex-start' : 'center',
|
|
6242
|
-
justifyContent: $horizontal ? 'space-between' : 'flex-start',
|
|
6243
|
-
width: 'auto',
|
|
6239
|
+
alignItems: 'center',
|
|
6244
6240
|
};
|
|
6245
6241
|
});
|
|
6246
|
-
var Container$
|
|
6247
|
-
var HorizontalContainer = newStyled(Container$
|
|
6242
|
+
var Container$1o = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
6243
|
+
var HorizontalContainer = newStyled(Container$1o)({
|
|
6248
6244
|
alignSelf: 'center',
|
|
6249
6245
|
});
|
|
6250
6246
|
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) {
|
|
@@ -6281,7 +6277,7 @@ var RadioInput = function (_a) {
|
|
|
6281
6277
|
var value = event.currentTarget.value;
|
|
6282
6278
|
onChange({ value: value, label: label });
|
|
6283
6279
|
};
|
|
6284
|
-
var InputContainer = horizontal ? HorizontalContainer : Container$
|
|
6280
|
+
var InputContainer = horizontal ? HorizontalContainer : Container$1o;
|
|
6285
6281
|
return (jsxRuntime.jsxs(Wrapper$7, __assign$1({ "aria-orientation": horizontal ? 'horizontal' : 'vertical', "$horizontal": horizontal }, { children: [jsxRuntime.jsxs(InputContainer, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }), void 0));
|
|
6286
6282
|
};
|
|
6287
6283
|
|
|
@@ -6337,7 +6333,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6337
6333
|
var selected = _a.selected, theme = _a.theme;
|
|
6338
6334
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6339
6335
|
});
|
|
6340
|
-
var Container$
|
|
6336
|
+
var Container$1n = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6341
6337
|
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;
|
|
6342
6338
|
|
|
6343
6339
|
var radioIds$3 = {
|
|
@@ -6388,7 +6384,7 @@ var Autoship = function (_a) {
|
|
|
6388
6384
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6389
6385
|
};
|
|
6390
6386
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6391
|
-
return (jsxRuntime.jsxs(Container$
|
|
6387
|
+
return (jsxRuntime.jsxs(Container$1n, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(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: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$4, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$3.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$5, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$3.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$5, __assign$1({ onClick: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$4, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$3.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$4, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$4, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$3.autoship.id === radioCheck.id
|
|
6392
6388
|
? benefitsColor.selected
|
|
6393
6389
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$4, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$4, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6394
6390
|
};
|
|
@@ -6449,7 +6445,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6449
6445
|
var selected = _a.selected, theme = _a.theme;
|
|
6450
6446
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6451
6447
|
});
|
|
6452
|
-
var Container$
|
|
6448
|
+
var Container$1m = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6453
6449
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6454
6450
|
var theme = _a.theme;
|
|
6455
6451
|
return theme.component.autoship.tooltip.margin;
|
|
@@ -6515,7 +6511,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6515
6511
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6516
6512
|
};
|
|
6517
6513
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6518
|
-
return (jsxRuntime.jsxs(Container$
|
|
6514
|
+
return (jsxRuntime.jsxs(Container$1m, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(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: [jsxRuntime.jsx(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), jsxRuntime.jsxs(SubscriptionHeader$4, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper$1, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [hasInfoBulletIcons && (jsxRuntime.jsx(BulletIconWrapper, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6519
6515
|
? benefitsColor.selected
|
|
6520
6516
|
: benefitsColor.base }, void 0) }, void 0)), jsxRuntime.jsx(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(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: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6521
6517
|
};
|
|
@@ -6558,7 +6554,7 @@ var ResultFeedback = function (_a) {
|
|
|
6558
6554
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6559
6555
|
};
|
|
6560
6556
|
|
|
6561
|
-
var Container$
|
|
6557
|
+
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; });
|
|
6562
6558
|
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"])));
|
|
6563
6559
|
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; });
|
|
6564
6560
|
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) {
|
|
@@ -6646,7 +6642,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6646
6642
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6647
6643
|
var infoText = buildInfoText(name, age, months);
|
|
6648
6644
|
var Component = componentByVariant[variant];
|
|
6649
|
-
return (jsxRuntime.jsxs(Container$
|
|
6645
|
+
return (jsxRuntime.jsxs(Container$1l, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6650
6646
|
};
|
|
6651
6647
|
|
|
6652
6648
|
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) {
|
|
@@ -6669,7 +6665,7 @@ var CardBody$1 = function (_a) {
|
|
|
6669
6665
|
};
|
|
6670
6666
|
var templateObject_1$28;
|
|
6671
6667
|
|
|
6672
|
-
var Container$
|
|
6668
|
+
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) {
|
|
6673
6669
|
var flex = _a.flex;
|
|
6674
6670
|
return flex &&
|
|
6675
6671
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6684,7 +6680,7 @@ var Container$1l = newStyled.div(templateObject_1$27 || (templateObject_1$27 = _
|
|
|
6684
6680
|
var Card$2 = function (_a) {
|
|
6685
6681
|
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;
|
|
6686
6682
|
var theme = useTheme();
|
|
6687
|
-
return (jsxRuntime.jsx(Container$
|
|
6683
|
+
return (jsxRuntime.jsx(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));
|
|
6688
6684
|
};
|
|
6689
6685
|
var Card$3 = Object.assign(Card$2, {
|
|
6690
6686
|
Header: CardHeader,
|
|
@@ -6716,14 +6712,14 @@ var Motivator = function (_a) {
|
|
|
6716
6712
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: true, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsx(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: typeof content === 'string' ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: content }), void 0)) : (content) }), void 0) }), void 0));
|
|
6717
6713
|
};
|
|
6718
6714
|
|
|
6719
|
-
var Container$
|
|
6715
|
+
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"])));
|
|
6720
6716
|
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; });
|
|
6721
6717
|
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; });
|
|
6722
6718
|
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"])));
|
|
6723
6719
|
var Simple = function (_a) {
|
|
6724
6720
|
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;
|
|
6725
6721
|
var theme = useTheme();
|
|
6726
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6722
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1j, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6727
6723
|
};
|
|
6728
6724
|
var templateObject_1$24, templateObject_2$1y, templateObject_3$1f, templateObject_4$_;
|
|
6729
6725
|
|
|
@@ -6733,7 +6729,7 @@ var Bundle = {
|
|
|
6733
6729
|
Motivator: Motivator,
|
|
6734
6730
|
};
|
|
6735
6731
|
|
|
6736
|
-
var Container$
|
|
6732
|
+
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) {
|
|
6737
6733
|
var displayBNPL = _a.displayBNPL;
|
|
6738
6734
|
return (displayBNPL ? 'flex' : 'none');
|
|
6739
6735
|
});
|
|
@@ -6758,7 +6754,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6758
6754
|
else {
|
|
6759
6755
|
dynamicText = "or 4 interest-free payments of ";
|
|
6760
6756
|
}
|
|
6761
|
-
return (jsxRuntime.jsx(Container$
|
|
6757
|
+
return (jsxRuntime.jsx(Container$1i, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxRuntime.jsxs("div", { children: [dynamicText, jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6762
6758
|
display: 'inline',
|
|
6763
6759
|
fontSize: fontSize,
|
|
6764
6760
|
paddingLeft: '0.25rem',
|
|
@@ -6784,11 +6780,11 @@ var OfferBanner = function (_a) {
|
|
|
6784
6780
|
};
|
|
6785
6781
|
var templateObject_1$22;
|
|
6786
6782
|
|
|
6787
|
-
var Container$
|
|
6783
|
+
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"); });
|
|
6788
6784
|
var CloseButton$1 = function (_a) {
|
|
6789
6785
|
var onClick = _a.onClick, size = _a.size;
|
|
6790
6786
|
var theme = useTheme();
|
|
6791
|
-
return (jsxRuntime.jsx(Container$
|
|
6787
|
+
return (jsxRuntime.jsx(Container$1h, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6792
6788
|
};
|
|
6793
6789
|
var templateObject_1$21;
|
|
6794
6790
|
|
|
@@ -6816,13 +6812,13 @@ var Title$8 = function (_a) {
|
|
|
6816
6812
|
};
|
|
6817
6813
|
var templateObject_1$1_;
|
|
6818
6814
|
|
|
6819
|
-
var Container$
|
|
6815
|
+
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"); });
|
|
6820
6816
|
var templateObject_1$1Z;
|
|
6821
6817
|
|
|
6822
6818
|
var TrashButton = function (_a) {
|
|
6823
6819
|
var onClick = _a.onClick, size = _a.size;
|
|
6824
6820
|
useTheme();
|
|
6825
|
-
return (jsxRuntime.jsx(Container$
|
|
6821
|
+
return (jsxRuntime.jsx(Container$1g, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Trash, { width: size, height: size, fill: "#292929" }, void 0) }), void 0));
|
|
6826
6822
|
};
|
|
6827
6823
|
|
|
6828
6824
|
var CartProductItem = {
|
|
@@ -6834,8 +6830,8 @@ var CartProductItem = {
|
|
|
6834
6830
|
TrashButton: TrashButton,
|
|
6835
6831
|
};
|
|
6836
6832
|
|
|
6837
|
-
var Container$
|
|
6838
|
-
var MobileContainer = newStyled(Container$
|
|
6833
|
+
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"])));
|
|
6834
|
+
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"])));
|
|
6839
6835
|
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"])));
|
|
6840
6836
|
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"])));
|
|
6841
6837
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6845,7 +6841,7 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (t
|
|
|
6845
6841
|
var ClubPriceLabel = function (_a) {
|
|
6846
6842
|
var clubPrice = _a.clubPrice;
|
|
6847
6843
|
var isMobile = useWindowDimensions().isMobile;
|
|
6848
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$
|
|
6844
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$1f, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6849
6845
|
};
|
|
6850
6846
|
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;
|
|
6851
6847
|
|
|
@@ -6855,7 +6851,7 @@ var Spacing = function (_a) {
|
|
|
6855
6851
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6856
6852
|
};
|
|
6857
6853
|
|
|
6858
|
-
var Container$
|
|
6854
|
+
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"])));
|
|
6859
6855
|
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"])));
|
|
6860
6856
|
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"])));
|
|
6861
6857
|
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) {
|
|
@@ -6867,7 +6863,7 @@ var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __makeT
|
|
|
6867
6863
|
});
|
|
6868
6864
|
var StrengthBars = function (_a) {
|
|
6869
6865
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6870
|
-
return (jsxRuntime.jsxs(Container$
|
|
6866
|
+
return (jsxRuntime.jsxs(Container$1e, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6871
6867
|
};
|
|
6872
6868
|
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Y;
|
|
6873
6869
|
|
|
@@ -6894,7 +6890,7 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6894
6890
|
|
|
6895
6891
|
var STARTS_NUMBER = 5;
|
|
6896
6892
|
|
|
6897
|
-
var Container$
|
|
6893
|
+
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"])));
|
|
6898
6894
|
var templateObject_1$1V;
|
|
6899
6895
|
|
|
6900
6896
|
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) {
|
|
@@ -6909,7 +6905,7 @@ var StarList = function (_a) {
|
|
|
6909
6905
|
width: theme.component.stars.element[size].width,
|
|
6910
6906
|
height: theme.component.stars.element[size].height,
|
|
6911
6907
|
};
|
|
6912
|
-
return (jsxRuntime.jsx(Container$
|
|
6908
|
+
return (jsxRuntime.jsx(Container$1d, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6913
6909
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6914
6910
|
}) }, void 0));
|
|
6915
6911
|
};
|
|
@@ -6961,7 +6957,7 @@ var LabelStyles = {
|
|
|
6961
6957
|
});
|
|
6962
6958
|
},
|
|
6963
6959
|
};
|
|
6964
|
-
var Container$
|
|
6960
|
+
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"])));
|
|
6965
6961
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6966
6962
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6967
6963
|
return [
|
|
@@ -7002,7 +6998,7 @@ var Rating = function (_a) {
|
|
|
7002
6998
|
href: reviewsContainerId,
|
|
7003
6999
|
}
|
|
7004
7000
|
: {};
|
|
7005
|
-
return (jsxRuntime.jsxs(Container$
|
|
7001
|
+
return (jsxRuntime.jsxs(Container$1c, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), (reviews || reviewsText) && (jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0))] }), void 0));
|
|
7006
7002
|
};
|
|
7007
7003
|
|
|
7008
7004
|
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) {
|
|
@@ -7174,7 +7170,7 @@ var HurryUp = function (_a) {
|
|
|
7174
7170
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
7175
7171
|
};
|
|
7176
7172
|
|
|
7177
|
-
var Container$
|
|
7173
|
+
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) {
|
|
7178
7174
|
var size = _a.size;
|
|
7179
7175
|
return (size ? size : '100%');
|
|
7180
7176
|
}, function (_a) {
|
|
@@ -7206,7 +7202,7 @@ var templateObject_1$1N, templateObject_2$1q;
|
|
|
7206
7202
|
|
|
7207
7203
|
var Spinner = function (_a) {
|
|
7208
7204
|
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;
|
|
7209
|
-
return (jsxRuntime.jsx(Container$
|
|
7205
|
+
return (jsxRuntime.jsx(Container$1b, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
7210
7206
|
};
|
|
7211
7207
|
|
|
7212
7208
|
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); });
|
|
@@ -7218,7 +7214,7 @@ var ProgressBar$1 = function (_a) {
|
|
|
7218
7214
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7219
7215
|
};
|
|
7220
7216
|
|
|
7221
|
-
var Container$
|
|
7217
|
+
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"])));
|
|
7222
7218
|
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; });
|
|
7223
7219
|
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"])));
|
|
7224
7220
|
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"])));
|
|
@@ -7275,10 +7271,10 @@ var Video$1 = function (_a) {
|
|
|
7275
7271
|
}
|
|
7276
7272
|
setIsLoading(false);
|
|
7277
7273
|
};
|
|
7278
|
-
return (jsxRuntime.jsxs(Container$
|
|
7274
|
+
return (jsxRuntime.jsxs(Container$1a, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxRuntime.jsxs(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: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7279
7275
|
};
|
|
7280
7276
|
|
|
7281
|
-
var Container$
|
|
7277
|
+
var Container$19 = newStyled.div(function (props) { return ({
|
|
7282
7278
|
height: 'auto',
|
|
7283
7279
|
textAlign: 'center',
|
|
7284
7280
|
justifyContent: 'center',
|
|
@@ -7328,10 +7324,10 @@ var IconsWithTitle = function (_a) {
|
|
|
7328
7324
|
textAlign: 'center',
|
|
7329
7325
|
lineHeight: '18px',
|
|
7330
7326
|
};
|
|
7331
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
7327
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$19, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(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));
|
|
7332
7328
|
};
|
|
7333
7329
|
|
|
7334
|
-
var Container$
|
|
7330
|
+
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'; });
|
|
7335
7331
|
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"])));
|
|
7336
7332
|
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'; });
|
|
7337
7333
|
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18;
|
|
@@ -7341,7 +7337,7 @@ function IconsWithTitleList(_a) {
|
|
|
7341
7337
|
if (loading) {
|
|
7342
7338
|
return jsxRuntime.jsx(SkeletonBox, { height: skeletonHeight !== null && skeletonHeight !== void 0 ? skeletonHeight : '56px' }, void 0);
|
|
7343
7339
|
}
|
|
7344
|
-
return (jsxRuntime.jsx(Container$
|
|
7340
|
+
return (jsxRuntime.jsx(Container$18, __assign$1({ desktopGap: itemsGapDesktop, mobileGap: itemsGapMobile }, { children: list === null || list === void 0 ? void 0 : list.map(function (item, index) {
|
|
7345
7341
|
var _a, _b, _c, _d, _e, _f;
|
|
7346
7342
|
return (jsxRuntime.jsxs(Wrapper$6, { children: [jsxRuntime.jsx(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 && (jsxRuntime.jsx(DesktopDivider, { width: dividerWidth, height: dividerHeight, "data-testid": "desktop-divider" }, void 0))] }, item.text));
|
|
7347
7343
|
}) }), void 0));
|
|
@@ -7391,7 +7387,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7391
7387
|
};
|
|
7392
7388
|
}
|
|
7393
7389
|
};
|
|
7394
|
-
var Container$
|
|
7390
|
+
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) {
|
|
7395
7391
|
var backgroundColor = _a.backgroundColor;
|
|
7396
7392
|
return backgroundColor;
|
|
7397
7393
|
}, function (_a) {
|
|
@@ -7432,7 +7428,7 @@ var IconButton = function (_a) {
|
|
|
7432
7428
|
var _b, _c;
|
|
7433
7429
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? exports.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;
|
|
7434
7430
|
var theme = useTheme();
|
|
7435
|
-
return (jsxRuntime.jsx(Container$
|
|
7431
|
+
return (jsxRuntime.jsx(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));
|
|
7436
7432
|
};
|
|
7437
7433
|
var templateObject_1$1I;
|
|
7438
7434
|
|
|
@@ -7496,7 +7492,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7496
7492
|
: exports.ComponentSize.XSmall;
|
|
7497
7493
|
return (jsxRuntime.jsx(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));
|
|
7498
7494
|
};
|
|
7499
|
-
return (jsxRuntime.jsxs(Container$
|
|
7495
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7500
7496
|
? finalPriceArray[0]
|
|
7501
7497
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7502
7498
|
};
|
|
@@ -7574,7 +7570,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7574
7570
|
});
|
|
7575
7571
|
});
|
|
7576
7572
|
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"])));
|
|
7577
|
-
var Container$
|
|
7573
|
+
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"])));
|
|
7578
7574
|
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"])));
|
|
7579
7575
|
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) {
|
|
7580
7576
|
var theme = _a.theme;
|
|
@@ -7736,12 +7732,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7736
7732
|
setIsLiked(function (prev) { return !prev; });
|
|
7737
7733
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7738
7734
|
};
|
|
7739
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7735
|
+
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: {
|
|
7740
7736
|
background: {
|
|
7741
7737
|
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,
|
|
7742
7738
|
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,
|
|
7743
7739
|
},
|
|
7744
|
-
} }, 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$
|
|
7740
|
+
} }, 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: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
7745
7741
|
letterSpacing: '-0.05rem',
|
|
7746
7742
|
} }), 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: exports.ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7747
7743
|
e.preventDefault();
|
|
@@ -7762,7 +7758,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7762
7758
|
});
|
|
7763
7759
|
});
|
|
7764
7760
|
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; });
|
|
7765
|
-
var Container$
|
|
7761
|
+
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"])));
|
|
7766
7762
|
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"])));
|
|
7767
7763
|
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; });
|
|
7768
7764
|
var getStylesBySize$a = function (size) {
|
|
@@ -7844,9 +7840,9 @@ var ProductItemTK = function (_a) {
|
|
|
7844
7840
|
: undefined }, void 0));
|
|
7845
7841
|
};
|
|
7846
7842
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
7847
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7843
|
+
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: {
|
|
7848
7844
|
cursor: 'pointer',
|
|
7849
|
-
} }, { 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$
|
|
7845
|
+
} }, { 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 () {
|
|
7850
7846
|
if (!colorPicker.shouldStopCardClick) {
|
|
7851
7847
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7852
7848
|
}
|
|
@@ -7864,7 +7860,7 @@ var ProductItemTK = function (_a) {
|
|
|
7864
7860
|
if (colorPicker.shouldStopCardClick) {
|
|
7865
7861
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7866
7862
|
}
|
|
7867
|
-
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$
|
|
7863
|
+
} }, { 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 () {
|
|
7868
7864
|
if (!colorPicker.shouldStopCardClick) {
|
|
7869
7865
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7870
7866
|
}
|
|
@@ -7874,10 +7870,10 @@ var ProductItemTK = function (_a) {
|
|
|
7874
7870
|
};
|
|
7875
7871
|
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;
|
|
7876
7872
|
|
|
7877
|
-
var Container$
|
|
7873
|
+
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"])));
|
|
7878
7874
|
function withProductGrid(ProductItemComponent, data) {
|
|
7879
7875
|
function WithProductGrid(props) {
|
|
7880
|
-
return (jsxRuntime.jsx(Container$
|
|
7876
|
+
return (jsxRuntime.jsx(Container$14, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7881
7877
|
}
|
|
7882
7878
|
/* istanbul ignore next */
|
|
7883
7879
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -7955,7 +7951,7 @@ var OutOfStock = function (_a) {
|
|
|
7955
7951
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7956
7952
|
};
|
|
7957
7953
|
|
|
7958
|
-
var Container$
|
|
7954
|
+
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) {
|
|
7959
7955
|
var borderColor = _a.borderColor;
|
|
7960
7956
|
return borderColor;
|
|
7961
7957
|
}, function (_a) {
|
|
@@ -7967,7 +7963,7 @@ var PatternSelector = function (_a) {
|
|
|
7967
7963
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7968
7964
|
var theme = useTheme();
|
|
7969
7965
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7970
|
-
return (jsxRuntime.jsx(Container$
|
|
7966
|
+
return (jsxRuntime.jsx(Container$13, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7971
7967
|
};
|
|
7972
7968
|
var templateObject_1$1C, templateObject_2$1h;
|
|
7973
7969
|
|
|
@@ -8226,14 +8222,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
8226
8222
|
return jsx(BaseCTA, __assign$1({}, props, { css: getStyle(theme) }), void 0);
|
|
8227
8223
|
};
|
|
8228
8224
|
|
|
8229
|
-
var Container$
|
|
8225
|
+
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; });
|
|
8230
8226
|
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"])));
|
|
8231
8227
|
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; });
|
|
8232
8228
|
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; });
|
|
8233
8229
|
var Note = function (_a) {
|
|
8234
8230
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
8235
8231
|
var theme = useTheme();
|
|
8236
|
-
return (jsxRuntime.jsxs(Container$
|
|
8232
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
8237
8233
|
};
|
|
8238
8234
|
var templateObject_1$1y, templateObject_2$1d, templateObject_3$12, templateObject_4$Q;
|
|
8239
8235
|
|
|
@@ -8507,12 +8503,12 @@ var SelectorSecondary = function (_a) {
|
|
|
8507
8503
|
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; });
|
|
8508
8504
|
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; });
|
|
8509
8505
|
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"])));
|
|
8510
|
-
var Container$
|
|
8506
|
+
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'); });
|
|
8511
8507
|
var Accordion = function (_a) {
|
|
8512
8508
|
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;
|
|
8513
8509
|
var theme = useTheme();
|
|
8514
8510
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8515
|
-
return (jsxRuntime.jsxs(Container$
|
|
8511
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8516
8512
|
};
|
|
8517
8513
|
var templateObject_1$1s, templateObject_2$17, templateObject_3$Z, templateObject_4$L;
|
|
8518
8514
|
|
|
@@ -8677,7 +8673,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8677
8673
|
};
|
|
8678
8674
|
|
|
8679
8675
|
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"])));
|
|
8680
|
-
var Container$
|
|
8676
|
+
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"])));
|
|
8681
8677
|
var FitGuarantee = function (_a) {
|
|
8682
8678
|
var _b;
|
|
8683
8679
|
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;
|
|
@@ -8688,7 +8684,7 @@ var FitGuarantee = function (_a) {
|
|
|
8688
8684
|
console.error('Icon', iconName, 'not found');
|
|
8689
8685
|
return null;
|
|
8690
8686
|
}
|
|
8691
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
8687
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8692
8688
|
margin: '0.1rem 0',
|
|
8693
8689
|
width: '100%',
|
|
8694
8690
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -8697,7 +8693,7 @@ var FitGuarantee = function (_a) {
|
|
|
8697
8693
|
};
|
|
8698
8694
|
var templateObject_1$1p, templateObject_2$14;
|
|
8699
8695
|
|
|
8700
|
-
var Container
|
|
8696
|
+
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"])));
|
|
8701
8697
|
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; });
|
|
8702
8698
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8703
8699
|
border: 'none',
|
|
@@ -8711,7 +8707,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8711
8707
|
var FitPredictor = function (_a) {
|
|
8712
8708
|
var onClick = _a.onClick;
|
|
8713
8709
|
var theme = useTheme();
|
|
8714
|
-
return (jsxs(Container
|
|
8710
|
+
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));
|
|
8715
8711
|
};
|
|
8716
8712
|
var templateObject_1$1o, templateObject_2$13;
|
|
8717
8713
|
|
|
@@ -13051,7 +13047,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
13051
13047
|
|
|
13052
13048
|
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"])));
|
|
13053
13049
|
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"])));
|
|
13054
|
-
var Container
|
|
13050
|
+
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) {
|
|
13055
13051
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
13056
13052
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
13057
13053
|
}, function (_a) {
|
|
@@ -13095,7 +13091,7 @@ var ImagePreviewList = function (_a) {
|
|
|
13095
13091
|
var element = document.querySelector(".imageListContainer");
|
|
13096
13092
|
element.scrollBy(0, 200);
|
|
13097
13093
|
};
|
|
13098
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container
|
|
13094
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$_, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, adaptiveHeight: true, dots: false, slidesToShow: 4.2 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(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) {
|
|
13099
13095
|
return (jsxRuntime.jsx(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(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));
|
|
13100
13096
|
})) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
13101
13097
|
};
|
|
@@ -14691,7 +14687,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14691
14687
|
afterZoomOut: PropTypes.func
|
|
14692
14688
|
} : {};
|
|
14693
14689
|
|
|
14694
|
-
var Container$
|
|
14690
|
+
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) {
|
|
14695
14691
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14696
14692
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14697
14693
|
}, function (_a) {
|
|
@@ -14727,7 +14723,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14727
14723
|
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;
|
|
14728
14724
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14729
14725
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14730
|
-
return (jsxRuntime.jsxs(Container$
|
|
14726
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant, position: position }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
14731
14727
|
alt: content.alt,
|
|
14732
14728
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14733
14729
|
loading: 'eager',
|
|
@@ -14735,7 +14731,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14735
14731
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsxRuntime.jsx(TopRightTagWrapper, { children: jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14736
14732
|
};
|
|
14737
14733
|
|
|
14738
|
-
var Container$
|
|
14734
|
+
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) {
|
|
14739
14735
|
var thumbnailPosition = _a.thumbnailPosition;
|
|
14740
14736
|
return thumbnailPosition === 'horizontal' ? '1fr' : 'minmax(6rem, max-content) 1fr';
|
|
14741
14737
|
});
|
|
@@ -14765,7 +14761,7 @@ var ProductGallery = function (_a) {
|
|
|
14765
14761
|
setActiveIndex(index);
|
|
14766
14762
|
};
|
|
14767
14763
|
var selectedImage = images[activeIndex];
|
|
14768
|
-
return (jsxRuntime.jsxs(Container$
|
|
14764
|
+
return (jsxRuntime.jsxs(Container$Y, __assign$1({ thumbnailPosition: thumbnailPosition }, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(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));
|
|
14769
14765
|
};
|
|
14770
14766
|
|
|
14771
14767
|
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; });
|
|
@@ -14779,7 +14775,7 @@ var PaypalButton = function (_a) {
|
|
|
14779
14775
|
};
|
|
14780
14776
|
var templateObject_1$1i;
|
|
14781
14777
|
|
|
14782
|
-
var Container$
|
|
14778
|
+
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'); });
|
|
14783
14779
|
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'); });
|
|
14784
14780
|
var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14785
14781
|
var titlePosition = _a.titlePosition;
|
|
@@ -14789,7 +14785,7 @@ var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __ma
|
|
|
14789
14785
|
var ImageCardWithDescription = function (_a) {
|
|
14790
14786
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14791
14787
|
var isMobile = useWindowDimensions().isMobile;
|
|
14792
|
-
return (jsxRuntime.jsxs(Container$
|
|
14788
|
+
return (jsxRuntime.jsxs(Container$X, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14793
14789
|
};
|
|
14794
14790
|
var templateObject_1$1h, templateObject_2$10, templateObject_3$U;
|
|
14795
14791
|
|
|
@@ -14815,7 +14811,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14815
14811
|
return theme.colors.semantic.urgent.color;
|
|
14816
14812
|
return '';
|
|
14817
14813
|
};
|
|
14818
|
-
var Container$
|
|
14814
|
+
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) {
|
|
14819
14815
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14820
14816
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14821
14817
|
});
|
|
@@ -14917,7 +14913,7 @@ var BaseInput = function (_a) {
|
|
|
14917
14913
|
}, [status]);
|
|
14918
14914
|
var hasValue = Boolean(value);
|
|
14919
14915
|
var errorMessage = customErrorMessage || (status === exports.InputValidationType.Error && required);
|
|
14920
|
-
return (jsxRuntime.jsxs(Container$
|
|
14916
|
+
return (jsxRuntime.jsxs(Container$W, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14921
14917
|
onChange(event.target.value, event);
|
|
14922
14918
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
14923
14919
|
onChange('', { target: { value: '' } });
|
|
@@ -14938,7 +14934,7 @@ var Button$6 = function (_a) {
|
|
|
14938
14934
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14939
14935
|
};
|
|
14940
14936
|
|
|
14941
|
-
var Container$
|
|
14937
|
+
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) {
|
|
14942
14938
|
var theme = _a.theme;
|
|
14943
14939
|
return theme.component.inputCustom.input.borderRadius;
|
|
14944
14940
|
});
|
|
@@ -14957,7 +14953,7 @@ var Custom = function (_a) {
|
|
|
14957
14953
|
text: text,
|
|
14958
14954
|
disabled: rest.disabled,
|
|
14959
14955
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14960
|
-
return (jsxRuntime.jsx(Container$
|
|
14956
|
+
return (jsxRuntime.jsx(Container$V, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14961
14957
|
};
|
|
14962
14958
|
var templateObject_1$1e, templateObject_2$Z;
|
|
14963
14959
|
|
|
@@ -14992,12 +14988,12 @@ var BasePlusButton = function (_a) {
|
|
|
14992
14988
|
};
|
|
14993
14989
|
var templateObject_1$1c;
|
|
14994
14990
|
|
|
14995
|
-
var Container$
|
|
14991
|
+
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"])));
|
|
14996
14992
|
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"])));
|
|
14997
14993
|
var BasePlusIcon = function (_a) {
|
|
14998
14994
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14999
14995
|
var theme = useTheme();
|
|
15000
|
-
return (jsxRuntime.jsx(Container$
|
|
14996
|
+
return (jsxRuntime.jsx(Container$U, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
15001
14997
|
};
|
|
15002
14998
|
var templateObject_1$1b, templateObject_2$X;
|
|
15003
14999
|
|
|
@@ -15146,7 +15142,7 @@ var transformStyle = function (_a) {
|
|
|
15146
15142
|
return opened
|
|
15147
15143
|
? 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%');
|
|
15148
15144
|
};
|
|
15149
|
-
var Container$
|
|
15145
|
+
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) {
|
|
15150
15146
|
return "".concat(props.maxFullScreen || props.countryRedirModalWithCoupon ? '0' : 'var(--radius-regular)');
|
|
15151
15147
|
}, 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) {
|
|
15152
15148
|
var width = _a.width;
|
|
@@ -15165,7 +15161,7 @@ var Modal = function (_a) {
|
|
|
15165
15161
|
}
|
|
15166
15162
|
close();
|
|
15167
15163
|
};
|
|
15168
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
15164
|
+
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 () {
|
|
15169
15165
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
15170
15166
|
onDismiss();
|
|
15171
15167
|
} }, void 0)] }), void 0));
|
|
@@ -19016,7 +19012,7 @@ var BarContainer = newStyled.div({
|
|
|
19016
19012
|
padding: '0 16px',
|
|
19017
19013
|
position: 'relative',
|
|
19018
19014
|
});
|
|
19019
|
-
var Container$
|
|
19015
|
+
var Container$S = newStyled.div(function (_a) {
|
|
19020
19016
|
var backgroundColor = _a.backgroundColor;
|
|
19021
19017
|
return ({
|
|
19022
19018
|
width: '475px',
|
|
@@ -19058,11 +19054,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
19058
19054
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
19059
19055
|
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
19060
19056
|
};
|
|
19061
|
-
return (jsxRuntime.jsxs(Container$
|
|
19057
|
+
return (jsxRuntime.jsxs(Container$S, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
19062
19058
|
};
|
|
19063
19059
|
var templateObject_1$19, templateObject_2$V;
|
|
19064
19060
|
|
|
19065
|
-
var Container$
|
|
19061
|
+
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) {
|
|
19066
19062
|
var theme = _a.theme;
|
|
19067
19063
|
return theme.component.orderBar.backgroundColor;
|
|
19068
19064
|
});
|
|
@@ -19070,11 +19066,11 @@ var H1 = newStyled.h1(templateObject_2$U || (templateObject_2$U = __makeTemplate
|
|
|
19070
19066
|
var OrderBar = function (_a) {
|
|
19071
19067
|
var message = _a.message, color = _a.color;
|
|
19072
19068
|
var theme = useTheme();
|
|
19073
|
-
return (jsxRuntime.jsxs(Container$
|
|
19069
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
19074
19070
|
};
|
|
19075
19071
|
var templateObject_1$18, templateObject_2$U;
|
|
19076
19072
|
|
|
19077
|
-
var Container$
|
|
19073
|
+
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"])));
|
|
19078
19074
|
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"])));
|
|
19079
19075
|
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"])));
|
|
19080
19076
|
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"])));
|
|
@@ -19084,7 +19080,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o =
|
|
|
19084
19080
|
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"])));
|
|
19085
19081
|
var PackSelector = function (_a) {
|
|
19086
19082
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
19087
|
-
return (jsxRuntime.jsx(Container$
|
|
19083
|
+
return (jsxRuntime.jsx(Container$Q, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
19088
19084
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
19089
19085
|
}) }), void 0));
|
|
19090
19086
|
};
|
|
@@ -19113,7 +19109,7 @@ var PackCard = function (_a) {
|
|
|
19113
19109
|
};
|
|
19114
19110
|
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;
|
|
19115
19111
|
|
|
19116
|
-
var Container$
|
|
19112
|
+
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"])));
|
|
19117
19113
|
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"])));
|
|
19118
19114
|
var PageNumbersContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
19119
19115
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -19181,7 +19177,7 @@ var Pagination = function (_a) {
|
|
|
19181
19177
|
}
|
|
19182
19178
|
return pages;
|
|
19183
19179
|
}, [from, page, showReducedPages, to]);
|
|
19184
|
-
return (jsxRuntime.jsxs(Container$
|
|
19180
|
+
return (jsxRuntime.jsxs(Container$P, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(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 && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(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)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19185
19181
|
};
|
|
19186
19182
|
|
|
19187
19183
|
var PaginatorBlog = function (_a) {
|
|
@@ -19195,12 +19191,12 @@ var PaginatorBlog = function (_a) {
|
|
|
19195
19191
|
setPage(page);
|
|
19196
19192
|
onChange(page);
|
|
19197
19193
|
};
|
|
19198
|
-
return (jsxRuntime.jsxs(Container$
|
|
19194
|
+
return (jsxRuntime.jsxs(Container$P, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
19199
19195
|
? theme.colors.shades['white'].color
|
|
19200
19196
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19201
19197
|
};
|
|
19202
19198
|
|
|
19203
|
-
var Container$
|
|
19199
|
+
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) {
|
|
19204
19200
|
var width = _a.width;
|
|
19205
19201
|
return width;
|
|
19206
19202
|
}, function (_a) {
|
|
@@ -19216,11 +19212,11 @@ var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __
|
|
|
19216
19212
|
var PaymentMethod = function (_a) {
|
|
19217
19213
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
19218
19214
|
var theme = useTheme();
|
|
19219
|
-
return (jsxRuntime.jsx(Container$
|
|
19215
|
+
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
19220
19216
|
};
|
|
19221
19217
|
var templateObject_1$15;
|
|
19222
19218
|
|
|
19223
|
-
var Container$
|
|
19219
|
+
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"])));
|
|
19224
19220
|
var IMAGE_WIDTH$1 = '63px';
|
|
19225
19221
|
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);
|
|
19226
19222
|
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({
|
|
@@ -19265,7 +19261,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19265
19261
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19266
19262
|
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;
|
|
19267
19263
|
var theme = useTheme();
|
|
19268
|
-
return (jsxRuntime.jsxs(Container$
|
|
19264
|
+
return (jsxRuntime.jsxs(Container$N, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(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 && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(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));
|
|
19269
19265
|
};
|
|
19270
19266
|
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$q, templateObject_7$n;
|
|
19271
19267
|
|
|
@@ -19310,7 +19306,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19310
19306
|
position: 'absolute',
|
|
19311
19307
|
});
|
|
19312
19308
|
});
|
|
19313
|
-
var Container$
|
|
19309
|
+
var Container$M = newStyled.div(function (_a) {
|
|
19314
19310
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19315
19311
|
return ({
|
|
19316
19312
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19324,11 +19320,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19324
19320
|
var ProgressBar = function (_a) {
|
|
19325
19321
|
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;
|
|
19326
19322
|
var theme = useTheme();
|
|
19327
|
-
return (jsxRuntime.jsxs(Container$
|
|
19323
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19328
19324
|
};
|
|
19329
19325
|
var templateObject_1$13;
|
|
19330
19326
|
|
|
19331
|
-
var Container$
|
|
19327
|
+
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; });
|
|
19332
19328
|
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"])));
|
|
19333
19329
|
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"])));
|
|
19334
19330
|
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)'; });
|
|
@@ -19354,7 +19350,7 @@ var QuantityPicker = function (_a) {
|
|
|
19354
19350
|
return clamp(value);
|
|
19355
19351
|
});
|
|
19356
19352
|
}, [value, clamp]);
|
|
19357
|
-
return (jsxRuntime.jsxs(Container$
|
|
19353
|
+
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(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));
|
|
19358
19354
|
};
|
|
19359
19355
|
var templateObject_1$12, templateObject_2$Q, templateObject_3$N, templateObject_4$C;
|
|
19360
19356
|
|
|
@@ -19426,7 +19422,7 @@ var ContainerStyles$1 = {
|
|
|
19426
19422
|
};
|
|
19427
19423
|
|
|
19428
19424
|
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"])));
|
|
19429
|
-
var Container$
|
|
19425
|
+
var Container$K = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19430
19426
|
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) {
|
|
19431
19427
|
var disabled = _a.disabled;
|
|
19432
19428
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -19443,32 +19439,10 @@ var RadioPrimary = function (_a) {
|
|
|
19443
19439
|
var value = event.currentTarget.value;
|
|
19444
19440
|
onChange({ value: value, label: label });
|
|
19445
19441
|
};
|
|
19446
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
19442
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19447
19443
|
};
|
|
19448
19444
|
var templateObject_1$11, templateObject_2$P, templateObject_3$M;
|
|
19449
19445
|
|
|
19450
|
-
var Container$K = newStyled.div(function (_a) {
|
|
19451
|
-
var $horizontal = _a.$horizontal;
|
|
19452
|
-
var pseudoStyles = {
|
|
19453
|
-
content: "' '",
|
|
19454
|
-
position: 'absolute',
|
|
19455
|
-
top: '11px',
|
|
19456
|
-
left: 25,
|
|
19457
|
-
width: 'calc(100% - 50px)',
|
|
19458
|
-
height: 1,
|
|
19459
|
-
backgroundColor: 'var(--colors-shades-250-color)',
|
|
19460
|
-
zIndex: -1,
|
|
19461
|
-
};
|
|
19462
|
-
return {
|
|
19463
|
-
display: 'flex',
|
|
19464
|
-
flexDirection: $horizontal ? 'row' : 'column',
|
|
19465
|
-
justifyContent: 'space-between',
|
|
19466
|
-
width: '100%',
|
|
19467
|
-
position: 'relative',
|
|
19468
|
-
'&:after': $horizontal ? pseudoStyles : {},
|
|
19469
|
-
};
|
|
19470
|
-
});
|
|
19471
|
-
|
|
19472
19446
|
var RadioGroupInput = function (_a) {
|
|
19473
19447
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, horizontal = _a.horizontal;
|
|
19474
19448
|
var _e = React$2.useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
|
|
@@ -19476,7 +19450,7 @@ var RadioGroupInput = function (_a) {
|
|
|
19476
19450
|
setSelectedInput(selected);
|
|
19477
19451
|
onChange(selected);
|
|
19478
19452
|
};
|
|
19479
|
-
return (jsxRuntime.jsx(
|
|
19453
|
+
return (jsxRuntime.jsx("div", __assign$1({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
|
|
19480
19454
|
return (jsxRuntime.jsx(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));
|
|
19481
19455
|
}) }), void 0));
|
|
19482
19456
|
};
|