@trafilea/afrodita-components 6.36.3 → 6.36.4
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 +1 -2
- package/build/index.esm.css +1 -2
- package/build/index.esm.js +709 -648
- package/build/index.esm.js.map +1 -1
- package/build/index.js +709 -648
- 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$1q = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __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$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = _
|
|
|
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$1E || (templateObject_2$1E = __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$1D || (templateObject_2$1D = __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$1q, __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$2i, templateObject_2$1E;
|
|
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$1p = 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) {
|
|
3255
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3256
3256
|
return backgroundColor;
|
|
3257
3257
|
}, function (_a) {
|
|
@@ -3273,7 +3273,7 @@ var Container$1m = newStyled.div(templateObject_1$2g || (templateObject_1$2g = _
|
|
|
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$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) {
|
|
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$1C || (templateObject_2$1C = __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$1p, __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$2h, templateObject_2$1D;
|
|
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$1o = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1C || (templateObject_2$1C = __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$1B || (templateObject_2$1B = __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$1f || (templateObject_3$1f = __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$1o, __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$2g, templateObject_2$1C, templateObject_3$1f;
|
|
3461
3461
|
|
|
3462
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __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$1o, __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$2f;
|
|
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$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3534
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3535
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1e || (templateObject_3$1e = __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$1o, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1o, { 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$2e, templateObject_2$1B, templateObject_3$1e;
|
|
3607
3607
|
|
|
3608
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3608
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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$1o, __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$2d;
|
|
3643
3643
|
|
|
3644
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3644
|
+
var FinalPriceStyledContainer = 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"])));
|
|
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$1o, __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$2c;
|
|
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$2b || (templateObject_1$2b = __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$1A || (templateObject_2$1A = __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$2b, templateObject_2$1A;
|
|
3682
3682
|
|
|
3683
3683
|
var ClubPriceMemberLabel = function (_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 @@ var ClubPriceMemberLabel = function (_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$1n = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = _
|
|
|
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$1n, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3716
3716
|
};
|
|
3717
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$2a;
|
|
3718
3718
|
|
|
3719
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3719
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$29 || (templateObject_1$29 = __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$28 || (templateObject_1$28
|
|
|
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$1z || (templateObject_2$1z = __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$1y || (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$29, templateObject_2$1z;
|
|
3749
3749
|
|
|
3750
3750
|
/* eslint-disable no-undef */
|
|
3751
3751
|
var cache = new Map();
|
|
@@ -3921,7 +3921,7 @@ var buildImageUrl = function (_a) {
|
|
|
3921
3921
|
}
|
|
3922
3922
|
};
|
|
3923
3923
|
|
|
3924
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3924
|
+
var Img$1 = newStyled.img(templateObject_1$28 || (templateObject_1$28 = __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;
|
|
@@ -3930,15 +3930,15 @@ var Image$3 = function (_a) {
|
|
|
3930
3930
|
: src;
|
|
3931
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$28;
|
|
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$27 || (templateObject_1$27 = __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$1y || (templateObject_2$1y = __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$1d || (templateObject_3$1d = __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$27, templateObject_2$1y, templateObject_3$1d;
|
|
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,10 +4772,10 @@ 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$
|
|
4778
|
-
display1: newStyled.h1(templateObject_4$
|
|
4775
|
+
hero1: newStyled.h1(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
hero2: newStyled.h2(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
hero3: newStyled.h3(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject([""], [""]))),
|
|
4778
|
+
display1: newStyled.h1(templateObject_4$Z || (templateObject_4$Z = __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([""], [""]))),
|
|
4781
4781
|
heading1: newStyled.h1(templateObject_7$v || (templateObject_7$v = __makeTemplateObject([""], [""]))),
|
|
@@ -4908,17 +4908,17 @@ var DEFAULTS = {
|
|
|
4908
4908
|
size: 'regular',
|
|
4909
4909
|
},
|
|
4910
4910
|
};
|
|
4911
|
-
var templateObject_1$
|
|
4911
|
+
var templateObject_1$26, templateObject_2$1x, templateObject_3$1c, templateObject_4$Z, templateObject_5$J, templateObject_6$E, templateObject_7$v, 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$
|
|
4916
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
4913
|
+
var Container$1m = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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$1w || (templateObject_2$1w = __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$1b || (templateObject_3$1b = __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
|
+
var Label$7 = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __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$1m, __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$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$I, templateObject_6$D;
|
|
4944
4944
|
|
|
4945
|
-
var Container$
|
|
4946
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4945
|
+
var Container$1l = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __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$1v || (templateObject_2$1v = __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$1l, { 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$24, templateObject_2$1v;
|
|
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$1k = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4957
|
+
var Title$b = newStyled.p(templateObject_2$1u || (templateObject_2$1u = __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$1a || (templateObject_3$1a = __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$1k, { 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$23, templateObject_2$1u, templateObject_3$1a;
|
|
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$22 || (templateObject_1$22 = __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$22;
|
|
5064
5064
|
|
|
5065
|
-
var Container$
|
|
5065
|
+
var Container$1j = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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$1j, { 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$21;
|
|
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$20 || (templateObject_1$20 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5226
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __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$20, templateObject_2$1t;
|
|
5228
5228
|
|
|
5229
|
-
var Container$
|
|
5229
|
+
var Container$1i = 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$
|
|
5238
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5236
|
+
var FlexCentered = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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$19 || (templateObject_3$19 = __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
|
+
var RightSide = newStyled.div(templateObject_4$X || (templateObject_4$X = __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$1s, templateObject_3$19, templateObject_4$X, 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$1i, __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$1_ || (templateObject_1$1_ = __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$1r || (templateObject_2$1r = __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$1_, templateObject_2$1r;
|
|
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$1Z || (templateObject_1$1Z = __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$1Z;
|
|
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$1Y || (templateObject_1$1Y = __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$1Y;
|
|
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$1h = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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$1q || (templateObject_2$1q = __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$1h, { 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$1X, templateObject_2$1q;
|
|
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$1g = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""])));
|
|
5633
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __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$18 || (templateObject_3$18 = __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$1g : 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$1W, templateObject_2$1p, templateObject_3$18;
|
|
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$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5736
|
+
var Container$1f = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5737
|
+
var Input$4 = newStyled.input(templateObject_2$1o || (templateObject_2$1o = __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,14 +5742,14 @@ 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$17 || (templateObject_3$17 = __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) {
|
|
5749
5749
|
var theme = _a.theme;
|
|
5750
5750
|
return theme.component.radio.lineHeight;
|
|
5751
5751
|
});
|
|
5752
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5752
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5753
5753
|
var theme = _a.theme;
|
|
5754
5754
|
return theme.component.radio.textSize;
|
|
5755
5755
|
}, 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$1f, __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$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W;
|
|
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$1U || (templateObject_1$1U = __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$1T || (templateObject_1$1T = __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$1n || (templateObject_2$1n = __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,14 +5899,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1m || (templateObject_2$1m
|
|
|
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$16 || (templateObject_3$16 = __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) {
|
|
5906
5906
|
var backgroundColor = _a.backgroundColor;
|
|
5907
5907
|
return backgroundColor;
|
|
5908
5908
|
});
|
|
5909
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5909
|
+
var TooltipText = newStyled.div(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5910
5910
|
var theme = _a.theme;
|
|
5911
5911
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5912
5912
|
}, function (_a) {
|
|
@@ -5926,7 +5926,7 @@ var CloseToolTip = newStyled.button(templateObject_8$m || (templateObject_8$m =
|
|
|
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$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$G, templateObject_6$C, templateObject_7$u, templateObject_8$m;
|
|
5930
5930
|
|
|
5931
5931
|
var Tooltip = function (_a) {
|
|
5932
5932
|
var _b;
|
|
@@ -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$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5973
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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,11 +5984,11 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l
|
|
|
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$15 || (templateObject_3$15 = __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
|
});
|
|
5991
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$
|
|
5991
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5992
5992
|
var SubscriptionHeader$3 = newStyled.div(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5993
5993
|
var theme = _a.theme;
|
|
5994
5994
|
return theme.colors.shades[200].color;
|
|
@@ -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$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6010
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F, templateObject_6$B, templateObject_7$t, 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$1e, __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$1S || (templateObject_1$1S = __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$1l || (templateObject_2$1l = __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$14 || (templateObject_3$14 = __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) {
|
|
@@ -6095,7 +6095,7 @@ var ContainerBase$2 = newStyled.div(templateObject_3$13 || (templateObject_3$13
|
|
|
6095
6095
|
var theme = _a.theme;
|
|
6096
6096
|
return theme.colors.pallete.primary.color;
|
|
6097
6097
|
});
|
|
6098
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
6098
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6099
6099
|
var onClick = _a.onClick;
|
|
6100
6100
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6101
6101
|
});
|
|
@@ -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$1d = 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$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$E, templateObject_6$A, templateObject_7$s, 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$1d, __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$
|
|
6204
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6201
|
+
var CustomerDetails = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject([""], [""])));
|
|
6202
|
+
var CustomerInfo = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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$13 || (templateObject_3$13 = __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
|
+
var StarIconContainer = newStyled.div(templateObject_4$S || (templateObject_4$S = __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$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$D, templateObject_6$z;
|
|
6208
6208
|
|
|
6209
6209
|
var NameWithStars = function (_a) {
|
|
6210
6210
|
var name = _a.name, size = _a.size;
|
|
@@ -6222,10 +6222,10 @@ 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$
|
|
6228
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6225
|
+
var Container$1c = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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$1j || (templateObject_2$1j = __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$12 || (templateObject_3$12 = __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
|
+
var UserInfoText = newStyled.div(templateObject_4$R || (templateObject_4$R = __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;
|
|
6231
6231
|
}, function (_a) {
|
|
@@ -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$1Q, templateObject_2$1j, templateObject_3$12, templateObject_4$R;
|
|
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$1c, __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$1P || (templateObject_1$1P = __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$1P;
|
|
6328
6328
|
|
|
6329
|
-
var Body = newStyled.div(templateObject_1$
|
|
6329
|
+
var Body = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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$1O;
|
|
6335
6335
|
|
|
6336
|
-
var Container$
|
|
6336
|
+
var Container$1b = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = _
|
|
|
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$1b, __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$1N;
|
|
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$1M || (templateObject_1$1M = __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$1i || (templateObject_2$1i = __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$11 || (templateObject_3$11 = __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
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6367
|
-
var templateObject_1$
|
|
6366
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$Q || (templateObject_4$Q = __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$1M, templateObject_2$1i, templateObject_3$11, templateObject_4$Q;
|
|
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
|
|
6378
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6375
|
+
var Container$1a = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6376
|
+
var Title$9 = newStyled.h1(templateObject_2$1h || (templateObject_2$1h = __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$10 || (templateObject_3$10 = __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
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$P || (templateObject_4$P = __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$1a, { 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$1L, templateObject_2$1h, templateObject_3$10, templateObject_4$P;
|
|
6385
6385
|
|
|
6386
6386
|
var Bundle = {
|
|
6387
6387
|
Minimalistic: Minimalistic,
|
|
6388
6388
|
Simple: Simple,
|
|
6389
6389
|
};
|
|
6390
6390
|
|
|
6391
|
-
var Container$
|
|
6391
|
+
var Container$19 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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$1g || (templateObject_2$1g = __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$19, __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$1K, templateObject_2$1g, templateObject_3$$;
|
|
6409
6409
|
|
|
6410
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6410
|
+
var Text$6 = newStyled.span(templateObject_1$1J || (templateObject_1$1J = __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$1J;
|
|
6417
6417
|
|
|
6418
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6418
|
+
var P$3 = newStyled.p(templateObject_1$1I || (templateObject_1$1I = __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$1I;
|
|
6425
6425
|
|
|
6426
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6426
|
+
var Text$5 = newStyled.span(templateObject_1$1H || (templateObject_1$1H = __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$1H;
|
|
6433
6433
|
|
|
6434
|
-
var Container$
|
|
6434
|
+
var Container$18 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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$18, __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$1G;
|
|
6441
6441
|
|
|
6442
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6442
|
+
var Text$4 = newStyled.h3(templateObject_1$1F || (templateObject_1$1F = __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$1F;
|
|
6458
6458
|
|
|
6459
6459
|
var CartProductItem = {
|
|
6460
6460
|
Title: Title$8,
|
|
@@ -6464,10 +6464,10 @@ 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$
|
|
6470
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6467
|
+
var Container$17 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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$17)(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6469
|
+
var DollarPart = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __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
|
+
var ClubMembersText = newStyled.span(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
6473
6473
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\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$17, { 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$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$C, templateObject_6$y, templateObject_7$r, 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,10 +6485,10 @@ 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$
|
|
6491
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6488
|
+
var Container$16 = newStyled('div')(templateObject_1$1D || (templateObject_1$1D = __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$1e || (templateObject_2$1e = __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$Z || (templateObject_3$Z = __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
|
+
var Bar$2 = newStyled('div')(templateObject_4$N || (templateObject_4$N = __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");
|
|
6494
6494
|
}, function (_a) {
|
|
@@ -6497,14 +6497,14 @@ 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$16, __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$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N;
|
|
6503
6503
|
|
|
6504
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6505
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6506
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6507
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6504
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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$1d || (templateObject_2$1d = __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$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6507
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __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 () {
|
|
6510
6510
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -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$1o, __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$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$M, templateObject_5$B;
|
|
6562
6562
|
|
|
6563
6563
|
var STARTS_NUMBER = 5;
|
|
6564
6564
|
|
|
6565
|
-
var Container$
|
|
6566
|
-
var templateObject_1$
|
|
6565
|
+
var Container$15 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6566
|
+
var templateObject_1$1B;
|
|
6567
6567
|
|
|
6568
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6568
|
+
var StarContainer = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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$15, { 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$1A;
|
|
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$14 = newStyled.a(templateObject_1$1z || (templateObject_1$1z = __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$1c || (templateObject_2$1c = __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$1z, templateObject_2$1c;
|
|
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$14, __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,10 +6737,10 @@ 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$
|
|
6743
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6740
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1y || (templateObject_1$1y = __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$13 = newStyled.a(templateObject_2$1b || (templateObject_2$1b = __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$X || (templateObject_3$X = __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
|
+
var Title$7 = newStyled.p(templateObject_4$L || (templateObject_4$L = __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;
|
|
6746
6746
|
}, function (_a) {
|
|
@@ -6801,7 +6801,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$x || (templateObject_6
|
|
|
6801
6801
|
});
|
|
6802
6802
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$q || (templateObject_7$q = __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$1y, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$A, templateObject_6$x, templateObject_7$q, 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$13, __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$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$13, __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,10 +6876,10 @@ 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$
|
|
6882
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6879
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1x || (templateObject_1$1x = __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$12 = 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"])));
|
|
6881
|
+
var ProdCardContainer$3 = 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"])));
|
|
6882
|
+
var Title$6 = newStyled.p(templateObject_4$K || (templateObject_4$K = __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) {
|
|
6885
6885
|
case ComponentSize.Medium:
|
|
@@ -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$12, __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$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$3, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, 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$12, __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$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$z, templateObject_6$w, templateObject_7$p, templateObject_8$h;
|
|
6969
6969
|
|
|
6970
|
-
var Container$
|
|
6970
|
+
var Container$11 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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$11, __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$1w;
|
|
6981
6981
|
|
|
6982
6982
|
var Collection = {
|
|
6983
6983
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6985,10 +6985,10 @@ 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$
|
|
6991
|
-
var Span = newStyled.span(templateObject_4$
|
|
6988
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6989
|
+
newStyled(lt.Label)(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6990
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$V || (templateObject_3$V = __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
|
+
var Span = newStyled.span(templateObject_4$J || (templateObject_4$J = __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) {
|
|
6994
6994
|
var label = _a.label, values = _a.values;
|
|
@@ -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$1v, templateObject_2$19, templateObject_3$V, templateObject_4$J, 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$10 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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$18 || (templateObject_2$18 = __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$10, __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$1u, templateObject_2$18;
|
|
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$1t || (templateObject_1$1t = __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$1t;
|
|
7096
7096
|
|
|
7097
7097
|
var renderOptions = function (selectedColor, options) {
|
|
7098
7098
|
if (options == null || options.length === 0) {
|
|
@@ -7130,13 +7130,13 @@ 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$1s || (templateObject_1$1s = __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$17 || (templateObject_2$17 = __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$U || (templateObject_3$U = __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
|
});
|
|
7139
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7139
|
+
var H5 = newStyled.h5(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7140
7140
|
var H3$1 = newStyled.h3(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7141
7141
|
var FreeShipping = newStyled.span(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7142
7142
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -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$1s, templateObject_2$17, templateObject_3$U, templateObject_4$I, 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$1r || (templateObject_1$1r = __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$1q || (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$16 || (templateObject_2$16 = __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$1r, templateObject_2$16;
|
|
7202
7202
|
|
|
7203
7203
|
var BaseCTA = function (_a) {
|
|
7204
7204
|
var _b, _c, _d;
|
|
@@ -7285,26 +7285,26 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7285
7285
|
} }), void 0));
|
|
7286
7286
|
};
|
|
7287
7287
|
|
|
7288
|
-
var Container
|
|
7289
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7290
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7291
|
-
var Details = newStyled.span(templateObject_4$
|
|
7288
|
+
var Container$$ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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$15 || (templateObject_2$15 = __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$T || (templateObject_3$T = __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
|
+
var Details = newStyled.span(templateObject_4$H || (templateObject_4$H = __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$$, __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$1q, templateObject_2$15, templateObject_3$T, templateObject_4$H;
|
|
7298
7298
|
|
|
7299
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7299
|
+
var Title$5 = newStyled.h1(templateObject_1$1p || (templateObject_1$1p = __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$14 || (templateObject_2$14 = __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$S || (templateObject_3$S = __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
|
-
var Col = newStyled.div(templateObject_4$
|
|
7307
|
+
var Col = newStyled.div(templateObject_4$G || (templateObject_4$G = __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({
|
|
7308
7308
|
margin: ['0', '0 1.25rem'],
|
|
7309
7309
|
marginBottom: ['1.875rem', '0'],
|
|
7310
7310
|
alignItems: ['center', 'flex-start'],
|
|
@@ -7339,16 +7339,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7339
7339
|
var theme = useTheme();
|
|
7340
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$1p, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$u, templateObject_7$o, templateObject_8$g;
|
|
7343
7343
|
|
|
7344
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7344
|
+
var Backdrop = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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$13 || (templateObject_2$13 = __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$1o, templateObject_2$13;
|
|
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$
|
|
7408
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7405
|
+
var List = newStyled.ul(templateObject_1$1n || (templateObject_1$1n = __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$12 || (templateObject_2$12 = __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$R || (templateObject_3$R = __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
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$F || (templateObject_4$F = __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$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F, 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$
|
|
7427
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7424
|
+
var DropdownContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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$11 || (templateObject_2$11 = __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$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7427
|
+
var DetailLabel = newStyled.span(templateObject_4$E || (templateObject_4$E = __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$1m, templateObject_2$11, templateObject_3$Q, templateObject_4$E, 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,10 +7450,10 @@ 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$
|
|
7456
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7453
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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$10 || (templateObject_2$10 = __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$P || (templateObject_3$P = __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
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$D || (templateObject_4$D = __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;
|
|
7459
7459
|
var theme = useTheme$1();
|
|
@@ -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$1l, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
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,29 +7495,29 @@ 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$1k || (templateObject_1$1k = __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$O || (templateObject_3$O = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7501
|
+
var Container$_ = newStyled.div(templateObject_4$C || (templateObject_4$C = __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$_, __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$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
7509
7509
|
|
|
7510
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7511
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
7512
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7513
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7510
|
+
var SectionContent = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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$_ || (templateObject_2$_ = __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$N || (templateObject_3$N = __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
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __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; });
|
|
7516
7516
|
var OptionContainer = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
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$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$t, templateObject_6$r, templateObject_7$n, 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$1i || (templateObject_1$1i = __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$Z || (templateObject_2$Z = __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$M || (templateObject_3$M = __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$1i, templateObject_2$Z, templateObject_3$M;
|
|
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;
|
|
@@ -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$1h || (templateObject_1$1h = __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$Z = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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$Z, __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$Z, __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$1h, templateObject_2$Y;
|
|
7751
7751
|
|
|
7752
|
-
var Container$
|
|
7753
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7752
|
+
var Container$Y = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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$X || (templateObject_2$X = __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$Y, __assign$1({ theme: theme }, { children: [jsx(Container$Y, { 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$1g, templateObject_2$X;
|
|
7769
7769
|
|
|
7770
|
-
var Button$
|
|
7770
|
+
var Button$8 = 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$8, __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) {
|
|
@@ -12009,14 +12009,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12009
12009
|
return Slider;
|
|
12010
12010
|
}(React__default.Component);
|
|
12011
12011
|
|
|
12012
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12012
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1f || (templateObject_1$1f = __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$1f;
|
|
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$1e || (templateObject_1$1e = __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$1d || (templateObject_1$1d = __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$1e;
|
|
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$1d || (templateObject_1$1d = __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$W || (templateObject_2$W = __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$X = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12107
12107
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12108
12108
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12109
12109
|
}, function (_a) {
|
|
@@ -12114,12 +12114,12 @@ var Container$U = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
12114
12114
|
return hasOverflowArrows &&
|
|
12115
12115
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12116
12116
|
});
|
|
12117
|
-
var Button$
|
|
12117
|
+
var Button$7 = newStyled.button(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
12118
12118
|
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"])));
|
|
12119
12119
|
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"])));
|
|
12120
12120
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
12121
12121
|
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"])));
|
|
12122
|
-
var templateObject_1$
|
|
12122
|
+
var templateObject_1$1d, templateObject_2$W, templateObject_3$L, templateObject_4$A, templateObject_5$s, templateObject_6$q, templateObject_7$m, templateObject_8$e;
|
|
12123
12123
|
|
|
12124
12124
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12125
12125
|
var loading = 'eager';
|
|
@@ -12147,31 +12147,31 @@ var ImagePreviewList = function (_a) {
|
|
|
12147
12147
|
var element = document.querySelector(".imageListContainer");
|
|
12148
12148
|
element.scrollBy(0, 200);
|
|
12149
12149
|
};
|
|
12150
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12150
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$X, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12151
12151
|
arrowWidth: 0.75,
|
|
12152
12152
|
arrowHeight: 1.25,
|
|
12153
12153
|
arrowPadding: 1.625,
|
|
12154
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$
|
|
12155
|
-
return (jsx$1(Button$
|
|
12154
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) {
|
|
12155
|
+
return (jsx$1(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key));
|
|
12156
12156
|
})) }), 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));
|
|
12157
12157
|
};
|
|
12158
12158
|
|
|
12159
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12160
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12161
|
-
var templateObject_1$
|
|
12159
|
+
var ProgressContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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); });
|
|
12160
|
+
var ProgressFiller = newStyled.div(templateObject_2$V || (templateObject_2$V = __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; });
|
|
12161
|
+
var templateObject_1$1c, templateObject_2$V;
|
|
12162
12162
|
|
|
12163
12163
|
var ProgressBar$1 = function (_a) {
|
|
12164
12164
|
var progress = _a.progress, hide = _a.hide;
|
|
12165
12165
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12166
12166
|
};
|
|
12167
12167
|
|
|
12168
|
-
var Container$
|
|
12169
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12170
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12171
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12168
|
+
var Container$W = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12169
|
+
var HTMLVideo = newStyled.video(templateObject_2$U || (templateObject_2$U = __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; });
|
|
12170
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
12171
|
+
var PlayContainer = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
12172
12172
|
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"])));
|
|
12173
12173
|
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"])));
|
|
12174
|
-
var templateObject_1$
|
|
12174
|
+
var templateObject_1$1b, templateObject_2$U, templateObject_3$K, templateObject_4$z, templateObject_5$r, templateObject_6$p;
|
|
12175
12175
|
|
|
12176
12176
|
var Video$1 = function (_a) {
|
|
12177
12177
|
var _b, _c, _d, _e;
|
|
@@ -12221,7 +12221,7 @@ var Video$1 = function (_a) {
|
|
|
12221
12221
|
setVideoProgress(videoRef.current.currentTime);
|
|
12222
12222
|
}
|
|
12223
12223
|
};
|
|
12224
|
-
return (jsxs$1(Container$
|
|
12224
|
+
return (jsxs$1(Container$W, __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: isMuted, "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));
|
|
12225
12225
|
};
|
|
12226
12226
|
|
|
12227
12227
|
var propTypes = {exports: {}};
|
|
@@ -13815,22 +13815,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13815
13815
|
afterZoomOut: PropTypes.func
|
|
13816
13816
|
} : {};
|
|
13817
13817
|
|
|
13818
|
-
var Container$
|
|
13818
|
+
var Container$V = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
13819
13819
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13820
13820
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13821
13821
|
});
|
|
13822
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
13822
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13823
13823
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13824
13824
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13825
13825
|
}, function (_a) {
|
|
13826
13826
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13827
13827
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13828
13828
|
});
|
|
13829
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
13829
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13830
13830
|
var isCTAHidden = _a.isCTAHidden;
|
|
13831
13831
|
return (isCTAHidden ? '60px' : '120px');
|
|
13832
13832
|
});
|
|
13833
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_4$
|
|
13833
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
13834
13834
|
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"])));
|
|
13835
13835
|
var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13836
13836
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13840,14 +13840,14 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$l || (temp
|
|
|
13840
13840
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13841
13841
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13842
13842
|
});
|
|
13843
|
-
var templateObject_1$
|
|
13843
|
+
var templateObject_1$1a, templateObject_2$T, templateObject_3$J, templateObject_4$y, templateObject_5$q, templateObject_6$o, templateObject_7$l;
|
|
13844
13844
|
|
|
13845
13845
|
var ImageProductSlide$1 = function (_a) {
|
|
13846
13846
|
var _b;
|
|
13847
13847
|
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;
|
|
13848
13848
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13849
13849
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13850
|
-
return (jsxs$1(Container$
|
|
13850
|
+
return (jsxs$1(Container$V, __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: {
|
|
13851
13851
|
alt: content.alt,
|
|
13852
13852
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13853
13853
|
loading: 'eager',
|
|
@@ -13855,8 +13855,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13855
13855
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(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));
|
|
13856
13856
|
};
|
|
13857
13857
|
|
|
13858
|
-
var Container$
|
|
13859
|
-
var templateObject_1$
|
|
13858
|
+
var Container$U = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
13859
|
+
var templateObject_1$19;
|
|
13860
13860
|
|
|
13861
13861
|
var getInitialIndex = function (images, selectedValue) {
|
|
13862
13862
|
if (selectedValue) {
|
|
@@ -13882,7 +13882,7 @@ var ProductGallery = function (_a) {
|
|
|
13882
13882
|
setActiveIndex(index);
|
|
13883
13883
|
};
|
|
13884
13884
|
var selectedImage = images[activeIndex];
|
|
13885
|
-
return (jsxs$1(Container$
|
|
13885
|
+
return (jsxs$1(Container$U, { 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));
|
|
13886
13886
|
};
|
|
13887
13887
|
|
|
13888
13888
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13904,7 +13904,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13904
13904
|
};
|
|
13905
13905
|
}
|
|
13906
13906
|
};
|
|
13907
|
-
var Container$
|
|
13907
|
+
var Container$T = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
13908
13908
|
var backgroundColor = _a.backgroundColor;
|
|
13909
13909
|
return backgroundColor;
|
|
13910
13910
|
}, function (_a) {
|
|
@@ -13932,11 +13932,11 @@ var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __
|
|
|
13932
13932
|
var IconButton = function (_a) {
|
|
13933
13933
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13934
13934
|
var theme = useTheme();
|
|
13935
|
-
return (jsx$1(Container$
|
|
13935
|
+
return (jsx$1(Container$T, __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));
|
|
13936
13936
|
};
|
|
13937
|
-
var templateObject_1$
|
|
13937
|
+
var templateObject_1$18;
|
|
13938
13938
|
|
|
13939
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13939
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$17 || (templateObject_1$17 = __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; });
|
|
13940
13940
|
var AmazonButton = function (_a) {
|
|
13941
13941
|
var onClick = _a.onClick;
|
|
13942
13942
|
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));
|
|
@@ -13945,9 +13945,9 @@ var PaypalButton = function (_a) {
|
|
|
13945
13945
|
var onClick = _a.onClick;
|
|
13946
13946
|
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));
|
|
13947
13947
|
};
|
|
13948
|
-
var templateObject_1$
|
|
13948
|
+
var templateObject_1$17;
|
|
13949
13949
|
|
|
13950
|
-
var Container$
|
|
13950
|
+
var Container$S = newStyled.div(function (props) { return ({
|
|
13951
13951
|
height: 'auto',
|
|
13952
13952
|
textAlign: 'center',
|
|
13953
13953
|
justifyContent: 'center',
|
|
@@ -13997,12 +13997,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13997
13997
|
textAlign: 'center',
|
|
13998
13998
|
lineHeight: '18px',
|
|
13999
13999
|
};
|
|
14000
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
14000
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$S, __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));
|
|
14001
14001
|
};
|
|
14002
14002
|
|
|
14003
|
-
var Container$
|
|
14004
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14005
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14003
|
+
var Container$R = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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'); });
|
|
14004
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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'); });
|
|
14005
|
+
var StyledTitle = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14006
14006
|
var titlePosition = _a.titlePosition;
|
|
14007
14007
|
return titlePosition == 'center' &&
|
|
14008
14008
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14010,15 +14010,15 @@ var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __ma
|
|
|
14010
14010
|
var ImageCardWithDescription = function (_a) {
|
|
14011
14011
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14012
14012
|
var isMobile = useWindowDimensions().isMobile;
|
|
14013
|
-
return (jsxs$1(Container$
|
|
14013
|
+
return (jsxs$1(Container$R, __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));
|
|
14014
14014
|
};
|
|
14015
|
-
var templateObject_1$
|
|
14015
|
+
var templateObject_1$16, templateObject_2$S, templateObject_3$I;
|
|
14016
14016
|
|
|
14017
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14017
|
+
var Label$4 = newStyled.span(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
14018
14018
|
var color = _a.color;
|
|
14019
14019
|
return color;
|
|
14020
14020
|
});
|
|
14021
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14021
|
+
var MandatoryIcon = newStyled.span(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14022
14022
|
var color = _a.color;
|
|
14023
14023
|
return color;
|
|
14024
14024
|
});
|
|
@@ -14027,7 +14027,7 @@ var InputLabel = function (_a) {
|
|
|
14027
14027
|
var theme = useTheme();
|
|
14028
14028
|
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));
|
|
14029
14029
|
};
|
|
14030
|
-
var templateObject_1$
|
|
14030
|
+
var templateObject_1$15, templateObject_2$R;
|
|
14031
14031
|
|
|
14032
14032
|
var containerByStatus = function (theme, status) {
|
|
14033
14033
|
if (status === InputValidationType.Valid)
|
|
@@ -14036,12 +14036,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14036
14036
|
return theme.colors.semantic.urgent.color;
|
|
14037
14037
|
return '';
|
|
14038
14038
|
};
|
|
14039
|
-
var Container$
|
|
14039
|
+
var Container$Q = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14040
14040
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14041
14041
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14042
14042
|
});
|
|
14043
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14044
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14043
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
14044
|
+
var StyledInput = newStyled.input(templateObject_3$H || (templateObject_3$H = __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) {
|
|
14045
14045
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14046
14046
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14047
14047
|
}, function (_a) {
|
|
@@ -14096,7 +14096,7 @@ var StyledInput = newStyled.input(templateObject_3$G || (templateObject_3$G = __
|
|
|
14096
14096
|
return hasValue &&
|
|
14097
14097
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14098
14098
|
});
|
|
14099
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14099
|
+
var InputWrapper = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14100
14100
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14101
14101
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14102
14102
|
});
|
|
@@ -14114,7 +14114,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5
|
|
|
14114
14114
|
return theme.component.input.lineHeight;
|
|
14115
14115
|
});
|
|
14116
14116
|
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"])));
|
|
14117
|
-
var templateObject_1$
|
|
14117
|
+
var templateObject_1$14, templateObject_2$Q, templateObject_3$H, templateObject_4$x, templateObject_5$p, templateObject_6$n;
|
|
14118
14118
|
|
|
14119
14119
|
var BaseInput = function (_a) {
|
|
14120
14120
|
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"]);
|
|
@@ -14137,14 +14137,14 @@ var BaseInput = function (_a) {
|
|
|
14137
14137
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14138
14138
|
}, [status]);
|
|
14139
14139
|
var hasValue = Boolean(value);
|
|
14140
|
-
return (jsxs$1(Container$
|
|
14140
|
+
return (jsxs$1(Container$Q, __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) {
|
|
14141
14141
|
onChange(event.target.value, event);
|
|
14142
14142
|
}, 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 () {
|
|
14143
14143
|
onChange('', { target: { value: '' } });
|
|
14144
14144
|
}, "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));
|
|
14145
14145
|
};
|
|
14146
14146
|
|
|
14147
|
-
var Button$
|
|
14147
|
+
var Button$6 = function (_a) {
|
|
14148
14148
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
14149
14149
|
if (variant === 'primary') {
|
|
14150
14150
|
return jsx$1(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -14158,11 +14158,11 @@ var Button$5 = function (_a) {
|
|
|
14158
14158
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14159
14159
|
};
|
|
14160
14160
|
|
|
14161
|
-
var Container$
|
|
14161
|
+
var Container$P = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
14162
14162
|
var theme = _a.theme;
|
|
14163
14163
|
return theme.component.inputCustom.input.borderRadius;
|
|
14164
14164
|
});
|
|
14165
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14165
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$P || (templateObject_2$P = __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) {
|
|
14166
14166
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14167
14167
|
return defaultRounded
|
|
14168
14168
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14177,23 +14177,23 @@ var Custom = function (_a) {
|
|
|
14177
14177
|
text: text,
|
|
14178
14178
|
disabled: rest.disabled,
|
|
14179
14179
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14180
|
-
return (jsx$1(Container$
|
|
14180
|
+
return (jsx$1(Container$P, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14181
14181
|
};
|
|
14182
|
-
var templateObject_1$
|
|
14182
|
+
var templateObject_1$13, templateObject_2$P;
|
|
14183
14183
|
|
|
14184
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14184
|
+
var SuccessContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14185
14185
|
var size = _a.size;
|
|
14186
14186
|
return (size === 'small' ? '36px' : '');
|
|
14187
14187
|
});
|
|
14188
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14189
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14188
|
+
var SuccessMessage = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
14189
|
+
var SuccessText = newStyled.span(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
14190
14190
|
var Success = function (_a) {
|
|
14191
14191
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14192
14192
|
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));
|
|
14193
14193
|
};
|
|
14194
|
-
var templateObject_1$
|
|
14194
|
+
var templateObject_1$12, templateObject_2$O, templateObject_3$G;
|
|
14195
14195
|
|
|
14196
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14196
|
+
var ButtonContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
14197
14197
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14198
14198
|
return status === InputValidationType.Empty &&
|
|
14199
14199
|
type === 'primary' &&
|
|
@@ -14210,16 +14210,16 @@ var BasePlusButton = function (_a) {
|
|
|
14210
14210
|
}
|
|
14211
14211
|
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));
|
|
14212
14212
|
};
|
|
14213
|
-
var templateObject_1$
|
|
14213
|
+
var templateObject_1$11;
|
|
14214
14214
|
|
|
14215
|
-
var Container$
|
|
14216
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14215
|
+
var Container$O = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14216
|
+
var IconContainer$3 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
14217
14217
|
var BasePlusIcon = function (_a) {
|
|
14218
14218
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14219
14219
|
var theme = useTheme();
|
|
14220
|
-
return (jsx$1(Container$
|
|
14220
|
+
return (jsx$1(Container$O, { 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));
|
|
14221
14221
|
};
|
|
14222
|
-
var templateObject_1
|
|
14222
|
+
var templateObject_1$10, templateObject_2$N;
|
|
14223
14223
|
|
|
14224
14224
|
var Input$3 = {
|
|
14225
14225
|
Simple: BaseInput,
|
|
@@ -14359,14 +14359,14 @@ var Portal = function (_a) {
|
|
|
14359
14359
|
var visibleStyle = function (_a) {
|
|
14360
14360
|
var opened = _a.opened;
|
|
14361
14361
|
return opened
|
|
14362
|
-
? css(templateObject_1
|
|
14362
|
+
? css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14363
14363
|
};
|
|
14364
14364
|
var transformStyle = function (_a) {
|
|
14365
14365
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14366
14366
|
return opened
|
|
14367
|
-
? css(templateObject_3$
|
|
14367
|
+
? css(templateObject_3$F || (templateObject_3$F = __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$w || (templateObject_4$w = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14368
14368
|
};
|
|
14369
|
-
var Container$
|
|
14369
|
+
var Container$N = newStyled.div(templateObject_6$m || (templateObject_6$m = __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) {
|
|
14370
14370
|
var width = _a.width;
|
|
14371
14371
|
return width
|
|
14372
14372
|
? css(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14383,7 +14383,7 @@ var Modal = function (_a) {
|
|
|
14383
14383
|
}
|
|
14384
14384
|
close();
|
|
14385
14385
|
};
|
|
14386
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14386
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$N, __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 () {
|
|
14387
14387
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14388
14388
|
onDismiss();
|
|
14389
14389
|
} }, void 0)] }), void 0));
|
|
@@ -14414,7 +14414,7 @@ var useModal = function (id) {
|
|
|
14414
14414
|
close: close,
|
|
14415
14415
|
}); }, [close, open, opened]);
|
|
14416
14416
|
};
|
|
14417
|
-
var templateObject_1
|
|
14417
|
+
var templateObject_1$$, templateObject_2$M, templateObject_3$F, templateObject_4$w, templateObject_5$o, templateObject_6$m, templateObject_7$k;
|
|
14418
14418
|
|
|
14419
14419
|
var htmlReactParser = {exports: {}};
|
|
14420
14420
|
|
|
@@ -18195,7 +18195,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18195
18195
|
HTMLReactParser$1.attributesToProps;
|
|
18196
18196
|
HTMLReactParser$1.Element;
|
|
18197
18197
|
|
|
18198
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18198
|
+
var Bar$1 = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18199
18199
|
var height = _a.height;
|
|
18200
18200
|
return height || '0.5rem';
|
|
18201
18201
|
}, function (_a) {
|
|
@@ -18234,7 +18234,7 @@ var BarContainer = newStyled.div({
|
|
|
18234
18234
|
padding: '0 16px',
|
|
18235
18235
|
position: 'relative',
|
|
18236
18236
|
});
|
|
18237
|
-
var Container$
|
|
18237
|
+
var Container$M = newStyled.div(function (_a) {
|
|
18238
18238
|
var backgroundColor = _a.backgroundColor;
|
|
18239
18239
|
return ({
|
|
18240
18240
|
width: '475px',
|
|
@@ -18247,7 +18247,7 @@ var Container$J = newStyled.div(function (_a) {
|
|
|
18247
18247
|
background: backgroundColor,
|
|
18248
18248
|
});
|
|
18249
18249
|
});
|
|
18250
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18250
|
+
var MessageContainer = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18251
18251
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18252
18252
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18253
18253
|
};
|
|
@@ -18276,33 +18276,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18276
18276
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18277
18277
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18278
18278
|
};
|
|
18279
|
-
return (jsxs$1(Container$
|
|
18279
|
+
return (jsxs$1(Container$M, __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));
|
|
18280
18280
|
};
|
|
18281
|
-
var templateObject_1$
|
|
18281
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18282
18282
|
|
|
18283
|
-
var Container$
|
|
18283
|
+
var Container$L = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
18284
18284
|
var theme = _a.theme;
|
|
18285
18285
|
return theme.component.orderBar.backgroundColor;
|
|
18286
18286
|
});
|
|
18287
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18287
|
+
var H1 = newStyled.h1(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18288
18288
|
var OrderBar = function (_a) {
|
|
18289
18289
|
var message = _a.message, color = _a.color;
|
|
18290
18290
|
var theme = useTheme();
|
|
18291
|
-
return (jsxs$1(Container$
|
|
18291
|
+
return (jsxs$1(Container$L, __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));
|
|
18292
18292
|
};
|
|
18293
|
-
var templateObject_1$
|
|
18293
|
+
var templateObject_1$Z, templateObject_2$K;
|
|
18294
18294
|
|
|
18295
|
-
var Container$
|
|
18296
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18297
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18298
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18295
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
18296
|
+
var Card$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
18297
|
+
var Tag$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
18298
|
+
var Label$3 = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
18299
18299
|
var Check = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
18300
18300
|
var IconContainer$2 = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18301
18301
|
var IconPlaceholder = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18302
18302
|
var DiscountContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __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"])));
|
|
18303
18303
|
var PackSelector = function (_a) {
|
|
18304
18304
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18305
|
-
return (jsx$1(Container$
|
|
18305
|
+
return (jsx$1(Container$K, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18306
18306
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18307
18307
|
}) }), void 0));
|
|
18308
18308
|
};
|
|
@@ -18329,14 +18329,14 @@ var PackCard = function (_a) {
|
|
|
18329
18329
|
currency: currencyCode || 'USD',
|
|
18330
18330
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18331
18331
|
};
|
|
18332
|
-
var templateObject_1$
|
|
18332
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$E, templateObject_4$v, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d;
|
|
18333
18333
|
|
|
18334
|
-
var Container$
|
|
18335
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18336
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18334
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
18335
|
+
var IconContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
18336
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18337
18337
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18338
18338
|
}));
|
|
18339
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18339
|
+
var PageNumber = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18340
18340
|
var bold = _a.bold;
|
|
18341
18341
|
return (bold ? '700' : '500');
|
|
18342
18342
|
}, function (_a) {
|
|
@@ -18353,7 +18353,7 @@ var PageNumber = newStyled.span(templateObject_4$t || (templateObject_4$t = __ma
|
|
|
18353
18353
|
var background = _a.background;
|
|
18354
18354
|
return background || 'unset';
|
|
18355
18355
|
});
|
|
18356
|
-
var templateObject_1$
|
|
18356
|
+
var templateObject_1$X, templateObject_2$I, templateObject_3$D, templateObject_4$u;
|
|
18357
18357
|
|
|
18358
18358
|
var Pagination = function (_a) {
|
|
18359
18359
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18399,7 +18399,7 @@ var Pagination = function (_a) {
|
|
|
18399
18399
|
}
|
|
18400
18400
|
return pages;
|
|
18401
18401
|
}, [from, page, showReducedPages, to]);
|
|
18402
|
-
return (jsxs$1(Container$
|
|
18402
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18403
18403
|
};
|
|
18404
18404
|
|
|
18405
18405
|
var PaginatorBlog = function (_a) {
|
|
@@ -18413,12 +18413,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18413
18413
|
setPage(page);
|
|
18414
18414
|
onChange(page);
|
|
18415
18415
|
};
|
|
18416
|
-
return (jsxs$1(Container$
|
|
18416
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18417
18417
|
? theme.colors.shades['white'].color
|
|
18418
18418
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18419
18419
|
};
|
|
18420
18420
|
|
|
18421
|
-
var Container$
|
|
18421
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
18422
18422
|
var width = _a.width;
|
|
18423
18423
|
return width;
|
|
18424
18424
|
}, function (_a) {
|
|
@@ -18434,14 +18434,14 @@ var Container$F = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
18434
18434
|
var PaymentMethod = function (_a) {
|
|
18435
18435
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18436
18436
|
var theme = useTheme();
|
|
18437
|
-
return (jsx$1(Container$
|
|
18437
|
+
return (jsx$1(Container$I, __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));
|
|
18438
18438
|
};
|
|
18439
|
-
var templateObject_1$
|
|
18439
|
+
var templateObject_1$W;
|
|
18440
18440
|
|
|
18441
|
-
var Container$
|
|
18441
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
18442
18442
|
var IMAGE_WIDTH = '63px';
|
|
18443
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18444
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18443
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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);
|
|
18444
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$C || (templateObject_3$C = __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({
|
|
18445
18445
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18446
18446
|
}), IMAGE_WIDTH);
|
|
18447
18447
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18464,7 +18464,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18464
18464
|
margin: margin,
|
|
18465
18465
|
});
|
|
18466
18466
|
});
|
|
18467
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18467
|
+
var PriceContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18468
18468
|
var withTag = _a.withTag; _a.theme;
|
|
18469
18469
|
return withTag
|
|
18470
18470
|
? mediaQueries({
|
|
@@ -18483,9 +18483,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18483
18483
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18484
18484
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
18485
18485
|
var theme = useTheme();
|
|
18486
|
-
return (jsxs$1(Container$
|
|
18486
|
+
return (jsxs$1(Container$H, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18487
18487
|
};
|
|
18488
|
-
var templateObject_1$
|
|
18488
|
+
var templateObject_1$V, templateObject_2$H, templateObject_3$C, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$i;
|
|
18489
18489
|
|
|
18490
18490
|
var P$1 = newStyled.p(function (_a) {
|
|
18491
18491
|
var color = _a.color;
|
|
@@ -18499,7 +18499,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18499
18499
|
margin: '0.938rem 4.188rem',
|
|
18500
18500
|
});
|
|
18501
18501
|
});
|
|
18502
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18502
|
+
var Bar = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18503
18503
|
var height = _a.height;
|
|
18504
18504
|
return height || '0.5rem';
|
|
18505
18505
|
}, function (_a) {
|
|
@@ -18528,7 +18528,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18528
18528
|
position: 'absolute',
|
|
18529
18529
|
});
|
|
18530
18530
|
});
|
|
18531
|
-
var Container$
|
|
18531
|
+
var Container$G = newStyled.div(function (_a) {
|
|
18532
18532
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18533
18533
|
return ({
|
|
18534
18534
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18542,14 +18542,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18542
18542
|
var ProgressBar = function (_a) {
|
|
18543
18543
|
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;
|
|
18544
18544
|
var theme = useTheme();
|
|
18545
|
-
return (jsxs$1(Container$
|
|
18545
|
+
return (jsxs$1(Container$G, __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));
|
|
18546
18546
|
};
|
|
18547
|
-
var templateObject_1$
|
|
18547
|
+
var templateObject_1$U;
|
|
18548
18548
|
|
|
18549
|
-
var Container$
|
|
18550
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18551
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18552
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18549
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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; });
|
|
18550
|
+
var Item$1 = newStyled.span(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
18551
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
18552
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$s || (templateObject_4$s = __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)'; });
|
|
18553
18553
|
var QuantityPicker = function (_a) {
|
|
18554
18554
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18555
18555
|
var theme = useTheme();
|
|
@@ -18572,9 +18572,9 @@ var QuantityPicker = function (_a) {
|
|
|
18572
18572
|
return clamp(value);
|
|
18573
18573
|
});
|
|
18574
18574
|
}, [value, clamp]);
|
|
18575
|
-
return (jsxs$1(Container$
|
|
18575
|
+
return (jsxs$1(Container$F, __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));
|
|
18576
18576
|
};
|
|
18577
|
-
var templateObject_1$
|
|
18577
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$B, templateObject_4$s;
|
|
18578
18578
|
|
|
18579
18579
|
/* base styles & size variants */
|
|
18580
18580
|
var CustomRadioStyles$1 = {
|
|
@@ -18643,9 +18643,9 @@ var ContainerStyles$1 = {
|
|
|
18643
18643
|
},
|
|
18644
18644
|
};
|
|
18645
18645
|
|
|
18646
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18647
|
-
var Container$
|
|
18648
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18646
|
+
var Wrapper$3 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18647
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18648
|
+
var Input$2 = newStyled.input(templateObject_2$F || (templateObject_2$F = __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) {
|
|
18649
18649
|
var disabled = _a.disabled;
|
|
18650
18650
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18651
18651
|
});
|
|
@@ -18653,7 +18653,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18653
18653
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18654
18654
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18655
18655
|
]; });
|
|
18656
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
18656
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
18657
18657
|
var RadioPrimary = function (_a) {
|
|
18658
18658
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
18659
18659
|
var theme = useTheme();
|
|
@@ -18661,9 +18661,9 @@ var RadioPrimary = function (_a) {
|
|
|
18661
18661
|
var value = event.currentTarget.value;
|
|
18662
18662
|
onChange({ value: value, label: label });
|
|
18663
18663
|
};
|
|
18664
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18664
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$E, __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));
|
|
18665
18665
|
};
|
|
18666
|
-
var templateObject_1$
|
|
18666
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$A;
|
|
18667
18667
|
|
|
18668
18668
|
var RadioGroupInput = function (_a) {
|
|
18669
18669
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18742,9 +18742,9 @@ var ContainerStyles = {
|
|
|
18742
18742
|
},
|
|
18743
18743
|
};
|
|
18744
18744
|
|
|
18745
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18746
|
-
var Container$
|
|
18747
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18745
|
+
var Wrapper$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
18746
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18747
|
+
var Input$1 = newStyled.input(templateObject_2$E || (templateObject_2$E = __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) {
|
|
18748
18748
|
var disabled = _a.disabled;
|
|
18749
18749
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18750
18750
|
});
|
|
@@ -18752,7 +18752,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18752
18752
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18753
18753
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18754
18754
|
]; });
|
|
18755
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
18755
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
18756
18756
|
var theme = _a.theme;
|
|
18757
18757
|
return theme.component.radio.textSize;
|
|
18758
18758
|
}, function (_a) {
|
|
@@ -18766,9 +18766,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18766
18766
|
var value = event.currentTarget.value;
|
|
18767
18767
|
onChange({ value: value, label: label });
|
|
18768
18768
|
};
|
|
18769
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
18769
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$D, __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));
|
|
18770
18770
|
};
|
|
18771
|
-
var templateObject_1$
|
|
18771
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$z;
|
|
18772
18772
|
|
|
18773
18773
|
var ClubRadioGroupInput = function (_a) {
|
|
18774
18774
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18796,10 +18796,10 @@ function formatDate(date, format) {
|
|
|
18796
18796
|
}
|
|
18797
18797
|
}
|
|
18798
18798
|
|
|
18799
|
-
var Container$
|
|
18800
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18801
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18802
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18799
|
+
var Container$C = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
18800
|
+
var Content$1 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
18801
|
+
var StarsContent = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18802
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
18803
18803
|
var DateText$1 = newStyled.span(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
18804
18804
|
var ReviewerName$1 = newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
18805
18805
|
var VerifiedText = newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
@@ -18834,17 +18834,17 @@ var Review$1 = function (_a) {
|
|
|
18834
18834
|
}
|
|
18835
18835
|
}
|
|
18836
18836
|
}, [opened]);
|
|
18837
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18837
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$C, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
18838
18838
|
(!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));
|
|
18839
18839
|
};
|
|
18840
|
-
var templateObject_1$
|
|
18840
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$y, templateObject_4$r, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18841
18841
|
|
|
18842
18842
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18843
18843
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18844
|
-
var Container$
|
|
18845
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18846
|
-
var Content = newStyled.div(templateObject_3$
|
|
18847
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18844
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
18845
|
+
var Heading = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
18846
|
+
var Content = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18847
|
+
var ReviewContainer = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18848
18848
|
var DateText = newStyled.span(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18849
18849
|
var VariantText = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18850
18850
|
var ReviewerName = newStyled.h2(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
@@ -18883,7 +18883,7 @@ var Review = function (_a) {
|
|
|
18883
18883
|
});
|
|
18884
18884
|
};
|
|
18885
18885
|
}, [randomId]);
|
|
18886
|
-
return (jsxs$1(Container$
|
|
18886
|
+
return (jsxs$1(Container$B, { 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: {
|
|
18887
18887
|
__html: showMoreMobile
|
|
18888
18888
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18889
18889
|
: description,
|
|
@@ -18893,12 +18893,12 @@ var Review = function (_a) {
|
|
|
18893
18893
|
: description,
|
|
18894
18894
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18895
18895
|
};
|
|
18896
|
-
var templateObject_1$
|
|
18896
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$x, templateObject_4$q, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$b, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18897
18897
|
|
|
18898
|
-
var Container$
|
|
18899
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18900
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18901
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18898
|
+
var Container$A = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
18899
|
+
var ReviewsContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
18900
|
+
var ReviewsCount = newStyled.div(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
18901
|
+
var ReviewsStars = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
18902
18902
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
18903
18903
|
var ReviewsImages = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
18904
18904
|
var SummaryItem = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
@@ -18909,19 +18909,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18909
18909
|
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;
|
|
18910
18910
|
var starsNumber = 5;
|
|
18911
18911
|
var theme = useTheme();
|
|
18912
|
-
return (jsxs$1(Container$
|
|
18912
|
+
return (jsxs$1(Container$A, { 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));
|
|
18913
18913
|
};
|
|
18914
|
-
var templateObject_1$
|
|
18914
|
+
var templateObject_1$O, templateObject_2$B, templateObject_3$w, templateObject_4$p, templateObject_5$j, templateObject_6$h, templateObject_7$f;
|
|
18915
18915
|
|
|
18916
|
-
var Container$
|
|
18917
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
18916
|
+
var Container$z = newStyled.div(templateObject_1$N || (templateObject_1$N = __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"])));
|
|
18917
|
+
var Text$1 = newStyled.p(templateObject_2$A || (templateObject_2$A = __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; });
|
|
18918
18918
|
var ScrollToTop = function (_a) {
|
|
18919
18919
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18920
18920
|
var theme = useTheme();
|
|
18921
18921
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18922
|
-
return (jsxs$1(Container$
|
|
18922
|
+
return (jsxs$1(Container$z, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __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));
|
|
18923
18923
|
};
|
|
18924
|
-
var templateObject_1$
|
|
18924
|
+
var templateObject_1$N, templateObject_2$A;
|
|
18925
18925
|
|
|
18926
18926
|
var Input = newStyled.input(function (props) { return ({
|
|
18927
18927
|
padding: props.theme.component.input.padding,
|
|
@@ -18952,7 +18952,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18952
18952
|
},
|
|
18953
18953
|
}); });
|
|
18954
18954
|
|
|
18955
|
-
var Container$
|
|
18955
|
+
var Container$y = newStyled.div(templateObject_1$M || (templateObject_1$M = __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({
|
|
18956
18956
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18957
18957
|
}));
|
|
18958
18958
|
var Description = newStyled.div({
|
|
@@ -18969,25 +18969,25 @@ var Description = newStyled.div({
|
|
|
18969
18969
|
var ProductItem = function (_a) {
|
|
18970
18970
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18971
18971
|
var theme = useTheme();
|
|
18972
|
-
return (jsxs$1(Container$
|
|
18972
|
+
return (jsxs$1(Container$y, __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));
|
|
18973
18973
|
};
|
|
18974
|
-
var templateObject_1$
|
|
18974
|
+
var templateObject_1$M;
|
|
18975
18975
|
|
|
18976
|
-
var Container$
|
|
18976
|
+
var Container$x = newStyled.div({
|
|
18977
18977
|
display: 'flex',
|
|
18978
18978
|
justifyContent: 'center',
|
|
18979
18979
|
padding: '1rem',
|
|
18980
18980
|
});
|
|
18981
18981
|
var Footer = function (_a) {
|
|
18982
18982
|
var text = _a.text, onClick = _a.onClick;
|
|
18983
|
-
return (jsx$1(Container$
|
|
18983
|
+
return (jsx$1(Container$x, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18984
18984
|
};
|
|
18985
18985
|
|
|
18986
18986
|
var Ul = newStyled.ul({
|
|
18987
18987
|
margin: '0px',
|
|
18988
18988
|
padding: '0px',
|
|
18989
18989
|
});
|
|
18990
|
-
var Li = newStyled.li(templateObject_1$
|
|
18990
|
+
var Li = newStyled.li(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
18991
18991
|
padding: [0, '0rem 1rem'],
|
|
18992
18992
|
borderRadius: [0, '0.5rem'],
|
|
18993
18993
|
}));
|
|
@@ -18999,31 +18999,31 @@ var Anchor = newStyled.a({
|
|
|
18999
18999
|
padding: 0,
|
|
19000
19000
|
textDecoration: 'none',
|
|
19001
19001
|
});
|
|
19002
|
-
var Container$
|
|
19002
|
+
var Container$w = newStyled.div(templateObject_2$z || (templateObject_2$z = __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({
|
|
19003
19003
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19004
19004
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19005
19005
|
borderRadius: ['0', '0.5rem'],
|
|
19006
19006
|
}));
|
|
19007
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19007
|
+
var Header$2 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19008
19008
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19009
19009
|
}));
|
|
19010
19010
|
var ResultsPanel = function (_a) {
|
|
19011
19011
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19012
19012
|
var theme = useTheme();
|
|
19013
|
-
return (jsxs$1(Container$
|
|
19013
|
+
return (jsxs$1(Container$w, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$2, __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));
|
|
19014
19014
|
};
|
|
19015
|
-
var templateObject_1$
|
|
19015
|
+
var templateObject_1$L, templateObject_2$z, templateObject_3$v;
|
|
19016
19016
|
|
|
19017
|
-
var Button$
|
|
19017
|
+
var Button$5 = newStyled.button(templateObject_1$K || (templateObject_1$K = __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({
|
|
19018
19018
|
right: ['1rem', '7.75rem'],
|
|
19019
19019
|
top: ['0.75rem', '0.75rem'],
|
|
19020
19020
|
}));
|
|
19021
19021
|
var ClearButton = function (_a) {
|
|
19022
19022
|
var onClick = _a.onClick;
|
|
19023
19023
|
var theme = useTheme();
|
|
19024
|
-
return (jsx$1(Button$
|
|
19024
|
+
return (jsx$1(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19025
19025
|
};
|
|
19026
|
-
var templateObject_1$
|
|
19026
|
+
var templateObject_1$K;
|
|
19027
19027
|
|
|
19028
19028
|
var SearchIconContainer = newStyled.div({
|
|
19029
19029
|
display: 'flex',
|
|
@@ -19033,7 +19033,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19033
19033
|
background: 'white',
|
|
19034
19034
|
alignSelf: 'center',
|
|
19035
19035
|
});
|
|
19036
|
-
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19036
|
+
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19037
19037
|
var SearchControl = function (_a) {
|
|
19038
19038
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19039
19039
|
var theme = useTheme();
|
|
@@ -19049,7 +19049,7 @@ var SearchControl = function (_a) {
|
|
|
19049
19049
|
}
|
|
19050
19050
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19051
19051
|
};
|
|
19052
|
-
var templateObject_1$
|
|
19052
|
+
var templateObject_1$J;
|
|
19053
19053
|
|
|
19054
19054
|
var initialState$1 = { selectedOption: undefined, open: false, term: '' };
|
|
19055
19055
|
var reducer = function (state, action) {
|
|
@@ -19065,7 +19065,7 @@ var reducer = function (state, action) {
|
|
|
19065
19065
|
}
|
|
19066
19066
|
}
|
|
19067
19067
|
};
|
|
19068
|
-
var Container$
|
|
19068
|
+
var Container$v = newStyled.div({
|
|
19069
19069
|
position: 'relative',
|
|
19070
19070
|
display: 'flex',
|
|
19071
19071
|
});
|
|
@@ -19105,7 +19105,7 @@ var SearchBar = function (_a) {
|
|
|
19105
19105
|
if (e.cancelable) {
|
|
19106
19106
|
e.preventDefault();
|
|
19107
19107
|
}
|
|
19108
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19108
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$v, __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) {
|
|
19109
19109
|
if (e.key === 'Enter') {
|
|
19110
19110
|
if (e.cancelable) {
|
|
19111
19111
|
e.preventDefault();
|
|
@@ -19116,20 +19116,20 @@ var SearchBar = function (_a) {
|
|
|
19116
19116
|
} }, 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));
|
|
19117
19117
|
};
|
|
19118
19118
|
|
|
19119
|
-
var Container$
|
|
19120
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19121
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19122
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19119
|
+
var Container$u = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19120
|
+
var BackArrow = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19121
|
+
var BoldSpan = newStyled.span(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
19122
|
+
var NormalSpan = newStyled.span(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
19123
19123
|
var SearchNavigationParents = newStyled.div(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
19124
19124
|
var SearchNavigation = function (_a) {
|
|
19125
19125
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19126
|
-
return (jsxs$1(Container$
|
|
19126
|
+
return (jsxs$1(Container$u, { 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) {
|
|
19127
19127
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19128
19128
|
}) }, void 0)] }, void 0));
|
|
19129
19129
|
};
|
|
19130
|
-
var templateObject_1$
|
|
19130
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$u, templateObject_4$o, templateObject_5$i;
|
|
19131
19131
|
|
|
19132
|
-
var Container$
|
|
19132
|
+
var Container$t = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
19133
19133
|
var alignCenter = _a.alignCenter;
|
|
19134
19134
|
return alignCenter &&
|
|
19135
19135
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19139,26 +19139,26 @@ var Container$q = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
19139
19139
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19140
19140
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19141
19141
|
});
|
|
19142
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19143
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19142
|
+
var TitleText = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19143
|
+
var BannerText = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19144
19144
|
var ShortBanner = function (_a) {
|
|
19145
19145
|
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;
|
|
19146
19146
|
var theme = useTheme();
|
|
19147
|
-
return (jsxs$1(Container$
|
|
19147
|
+
return (jsxs$1(Container$t, __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));
|
|
19148
19148
|
};
|
|
19149
|
-
var templateObject_1$
|
|
19149
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$t;
|
|
19150
19150
|
|
|
19151
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19152
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19153
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19154
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19151
|
+
var TableElement$3 = newStyled.table(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19152
|
+
var TableCell$3 = newStyled.td(templateObject_2$w || (templateObject_2$w = __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; });
|
|
19153
|
+
var TableHead$3 = newStyled.th(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\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 text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\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 text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19154
|
+
var Label$2 = newStyled('div')(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
19155
19155
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19156
19156
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19157
|
-
var Container$
|
|
19157
|
+
var Container$s = newStyled('div')(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
19158
19158
|
var LabelText$1 = newStyled('span')(templateObject_8$a || (templateObject_8$a = __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"])));
|
|
19159
19159
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
19160
19160
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __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; });
|
|
19161
|
-
var templateObject_1$
|
|
19161
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$s, templateObject_4$n, templateObject_5$h, templateObject_6$g, templateObject_7$e, templateObject_8$a, templateObject_9$7, templateObject_10$6;
|
|
19162
19162
|
|
|
19163
19163
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19164
19164
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19194,21 +19194,21 @@ var SizeChartTable = function (_a) {
|
|
|
19194
19194
|
var theme = useTheme();
|
|
19195
19195
|
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];
|
|
19196
19196
|
var isMultilabel = xLabel && yLabel;
|
|
19197
|
-
return (jsxs$1(Container$
|
|
19197
|
+
return (jsxs$1(Container$s, { 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$2, { 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$3, __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$3, __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$3, __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$3, __assign$1({ style: {
|
|
19198
19198
|
backgroundColor: getCellColor$2(index, cell),
|
|
19199
19199
|
}, 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$3, __assign$1({ className: getIsOdd$2(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$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19200
19200
|
};
|
|
19201
19201
|
|
|
19202
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19203
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19204
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19205
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19202
|
+
var TableElement$2 = newStyled.table(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\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 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; });
|
|
19203
|
+
var TableCell$2 = newStyled.td(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19204
|
+
var TableHead$2 = newStyled.th(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19205
|
+
var TableRow$2 = newStyled.tr(templateObject_4$m || (templateObject_4$m = __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; });
|
|
19206
19206
|
var SizeTable = function (_a) {
|
|
19207
19207
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19208
19208
|
var theme = useTheme();
|
|
19209
19209
|
return (jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: 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));
|
|
19210
19210
|
};
|
|
19211
|
-
var templateObject_1$
|
|
19211
|
+
var templateObject_1$F, templateObject_2$v, templateObject_3$r, templateObject_4$m;
|
|
19212
19212
|
|
|
19213
19213
|
var getStylesBySize$7 = function (size) {
|
|
19214
19214
|
switch (size) {
|
|
@@ -19235,7 +19235,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19235
19235
|
} });
|
|
19236
19236
|
};
|
|
19237
19237
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19238
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19238
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19239
19239
|
};
|
|
19240
19240
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19241
19241
|
if (disabled)
|
|
@@ -19251,23 +19251,23 @@ var TextButton = function (_a) {
|
|
|
19251
19251
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19252
19252
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19253
19253
|
};
|
|
19254
|
-
var templateObject_1$
|
|
19254
|
+
var templateObject_1$E;
|
|
19255
19255
|
|
|
19256
|
-
var Container$
|
|
19257
|
-
var P = newStyled.p(templateObject_2$
|
|
19258
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19256
|
+
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
19257
|
+
var P = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19258
|
+
var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
19259
19259
|
var SizeFitGuide = function (_a) {
|
|
19260
19260
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19261
|
-
return (jsxs$1(Container$
|
|
19261
|
+
return (jsxs$1(Container$r, { 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));
|
|
19262
19262
|
};
|
|
19263
|
-
var templateObject_1$
|
|
19263
|
+
var templateObject_1$D, templateObject_2$u, templateObject_3$q;
|
|
19264
19264
|
|
|
19265
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19265
|
+
var ButtonsContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19266
19266
|
var inline = _a.inline;
|
|
19267
19267
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19268
19268
|
});
|
|
19269
|
-
var Row = newStyled.div(templateObject_2$
|
|
19270
|
-
var templateObject_1$
|
|
19269
|
+
var Row = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19270
|
+
var templateObject_1$C, templateObject_2$t;
|
|
19271
19271
|
|
|
19272
19272
|
var SizeSelector = function (_a) {
|
|
19273
19273
|
var _b;
|
|
@@ -19289,7 +19289,7 @@ var SizeSelector = function (_a) {
|
|
|
19289
19289
|
}) }), void 0)] }), void 0));
|
|
19290
19290
|
};
|
|
19291
19291
|
|
|
19292
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19292
|
+
var TabContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19293
19293
|
var titleSize = _a.titleSize;
|
|
19294
19294
|
return titleSize;
|
|
19295
19295
|
}, function (_a) {
|
|
@@ -19306,18 +19306,18 @@ var Tab = function (_a) {
|
|
|
19306
19306
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19307
19307
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19308
19308
|
};
|
|
19309
|
-
var templateObject_1$
|
|
19309
|
+
var templateObject_1$B;
|
|
19310
19310
|
|
|
19311
|
-
var Container$
|
|
19312
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19311
|
+
var Container$q = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19312
|
+
var TabList = newStyled.div(templateObject_2$s || (templateObject_2$s = __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) {
|
|
19313
19313
|
var backgroundColor = _a.backgroundColor;
|
|
19314
19314
|
return backgroundColor;
|
|
19315
19315
|
}, function (_a) {
|
|
19316
19316
|
var borderColor = _a.borderColor;
|
|
19317
19317
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19318
19318
|
});
|
|
19319
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19320
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19319
|
+
var TabContent = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19320
|
+
var TabSeparator = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19321
19321
|
var Tabs = function (_a) {
|
|
19322
19322
|
var _b;
|
|
19323
19323
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19326,16 +19326,16 @@ var Tabs = function (_a) {
|
|
|
19326
19326
|
return null;
|
|
19327
19327
|
}
|
|
19328
19328
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19329
|
-
return (jsxs$1(Container$
|
|
19329
|
+
return (jsxs$1(Container$q, __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));
|
|
19330
19330
|
};
|
|
19331
|
-
var templateObject_1$
|
|
19331
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$p, templateObject_4$l;
|
|
19332
19332
|
|
|
19333
|
-
var Container$
|
|
19333
|
+
var Container$p = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19334
19334
|
var Tag = function (_a) {
|
|
19335
19335
|
var text = _a.text, className = _a.className;
|
|
19336
|
-
return jsx$1(Container$
|
|
19336
|
+
return jsx$1(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
19337
19337
|
};
|
|
19338
|
-
var templateObject_1$
|
|
19338
|
+
var templateObject_1$z;
|
|
19339
19339
|
|
|
19340
19340
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19341
19341
|
switch (size) {
|
|
@@ -19446,9 +19446,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19446
19446
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19447
19447
|
};
|
|
19448
19448
|
|
|
19449
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19450
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19451
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19449
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19450
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19451
|
+
var FullscreenVideo = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19452
19452
|
var ImageVideo = function (_a) {
|
|
19453
19453
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19454
19454
|
var video = useRef(null);
|
|
@@ -19468,12 +19468,12 @@ var ImageVideo = function (_a) {
|
|
|
19468
19468
|
height: '100%',
|
|
19469
19469
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19470
19470
|
};
|
|
19471
|
-
var templateObject_1$
|
|
19471
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$o;
|
|
19472
19472
|
|
|
19473
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19474
|
-
var ContainerMobile = css(templateObject_2$
|
|
19475
|
-
var Container$
|
|
19476
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19473
|
+
var ContainerDesktop = css(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19474
|
+
var ContainerMobile = css(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
19475
|
+
var Container$o = newStyled.div(templateObject_3$n || (templateObject_3$n = __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);
|
|
19476
|
+
var TextContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19477
19477
|
var TextWithImage = function (_a) {
|
|
19478
19478
|
var _b, _c, _d, _e;
|
|
19479
19479
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19493,7 +19493,7 @@ var TextWithImage = function (_a) {
|
|
|
19493
19493
|
// @ts-ignore
|
|
19494
19494
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19495
19495
|
};
|
|
19496
|
-
return (jsxs(Container$
|
|
19496
|
+
return (jsxs(Container$o, __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: {
|
|
19497
19497
|
backgroundColor: props.btnBGColor,
|
|
19498
19498
|
color: '#ffffff',
|
|
19499
19499
|
border: props.btnBGColor,
|
|
@@ -19503,25 +19503,25 @@ var TextWithImage = function (_a) {
|
|
|
19503
19503
|
},
|
|
19504
19504
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19505
19505
|
};
|
|
19506
|
-
var templateObject_1$
|
|
19506
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$n, templateObject_4$k;
|
|
19507
19507
|
|
|
19508
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19508
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19509
19509
|
var timerColor = _a.timerColor;
|
|
19510
19510
|
return timerColor || '';
|
|
19511
19511
|
});
|
|
19512
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19512
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
19513
19513
|
var timerColor = _a.timerColor;
|
|
19514
19514
|
return timerColor || '';
|
|
19515
19515
|
});
|
|
19516
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19516
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
19517
19517
|
var theme = _a.theme;
|
|
19518
19518
|
return theme.colors.shades.white.color;
|
|
19519
19519
|
}, function (_a) {
|
|
19520
19520
|
var theme = _a.theme;
|
|
19521
19521
|
return theme.colors.shades.white.color;
|
|
19522
19522
|
});
|
|
19523
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19524
|
-
var templateObject_1$
|
|
19523
|
+
var Unit = newStyled.p(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
19524
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$m, templateObject_4$j;
|
|
19525
19525
|
|
|
19526
19526
|
var HRS = 'HRS';
|
|
19527
19527
|
var MIN = 'MIN';
|
|
@@ -19564,14 +19564,14 @@ var Timer = function (_a) {
|
|
|
19564
19564
|
|
|
19565
19565
|
var slideInAnimation = function (distanceFromTop) {
|
|
19566
19566
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
19567
|
-
return keyframes(templateObject_1$
|
|
19567
|
+
return keyframes(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19568
19568
|
};
|
|
19569
19569
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19570
19570
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
19571
|
-
return keyframes(templateObject_2$
|
|
19571
|
+
return keyframes(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19572
19572
|
};
|
|
19573
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
19574
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
19573
|
+
var ToastContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
19574
|
+
var ToastContent = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
19575
19575
|
var distanceFromTop = _a.distanceFromTop;
|
|
19576
19576
|
return distanceFromTop || '124px';
|
|
19577
19577
|
}, function (_a) {
|
|
@@ -19589,7 +19589,7 @@ var ToastText = newStyled.p(templateObject_5$g || (templateObject_5$g = __makeTe
|
|
|
19589
19589
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
19590
19590
|
});
|
|
19591
19591
|
var CloseIcon = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
19592
|
-
var templateObject_1$
|
|
19592
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$l, templateObject_4$i, templateObject_5$g, templateObject_6$f;
|
|
19593
19593
|
|
|
19594
19594
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
19595
19595
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -19609,9 +19609,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
19609
19609
|
});
|
|
19610
19610
|
Toast.displayName = 'Toast';
|
|
19611
19611
|
|
|
19612
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19613
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19614
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19612
|
+
var Wrapper$1 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19613
|
+
var GrandTotal = newStyled.h1(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19614
|
+
var Currency = newStyled.span(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19615
19615
|
var theme = _a.theme;
|
|
19616
19616
|
return theme.component.total.basicTotal.currency.color;
|
|
19617
19617
|
}, function (_a) {
|
|
@@ -19624,11 +19624,11 @@ var Currency = newStyled.span(templateObject_3$j || (templateObject_3$j = __make
|
|
|
19624
19624
|
var theme = _a.theme;
|
|
19625
19625
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19626
19626
|
});
|
|
19627
|
-
var Container$
|
|
19627
|
+
var Container$n = newStyled.div(templateObject_4$h || (templateObject_4$h = __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) {
|
|
19628
19628
|
var highlightColor = _a.highlightColor;
|
|
19629
19629
|
return highlightColor;
|
|
19630
19630
|
});
|
|
19631
|
-
var TotalContainer = newStyled(Container$
|
|
19631
|
+
var TotalContainer = newStyled(Container$n)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19632
19632
|
var showTotalLabel = _a.showTotalLabel;
|
|
19633
19633
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19634
19634
|
});
|
|
@@ -19638,27 +19638,27 @@ var DiscountAmount = newStyled.h3(templateObject_7$d || (templateObject_7$d = __
|
|
|
19638
19638
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19639
19639
|
});
|
|
19640
19640
|
var TotalLabel = newStyled(Text$7)(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19641
|
-
var templateObject_1$
|
|
19641
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$k, templateObject_4$h, templateObject_5$f, templateObject_6$e, templateObject_7$d, templateObject_8$9;
|
|
19642
19642
|
|
|
19643
19643
|
var Total = function (_a) {
|
|
19644
19644
|
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;
|
|
19645
19645
|
var theme = useTheme();
|
|
19646
|
-
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$
|
|
19646
|
+
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$n, __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));
|
|
19647
19647
|
};
|
|
19648
19648
|
|
|
19649
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19649
|
+
var Wrapper = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19650
19650
|
var color = _a.color;
|
|
19651
19651
|
return color;
|
|
19652
19652
|
});
|
|
19653
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19654
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19653
|
+
var ItemContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
19654
|
+
var Item = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19655
19655
|
var theme = _a.theme;
|
|
19656
19656
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19657
19657
|
}, function (_a) {
|
|
19658
19658
|
var theme = _a.theme;
|
|
19659
19659
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19660
19660
|
});
|
|
19661
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19661
|
+
var CouponItem = newStyled(Item)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19662
19662
|
var color = _a.color;
|
|
19663
19663
|
return color;
|
|
19664
19664
|
});
|
|
@@ -19671,17 +19671,17 @@ var Subtotal = function (_a) {
|
|
|
19671
19671
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19672
19672
|
})] }), void 0));
|
|
19673
19673
|
};
|
|
19674
|
-
var templateObject_1$
|
|
19674
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$j, templateObject_4$g;
|
|
19675
19675
|
|
|
19676
19676
|
var Totals = {
|
|
19677
19677
|
Total: Total,
|
|
19678
19678
|
Subtotal: Subtotal,
|
|
19679
19679
|
};
|
|
19680
19680
|
|
|
19681
|
-
var Container$
|
|
19682
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19683
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19684
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19681
|
+
var Container$m = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19682
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19683
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __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; });
|
|
19684
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$f || (templateObject_4$f = __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'); });
|
|
19685
19685
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
19686
19686
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
19687
19687
|
return props.finishedTrack
|
|
@@ -19719,7 +19719,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19719
19719
|
}
|
|
19720
19720
|
return '30px';
|
|
19721
19721
|
};
|
|
19722
|
-
return (jsxs$1(Container$
|
|
19722
|
+
return (jsxs$1(Container$m, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19723
19723
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19724
19724
|
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
|
|
19725
19725
|
? activeCheckpointColor
|
|
@@ -19730,12 +19730,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19730
19730
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19731
19731
|
})] }), void 0));
|
|
19732
19732
|
};
|
|
19733
|
-
var templateObject_1$
|
|
19733
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$8, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
19734
19734
|
|
|
19735
|
-
var Container$
|
|
19736
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19737
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19738
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19735
|
+
var Container$l = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19736
|
+
var CheckpointContainer = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19737
|
+
var CheckpointDate = newStyled.div(templateObject_3$h || (templateObject_3$h = __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; });
|
|
19738
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$e || (templateObject_4$e = __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'); });
|
|
19739
19739
|
var CheckpointStatus = newStyled.p(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
19740
19740
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19741
19741
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -19761,7 +19761,7 @@ var TrackingProgress = function (_a) {
|
|
|
19761
19761
|
}
|
|
19762
19762
|
return '30px';
|
|
19763
19763
|
};
|
|
19764
|
-
return (jsxs$1(Container$
|
|
19764
|
+
return (jsxs$1(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19765
19765
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19766
19766
|
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
|
|
19767
19767
|
? theme.colors.semantic.informative.color
|
|
@@ -19770,16 +19770,16 @@ var TrackingProgress = function (_a) {
|
|
|
19770
19770
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19771
19771
|
})] }), void 0));
|
|
19772
19772
|
};
|
|
19773
|
-
var templateObject_1$
|
|
19773
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$c, templateObject_7$b, templateObject_8$7;
|
|
19774
19774
|
|
|
19775
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
19776
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
19777
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
19778
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
19775
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"])));
|
|
19776
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
19777
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
19778
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
19779
19779
|
var AutoShipBodyListItem = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
19780
19780
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"])));
|
|
19781
19781
|
var CheckboxInput = newStyled.input(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
19782
|
-
var templateObject_1$
|
|
19782
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$a;
|
|
19783
19783
|
|
|
19784
19784
|
function AutoshipOfferCard(_a) {
|
|
19785
19785
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -19819,15 +19819,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
19819
19819
|
justifyContent: 'center',
|
|
19820
19820
|
gap: '10px',
|
|
19821
19821
|
});
|
|
19822
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
19822
|
+
var StyledContent = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
19823
19823
|
var bgColor = _a.bgColor;
|
|
19824
19824
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
19825
19825
|
}, function (_a) {
|
|
19826
19826
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
19827
19827
|
return width;
|
|
19828
19828
|
});
|
|
19829
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
19830
|
-
var templateObject_1$
|
|
19829
|
+
var StyledController = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
19830
|
+
var templateObject_1$p, templateObject_2$i;
|
|
19831
19831
|
|
|
19832
19832
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
19833
19833
|
var background = _a.background, width = _a.width;
|
|
@@ -19868,14 +19868,14 @@ var BasicAccordion = function (_a) {
|
|
|
19868
19868
|
} }), void 0));
|
|
19869
19869
|
};
|
|
19870
19870
|
|
|
19871
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
19872
|
-
var ImageWrapper = newStyled.div(templateObject_2$
|
|
19873
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
19874
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
19871
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
19872
|
+
var ImageWrapper = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
19873
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
19874
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
19875
19875
|
var TitleWrapper = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
19876
19876
|
var SubTitleWrapper = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
19877
19877
|
var ButtonsWrapper = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
19878
|
-
var templateObject_1$
|
|
19878
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$f, templateObject_4$c, templateObject_5$b, templateObject_6$a, templateObject_7$9;
|
|
19879
19879
|
|
|
19880
19880
|
function CartItemCard(_a) {
|
|
19881
19881
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -19921,9 +19921,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
19921
19921
|
var Shades700Color = '#292929';
|
|
19922
19922
|
var PrimaryColor = '#f7a08b';
|
|
19923
19923
|
var ClubBorderColor = '#882a2b';
|
|
19924
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
19925
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
19926
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
19924
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19925
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
19926
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$e || (templateObject_3$e = __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) {
|
|
19927
19927
|
var selected = _a.selected;
|
|
19928
19928
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
19929
19929
|
}, function (_a) {
|
|
@@ -19932,7 +19932,7 @@ var ContainerBase$1 = newStyled.div(templateObject_3$d || (templateObject_3$d =
|
|
|
19932
19932
|
? "& label {\n font-weight: 700;\n }"
|
|
19933
19933
|
: '';
|
|
19934
19934
|
}, PrimaryColor);
|
|
19935
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
19935
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
19936
19936
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
19937
19937
|
return (isNoMember && selected ? Shades700Color : '');
|
|
19938
19938
|
}, function (_a) {
|
|
@@ -19963,8 +19963,8 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
19963
19963
|
? ClubBorderColor
|
|
19964
19964
|
: Shades200Color;
|
|
19965
19965
|
});
|
|
19966
|
-
var Container$
|
|
19967
|
-
var templateObject_1$
|
|
19966
|
+
var Container$k = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
19967
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6, templateObject_9$5, templateObject_10$4, templateObject_11$2;
|
|
19968
19968
|
|
|
19969
19969
|
var ClubOfferSelector = function (_a) {
|
|
19970
19970
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20003,25 +20003,25 @@ var ClubOfferSelector = function (_a) {
|
|
|
20003
20003
|
onChange(__assign$1({}, dataObj));
|
|
20004
20004
|
};
|
|
20005
20005
|
var isSelected = radioIds.clubOfferSelector.id === radioCheck.id;
|
|
20006
|
-
return (jsxs$1(Container$
|
|
20006
|
+
return (jsxs$1(Container$k, __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: {
|
|
20007
20007
|
marginRight: '10px',
|
|
20008
20008
|
}, labelStyle: {
|
|
20009
20009
|
color: ClubBorderColor,
|
|
20010
20010
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer$1, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit$1, { children: jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20011
20011
|
};
|
|
20012
20012
|
|
|
20013
|
-
var ContainerWrapper = newStyled.div(templateObject_1$
|
|
20013
|
+
var ContainerWrapper = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20014
20014
|
var $checked = _a.$checked;
|
|
20015
20015
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20016
20016
|
}, function (_a) {
|
|
20017
20017
|
var $checked = _a.$checked;
|
|
20018
20018
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20019
20019
|
});
|
|
20020
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20021
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20022
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20020
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20021
|
+
var CardBody = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20022
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20023
20023
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20024
|
-
var templateObject_1$
|
|
20024
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$9;
|
|
20025
20025
|
|
|
20026
20026
|
function Card(_a) {
|
|
20027
20027
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
|
|
@@ -20046,10 +20046,10 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20046
20046
|
height: height,
|
|
20047
20047
|
});
|
|
20048
20048
|
});
|
|
20049
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
20050
|
-
var Container$
|
|
20051
|
-
var ProdCardContainer$2 = newStyled.div(templateObject_3$
|
|
20052
|
-
var Title$2 = newStyled.p(templateObject_4$
|
|
20049
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
20050
|
+
var Container$j = newStyled.a(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
20051
|
+
var ProdCardContainer$2 = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
20052
|
+
var Title$2 = newStyled.p(templateObject_4$9 || (templateObject_4$9 = __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; });
|
|
20053
20053
|
newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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) {
|
|
20054
20054
|
var style = _a.style;
|
|
20055
20055
|
return style.width;
|
|
@@ -20060,7 +20060,7 @@ var BottomTagContainer$6 = newStyled.div(templateObject_6$8 || (templateObject_6
|
|
|
20060
20060
|
});
|
|
20061
20061
|
newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20062
20062
|
var DiscountLabel$2 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __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 &:empty {\n display: none;\n }\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 &:empty {\n display: none;\n }\n"])));
|
|
20063
|
-
var templateObject_1$
|
|
20063
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$8, templateObject_6$8, templateObject_7$7, templateObject_8$5;
|
|
20064
20064
|
|
|
20065
20065
|
var PriceLabelDisplay = function (_a) {
|
|
20066
20066
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -20097,7 +20097,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
20097
20097
|
};
|
|
20098
20098
|
}
|
|
20099
20099
|
};
|
|
20100
|
-
var TopTagContainer$6 = newStyled.div(templateObject_1$
|
|
20100
|
+
var TopTagContainer$6 = newStyled.div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
20101
20101
|
var style = _a.style;
|
|
20102
20102
|
return style.width;
|
|
20103
20103
|
});
|
|
@@ -20113,9 +20113,9 @@ var ProductCard = function (_a) {
|
|
|
20113
20113
|
_a[ComponentSize.Small] = 2,
|
|
20114
20114
|
_a)[size];
|
|
20115
20115
|
}, [size]);
|
|
20116
|
-
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
20116
|
+
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$j, __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$6, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __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$j, __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));
|
|
20117
20117
|
};
|
|
20118
|
-
var templateObject_1$
|
|
20118
|
+
var templateObject_1$k;
|
|
20119
20119
|
|
|
20120
20120
|
var ImageContainer = newStyled.div(function (_a) {
|
|
20121
20121
|
var width = _a.width, height = _a.height;
|
|
@@ -20125,10 +20125,10 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
20125
20125
|
height: height,
|
|
20126
20126
|
});
|
|
20127
20127
|
});
|
|
20128
|
-
var DiscountLabel$1 = newStyled.div(templateObject_1$
|
|
20129
|
-
var ImageHoverContainer = newStyled.img(templateObject_2$
|
|
20130
|
-
var Container$
|
|
20131
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_4$
|
|
20128
|
+
var DiscountLabel$1 = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
20129
|
+
var ImageHoverContainer = newStyled.img(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
20130
|
+
var Container$i = newStyled.a(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
20131
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
20132
20132
|
var Title$1 = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __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; });
|
|
20133
20133
|
var TopTagContainer$5 = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
20134
20134
|
var style = _a.style;
|
|
@@ -20147,7 +20147,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$6 || (templateObject_7
|
|
|
20147
20147
|
var style = _a.style;
|
|
20148
20148
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20149
20149
|
});
|
|
20150
|
-
var templateObject_1$
|
|
20150
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$7, templateObject_6$7, templateObject_7$6;
|
|
20151
20151
|
|
|
20152
20152
|
var getStylesBySize$1 = function (size) {
|
|
20153
20153
|
switch (size) {
|
|
@@ -20207,7 +20207,7 @@ var ProductCardV2 = function (_a) {
|
|
|
20207
20207
|
return jsx$1(Fragment$2, {}, void 0);
|
|
20208
20208
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20209
20209
|
};
|
|
20210
|
-
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$
|
|
20210
|
+
return (jsxs$1(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$i, __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$5, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __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$i, __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: {
|
|
20211
20211
|
display: 'flex',
|
|
20212
20212
|
alignItems: 'flex-start',
|
|
20213
20213
|
gap: '5px',
|
|
@@ -20223,10 +20223,10 @@ newStyled.div(function (_a) {
|
|
|
20223
20223
|
height: height,
|
|
20224
20224
|
});
|
|
20225
20225
|
});
|
|
20226
|
-
var DiscountLabel = newStyled.div(templateObject_1$
|
|
20227
|
-
newStyled.img(templateObject_2$
|
|
20228
|
-
var Container$
|
|
20229
|
-
var ProdCardContainer = newStyled.div(templateObject_4$
|
|
20226
|
+
var DiscountLabel = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
20227
|
+
newStyled.img(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
20228
|
+
var Container$h = newStyled.a(templateObject_3$a || (templateObject_3$a = __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"])));
|
|
20229
|
+
var ProdCardContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
20230
20230
|
var Title = newStyled.p(templateObject_5$6 || (templateObject_5$6 = __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; });
|
|
20231
20231
|
newStyled.div(templateObject_6$6 || (templateObject_6$6 = __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) {
|
|
20232
20232
|
var style = _a.style;
|
|
@@ -20245,7 +20245,7 @@ newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([
|
|
|
20245
20245
|
var style = _a.style;
|
|
20246
20246
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20247
20247
|
});
|
|
20248
|
-
var templateObject_1$
|
|
20248
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
|
|
20249
20249
|
|
|
20250
20250
|
var getStylesBySize = function (size) {
|
|
20251
20251
|
switch (size) {
|
|
@@ -20294,7 +20294,7 @@ var ProductCardV3 = function (_a) {
|
|
|
20294
20294
|
return jsx$1(Fragment$2, {}, void 0);
|
|
20295
20295
|
return (jsx$1(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20296
20296
|
};
|
|
20297
|
-
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$
|
|
20297
|
+
return (jsxs$1(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsx$1(Container$h, __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$h, __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: {
|
|
20298
20298
|
margin: '5x 0 0 45px',
|
|
20299
20299
|
backgroundColor: 'transparent',
|
|
20300
20300
|
border: 'none',
|
|
@@ -20344,7 +20344,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
20344
20344
|
}, [preventTouch, ref, touchStart]);
|
|
20345
20345
|
}
|
|
20346
20346
|
|
|
20347
|
-
var Container$
|
|
20347
|
+
var Container$g = newStyled.div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
20348
20348
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20349
20349
|
return borderRadiusVariant &&
|
|
20350
20350
|
"\n border-radius: 40px;\n ";
|
|
@@ -20353,11 +20353,11 @@ var Container$d = newStyled.div(templateObject_1$g || (templateObject_1$g = __ma
|
|
|
20353
20353
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20354
20354
|
});
|
|
20355
20355
|
// max-height: 31.875rem;
|
|
20356
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
20357
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_3$
|
|
20358
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_4$
|
|
20359
|
-
var NavButtonContainer$
|
|
20360
|
-
var Button$
|
|
20356
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$b || (templateObject_2$b = __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'); });
|
|
20357
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
20358
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20359
|
+
var NavButtonContainer$3 = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20360
|
+
var Button$4 = newStyled.button(templateObject_6$5 || (templateObject_6$5 = __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"])));
|
|
20361
20361
|
var settings$3 = {
|
|
20362
20362
|
dots: true,
|
|
20363
20363
|
infinite: false,
|
|
@@ -20414,14 +20414,14 @@ var ImageProductSlide = function (_a) {
|
|
|
20414
20414
|
}
|
|
20415
20415
|
}
|
|
20416
20416
|
}, [contents, selectedValue]);
|
|
20417
|
-
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$
|
|
20417
|
+
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$g, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20418
20418
|
var _a;
|
|
20419
20419
|
var activeSlide = contents[e];
|
|
20420
20420
|
// If autoplay is true and iframe is the active slide, play the video
|
|
20421
20421
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
20422
20422
|
autoplay ? _playVideo() : _stopVideo();
|
|
20423
20423
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
20424
|
-
} }, settings$3, { nextArrow: jsx$1(NavButtonContainer$
|
|
20424
|
+
} }, settings$3, { nextArrow: jsx$1(NavButtonContainer$3, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$3, { children: jsx$1(Button$4, { 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) {
|
|
20425
20425
|
var _a;
|
|
20426
20426
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
20427
20427
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
@@ -20434,16 +20434,16 @@ var ImageProductSlide = function (_a) {
|
|
|
20434
20434
|
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$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, __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));
|
|
20435
20435
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20436
20436
|
};
|
|
20437
|
-
var templateObject_1$
|
|
20437
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
20438
20438
|
|
|
20439
|
-
var Container$
|
|
20439
|
+
var Container$f = newStyled.div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
20440
20440
|
var ProductGalleryMobile = function (_a) {
|
|
20441
20441
|
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;
|
|
20442
20442
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
20443
20443
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
20444
|
-
return (jsx$1(Container$
|
|
20444
|
+
return (jsx$1(Container$f, __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));
|
|
20445
20445
|
};
|
|
20446
|
-
var templateObject_1$
|
|
20446
|
+
var templateObject_1$g;
|
|
20447
20447
|
|
|
20448
20448
|
function _extends() {
|
|
20449
20449
|
_extends = Object.assign || function (target) {
|
|
@@ -20710,27 +20710,27 @@ function useSwipeable(options) {
|
|
|
20710
20710
|
return handlers;
|
|
20711
20711
|
}
|
|
20712
20712
|
|
|
20713
|
-
var Button$
|
|
20713
|
+
var Button$3 = newStyled.button(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
20714
20714
|
var ArrowButton = function (_a) {
|
|
20715
20715
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
20716
|
-
return (jsx$1(Button$
|
|
20716
|
+
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
20717
20717
|
};
|
|
20718
|
-
var templateObject_1$
|
|
20718
|
+
var templateObject_1$f;
|
|
20719
20719
|
|
|
20720
|
-
var Container$
|
|
20720
|
+
var Container$e = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
20721
20721
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
20722
20722
|
var SlideDots = function (_a) {
|
|
20723
20723
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
20724
20724
|
var theme = useTheme();
|
|
20725
|
-
return (jsx$1(Container$
|
|
20725
|
+
return (jsx$1(Container$e, __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
|
|
20726
20726
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
20727
20727
|
: 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));
|
|
20728
20728
|
};
|
|
20729
|
-
var templateObject_1$
|
|
20729
|
+
var templateObject_1$e;
|
|
20730
20730
|
|
|
20731
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
20732
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
20733
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
20731
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
20732
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
20733
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
20734
20734
|
var SlideNavigation = function (_a) {
|
|
20735
20735
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
20736
20736
|
var theme = useTheme();
|
|
@@ -20742,23 +20742,23 @@ var SlideNavigation = function (_a) {
|
|
|
20742
20742
|
onNavigate(selectedIndex + 1);
|
|
20743
20743
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
20744
20744
|
};
|
|
20745
|
-
var templateObject_1$
|
|
20745
|
+
var templateObject_1$d, templateObject_2$a, templateObject_3$8;
|
|
20746
20746
|
|
|
20747
|
-
var Container$
|
|
20747
|
+
var Container$d = newStyled.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
20748
20748
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20749
20749
|
return borderRadiusVariant &&
|
|
20750
20750
|
"\n border-radius: 40px;\n ";
|
|
20751
20751
|
});
|
|
20752
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
20753
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
20752
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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'); });
|
|
20753
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20754
20754
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
20755
20755
|
var _b, _c;
|
|
20756
20756
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
20757
|
-
return (jsxs$1(Container$
|
|
20757
|
+
return (jsxs$1(Container$d, __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$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { 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));
|
|
20758
20758
|
});
|
|
20759
|
-
var templateObject_1$
|
|
20759
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$7;
|
|
20760
20760
|
|
|
20761
|
-
var Container$
|
|
20761
|
+
var Container$c = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
20762
20762
|
var ProductGalleryMobileV2 = function (_a) {
|
|
20763
20763
|
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;
|
|
20764
20764
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -20780,11 +20780,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
20780
20780
|
useEffect(function () {
|
|
20781
20781
|
setSelectedImage(images[index]);
|
|
20782
20782
|
}, [index, images]);
|
|
20783
|
-
return (jsxs$1(Container$
|
|
20783
|
+
return (jsxs$1(Container$c, __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));
|
|
20784
20784
|
};
|
|
20785
|
-
var templateObject_1$
|
|
20785
|
+
var templateObject_1$b;
|
|
20786
20786
|
|
|
20787
|
-
var Container$
|
|
20787
|
+
var Container$b = newStyled.div(templateObject_1$a || (templateObject_1$a = __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) {
|
|
20788
20788
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20789
20789
|
return borderRadiusVariant &&
|
|
20790
20790
|
"\n border-radius: 40px;\n ";
|
|
@@ -20793,14 +20793,14 @@ var Container$8 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __ma
|
|
|
20793
20793
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20794
20794
|
});
|
|
20795
20795
|
// max-height: 31.875rem;
|
|
20796
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
20797
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
20798
|
-
var VideoOverlay = newStyled.div(templateObject_4$
|
|
20796
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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'); });
|
|
20797
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20798
|
+
var VideoOverlay = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
20799
20799
|
var Video = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
20800
20800
|
var VideoTag = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __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"])));
|
|
20801
20801
|
var Text = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
20802
|
-
var NavButtonContainer$
|
|
20803
|
-
var Button$
|
|
20802
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20803
|
+
var Button$2 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
20804
20804
|
var settings$2 = {
|
|
20805
20805
|
dots: true,
|
|
20806
20806
|
infinite: false,
|
|
@@ -20845,27 +20845,27 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
20845
20845
|
}
|
|
20846
20846
|
}
|
|
20847
20847
|
}, [images, selectedValue]);
|
|
20848
|
-
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$
|
|
20848
|
+
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$b, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20849
20849
|
var _a;
|
|
20850
20850
|
var activeSlide = images[e];
|
|
20851
20851
|
// If autoplay is true and iframe is the active slide, play the video
|
|
20852
20852
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
20853
20853
|
autoplay ? _playVideo() : _stopVideo();
|
|
20854
|
-
} }, settings$2, { nextArrow: jsx$1(NavButtonContainer$
|
|
20854
|
+
} }, settings$2, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$2, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$2, { 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) {
|
|
20855
20855
|
var _a, _b;
|
|
20856
20856
|
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$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __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, { onClick: function () {
|
|
20857
20857
|
isPlaying ? _stopVideo() : _playVideo();
|
|
20858
20858
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
20859
20859
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20860
20860
|
};
|
|
20861
|
-
var templateObject_1$
|
|
20861
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$4;
|
|
20862
20862
|
|
|
20863
|
-
var Container$
|
|
20863
|
+
var Container$a = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
20864
20864
|
var ProductGalleryMobileV3 = function (_a) {
|
|
20865
20865
|
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;
|
|
20866
|
-
return (jsx$1(Container$
|
|
20866
|
+
return (jsx$1(Container$a, __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));
|
|
20867
20867
|
};
|
|
20868
|
-
var templateObject_1$
|
|
20868
|
+
var templateObject_1$9;
|
|
20869
20869
|
|
|
20870
20870
|
var _sendCommandToIframe = function (command) {
|
|
20871
20871
|
var iframe = document.getElementById('vwo-video');
|
|
@@ -20884,60 +20884,99 @@ var _playVideo = function () {
|
|
|
20884
20884
|
|
|
20885
20885
|
var afterChangeSlide = function (_a) {
|
|
20886
20886
|
var _b;
|
|
20887
|
-
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex, onChange = _a.onChange;
|
|
20887
|
+
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex, setArrowsVisible = _a.setArrowsVisible, onChange = _a.onChange;
|
|
20888
20888
|
var activeSlide = contents[slide];
|
|
20889
20889
|
// If autoplay is true and iframe is the active slide, play the video
|
|
20890
20890
|
var autoplay = (_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _b === void 0 ? void 0 : _b.includes('autoplay=1');
|
|
20891
20891
|
autoplay ? _playVideo() : _stopVideo();
|
|
20892
|
+
if (setArrowsVisible) {
|
|
20893
|
+
setArrowsVisible(false);
|
|
20894
|
+
}
|
|
20892
20895
|
setSelectedImageIndex(Math.round(slide));
|
|
20893
20896
|
onChange === null || onChange === void 0 ? void 0 : onChange(slide);
|
|
20894
20897
|
};
|
|
20895
20898
|
|
|
20896
|
-
var TopTagContainer$1 = newStyled.div(templateObject_1$
|
|
20897
|
-
var TopRightTagContainer = newStyled.div(templateObject_2$
|
|
20898
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
20899
|
-
var
|
|
20899
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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'); });
|
|
20900
|
+
var TopRightTagContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
20901
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20902
|
+
var Container$9 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n \n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\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: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\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:before {\n background-color: var(--truekind-default-secondary);\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-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n \n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\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: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\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:before {\n background-color: var(--truekind-default-secondary);\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-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n\n"])), function (_a) {
|
|
20903
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20904
|
+
return borderRadiusVariant &&
|
|
20905
|
+
"\n border-radius: 40px;\n ";
|
|
20906
|
+
}, function (_a) {
|
|
20907
|
+
var theme = _a.theme;
|
|
20908
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20909
|
+
});
|
|
20910
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
20900
20911
|
|
|
20901
20912
|
var settings$1 = {
|
|
20902
20913
|
dots: true,
|
|
20903
20914
|
infinite: false,
|
|
20904
20915
|
speed: 200,
|
|
20905
|
-
slidesToShow: 1.1,
|
|
20906
20916
|
slidesToScroll: 1,
|
|
20907
20917
|
initialSlide: 0,
|
|
20908
20918
|
};
|
|
20909
20919
|
var ContentGallery = function (_a) {
|
|
20910
|
-
var
|
|
20920
|
+
var _b;
|
|
20921
|
+
var contents = _a.contents, _c = _a.customClick, customClick = _c === void 0 ? false : _c, 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;
|
|
20911
20922
|
var slick = useRef(null);
|
|
20912
20923
|
var sliderWrapper = useRef(null);
|
|
20924
|
+
var windowDimensions = useWindowDimensions().windowDimensions;
|
|
20913
20925
|
usePreventVerticalScroll(sliderWrapper);
|
|
20914
20926
|
var onButtonClick = useCallback(function (i) {
|
|
20915
20927
|
var _a;
|
|
20916
20928
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i, true);
|
|
20917
20929
|
}, [slick]);
|
|
20918
|
-
function handleClick() {
|
|
20930
|
+
function handleClick(key) {
|
|
20931
|
+
var elementIndex = contents.findIndex(function (el) { return el.key === key; });
|
|
20932
|
+
setSelectedImageIndex(elementIndex);
|
|
20919
20933
|
setGalleryOpened(true);
|
|
20920
20934
|
}
|
|
20921
20935
|
useEffect(function () {
|
|
20922
20936
|
var _a;
|
|
20923
20937
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
20924
20938
|
}, [contents, selectedImageIndex]);
|
|
20925
|
-
|
|
20939
|
+
function calcSlidesToShow() {
|
|
20940
|
+
var paddingWidth = 15 * 2;
|
|
20941
|
+
var cssZoom = 0.8;
|
|
20942
|
+
var cssGap = 8;
|
|
20943
|
+
var photoSize = 375.41 * cssZoom;
|
|
20944
|
+
var photosPerScreen = windowDimensions.width / photoSize;
|
|
20945
|
+
var totalGap = Math.floor(photosPerScreen) * cssGap;
|
|
20946
|
+
return (windowDimensions.width
|
|
20947
|
+
+ (windowDimensions.width > 380 ? 0 : -10)
|
|
20948
|
+
- paddingWidth
|
|
20949
|
+
- totalGap) / photoSize;
|
|
20950
|
+
}
|
|
20951
|
+
var slidesToShow = (_b = calcSlidesToShow()) !== null && _b !== void 0 ? _b : 1;
|
|
20952
|
+
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$9, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20926
20953
|
return afterChangeSlide({
|
|
20927
20954
|
slide: e,
|
|
20928
20955
|
contents: contents,
|
|
20929
20956
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
20930
20957
|
onChange: onChange,
|
|
20931
20958
|
});
|
|
20932
|
-
} }, settings$1, { ref: slick, centerPadding: "80" }, { children: contents.map(function (content, idx) {
|
|
20959
|
+
} }, settings$1, { slidesToShow: slidesToShow, ref: slick, centerPadding: "80" }, { children: contents.map(function (content, idx) {
|
|
20933
20960
|
var _a;
|
|
20934
20961
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
20935
20962
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
20936
20963
|
// default imgAttributes
|
|
20937
|
-
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$1, __assign$1({ className: "banner-concealable", borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __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));
|
|
20964
|
+
return (jsx$1("div", __assign$1({ role: "button", tabIndex: -1, onClick: function () { return handleClick(content.key); }, 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$1, __assign$1({ className: "banner-concealable", borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __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, style: { height: '510px !important' }, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
20938
20965
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20939
20966
|
};
|
|
20940
20967
|
|
|
20968
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20969
|
+
var Button$1 = newStyled.button(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
20970
|
+
var Container$8 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
20971
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20972
|
+
return borderRadiusVariant &&
|
|
20973
|
+
"\n border-radius: 40px;\n ";
|
|
20974
|
+
}, function (_a) {
|
|
20975
|
+
var theme = _a.theme;
|
|
20976
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20977
|
+
});
|
|
20978
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$4;
|
|
20979
|
+
|
|
20941
20980
|
var settings = {
|
|
20942
20981
|
dots: false,
|
|
20943
20982
|
infinite: false,
|
|
@@ -20977,14 +21016,15 @@ var MainContent = function (_a) {
|
|
|
20977
21016
|
useEffect(function () {
|
|
20978
21017
|
showArrows();
|
|
20979
21018
|
}, [selectedImageIndex]);
|
|
20980
|
-
return (jsx$1(Container$
|
|
21019
|
+
return (jsx$1(Container$8, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20981
21020
|
return afterChangeSlide({
|
|
20982
21021
|
slide: e,
|
|
20983
21022
|
contents: contents,
|
|
20984
21023
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
21024
|
+
setArrowsVisible: setArrowsVisible,
|
|
20985
21025
|
onChange: onChange,
|
|
20986
21026
|
});
|
|
20987
|
-
} }, settings, { nextArrow: arrowsVisible ? (jsx$1(NavButtonContainer$
|
|
21027
|
+
} }, settings, { nextArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { 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)) : undefined, prevArrow: arrowsVisible ? (jsx$1(NavButtonContainer$1, { 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)) : undefined, ref: slick }, { children: contents.map(function (content, idx) {
|
|
20988
21028
|
var _a;
|
|
20989
21029
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
20990
21030
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
@@ -20998,7 +21038,7 @@ var MainContent = function (_a) {
|
|
|
20998
21038
|
}) }), void 0) }), void 0));
|
|
20999
21039
|
};
|
|
21000
21040
|
|
|
21001
|
-
var Container$
|
|
21041
|
+
var Container$7 = newStyled.div({
|
|
21002
21042
|
padding: '1rem',
|
|
21003
21043
|
paddingTop: '2rem',
|
|
21004
21044
|
gap: '0.5rem',
|
|
@@ -21023,14 +21063,11 @@ var Img = newStyled.img({
|
|
|
21023
21063
|
var Slider = function (_a) {
|
|
21024
21064
|
var images = _a.images, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, test = _a.test;
|
|
21025
21065
|
var theme = useTheme();
|
|
21066
|
+
var containerRef = useRef(null);
|
|
21026
21067
|
var itemsRef = useRef([]);
|
|
21027
21068
|
function handleSelectImage(key) {
|
|
21028
21069
|
var indexImageClicked = images.findIndex(function (img) { return img.key === key; });
|
|
21029
|
-
|
|
21030
|
-
behavior: 'smooth',
|
|
21031
|
-
inline: 'center',
|
|
21032
|
-
block: 'nearest',
|
|
21033
|
-
});
|
|
21070
|
+
scrollElementSlider();
|
|
21034
21071
|
setSelectedImageIndex(indexImageClicked);
|
|
21035
21072
|
}
|
|
21036
21073
|
function isTheActiveImage(i) {
|
|
@@ -21040,26 +21077,33 @@ var Slider = function (_a) {
|
|
|
21040
21077
|
var color = theme.colors.pallete.primary.color;
|
|
21041
21078
|
return color ? "3px solid ".concat(color) : 'none';
|
|
21042
21079
|
}
|
|
21080
|
+
var scrollElementSlider = useCallback(function () {
|
|
21081
|
+
var item = itemsRef.current[selectedImageIndex];
|
|
21082
|
+
var container = containerRef.current;
|
|
21083
|
+
if (item && container) {
|
|
21084
|
+
var itemLeft = item.offsetLeft;
|
|
21085
|
+
var itemWidth = item.offsetWidth;
|
|
21086
|
+
var containerWidth = container.offsetWidth;
|
|
21087
|
+
var newScrollLeft = itemLeft - containerWidth / 2 + itemWidth / 2;
|
|
21088
|
+
container.scrollTo({ left: newScrollLeft, behavior: 'smooth' });
|
|
21089
|
+
}
|
|
21090
|
+
}, [selectedImageIndex]);
|
|
21043
21091
|
useEffect(function () {
|
|
21044
21092
|
if (test) {
|
|
21045
21093
|
return;
|
|
21046
21094
|
}
|
|
21047
|
-
|
|
21048
|
-
|
|
21049
|
-
|
|
21050
|
-
block: 'nearest',
|
|
21051
|
-
});
|
|
21052
|
-
}, [selectedImageIndex, test]);
|
|
21053
|
-
return (jsx$1(Container$6, { 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: {
|
|
21095
|
+
scrollElementSlider();
|
|
21096
|
+
}, [selectedImageIndex, test, scrollElementSlider]);
|
|
21097
|
+
return (jsx$1(Container$7, __assign$1({ ref: containerRef }, { 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: {
|
|
21054
21098
|
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
21055
|
-
} }, void 0) }), img.key)); }) }, void 0));
|
|
21099
|
+
} }, void 0) }), img.key)); }) }), void 0));
|
|
21056
21100
|
};
|
|
21057
21101
|
|
|
21058
|
-
var Container$
|
|
21102
|
+
var Container$6 = newStyled.div({
|
|
21059
21103
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
21060
|
-
|
|
21104
|
+
minHeight: '100vh',
|
|
21061
21105
|
width: '100vw',
|
|
21062
|
-
position: '
|
|
21106
|
+
position: 'absolute',
|
|
21063
21107
|
zIndex: '99999',
|
|
21064
21108
|
top: 0,
|
|
21065
21109
|
left: 0,
|
|
@@ -21067,6 +21111,12 @@ var Container$5 = newStyled.div({
|
|
|
21067
21111
|
flexDirection: 'column',
|
|
21068
21112
|
justifyContent: 'center',
|
|
21069
21113
|
});
|
|
21114
|
+
var SubContainer = newStyled.div({
|
|
21115
|
+
maxWidth: '480px',
|
|
21116
|
+
'@media screen and (min-width: 480px)': {
|
|
21117
|
+
margin: '0 auto',
|
|
21118
|
+
}
|
|
21119
|
+
});
|
|
21070
21120
|
var Header$1 = newStyled.div({
|
|
21071
21121
|
display: 'flex',
|
|
21072
21122
|
justifyContent: 'end',
|
|
@@ -21076,6 +21126,12 @@ var Header$1 = newStyled.div({
|
|
|
21076
21126
|
position: 'absolute',
|
|
21077
21127
|
top: 0,
|
|
21078
21128
|
right: 0,
|
|
21129
|
+
'@media screen and (max-height: 640px)': {
|
|
21130
|
+
position: 'relative',
|
|
21131
|
+
},
|
|
21132
|
+
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21133
|
+
position: 'relative',
|
|
21134
|
+
}
|
|
21079
21135
|
});
|
|
21080
21136
|
var IconContainer = newStyled.div({
|
|
21081
21137
|
backgroundColor: '#E5E5E5',
|
|
@@ -21095,9 +21151,14 @@ var GalleryDetailed = function (_a) {
|
|
|
21095
21151
|
function closeGallery() {
|
|
21096
21152
|
setGalleryOpened(false);
|
|
21097
21153
|
}
|
|
21098
|
-
return (jsxs$1(Container$
|
|
21154
|
+
return (jsxs$1(Container$6, { children: [jsx$1(Header$1, { children: jsx$1(IconContainer, __assign$1({ onClick: closeGallery }, { children: jsx$1(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsxs$1(SubContainer, { children: [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)] }, void 0));
|
|
21099
21155
|
};
|
|
21100
21156
|
|
|
21157
|
+
var Container$5 = newStyled.div({
|
|
21158
|
+
marginLeft: '15px',
|
|
21159
|
+
marginRight: '15px',
|
|
21160
|
+
});
|
|
21161
|
+
|
|
21101
21162
|
var ProductGalleryMobileV4 = function (_a) {
|
|
21102
21163
|
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;
|
|
21103
21164
|
var _e = useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
|
|
@@ -21105,7 +21166,7 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
21105
21166
|
useEffect(function () {
|
|
21106
21167
|
setSelectedImageIndex(selectedValue);
|
|
21107
21168
|
}, [selectedValue]);
|
|
21108
|
-
return (jsx$1(
|
|
21169
|
+
return (jsx$1(Container$5, { 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));
|
|
21109
21170
|
};
|
|
21110
21171
|
|
|
21111
21172
|
var SETTINGS = {
|