@trafilea/afrodita-components 6.56.3 → 6.56.5
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.d.ts +4 -2
- package/build/index.esm.js +176 -142
- package/build/index.esm.js.map +1 -1
- package/build/index.js +176 -142
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3195,7 +3195,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3195
3195
|
};
|
|
3196
3196
|
}
|
|
3197
3197
|
};
|
|
3198
|
-
var Container$
|
|
3198
|
+
var Container$1B = 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) {
|
|
3199
3199
|
var backgroundColor = _a.backgroundColor;
|
|
3200
3200
|
return backgroundColor;
|
|
3201
3201
|
}, function (_a) {
|
|
@@ -3232,7 +3232,7 @@ var H3$2 = newStyled.h3(templateObject_2$1W || (templateObject_2$1W = __makeTemp
|
|
|
3232
3232
|
var ClubOfferTag = function (_a) {
|
|
3233
3233
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
3234
3234
|
var theme = useTheme();
|
|
3235
|
-
return (jsx$1(Container$
|
|
3235
|
+
return (jsx$1(Container$1B, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3236
3236
|
};
|
|
3237
3237
|
var templateObject_1$2G, templateObject_2$1W;
|
|
3238
3238
|
|
|
@@ -3265,7 +3265,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3265
3265
|
};
|
|
3266
3266
|
}
|
|
3267
3267
|
};
|
|
3268
|
-
var Container$
|
|
3268
|
+
var Container$1A = 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) {
|
|
3269
3269
|
var backgroundColor = _a.backgroundColor;
|
|
3270
3270
|
return backgroundColor;
|
|
3271
3271
|
}, function (_a) {
|
|
@@ -3302,7 +3302,7 @@ var H3$1 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __makeTemp
|
|
|
3302
3302
|
var DiscountTag$4 = function (_a) {
|
|
3303
3303
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3304
3304
|
var theme = useTheme();
|
|
3305
|
-
return (jsx$1(Container$
|
|
3305
|
+
return (jsx$1(Container$1A, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3306
3306
|
};
|
|
3307
3307
|
var templateObject_1$2F, templateObject_2$1V;
|
|
3308
3308
|
|
|
@@ -3373,7 +3373,7 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
3373
3373
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
3374
3374
|
};
|
|
3375
3375
|
|
|
3376
|
-
var Container$
|
|
3376
|
+
var Container$1z = 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"])));
|
|
3377
3377
|
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) {
|
|
3378
3378
|
var weight = _a.weight;
|
|
3379
3379
|
return (weight ? weight : '400');
|
|
@@ -3403,11 +3403,11 @@ var TagContainer = newStyled.div(templateObject_3$1u || (templateObject_3$1u = _
|
|
|
3403
3403
|
var size = _a.size;
|
|
3404
3404
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
3405
3405
|
});
|
|
3406
|
-
var PriceContainer$3 = newStyled.div(templateObject_4$
|
|
3406
|
+
var PriceContainer$3 = newStyled.div(templateObject_4$18 || (templateObject_4$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n gap: 0.5rem;\n"], ["\n display: flex;\n flex-direction: ", ";\n gap: 0.5rem;\n"])), function (_a) {
|
|
3407
3407
|
var invertDirection = _a.invertDirection;
|
|
3408
3408
|
return (invertDirection ? 'row-reverse' : 'row');
|
|
3409
3409
|
});
|
|
3410
|
-
var templateObject_1$2E, templateObject_2$1U, templateObject_3$1u, templateObject_4$
|
|
3410
|
+
var templateObject_1$2E, templateObject_2$1U, templateObject_3$1u, templateObject_4$18;
|
|
3411
3411
|
|
|
3412
3412
|
var getStylesBySize$e = function (size, theme) {
|
|
3413
3413
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -3475,7 +3475,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3475
3475
|
: ComponentSize.XSmall;
|
|
3476
3476
|
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3477
3477
|
};
|
|
3478
|
-
return (jsxs$1(Container$
|
|
3478
|
+
return (jsxs$1(Container$1z, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }), void 0)) : (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsx$1(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3479
3479
|
};
|
|
3480
3480
|
|
|
3481
3481
|
var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
|
|
@@ -3534,7 +3534,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3534
3534
|
var savetoString = saveto.toFixed(2);
|
|
3535
3535
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3536
3536
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3537
|
-
return (jsxs$1(Container$
|
|
3537
|
+
return (jsxs$1(Container$1z, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3538
3538
|
? finalPriceArray[0]
|
|
3539
3539
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), showDecimals && (jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3540
3540
|
marginTop: '-6px',
|
|
@@ -3604,7 +3604,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3604
3604
|
return null;
|
|
3605
3605
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$2(testId, 'each-one-price') }, { children: [jsxs$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3606
3606
|
};
|
|
3607
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3607
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1z, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3608
3608
|
marginTop: '-5px',
|
|
3609
3609
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3610
3610
|
marginTop: '-6px',
|
|
@@ -3622,7 +3622,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3622
3622
|
};
|
|
3623
3623
|
var templateObject_1$2C, templateObject_2$1T, templateObject_3$1t;
|
|
3624
3624
|
|
|
3625
|
-
var Container$
|
|
3625
|
+
var Container$1y = newStyled.div(templateObject_1$2B || (templateObject_1$2B = __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"])));
|
|
3626
3626
|
var Price = newStyled.p(templateObject_2$1S || (templateObject_2$1S = __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) {
|
|
3627
3627
|
var weight = _a.weight;
|
|
3628
3628
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
@@ -3657,7 +3657,7 @@ var PriceLabelV5 = function (_a) {
|
|
|
3657
3657
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3658
3658
|
weight: 700,
|
|
3659
3659
|
};
|
|
3660
|
-
return (jsx$1(Container$
|
|
3660
|
+
return (jsx$1(Container$1y, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsx$1(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3661
3661
|
};
|
|
3662
3662
|
|
|
3663
3663
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2A || (templateObject_1$2A = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
@@ -3683,7 +3683,7 @@ var PriceLabel = function (_a) {
|
|
|
3683
3683
|
};
|
|
3684
3684
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3685
3685
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3686
|
-
return (jsxs$1(Container$
|
|
3686
|
+
return (jsxs$1(Container$1z, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3687
3687
|
marginTop: '-5px',
|
|
3688
3688
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3689
3689
|
marginTop: '-6px',
|
|
@@ -3717,7 +3717,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3717
3717
|
var finalPriceString = finalPriceArray[0]
|
|
3718
3718
|
? finalPriceArray[0]
|
|
3719
3719
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3720
|
-
return (jsxs$1(Container$
|
|
3720
|
+
return (jsxs$1(Container$1z, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3721
3721
|
};
|
|
3722
3722
|
var templateObject_1$2z;
|
|
3723
3723
|
|
|
@@ -3738,7 +3738,7 @@ var HorizontalDivider = newStyled.div(templateObject_1$2x || (templateObject_1$2
|
|
|
3738
3738
|
});
|
|
3739
3739
|
var templateObject_1$2x;
|
|
3740
3740
|
|
|
3741
|
-
var Container$
|
|
3741
|
+
var Container$1x = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __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) {
|
|
3742
3742
|
var height = _a.height;
|
|
3743
3743
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3744
3744
|
}, function (_a) {
|
|
@@ -3763,7 +3763,7 @@ var Container$1w = newStyled.div(templateObject_1$2w || (templateObject_1$2w = _
|
|
|
3763
3763
|
var SkeletonBox = function (_a) {
|
|
3764
3764
|
var width = _a.width, height = _a.height;
|
|
3765
3765
|
var theme = useTheme();
|
|
3766
|
-
return jsx$1(Container$
|
|
3766
|
+
return jsx$1(Container$1x, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3767
3767
|
};
|
|
3768
3768
|
var templateObject_1$2w;
|
|
3769
3769
|
|
|
@@ -4887,7 +4887,7 @@ var TAGS = {
|
|
|
4887
4887
|
hero1: newStyled.h1(templateObject_1$2s || (templateObject_1$2s = __makeTemplateObject([""], [""]))),
|
|
4888
4888
|
hero2: newStyled.h2(templateObject_2$1O || (templateObject_2$1O = __makeTemplateObject([""], [""]))),
|
|
4889
4889
|
hero3: newStyled.h3(templateObject_3$1r || (templateObject_3$1r = __makeTemplateObject([""], [""]))),
|
|
4890
|
-
display1: newStyled.h1(templateObject_4$
|
|
4890
|
+
display1: newStyled.h1(templateObject_4$17 || (templateObject_4$17 = __makeTemplateObject([""], [""]))),
|
|
4891
4891
|
display2: newStyled.h2(templateObject_5$T || (templateObject_5$T = __makeTemplateObject([""], [""]))),
|
|
4892
4892
|
display3: newStyled.h3(templateObject_6$K || (templateObject_6$K = __makeTemplateObject([""], [""]))),
|
|
4893
4893
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
@@ -5024,17 +5024,17 @@ var DEFAULTS = {
|
|
|
5024
5024
|
size: 'regular',
|
|
5025
5025
|
},
|
|
5026
5026
|
};
|
|
5027
|
-
var templateObject_1$2s, templateObject_2$1O, templateObject_3$1r, templateObject_4$
|
|
5027
|
+
var templateObject_1$2s, templateObject_2$1O, templateObject_3$1r, templateObject_4$17, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t, 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;
|
|
5028
5028
|
|
|
5029
|
-
var Container$
|
|
5029
|
+
var Container$1w = newStyled.div(templateObject_1$2r || (templateObject_1$2r = __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"])));
|
|
5030
5030
|
var Card$4 = newStyled.div(templateObject_2$1N || (templateObject_2$1N = __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"])));
|
|
5031
5031
|
var Tag$2 = newStyled.div(templateObject_3$1q || (templateObject_3$1q = __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"])));
|
|
5032
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
5032
|
+
var Label$7 = newStyled.div(templateObject_4$16 || (templateObject_4$16 = __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"])));
|
|
5033
5033
|
var Check$1 = newStyled.div(templateObject_5$S || (templateObject_5$S = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
5034
5034
|
var DiscountContainer$1 = newStyled.div(templateObject_6$J || (templateObject_6$J = __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"])));
|
|
5035
5035
|
var PackSelectorV2 = function (_a) {
|
|
5036
5036
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5037
|
-
return (jsx$1(Container$
|
|
5037
|
+
return (jsx$1(Container$1w, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5038
5038
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5039
5039
|
}) }), void 0));
|
|
5040
5040
|
};
|
|
@@ -5056,25 +5056,25 @@ var PackCard$1 = function (_a) {
|
|
|
5056
5056
|
currency: currencyCode || 'USD',
|
|
5057
5057
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5058
5058
|
};
|
|
5059
|
-
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$
|
|
5059
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$16, templateObject_5$S, templateObject_6$J;
|
|
5060
5060
|
|
|
5061
|
-
var Container$
|
|
5061
|
+
var Container$1v = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5062
5062
|
var DropContainer = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5063
5063
|
var DropList = function (_a) {
|
|
5064
5064
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5065
|
-
return (jsx$1(Container$
|
|
5065
|
+
return (jsx$1(Container$1v, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5066
5066
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5067
5067
|
}) }, void 0));
|
|
5068
5068
|
};
|
|
5069
5069
|
var templateObject_1$2q, templateObject_2$1M;
|
|
5070
5070
|
|
|
5071
5071
|
var DROPS_TOTAL = 5;
|
|
5072
|
-
var Container$
|
|
5072
|
+
var Container$1u = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5073
5073
|
var Title$b = newStyled.p(templateObject_2$1L || (templateObject_2$1L = __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"])));
|
|
5074
5074
|
var Description$3 = newStyled.p(templateObject_3$1p || (templateObject_3$1p = __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"])));
|
|
5075
5075
|
var AbsorbencyLevel = function (_a) {
|
|
5076
5076
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5077
|
-
return (jsxs$1(Container$
|
|
5077
|
+
return (jsxs$1(Container$1u, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5078
5078
|
};
|
|
5079
5079
|
var templateObject_1$2p, templateObject_2$1L, templateObject_3$1p;
|
|
5080
5080
|
|
|
@@ -5178,7 +5178,7 @@ var Accordion$1 = function (_a) {
|
|
|
5178
5178
|
};
|
|
5179
5179
|
var templateObject_1$2o;
|
|
5180
5180
|
|
|
5181
|
-
var Container$
|
|
5181
|
+
var Container$1t = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5182
5182
|
var AccordionOptions = function (_a) {
|
|
5183
5183
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5184
5184
|
var _b = useState({
|
|
@@ -5191,7 +5191,7 @@ var AccordionOptions = function (_a) {
|
|
|
5191
5191
|
}
|
|
5192
5192
|
return false;
|
|
5193
5193
|
};
|
|
5194
|
-
return (jsx$1(Container$
|
|
5194
|
+
return (jsx$1(Container$1t, { children: accordions.map(function (accordion, index) {
|
|
5195
5195
|
var forceOpenValue = getForceOpen(index);
|
|
5196
5196
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5197
5197
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5419,7 +5419,7 @@ var Bold = newStyled.span(templateObject_1$2m || (templateObject_1$2m = __makeTe
|
|
|
5419
5419
|
var FlexContainer$5 = newStyled.div(templateObject_2$1K || (templateObject_2$1K = __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"])));
|
|
5420
5420
|
var templateObject_1$2m, templateObject_2$1K;
|
|
5421
5421
|
|
|
5422
|
-
var Container$
|
|
5422
|
+
var Container$1s = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __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) {
|
|
5423
5423
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5424
5424
|
return width;
|
|
5425
5425
|
}, function (_a) {
|
|
@@ -5428,14 +5428,14 @@ var Container$1r = newStyled.div(templateObject_1$2l || (templateObject_1$2l = _
|
|
|
5428
5428
|
});
|
|
5429
5429
|
var FlexCentered = newStyled.div(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5430
5430
|
var LeftSide = newStyled.div(templateObject_3$1o || (templateObject_3$1o = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5431
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5431
|
+
var RightSide = newStyled.div(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5432
5432
|
var FlexStart = newStyled.div(templateObject_5$R || (templateObject_5$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5433
|
-
var templateObject_1$2l, templateObject_2$1J, templateObject_3$1o, templateObject_4$
|
|
5433
|
+
var templateObject_1$2l, templateObject_2$1J, templateObject_3$1o, templateObject_4$15, templateObject_5$R;
|
|
5434
5434
|
|
|
5435
5435
|
var CouponCard = function (_a) {
|
|
5436
5436
|
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;
|
|
5437
5437
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5438
|
-
return (jsxs$1(Container$
|
|
5438
|
+
return (jsxs$1(Container$1s, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () {
|
|
5439
5439
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5440
5440
|
setShowCoupon(function (prev) { return !prev; });
|
|
5441
5441
|
} }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
@@ -5778,7 +5778,7 @@ var CustomCheckboxStyles = {
|
|
|
5778
5778
|
},
|
|
5779
5779
|
};
|
|
5780
5780
|
|
|
5781
|
-
var Container$
|
|
5781
|
+
var Container$1r = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __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"])));
|
|
5782
5782
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5783
5783
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5784
5784
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5803,7 +5803,7 @@ var Checkbox = function (_a) {
|
|
|
5803
5803
|
}
|
|
5804
5804
|
onChange(e.target.checked);
|
|
5805
5805
|
};
|
|
5806
|
-
return (jsxs$1(Container$
|
|
5806
|
+
return (jsxs$1(Container$1r, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && (jsx$1(Icon.Actions.Check, { fill: text === 'White'
|
|
5807
5807
|
? theme.colors.shades['black'].color
|
|
5808
5808
|
: theme.colors.shades['white'].color }, void 0)) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5809
5809
|
};
|
|
@@ -5856,7 +5856,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5856
5856
|
Option: BaseDropdownOption,
|
|
5857
5857
|
});
|
|
5858
5858
|
|
|
5859
|
-
var Container$
|
|
5859
|
+
var Container$1q = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject([""], [""])));
|
|
5860
5860
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1G || (templateObject_2$1G = __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"])));
|
|
5861
5861
|
var SelectedOption = newStyled.span(templateObject_3$1n || (templateObject_3$1n = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5862
5862
|
var fontWeight = _a.fontWeight;
|
|
@@ -5891,7 +5891,7 @@ function SimpleDropdown(_a) {
|
|
|
5891
5891
|
}
|
|
5892
5892
|
setSelectedValue(value);
|
|
5893
5893
|
}, [value, options, initialValue]);
|
|
5894
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5894
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1q : Fragment$1;
|
|
5895
5895
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5896
5896
|
}
|
|
5897
5897
|
var templateObject_1$2g, templateObject_2$1G, templateObject_3$1n;
|
|
@@ -5957,11 +5957,22 @@ var ContainerStyles$2 = {
|
|
|
5957
5957
|
marginRight: theme.component.radio.size.large.margin,
|
|
5958
5958
|
});
|
|
5959
5959
|
},
|
|
5960
|
-
};
|
|
5961
|
-
|
|
5962
|
-
var
|
|
5963
|
-
|
|
5964
|
-
|
|
5960
|
+
};
|
|
5961
|
+
var Wrapper$8 = newStyled.div(function (_a) {
|
|
5962
|
+
var $horizontal = _a.$horizontal;
|
|
5963
|
+
return {
|
|
5964
|
+
display: 'flex',
|
|
5965
|
+
flexDirection: $horizontal ? 'column' : 'row',
|
|
5966
|
+
alignItems: $horizontal ? 'flex-start' : 'center',
|
|
5967
|
+
justifyContent: $horizontal ? 'space-between' : 'flex-start',
|
|
5968
|
+
width: 'auto',
|
|
5969
|
+
};
|
|
5970
|
+
});
|
|
5971
|
+
var Container$1p = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5972
|
+
var HorizontalContainer = newStyled(Container$1p)({
|
|
5973
|
+
alignSelf: 'center',
|
|
5974
|
+
});
|
|
5975
|
+
var Input$4 = newStyled.input(templateObject_1$2f || (templateObject_1$2f = __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) {
|
|
5965
5976
|
var disabled = _a.disabled;
|
|
5966
5977
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5967
5978
|
});
|
|
@@ -5969,14 +5980,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5969
5980
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5970
5981
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5971
5982
|
]; });
|
|
5972
|
-
var StyledLabel$3 = newStyled(Label$6)(
|
|
5983
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5973
5984
|
var theme = _a.theme;
|
|
5974
5985
|
return theme.component.radio.textSize;
|
|
5975
5986
|
}, function (_a) {
|
|
5976
5987
|
var theme = _a.theme;
|
|
5977
5988
|
return theme.component.radio.lineHeight;
|
|
5978
5989
|
});
|
|
5979
|
-
var StyledLabelV2 = newStyled(Label$6)(
|
|
5990
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5980
5991
|
var theme = _a.theme;
|
|
5981
5992
|
return theme.component.radio.textSize;
|
|
5982
5993
|
}, function (_a) {
|
|
@@ -5986,16 +5997,18 @@ var StyledLabelV2 = newStyled(Label$6)(templateObject_4$15 || (templateObject_4$
|
|
|
5986
5997
|
var disabled = _a.disabled;
|
|
5987
5998
|
return (disabled ? 'var(--colors-shades-250-color)' : 'inherit');
|
|
5988
5999
|
});
|
|
6000
|
+
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m;
|
|
6001
|
+
|
|
5989
6002
|
var RadioInput = function (_a) {
|
|
5990
|
-
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e, labelStyle = _a.labelStyle, icon = _a.icon;
|
|
6003
|
+
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e, labelStyle = _a.labelStyle, icon = _a.icon, _f = _a.horizontal, horizontal = _f === void 0 ? false : _f;
|
|
5991
6004
|
var theme = useTheme();
|
|
5992
6005
|
var handleChange = function (event, label) {
|
|
5993
6006
|
var value = event.currentTarget.value;
|
|
5994
6007
|
onChange({ value: value, label: label });
|
|
5995
6008
|
};
|
|
5996
|
-
|
|
5997
|
-
};
|
|
5998
|
-
|
|
6009
|
+
var InputContainer = horizontal ? HorizontalContainer : Container$1p;
|
|
6010
|
+
return (jsxs$1(Wrapper$8, __assign$1({ "aria-orientation": horizontal ? 'horizontal' : 'vertical', "$horizontal": horizontal }, { children: [jsxs$1(InputContainer, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }), void 0));
|
|
6011
|
+
};
|
|
5999
6012
|
|
|
6000
6013
|
var useOnClickOutside = function (ref, handler) {
|
|
6001
6014
|
useEffect(function () {
|
|
@@ -6233,7 +6246,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6233
6246
|
var selected = _a.selected, theme = _a.theme;
|
|
6234
6247
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6235
6248
|
});
|
|
6236
|
-
var Container$
|
|
6249
|
+
var Container$1o = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6237
6250
|
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;
|
|
6238
6251
|
|
|
6239
6252
|
var radioIds$3 = {
|
|
@@ -6284,7 +6297,7 @@ var Autoship = function (_a) {
|
|
|
6284
6297
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6285
6298
|
};
|
|
6286
6299
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6287
|
-
return (jsxs$1(Container$
|
|
6300
|
+
return (jsxs$1(Container$1o, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$4, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$3.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$3.oneTime.id, id: radioIds$3.oneTime.id, value: radioIds$3.oneTime.id, checked: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$5, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$3.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$5, __assign$1({ onClick: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$3.autoship.id, id: radioIds$3.autoship.id, value: radioIds$3.autoship.id, checked: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$4, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$3.autoship.id === radioCheck.id
|
|
6288
6301
|
? benefitsColor.selected
|
|
6289
6302
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$4, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$4, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6290
6303
|
};
|
|
@@ -6345,7 +6358,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6345
6358
|
var selected = _a.selected, theme = _a.theme;
|
|
6346
6359
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6347
6360
|
});
|
|
6348
|
-
var Container$
|
|
6361
|
+
var Container$1n = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6349
6362
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6350
6363
|
var theme = _a.theme;
|
|
6351
6364
|
return theme.component.autoship.tooltip.margin;
|
|
@@ -6411,7 +6424,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6411
6424
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6412
6425
|
};
|
|
6413
6426
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6414
|
-
return (jsxs$1(Container$
|
|
6427
|
+
return (jsxs$1(Container$1n, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id, borderRadiusValue: borderRadiusValue }, { children: [jsx$1(DiscountTag$3, __assign$1({ isSelected: radioIds$2.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$4, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [hasInfoBulletIcons && (jsx$1(BulletIconWrapper, { children: jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6415
6428
|
? benefitsColor.selected
|
|
6416
6429
|
: benefitsColor.base }, void 0) }, void 0)), jsx$1(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, borderRadiusValue: borderRadiusValue, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6417
6430
|
};
|
|
@@ -6454,7 +6467,7 @@ var ResultFeedback = function (_a) {
|
|
|
6454
6467
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6455
6468
|
};
|
|
6456
6469
|
|
|
6457
|
-
var Container$
|
|
6470
|
+
var Container$1m = 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; });
|
|
6458
6471
|
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"])));
|
|
6459
6472
|
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; });
|
|
6460
6473
|
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) {
|
|
@@ -6542,7 +6555,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6542
6555
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6543
6556
|
var infoText = buildInfoText(name, age, months);
|
|
6544
6557
|
var Component = componentByVariant[variant];
|
|
6545
|
-
return (jsxs$1(Container$
|
|
6558
|
+
return (jsxs$1(Container$1m, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6546
6559
|
};
|
|
6547
6560
|
|
|
6548
6561
|
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) {
|
|
@@ -6565,7 +6578,7 @@ var CardBody$1 = function (_a) {
|
|
|
6565
6578
|
};
|
|
6566
6579
|
var templateObject_1$28;
|
|
6567
6580
|
|
|
6568
|
-
var Container$
|
|
6581
|
+
var Container$1l = 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) {
|
|
6569
6582
|
var flex = _a.flex;
|
|
6570
6583
|
return flex &&
|
|
6571
6584
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6580,7 +6593,7 @@ var Container$1k = newStyled.div(templateObject_1$27 || (templateObject_1$27 = _
|
|
|
6580
6593
|
var Card$2 = function (_a) {
|
|
6581
6594
|
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;
|
|
6582
6595
|
var theme = useTheme();
|
|
6583
|
-
return (jsx$1(Container$
|
|
6596
|
+
return (jsx$1(Container$1l, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6584
6597
|
};
|
|
6585
6598
|
var Card$3 = Object.assign(Card$2, {
|
|
6586
6599
|
Header: CardHeader,
|
|
@@ -6612,14 +6625,14 @@ var Motivator = function (_a) {
|
|
|
6612
6625
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: true, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsx$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: typeof content === 'string' ? (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: content }), void 0)) : (content) }), void 0) }), void 0));
|
|
6613
6626
|
};
|
|
6614
6627
|
|
|
6615
|
-
var Container$
|
|
6628
|
+
var Container$1k = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6616
6629
|
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; });
|
|
6617
6630
|
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; });
|
|
6618
6631
|
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"])));
|
|
6619
6632
|
var Simple = function (_a) {
|
|
6620
6633
|
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;
|
|
6621
6634
|
var theme = useTheme();
|
|
6622
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6635
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1k, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6623
6636
|
};
|
|
6624
6637
|
var templateObject_1$24, templateObject_2$1y, templateObject_3$1f, templateObject_4$_;
|
|
6625
6638
|
|
|
@@ -6629,7 +6642,7 @@ var Bundle = {
|
|
|
6629
6642
|
Motivator: Motivator,
|
|
6630
6643
|
};
|
|
6631
6644
|
|
|
6632
|
-
var Container$
|
|
6645
|
+
var Container$1j = 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) {
|
|
6633
6646
|
var displayBNPL = _a.displayBNPL;
|
|
6634
6647
|
return (displayBNPL ? 'flex' : 'none');
|
|
6635
6648
|
});
|
|
@@ -6654,7 +6667,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6654
6667
|
else {
|
|
6655
6668
|
dynamicText = "or 4 interest-free payments of ";
|
|
6656
6669
|
}
|
|
6657
|
-
return (jsx$1(Container$
|
|
6670
|
+
return (jsx$1(Container$1j, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [dynamicText, jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6658
6671
|
display: 'inline',
|
|
6659
6672
|
fontSize: fontSize,
|
|
6660
6673
|
paddingLeft: '0.25rem',
|
|
@@ -6680,11 +6693,11 @@ var OfferBanner = function (_a) {
|
|
|
6680
6693
|
};
|
|
6681
6694
|
var templateObject_1$22;
|
|
6682
6695
|
|
|
6683
|
-
var Container$
|
|
6696
|
+
var Container$1i = 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"); });
|
|
6684
6697
|
var CloseButton$1 = function (_a) {
|
|
6685
6698
|
var onClick = _a.onClick, size = _a.size;
|
|
6686
6699
|
var theme = useTheme();
|
|
6687
|
-
return (jsx$1(Container$
|
|
6700
|
+
return (jsx$1(Container$1i, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6688
6701
|
};
|
|
6689
6702
|
var templateObject_1$21;
|
|
6690
6703
|
|
|
@@ -6712,13 +6725,13 @@ var Title$8 = function (_a) {
|
|
|
6712
6725
|
};
|
|
6713
6726
|
var templateObject_1$1_;
|
|
6714
6727
|
|
|
6715
|
-
var Container$
|
|
6728
|
+
var Container$1h = 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"); });
|
|
6716
6729
|
var templateObject_1$1Z;
|
|
6717
6730
|
|
|
6718
6731
|
var TrashButton = function (_a) {
|
|
6719
6732
|
var onClick = _a.onClick, size = _a.size;
|
|
6720
6733
|
useTheme();
|
|
6721
|
-
return (jsx$1(Container$
|
|
6734
|
+
return (jsx$1(Container$1h, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsx$1(Icon.Actions.Trash, { width: size, height: size, fill: "#292929" }, void 0) }), void 0));
|
|
6722
6735
|
};
|
|
6723
6736
|
|
|
6724
6737
|
var CartProductItem = {
|
|
@@ -6730,8 +6743,8 @@ var CartProductItem = {
|
|
|
6730
6743
|
TrashButton: TrashButton,
|
|
6731
6744
|
};
|
|
6732
6745
|
|
|
6733
|
-
var Container$
|
|
6734
|
-
var MobileContainer = newStyled(Container$
|
|
6746
|
+
var Container$1g = 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"])));
|
|
6747
|
+
var MobileContainer = newStyled(Container$1g)(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6735
6748
|
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"])));
|
|
6736
6749
|
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"])));
|
|
6737
6750
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6741,7 +6754,7 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (t
|
|
|
6741
6754
|
var ClubPriceLabel = function (_a) {
|
|
6742
6755
|
var clubPrice = _a.clubPrice;
|
|
6743
6756
|
var isMobile = useWindowDimensions().isMobile;
|
|
6744
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6757
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$1g, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6745
6758
|
};
|
|
6746
6759
|
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;
|
|
6747
6760
|
|
|
@@ -6751,7 +6764,7 @@ var Spacing = function (_a) {
|
|
|
6751
6764
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6752
6765
|
};
|
|
6753
6766
|
|
|
6754
|
-
var Container$
|
|
6767
|
+
var Container$1f = 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"])));
|
|
6755
6768
|
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"])));
|
|
6756
6769
|
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"])));
|
|
6757
6770
|
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) {
|
|
@@ -6763,7 +6776,7 @@ var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __makeT
|
|
|
6763
6776
|
});
|
|
6764
6777
|
var StrengthBars = function (_a) {
|
|
6765
6778
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6766
|
-
return (jsxs$1(Container$
|
|
6779
|
+
return (jsxs$1(Container$1f, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6767
6780
|
};
|
|
6768
6781
|
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Y;
|
|
6769
6782
|
|
|
@@ -6790,7 +6803,7 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6790
6803
|
|
|
6791
6804
|
var STARTS_NUMBER = 5;
|
|
6792
6805
|
|
|
6793
|
-
var Container$
|
|
6806
|
+
var Container$1e = 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"])));
|
|
6794
6807
|
var templateObject_1$1V;
|
|
6795
6808
|
|
|
6796
6809
|
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) {
|
|
@@ -6805,7 +6818,7 @@ var StarList = function (_a) {
|
|
|
6805
6818
|
width: theme.component.stars.element[size].width,
|
|
6806
6819
|
height: theme.component.stars.element[size].height,
|
|
6807
6820
|
};
|
|
6808
|
-
return (jsx$1(Container$
|
|
6821
|
+
return (jsx$1(Container$1e, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6809
6822
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6810
6823
|
}) }, void 0));
|
|
6811
6824
|
};
|
|
@@ -6857,7 +6870,7 @@ var LabelStyles = {
|
|
|
6857
6870
|
});
|
|
6858
6871
|
},
|
|
6859
6872
|
};
|
|
6860
|
-
var Container$
|
|
6873
|
+
var Container$1d = 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"])));
|
|
6861
6874
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6862
6875
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6863
6876
|
return [
|
|
@@ -6898,7 +6911,7 @@ var Rating = function (_a) {
|
|
|
6898
6911
|
href: reviewsContainerId,
|
|
6899
6912
|
}
|
|
6900
6913
|
: {};
|
|
6901
|
-
return (jsxs$1(Container$
|
|
6914
|
+
return (jsxs$1(Container$1d, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), (reviews || reviewsText) && (jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0))] }), void 0));
|
|
6902
6915
|
};
|
|
6903
6916
|
|
|
6904
6917
|
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) {
|
|
@@ -7070,7 +7083,7 @@ var HurryUp = function (_a) {
|
|
|
7070
7083
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
7071
7084
|
};
|
|
7072
7085
|
|
|
7073
|
-
var Container$
|
|
7086
|
+
var Container$1c = 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) {
|
|
7074
7087
|
var size = _a.size;
|
|
7075
7088
|
return (size ? size : '100%');
|
|
7076
7089
|
}, function (_a) {
|
|
@@ -7102,7 +7115,7 @@ var templateObject_1$1N, templateObject_2$1q;
|
|
|
7102
7115
|
|
|
7103
7116
|
var Spinner = function (_a) {
|
|
7104
7117
|
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;
|
|
7105
|
-
return (jsx$1(Container$
|
|
7118
|
+
return (jsx$1(Container$1c, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
7106
7119
|
};
|
|
7107
7120
|
|
|
7108
7121
|
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); });
|
|
@@ -7114,7 +7127,7 @@ var ProgressBar$1 = function (_a) {
|
|
|
7114
7127
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7115
7128
|
};
|
|
7116
7129
|
|
|
7117
|
-
var Container$
|
|
7130
|
+
var Container$1b = 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"])));
|
|
7118
7131
|
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; });
|
|
7119
7132
|
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"])));
|
|
7120
7133
|
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"])));
|
|
@@ -7171,10 +7184,10 @@ var Video$1 = function (_a) {
|
|
|
7171
7184
|
}
|
|
7172
7185
|
setIsLoading(false);
|
|
7173
7186
|
};
|
|
7174
|
-
return (jsxs$1(Container$
|
|
7187
|
+
return (jsxs$1(Container$1b, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: handleOnloadedData, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7175
7188
|
};
|
|
7176
7189
|
|
|
7177
|
-
var Container$
|
|
7190
|
+
var Container$1a = newStyled.div(function (props) { return ({
|
|
7178
7191
|
height: 'auto',
|
|
7179
7192
|
textAlign: 'center',
|
|
7180
7193
|
justifyContent: 'center',
|
|
@@ -7224,10 +7237,10 @@ var IconsWithTitle = function (_a) {
|
|
|
7224
7237
|
textAlign: 'center',
|
|
7225
7238
|
lineHeight: '18px',
|
|
7226
7239
|
};
|
|
7227
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
7240
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$1a, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
7228
7241
|
};
|
|
7229
7242
|
|
|
7230
|
-
var Container$
|
|
7243
|
+
var Container$19 = 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'; });
|
|
7231
7244
|
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"])));
|
|
7232
7245
|
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'; });
|
|
7233
7246
|
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18;
|
|
@@ -7237,7 +7250,7 @@ function IconsWithTitleList(_a) {
|
|
|
7237
7250
|
if (loading) {
|
|
7238
7251
|
return jsx$1(SkeletonBox, { height: skeletonHeight !== null && skeletonHeight !== void 0 ? skeletonHeight : '56px' }, void 0);
|
|
7239
7252
|
}
|
|
7240
|
-
return (jsx$1(Container$
|
|
7253
|
+
return (jsx$1(Container$19, __assign$1({ desktopGap: itemsGapDesktop, mobileGap: itemsGapMobile }, { children: list === null || list === void 0 ? void 0 : list.map(function (item, index) {
|
|
7241
7254
|
var _a, _b, _c, _d, _e, _f;
|
|
7242
7255
|
return (jsxs$1(Wrapper$6, { children: [jsx$1(IconsWithTitle, { iconName: (_a = item.iconName) !== null && _a !== void 0 ? _a : 'CircleSolidCheck', iconFolder: (_b = item.iconFolder) !== null && _b !== void 0 ? _b : 'Actions', iconTitle: item.text, backgroundColor: "none", iconColor: (_c = item.iconColor) !== null && _c !== void 0 ? _c : '#2F806A', iconSizeDesktop: (_d = item.iconSizeDesktop) !== null && _d !== void 0 ? _d : 1.2, iconSizeMobile: (_e = item.iconSizeMobile) !== null && _e !== void 0 ? _e : 1.2, withWrapper: false, iconTitleStyle: (_f = item.iconTitleStyle) !== null && _f !== void 0 ? _f : '{"textTransform": "none", "fontSize":"16px", "marginLeft":"8px"}' }, void 0), index !== list.length - 1 && (jsx$1(DesktopDivider, { width: dividerWidth, height: dividerHeight, "data-testid": "desktop-divider" }, void 0))] }, item.text));
|
|
7243
7256
|
}) }), void 0));
|
|
@@ -7287,7 +7300,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7287
7300
|
};
|
|
7288
7301
|
}
|
|
7289
7302
|
};
|
|
7290
|
-
var Container$
|
|
7303
|
+
var Container$18 = 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) {
|
|
7291
7304
|
var backgroundColor = _a.backgroundColor;
|
|
7292
7305
|
return backgroundColor;
|
|
7293
7306
|
}, function (_a) {
|
|
@@ -7328,7 +7341,7 @@ var IconButton = function (_a) {
|
|
|
7328
7341
|
var _b, _c;
|
|
7329
7342
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
|
|
7330
7343
|
var theme = useTheme();
|
|
7331
|
-
return (jsx$1(Container$
|
|
7344
|
+
return (jsx$1(Container$18, __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));
|
|
7332
7345
|
};
|
|
7333
7346
|
var templateObject_1$1I;
|
|
7334
7347
|
|
|
@@ -7392,7 +7405,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7392
7405
|
: ComponentSize.XSmall;
|
|
7393
7406
|
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
7394
7407
|
};
|
|
7395
|
-
return (jsxs$1(Container$
|
|
7408
|
+
return (jsxs$1(Container$1z, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7396
7409
|
? finalPriceArray[0]
|
|
7397
7410
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7398
7411
|
};
|
|
@@ -7470,7 +7483,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7470
7483
|
});
|
|
7471
7484
|
});
|
|
7472
7485
|
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"])));
|
|
7473
|
-
var Container$
|
|
7486
|
+
var Container$17 = 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"])));
|
|
7474
7487
|
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"])));
|
|
7475
7488
|
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) {
|
|
7476
7489
|
var theme = _a.theme;
|
|
@@ -7632,12 +7645,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7632
7645
|
setIsLiked(function (prev) { return !prev; });
|
|
7633
7646
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7634
7647
|
};
|
|
7635
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7648
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$17, __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: {
|
|
7636
7649
|
background: {
|
|
7637
7650
|
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,
|
|
7638
7651
|
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,
|
|
7639
7652
|
},
|
|
7640
|
-
} }, 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$
|
|
7653
|
+
} }, 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$17, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), showDivider && (jsxs(Fragment, { children: [jsx(Divider, { theme: theme }, void 0), jsx(Spacing, { size: space }, void 0)] }, void 0)), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : priceAndReviewInOneLine && !ratingOnTop ? (jsxs(OneLineInfoWrapper, { children: [PriceLabelDisplay(), jsx(RatingDisplay, {}, void 0)] }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7641
7654
|
letterSpacing: '-0.05rem',
|
|
7642
7655
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && !priceAndReviewInOneLine && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7643
7656
|
e.preventDefault();
|
|
@@ -7658,7 +7671,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7658
7671
|
});
|
|
7659
7672
|
});
|
|
7660
7673
|
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; });
|
|
7661
|
-
var Container$
|
|
7674
|
+
var Container$16 = 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"])));
|
|
7662
7675
|
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"])));
|
|
7663
7676
|
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; });
|
|
7664
7677
|
var getStylesBySize$a = function (size) {
|
|
@@ -7740,9 +7753,9 @@ var ProductItemTK = function (_a) {
|
|
|
7740
7753
|
: undefined }, void 0));
|
|
7741
7754
|
};
|
|
7742
7755
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
7743
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7756
|
+
return (jsxs(ProdCardContainer$3, __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, style: {
|
|
7744
7757
|
cursor: 'pointer',
|
|
7745
|
-
} }, { 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$
|
|
7758
|
+
} }, { 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$16, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: function () {
|
|
7746
7759
|
if (!colorPicker.shouldStopCardClick) {
|
|
7747
7760
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7748
7761
|
}
|
|
@@ -7760,7 +7773,7 @@ var ProductItemTK = function (_a) {
|
|
|
7760
7773
|
if (colorPicker.shouldStopCardClick) {
|
|
7761
7774
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7762
7775
|
}
|
|
7763
|
-
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$
|
|
7776
|
+
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$16, { children: colorPicker.shouldStopCardClick ? jsx(Fragment, { children: colorPicker.component }, void 0) : null }, void 0), jsxs(Container$16, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: function () {
|
|
7764
7777
|
if (!colorPicker.shouldStopCardClick) {
|
|
7765
7778
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7766
7779
|
}
|
|
@@ -7770,10 +7783,10 @@ var ProductItemTK = function (_a) {
|
|
|
7770
7783
|
};
|
|
7771
7784
|
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;
|
|
7772
7785
|
|
|
7773
|
-
var Container$
|
|
7786
|
+
var Container$15 = 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"])));
|
|
7774
7787
|
function withProductGrid(ProductItemComponent, data) {
|
|
7775
7788
|
function WithProductGrid(props) {
|
|
7776
|
-
return (jsx$1(Container$
|
|
7789
|
+
return (jsx$1(Container$15, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7777
7790
|
}
|
|
7778
7791
|
/* istanbul ignore next */
|
|
7779
7792
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -7851,7 +7864,7 @@ var OutOfStock = function (_a) {
|
|
|
7851
7864
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7852
7865
|
};
|
|
7853
7866
|
|
|
7854
|
-
var Container$
|
|
7867
|
+
var Container$14 = 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) {
|
|
7855
7868
|
var borderColor = _a.borderColor;
|
|
7856
7869
|
return borderColor;
|
|
7857
7870
|
}, function (_a) {
|
|
@@ -7863,7 +7876,7 @@ var PatternSelector = function (_a) {
|
|
|
7863
7876
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7864
7877
|
var theme = useTheme();
|
|
7865
7878
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7866
|
-
return (jsx$1(Container$
|
|
7879
|
+
return (jsx$1(Container$14, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7867
7880
|
};
|
|
7868
7881
|
var templateObject_1$1C, templateObject_2$1h;
|
|
7869
7882
|
|
|
@@ -8122,14 +8135,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
8122
8135
|
return jsx(BaseCTA, __assign$1({}, props, { css: getStyle(theme) }), void 0);
|
|
8123
8136
|
};
|
|
8124
8137
|
|
|
8125
|
-
var Container$
|
|
8138
|
+
var Container$13 = 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; });
|
|
8126
8139
|
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"])));
|
|
8127
8140
|
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; });
|
|
8128
8141
|
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; });
|
|
8129
8142
|
var Note = function (_a) {
|
|
8130
8143
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
8131
8144
|
var theme = useTheme();
|
|
8132
|
-
return (jsxs$1(Container$
|
|
8145
|
+
return (jsxs$1(Container$13, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
8133
8146
|
};
|
|
8134
8147
|
var templateObject_1$1y, templateObject_2$1d, templateObject_3$12, templateObject_4$Q;
|
|
8135
8148
|
|
|
@@ -8403,12 +8416,12 @@ var SelectorSecondary = function (_a) {
|
|
|
8403
8416
|
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; });
|
|
8404
8417
|
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; });
|
|
8405
8418
|
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"])));
|
|
8406
|
-
var Container$
|
|
8419
|
+
var Container$12 = 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'); });
|
|
8407
8420
|
var Accordion = function (_a) {
|
|
8408
8421
|
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;
|
|
8409
8422
|
var theme = useTheme();
|
|
8410
8423
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8411
|
-
return (jsxs$1(Container$
|
|
8424
|
+
return (jsxs$1(Container$12, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8412
8425
|
};
|
|
8413
8426
|
var templateObject_1$1s, templateObject_2$17, templateObject_3$Z, templateObject_4$L;
|
|
8414
8427
|
|
|
@@ -8573,7 +8586,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8573
8586
|
};
|
|
8574
8587
|
|
|
8575
8588
|
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"])));
|
|
8576
|
-
var Container$
|
|
8589
|
+
var Container$11 = 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"])));
|
|
8577
8590
|
var FitGuarantee = function (_a) {
|
|
8578
8591
|
var _b;
|
|
8579
8592
|
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;
|
|
@@ -8584,7 +8597,7 @@ var FitGuarantee = function (_a) {
|
|
|
8584
8597
|
console.error('Icon', iconName, 'not found');
|
|
8585
8598
|
return null;
|
|
8586
8599
|
}
|
|
8587
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
8600
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$11, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$11, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8588
8601
|
margin: '0.1rem 0',
|
|
8589
8602
|
width: '100%',
|
|
8590
8603
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -8593,7 +8606,7 @@ var FitGuarantee = function (_a) {
|
|
|
8593
8606
|
};
|
|
8594
8607
|
var templateObject_1$1p, templateObject_2$14;
|
|
8595
8608
|
|
|
8596
|
-
var Container
|
|
8609
|
+
var Container$10 = 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"])));
|
|
8597
8610
|
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; });
|
|
8598
8611
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8599
8612
|
border: 'none',
|
|
@@ -8607,7 +8620,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8607
8620
|
var FitPredictor = function (_a) {
|
|
8608
8621
|
var onClick = _a.onClick;
|
|
8609
8622
|
var theme = useTheme();
|
|
8610
|
-
return (jsxs(Container
|
|
8623
|
+
return (jsxs(Container$10, __assign$1({ theme: theme }, { children: [jsx(Container$10, { 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));
|
|
8611
8624
|
};
|
|
8612
8625
|
var templateObject_1$1o, templateObject_2$13;
|
|
8613
8626
|
|
|
@@ -12947,7 +12960,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12947
12960
|
|
|
12948
12961
|
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"])));
|
|
12949
12962
|
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"])));
|
|
12950
|
-
var Container
|
|
12963
|
+
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) {
|
|
12951
12964
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12952
12965
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12953
12966
|
}, function (_a) {
|
|
@@ -12991,7 +13004,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12991
13004
|
var element = document.querySelector(".imageListContainer");
|
|
12992
13005
|
element.scrollBy(0, 200);
|
|
12993
13006
|
};
|
|
12994
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container
|
|
13007
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$$, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, adaptiveHeight: true, dots: false, slidesToShow: 4.2 }, { children: images.map(function (item, index) { return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) {
|
|
12995
13008
|
return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key));
|
|
12996
13009
|
})) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12997
13010
|
};
|
|
@@ -14587,7 +14600,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14587
14600
|
afterZoomOut: PropTypes.func
|
|
14588
14601
|
} : {};
|
|
14589
14602
|
|
|
14590
|
-
var Container$
|
|
14603
|
+
var Container$_ = 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) {
|
|
14591
14604
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14592
14605
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14593
14606
|
}, function (_a) {
|
|
@@ -14623,7 +14636,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14623
14636
|
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;
|
|
14624
14637
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14625
14638
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14626
|
-
return (jsxs$1(Container$
|
|
14639
|
+
return (jsxs$1(Container$_, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant, position: position }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
14627
14640
|
alt: content.alt,
|
|
14628
14641
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14629
14642
|
loading: 'eager',
|
|
@@ -14631,7 +14644,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14631
14644
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14632
14645
|
};
|
|
14633
14646
|
|
|
14634
|
-
var Container$
|
|
14647
|
+
var Container$Z = 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) {
|
|
14635
14648
|
var thumbnailPosition = _a.thumbnailPosition;
|
|
14636
14649
|
return thumbnailPosition === 'horizontal' ? '1fr' : 'minmax(6rem, max-content) 1fr';
|
|
14637
14650
|
});
|
|
@@ -14661,7 +14674,7 @@ var ProductGallery = function (_a) {
|
|
|
14661
14674
|
setActiveIndex(index);
|
|
14662
14675
|
};
|
|
14663
14676
|
var selectedImage = images[activeIndex];
|
|
14664
|
-
return (jsxs$1(Container$
|
|
14677
|
+
return (jsxs$1(Container$Z, __assign$1({ thumbnailPosition: thumbnailPosition }, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }), void 0));
|
|
14665
14678
|
};
|
|
14666
14679
|
|
|
14667
14680
|
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; });
|
|
@@ -14675,7 +14688,7 @@ var PaypalButton = function (_a) {
|
|
|
14675
14688
|
};
|
|
14676
14689
|
var templateObject_1$1i;
|
|
14677
14690
|
|
|
14678
|
-
var Container$
|
|
14691
|
+
var Container$Y = 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'); });
|
|
14679
14692
|
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'); });
|
|
14680
14693
|
var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14681
14694
|
var titlePosition = _a.titlePosition;
|
|
@@ -14685,7 +14698,7 @@ var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __ma
|
|
|
14685
14698
|
var ImageCardWithDescription = function (_a) {
|
|
14686
14699
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14687
14700
|
var isMobile = useWindowDimensions().isMobile;
|
|
14688
|
-
return (jsxs$1(Container$
|
|
14701
|
+
return (jsxs$1(Container$Y, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14689
14702
|
};
|
|
14690
14703
|
var templateObject_1$1h, templateObject_2$10, templateObject_3$U;
|
|
14691
14704
|
|
|
@@ -14711,7 +14724,7 @@ var containerByStatus = function (theme, status) {
|
|
|
14711
14724
|
return theme.colors.semantic.urgent.color;
|
|
14712
14725
|
return '';
|
|
14713
14726
|
};
|
|
14714
|
-
var Container$
|
|
14727
|
+
var Container$X = 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) {
|
|
14715
14728
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14716
14729
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14717
14730
|
});
|
|
@@ -14813,7 +14826,7 @@ var BaseInput = function (_a) {
|
|
|
14813
14826
|
}, [status]);
|
|
14814
14827
|
var hasValue = Boolean(value);
|
|
14815
14828
|
var errorMessage = customErrorMessage || (status === InputValidationType.Error && required);
|
|
14816
|
-
return (jsxs$1(Container$
|
|
14829
|
+
return (jsxs$1(Container$X, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14817
14830
|
onChange(event.target.value, event);
|
|
14818
14831
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
14819
14832
|
onChange('', { target: { value: '' } });
|
|
@@ -14834,7 +14847,7 @@ var Button$6 = function (_a) {
|
|
|
14834
14847
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14835
14848
|
};
|
|
14836
14849
|
|
|
14837
|
-
var Container$
|
|
14850
|
+
var Container$W = 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) {
|
|
14838
14851
|
var theme = _a.theme;
|
|
14839
14852
|
return theme.component.inputCustom.input.borderRadius;
|
|
14840
14853
|
});
|
|
@@ -14853,7 +14866,7 @@ var Custom = function (_a) {
|
|
|
14853
14866
|
text: text,
|
|
14854
14867
|
disabled: rest.disabled,
|
|
14855
14868
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14856
|
-
return (jsx$1(Container$
|
|
14869
|
+
return (jsx$1(Container$W, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14857
14870
|
};
|
|
14858
14871
|
var templateObject_1$1e, templateObject_2$Z;
|
|
14859
14872
|
|
|
@@ -14888,12 +14901,12 @@ var BasePlusButton = function (_a) {
|
|
|
14888
14901
|
};
|
|
14889
14902
|
var templateObject_1$1c;
|
|
14890
14903
|
|
|
14891
|
-
var Container$
|
|
14904
|
+
var Container$V = 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"])));
|
|
14892
14905
|
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"])));
|
|
14893
14906
|
var BasePlusIcon = function (_a) {
|
|
14894
14907
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14895
14908
|
var theme = useTheme();
|
|
14896
|
-
return (jsx$1(Container$
|
|
14909
|
+
return (jsx$1(Container$V, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14897
14910
|
};
|
|
14898
14911
|
var templateObject_1$1b, templateObject_2$X;
|
|
14899
14912
|
|
|
@@ -15042,7 +15055,7 @@ var transformStyle = function (_a) {
|
|
|
15042
15055
|
return opened
|
|
15043
15056
|
? 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%');
|
|
15044
15057
|
};
|
|
15045
|
-
var Container$
|
|
15058
|
+
var Container$U = 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) {
|
|
15046
15059
|
return "".concat(props.maxFullScreen || props.countryRedirModalWithCoupon ? '0' : 'var(--radius-regular)');
|
|
15047
15060
|
}, 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) {
|
|
15048
15061
|
var width = _a.width;
|
|
@@ -15061,7 +15074,7 @@ var Modal = function (_a) {
|
|
|
15061
15074
|
}
|
|
15062
15075
|
close();
|
|
15063
15076
|
};
|
|
15064
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
15077
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$U, __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 () {
|
|
15065
15078
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
15066
15079
|
onDismiss();
|
|
15067
15080
|
} }, void 0)] }), void 0));
|
|
@@ -18912,7 +18925,7 @@ var BarContainer = newStyled.div({
|
|
|
18912
18925
|
padding: '0 16px',
|
|
18913
18926
|
position: 'relative',
|
|
18914
18927
|
});
|
|
18915
|
-
var Container$
|
|
18928
|
+
var Container$T = newStyled.div(function (_a) {
|
|
18916
18929
|
var backgroundColor = _a.backgroundColor;
|
|
18917
18930
|
return ({
|
|
18918
18931
|
width: '475px',
|
|
@@ -18954,11 +18967,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18954
18967
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18955
18968
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18956
18969
|
};
|
|
18957
|
-
return (jsxs$1(Container$
|
|
18970
|
+
return (jsxs$1(Container$T, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18958
18971
|
};
|
|
18959
18972
|
var templateObject_1$19, templateObject_2$V;
|
|
18960
18973
|
|
|
18961
|
-
var Container$
|
|
18974
|
+
var Container$S = 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) {
|
|
18962
18975
|
var theme = _a.theme;
|
|
18963
18976
|
return theme.component.orderBar.backgroundColor;
|
|
18964
18977
|
});
|
|
@@ -18966,11 +18979,11 @@ var H1 = newStyled.h1(templateObject_2$U || (templateObject_2$U = __makeTemplate
|
|
|
18966
18979
|
var OrderBar = function (_a) {
|
|
18967
18980
|
var message = _a.message, color = _a.color;
|
|
18968
18981
|
var theme = useTheme();
|
|
18969
|
-
return (jsxs$1(Container$
|
|
18982
|
+
return (jsxs$1(Container$S, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18970
18983
|
};
|
|
18971
18984
|
var templateObject_1$18, templateObject_2$U;
|
|
18972
18985
|
|
|
18973
|
-
var Container$
|
|
18986
|
+
var Container$R = 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"])));
|
|
18974
18987
|
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"])));
|
|
18975
18988
|
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"])));
|
|
18976
18989
|
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"])));
|
|
@@ -18980,7 +18993,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o =
|
|
|
18980
18993
|
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"])));
|
|
18981
18994
|
var PackSelector = function (_a) {
|
|
18982
18995
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18983
|
-
return (jsx$1(Container$
|
|
18996
|
+
return (jsx$1(Container$R, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18984
18997
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18985
18998
|
}) }), void 0));
|
|
18986
18999
|
};
|
|
@@ -19009,7 +19022,7 @@ var PackCard = function (_a) {
|
|
|
19009
19022
|
};
|
|
19010
19023
|
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;
|
|
19011
19024
|
|
|
19012
|
-
var Container$
|
|
19025
|
+
var Container$Q = 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"])));
|
|
19013
19026
|
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"])));
|
|
19014
19027
|
var PageNumbersContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
19015
19028
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -19077,7 +19090,7 @@ var Pagination = function (_a) {
|
|
|
19077
19090
|
}
|
|
19078
19091
|
return pages;
|
|
19079
19092
|
}, [from, page, showReducedPages, to]);
|
|
19080
|
-
return (jsxs$1(Container$
|
|
19093
|
+
return (jsxs$1(Container$Q, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19081
19094
|
};
|
|
19082
19095
|
|
|
19083
19096
|
var PaginatorBlog = function (_a) {
|
|
@@ -19091,12 +19104,12 @@ var PaginatorBlog = function (_a) {
|
|
|
19091
19104
|
setPage(page);
|
|
19092
19105
|
onChange(page);
|
|
19093
19106
|
};
|
|
19094
|
-
return (jsxs$1(Container$
|
|
19107
|
+
return (jsxs$1(Container$Q, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
19095
19108
|
? theme.colors.shades['white'].color
|
|
19096
19109
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19097
19110
|
};
|
|
19098
19111
|
|
|
19099
|
-
var Container$
|
|
19112
|
+
var Container$P = 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) {
|
|
19100
19113
|
var width = _a.width;
|
|
19101
19114
|
return width;
|
|
19102
19115
|
}, function (_a) {
|
|
@@ -19112,11 +19125,11 @@ var Container$O = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __
|
|
|
19112
19125
|
var PaymentMethod = function (_a) {
|
|
19113
19126
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
19114
19127
|
var theme = useTheme();
|
|
19115
|
-
return (jsx$1(Container$
|
|
19128
|
+
return (jsx$1(Container$P, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
19116
19129
|
};
|
|
19117
19130
|
var templateObject_1$15;
|
|
19118
19131
|
|
|
19119
|
-
var Container$
|
|
19132
|
+
var Container$O = 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"])));
|
|
19120
19133
|
var IMAGE_WIDTH$1 = '63px';
|
|
19121
19134
|
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);
|
|
19122
19135
|
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({
|
|
@@ -19161,7 +19174,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19161
19174
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19162
19175
|
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;
|
|
19163
19176
|
var theme = useTheme();
|
|
19164
|
-
return (jsxs$1(Container$
|
|
19177
|
+
return (jsxs$1(Container$O, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
19165
19178
|
};
|
|
19166
19179
|
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$q, templateObject_7$n;
|
|
19167
19180
|
|
|
@@ -19206,7 +19219,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19206
19219
|
position: 'absolute',
|
|
19207
19220
|
});
|
|
19208
19221
|
});
|
|
19209
|
-
var Container$
|
|
19222
|
+
var Container$N = newStyled.div(function (_a) {
|
|
19210
19223
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19211
19224
|
return ({
|
|
19212
19225
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19220,11 +19233,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19220
19233
|
var ProgressBar = function (_a) {
|
|
19221
19234
|
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;
|
|
19222
19235
|
var theme = useTheme();
|
|
19223
|
-
return (jsxs$1(Container$
|
|
19236
|
+
return (jsxs$1(Container$N, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19224
19237
|
};
|
|
19225
19238
|
var templateObject_1$13;
|
|
19226
19239
|
|
|
19227
|
-
var Container$
|
|
19240
|
+
var Container$M = 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; });
|
|
19228
19241
|
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"])));
|
|
19229
19242
|
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"])));
|
|
19230
19243
|
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)'; });
|
|
@@ -19250,7 +19263,7 @@ var QuantityPicker = function (_a) {
|
|
|
19250
19263
|
return clamp(value);
|
|
19251
19264
|
});
|
|
19252
19265
|
}, [value, clamp]);
|
|
19253
|
-
return (jsxs$1(Container$
|
|
19266
|
+
return (jsxs$1(Container$M, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19254
19267
|
};
|
|
19255
19268
|
var templateObject_1$12, templateObject_2$Q, templateObject_3$N, templateObject_4$C;
|
|
19256
19269
|
|
|
@@ -19322,7 +19335,7 @@ var ContainerStyles$1 = {
|
|
|
19322
19335
|
};
|
|
19323
19336
|
|
|
19324
19337
|
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"])));
|
|
19325
|
-
var Container$
|
|
19338
|
+
var Container$L = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19326
19339
|
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) {
|
|
19327
19340
|
var disabled = _a.disabled;
|
|
19328
19341
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -19339,19 +19352,41 @@ var RadioPrimary = function (_a) {
|
|
|
19339
19352
|
var value = event.currentTarget.value;
|
|
19340
19353
|
onChange({ value: value, label: label });
|
|
19341
19354
|
};
|
|
19342
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
19355
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$L, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19343
19356
|
};
|
|
19344
19357
|
var templateObject_1$11, templateObject_2$P, templateObject_3$M;
|
|
19345
19358
|
|
|
19359
|
+
var Container$K = newStyled.div(function (_a) {
|
|
19360
|
+
var $horizontal = _a.$horizontal;
|
|
19361
|
+
var pseudoStyles = {
|
|
19362
|
+
content: "' '",
|
|
19363
|
+
position: 'absolute',
|
|
19364
|
+
top: '11px',
|
|
19365
|
+
left: 25,
|
|
19366
|
+
width: 'calc(100% - 50px)',
|
|
19367
|
+
height: 1,
|
|
19368
|
+
backgroundColor: 'var(--colors-shades-250-color)',
|
|
19369
|
+
zIndex: -1,
|
|
19370
|
+
};
|
|
19371
|
+
return {
|
|
19372
|
+
display: 'flex',
|
|
19373
|
+
flexDirection: $horizontal ? 'row' : 'column',
|
|
19374
|
+
justifyContent: 'space-between',
|
|
19375
|
+
width: '100%',
|
|
19376
|
+
position: 'relative',
|
|
19377
|
+
'&:after': $horizontal ? pseudoStyles : {},
|
|
19378
|
+
};
|
|
19379
|
+
});
|
|
19380
|
+
|
|
19346
19381
|
var RadioGroupInput = function (_a) {
|
|
19347
|
-
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
19382
|
+
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, horizontal = _a.horizontal;
|
|
19348
19383
|
var _e = useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
|
|
19349
19384
|
var handleChange = function (selected) {
|
|
19350
19385
|
setSelectedInput(selected);
|
|
19351
19386
|
onChange(selected);
|
|
19352
19387
|
};
|
|
19353
|
-
return (jsx$1(
|
|
19354
|
-
return (jsx$1(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", style: style }, index));
|
|
19388
|
+
return (jsx$1(Container$K, __assign$1({ "data-testid": "group-container", "$horizontal": horizontal }, { children: options.map(function (option, index) {
|
|
19389
|
+
return (jsx$1(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", horizontal: horizontal, style: style }, index));
|
|
19355
19390
|
}) }), void 0));
|
|
19356
19391
|
};
|
|
19357
19392
|
|
|
@@ -21970,7 +22005,7 @@ var ContentGallery = function (_a) {
|
|
|
21970
22005
|
|
|
21971
22006
|
var NavButtonContainer$1 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21972
22007
|
var Button$1 = newStyled.button(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21973
|
-
var Container$8 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: calc(100vh - 186px)
|
|
22008
|
+
var Container$8 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: calc(100vh - 186px);\n margin: 0 auto;\n max-width: 100%;\n overflow: hidden;\n\n @supports (max-height: calc(100dvh - 186px)) {\n max-height: calc(100dvh - 186px);\n }\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: calc(100vh - 86px);\n margin: 0 auto;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n max-height: calc(100vh - 86px);\n margin: 0 auto;\n padding: 0 8px;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n\n @supports (max-height: calc(100dvh - 186px)) {\n max-height: calc(100dvh - 186px);\n }\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n max-height: calc(100vh - 86px);\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n\n @supports (max-height: calc(100dvh - 186px)) {\n max-height: calc(100dvh - 186px);\n }\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: calc(100vh - 186px);\n margin: 0 auto;\n max-width: 100%;\n overflow: hidden;\n\n @supports (max-height: calc(100dvh - 186px)) {\n max-height: calc(100dvh - 186px);\n }\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: calc(100vh - 86px);\n margin: 0 auto;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n max-height: calc(100vh - 86px);\n margin: 0 auto;\n padding: 0 8px;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n\n @supports (max-height: calc(100dvh - 186px)) {\n max-height: calc(100dvh - 186px);\n }\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n max-height: calc(100vh - 86px);\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n\n @supports (max-height: calc(100dvh - 186px)) {\n max-height: calc(100dvh - 186px);\n }\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
21974
22009
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21975
22010
|
return borderRadiusVariant &&
|
|
21976
22011
|
"\n border-radius: 40px;\n ";
|
|
@@ -22113,7 +22148,6 @@ var Container$6 = newStyled.div({
|
|
|
22113
22148
|
right: 0,
|
|
22114
22149
|
display: 'flex',
|
|
22115
22150
|
flexDirection: 'column',
|
|
22116
|
-
justifyContent: 'center',
|
|
22117
22151
|
alignItems: 'center',
|
|
22118
22152
|
});
|
|
22119
22153
|
var SubContainer = newStyled.div({
|