@trafilea/afrodita-components 6.34.4 → 6.34.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +3 -1
- package/build/index.d.ts +25 -43
- package/build/index.esm.css +3 -1
- package/build/index.esm.js +691 -530
- package/build/index.esm.js.map +1 -1
- package/build/index.js +691 -530
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3181,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3181
3181
|
};
|
|
3182
3182
|
}
|
|
3183
3183
|
};
|
|
3184
|
-
var Container$
|
|
3184
|
+
var Container$1m = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __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) {
|
|
3185
3185
|
var backgroundColor = _a.backgroundColor;
|
|
3186
3186
|
return backgroundColor;
|
|
3187
3187
|
}, function (_a) {
|
|
@@ -3203,7 +3203,7 @@ var Container$1l = newStyled.div(templateObject_1$2g || (templateObject_1$2g = _
|
|
|
3203
3203
|
var size = _a.size;
|
|
3204
3204
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3205
3205
|
});
|
|
3206
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3206
|
+
var H3$3 = newStyled.h3(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3207
3207
|
var textColor = _a.textColor;
|
|
3208
3208
|
return textColor;
|
|
3209
3209
|
}, function (_a) {
|
|
@@ -3218,9 +3218,9 @@ var H3$3 = newStyled.h3(templateObject_2$1C || (templateObject_2$1C = __makeTemp
|
|
|
3218
3218
|
var ClubOfferTag = function (_a) {
|
|
3219
3219
|
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;
|
|
3220
3220
|
var theme = useTheme();
|
|
3221
|
-
return (jsx$1(Container$
|
|
3221
|
+
return (jsx$1(Container$1m, __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$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3222
3222
|
};
|
|
3223
|
-
var templateObject_1$
|
|
3223
|
+
var templateObject_1$2h, templateObject_2$1D;
|
|
3224
3224
|
|
|
3225
3225
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3226
3226
|
var _a, _b, _c;
|
|
@@ -3251,7 +3251,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3251
3251
|
};
|
|
3252
3252
|
}
|
|
3253
3253
|
};
|
|
3254
|
-
var Container$
|
|
3254
|
+
var Container$1l = 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) {
|
|
3255
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3256
3256
|
return backgroundColor;
|
|
3257
3257
|
}, function (_a) {
|
|
@@ -3273,7 +3273,7 @@ var Container$1k = newStyled.div(templateObject_1$2f || (templateObject_1$2f = _
|
|
|
3273
3273
|
var size = _a.size;
|
|
3274
3274
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3275
3275
|
});
|
|
3276
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3276
|
+
var H3$2 = newStyled.h3(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3277
3277
|
var textColor = _a.textColor;
|
|
3278
3278
|
return textColor;
|
|
3279
3279
|
}, function (_a) {
|
|
@@ -3288,9 +3288,9 @@ var H3$2 = newStyled.h3(templateObject_2$1B || (templateObject_2$1B = __makeTemp
|
|
|
3288
3288
|
var DiscountTag$3 = function (_a) {
|
|
3289
3289
|
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;
|
|
3290
3290
|
var theme = useTheme();
|
|
3291
|
-
return (jsx$1(Container$
|
|
3291
|
+
return (jsx$1(Container$1l, __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$2, __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));
|
|
3292
3292
|
};
|
|
3293
|
-
var templateObject_1$
|
|
3293
|
+
var templateObject_1$2g, templateObject_2$1C;
|
|
3294
3294
|
|
|
3295
3295
|
var Viewports = {
|
|
3296
3296
|
mobile: 'mobile',
|
|
@@ -3399,8 +3399,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3399
3399
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3400
3400
|
}
|
|
3401
3401
|
};
|
|
3402
|
-
var Container$
|
|
3403
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1k = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1B || (templateObject_2$1B = __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) {
|
|
3404
3404
|
var weight = _a.weight;
|
|
3405
3405
|
return (weight ? weight : '400');
|
|
3406
3406
|
}, function (_a) {
|
|
@@ -3424,7 +3424,7 @@ var Price = newStyled.p(templateObject_2$1A || (templateObject_2$1A = __makeTemp
|
|
|
3424
3424
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3425
3425
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3426
3426
|
});
|
|
3427
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3427
|
+
var TagContainer = newStyled.div(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3428
3428
|
var _b;
|
|
3429
3429
|
var size = _a.size;
|
|
3430
3430
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3455,11 +3455,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3455
3455
|
: ComponentSize.XSmall;
|
|
3456
3456
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3457
3457
|
};
|
|
3458
|
-
return (jsxs$1(Container$
|
|
3458
|
+
return (jsxs$1(Container$1k, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (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, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3459
3459
|
};
|
|
3460
|
-
var templateObject_1$
|
|
3460
|
+
var templateObject_1$2f, templateObject_2$1B, templateObject_3$1e;
|
|
3461
3461
|
|
|
3462
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3463
3463
|
var PriceLabelV2$1 = function (_a) {
|
|
3464
3464
|
var _b;
|
|
3465
3465
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3512,7 +3512,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3512
3512
|
var savetoString = saveto.toFixed(2);
|
|
3513
3513
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3514
3514
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3515
|
-
return (jsxs$1(Container$
|
|
3515
|
+
return (jsxs$1(Container$1k, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3516
3516
|
? finalPriceArray[0]
|
|
3517
3517
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3518
3518
|
marginTop: '-6px',
|
|
@@ -3528,11 +3528,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3528
3528
|
lineHeight: '22px',
|
|
3529
3529
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3530
3530
|
};
|
|
3531
|
-
var templateObject_1$
|
|
3531
|
+
var templateObject_1$2e;
|
|
3532
3532
|
|
|
3533
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3534
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3535
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3533
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3534
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3535
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3536
3536
|
var PriceLabelV3 = function (_a) {
|
|
3537
3537
|
var _b;
|
|
3538
3538
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3587,7 +3587,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3587
3587
|
return null;
|
|
3588
3588
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3589
3589
|
};
|
|
3590
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3590
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1k, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1k, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3591
3591
|
marginTop: '-5px',
|
|
3592
3592
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __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, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3593
3593
|
marginTop: '-6px',
|
|
@@ -3603,9 +3603,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3603
3603
|
lineHeight: '22px',
|
|
3604
3604
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3605
3605
|
};
|
|
3606
|
-
var templateObject_1$
|
|
3606
|
+
var templateObject_1$2d, templateObject_2$1A, templateObject_3$1d;
|
|
3607
3607
|
|
|
3608
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3608
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3609
3609
|
var PriceLabel = function (_a) {
|
|
3610
3610
|
var _b;
|
|
3611
3611
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3633,15 +3633,15 @@ var PriceLabel = function (_a) {
|
|
|
3633
3633
|
};
|
|
3634
3634
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3635
3635
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3636
|
-
return (jsxs$1(Container$
|
|
3636
|
+
return (jsxs$1(Container$1k, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3637
3637
|
marginTop: '-5px',
|
|
3638
3638
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __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, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3639
3639
|
marginTop: '-6px',
|
|
3640
3640
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3641
3641
|
};
|
|
3642
|
-
var templateObject_1$
|
|
3642
|
+
var templateObject_1$2c;
|
|
3643
3643
|
|
|
3644
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3644
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3645
3645
|
var PriceLabelV2 = function (_a) {
|
|
3646
3646
|
var _b;
|
|
3647
3647
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3672,13 +3672,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3672
3672
|
var finalPriceString = finalPriceArray[0]
|
|
3673
3673
|
? finalPriceArray[0]
|
|
3674
3674
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3675
|
-
return (jsxs$1(Container$
|
|
3675
|
+
return (jsxs$1(Container$1k, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3676
3676
|
};
|
|
3677
|
-
var templateObject_1$
|
|
3677
|
+
var templateObject_1$2b;
|
|
3678
3678
|
|
|
3679
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3680
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3681
|
-
var templateObject_1$
|
|
3679
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3680
|
+
var ImgWrapper = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3681
|
+
var templateObject_1$2a, templateObject_2$1z;
|
|
3682
3682
|
|
|
3683
3683
|
function ClubPriceMemberLabel(_a) {
|
|
3684
3684
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3687,7 +3687,7 @@ function ClubPriceMemberLabel(_a) {
|
|
|
3687
3687
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3688
3688
|
}
|
|
3689
3689
|
|
|
3690
|
-
var Container$
|
|
3690
|
+
var Container$1j = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __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) {
|
|
3691
3691
|
var height = _a.height;
|
|
3692
3692
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3693
3693
|
}, function (_a) {
|
|
@@ -3712,11 +3712,11 @@ var Container$1i = newStyled.div(templateObject_1$28 || (templateObject_1$28 = _
|
|
|
3712
3712
|
var SkeletonBox = function (_a) {
|
|
3713
3713
|
var width = _a.width, height = _a.height;
|
|
3714
3714
|
var theme = useTheme();
|
|
3715
|
-
return jsx$1(Container$
|
|
3715
|
+
return jsx$1(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3716
3716
|
};
|
|
3717
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$29;
|
|
3718
3718
|
|
|
3719
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3719
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3720
3720
|
var width = _a.width;
|
|
3721
3721
|
return width;
|
|
3722
3722
|
}, function (_a) {
|
|
@@ -3732,7 +3732,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$27 || (templateObject_1$27
|
|
|
3732
3732
|
var opacity = _a.opacity;
|
|
3733
3733
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3734
3734
|
});
|
|
3735
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3735
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3736
3736
|
var width = _a.width;
|
|
3737
3737
|
return width;
|
|
3738
3738
|
}, function (_a) {
|
|
@@ -3745,7 +3745,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1x || (templateObject_2$
|
|
|
3745
3745
|
var opacity = _a.opacity;
|
|
3746
3746
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3747
3747
|
});
|
|
3748
|
-
var templateObject_1$
|
|
3748
|
+
var templateObject_1$28, templateObject_2$1y;
|
|
3749
3749
|
|
|
3750
3750
|
/* eslint-disable no-undef */
|
|
3751
3751
|
var cache = new Map();
|
|
@@ -3921,24 +3921,24 @@ var buildImageUrl = function (_a) {
|
|
|
3921
3921
|
}
|
|
3922
3922
|
};
|
|
3923
3923
|
|
|
3924
|
-
var Img = newStyled.img(templateObject_1$
|
|
3924
|
+
var Img$1 = newStyled.img(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3925
3925
|
var Image$3 = function (_a) {
|
|
3926
3926
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3927
3927
|
var config = useTheme().config;
|
|
3928
3928
|
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3929
3929
|
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3930
3930
|
: src;
|
|
3931
|
-
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3931
|
+
return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3932
3932
|
};
|
|
3933
|
-
var templateObject_1$
|
|
3933
|
+
var templateObject_1$27;
|
|
3934
3934
|
|
|
3935
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3936
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3937
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3935
|
+
var LabelWrapper = newStyled.label(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3936
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3937
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3938
3938
|
var $color = _a.$color;
|
|
3939
3939
|
return $color;
|
|
3940
3940
|
});
|
|
3941
|
-
var templateObject_1$
|
|
3941
|
+
var templateObject_1$26, templateObject_2$1x, templateObject_3$1c;
|
|
3942
3942
|
|
|
3943
3943
|
var ToggleComponent = function (_a) {
|
|
3944
3944
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4772,9 +4772,9 @@ function jsxs(type, props, key) {
|
|
|
4772
4772
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4773
4773
|
// `variants` styles that are consistent through all themes.
|
|
4774
4774
|
var TAGS = {
|
|
4775
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4776
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4777
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4775
|
+
hero1: newStyled.h1(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
hero2: newStyled.h2(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
hero3: newStyled.h3(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject([""], [""]))),
|
|
4778
4778
|
display1: newStyled.h1(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject([""], [""]))),
|
|
4779
4779
|
display2: newStyled.h2(templateObject_5$J || (templateObject_5$J = __makeTemplateObject([""], [""]))),
|
|
4780
4780
|
display3: newStyled.h3(templateObject_6$E || (templateObject_6$E = __makeTemplateObject([""], [""]))),
|
|
@@ -4908,17 +4908,17 @@ var DEFAULTS = {
|
|
|
4908
4908
|
size: 'regular',
|
|
4909
4909
|
},
|
|
4910
4910
|
};
|
|
4911
|
-
var templateObject_1$
|
|
4911
|
+
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$u, templateObject_8$n, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4912
4912
|
|
|
4913
|
-
var Container$
|
|
4914
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4915
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4913
|
+
var Container$1i = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __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"])));
|
|
4914
|
+
var Card$4 = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __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"])));
|
|
4915
|
+
var Tag$2 = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __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"])));
|
|
4916
4916
|
var Label$7 = newStyled.div(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
4917
4917
|
var Check$1 = newStyled.div(templateObject_5$I || (templateObject_5$I = __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"])));
|
|
4918
4918
|
var DiscountContainer$1 = newStyled.div(templateObject_6$D || (templateObject_6$D = __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"])));
|
|
4919
4919
|
var PackSelectorV2 = function (_a) {
|
|
4920
4920
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4921
|
-
return (jsx$1(Container$
|
|
4921
|
+
return (jsx$1(Container$1i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4922
4922
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4923
4923
|
}) }), void 0));
|
|
4924
4924
|
};
|
|
@@ -4940,27 +4940,27 @@ var PackCard$1 = function (_a) {
|
|
|
4940
4940
|
currency: currencyCode || 'USD',
|
|
4941
4941
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4942
4942
|
};
|
|
4943
|
-
var templateObject_1$
|
|
4943
|
+
var templateObject_1$24, templateObject_2$1v, templateObject_3$1a, templateObject_4$X, templateObject_5$I, templateObject_6$D;
|
|
4944
4944
|
|
|
4945
|
-
var Container$
|
|
4946
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4945
|
+
var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4946
|
+
var DropContainer = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4947
4947
|
var DropList = function (_a) {
|
|
4948
4948
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4949
|
-
return (jsx$1(Container$
|
|
4949
|
+
return (jsx$1(Container$1h, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4950
4950
|
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));
|
|
4951
4951
|
}) }, void 0));
|
|
4952
4952
|
};
|
|
4953
|
-
var templateObject_1$
|
|
4953
|
+
var templateObject_1$23, templateObject_2$1u;
|
|
4954
4954
|
|
|
4955
4955
|
var DROPS_TOTAL = 5;
|
|
4956
|
-
var Container$
|
|
4957
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4958
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4956
|
+
var Container$1g = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4957
|
+
var Title$b = newStyled.p(templateObject_2$1t || (templateObject_2$1t = __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"])));
|
|
4958
|
+
var Description$3 = newStyled.p(templateObject_3$19 || (templateObject_3$19 = __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"])));
|
|
4959
4959
|
var AbsorbencyLevel = function (_a) {
|
|
4960
4960
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4961
|
-
return (jsxs$1(Container$
|
|
4961
|
+
return (jsxs$1(Container$1g, { 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));
|
|
4962
4962
|
};
|
|
4963
|
-
var templateObject_1$
|
|
4963
|
+
var templateObject_1$22, templateObject_2$1t, templateObject_3$19;
|
|
4964
4964
|
|
|
4965
4965
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4966
4966
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5036,7 +5036,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5036
5036
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5037
5037
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5038
5038
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5039
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5039
|
+
var StyledContent$1 = newStyled.button(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5040
5040
|
var Accordion$1 = function (_a) {
|
|
5041
5041
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5042
5042
|
var theme = useTheme();
|
|
@@ -5060,9 +5060,9 @@ var Accordion$1 = function (_a) {
|
|
|
5060
5060
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5061
5061
|
} }), void 0));
|
|
5062
5062
|
};
|
|
5063
|
-
var templateObject_1$
|
|
5063
|
+
var templateObject_1$21;
|
|
5064
5064
|
|
|
5065
|
-
var Container$
|
|
5065
|
+
var Container$1f = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5066
5066
|
var AccordionOptions = function (_a) {
|
|
5067
5067
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5068
5068
|
var _b = useState({
|
|
@@ -5075,7 +5075,7 @@ var AccordionOptions = function (_a) {
|
|
|
5075
5075
|
}
|
|
5076
5076
|
return false;
|
|
5077
5077
|
};
|
|
5078
|
-
return (jsx$1(Container$
|
|
5078
|
+
return (jsx$1(Container$1f, { children: accordions.map(function (accordion, index) {
|
|
5079
5079
|
var forceOpenValue = getForceOpen(index);
|
|
5080
5080
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5081
5081
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5086,7 +5086,7 @@ var AccordionOptions = function (_a) {
|
|
|
5086
5086
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5087
5087
|
}) }, void 0));
|
|
5088
5088
|
};
|
|
5089
|
-
var templateObject_1$
|
|
5089
|
+
var templateObject_1$20;
|
|
5090
5090
|
|
|
5091
5091
|
/**
|
|
5092
5092
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5222,27 +5222,27 @@ var isValidDate = function (value) {
|
|
|
5222
5222
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5223
5223
|
};
|
|
5224
5224
|
|
|
5225
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5226
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5227
|
-
var templateObject_1$
|
|
5225
|
+
var Bold = newStyled.span(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5226
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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"])));
|
|
5227
|
+
var templateObject_1$1$, templateObject_2$1s;
|
|
5228
5228
|
|
|
5229
|
-
var Container$
|
|
5229
|
+
var Container$1e = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __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) {
|
|
5230
5230
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5231
5231
|
return width;
|
|
5232
5232
|
}, function (_a) {
|
|
5233
5233
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5234
5234
|
return height;
|
|
5235
5235
|
});
|
|
5236
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5237
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5236
|
+
var FlexCentered = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __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"])));
|
|
5237
|
+
var LeftSide = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
5238
5238
|
var RightSide = newStyled.div(templateObject_4$W || (templateObject_4$W = __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"])));
|
|
5239
5239
|
var FlexStart = newStyled.div(templateObject_5$H || (templateObject_5$H = __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"])));
|
|
5240
|
-
var templateObject_1$
|
|
5240
|
+
var templateObject_1$1_, templateObject_2$1r, templateObject_3$18, templateObject_4$W, templateObject_5$H;
|
|
5241
5241
|
|
|
5242
5242
|
var CouponCard = function (_a) {
|
|
5243
5243
|
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;
|
|
5244
5244
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5245
|
-
return (jsxs$1(Container$
|
|
5245
|
+
return (jsxs$1(Container$1e, __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 () {
|
|
5246
5246
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5247
5247
|
setShowCoupon(function (prev) { return !prev; });
|
|
5248
5248
|
} }, 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: {
|
|
@@ -5293,14 +5293,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5293
5293
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5294
5294
|
};
|
|
5295
5295
|
|
|
5296
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5297
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5296
|
+
var ErrorText = newStyled.h3(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5297
|
+
var ErrorContainer = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5298
5298
|
var Error$1 = function (_a) {
|
|
5299
5299
|
var error = _a.error;
|
|
5300
5300
|
var theme = useTheme();
|
|
5301
5301
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5302
5302
|
};
|
|
5303
|
-
var templateObject_1$
|
|
5303
|
+
var templateObject_1$1Z, templateObject_2$1q;
|
|
5304
5304
|
|
|
5305
5305
|
var BaseSelectButton = function (_a) {
|
|
5306
5306
|
var children = _a.children, as = _a.as;
|
|
@@ -5317,7 +5317,7 @@ function BaseSelectOption(_a) {
|
|
|
5317
5317
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5318
5318
|
}
|
|
5319
5319
|
|
|
5320
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5320
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5321
5321
|
function BaseSelect(_a) {
|
|
5322
5322
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5323
5323
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5327,7 +5327,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5327
5327
|
Options: BaseSelectOptions,
|
|
5328
5328
|
Option: BaseSelectOption,
|
|
5329
5329
|
});
|
|
5330
|
-
var templateObject_1$
|
|
5330
|
+
var templateObject_1$1Y;
|
|
5331
5331
|
|
|
5332
5332
|
var CustomButton = newStyled.button(function (_a) {
|
|
5333
5333
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5366,7 +5366,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5366
5366
|
});
|
|
5367
5367
|
});
|
|
5368
5368
|
// TODO Remove this when we find the real solution
|
|
5369
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5369
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5370
5370
|
var open = _a.open;
|
|
5371
5371
|
return open &&
|
|
5372
5372
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5386,7 +5386,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5386
5386
|
} }), void 0));
|
|
5387
5387
|
};
|
|
5388
5388
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5389
|
-
var templateObject_1$
|
|
5389
|
+
var templateObject_1$1X;
|
|
5390
5390
|
|
|
5391
5391
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5392
5392
|
var theme = _a.theme;
|
|
@@ -5553,7 +5553,7 @@ var CustomCheckboxStyles = {
|
|
|
5553
5553
|
},
|
|
5554
5554
|
};
|
|
5555
5555
|
|
|
5556
|
-
var Container$
|
|
5556
|
+
var Container$1d = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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"])));
|
|
5557
5557
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5558
5558
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5559
5559
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5564,7 +5564,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5564
5564
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5565
5565
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5566
5566
|
]; });
|
|
5567
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5567
|
+
var Input$5 = newStyled.input(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5568
5568
|
var disabled = _a.disabled;
|
|
5569
5569
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5570
5570
|
});
|
|
@@ -5578,9 +5578,9 @@ var Checkbox = function (_a) {
|
|
|
5578
5578
|
}
|
|
5579
5579
|
onChange(e.target.checked);
|
|
5580
5580
|
};
|
|
5581
|
-
return (jsxs$1(Container$
|
|
5581
|
+
return (jsxs$1(Container$1d, { 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: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5582
5582
|
};
|
|
5583
|
-
var templateObject_1$
|
|
5583
|
+
var templateObject_1$1W, templateObject_2$1p;
|
|
5584
5584
|
|
|
5585
5585
|
var CustomOption = newStyled.li(function (_a) {
|
|
5586
5586
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5629,9 +5629,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5629
5629
|
Option: BaseDropdownOption,
|
|
5630
5630
|
});
|
|
5631
5631
|
|
|
5632
|
-
var Container$
|
|
5633
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5634
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5632
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""])));
|
|
5633
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
5634
|
+
var SelectedOption = newStyled.span(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5635
5635
|
var fontWeight = _a.fontWeight;
|
|
5636
5636
|
return fontWeight || '';
|
|
5637
5637
|
});
|
|
@@ -5664,10 +5664,10 @@ function SimpleDropdown(_a) {
|
|
|
5664
5664
|
}
|
|
5665
5665
|
setSelectedValue(value);
|
|
5666
5666
|
}, [value, options, initialValue]);
|
|
5667
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5667
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1c : Fragment$1;
|
|
5668
5668
|
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));
|
|
5669
5669
|
}
|
|
5670
|
-
var templateObject_1$
|
|
5670
|
+
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17;
|
|
5671
5671
|
|
|
5672
5672
|
/* base styles & size variants */
|
|
5673
5673
|
var CustomRadioStyles$2 = {
|
|
@@ -5732,9 +5732,9 @@ var ContainerStyles$2 = {
|
|
|
5732
5732
|
},
|
|
5733
5733
|
};
|
|
5734
5734
|
|
|
5735
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5736
|
-
var Container$
|
|
5737
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5735
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5736
|
+
var Container$1b = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5737
|
+
var Input$4 = newStyled.input(templateObject_2$1n || (templateObject_2$1n = __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) {
|
|
5738
5738
|
var disabled = _a.disabled;
|
|
5739
5739
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5740
5740
|
});
|
|
@@ -5742,7 +5742,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5742
5742
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5743
5743
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5744
5744
|
]; });
|
|
5745
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5745
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5746
5746
|
var theme = _a.theme;
|
|
5747
5747
|
return theme.component.radio.textSize;
|
|
5748
5748
|
}, function (_a) {
|
|
@@ -5766,9 +5766,9 @@ var RadioInput = function (_a) {
|
|
|
5766
5766
|
var value = event.currentTarget.value;
|
|
5767
5767
|
onChange({ value: value, label: label });
|
|
5768
5768
|
};
|
|
5769
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5769
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1b, __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));
|
|
5770
5770
|
};
|
|
5771
|
-
var templateObject_1$
|
|
5771
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V;
|
|
5772
5772
|
|
|
5773
5773
|
var useOnClickOutside = function (ref, handler) {
|
|
5774
5774
|
useEffect(function () {
|
|
@@ -5861,7 +5861,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5861
5861
|
}
|
|
5862
5862
|
};
|
|
5863
5863
|
|
|
5864
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5864
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5865
5865
|
var position = _a.position;
|
|
5866
5866
|
return getWrapperFlexDirection(position);
|
|
5867
5867
|
}, function (_a) {
|
|
@@ -5871,7 +5871,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __ma
|
|
|
5871
5871
|
var disableHover = _a.disableHover;
|
|
5872
5872
|
return (disableHover ? 0 : 1);
|
|
5873
5873
|
});
|
|
5874
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5874
|
+
var TooltipContainer = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5875
5875
|
var position = _a.position;
|
|
5876
5876
|
return getContainerFlexDirection(position);
|
|
5877
5877
|
}, function (_a) {
|
|
@@ -5899,7 +5899,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l
|
|
|
5899
5899
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5900
5900
|
return actual === expected ? margin : '0';
|
|
5901
5901
|
};
|
|
5902
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5902
|
+
var ContentWrapper = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5903
5903
|
var borderColor = _a.borderColor;
|
|
5904
5904
|
return borderColor;
|
|
5905
5905
|
}, function (_a) {
|
|
@@ -5921,12 +5921,12 @@ var Title$a = newStyled.h1(templateObject_6$C || (templateObject_6$C = __makeTem
|
|
|
5921
5921
|
var color = _a.color;
|
|
5922
5922
|
return color;
|
|
5923
5923
|
});
|
|
5924
|
-
var IconContainer$
|
|
5924
|
+
var IconContainer$6 = newStyled.div(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5925
5925
|
var CloseToolTip = newStyled.button(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5926
5926
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5927
5927
|
return right;
|
|
5928
5928
|
});
|
|
5929
|
-
var templateObject_1$
|
|
5929
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$C, templateObject_7$t, templateObject_8$m;
|
|
5930
5930
|
|
|
5931
5931
|
var Tooltip = function (_a) {
|
|
5932
5932
|
var _b;
|
|
@@ -5946,7 +5946,7 @@ var Tooltip = function (_a) {
|
|
|
5946
5946
|
var ref = tooltipRef.current;
|
|
5947
5947
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5948
5948
|
}, [tooltipRef]);
|
|
5949
|
-
return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$
|
|
5949
|
+
return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$6, { children: React__default.createElement(header.Icon, {
|
|
5950
5950
|
testId: 'HeaderIcon',
|
|
5951
5951
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5952
5952
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -5969,8 +5969,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5969
5969
|
};
|
|
5970
5970
|
};
|
|
5971
5971
|
|
|
5972
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
5973
|
-
var ContainerBase$3 = newStyled.div(templateObject_2$
|
|
5972
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5973
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5974
5974
|
var selected = _a.selected, theme = _a.theme;
|
|
5975
5975
|
return selected
|
|
5976
5976
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5984,7 +5984,7 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1k || (templateObject_2$1k
|
|
|
5984
5984
|
var theme = _a.theme;
|
|
5985
5985
|
return theme.colors.pallete.primary.color;
|
|
5986
5986
|
});
|
|
5987
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$
|
|
5987
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5988
5988
|
var onClick = _a.onClick;
|
|
5989
5989
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5990
5990
|
});
|
|
@@ -6006,8 +6006,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6006
6006
|
var selected = _a.selected, theme = _a.theme;
|
|
6007
6007
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6008
6008
|
});
|
|
6009
|
-
var Container$
|
|
6010
|
-
var templateObject_1$
|
|
6009
|
+
var Container$1a = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6010
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$s, templateObject_8$l, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6011
6011
|
|
|
6012
6012
|
var radioIds$2 = {
|
|
6013
6013
|
oneTime: {
|
|
@@ -6057,17 +6057,17 @@ var Autoship = function (_a) {
|
|
|
6057
6057
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6058
6058
|
};
|
|
6059
6059
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6060
|
-
return (jsxs$1(Container$
|
|
6060
|
+
return (jsxs$1(Container$1a, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, 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 () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$3, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { 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, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6061
6061
|
? benefitsColor.selected
|
|
6062
6062
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver 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$3, { 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));
|
|
6063
6063
|
};
|
|
6064
6064
|
|
|
6065
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6065
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6066
6066
|
var theme = _a.theme;
|
|
6067
6067
|
return theme.name === 'TheSpaDr' &&
|
|
6068
6068
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6069
6069
|
});
|
|
6070
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6070
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6071
6071
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6072
6072
|
return isSelected
|
|
6073
6073
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6083,7 +6083,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6083
6083
|
}
|
|
6084
6084
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6085
6085
|
};
|
|
6086
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
6086
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6087
6087
|
var selected = _a.selected, theme = _a.theme;
|
|
6088
6088
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6089
6089
|
}, function (_a) {
|
|
@@ -6115,12 +6115,12 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateOb
|
|
|
6115
6115
|
var selected = _a.selected, theme = _a.theme;
|
|
6116
6116
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6117
6117
|
});
|
|
6118
|
-
var Container$
|
|
6118
|
+
var Container$19 = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6119
6119
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6120
6120
|
var theme = _a.theme;
|
|
6121
6121
|
return theme.component.autoship.tooltip.margin;
|
|
6122
6122
|
});
|
|
6123
|
-
var templateObject_1$
|
|
6123
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6124
6124
|
|
|
6125
6125
|
var radioIds$1 = {
|
|
6126
6126
|
oneTime: {
|
|
@@ -6180,7 +6180,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6180
6180
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6181
6181
|
};
|
|
6182
6182
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6183
|
-
return (jsxs$1(Container$
|
|
6183
|
+
return (jsxs$1(Container$19, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$2, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$2, __assign$1({ isSelected: radioIds$1.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$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.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$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$2, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6184
6184
|
? benefitsColor.selected
|
|
6185
6185
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6186
6186
|
};
|
|
@@ -6198,13 +6198,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6198
6198
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6199
6199
|
_a$2);
|
|
6200
6200
|
|
|
6201
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6202
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6203
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6201
|
+
var CustomerDetails = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""])));
|
|
6202
|
+
var CustomerInfo = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6203
|
+
var Name = newStyled.h4(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6204
6204
|
var StarIconContainer = newStyled.div(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6205
6205
|
var Description$2 = newStyled.p(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6206
6206
|
var ReviewDays = newStyled.span(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6207
|
-
var templateObject_1$
|
|
6207
|
+
var templateObject_1$1Q, templateObject_2$1j, templateObject_3$12, templateObject_4$R, templateObject_5$D, templateObject_6$z;
|
|
6208
6208
|
|
|
6209
6209
|
var NameWithStars = function (_a) {
|
|
6210
6210
|
var name = _a.name, size = _a.size;
|
|
@@ -6222,9 +6222,9 @@ var ResultFeedback = function (_a) {
|
|
|
6222
6222
|
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));
|
|
6223
6223
|
};
|
|
6224
6224
|
|
|
6225
|
-
var Container$
|
|
6226
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6227
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6225
|
+
var Container$18 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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; });
|
|
6226
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
6227
|
+
var ImageCard = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __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; });
|
|
6228
6228
|
var UserInfoText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __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) {
|
|
6229
6229
|
var theme = _a.theme;
|
|
6230
6230
|
return theme.colors.pallete.secondary.color;
|
|
@@ -6235,7 +6235,7 @@ var UserInfoText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __m
|
|
|
6235
6235
|
var theme = _a.theme, size = _a.size;
|
|
6236
6236
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6237
6237
|
});
|
|
6238
|
-
var templateObject_1$
|
|
6238
|
+
var templateObject_1$1P, templateObject_2$1i, templateObject_3$11, templateObject_4$Q;
|
|
6239
6239
|
|
|
6240
6240
|
/* base styles & size variants */
|
|
6241
6241
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6310,10 +6310,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6310
6310
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6311
6311
|
var infoText = buildInfoText(name, age, months);
|
|
6312
6312
|
var Component = componentByVariant[variant];
|
|
6313
|
-
return (jsxs$1(Container$
|
|
6313
|
+
return (jsxs$1(Container$18, __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));
|
|
6314
6314
|
};
|
|
6315
6315
|
|
|
6316
|
-
var Section = newStyled.div(templateObject_1$
|
|
6316
|
+
var Section = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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) {
|
|
6317
6317
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6318
6318
|
});
|
|
6319
6319
|
var CardHeader = function (_a) {
|
|
@@ -6324,16 +6324,16 @@ var CardFooter = function (_a) {
|
|
|
6324
6324
|
var children = _a.children;
|
|
6325
6325
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6326
6326
|
};
|
|
6327
|
-
var templateObject_1$
|
|
6327
|
+
var templateObject_1$1O;
|
|
6328
6328
|
|
|
6329
|
-
var Body = newStyled.div(templateObject_1$
|
|
6329
|
+
var Body = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6330
6330
|
var CardBody$1 = function (_a) {
|
|
6331
6331
|
var children = _a.children;
|
|
6332
6332
|
return jsx$1(Body, { children: children }, void 0);
|
|
6333
6333
|
};
|
|
6334
|
-
var templateObject_1$
|
|
6334
|
+
var templateObject_1$1N;
|
|
6335
6335
|
|
|
6336
|
-
var Container$
|
|
6336
|
+
var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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) {
|
|
6337
6337
|
var flex = _a.flex;
|
|
6338
6338
|
return flex &&
|
|
6339
6339
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6348,23 +6348,23 @@ var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = _
|
|
|
6348
6348
|
var Card$2 = function (_a) {
|
|
6349
6349
|
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;
|
|
6350
6350
|
var theme = useTheme();
|
|
6351
|
-
return (jsx$1(Container$
|
|
6351
|
+
return (jsx$1(Container$17, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6352
6352
|
};
|
|
6353
6353
|
var Card$3 = Object.assign(Card$2, {
|
|
6354
6354
|
Header: CardHeader,
|
|
6355
6355
|
Footer: CardFooter,
|
|
6356
6356
|
Body: CardBody$1,
|
|
6357
6357
|
});
|
|
6358
|
-
var templateObject_1$
|
|
6358
|
+
var templateObject_1$1M;
|
|
6359
6359
|
|
|
6360
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6361
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6362
|
-
var TextLabel = newStyled(Text$7)(templateObject_3
|
|
6360
|
+
var StyledWrapper = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6361
|
+
var StyledContainer = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6362
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6363
6363
|
var color = _a.color;
|
|
6364
6364
|
return color;
|
|
6365
6365
|
});
|
|
6366
6366
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6367
|
-
var templateObject_1$
|
|
6367
|
+
var templateObject_1$1L, templateObject_2$1h, templateObject_3$10, templateObject_4$P;
|
|
6368
6368
|
|
|
6369
6369
|
var Minimalistic = function (_a) {
|
|
6370
6370
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6372,28 +6372,28 @@ var Minimalistic = function (_a) {
|
|
|
6372
6372
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6373
6373
|
};
|
|
6374
6374
|
|
|
6375
|
-
var Container$
|
|
6376
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6377
|
-
var Details$1 = newStyled.span(templateObject_3
|
|
6375
|
+
var Container$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6376
|
+
var Title$9 = newStyled.h1(templateObject_2$1g || (templateObject_2$1g = __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; });
|
|
6377
|
+
var Details$1 = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __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; });
|
|
6378
6378
|
var PriceContainer$2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
6379
6379
|
var Simple = function (_a) {
|
|
6380
6380
|
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;
|
|
6381
6381
|
var theme = useTheme();
|
|
6382
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6382
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$16, { 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));
|
|
6383
6383
|
};
|
|
6384
|
-
var templateObject_1$
|
|
6384
|
+
var templateObject_1$1K, templateObject_2$1g, templateObject_3$$, templateObject_4$O;
|
|
6385
6385
|
|
|
6386
6386
|
var Bundle = {
|
|
6387
6387
|
Minimalistic: Minimalistic,
|
|
6388
6388
|
Simple: Simple,
|
|
6389
6389
|
};
|
|
6390
6390
|
|
|
6391
|
-
var Container$
|
|
6391
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
6392
6392
|
var displayBNPL = _a.displayBNPL;
|
|
6393
6393
|
return (displayBNPL ? 'flex' : 'none');
|
|
6394
6394
|
});
|
|
6395
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6396
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6395
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6396
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6397
6397
|
var BuyNowPayLater = function (_a) {
|
|
6398
6398
|
var _b;
|
|
6399
6399
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6403,43 +6403,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6403
6403
|
console.error('Icon', iconName, 'not found');
|
|
6404
6404
|
return null;
|
|
6405
6405
|
}
|
|
6406
|
-
return (jsx$1(Container$
|
|
6406
|
+
return (jsx$1(Container$15, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6407
6407
|
};
|
|
6408
|
-
var templateObject_1$
|
|
6408
|
+
var templateObject_1$1J, templateObject_2$1f, templateObject_3$_;
|
|
6409
6409
|
|
|
6410
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6410
|
+
var Text$6 = newStyled.span(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6411
6411
|
var Title$8 = function (_a) {
|
|
6412
6412
|
var title = _a.title;
|
|
6413
6413
|
var theme = useTheme();
|
|
6414
6414
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6415
6415
|
};
|
|
6416
|
-
var templateObject_1$
|
|
6416
|
+
var templateObject_1$1I;
|
|
6417
6417
|
|
|
6418
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6418
|
+
var P$3 = newStyled.p(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6419
6419
|
var Promo = function (_a) {
|
|
6420
6420
|
var text = _a.text;
|
|
6421
6421
|
var theme = useTheme();
|
|
6422
6422
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6423
6423
|
};
|
|
6424
|
-
var templateObject_1$
|
|
6424
|
+
var templateObject_1$1H;
|
|
6425
6425
|
|
|
6426
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6426
|
+
var Text$5 = newStyled.span(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6427
6427
|
var Description$1 = function (_a) {
|
|
6428
6428
|
var text = _a.text;
|
|
6429
6429
|
var theme = useTheme();
|
|
6430
6430
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6431
6431
|
};
|
|
6432
|
-
var templateObject_1$
|
|
6432
|
+
var templateObject_1$1G;
|
|
6433
6433
|
|
|
6434
|
-
var Container$
|
|
6434
|
+
var Container$14 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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"); });
|
|
6435
6435
|
var CloseButton$1 = function (_a) {
|
|
6436
6436
|
var onClick = _a.onClick, size = _a.size;
|
|
6437
6437
|
var theme = useTheme();
|
|
6438
|
-
return (jsx$1(Container$
|
|
6438
|
+
return (jsx$1(Container$14, __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));
|
|
6439
6439
|
};
|
|
6440
|
-
var templateObject_1$
|
|
6440
|
+
var templateObject_1$1F;
|
|
6441
6441
|
|
|
6442
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6442
|
+
var Text$4 = newStyled.h3(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6443
6443
|
var backgroundColor = _a.backgroundColor;
|
|
6444
6444
|
return backgroundColor;
|
|
6445
6445
|
}, function (_a) {
|
|
@@ -6454,7 +6454,7 @@ var OfferBanner = function (_a) {
|
|
|
6454
6454
|
var theme = useTheme();
|
|
6455
6455
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6456
6456
|
};
|
|
6457
|
-
var templateObject_1$
|
|
6457
|
+
var templateObject_1$1E;
|
|
6458
6458
|
|
|
6459
6459
|
var CartProductItem = {
|
|
6460
6460
|
Title: Title$8,
|
|
@@ -6464,9 +6464,9 @@ var CartProductItem = {
|
|
|
6464
6464
|
CloseButton: CloseButton$1,
|
|
6465
6465
|
};
|
|
6466
6466
|
|
|
6467
|
-
var Container$
|
|
6468
|
-
var MobileContainer = newStyled(Container$
|
|
6469
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6467
|
+
var Container$13 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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"])));
|
|
6468
|
+
var MobileContainer = newStyled(Container$13)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6469
|
+
var DollarPart = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
6470
6470
|
var ClubMembersText = newStyled.span(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6471
6471
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6472
6472
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6475,9 +6475,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (t
|
|
|
6475
6475
|
var ClubPriceLabel = function (_a) {
|
|
6476
6476
|
var clubPrice = _a.clubPrice;
|
|
6477
6477
|
var isMobile = useWindowDimensions().isMobile;
|
|
6478
|
-
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$
|
|
6478
|
+
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$13, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6479
6479
|
};
|
|
6480
|
-
var templateObject_1$
|
|
6480
|
+
var templateObject_1$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$q, templateObject_8$j;
|
|
6481
6481
|
|
|
6482
6482
|
var Spacing = function (_a) {
|
|
6483
6483
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6485,9 +6485,9 @@ var Spacing = function (_a) {
|
|
|
6485
6485
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6486
6486
|
};
|
|
6487
6487
|
|
|
6488
|
-
var Container$
|
|
6489
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6490
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6488
|
+
var Container$12 = newStyled('div')(templateObject_1$1C || (templateObject_1$1C = __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"])));
|
|
6489
|
+
var Content$2 = newStyled('div')(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
6490
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
6491
6491
|
var Bar$2 = newStyled('div')(templateObject_4$M || (templateObject_4$M = __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) {
|
|
6492
6492
|
var index = _a.index;
|
|
6493
6493
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6497,13 +6497,13 @@ var Bar$2 = newStyled('div')(templateObject_4$M || (templateObject_4$M = __makeT
|
|
|
6497
6497
|
});
|
|
6498
6498
|
var StrengthBars = function (_a) {
|
|
6499
6499
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6500
|
-
return (jsxs$1(Container$
|
|
6500
|
+
return (jsxs$1(Container$12, __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));
|
|
6501
6501
|
};
|
|
6502
|
-
var templateObject_1$
|
|
6502
|
+
var templateObject_1$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$M;
|
|
6503
6503
|
|
|
6504
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6505
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6506
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6504
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6505
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6506
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6507
6507
|
var PriceContainerV2 = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6508
6508
|
var PriceWithTagContainer = newStyled.span(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6509
6509
|
var RegularPriceTag = function () {
|
|
@@ -6554,18 +6554,18 @@ var PriceLabelV4 = function (_a) {
|
|
|
6554
6554
|
: ComponentSize.XSmall;
|
|
6555
6555
|
return (jsx$1(Price, __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));
|
|
6556
6556
|
};
|
|
6557
|
-
return (jsxs$1(Container$
|
|
6557
|
+
return (jsxs$1(Container$1k, __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, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, 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, __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, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6558
6558
|
? finalPriceArray[0]
|
|
6559
6559
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __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, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6560
6560
|
};
|
|
6561
|
-
var templateObject_1$
|
|
6561
|
+
var templateObject_1$1B, templateObject_2$1c, templateObject_3$X, templateObject_4$L, templateObject_5$B;
|
|
6562
6562
|
|
|
6563
6563
|
var STARTS_NUMBER = 5;
|
|
6564
6564
|
|
|
6565
|
-
var Container$
|
|
6566
|
-
var templateObject_1$
|
|
6565
|
+
var Container$11 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6566
|
+
var templateObject_1$1A;
|
|
6567
6567
|
|
|
6568
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6568
|
+
var StarContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6569
6569
|
var marginRight = _a.marginRight;
|
|
6570
6570
|
return marginRight;
|
|
6571
6571
|
});
|
|
@@ -6577,11 +6577,11 @@ var StarList = function (_a) {
|
|
|
6577
6577
|
width: theme.component.stars.element[size].width,
|
|
6578
6578
|
height: theme.component.stars.element[size].height,
|
|
6579
6579
|
};
|
|
6580
|
-
return (jsx$1(Container$
|
|
6580
|
+
return (jsx$1(Container$11, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6581
6581
|
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)));
|
|
6582
6582
|
}) }, void 0));
|
|
6583
6583
|
};
|
|
6584
|
-
var templateObject_1$
|
|
6584
|
+
var templateObject_1$1z;
|
|
6585
6585
|
|
|
6586
6586
|
/* base styles & size variants */
|
|
6587
6587
|
var LabelStyles = {
|
|
@@ -6622,7 +6622,7 @@ var LabelStyles = {
|
|
|
6622
6622
|
});
|
|
6623
6623
|
},
|
|
6624
6624
|
};
|
|
6625
|
-
var Container
|
|
6625
|
+
var Container$10 = newStyled.a(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6626
6626
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6627
6627
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6628
6628
|
return [
|
|
@@ -6641,8 +6641,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6641
6641
|
}),
|
|
6642
6642
|
];
|
|
6643
6643
|
});
|
|
6644
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6645
|
-
var templateObject_1$
|
|
6644
|
+
var RatingLabel = newStyled.span(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6645
|
+
var templateObject_1$1y, templateObject_2$1b;
|
|
6646
6646
|
|
|
6647
6647
|
var Rating = function (_a) {
|
|
6648
6648
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6663,7 +6663,7 @@ var Rating = function (_a) {
|
|
|
6663
6663
|
href: reviewsContainerId,
|
|
6664
6664
|
}
|
|
6665
6665
|
: {};
|
|
6666
|
-
return (jsxs$1(Container
|
|
6666
|
+
return (jsxs$1(Container$10, __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), 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));
|
|
6667
6667
|
};
|
|
6668
6668
|
|
|
6669
6669
|
var STYLES_BY_THEME = {
|
|
@@ -6737,9 +6737,9 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6737
6737
|
height: height,
|
|
6738
6738
|
});
|
|
6739
6739
|
});
|
|
6740
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6741
|
-
var Container
|
|
6742
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6740
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6741
|
+
var Container$$ = newStyled.a(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
6742
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6743
6743
|
var Title$7 = newStyled.p(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\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 ", "\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 text-align: center;\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) {
|
|
6744
6744
|
var theme = _a.theme;
|
|
6745
6745
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
@@ -6801,7 +6801,7 @@ var BottomTagContainer$8 = newStyled.div(templateObject_6$x || (templateObject_6
|
|
|
6801
6801
|
});
|
|
6802
6802
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6803
6803
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6804
|
-
var templateObject_1$
|
|
6804
|
+
var templateObject_1$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x, templateObject_7$p, templateObject_8$i;
|
|
6805
6805
|
|
|
6806
6806
|
var ProductItemMobile = function (_a) {
|
|
6807
6807
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
@@ -6863,7 +6863,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6863
6863
|
return jsx(Fragment, {}, void 0);
|
|
6864
6864
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6865
6865
|
};
|
|
6866
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container
|
|
6866
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$$, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!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$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)] }), 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)), jsxs(Container$$, __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 }, { children: title }), void 0), jsx(Spacing, { size: space }, 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 ? (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)) : (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$3, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6867
6867
|
letterSpacing: '-0.05rem',
|
|
6868
6868
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6869
6869
|
};
|
|
@@ -6876,9 +6876,9 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6876
6876
|
height: height,
|
|
6877
6877
|
});
|
|
6878
6878
|
});
|
|
6879
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6880
|
-
var Container$
|
|
6881
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6879
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1w || (templateObject_1$1w = __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; });
|
|
6880
|
+
var Container$_ = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
6881
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6882
6882
|
var Title$6 = newStyled.p(templateObject_4$J || (templateObject_4$J = __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; });
|
|
6883
6883
|
var getStylesBySize$b = function (size) {
|
|
6884
6884
|
switch (size) {
|
|
@@ -6909,7 +6909,7 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$z || (templateObject_5$z
|
|
|
6909
6909
|
var style = _a.style;
|
|
6910
6910
|
return style.width;
|
|
6911
6911
|
});
|
|
6912
|
-
var TopRightTagContainer$
|
|
6912
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6913
6913
|
var BottomTagContainer$7 = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6914
6914
|
var style = _a.style;
|
|
6915
6915
|
return style.width;
|
|
@@ -6958,26 +6958,26 @@ var ProductItemTK = function (_a) {
|
|
|
6958
6958
|
: undefined }, void 0));
|
|
6959
6959
|
};
|
|
6960
6960
|
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)); };
|
|
6961
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6961
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$_, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { 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%" }, void 0), jsx(TopTagContainer$7, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$7, __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 }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", 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$_, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6962
6962
|
// @ts-ignore
|
|
6963
6963
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6964
6964
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6965
6965
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6966
6966
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : 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 ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), 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), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6967
6967
|
};
|
|
6968
|
-
var templateObject_1$
|
|
6968
|
+
var templateObject_1$1w, templateObject_2$19, templateObject_3$V, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$o, templateObject_8$h;
|
|
6969
6969
|
|
|
6970
|
-
var Container$
|
|
6970
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
6971
6971
|
function withProductGrid(ProductItemComponent, data) {
|
|
6972
6972
|
function WithProductGrid(props) {
|
|
6973
|
-
return (jsx$1(Container$
|
|
6973
|
+
return (jsx$1(Container$Z, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6974
6974
|
}
|
|
6975
6975
|
/* istanbul ignore next */
|
|
6976
6976
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6977
6977
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6978
6978
|
return WithProductGrid;
|
|
6979
6979
|
}
|
|
6980
|
-
var templateObject_1$
|
|
6980
|
+
var templateObject_1$1v;
|
|
6981
6981
|
|
|
6982
6982
|
var Collection = {
|
|
6983
6983
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6985,9 +6985,9 @@ var Collection = {
|
|
|
6985
6985
|
ProductItemTK: ProductItemTK,
|
|
6986
6986
|
};
|
|
6987
6987
|
|
|
6988
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6989
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6990
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6988
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6989
|
+
newStyled(lt.Label)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6990
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6991
6991
|
var Span = newStyled.span(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6992
6992
|
var OptionsContainer = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6993
6993
|
var Label$5 = function (_a) {
|
|
@@ -7007,7 +7007,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7007
7007
|
Option: Option,
|
|
7008
7008
|
OptionsContainer: OptionsContainer,
|
|
7009
7009
|
});
|
|
7010
|
-
var templateObject_1$
|
|
7010
|
+
var templateObject_1$1u, templateObject_2$18, templateObject_3$U, templateObject_4$I, templateObject_5$y;
|
|
7011
7011
|
|
|
7012
7012
|
var OneColorSelector = function (_a) {
|
|
7013
7013
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7048,21 +7048,21 @@ var OutOfStock = function (_a) {
|
|
|
7048
7048
|
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));
|
|
7049
7049
|
};
|
|
7050
7050
|
|
|
7051
|
-
var Container$
|
|
7051
|
+
var Container$Y = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
7052
7052
|
var borderColor = _a.borderColor;
|
|
7053
7053
|
return borderColor;
|
|
7054
7054
|
}, function (_a) {
|
|
7055
7055
|
var noStock = _a.noStock;
|
|
7056
7056
|
return (noStock ? '0.4' : '1');
|
|
7057
7057
|
});
|
|
7058
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7058
|
+
var Image$2 = newStyled.img(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7059
7059
|
var PatternSelector = function (_a) {
|
|
7060
7060
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7061
7061
|
var theme = useTheme();
|
|
7062
7062
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7063
|
-
return (jsx$1(Container$
|
|
7063
|
+
return (jsx$1(Container$Y, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7064
7064
|
};
|
|
7065
|
-
var templateObject_1$
|
|
7065
|
+
var templateObject_1$1t, templateObject_2$17;
|
|
7066
7066
|
|
|
7067
7067
|
var renderOptions$1 = function (options, showCross) {
|
|
7068
7068
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7089,10 +7089,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7089
7089
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7090
7090
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7091
7091
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7092
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7092
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7093
7093
|
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7094
7094
|
};
|
|
7095
|
-
var templateObject_1$
|
|
7095
|
+
var templateObject_1$1s;
|
|
7096
7096
|
|
|
7097
7097
|
var renderOptions = function (selectedColor, options) {
|
|
7098
7098
|
if (options == null || options.length === 0) {
|
|
@@ -7130,9 +7130,9 @@ var MultiColorPicker = function (_a) {
|
|
|
7130
7130
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7131
7131
|
};
|
|
7132
7132
|
|
|
7133
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7134
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7135
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7133
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7134
|
+
var Col$1 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7135
|
+
var Row$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
7136
7136
|
return props.rightToLeft &&
|
|
7137
7137
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7138
7138
|
});
|
|
@@ -7144,7 +7144,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7144
7144
|
var theme = useTheme();
|
|
7145
7145
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7146
7146
|
};
|
|
7147
|
-
var templateObject_1$
|
|
7147
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$T, templateObject_4$H, templateObject_5$x, templateObject_6$v;
|
|
7148
7148
|
|
|
7149
7149
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7150
7150
|
__proto__: null,
|
|
@@ -7172,7 +7172,7 @@ var sizeMapper = (_a = {},
|
|
|
7172
7172
|
_a[ComponentSize.Large] = 'large',
|
|
7173
7173
|
_a[ComponentSize.XSmall] = 'small',
|
|
7174
7174
|
_a);
|
|
7175
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7175
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7176
7176
|
var wide = _a.wide;
|
|
7177
7177
|
return (wide ? '100%' : 'fit-content');
|
|
7178
7178
|
}, function (_a) {
|
|
@@ -7194,11 +7194,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1p || (templateObj
|
|
|
7194
7194
|
var theme = _a.theme;
|
|
7195
7195
|
return theme.colors.text.disabled;
|
|
7196
7196
|
});
|
|
7197
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7197
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7198
7198
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7199
7199
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7200
7200
|
});
|
|
7201
|
-
var templateObject_1$
|
|
7201
|
+
var templateObject_1$1q, templateObject_2$15;
|
|
7202
7202
|
|
|
7203
7203
|
var BaseCTA = function (_a) {
|
|
7204
7204
|
var _b, _c, _d;
|
|
@@ -7285,23 +7285,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7285
7285
|
} }), void 0));
|
|
7286
7286
|
};
|
|
7287
7287
|
|
|
7288
|
-
var Container$
|
|
7289
|
-
var IconContainer$
|
|
7290
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7288
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
7289
|
+
var IconContainer$5 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
7290
|
+
var Text$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __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; });
|
|
7291
7291
|
var Details = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7292
7292
|
var Note = function (_a) {
|
|
7293
7293
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7294
7294
|
var theme = useTheme();
|
|
7295
|
-
return (jsxs$1(Container$
|
|
7295
|
+
return (jsxs$1(Container$X, __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));
|
|
7296
7296
|
};
|
|
7297
|
-
var templateObject_1$
|
|
7297
|
+
var templateObject_1$1p, templateObject_2$14, templateObject_3$S, templateObject_4$G;
|
|
7298
7298
|
|
|
7299
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7299
|
+
var Title$5 = newStyled.h1(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7300
7300
|
var theme = _a.theme;
|
|
7301
7301
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7302
7302
|
});
|
|
7303
|
-
var Line = newStyled.div(templateObject_2$
|
|
7304
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7303
|
+
var Line = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7304
|
+
var Row$1 = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7305
7305
|
flexDirection: ['column', 'row'],
|
|
7306
7306
|
}));
|
|
7307
7307
|
var Col = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
@@ -7311,7 +7311,7 @@ var Col = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTempla
|
|
|
7311
7311
|
textAlign: ['center', 'inherit'],
|
|
7312
7312
|
width: ['100%', 'inherit'],
|
|
7313
7313
|
}));
|
|
7314
|
-
var IconContainer$
|
|
7314
|
+
var IconContainer$4 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7315
7315
|
marginRight: ['0', '0.438rem'],
|
|
7316
7316
|
marginBottom: ['10px', '0'],
|
|
7317
7317
|
width: ['auto', '1.5rem'],
|
|
@@ -7337,18 +7337,18 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$g || (templateObject_8$g = __m
|
|
|
7337
7337
|
var DeliveryDetails = function (_a) {
|
|
7338
7338
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7339
7339
|
var theme = useTheme();
|
|
7340
|
-
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$
|
|
7340
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7341
7341
|
};
|
|
7342
|
-
var templateObject_1$
|
|
7342
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$w, templateObject_6$u, templateObject_7$n, templateObject_8$g;
|
|
7343
7343
|
|
|
7344
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7344
|
+
var Backdrop = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7345
7345
|
var top = _a.top;
|
|
7346
7346
|
return top;
|
|
7347
7347
|
}, function (_a) {
|
|
7348
7348
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7349
7349
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7350
7350
|
});
|
|
7351
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7351
|
+
var Sidebar = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7352
7352
|
var height = _a.height;
|
|
7353
7353
|
return height;
|
|
7354
7354
|
}, function (_a) {
|
|
@@ -7395,20 +7395,20 @@ var Drawer = function (_a) {
|
|
|
7395
7395
|
}, [isOpen, onClose, onOpen]);
|
|
7396
7396
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7397
7397
|
};
|
|
7398
|
-
var templateObject_1$
|
|
7398
|
+
var templateObject_1$1n, templateObject_2$12;
|
|
7399
7399
|
|
|
7400
7400
|
var TooltipArrow = function (_a) {
|
|
7401
7401
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7402
7402
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7403
7403
|
};
|
|
7404
7404
|
|
|
7405
|
-
var List = newStyled.ul(templateObject_1$
|
|
7406
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7407
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7405
|
+
var List = newStyled.ul(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7406
|
+
var Item$2 = newStyled.li(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7407
|
+
var DropdownWrapper = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7408
7408
|
var ArrowContainer$1 = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7409
7409
|
var StyledDropdown = newStyled.ul(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7410
7410
|
var DropdownItem = newStyled.li(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7411
|
-
var templateObject_1$
|
|
7411
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$v, templateObject_6$t;
|
|
7412
7412
|
|
|
7413
7413
|
var DropdownListIcons = function (_a) {
|
|
7414
7414
|
var items = _a.items;
|
|
@@ -7421,13 +7421,13 @@ var Dropdown = function (_a) {
|
|
|
7421
7421
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7422
7422
|
};
|
|
7423
7423
|
|
|
7424
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7425
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
7426
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7424
|
+
var DropdownContainer = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
7425
|
+
var DropdownLabel = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7426
|
+
var SizeLabel = newStyled.span(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7427
7427
|
var DetailLabel = newStyled.span(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7428
7428
|
var DropdownOptions = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7429
7429
|
var DropdownOption = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7430
|
-
var templateObject_1$
|
|
7430
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$D, templateObject_5$u, templateObject_6$s;
|
|
7431
7431
|
|
|
7432
7432
|
var SizeDropdown = function (_a) {
|
|
7433
7433
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7450,9 +7450,9 @@ var SizeDropdown = function (_a) {
|
|
|
7450
7450
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7451
7451
|
};
|
|
7452
7452
|
|
|
7453
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7454
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2
|
|
7455
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7453
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7454
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7455
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7456
7456
|
var DialogDropdownLink = newStyled.a(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7457
7457
|
var DropdownDialog = function (_a) {
|
|
7458
7458
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -7462,7 +7462,7 @@ var DropdownDialog = function (_a) {
|
|
|
7462
7462
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7463
7463
|
}) }), void 0) }), void 0));
|
|
7464
7464
|
};
|
|
7465
|
-
var templateObject_1$
|
|
7465
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
7466
7466
|
|
|
7467
7467
|
function FilteringDropdown(_a) {
|
|
7468
7468
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7495,21 +7495,21 @@ function FilteringDropdown(_a) {
|
|
|
7495
7495
|
}) }, void 0)] }), void 0));
|
|
7496
7496
|
}
|
|
7497
7497
|
|
|
7498
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7499
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7500
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7501
|
-
var Container$
|
|
7498
|
+
var Title$4 = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
7499
|
+
var H3 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
7500
|
+
var ArrowContainer = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7501
|
+
var Container$W = newStyled.div(templateObject_4$B || (templateObject_4$B = __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'); });
|
|
7502
7502
|
var Accordion = function (_a) {
|
|
7503
7503
|
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;
|
|
7504
7504
|
var theme = useTheme();
|
|
7505
7505
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7506
|
-
return (jsxs$1(Container$
|
|
7506
|
+
return (jsxs$1(Container$W, __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(H3, __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));
|
|
7507
7507
|
};
|
|
7508
|
-
var templateObject_1$
|
|
7508
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
7509
7509
|
|
|
7510
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7511
|
-
var Header$
|
|
7512
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7510
|
+
var SectionContent = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
7511
|
+
var Header$3 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7512
|
+
var MobileHeader = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7513
7513
|
var MobileIconsContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7514
7514
|
var H4 = newStyled.h4(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7515
7515
|
var FilterLink = newStyled.a(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
@@ -7517,7 +7517,7 @@ var OptionContainer = newStyled.div(templateObject_7$m || (templateObject_7$m =
|
|
|
7517
7517
|
var ClearAll = newStyled.span(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7518
7518
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7519
7519
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7520
|
-
var templateObject_1$
|
|
7520
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$m, templateObject_8$f, templateObject_9$a, templateObject_10$9;
|
|
7521
7521
|
|
|
7522
7522
|
var getStylesBySize$a = function (size, theme) {
|
|
7523
7523
|
switch (size) {
|
|
@@ -7582,9 +7582,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7582
7582
|
} }), id: id }, void 0));
|
|
7583
7583
|
};
|
|
7584
7584
|
|
|
7585
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7586
|
-
var LI = newStyled.li(templateObject_2$
|
|
7587
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7585
|
+
var UL = newStyled.ul(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
7586
|
+
var LI = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7587
|
+
var CloseIconContainer = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7588
7588
|
var Tags = function (_a) {
|
|
7589
7589
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7590
7590
|
var theme = useTheme();
|
|
@@ -7592,7 +7592,7 @@ var Tags = function (_a) {
|
|
|
7592
7592
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7593
7593
|
}) }), void 0));
|
|
7594
7594
|
};
|
|
7595
|
-
var templateObject_1$
|
|
7595
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$L;
|
|
7596
7596
|
|
|
7597
7597
|
var Filters = function (_a) {
|
|
7598
7598
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7690,7 +7690,7 @@ var Filters = function (_a) {
|
|
|
7690
7690
|
}
|
|
7691
7691
|
return itemsSelectedNumberText;
|
|
7692
7692
|
};
|
|
7693
|
-
return (jsxs$1(Fragment$2, { children: [!isMobile ? (jsx$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxs$1(Fragment$2, { children: [jsxs$1(Header$
|
|
7693
|
+
return (jsxs$1(Fragment$2, { children: [!isMobile ? (jsx$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxs$1(Fragment$2, { children: [jsxs$1(Header$3, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) {
|
|
7694
7694
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
7695
7695
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
7696
7696
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
@@ -7728,8 +7728,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7728
7728
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7729
7729
|
};
|
|
7730
7730
|
|
|
7731
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7732
|
-
var Container$
|
|
7731
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
7732
|
+
var Container$V = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
7733
7733
|
var FitGuarantee = function (_a) {
|
|
7734
7734
|
var _b;
|
|
7735
7735
|
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;
|
|
@@ -7740,17 +7740,17 @@ var FitGuarantee = function (_a) {
|
|
|
7740
7740
|
console.error('Icon', iconName, 'not found');
|
|
7741
7741
|
return null;
|
|
7742
7742
|
}
|
|
7743
|
-
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$
|
|
7743
|
+
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$V, __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$V, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7744
7744
|
margin: '0.1rem 0',
|
|
7745
7745
|
width: '100%',
|
|
7746
7746
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7747
7747
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7748
7748
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7749
7749
|
};
|
|
7750
|
-
var templateObject_1$
|
|
7750
|
+
var templateObject_1$1g, templateObject_2$X;
|
|
7751
7751
|
|
|
7752
|
-
var Container$
|
|
7753
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7752
|
+
var Container$U = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
7753
|
+
var P$2 = newStyled.p(templateObject_2$W || (templateObject_2$W = __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; });
|
|
7754
7754
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7755
7755
|
border: 'none',
|
|
7756
7756
|
background: 'transparent',
|
|
@@ -7763,11 +7763,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7763
7763
|
var FitPredictor = function (_a) {
|
|
7764
7764
|
var onClick = _a.onClick;
|
|
7765
7765
|
var theme = useTheme();
|
|
7766
|
-
return (jsxs(Container$
|
|
7766
|
+
return (jsxs(Container$U, __assign$1({ theme: theme }, { children: [jsx(Container$U, { 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));
|
|
7767
7767
|
};
|
|
7768
|
-
var templateObject_1$
|
|
7768
|
+
var templateObject_1$1f, templateObject_2$W;
|
|
7769
7769
|
|
|
7770
|
-
var Button$
|
|
7770
|
+
var Button$6 = newStyled.button(function () { return ({
|
|
7771
7771
|
background: 'transparent',
|
|
7772
7772
|
border: 'none',
|
|
7773
7773
|
cursor: 'pointer',
|
|
@@ -7779,7 +7779,7 @@ var Direction;
|
|
|
7779
7779
|
})(Direction || (Direction = {}));
|
|
7780
7780
|
var ArrowButton$1 = function (_a) {
|
|
7781
7781
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7782
|
-
return (jsx$1(Button$
|
|
7782
|
+
return (jsx$1(Button$6, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsx$1(Icon.Arrows.ChevronLeft, { testId: "arrow-button-left", width: width, height: height, opacity: 0.5 }, void 0)) : (jsx$1(Icon.Arrows.ChevronRight, { testId: "arrow-button-right", width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
7783
7783
|
};
|
|
7784
7784
|
|
|
7785
7785
|
function _defineProperty(obj, key, value) {
|
|
@@ -11761,7 +11761,7 @@ var defaultProps$1 = {
|
|
|
11761
11761
|
waitForAnimate: true
|
|
11762
11762
|
};
|
|
11763
11763
|
|
|
11764
|
-
var Slider = /*#__PURE__*/function (_React$Component) {
|
|
11764
|
+
var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
11765
11765
|
_inherits(Slider, _React$Component);
|
|
11766
11766
|
|
|
11767
11767
|
var _super = _createSuper(Slider);
|
|
@@ -12009,14 +12009,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12009
12009
|
return Slider;
|
|
12010
12010
|
}(React__default.Component);
|
|
12011
12011
|
|
|
12012
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12012
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12013
12013
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12014
12014
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12015
12015
|
}, function (_a) {
|
|
12016
12016
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12017
12017
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12018
12018
|
});
|
|
12019
|
-
var templateObject_1$
|
|
12019
|
+
var templateObject_1$1e;
|
|
12020
12020
|
|
|
12021
12021
|
var getStylesBySize$9 = function (size) {
|
|
12022
12022
|
// rem units
|
|
@@ -12075,7 +12075,7 @@ var SliderNavigation = function (_a) {
|
|
|
12075
12075
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12076
12076
|
};
|
|
12077
12077
|
|
|
12078
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12078
|
+
var Image$1 = newStyled.img(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
12079
12079
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12080
12080
|
return borderRadiusVariant &&
|
|
12081
12081
|
"\n border-radius: 20px;\n ";
|
|
@@ -12093,7 +12093,7 @@ var Image$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __make
|
|
|
12093
12093
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12094
12094
|
: 'inherit';
|
|
12095
12095
|
});
|
|
12096
|
-
var templateObject_1$
|
|
12096
|
+
var templateObject_1$1d;
|
|
12097
12097
|
|
|
12098
12098
|
var ImageSmallPreview = function (_a) {
|
|
12099
12099
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12101,9 +12101,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12101
12101
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12102
12102
|
};
|
|
12103
12103
|
|
|
12104
|
-
var horizontalStyles = css(templateObject_1$
|
|
12105
|
-
var verticalStyles = css(templateObject_2$
|
|
12106
|
-
var Container$
|
|
12104
|
+
var horizontalStyles = css(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
12105
|
+
var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
12106
|
+
var Container$T = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12107
12107
|
var position = _a.position;
|
|
12108
12108
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12109
12109
|
}, function (_a) {
|
|
@@ -12111,12 +12111,12 @@ var Container$S = newStyled.div(templateObject_3$J || (templateObject_3$J = __ma
|
|
|
12111
12111
|
return hasOverflowArrows &&
|
|
12112
12112
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12113
12113
|
});
|
|
12114
|
-
var Button$
|
|
12114
|
+
var Button$5 = newStyled.button(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12115
12115
|
var ArrowsContainer = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12116
12116
|
var ArrowBaseStyles = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12117
12117
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12118
12118
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12119
|
-
var templateObject_1$
|
|
12119
|
+
var templateObject_1$1c, templateObject_2$V, templateObject_3$K, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$l, templateObject_8$e;
|
|
12120
12120
|
|
|
12121
12121
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12122
12122
|
var loading = 'eager';
|
|
@@ -12144,31 +12144,31 @@ var ImagePreviewList = function (_a) {
|
|
|
12144
12144
|
var element = document.querySelector(".imageListContainer");
|
|
12145
12145
|
element.scrollBy(0, 200);
|
|
12146
12146
|
};
|
|
12147
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12147
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$T, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12148
12148
|
arrowWidth: 0.75,
|
|
12149
12149
|
arrowHeight: 1.25,
|
|
12150
12150
|
arrowPadding: 1.625,
|
|
12151
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$
|
|
12152
|
-
return (jsx$1(Button$
|
|
12151
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$5, __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) {
|
|
12152
|
+
return (jsx$1(Button$5, __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));
|
|
12153
12153
|
})) }), 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));
|
|
12154
12154
|
};
|
|
12155
12155
|
|
|
12156
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12157
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12158
|
-
var templateObject_1$
|
|
12156
|
+
var ProgressContainer = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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); });
|
|
12157
|
+
var ProgressFiller = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
12158
|
+
var templateObject_1$1b, templateObject_2$U;
|
|
12159
12159
|
|
|
12160
12160
|
var ProgressBar$1 = function (_a) {
|
|
12161
12161
|
var progress = _a.progress, hide = _a.hide;
|
|
12162
12162
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12163
12163
|
};
|
|
12164
12164
|
|
|
12165
|
-
var Container$
|
|
12166
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12167
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12165
|
+
var Container$S = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12166
|
+
var HTMLVideo = newStyled.video(templateObject_2$T || (templateObject_2$T = __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; });
|
|
12167
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
12168
12168
|
var PlayContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __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 z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12169
12169
|
var PauseContainer = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
12170
12170
|
var MuteButton = newStyled.button(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
12171
|
-
var templateObject_1$
|
|
12171
|
+
var templateObject_1$1a, templateObject_2$T, templateObject_3$J, templateObject_4$y, templateObject_5$r, templateObject_6$p;
|
|
12172
12172
|
|
|
12173
12173
|
var Video$1 = function (_a) {
|
|
12174
12174
|
var _b, _c, _d, _e;
|
|
@@ -12214,7 +12214,7 @@ var Video$1 = function (_a) {
|
|
|
12214
12214
|
setVideoProgress(videoRef.current.currentTime);
|
|
12215
12215
|
}
|
|
12216
12216
|
};
|
|
12217
|
-
return (jsxs$1(Container$
|
|
12217
|
+
return (jsxs$1(Container$S, __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" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, 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));
|
|
12218
12218
|
};
|
|
12219
12219
|
|
|
12220
12220
|
var propTypes = {exports: {}};
|
|
@@ -13808,22 +13808,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13808
13808
|
afterZoomOut: PropTypes.func
|
|
13809
13809
|
} : {};
|
|
13810
13810
|
|
|
13811
|
-
var Container$
|
|
13811
|
+
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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: 1/2;\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: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13812
13812
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13813
13813
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13814
13814
|
});
|
|
13815
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13815
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13816
13816
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13817
13817
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13818
13818
|
}, function (_a) {
|
|
13819
13819
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13820
13820
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13821
13821
|
});
|
|
13822
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13822
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13823
13823
|
var isCTAHidden = _a.isCTAHidden;
|
|
13824
13824
|
return (isCTAHidden ? '60px' : '120px');
|
|
13825
13825
|
});
|
|
13826
|
-
var TopRightTagContainer$
|
|
13826
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13827
13827
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13828
13828
|
var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13829
13829
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13833,23 +13833,23 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$k || (temp
|
|
|
13833
13833
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13834
13834
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13835
13835
|
});
|
|
13836
|
-
var templateObject_1$
|
|
13836
|
+
var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$k;
|
|
13837
13837
|
|
|
13838
13838
|
var ImageProductSlide$1 = function (_a) {
|
|
13839
13839
|
var _b;
|
|
13840
13840
|
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;
|
|
13841
13841
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13842
13842
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13843
|
-
return (jsxs$1(Container$
|
|
13843
|
+
return (jsxs$1(Container$R, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13844
13844
|
alt: content.alt,
|
|
13845
13845
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13846
13846
|
loading: 'eager',
|
|
13847
13847
|
decoding: 'sync',
|
|
13848
|
-
}, 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$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$
|
|
13848
|
+
}, 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$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$2, { children: topRightTag }, 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));
|
|
13849
13849
|
};
|
|
13850
13850
|
|
|
13851
|
-
var Container$
|
|
13852
|
-
var templateObject_1$
|
|
13851
|
+
var Container$Q = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13852
|
+
var templateObject_1$18;
|
|
13853
13853
|
|
|
13854
13854
|
var getInitialIndex = function (images, selectedValue) {
|
|
13855
13855
|
if (selectedValue) {
|
|
@@ -13875,7 +13875,7 @@ var ProductGallery = function (_a) {
|
|
|
13875
13875
|
setActiveIndex(index);
|
|
13876
13876
|
};
|
|
13877
13877
|
var selectedImage = images[activeIndex];
|
|
13878
|
-
return (jsxs$1(Container$
|
|
13878
|
+
return (jsxs$1(Container$Q, { 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));
|
|
13879
13879
|
};
|
|
13880
13880
|
|
|
13881
13881
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13897,7 +13897,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13897
13897
|
};
|
|
13898
13898
|
}
|
|
13899
13899
|
};
|
|
13900
|
-
var Container$
|
|
13900
|
+
var Container$P = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\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-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\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) {
|
|
13901
13901
|
var backgroundColor = _a.backgroundColor;
|
|
13902
13902
|
return backgroundColor;
|
|
13903
13903
|
}, function (_a) {
|
|
@@ -13925,11 +13925,11 @@ var Container$O = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __
|
|
|
13925
13925
|
var IconButton = function (_a) {
|
|
13926
13926
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13927
13927
|
var theme = useTheme();
|
|
13928
|
-
return (jsx$1(Container$
|
|
13928
|
+
return (jsx$1(Container$P, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13929
13929
|
};
|
|
13930
|
-
var templateObject_1$
|
|
13930
|
+
var templateObject_1$17;
|
|
13931
13931
|
|
|
13932
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13932
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
13933
13933
|
var AmazonButton = function (_a) {
|
|
13934
13934
|
var onClick = _a.onClick;
|
|
13935
13935
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13938,9 +13938,9 @@ var PaypalButton = function (_a) {
|
|
|
13938
13938
|
var onClick = _a.onClick;
|
|
13939
13939
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13940
13940
|
};
|
|
13941
|
-
var templateObject_1$
|
|
13941
|
+
var templateObject_1$16;
|
|
13942
13942
|
|
|
13943
|
-
var Container$
|
|
13943
|
+
var Container$O = newStyled.div(function (props) { return ({
|
|
13944
13944
|
height: 'auto',
|
|
13945
13945
|
textAlign: 'center',
|
|
13946
13946
|
justifyContent: 'center',
|
|
@@ -13990,12 +13990,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13990
13990
|
textAlign: 'center',
|
|
13991
13991
|
lineHeight: '18px',
|
|
13992
13992
|
};
|
|
13993
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13993
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$O, __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));
|
|
13994
13994
|
};
|
|
13995
13995
|
|
|
13996
|
-
var Container$
|
|
13997
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13998
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13996
|
+
var Container$N = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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'); });
|
|
13997
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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'); });
|
|
13998
|
+
var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13999
13999
|
var titlePosition = _a.titlePosition;
|
|
14000
14000
|
return titlePosition == 'center' &&
|
|
14001
14001
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14003,15 +14003,15 @@ var StyledTitle = newStyled.div(templateObject_3$G || (templateObject_3$G = __ma
|
|
|
14003
14003
|
var ImageCardWithDescription = function (_a) {
|
|
14004
14004
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14005
14005
|
var isMobile = useWindowDimensions().isMobile;
|
|
14006
|
-
return (jsxs$1(Container$
|
|
14006
|
+
return (jsxs$1(Container$N, __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));
|
|
14007
14007
|
};
|
|
14008
|
-
var templateObject_1$
|
|
14008
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$H;
|
|
14009
14009
|
|
|
14010
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14010
|
+
var Label$4 = newStyled.span(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14011
14011
|
var color = _a.color;
|
|
14012
14012
|
return color;
|
|
14013
14013
|
});
|
|
14014
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14014
|
+
var MandatoryIcon = newStyled.span(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14015
14015
|
var color = _a.color;
|
|
14016
14016
|
return color;
|
|
14017
14017
|
});
|
|
@@ -14020,7 +14020,7 @@ var InputLabel = function (_a) {
|
|
|
14020
14020
|
var theme = useTheme();
|
|
14021
14021
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14022
14022
|
};
|
|
14023
|
-
var templateObject_1$
|
|
14023
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14024
14024
|
|
|
14025
14025
|
var containerByStatus = function (theme, status) {
|
|
14026
14026
|
if (status === InputValidationType.Valid)
|
|
@@ -14029,12 +14029,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14029
14029
|
return theme.colors.semantic.urgent.color;
|
|
14030
14030
|
return '';
|
|
14031
14031
|
};
|
|
14032
|
-
var Container$
|
|
14032
|
+
var Container$M = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14033
14033
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14034
14034
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14035
14035
|
});
|
|
14036
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14037
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14036
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14037
|
+
var StyledInput = newStyled.input(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14038
14038
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14039
14039
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14040
14040
|
}, function (_a) {
|
|
@@ -14107,7 +14107,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5
|
|
|
14107
14107
|
return theme.component.input.lineHeight;
|
|
14108
14108
|
});
|
|
14109
14109
|
var ClearInput = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14110
|
-
var templateObject_1$
|
|
14110
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$G, templateObject_4$w, templateObject_5$p, templateObject_6$n;
|
|
14111
14111
|
|
|
14112
14112
|
var BaseInput = function (_a) {
|
|
14113
14113
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -14130,14 +14130,14 @@ var BaseInput = function (_a) {
|
|
|
14130
14130
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14131
14131
|
}, [status]);
|
|
14132
14132
|
var hasValue = Boolean(value);
|
|
14133
|
-
return (jsxs$1(Container$
|
|
14133
|
+
return (jsxs$1(Container$M, __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) {
|
|
14134
14134
|
onChange(event.target.value, event);
|
|
14135
14135
|
}, 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 () {
|
|
14136
14136
|
onChange('', { target: { value: '' } });
|
|
14137
14137
|
}, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
14138
14138
|
};
|
|
14139
14139
|
|
|
14140
|
-
var Button$
|
|
14140
|
+
var Button$4 = function (_a) {
|
|
14141
14141
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
14142
14142
|
if (variant === 'primary') {
|
|
14143
14143
|
return jsx$1(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -14151,11 +14151,11 @@ var Button$5 = function (_a) {
|
|
|
14151
14151
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14152
14152
|
};
|
|
14153
14153
|
|
|
14154
|
-
var Container$
|
|
14154
|
+
var Container$L = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
14155
14155
|
var theme = _a.theme;
|
|
14156
14156
|
return theme.component.inputCustom.input.borderRadius;
|
|
14157
14157
|
});
|
|
14158
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14158
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14159
14159
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14160
14160
|
return defaultRounded
|
|
14161
14161
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14170,23 +14170,23 @@ var Custom = function (_a) {
|
|
|
14170
14170
|
text: text,
|
|
14171
14171
|
disabled: rest.disabled,
|
|
14172
14172
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14173
|
-
return (jsx$1(Container$
|
|
14173
|
+
return (jsx$1(Container$L, __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$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14174
14174
|
};
|
|
14175
|
-
var templateObject_1$
|
|
14175
|
+
var templateObject_1$12, templateObject_2$O;
|
|
14176
14176
|
|
|
14177
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14177
|
+
var SuccessContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14178
14178
|
var size = _a.size;
|
|
14179
14179
|
return (size === 'small' ? '36px' : '');
|
|
14180
14180
|
});
|
|
14181
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14182
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14181
|
+
var SuccessMessage = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14182
|
+
var SuccessText = newStyled.span(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14183
14183
|
var Success = function (_a) {
|
|
14184
14184
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14185
14185
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14186
14186
|
};
|
|
14187
|
-
var templateObject_1$
|
|
14187
|
+
var templateObject_1$11, templateObject_2$N, templateObject_3$F;
|
|
14188
14188
|
|
|
14189
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
14189
|
+
var ButtonContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14190
14190
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14191
14191
|
return status === InputValidationType.Empty &&
|
|
14192
14192
|
type === 'primary' &&
|
|
@@ -14203,16 +14203,16 @@ var BasePlusButton = function (_a) {
|
|
|
14203
14203
|
}
|
|
14204
14204
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14205
14205
|
};
|
|
14206
|
-
var templateObject_1
|
|
14206
|
+
var templateObject_1$10;
|
|
14207
14207
|
|
|
14208
|
-
var Container$
|
|
14209
|
-
var IconContainer$
|
|
14208
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14209
|
+
var IconContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
14210
14210
|
var BasePlusIcon = function (_a) {
|
|
14211
14211
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14212
14212
|
var theme = useTheme();
|
|
14213
|
-
return (jsx$1(Container$
|
|
14213
|
+
return (jsx$1(Container$K, { 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));
|
|
14214
14214
|
};
|
|
14215
|
-
var templateObject_1
|
|
14215
|
+
var templateObject_1$$, templateObject_2$M;
|
|
14216
14216
|
|
|
14217
14217
|
var Input$3 = {
|
|
14218
14218
|
Simple: BaseInput,
|
|
@@ -14257,7 +14257,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14257
14257
|
}, [preventTouch, ref, touchStart]);
|
|
14258
14258
|
}
|
|
14259
14259
|
|
|
14260
|
-
var Container$
|
|
14260
|
+
var Container$J = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14261
14261
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14262
14262
|
return borderRadiusVariant &&
|
|
14263
14263
|
"\n border-radius: 40px;\n ";
|
|
@@ -14266,12 +14266,12 @@ var Container$I = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
14266
14266
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14267
14267
|
});
|
|
14268
14268
|
// max-height: 31.875rem;
|
|
14269
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14270
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14269
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14270
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14271
14271
|
var BottomTagContainer$5 = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14272
|
-
var NavButtonContainer$
|
|
14273
|
-
var Button$
|
|
14274
|
-
var settings$
|
|
14272
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14273
|
+
var Button$3 = newStyled.button(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
14274
|
+
var settings$3 = {
|
|
14275
14275
|
dots: true,
|
|
14276
14276
|
infinite: false,
|
|
14277
14277
|
speed: 200,
|
|
@@ -14279,7 +14279,7 @@ var settings$1 = {
|
|
|
14279
14279
|
slidesToScroll: 1,
|
|
14280
14280
|
initialSlide: 0,
|
|
14281
14281
|
};
|
|
14282
|
-
var getImageAttributes = function (idx, itemsOnViewport, imgAttributes) {
|
|
14282
|
+
var getImageAttributes$1 = function (idx, itemsOnViewport, imgAttributes) {
|
|
14283
14283
|
if (itemsOnViewport) {
|
|
14284
14284
|
// add loading and decoding attributes if enabled
|
|
14285
14285
|
// to speed up the loading of the images
|
|
@@ -14327,14 +14327,14 @@ var ImageProductSlide = function (_a) {
|
|
|
14327
14327
|
}
|
|
14328
14328
|
}
|
|
14329
14329
|
}, [contents, selectedValue]);
|
|
14330
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14330
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14331
14331
|
var _a;
|
|
14332
14332
|
var activeSlide = contents[e];
|
|
14333
14333
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14334
14334
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14335
14335
|
autoplay ? _playVideo() : _stopVideo();
|
|
14336
14336
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
14337
|
-
} }, settings$
|
|
14337
|
+
} }, settings$3, { nextArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content, idx) {
|
|
14338
14338
|
var _a;
|
|
14339
14339
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14340
14340
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
@@ -14344,19 +14344,19 @@ var ImageProductSlide = function (_a) {
|
|
|
14344
14344
|
width: '100%',
|
|
14345
14345
|
height: '510px',
|
|
14346
14346
|
};
|
|
14347
|
-
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14347
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14348
14348
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14349
14349
|
};
|
|
14350
|
-
var templateObject_1$
|
|
14350
|
+
var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m;
|
|
14351
14351
|
|
|
14352
|
-
var Container$
|
|
14352
|
+
var Container$I = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14353
14353
|
var ProductGalleryMobile = function (_a) {
|
|
14354
14354
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
14355
14355
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14356
14356
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14357
|
-
return (jsx$1(Container$
|
|
14357
|
+
return (jsx$1(Container$I, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
14358
14358
|
};
|
|
14359
|
-
var templateObject_1$
|
|
14359
|
+
var templateObject_1$Z;
|
|
14360
14360
|
|
|
14361
14361
|
function _extends() {
|
|
14362
14362
|
_extends = Object.assign || function (target) {
|
|
@@ -14623,27 +14623,27 @@ function useSwipeable(options) {
|
|
|
14623
14623
|
return handlers;
|
|
14624
14624
|
}
|
|
14625
14625
|
|
|
14626
|
-
var Button$
|
|
14626
|
+
var Button$2 = newStyled.button(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
14627
14627
|
var ArrowButton = function (_a) {
|
|
14628
14628
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14629
|
-
return (jsx$1(Button$
|
|
14629
|
+
return (jsx$1(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14630
14630
|
};
|
|
14631
|
-
var templateObject_1$
|
|
14631
|
+
var templateObject_1$Y;
|
|
14632
14632
|
|
|
14633
|
-
var Container$
|
|
14633
|
+
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
14634
14634
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14635
14635
|
var SlideDots = function (_a) {
|
|
14636
14636
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14637
14637
|
var theme = useTheme();
|
|
14638
|
-
return (jsx$1(Container$
|
|
14638
|
+
return (jsx$1(Container$H, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14639
14639
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14640
14640
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14641
14641
|
};
|
|
14642
|
-
var templateObject_1$
|
|
14642
|
+
var templateObject_1$X;
|
|
14643
14643
|
|
|
14644
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14645
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14646
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14644
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
14645
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14646
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14647
14647
|
var SlideNavigation = function (_a) {
|
|
14648
14648
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14649
14649
|
var theme = useTheme();
|
|
@@ -14655,23 +14655,23 @@ var SlideNavigation = function (_a) {
|
|
|
14655
14655
|
onNavigate(selectedIndex + 1);
|
|
14656
14656
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14657
14657
|
};
|
|
14658
|
-
var templateObject_1$
|
|
14658
|
+
var templateObject_1$W, templateObject_2$K, templateObject_3$D;
|
|
14659
14659
|
|
|
14660
|
-
var Container$
|
|
14660
|
+
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14661
14661
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14662
14662
|
return borderRadiusVariant &&
|
|
14663
14663
|
"\n border-radius: 40px;\n ";
|
|
14664
14664
|
});
|
|
14665
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14666
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14665
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14666
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14667
14667
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14668
14668
|
var _b, _c;
|
|
14669
14669
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14670
|
-
return (jsxs$1(Container$
|
|
14670
|
+
return (jsxs$1(Container$G, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14671
14671
|
});
|
|
14672
|
-
var templateObject_1$
|
|
14672
|
+
var templateObject_1$V, templateObject_2$J, templateObject_3$C;
|
|
14673
14673
|
|
|
14674
|
-
var Container$
|
|
14674
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14675
14675
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14676
14676
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14677
14677
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14693,11 +14693,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14693
14693
|
useEffect(function () {
|
|
14694
14694
|
setSelectedImage(images[index]);
|
|
14695
14695
|
}, [index, images]);
|
|
14696
|
-
return (jsxs$1(Container$
|
|
14696
|
+
return (jsxs$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14697
14697
|
};
|
|
14698
|
-
var templateObject_1$
|
|
14698
|
+
var templateObject_1$U;
|
|
14699
14699
|
|
|
14700
|
-
var Container$
|
|
14700
|
+
var Container$E = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14701
14701
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14702
14702
|
return borderRadiusVariant &&
|
|
14703
14703
|
"\n border-radius: 40px;\n ";
|
|
@@ -14706,15 +14706,15 @@ var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
14706
14706
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14707
14707
|
});
|
|
14708
14708
|
// max-height: 31.875rem;
|
|
14709
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14710
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14709
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14710
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14711
14711
|
var VideoOverlay$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14712
14712
|
var Video = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14713
14713
|
var VideoTag = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14714
14714
|
var Text$2 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14715
|
-
var NavButtonContainer
|
|
14716
|
-
var Button$
|
|
14717
|
-
var settings = {
|
|
14715
|
+
var NavButtonContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14716
|
+
var Button$1 = newStyled.button(templateObject_9$9 || (templateObject_9$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"])));
|
|
14717
|
+
var settings$2 = {
|
|
14718
14718
|
dots: true,
|
|
14719
14719
|
infinite: false,
|
|
14720
14720
|
speed: 200,
|
|
@@ -14758,27 +14758,258 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14758
14758
|
}
|
|
14759
14759
|
}
|
|
14760
14760
|
}, [images, selectedValue]);
|
|
14761
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14761
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$E, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14762
14762
|
var _a;
|
|
14763
14763
|
var activeSlide = images[e];
|
|
14764
14764
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14765
14765
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14766
14766
|
autoplay ? _playVideo() : _stopVideo();
|
|
14767
|
-
} }, settings, { nextArrow: jsx$1(NavButtonContainer
|
|
14767
|
+
} }, settings$2, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14768
14768
|
var _a, _b;
|
|
14769
14769
|
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14770
14770
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14771
14771
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14772
14772
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14773
14773
|
};
|
|
14774
|
-
var templateObject_1$
|
|
14774
|
+
var templateObject_1$T, templateObject_2$I, templateObject_3$B, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d, templateObject_9$9;
|
|
14775
14775
|
|
|
14776
|
-
var Container$
|
|
14776
|
+
var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14777
14777
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14778
14778
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14779
|
-
return (jsx$1(Container$
|
|
14779
|
+
return (jsx$1(Container$D, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14780
|
+
};
|
|
14781
|
+
var templateObject_1$S;
|
|
14782
|
+
|
|
14783
|
+
var _sendCommandToIframe = function (command) {
|
|
14784
|
+
var iframe = document.getElementById('vwo-video');
|
|
14785
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14786
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14787
|
+
event: 'command',
|
|
14788
|
+
func: command,
|
|
14789
|
+
}), '*' + '');
|
|
14790
|
+
};
|
|
14791
|
+
var _stopVideo = function () {
|
|
14792
|
+
_sendCommandToIframe('stopVideo');
|
|
14793
|
+
};
|
|
14794
|
+
var _playVideo = function () {
|
|
14795
|
+
_sendCommandToIframe('playVideo');
|
|
14796
|
+
};
|
|
14797
|
+
|
|
14798
|
+
var afterChangeSlide = function (_a) {
|
|
14799
|
+
var _b;
|
|
14800
|
+
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex, onChange = _a.onChange;
|
|
14801
|
+
var activeSlide = contents[slide];
|
|
14802
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14803
|
+
var autoplay = (_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _b === void 0 ? void 0 : _b.includes('autoplay=1');
|
|
14804
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14805
|
+
setSelectedImageIndex(Math.round(slide));
|
|
14806
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(slide);
|
|
14807
|
+
};
|
|
14808
|
+
|
|
14809
|
+
var settings$1 = {
|
|
14810
|
+
dots: false,
|
|
14811
|
+
infinite: false,
|
|
14812
|
+
speed: 200,
|
|
14813
|
+
slidesToShow: 1,
|
|
14814
|
+
slidesToScroll: 1,
|
|
14815
|
+
initialSlide: 0,
|
|
14816
|
+
};
|
|
14817
|
+
var getImageAttributes = function (idx, itemsOnViewport, imgAttributes) {
|
|
14818
|
+
if (itemsOnViewport) {
|
|
14819
|
+
// add loading and decoding attributes if enabled
|
|
14820
|
+
// to speed up the loading of the images
|
|
14821
|
+
var shouldApply = idx < itemsOnViewport;
|
|
14822
|
+
var loading = shouldApply ? 'eager' : 'lazy';
|
|
14823
|
+
var decoding = shouldApply ? 'sync' : 'async';
|
|
14824
|
+
imgAttributes.loading = loading;
|
|
14825
|
+
imgAttributes.decoding = decoding;
|
|
14826
|
+
}
|
|
14827
|
+
return imgAttributes;
|
|
14828
|
+
};
|
|
14829
|
+
var MainContent = function (_a) {
|
|
14830
|
+
var contents = _a.contents, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, onChange = _a.onChange, _b = _a.itemsOnViewport, itemsOnViewport = _b === void 0 ? 0 : _b, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex;
|
|
14831
|
+
var slick = useRef(null);
|
|
14832
|
+
var sliderWrapper = useRef(null);
|
|
14833
|
+
var _c = useState(true), arrowsVisible = _c[0], setArrowsVisible = _c[1];
|
|
14834
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14835
|
+
function hideArrows() {
|
|
14836
|
+
setArrowsVisible(false);
|
|
14837
|
+
}
|
|
14838
|
+
function showArrows() {
|
|
14839
|
+
setArrowsVisible(true);
|
|
14840
|
+
}
|
|
14841
|
+
useEffect(function () {
|
|
14842
|
+
var _a;
|
|
14843
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
14844
|
+
}, [contents, selectedImageIndex]);
|
|
14845
|
+
useEffect(function () {
|
|
14846
|
+
showArrows();
|
|
14847
|
+
}, [selectedImageIndex]);
|
|
14848
|
+
return (jsx$1(Container$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
14849
|
+
slide: e,
|
|
14850
|
+
contents: contents,
|
|
14851
|
+
setSelectedImageIndex: setSelectedImageIndex,
|
|
14852
|
+
onChange: onChange
|
|
14853
|
+
}); } }, settings$1, { nextArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }), void 0)) : undefined, prevArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0)) : undefined, ref: slick }, { children: contents.map(function (content, idx) {
|
|
14854
|
+
var _a;
|
|
14855
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14856
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14857
|
+
// default imgAttributes
|
|
14858
|
+
var imgAttributes = {
|
|
14859
|
+
alt: content.alt,
|
|
14860
|
+
width: '100%',
|
|
14861
|
+
height: '510px',
|
|
14862
|
+
};
|
|
14863
|
+
return (jsx$1("div", __assign$1({ "data-testid": "main-gallery-div-content-".concat(idx) }, { children: !isVideo ? (jsx$1(InnerImageZoom, { afterZoomIn: hideArrows, afterZoomOut: showArrows, src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, className: "zoomWrapper" }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
14864
|
+
}) }), void 0) }), void 0));
|
|
14865
|
+
};
|
|
14866
|
+
|
|
14867
|
+
var Container$C = newStyled.div({
|
|
14868
|
+
padding: '1rem',
|
|
14869
|
+
paddingTop: '2rem',
|
|
14870
|
+
gap: '0.5rem',
|
|
14871
|
+
display: 'flex',
|
|
14872
|
+
overflowX: 'auto',
|
|
14873
|
+
});
|
|
14874
|
+
var Thumbnail = newStyled.div({
|
|
14875
|
+
width: '70px',
|
|
14876
|
+
height: '86px',
|
|
14877
|
+
borderRadius: '8px',
|
|
14878
|
+
scrollMarginLeft: '0.5rem',
|
|
14879
|
+
scrollMarginRight: '0.5rem',
|
|
14880
|
+
});
|
|
14881
|
+
var borderImageInactive = '3px solid transparent';
|
|
14882
|
+
var Img = newStyled.img({
|
|
14883
|
+
height: '100%',
|
|
14884
|
+
borderRadius: '8px',
|
|
14885
|
+
overflow: 'hidden',
|
|
14886
|
+
border: borderImageInactive,
|
|
14887
|
+
});
|
|
14888
|
+
|
|
14889
|
+
var Slider = function (_a) {
|
|
14890
|
+
var images = _a.images, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, test = _a.test;
|
|
14891
|
+
var theme = useTheme();
|
|
14892
|
+
var itemsRef = useRef([]);
|
|
14893
|
+
function handleSelectImage(key) {
|
|
14894
|
+
var indexImageClicked = images.findIndex(function (img) { return img.key === key; });
|
|
14895
|
+
itemsRef.current[selectedImageIndex].scrollIntoView({
|
|
14896
|
+
behavior: 'smooth',
|
|
14897
|
+
inline: 'center',
|
|
14898
|
+
block: 'nearest',
|
|
14899
|
+
});
|
|
14900
|
+
setSelectedImageIndex(indexImageClicked);
|
|
14901
|
+
}
|
|
14902
|
+
function isTheActiveImage(i) {
|
|
14903
|
+
return i === selectedImageIndex;
|
|
14904
|
+
}
|
|
14905
|
+
function getBorderColor() {
|
|
14906
|
+
var color = theme.colors.pallete.primary.color;
|
|
14907
|
+
return color ? "3px solid ".concat(color) : 'none';
|
|
14908
|
+
}
|
|
14909
|
+
useEffect(function () {
|
|
14910
|
+
if (test) {
|
|
14911
|
+
return;
|
|
14912
|
+
}
|
|
14913
|
+
itemsRef.current[selectedImageIndex].scrollIntoView({
|
|
14914
|
+
behavior: 'smooth',
|
|
14915
|
+
inline: 'center',
|
|
14916
|
+
block: 'nearest',
|
|
14917
|
+
});
|
|
14918
|
+
}, [selectedImageIndex, test]);
|
|
14919
|
+
return (jsx$1(Container$C, { children: images.map(function (img, i) { return (jsx$1(Thumbnail, __assign$1({ onClick: function () { return handleSelectImage(img.key); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsx$1(Img, { src: img.url, alt: img.alt, style: {
|
|
14920
|
+
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
14921
|
+
} }, void 0) }), img.key)); }) }, void 0));
|
|
14922
|
+
};
|
|
14923
|
+
|
|
14924
|
+
var Container$B = newStyled.div({
|
|
14925
|
+
background: 'var(--truekind-default-secondary, #292929)',
|
|
14926
|
+
height: '100vh',
|
|
14927
|
+
width: '100vw',
|
|
14928
|
+
position: 'fixed',
|
|
14929
|
+
zIndex: '9999',
|
|
14930
|
+
top: 0,
|
|
14931
|
+
left: 0,
|
|
14932
|
+
});
|
|
14933
|
+
var Header$2 = newStyled.div({
|
|
14934
|
+
display: 'flex',
|
|
14935
|
+
justifyContent: 'end',
|
|
14936
|
+
alignItems: 'center',
|
|
14937
|
+
color: 'white',
|
|
14938
|
+
padding: '1.2rem',
|
|
14939
|
+
});
|
|
14940
|
+
var IconContainer$2 = newStyled.div({
|
|
14941
|
+
backgroundColor: '#E5E5E5',
|
|
14942
|
+
padding: '4px 7px 7px 6px',
|
|
14943
|
+
borderRadius: '50%',
|
|
14944
|
+
});
|
|
14945
|
+
newStyled.div({
|
|
14946
|
+
display: 'flex',
|
|
14947
|
+
flexDirection: 'column',
|
|
14948
|
+
height: '100%',
|
|
14949
|
+
justifyContent: 'space-around',
|
|
14950
|
+
padding: '20px 0'
|
|
14951
|
+
});
|
|
14952
|
+
|
|
14953
|
+
var GalleryDetailed = function (_a) {
|
|
14954
|
+
var images = _a.images, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, _c = _a.itemsOnViewport, itemsOnViewport = _c === void 0 ? 1 : _c, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, setGalleryOpened = _a.setGalleryOpened;
|
|
14955
|
+
function closeGallery() {
|
|
14956
|
+
setGalleryOpened(false);
|
|
14957
|
+
}
|
|
14958
|
+
return (jsxs$1(Container$B, { children: [jsx$1(Header$2, { children: jsx$1(IconContainer$2, __assign$1({ onClick: closeGallery }, { children: jsx$1(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsx$1(MainContent, { contents: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(Slider, { images: images, test: !!productImageDataTestId, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex }, void 0)] }, void 0));
|
|
14959
|
+
};
|
|
14960
|
+
|
|
14961
|
+
var TopTagContainer$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14962
|
+
var TopRightTagContainer = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
14963
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14964
|
+
var templateObject_1$R, templateObject_2$H, templateObject_3$A;
|
|
14965
|
+
|
|
14966
|
+
var settings = {
|
|
14967
|
+
dots: true,
|
|
14968
|
+
infinite: false,
|
|
14969
|
+
speed: 200,
|
|
14970
|
+
slidesToShow: 1.1,
|
|
14971
|
+
slidesToScroll: 1,
|
|
14972
|
+
initialSlide: 0,
|
|
14780
14973
|
};
|
|
14781
|
-
var
|
|
14974
|
+
var ContentGallery = function (_a) {
|
|
14975
|
+
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, onChange = _a.onChange, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, setGalleryOpened = _a.setGalleryOpened;
|
|
14976
|
+
var slick = useRef(null);
|
|
14977
|
+
var sliderWrapper = useRef(null);
|
|
14978
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14979
|
+
var onButtonClick = useCallback(function (i) {
|
|
14980
|
+
var _a;
|
|
14981
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i, true);
|
|
14982
|
+
}, [slick]);
|
|
14983
|
+
function handleClick() {
|
|
14984
|
+
setGalleryOpened(true);
|
|
14985
|
+
}
|
|
14986
|
+
useEffect(function () {
|
|
14987
|
+
var _a;
|
|
14988
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
14989
|
+
}, [contents, selectedImageIndex]);
|
|
14990
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsx$1(Container$J, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
14991
|
+
slide: e,
|
|
14992
|
+
contents: contents,
|
|
14993
|
+
setSelectedImageIndex: setSelectedImageIndex,
|
|
14994
|
+
onChange: onChange
|
|
14995
|
+
}); } }, settings, { ref: slick, centerPadding: "80" }, { children: contents.map(function (content, idx) {
|
|
14996
|
+
var _a;
|
|
14997
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14998
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14999
|
+
// default imgAttributes
|
|
15000
|
+
return (jsx$1("div", __assign$1({ role: "button", tabIndex: -1, onClick: handleClick, onKeyUp: function () { }, className: "slider-mobile-gallery", "data-testid": "slider-mobile-gallery-".concat(idx) }, { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1("img", { src: content.url, alt: content.alt, height: 510 }, void 0), jsx$1(TopTagContainer$2, __assign$1({ className: "banner-concealable", borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ className: "banner-concealable", "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagContainer, __assign$1({ className: "banner-concealable" }, { children: topRightTag }), void 0))] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
15001
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
15002
|
+
};
|
|
15003
|
+
|
|
15004
|
+
var MobileGallery = function (_a) {
|
|
15005
|
+
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, _c = _a.selectedValue, selectedValue = _c === void 0 ? 0 : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
15006
|
+
var _e = useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
|
|
15007
|
+
var _f = useState(false), galleryOpened = _f[0], setGalleryOpened = _f[1];
|
|
15008
|
+
useEffect(function () {
|
|
15009
|
+
setSelectedImageIndex(selectedValue);
|
|
15010
|
+
}, [selectedValue]);
|
|
15011
|
+
return (jsx$1("div", { children: galleryOpened ? (jsx$1(GalleryDetailed, { images: images, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, productImageDataTestId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) : (jsx$1(ContentGallery, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) }, void 0));
|
|
15012
|
+
};
|
|
14782
15013
|
|
|
14783
15014
|
var __defProp$1 = Object.defineProperty;
|
|
14784
15015
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14918,7 +15149,7 @@ var transformStyle = function (_a) {
|
|
|
14918
15149
|
return opened
|
|
14919
15150
|
? css(templateObject_3$z || (templateObject_3$z = __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$t || (templateObject_4$t = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14920
15151
|
};
|
|
14921
|
-
var Container$
|
|
15152
|
+
var Container$A = newStyled.div(templateObject_6$k || (templateObject_6$k = __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) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, 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) {
|
|
14922
15153
|
var width = _a.width;
|
|
14923
15154
|
return width
|
|
14924
15155
|
? css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14935,7 +15166,7 @@ var Modal = function (_a) {
|
|
|
14935
15166
|
}
|
|
14936
15167
|
close();
|
|
14937
15168
|
};
|
|
14938
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
15169
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$A, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14939
15170
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14940
15171
|
onDismiss();
|
|
14941
15172
|
} }, void 0)] }), void 0));
|
|
@@ -18786,7 +19017,7 @@ var BarContainer = newStyled.div({
|
|
|
18786
19017
|
padding: '0 16px',
|
|
18787
19018
|
position: 'relative',
|
|
18788
19019
|
});
|
|
18789
|
-
var Container$
|
|
19020
|
+
var Container$z = newStyled.div(function (_a) {
|
|
18790
19021
|
var backgroundColor = _a.backgroundColor;
|
|
18791
19022
|
return ({
|
|
18792
19023
|
width: '475px',
|
|
@@ -18828,11 +19059,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18828
19059
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18829
19060
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18830
19061
|
};
|
|
18831
|
-
return (jsxs$1(Container$
|
|
19062
|
+
return (jsxs$1(Container$z, __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));
|
|
18832
19063
|
};
|
|
18833
19064
|
var templateObject_1$P, templateObject_2$F;
|
|
18834
19065
|
|
|
18835
|
-
var Container$
|
|
19066
|
+
var Container$y = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
18836
19067
|
var theme = _a.theme;
|
|
18837
19068
|
return theme.component.orderBar.backgroundColor;
|
|
18838
19069
|
});
|
|
@@ -18840,7 +19071,7 @@ var H1 = newStyled.h1(templateObject_2$E || (templateObject_2$E = __makeTemplate
|
|
|
18840
19071
|
var OrderBar = function (_a) {
|
|
18841
19072
|
var message = _a.message, color = _a.color;
|
|
18842
19073
|
var theme = useTheme();
|
|
18843
|
-
return (jsxs$1(Container$
|
|
19074
|
+
return (jsxs$1(Container$y, __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));
|
|
18844
19075
|
};
|
|
18845
19076
|
var templateObject_1$O, templateObject_2$E;
|
|
18846
19077
|
|
|
@@ -18921,7 +19152,7 @@ var TableHead$3 = newStyled.th(templateObject_3$y || (templateObject_3$y = __mak
|
|
|
18921
19152
|
var Label$3 = newStyled('div')(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
18922
19153
|
newStyled(Label$3)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
18923
19154
|
newStyled(Label$3)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
18924
|
-
var Container$
|
|
19155
|
+
var Container$x = newStyled('div')(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
18925
19156
|
newStyled('span')(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
18926
19157
|
var Column$2 = newStyled('div')(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
18927
19158
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
@@ -18994,7 +19225,7 @@ var SizeChartTableV3 = function (_a) {
|
|
|
18994
19225
|
value: cell,
|
|
18995
19226
|
}); });
|
|
18996
19227
|
});
|
|
18997
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$
|
|
19228
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$x, { children: jsxs$1(Column$2, { children: [isMultilabel && (jsxs$1(Header$1, { children: [jsx$1("div", { children: trimmedYLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsx$1(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsx$1(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxs$1("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsx$1("div", { children: trimmedXLabel }, void 0), jsx$1(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
18998
19229
|
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
18999
19230
|
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsx$1(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsx$1(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
19000
19231
|
};
|
|
@@ -19006,7 +19237,7 @@ var ArrowTip = function (_a) {
|
|
|
19006
19237
|
};
|
|
19007
19238
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
19008
19239
|
|
|
19009
|
-
var Container$
|
|
19240
|
+
var Container$w = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
19010
19241
|
var Card$1 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
19011
19242
|
var Tag$1 = newStyled.div(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
19012
19243
|
var Label$2 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
@@ -19016,7 +19247,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$g || (templateObject_7$g =
|
|
|
19016
19247
|
var DiscountContainer = newStyled.div(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
19017
19248
|
var PackSelector = function (_a) {
|
|
19018
19249
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
19019
|
-
return (jsx$1(Container$
|
|
19250
|
+
return (jsx$1(Container$w, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
19020
19251
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
19021
19252
|
}) }), void 0));
|
|
19022
19253
|
};
|
|
@@ -19045,7 +19276,7 @@ var PackCard = function (_a) {
|
|
|
19045
19276
|
};
|
|
19046
19277
|
var templateObject_1$L, templateObject_2$B, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$b;
|
|
19047
19278
|
|
|
19048
|
-
var Container$
|
|
19279
|
+
var Container$v = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19049
19280
|
var IconContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
19050
19281
|
var PageNumbersContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
19051
19282
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -19113,7 +19344,7 @@ var Pagination = function (_a) {
|
|
|
19113
19344
|
}
|
|
19114
19345
|
return pages;
|
|
19115
19346
|
}, [from, page, showReducedPages, to]);
|
|
19116
|
-
return (jsxs$1(Container$
|
|
19347
|
+
return (jsxs$1(Container$v, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __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, __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));
|
|
19117
19348
|
};
|
|
19118
19349
|
|
|
19119
19350
|
var PaginatorBlog = function (_a) {
|
|
@@ -19127,12 +19358,12 @@ var PaginatorBlog = function (_a) {
|
|
|
19127
19358
|
setPage(page);
|
|
19128
19359
|
onChange(page);
|
|
19129
19360
|
};
|
|
19130
|
-
return (jsxs$1(Container$
|
|
19361
|
+
return (jsxs$1(Container$v, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer, __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
|
|
19131
19362
|
? theme.colors.shades['white'].color
|
|
19132
19363
|
: 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, __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));
|
|
19133
19364
|
};
|
|
19134
19365
|
|
|
19135
|
-
var Container$
|
|
19366
|
+
var Container$u = newStyled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
19136
19367
|
var width = _a.width;
|
|
19137
19368
|
return width;
|
|
19138
19369
|
}, function (_a) {
|
|
@@ -19148,11 +19379,11 @@ var Container$v = newStyled.div(templateObject_1$J || (templateObject_1$J = __ma
|
|
|
19148
19379
|
var PaymentMethod = function (_a) {
|
|
19149
19380
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
19150
19381
|
var theme = useTheme();
|
|
19151
|
-
return (jsx$1(Container$
|
|
19382
|
+
return (jsx$1(Container$u, __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));
|
|
19152
19383
|
};
|
|
19153
19384
|
var templateObject_1$J;
|
|
19154
19385
|
|
|
19155
|
-
var Container$
|
|
19386
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19156
19387
|
var IMAGE_WIDTH = '63px';
|
|
19157
19388
|
var ImageContainer$3 = newStyled.div(templateObject_2$z || (templateObject_2$z = __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);
|
|
19158
19389
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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({
|
|
@@ -19193,7 +19424,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19193
19424
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19194
19425
|
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;
|
|
19195
19426
|
var theme = useTheme();
|
|
19196
|
-
return (jsxs$1(Container$
|
|
19427
|
+
return (jsxs$1(Container$t, __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), 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" }, { children: subtitle }), void 0), midElement, 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)), 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));
|
|
19197
19428
|
};
|
|
19198
19429
|
var templateObject_1$I, templateObject_2$z, templateObject_3$v, templateObject_4$p, templateObject_5$j, templateObject_6$h;
|
|
19199
19430
|
|
|
@@ -19238,7 +19469,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19238
19469
|
position: 'absolute',
|
|
19239
19470
|
});
|
|
19240
19471
|
});
|
|
19241
|
-
var Container$
|
|
19472
|
+
var Container$s = newStyled.div(function (_a) {
|
|
19242
19473
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19243
19474
|
return ({
|
|
19244
19475
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19252,11 +19483,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19252
19483
|
var ProgressBar = function (_a) {
|
|
19253
19484
|
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;
|
|
19254
19485
|
var theme = useTheme();
|
|
19255
|
-
return (jsxs$1(Container$
|
|
19486
|
+
return (jsxs$1(Container$s, __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));
|
|
19256
19487
|
};
|
|
19257
19488
|
var templateObject_1$H;
|
|
19258
19489
|
|
|
19259
|
-
var Container$
|
|
19490
|
+
var Container$r = newStyled.div(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19260
19491
|
var Item$1 = newStyled.span(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
19261
19492
|
var Number$1 = newStyled(Item$1)(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
19262
19493
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$o || (templateObject_4$o = __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)'; });
|
|
@@ -19282,7 +19513,7 @@ var QuantityPicker = function (_a) {
|
|
|
19282
19513
|
return clamp(value);
|
|
19283
19514
|
});
|
|
19284
19515
|
}, [value, clamp]);
|
|
19285
|
-
return (jsxs$1(Container$
|
|
19516
|
+
return (jsxs$1(Container$r, __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));
|
|
19286
19517
|
};
|
|
19287
19518
|
var templateObject_1$G, templateObject_2$y, templateObject_3$u, templateObject_4$o;
|
|
19288
19519
|
|
|
@@ -19354,7 +19585,7 @@ var ContainerStyles$1 = {
|
|
|
19354
19585
|
};
|
|
19355
19586
|
|
|
19356
19587
|
var Wrapper$3 = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19357
|
-
var Container$
|
|
19588
|
+
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19358
19589
|
var Input$2 = newStyled.input(templateObject_2$x || (templateObject_2$x = __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) {
|
|
19359
19590
|
var disabled = _a.disabled;
|
|
19360
19591
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -19371,7 +19602,7 @@ var RadioPrimary = function (_a) {
|
|
|
19371
19602
|
var value = event.currentTarget.value;
|
|
19372
19603
|
onChange({ value: value, label: label });
|
|
19373
19604
|
};
|
|
19374
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
19605
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __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));
|
|
19375
19606
|
};
|
|
19376
19607
|
var templateObject_1$F, templateObject_2$x, templateObject_3$t;
|
|
19377
19608
|
|
|
@@ -19453,7 +19684,7 @@ var ContainerStyles = {
|
|
|
19453
19684
|
};
|
|
19454
19685
|
|
|
19455
19686
|
var Wrapper$2 = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19456
|
-
var Container$
|
|
19687
|
+
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19457
19688
|
var Input$1 = newStyled.input(templateObject_2$w || (templateObject_2$w = __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) {
|
|
19458
19689
|
var disabled = _a.disabled;
|
|
19459
19690
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -19476,7 +19707,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19476
19707
|
var value = event.currentTarget.value;
|
|
19477
19708
|
onChange({ value: value, label: label });
|
|
19478
19709
|
};
|
|
19479
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
19710
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { 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, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19480
19711
|
};
|
|
19481
19712
|
var templateObject_1$E, templateObject_2$w, templateObject_3$s;
|
|
19482
19713
|
|
|
@@ -19506,7 +19737,7 @@ function formatDate(date, format) {
|
|
|
19506
19737
|
}
|
|
19507
19738
|
}
|
|
19508
19739
|
|
|
19509
|
-
var Container$
|
|
19740
|
+
var Container$o = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19510
19741
|
var Content$1 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19511
19742
|
var StarsContent = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19512
19743
|
var ReviewContainer$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
@@ -19544,14 +19775,14 @@ var Review$1 = function (_a) {
|
|
|
19544
19775
|
}
|
|
19545
19776
|
}
|
|
19546
19777
|
}, [opened]);
|
|
19547
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
19778
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$o, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19548
19779
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19549
19780
|
};
|
|
19550
19781
|
var templateObject_1$D, templateObject_2$v, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$g, templateObject_7$f, templateObject_8$a, templateObject_9$7, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19551
19782
|
|
|
19552
19783
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19553
19784
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19554
|
-
var Container$
|
|
19785
|
+
var Container$n = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19555
19786
|
var Heading = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19556
19787
|
var Content = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19557
19788
|
var ReviewContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
@@ -19593,7 +19824,7 @@ var Review = function (_a) {
|
|
|
19593
19824
|
});
|
|
19594
19825
|
};
|
|
19595
19826
|
}, [randomId]);
|
|
19596
|
-
return (jsxs$1(Container$
|
|
19827
|
+
return (jsxs$1(Container$n, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19597
19828
|
__html: showMoreMobile
|
|
19598
19829
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19599
19830
|
: description,
|
|
@@ -19605,7 +19836,7 @@ var Review = function (_a) {
|
|
|
19605
19836
|
};
|
|
19606
19837
|
var templateObject_1$C, templateObject_2$u, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$f, templateObject_7$e, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19607
19838
|
|
|
19608
|
-
var Container$
|
|
19839
|
+
var Container$m = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19609
19840
|
var ReviewsContainer = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19610
19841
|
var ReviewsCount = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19611
19842
|
var ReviewsStars = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
@@ -19619,17 +19850,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19619
19850
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
19620
19851
|
var starsNumber = 5;
|
|
19621
19852
|
var theme = useTheme();
|
|
19622
|
-
return (jsxs$1(Container$
|
|
19853
|
+
return (jsxs$1(Container$m, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19623
19854
|
};
|
|
19624
19855
|
var templateObject_1$B, templateObject_2$t, templateObject_3$p, templateObject_4$l, templateObject_5$g, templateObject_6$e, templateObject_7$d;
|
|
19625
19856
|
|
|
19626
|
-
var Container$
|
|
19857
|
+
var Container$l = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19627
19858
|
var Text = newStyled.p(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19628
19859
|
var ScrollToTop = function (_a) {
|
|
19629
19860
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19630
19861
|
var theme = useTheme();
|
|
19631
19862
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19632
|
-
return (jsxs$1(Container$
|
|
19863
|
+
return (jsxs$1(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19633
19864
|
};
|
|
19634
19865
|
var templateObject_1$A, templateObject_2$s;
|
|
19635
19866
|
|
|
@@ -19662,7 +19893,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19662
19893
|
},
|
|
19663
19894
|
}); });
|
|
19664
19895
|
|
|
19665
|
-
var Container$
|
|
19896
|
+
var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
19666
19897
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19667
19898
|
}));
|
|
19668
19899
|
var Description = newStyled.div({
|
|
@@ -19679,18 +19910,18 @@ var Description = newStyled.div({
|
|
|
19679
19910
|
var ProductItem = function (_a) {
|
|
19680
19911
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19681
19912
|
var theme = useTheme();
|
|
19682
|
-
return (jsxs$1(Container$
|
|
19913
|
+
return (jsxs$1(Container$k, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19683
19914
|
};
|
|
19684
19915
|
var templateObject_1$z;
|
|
19685
19916
|
|
|
19686
|
-
var Container$
|
|
19917
|
+
var Container$j = newStyled.div({
|
|
19687
19918
|
display: 'flex',
|
|
19688
19919
|
justifyContent: 'center',
|
|
19689
19920
|
padding: '1rem',
|
|
19690
19921
|
});
|
|
19691
19922
|
var Footer = function (_a) {
|
|
19692
19923
|
var text = _a.text, onClick = _a.onClick;
|
|
19693
|
-
return (jsx$1(Container$
|
|
19924
|
+
return (jsx$1(Container$j, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19694
19925
|
};
|
|
19695
19926
|
|
|
19696
19927
|
var Ul = newStyled.ul({
|
|
@@ -19709,7 +19940,7 @@ var Anchor = newStyled.a({
|
|
|
19709
19940
|
padding: 0,
|
|
19710
19941
|
textDecoration: 'none',
|
|
19711
19942
|
});
|
|
19712
|
-
var Container$
|
|
19943
|
+
var Container$i = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19713
19944
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19714
19945
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19715
19946
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19720,18 +19951,18 @@ var Header = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTem
|
|
|
19720
19951
|
var ResultsPanel = function (_a) {
|
|
19721
19952
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19722
19953
|
var theme = useTheme();
|
|
19723
|
-
return (jsxs$1(Container$
|
|
19954
|
+
return (jsxs$1(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19724
19955
|
};
|
|
19725
19956
|
var templateObject_1$y, templateObject_2$r, templateObject_3$o;
|
|
19726
19957
|
|
|
19727
|
-
var Button
|
|
19958
|
+
var Button = newStyled.button(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
19728
19959
|
right: ['1rem', '7.75rem'],
|
|
19729
19960
|
top: ['0.75rem', '0.75rem'],
|
|
19730
19961
|
}));
|
|
19731
19962
|
var ClearButton = function (_a) {
|
|
19732
19963
|
var onClick = _a.onClick;
|
|
19733
19964
|
var theme = useTheme();
|
|
19734
|
-
return (jsx$1(Button
|
|
19965
|
+
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19735
19966
|
};
|
|
19736
19967
|
var templateObject_1$x;
|
|
19737
19968
|
|
|
@@ -19775,7 +20006,7 @@ var reducer = function (state, action) {
|
|
|
19775
20006
|
}
|
|
19776
20007
|
}
|
|
19777
20008
|
};
|
|
19778
|
-
var Container$
|
|
20009
|
+
var Container$h = newStyled.div({
|
|
19779
20010
|
position: 'relative',
|
|
19780
20011
|
display: 'flex',
|
|
19781
20012
|
});
|
|
@@ -19815,7 +20046,7 @@ var SearchBar = function (_a) {
|
|
|
19815
20046
|
if (e.cancelable) {
|
|
19816
20047
|
e.preventDefault();
|
|
19817
20048
|
}
|
|
19818
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
20049
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$h, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19819
20050
|
if (e.key === 'Enter') {
|
|
19820
20051
|
if (e.cancelable) {
|
|
19821
20052
|
e.preventDefault();
|
|
@@ -19826,20 +20057,20 @@ var SearchBar = function (_a) {
|
|
|
19826
20057
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19827
20058
|
};
|
|
19828
20059
|
|
|
19829
|
-
var Container$
|
|
20060
|
+
var Container$g = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19830
20061
|
var BackArrow = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19831
20062
|
var BoldSpan = newStyled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19832
20063
|
var NormalSpan = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19833
20064
|
var SearchNavigationParents = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19834
20065
|
var SearchNavigation = function (_a) {
|
|
19835
20066
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19836
|
-
return (jsxs$1(Container$
|
|
20067
|
+
return (jsxs$1(Container$g, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19837
20068
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19838
20069
|
}) }, void 0)] }, void 0));
|
|
19839
20070
|
};
|
|
19840
20071
|
var templateObject_1$v, templateObject_2$q, templateObject_3$n, templateObject_4$k, templateObject_5$f;
|
|
19841
20072
|
|
|
19842
|
-
var Container$
|
|
20073
|
+
var Container$f = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19843
20074
|
var alignCenter = _a.alignCenter;
|
|
19844
20075
|
return alignCenter &&
|
|
19845
20076
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19854,7 +20085,7 @@ var BannerText = newStyled.div(templateObject_3$m || (templateObject_3$m = __mak
|
|
|
19854
20085
|
var ShortBanner = function (_a) {
|
|
19855
20086
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19856
20087
|
var theme = useTheme();
|
|
19857
|
-
return (jsxs$1(Container$
|
|
20088
|
+
return (jsxs$1(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19858
20089
|
};
|
|
19859
20090
|
var templateObject_1$u, templateObject_2$p, templateObject_3$m;
|
|
19860
20091
|
|
|
@@ -19864,7 +20095,7 @@ var TableHead$2 = newStyled.th(templateObject_3$l || (templateObject_3$l = __mak
|
|
|
19864
20095
|
var Label$1 = newStyled('div')(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19865
20096
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19866
20097
|
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19867
|
-
var Container$
|
|
20098
|
+
var Container$e = newStyled('div')(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19868
20099
|
var LabelText$1 = newStyled('span')(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19869
20100
|
var Column$1 = newStyled('div')(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19870
20101
|
var TableRow$2 = newStyled.tr(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -19904,7 +20135,7 @@ var SizeChartTable = function (_a) {
|
|
|
19904
20135
|
var theme = useTheme();
|
|
19905
20136
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19906
20137
|
var isMultilabel = xLabel && yLabel;
|
|
19907
|
-
return (jsxs$1(Container$
|
|
20138
|
+
return (jsxs$1(Container$e, { children: [isMultilabel && (jsxs$1(LeftLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column$1, { children: [isMultilabel && (jsxs$1(TopLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ style: {
|
|
19908
20139
|
backgroundColor: getCellColor$1(index, cell),
|
|
19909
20140
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19910
20141
|
};
|
|
@@ -19963,12 +20194,12 @@ var TextButton = function (_a) {
|
|
|
19963
20194
|
};
|
|
19964
20195
|
var templateObject_1$r;
|
|
19965
20196
|
|
|
19966
|
-
var Container$
|
|
20197
|
+
var Container$d = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19967
20198
|
var P = newStyled.p(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19968
20199
|
var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19969
20200
|
var SizeFitGuide = function (_a) {
|
|
19970
20201
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19971
|
-
return (jsxs$1(Container$
|
|
20202
|
+
return (jsxs$1(Container$d, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19972
20203
|
};
|
|
19973
20204
|
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19974
20205
|
|
|
@@ -20018,7 +20249,7 @@ var Tab = function (_a) {
|
|
|
20018
20249
|
};
|
|
20019
20250
|
var templateObject_1$o;
|
|
20020
20251
|
|
|
20021
|
-
var Container$
|
|
20252
|
+
var Container$c = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
20022
20253
|
var TabList = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
20023
20254
|
var backgroundColor = _a.backgroundColor;
|
|
20024
20255
|
return backgroundColor;
|
|
@@ -20036,14 +20267,14 @@ var Tabs = function (_a) {
|
|
|
20036
20267
|
return null;
|
|
20037
20268
|
}
|
|
20038
20269
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
20039
|
-
return (jsxs$1(Container$
|
|
20270
|
+
return (jsxs$1(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
20040
20271
|
};
|
|
20041
20272
|
var templateObject_1$n, templateObject_2$k, templateObject_3$i, templateObject_4$h;
|
|
20042
20273
|
|
|
20043
|
-
var Container$
|
|
20274
|
+
var Container$b = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
20044
20275
|
var Tag = function (_a) {
|
|
20045
20276
|
var text = _a.text, className = _a.className;
|
|
20046
|
-
return jsx$1(Container$
|
|
20277
|
+
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
20047
20278
|
};
|
|
20048
20279
|
var templateObject_1$m;
|
|
20049
20280
|
|
|
@@ -20182,7 +20413,7 @@ var templateObject_1$l, templateObject_2$j, templateObject_3$h;
|
|
|
20182
20413
|
|
|
20183
20414
|
var ContainerDesktop = css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
20184
20415
|
var ContainerMobile = css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
20185
|
-
var Container$
|
|
20416
|
+
var Container$a = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
20186
20417
|
var TextContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
20187
20418
|
var TextWithImage = function (_a) {
|
|
20188
20419
|
var _b, _c, _d, _e;
|
|
@@ -20203,7 +20434,7 @@ var TextWithImage = function (_a) {
|
|
|
20203
20434
|
// @ts-ignore
|
|
20204
20435
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20205
20436
|
};
|
|
20206
|
-
return (jsxs(Container$
|
|
20437
|
+
return (jsxs(Container$a, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
20207
20438
|
backgroundColor: props.btnBGColor,
|
|
20208
20439
|
color: '#ffffff',
|
|
20209
20440
|
border: props.btnBGColor,
|
|
@@ -20334,11 +20565,11 @@ var Currency = newStyled.span(templateObject_3$d || (templateObject_3$d = __make
|
|
|
20334
20565
|
var theme = _a.theme;
|
|
20335
20566
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20336
20567
|
});
|
|
20337
|
-
var Container$
|
|
20568
|
+
var Container$9 = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20338
20569
|
var highlightColor = _a.highlightColor;
|
|
20339
20570
|
return highlightColor;
|
|
20340
20571
|
});
|
|
20341
|
-
var TotalContainer = newStyled(Container$
|
|
20572
|
+
var TotalContainer = newStyled(Container$9)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20342
20573
|
var showTotalLabel = _a.showTotalLabel;
|
|
20343
20574
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20344
20575
|
});
|
|
@@ -20353,7 +20584,7 @@ var templateObject_1$h, templateObject_2$f, templateObject_3$d, templateObject_4
|
|
|
20353
20584
|
var Total = function (_a) {
|
|
20354
20585
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
20355
20586
|
var theme = useTheme();
|
|
20356
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
20587
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20357
20588
|
};
|
|
20358
20589
|
|
|
20359
20590
|
var Wrapper = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
@@ -20388,7 +20619,7 @@ var Totals = {
|
|
|
20388
20619
|
Subtotal: Subtotal,
|
|
20389
20620
|
};
|
|
20390
20621
|
|
|
20391
|
-
var Container$
|
|
20622
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20392
20623
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20393
20624
|
var CheckpointDate$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20394
20625
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -20429,7 +20660,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20429
20660
|
}
|
|
20430
20661
|
return '30px';
|
|
20431
20662
|
};
|
|
20432
|
-
return (jsxs$1(Container$
|
|
20663
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20433
20664
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20434
20665
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
20435
20666
|
? activeCheckpointColor
|
|
@@ -20442,7 +20673,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20442
20673
|
};
|
|
20443
20674
|
var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$b, templateObject_5$b, templateObject_6$a, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$2;
|
|
20444
20675
|
|
|
20445
|
-
var Container$
|
|
20676
|
+
var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20446
20677
|
var CheckpointContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20447
20678
|
var CheckpointDate = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20448
20679
|
var CheckpointDateLabel = newStyled.p(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -20471,7 +20702,7 @@ var TrackingProgress = function (_a) {
|
|
|
20471
20702
|
}
|
|
20472
20703
|
return '30px';
|
|
20473
20704
|
};
|
|
20474
|
-
return (jsxs$1(Container$
|
|
20705
|
+
return (jsxs$1(Container$7, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20475
20706
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20476
20707
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
20477
20708
|
? theme.colors.semantic.informative.color
|
|
@@ -20511,7 +20742,7 @@ var HurryUp = function (_a) {
|
|
|
20511
20742
|
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));
|
|
20512
20743
|
};
|
|
20513
20744
|
|
|
20514
|
-
var Container$
|
|
20745
|
+
var Container$6 = newStyled.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
20515
20746
|
var size = _a.size;
|
|
20516
20747
|
return (size ? size : '100%');
|
|
20517
20748
|
}, function (_a) {
|
|
@@ -20542,7 +20773,7 @@ var templateObject_1$c, templateObject_2$b;
|
|
|
20542
20773
|
|
|
20543
20774
|
var Spinner = function (_a) {
|
|
20544
20775
|
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;
|
|
20545
|
-
return (jsx$1(Container$
|
|
20776
|
+
return (jsx$1(Container$6, __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));
|
|
20546
20777
|
};
|
|
20547
20778
|
|
|
20548
20779
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
@@ -20703,7 +20934,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$3 || (templateOb
|
|
|
20703
20934
|
? ClubBorderColor
|
|
20704
20935
|
: Shades200Color;
|
|
20705
20936
|
});
|
|
20706
|
-
var Container$
|
|
20937
|
+
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20707
20938
|
var templateObject_1$8, templateObject_2$7, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$3, templateObject_11$1;
|
|
20708
20939
|
|
|
20709
20940
|
var ClubOfferSelector = function (_a) {
|
|
@@ -20743,7 +20974,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20743
20974
|
onChange(__assign$1({}, dataObj));
|
|
20744
20975
|
};
|
|
20745
20976
|
var isSelected = radioIds.clubOfferSelector.id === radioCheck.id;
|
|
20746
|
-
return (jsxs$1(Container$
|
|
20977
|
+
return (jsxs$1(Container$5, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds.clubOfferSelector, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsx$1(DiscountTag$1, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$1, __assign$1({ isSelected: isSelected }, { children: [jsx$1(FlexContainer$1, { children: jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.clubOfferSelector.id, id: radioIds.clubOfferSelector.id, value: radioIds.clubOfferSelector.id, checked: isSelected, size: ComponentSize.Medium, style: {
|
|
20747
20978
|
marginRight: '10px',
|
|
20748
20979
|
}, labelStyle: {
|
|
20749
20980
|
color: ClubBorderColor,
|
|
@@ -20787,14 +21018,14 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20787
21018
|
});
|
|
20788
21019
|
});
|
|
20789
21020
|
var ImageHoverContainer$1 = newStyled.img(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
20790
|
-
var Container$
|
|
21021
|
+
var Container$4 = newStyled.a(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
20791
21022
|
var ProdCardContainer$2 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
20792
21023
|
var Title$2 = newStyled.p(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20793
21024
|
newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20794
21025
|
var style = _a.style;
|
|
20795
21026
|
return style.width;
|
|
20796
21027
|
});
|
|
20797
|
-
var BottomTagContainer$
|
|
21028
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20798
21029
|
var style = _a.style;
|
|
20799
21030
|
return style.bottom || '6%';
|
|
20800
21031
|
});
|
|
@@ -20837,7 +21068,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
20837
21068
|
};
|
|
20838
21069
|
}
|
|
20839
21070
|
};
|
|
20840
|
-
var TopTagContainer$
|
|
21071
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20841
21072
|
var style = _a.style;
|
|
20842
21073
|
return style.width;
|
|
20843
21074
|
});
|
|
@@ -20853,7 +21084,7 @@ var ProductCard = function (_a) {
|
|
|
20853
21084
|
_a[ComponentSize.Small] = 2,
|
|
20854
21085
|
_a)[size];
|
|
20855
21086
|
}, [size]);
|
|
20856
|
-
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
21087
|
+
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer$1, __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$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(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 }, void 0)), imageHover ? (jsx$1(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", 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), jsxs$1(Container$4, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === ComponentSize.Small ? 'start' : 'center') } }, { children: [jsx$1(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx$1(Spacing, { size: space }, void 0), priceLoading ? (jsx$1(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsx$1(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsx$1(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
|
|
20857
21088
|
};
|
|
20858
21089
|
var templateObject_1$5;
|
|
20859
21090
|
|
|
@@ -20867,14 +21098,14 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
20867
21098
|
});
|
|
20868
21099
|
var DiscountLabel$1 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20869
21100
|
var ImageHoverContainer = newStyled.img(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
20870
|
-
var Container$
|
|
21101
|
+
var Container$3 = newStyled.a(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20871
21102
|
var ProdCardContainer$1 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
20872
21103
|
var Title$1 = newStyled.p(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20873
|
-
var TopTagContainer
|
|
21104
|
+
var TopTagContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20874
21105
|
var style = _a.style;
|
|
20875
21106
|
return style.width;
|
|
20876
21107
|
});
|
|
20877
|
-
var BottomTagContainer
|
|
21108
|
+
var BottomTagContainer = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20878
21109
|
var _b;
|
|
20879
21110
|
var style = _a.style;
|
|
20880
21111
|
return (_b = style.bottom) !== null && _b !== void 0 ? _b : '6%';
|
|
@@ -20947,7 +21178,7 @@ var ProductCardV2 = function (_a) {
|
|
|
20947
21178
|
return jsx$1(Fragment$2, {}, void 0);
|
|
20948
21179
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20949
21180
|
};
|
|
20950
|
-
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
21181
|
+
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$3, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer, __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$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottom-tag-container", style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(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 }, void 0)), imageHover ? (jsx$1(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", 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), jsxs$1(Container$3, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Text$7, __assign$1({ variant: "link", underline: true }, { children: colorsCopy }), void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(RatingDisplay, {}, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxs$1("div", __assign$1({ style: {
|
|
20951
21182
|
display: 'flex',
|
|
20952
21183
|
alignItems: 'flex-start',
|
|
20953
21184
|
gap: '5px',
|
|
@@ -20965,7 +21196,7 @@ newStyled.div(function (_a) {
|
|
|
20965
21196
|
});
|
|
20966
21197
|
var DiscountLabel = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20967
21198
|
newStyled.img(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
20968
|
-
var Container$
|
|
21199
|
+
var Container$2 = newStyled.a(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20969
21200
|
var ProdCardContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
20970
21201
|
var Title = newStyled.p(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20971
21202
|
newStyled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
@@ -21034,7 +21265,7 @@ var ProductCardV3 = function (_a) {
|
|
|
21034
21265
|
return jsx$1(Fragment$2, {}, void 0);
|
|
21035
21266
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
21036
21267
|
};
|
|
21037
|
-
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$
|
|
21268
|
+
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$2, __assign$1({ "data-testid": "first-image-div", as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick, style: { marginRight: '-90px' } }, { children: jsx$1(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 }, void 0) }), void 0), jsxs$1(Container$2, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsxs$1("div", __assign$1({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [jsx$1(Title, __assign$1({ theme: theme, align: alignName, style: { fontSize: '14px' } }, { children: title }), void 0), jsx$1("button", __assign$1({ "data-testid": "quick-eye-button", style: {
|
|
21038
21269
|
margin: '5x 0 0 45px',
|
|
21039
21270
|
backgroundColor: 'transparent',
|
|
21040
21271
|
border: 'none',
|
|
@@ -21048,53 +21279,8 @@ var ProductCardV3 = function (_a) {
|
|
|
21048
21279
|
} }, { children: jsx$1(Image$3, { alt: "quick-view-eye", src: "https://cdn.shopify.com/s/files/1/0242/7086/4465/files/quick-view-eye.png?v=1712256686", width: "32px", height: "32px", borderRadius: "1px" }, void 0) }), void 0)] }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", underline: true, style: { fontSize: '12px' } }, { children: colorsCopy }), void 0), jsx$1(Spacing, { size: space }, void 0), priceLoading ? jsx$1(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), jsx$1(Spacing, { size: space }, void 0), jsx$1(DiscountLabel, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag }), void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(Spacing, { size: space }, void 0), jsx$1(RatingDisplay, {}, void 0)] }), void 0)] }), void 0));
|
|
21049
21280
|
};
|
|
21050
21281
|
|
|
21051
|
-
|
|
21052
|
-
|
|
21053
|
-
speed: 200,
|
|
21054
|
-
slidesToShow: 1,
|
|
21055
|
-
slidesToScroll: 1,
|
|
21056
|
-
initialSlide: 0,
|
|
21057
|
-
arrows: true,
|
|
21058
|
-
dots: false,
|
|
21059
|
-
};
|
|
21060
|
-
var THUMBNAIL_SETTINGS = {
|
|
21061
|
-
swipeToSlide: true,
|
|
21062
|
-
focusOnSelect: true,
|
|
21063
|
-
infinite: false,
|
|
21064
|
-
centerPadding: '16px',
|
|
21065
|
-
slidesToShow: 6,
|
|
21066
|
-
speed: 200,
|
|
21067
|
-
arrows: false,
|
|
21068
|
-
responsive: [
|
|
21069
|
-
{
|
|
21070
|
-
breakpoint: 320,
|
|
21071
|
-
settings: {
|
|
21072
|
-
slidesToShow: 3.5,
|
|
21073
|
-
},
|
|
21074
|
-
},
|
|
21075
|
-
{
|
|
21076
|
-
breakpoint: 375,
|
|
21077
|
-
settings: {
|
|
21078
|
-
slidesToShow: 4.5,
|
|
21079
|
-
},
|
|
21080
|
-
},
|
|
21081
|
-
{
|
|
21082
|
-
breakpoint: 410,
|
|
21083
|
-
settings: {
|
|
21084
|
-
slidesToShow: 5,
|
|
21085
|
-
},
|
|
21086
|
-
},
|
|
21087
|
-
{
|
|
21088
|
-
breakpoint: 480,
|
|
21089
|
-
settings: {
|
|
21090
|
-
slidesToShow: 5.5,
|
|
21091
|
-
},
|
|
21092
|
-
},
|
|
21093
|
-
],
|
|
21094
|
-
};
|
|
21095
|
-
|
|
21096
|
-
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
21097
|
-
var SliderContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
21282
|
+
newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
21283
|
+
newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
21098
21284
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21099
21285
|
return borderRadiusVariant &&
|
|
21100
21286
|
"\n border-radius: 40px;\n ";
|
|
@@ -21102,26 +21288,26 @@ var SliderContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 =
|
|
|
21102
21288
|
var theme = _a.theme;
|
|
21103
21289
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21104
21290
|
});
|
|
21105
|
-
|
|
21106
|
-
|
|
21107
|
-
|
|
21291
|
+
newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
21292
|
+
newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21293
|
+
newStyled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
21108
21294
|
var theme = _a.theme;
|
|
21109
21295
|
return theme.colors.shades.white.color;
|
|
21110
21296
|
});
|
|
21111
|
-
|
|
21112
|
-
|
|
21297
|
+
newStyled.button(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
21298
|
+
newStyled(Slider$1)(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"])), function (_a) {
|
|
21113
21299
|
var theme = _a.theme;
|
|
21114
21300
|
return theme.colors.pallete.primary.color;
|
|
21115
21301
|
});
|
|
21116
|
-
|
|
21302
|
+
newStyled(Image$3)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
21117
21303
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
21118
21304
|
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
21119
21305
|
});
|
|
21120
|
-
|
|
21306
|
+
newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
21121
21307
|
var paddingRight = _a.paddingRight;
|
|
21122
21308
|
return paddingRight || '12px';
|
|
21123
21309
|
});
|
|
21124
|
-
|
|
21310
|
+
newStyled(Image$3)(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"], ["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"])), function (_a) {
|
|
21125
21311
|
var width = _a.width, theme = _a.theme;
|
|
21126
21312
|
return width || theme.component.gallery.thumbnail.mobile.width;
|
|
21127
21313
|
}, function (_a) {
|
|
@@ -21133,31 +21319,6 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$2 || (templateObject_1
|
|
|
21133
21319
|
});
|
|
21134
21320
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$2, templateObject_10$2;
|
|
21135
21321
|
|
|
21136
|
-
var ProductGalleryMobileV4 = function (_a) {
|
|
21137
|
-
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
21138
|
-
var colors = useTheme$1().colors;
|
|
21139
|
-
var _c = useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
21140
|
-
var _d = useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
21141
|
-
var slick = useRef(null);
|
|
21142
|
-
var thumbnailRef = useRef(null);
|
|
21143
|
-
var sliderWrapper = useRef(null);
|
|
21144
|
-
var theme = useTheme$1();
|
|
21145
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
21146
|
-
useEffect(function () {
|
|
21147
|
-
if (slick.current)
|
|
21148
|
-
setNav1(slick.current);
|
|
21149
|
-
if (thumbnailRef.current)
|
|
21150
|
-
setNav2(thumbnailRef.current);
|
|
21151
|
-
}, []);
|
|
21152
|
-
return (jsx$1(Container$2, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
21153
|
-
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
21154
|
-
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
21155
|
-
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
21156
|
-
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
21157
|
-
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager", isRatioSquare: isRatioSquare }), void 0) }), key));
|
|
21158
|
-
}) }), void 0)] }), void 0) }), void 0));
|
|
21159
|
-
};
|
|
21160
|
-
|
|
21161
21322
|
var ScrollContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"])));
|
|
21162
21323
|
var TableElement = newStyled.table(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
21163
21324
|
var TableCell = newStyled.td(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
@@ -21360,5 +21521,5 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
21360
21521
|
}, useV2Style: true, checked: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), disabled: radiosStatuses.oneTime.disabled, highlighted: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
21361
21522
|
};
|
|
21362
21523
|
|
|
21363
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21524
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, MobileGallery as ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21364
21525
|
//# sourceMappingURL=index.esm.js.map
|