@trafilea/afrodita-components 6.31.2 → 6.31.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +209 -136
- package/build/index.esm.js.map +1 -1
- package/build/index.js +209 -136
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +9 -9
- package/build/theme/thespadr.theme.js +14 -14
- 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$1k = newStyled.div(templateObject_1$
|
|
3184
|
+
var Container$1k = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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$1k = newStyled.div(templateObject_1$2e || (templateObject_1$2e = _
|
|
|
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$1z || (templateObject_2$1z = __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) {
|
|
@@ -3220,7 +3220,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3220
3220
|
var theme = useTheme();
|
|
3221
3221
|
return (jsx$1(Container$1k, __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$2d, templateObject_2$1z;
|
|
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$1j = newStyled.div(templateObject_1$
|
|
3254
|
+
var Container$1j = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __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$1j = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
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$1y || (templateObject_2$1y = __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) {
|
|
@@ -3290,7 +3290,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3290
3290
|
var theme = useTheme();
|
|
3291
3291
|
return (jsx$1(Container$1j, __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$2c, templateObject_2$1y;
|
|
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$1i = newStyled.div(templateObject_1$
|
|
3403
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1i = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1x || (templateObject_2$1x = __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) {
|
|
@@ -3422,7 +3422,7 @@ var Price = newStyled.p(templateObject_2$1w || (templateObject_2$1w = __makeTemp
|
|
|
3422
3422
|
return (margin ? (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
3423
3423
|
}, function (_a) {
|
|
3424
3424
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3425
|
-
return finalPriceStyledSmall ? (size === 'large' ? '-
|
|
3425
|
+
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3426
3426
|
});
|
|
3427
3427
|
var TagContainer = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __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;
|
|
@@ -3457,9 +3457,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3457
3457
|
};
|
|
3458
3458
|
return (jsxs$1(Container$1i, __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$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3459
3459
|
};
|
|
3460
|
-
var templateObject_1$
|
|
3460
|
+
var templateObject_1$2b, templateObject_2$1x, templateObject_3$1b;
|
|
3461
3461
|
|
|
3462
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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,9 +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$1i, __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,
|
|
3516
|
-
marginTop: '-5px',
|
|
3517
|
-
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3515
|
+
return (jsxs$1(Container$1i, __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]
|
|
3518
3516
|
? finalPriceArray[0]
|
|
3519
3517
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3520
3518
|
marginTop: '-6px',
|
|
@@ -3530,10 +3528,10 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3530
3528
|
lineHeight: '22px',
|
|
3531
3529
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3532
3530
|
};
|
|
3533
|
-
var templateObject_1$
|
|
3531
|
+
var templateObject_1$2a;
|
|
3534
3532
|
|
|
3535
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3536
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3533
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3534
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3537
3535
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3538
3536
|
var PriceLabelV3 = function (_a) {
|
|
3539
3537
|
var _b;
|
|
@@ -3605,9 +3603,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3605
3603
|
lineHeight: '22px',
|
|
3606
3604
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3607
3605
|
};
|
|
3608
|
-
var templateObject_1$
|
|
3606
|
+
var templateObject_1$29, templateObject_2$1w, templateObject_3$1a;
|
|
3609
3607
|
|
|
3610
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3608
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3611
3609
|
var PriceLabel = function (_a) {
|
|
3612
3610
|
var _b;
|
|
3613
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"]);
|
|
@@ -3641,9 +3639,9 @@ var PriceLabel = function (_a) {
|
|
|
3641
3639
|
marginTop: '-6px',
|
|
3642
3640
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3643
3641
|
};
|
|
3644
|
-
var templateObject_1$
|
|
3642
|
+
var templateObject_1$28;
|
|
3645
3643
|
|
|
3646
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3644
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3647
3645
|
var PriceLabelV2 = function (_a) {
|
|
3648
3646
|
var _b;
|
|
3649
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"]);
|
|
@@ -3676,11 +3674,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3676
3674
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3677
3675
|
return (jsxs$1(Container$1i, __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));
|
|
3678
3676
|
};
|
|
3679
|
-
var templateObject_1$
|
|
3677
|
+
var templateObject_1$27;
|
|
3680
3678
|
|
|
3681
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3682
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3683
|
-
var templateObject_1$
|
|
3679
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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$1v || (templateObject_2$1v = __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$26, templateObject_2$1v;
|
|
3684
3682
|
|
|
3685
3683
|
function ClubPriceMemberLabel(_a) {
|
|
3686
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"]);
|
|
@@ -3689,7 +3687,7 @@ function ClubPriceMemberLabel(_a) {
|
|
|
3689
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));
|
|
3690
3688
|
}
|
|
3691
3689
|
|
|
3692
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3690
|
+
var Container$1h = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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) {
|
|
3693
3691
|
var height = _a.height;
|
|
3694
3692
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3695
3693
|
}, function (_a) {
|
|
@@ -3716,9 +3714,9 @@ var SkeletonBox = function (_a) {
|
|
|
3716
3714
|
var theme = useTheme();
|
|
3717
3715
|
return jsx$1(Container$1h, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3718
3716
|
};
|
|
3719
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$25;
|
|
3720
3718
|
|
|
3721
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3719
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$24 || (templateObject_1$24 = __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) {
|
|
3722
3720
|
var width = _a.width;
|
|
3723
3721
|
return width;
|
|
3724
3722
|
}, function (_a) {
|
|
@@ -3734,7 +3732,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$25 || (templateObject_1$25
|
|
|
3734
3732
|
var opacity = _a.opacity;
|
|
3735
3733
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3736
3734
|
});
|
|
3737
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3735
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1u || (templateObject_2$1u = __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) {
|
|
3738
3736
|
var width = _a.width;
|
|
3739
3737
|
return width;
|
|
3740
3738
|
}, function (_a) {
|
|
@@ -3747,7 +3745,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1t || (templateObject_2$
|
|
|
3747
3745
|
var opacity = _a.opacity;
|
|
3748
3746
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3749
3747
|
});
|
|
3750
|
-
var templateObject_1$
|
|
3748
|
+
var templateObject_1$24, templateObject_2$1u;
|
|
3751
3749
|
|
|
3752
3750
|
/* eslint-disable no-undef */
|
|
3753
3751
|
var cache = new Map();
|
|
@@ -3923,7 +3921,7 @@ var buildImageUrl = function (_a) {
|
|
|
3923
3921
|
}
|
|
3924
3922
|
};
|
|
3925
3923
|
|
|
3926
|
-
var Img = newStyled.img(templateObject_1$
|
|
3924
|
+
var Img = newStyled.img(templateObject_1$23 || (templateObject_1$23 = __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; });
|
|
3927
3925
|
var Image$3 = function (_a) {
|
|
3928
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"]);
|
|
3929
3927
|
var config = useTheme().config;
|
|
@@ -3932,12 +3930,12 @@ var Image$3 = function (_a) {
|
|
|
3932
3930
|
: src;
|
|
3933
3931
|
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3934
3932
|
};
|
|
3935
|
-
var templateObject_1$
|
|
3933
|
+
var templateObject_1$23;
|
|
3936
3934
|
|
|
3937
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3938
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3935
|
+
var LabelWrapper = newStyled.label(templateObject_1$22 || (templateObject_1$22 = __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$1t || (templateObject_2$1t = __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"])));
|
|
3939
3937
|
var InputWrapper$1 = newStyled.input(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3940
|
-
var templateObject_1$
|
|
3938
|
+
var templateObject_1$22, templateObject_2$1t, templateObject_3$19;
|
|
3941
3939
|
|
|
3942
3940
|
var ToggleComponent = function (_a) {
|
|
3943
3941
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -4771,8 +4769,8 @@ function jsxs(type, props, key) {
|
|
|
4771
4769
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4772
4770
|
// `variants` styles that are consistent through all themes.
|
|
4773
4771
|
var TAGS = {
|
|
4774
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4775
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4772
|
+
hero1: newStyled.h1(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject([""], [""]))),
|
|
4773
|
+
hero2: newStyled.h2(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject([""], [""]))),
|
|
4776
4774
|
hero3: newStyled.h3(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject([""], [""]))),
|
|
4777
4775
|
display1: newStyled.h1(templateObject_4$W || (templateObject_4$W = __makeTemplateObject([""], [""]))),
|
|
4778
4776
|
display2: newStyled.h2(templateObject_5$H || (templateObject_5$H = __makeTemplateObject([""], [""]))),
|
|
@@ -4907,10 +4905,10 @@ var DEFAULTS = {
|
|
|
4907
4905
|
size: 'regular',
|
|
4908
4906
|
},
|
|
4909
4907
|
};
|
|
4910
|
-
var templateObject_1$
|
|
4908
|
+
var templateObject_1$21, templateObject_2$1s, templateObject_3$18, templateObject_4$W, templateObject_5$H, templateObject_6$C, templateObject_7$s, templateObject_8$m, templateObject_9$c, templateObject_10$b, 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;
|
|
4911
4909
|
|
|
4912
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
4913
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4910
|
+
var Container$1g = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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"])));
|
|
4911
|
+
var Card$4 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __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"])));
|
|
4914
4912
|
var Tag$2 = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __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"])));
|
|
4915
4913
|
var Label$7 = 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"])));
|
|
4916
4914
|
var Check$1 = newStyled.div(templateObject_5$G || (templateObject_5$G = __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"])));
|
|
@@ -4939,27 +4937,27 @@ var PackCard$1 = function (_a) {
|
|
|
4939
4937
|
currency: currencyCode || 'USD',
|
|
4940
4938
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4941
4939
|
};
|
|
4942
|
-
var templateObject_1$
|
|
4940
|
+
var templateObject_1$20, templateObject_2$1r, templateObject_3$17, templateObject_4$V, templateObject_5$G, templateObject_6$B;
|
|
4943
4941
|
|
|
4944
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4945
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4942
|
+
var Container$1f = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4943
|
+
var DropContainer = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4946
4944
|
var DropList = function (_a) {
|
|
4947
4945
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4948
4946
|
return (jsx$1(Container$1f, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4949
4947
|
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));
|
|
4950
4948
|
}) }, void 0));
|
|
4951
4949
|
};
|
|
4952
|
-
var templateObject_1$
|
|
4950
|
+
var templateObject_1$1$, templateObject_2$1q;
|
|
4953
4951
|
|
|
4954
4952
|
var DROPS_TOTAL = 5;
|
|
4955
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4956
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4953
|
+
var Container$1e = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4954
|
+
var Title$b = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-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"])));
|
|
4957
4955
|
var Description$3 = newStyled.p(templateObject_3$16 || (templateObject_3$16 = __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"])));
|
|
4958
4956
|
var AbsorbencyLevel = function (_a) {
|
|
4959
4957
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4960
4958
|
return (jsxs$1(Container$1e, { 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));
|
|
4961
4959
|
};
|
|
4962
|
-
var templateObject_1$
|
|
4960
|
+
var templateObject_1$1_, templateObject_2$1p, templateObject_3$16;
|
|
4963
4961
|
|
|
4964
4962
|
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(`
|
|
4965
4963
|
`),"","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(`
|
|
@@ -5035,7 +5033,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5035
5033
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5036
5034
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5037
5035
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5038
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5036
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1Z || (templateObject_1$1Z = __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"])));
|
|
5039
5037
|
var Accordion$1 = function (_a) {
|
|
5040
5038
|
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;
|
|
5041
5039
|
var theme = useTheme();
|
|
@@ -5059,9 +5057,9 @@ var Accordion$1 = function (_a) {
|
|
|
5059
5057
|
} }, { 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));
|
|
5060
5058
|
} }), void 0));
|
|
5061
5059
|
};
|
|
5062
|
-
var templateObject_1$
|
|
5060
|
+
var templateObject_1$1Z;
|
|
5063
5061
|
|
|
5064
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
5062
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5065
5063
|
var AccordionOptions = function (_a) {
|
|
5066
5064
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5067
5065
|
var _b = useState({
|
|
@@ -5085,7 +5083,7 @@ var AccordionOptions = function (_a) {
|
|
|
5085
5083
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5086
5084
|
}) }, void 0));
|
|
5087
5085
|
};
|
|
5088
|
-
var templateObject_1$
|
|
5086
|
+
var templateObject_1$1Y;
|
|
5089
5087
|
|
|
5090
5088
|
/**
|
|
5091
5089
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5221,22 +5219,22 @@ var isValidDate = function (value) {
|
|
|
5221
5219
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5222
5220
|
};
|
|
5223
5221
|
|
|
5224
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5225
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5226
|
-
var templateObject_1$
|
|
5222
|
+
var Bold = newStyled.span(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5223
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
5224
|
+
var templateObject_1$1X, templateObject_2$1o;
|
|
5227
5225
|
|
|
5228
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5226
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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) {
|
|
5229
5227
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5230
5228
|
return width;
|
|
5231
5229
|
}, function (_a) {
|
|
5232
5230
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5233
5231
|
return height;
|
|
5234
5232
|
});
|
|
5235
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5233
|
+
var FlexCentered = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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"])));
|
|
5236
5234
|
var LeftSide = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
5237
5235
|
var RightSide = newStyled.div(templateObject_4$U || (templateObject_4$U = __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"])));
|
|
5238
5236
|
var FlexStart = newStyled.div(templateObject_5$F || (templateObject_5$F = __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"])));
|
|
5239
|
-
var templateObject_1$
|
|
5237
|
+
var templateObject_1$1W, templateObject_2$1n, templateObject_3$15, templateObject_4$U, templateObject_5$F;
|
|
5240
5238
|
|
|
5241
5239
|
var CouponCard = function (_a) {
|
|
5242
5240
|
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;
|
|
@@ -5292,14 +5290,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5292
5290
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5293
5291
|
};
|
|
5294
5292
|
|
|
5295
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5296
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5293
|
+
var ErrorText = newStyled.h3(templateObject_1$1V || (templateObject_1$1V = __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; });
|
|
5294
|
+
var ErrorContainer = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
5297
5295
|
var Error$1 = function (_a) {
|
|
5298
5296
|
var error = _a.error;
|
|
5299
5297
|
var theme = useTheme();
|
|
5300
5298
|
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));
|
|
5301
5299
|
};
|
|
5302
|
-
var templateObject_1$
|
|
5300
|
+
var templateObject_1$1V, templateObject_2$1m;
|
|
5303
5301
|
|
|
5304
5302
|
var BaseSelectButton = function (_a) {
|
|
5305
5303
|
var children = _a.children, as = _a.as;
|
|
@@ -5316,7 +5314,7 @@ function BaseSelectOption(_a) {
|
|
|
5316
5314
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5317
5315
|
}
|
|
5318
5316
|
|
|
5319
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5317
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5320
5318
|
function BaseSelect(_a) {
|
|
5321
5319
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5322
5320
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5326,7 +5324,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5326
5324
|
Options: BaseSelectOptions,
|
|
5327
5325
|
Option: BaseSelectOption,
|
|
5328
5326
|
});
|
|
5329
|
-
var templateObject_1$
|
|
5327
|
+
var templateObject_1$1U;
|
|
5330
5328
|
|
|
5331
5329
|
var CustomButton = newStyled.button(function (_a) {
|
|
5332
5330
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5365,7 +5363,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5365
5363
|
});
|
|
5366
5364
|
});
|
|
5367
5365
|
// TODO Remove this when we find the real solution
|
|
5368
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5366
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5369
5367
|
var open = _a.open;
|
|
5370
5368
|
return open &&
|
|
5371
5369
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5385,7 +5383,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5385
5383
|
} }), void 0));
|
|
5386
5384
|
};
|
|
5387
5385
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5388
|
-
var templateObject_1$
|
|
5386
|
+
var templateObject_1$1T;
|
|
5389
5387
|
|
|
5390
5388
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5391
5389
|
var theme = _a.theme;
|
|
@@ -5552,7 +5550,7 @@ var CustomCheckboxStyles = {
|
|
|
5552
5550
|
},
|
|
5553
5551
|
};
|
|
5554
5552
|
|
|
5555
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5553
|
+
var Container$1b = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
5556
5554
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5557
5555
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5558
5556
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5563,7 +5561,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5563
5561
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5564
5562
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5565
5563
|
]; });
|
|
5566
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5564
|
+
var Input$5 = newStyled.input(templateObject_2$1l || (templateObject_2$1l = __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) {
|
|
5567
5565
|
var disabled = _a.disabled;
|
|
5568
5566
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5569
5567
|
});
|
|
@@ -5579,7 +5577,7 @@ var Checkbox = function (_a) {
|
|
|
5579
5577
|
};
|
|
5580
5578
|
return (jsxs$1(Container$1b, { 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));
|
|
5581
5579
|
};
|
|
5582
|
-
var templateObject_1$
|
|
5580
|
+
var templateObject_1$1S, templateObject_2$1l;
|
|
5583
5581
|
|
|
5584
5582
|
var CustomOption = newStyled.li(function (_a) {
|
|
5585
5583
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5628,8 +5626,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5628
5626
|
Option: BaseDropdownOption,
|
|
5629
5627
|
});
|
|
5630
5628
|
|
|
5631
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5632
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5629
|
+
var Container$1a = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject([""], [""])));
|
|
5630
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1k || (templateObject_2$1k = __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"])));
|
|
5633
5631
|
var SelectedOption = newStyled.span(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5634
5632
|
var fontWeight = _a.fontWeight;
|
|
5635
5633
|
return fontWeight || '';
|
|
@@ -5665,7 +5663,7 @@ function SimpleDropdown(_a) {
|
|
|
5665
5663
|
var DropdownContainer = showRequiredPlaceholder ? Container$1a : Fragment$1;
|
|
5666
5664
|
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));
|
|
5667
5665
|
}
|
|
5668
|
-
var templateObject_1$
|
|
5666
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$14;
|
|
5669
5667
|
|
|
5670
5668
|
/* base styles & size variants */
|
|
5671
5669
|
var CustomRadioStyles$2 = {
|
|
@@ -5730,9 +5728,9 @@ var ContainerStyles$2 = {
|
|
|
5730
5728
|
},
|
|
5731
5729
|
};
|
|
5732
5730
|
|
|
5733
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5731
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5734
5732
|
var Container$19 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5735
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5733
|
+
var Input$4 = newStyled.input(templateObject_2$1j || (templateObject_2$1j = __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) {
|
|
5736
5734
|
var disabled = _a.disabled;
|
|
5737
5735
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5738
5736
|
});
|
|
@@ -5763,7 +5761,7 @@ var RadioInput = function (_a) {
|
|
|
5763
5761
|
};
|
|
5764
5762
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$19, __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 ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: 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));
|
|
5765
5763
|
};
|
|
5766
|
-
var templateObject_1$
|
|
5764
|
+
var templateObject_1$1Q, templateObject_2$1j, templateObject_3$13, templateObject_4$T;
|
|
5767
5765
|
|
|
5768
5766
|
var useOnClickOutside = function (ref, handler) {
|
|
5769
5767
|
useEffect(function () {
|
|
@@ -5856,7 +5854,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5856
5854
|
}
|
|
5857
5855
|
};
|
|
5858
5856
|
|
|
5859
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5857
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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) {
|
|
5860
5858
|
var position = _a.position;
|
|
5861
5859
|
return getWrapperFlexDirection(position);
|
|
5862
5860
|
}, function (_a) {
|
|
@@ -5866,7 +5864,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __ma
|
|
|
5866
5864
|
var disableHover = _a.disableHover;
|
|
5867
5865
|
return (disableHover ? 0 : 1);
|
|
5868
5866
|
});
|
|
5869
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5867
|
+
var TooltipContainer = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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) {
|
|
5870
5868
|
var position = _a.position;
|
|
5871
5869
|
return getContainerFlexDirection(position);
|
|
5872
5870
|
}, function (_a) {
|
|
@@ -5921,7 +5919,7 @@ var CloseToolTip = newStyled.button(templateObject_8$l || (templateObject_8$l =
|
|
|
5921
5919
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5922
5920
|
return right;
|
|
5923
5921
|
});
|
|
5924
|
-
var templateObject_1$
|
|
5922
|
+
var templateObject_1$1P, templateObject_2$1i, templateObject_3$12, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$l;
|
|
5925
5923
|
|
|
5926
5924
|
var Tooltip = function (_a) {
|
|
5927
5925
|
var _b;
|
|
@@ -5964,8 +5962,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5964
5962
|
};
|
|
5965
5963
|
};
|
|
5966
5964
|
|
|
5967
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5968
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5965
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5966
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __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) {
|
|
5969
5967
|
var selected = _a.selected, theme = _a.theme;
|
|
5970
5968
|
return selected
|
|
5971
5969
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6002,7 +6000,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6002
6000
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6003
6001
|
});
|
|
6004
6002
|
var Container$18 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6005
|
-
var templateObject_1$
|
|
6003
|
+
var templateObject_1$1O, templateObject_2$1h, templateObject_3$11, templateObject_4$R, templateObject_5$D, templateObject_6$z, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6006
6004
|
|
|
6007
6005
|
var radioIds$2 = {
|
|
6008
6006
|
oneTime: {
|
|
@@ -6057,12 +6055,12 @@ var Autoship = function (_a) {
|
|
|
6057
6055
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, __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$2, { 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$2, { 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));
|
|
6058
6056
|
};
|
|
6059
6057
|
|
|
6060
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6058
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6061
6059
|
var theme = _a.theme;
|
|
6062
6060
|
return theme.name === 'TheSpaDr' &&
|
|
6063
6061
|
"\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 ";
|
|
6064
6062
|
});
|
|
6065
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6063
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
6066
6064
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6067
6065
|
return isSelected
|
|
6068
6066
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6115,7 +6113,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$3 || (templateObject_13$3 =
|
|
|
6115
6113
|
var theme = _a.theme;
|
|
6116
6114
|
return theme.component.autoship.tooltip.margin;
|
|
6117
6115
|
});
|
|
6118
|
-
var templateObject_1$
|
|
6116
|
+
var templateObject_1$1N, templateObject_2$1g, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6119
6117
|
|
|
6120
6118
|
var radioIds$1 = {
|
|
6121
6119
|
oneTime: {
|
|
@@ -6193,13 +6191,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6193
6191
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6194
6192
|
_a$2);
|
|
6195
6193
|
|
|
6196
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6197
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6194
|
+
var CustomerDetails = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
6195
|
+
var CustomerInfo = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
6198
6196
|
var Name = newStyled.h4(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
6199
6197
|
var StarIconContainer = newStyled.div(templateObject_4$P || (templateObject_4$P = __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"])));
|
|
6200
6198
|
var Description$2 = newStyled.p(templateObject_5$B || (templateObject_5$B = __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"])));
|
|
6201
6199
|
var ReviewDays = newStyled.span(templateObject_6$x || (templateObject_6$x = __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"])));
|
|
6202
|
-
var templateObject_1$
|
|
6200
|
+
var templateObject_1$1M, templateObject_2$1f, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x;
|
|
6203
6201
|
|
|
6204
6202
|
var NameWithStars = function (_a) {
|
|
6205
6203
|
var name = _a.name, size = _a.size;
|
|
@@ -6217,8 +6215,8 @@ var ResultFeedback = function (_a) {
|
|
|
6217
6215
|
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));
|
|
6218
6216
|
};
|
|
6219
6217
|
|
|
6220
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
6221
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6218
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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; });
|
|
6219
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
6222
6220
|
var ImageCard = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __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; });
|
|
6223
6221
|
var UserInfoText = newStyled.div(templateObject_4$O || (templateObject_4$O = __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) {
|
|
6224
6222
|
var theme = _a.theme;
|
|
@@ -6230,7 +6228,7 @@ var UserInfoText = newStyled.div(templateObject_4$O || (templateObject_4$O = __m
|
|
|
6230
6228
|
var theme = _a.theme, size = _a.size;
|
|
6231
6229
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6232
6230
|
});
|
|
6233
|
-
var templateObject_1$
|
|
6231
|
+
var templateObject_1$1L, templateObject_2$1e, templateObject_3$_, templateObject_4$O;
|
|
6234
6232
|
|
|
6235
6233
|
/* base styles & size variants */
|
|
6236
6234
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6308,7 +6306,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6308
6306
|
return (jsxs$1(Container$16, __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));
|
|
6309
6307
|
};
|
|
6310
6308
|
|
|
6311
|
-
var Section = newStyled.div(templateObject_1$
|
|
6309
|
+
var Section = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
6312
6310
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6313
6311
|
});
|
|
6314
6312
|
var CardHeader = function (_a) {
|
|
@@ -6319,16 +6317,16 @@ var CardFooter = function (_a) {
|
|
|
6319
6317
|
var children = _a.children;
|
|
6320
6318
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6321
6319
|
};
|
|
6322
|
-
var templateObject_1$
|
|
6320
|
+
var templateObject_1$1K;
|
|
6323
6321
|
|
|
6324
|
-
var Body = newStyled.div(templateObject_1$
|
|
6322
|
+
var Body = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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"])));
|
|
6325
6323
|
var CardBody$1 = function (_a) {
|
|
6326
6324
|
var children = _a.children;
|
|
6327
6325
|
return jsx$1(Body, { children: children }, void 0);
|
|
6328
6326
|
};
|
|
6329
|
-
var templateObject_1$
|
|
6327
|
+
var templateObject_1$1J;
|
|
6330
6328
|
|
|
6331
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6329
|
+
var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
6332
6330
|
var flex = _a.flex;
|
|
6333
6331
|
return flex &&
|
|
6334
6332
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6350,16 +6348,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6350
6348
|
Footer: CardFooter,
|
|
6351
6349
|
Body: CardBody$1,
|
|
6352
6350
|
});
|
|
6353
|
-
var templateObject_1$
|
|
6351
|
+
var templateObject_1$1I;
|
|
6354
6352
|
|
|
6355
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6356
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6353
|
+
var StyledWrapper = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
6354
|
+
var StyledContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
6357
6355
|
var TextLabel = newStyled(Text$7)(templateObject_3$Z || (templateObject_3$Z = __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) {
|
|
6358
6356
|
var color = _a.color;
|
|
6359
6357
|
return color;
|
|
6360
6358
|
});
|
|
6361
6359
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6362
|
-
var templateObject_1$
|
|
6360
|
+
var templateObject_1$1H, templateObject_2$1d, templateObject_3$Z, templateObject_4$N;
|
|
6363
6361
|
|
|
6364
6362
|
var Minimalistic = function (_a) {
|
|
6365
6363
|
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;
|
|
@@ -6367,8 +6365,8 @@ var Minimalistic = function (_a) {
|
|
|
6367
6365
|
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));
|
|
6368
6366
|
};
|
|
6369
6367
|
|
|
6370
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6371
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6368
|
+
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6369
|
+
var Title$9 = newStyled.h1(templateObject_2$1c || (templateObject_2$1c = __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; });
|
|
6372
6370
|
var Details$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __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; });
|
|
6373
6371
|
var PriceContainer$2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
6374
6372
|
var Simple = function (_a) {
|
|
@@ -6376,18 +6374,18 @@ var Simple = function (_a) {
|
|
|
6376
6374
|
var theme = useTheme();
|
|
6377
6375
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$14, { 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));
|
|
6378
6376
|
};
|
|
6379
|
-
var templateObject_1$
|
|
6377
|
+
var templateObject_1$1G, templateObject_2$1c, templateObject_3$Y, templateObject_4$M;
|
|
6380
6378
|
|
|
6381
6379
|
var Bundle = {
|
|
6382
6380
|
Minimalistic: Minimalistic,
|
|
6383
6381
|
Simple: Simple,
|
|
6384
6382
|
};
|
|
6385
6383
|
|
|
6386
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6384
|
+
var Container$13 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
6387
6385
|
var displayBNPL = _a.displayBNPL;
|
|
6388
6386
|
return (displayBNPL ? 'flex' : 'none');
|
|
6389
6387
|
});
|
|
6390
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6388
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
6391
6389
|
var IconWrapper$1 = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
6392
6390
|
var BuyNowPayLater = function (_a) {
|
|
6393
6391
|
var _b;
|
|
@@ -6400,41 +6398,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6400
6398
|
}
|
|
6401
6399
|
return (jsx$1(Container$13, __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));
|
|
6402
6400
|
};
|
|
6403
|
-
var templateObject_1$
|
|
6401
|
+
var templateObject_1$1F, templateObject_2$1b, templateObject_3$X;
|
|
6404
6402
|
|
|
6405
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6403
|
+
var Text$6 = newStyled.span(templateObject_1$1E || (templateObject_1$1E = __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; });
|
|
6406
6404
|
var Title$8 = function (_a) {
|
|
6407
6405
|
var title = _a.title;
|
|
6408
6406
|
var theme = useTheme();
|
|
6409
6407
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6410
6408
|
};
|
|
6411
|
-
var templateObject_1$
|
|
6409
|
+
var templateObject_1$1E;
|
|
6412
6410
|
|
|
6413
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6411
|
+
var P$3 = newStyled.p(templateObject_1$1D || (templateObject_1$1D = __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; });
|
|
6414
6412
|
var Promo = function (_a) {
|
|
6415
6413
|
var text = _a.text;
|
|
6416
6414
|
var theme = useTheme();
|
|
6417
6415
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6418
6416
|
};
|
|
6419
|
-
var templateObject_1$
|
|
6417
|
+
var templateObject_1$1D;
|
|
6420
6418
|
|
|
6421
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6419
|
+
var Text$5 = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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; });
|
|
6422
6420
|
var Description$1 = function (_a) {
|
|
6423
6421
|
var text = _a.text;
|
|
6424
6422
|
var theme = useTheme();
|
|
6425
6423
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6426
6424
|
};
|
|
6427
|
-
var templateObject_1$
|
|
6425
|
+
var templateObject_1$1C;
|
|
6428
6426
|
|
|
6429
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6427
|
+
var Container$12 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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"); });
|
|
6430
6428
|
var CloseButton$1 = function (_a) {
|
|
6431
6429
|
var onClick = _a.onClick, size = _a.size;
|
|
6432
6430
|
var theme = useTheme();
|
|
6433
6431
|
return (jsx$1(Container$12, __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));
|
|
6434
6432
|
};
|
|
6435
|
-
var templateObject_1$
|
|
6433
|
+
var templateObject_1$1B;
|
|
6436
6434
|
|
|
6437
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6435
|
+
var Text$4 = newStyled.h3(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
6438
6436
|
var backgroundColor = _a.backgroundColor;
|
|
6439
6437
|
return backgroundColor;
|
|
6440
6438
|
}, function (_a) {
|
|
@@ -6449,7 +6447,7 @@ var OfferBanner = function (_a) {
|
|
|
6449
6447
|
var theme = useTheme();
|
|
6450
6448
|
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));
|
|
6451
6449
|
};
|
|
6452
|
-
var templateObject_1$
|
|
6450
|
+
var templateObject_1$1A;
|
|
6453
6451
|
|
|
6454
6452
|
var CartProductItem = {
|
|
6455
6453
|
Title: Title$8,
|
|
@@ -6459,8 +6457,8 @@ var CartProductItem = {
|
|
|
6459
6457
|
CloseButton: CloseButton$1,
|
|
6460
6458
|
};
|
|
6461
6459
|
|
|
6462
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6463
|
-
var MobileContainer = newStyled(Container$11)(templateObject_2$
|
|
6460
|
+
var Container$11 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
6461
|
+
var MobileContainer = newStyled(Container$11)(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6464
6462
|
var DollarPart = newStyled.span(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6465
6463
|
var ClubMembersText = newStyled.span(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
6466
6464
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6472,7 +6470,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6472
6470
|
var isMobile = useWindowDimensions().isMobile;
|
|
6473
6471
|
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$11, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6474
6472
|
};
|
|
6475
|
-
var templateObject_1$
|
|
6473
|
+
var templateObject_1$1z, templateObject_2$1a, templateObject_3$W, templateObject_4$L, templateObject_5$A, templateObject_6$w, templateObject_7$o, templateObject_8$i;
|
|
6476
6474
|
|
|
6477
6475
|
var Spacing = function (_a) {
|
|
6478
6476
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6480,8 +6478,8 @@ var Spacing = function (_a) {
|
|
|
6480
6478
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6481
6479
|
};
|
|
6482
6480
|
|
|
6483
|
-
var Container$10 = newStyled('div')(templateObject_1$
|
|
6484
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6481
|
+
var Container$10 = newStyled('div')(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6482
|
+
var Content$2 = newStyled('div')(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
6485
6483
|
var BarContainer$1 = newStyled('div')(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6486
6484
|
var Bar$2 = newStyled('div')(templateObject_4$K || (templateObject_4$K = __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) {
|
|
6487
6485
|
var index = _a.index;
|
|
@@ -6494,10 +6492,10 @@ var StrengthBars = function (_a) {
|
|
|
6494
6492
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6495
6493
|
return (jsxs$1(Container$10, __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));
|
|
6496
6494
|
};
|
|
6497
|
-
var templateObject_1$
|
|
6495
|
+
var templateObject_1$1y, templateObject_2$19, templateObject_3$V, templateObject_4$K;
|
|
6498
6496
|
|
|
6499
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6500
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6497
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6498
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
6501
6499
|
var PriceContainer$1 = newStyled.span(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6502
6500
|
var PriceContainerV2 = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6503
6501
|
var PriceWithTagContainer = newStyled.span(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
@@ -6553,12 +6551,14 @@ var PriceLabelV4 = function (_a) {
|
|
|
6553
6551
|
? finalPriceArray[0]
|
|
6554
6552
|
: (_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$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6555
6553
|
};
|
|
6556
|
-
var templateObject_1$
|
|
6554
|
+
var templateObject_1$1x, templateObject_2$18, templateObject_3$U, templateObject_4$J, templateObject_5$z;
|
|
6557
6555
|
|
|
6558
|
-
var
|
|
6559
|
-
var templateObject_1$1x;
|
|
6556
|
+
var STARTS_NUMBER = 5;
|
|
6560
6557
|
|
|
6561
|
-
var
|
|
6558
|
+
var Container$$ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6559
|
+
var templateObject_1$1w;
|
|
6560
|
+
|
|
6561
|
+
var StarContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6562
6562
|
var marginRight = _a.marginRight;
|
|
6563
6563
|
return marginRight;
|
|
6564
6564
|
});
|
|
@@ -6574,7 +6574,7 @@ var StarList = function (_a) {
|
|
|
6574
6574
|
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)));
|
|
6575
6575
|
}) }, void 0));
|
|
6576
6576
|
};
|
|
6577
|
-
var templateObject_1$
|
|
6577
|
+
var templateObject_1$1v;
|
|
6578
6578
|
|
|
6579
6579
|
/* base styles & size variants */
|
|
6580
6580
|
var LabelStyles = {
|
|
@@ -6615,9 +6615,7 @@ var LabelStyles = {
|
|
|
6615
6615
|
});
|
|
6616
6616
|
},
|
|
6617
6617
|
};
|
|
6618
|
-
var Container$_ = newStyled.a(templateObject_1$
|
|
6619
|
-
var templateObject_1$1v;
|
|
6620
|
-
|
|
6618
|
+
var Container$_ = newStyled.a(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
6621
6619
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6622
6620
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6623
6621
|
return [
|
|
@@ -6636,8 +6634,9 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6636
6634
|
}),
|
|
6637
6635
|
];
|
|
6638
6636
|
});
|
|
6639
|
-
var RatingLabel = newStyled.span(
|
|
6640
|
-
var
|
|
6637
|
+
var RatingLabel = newStyled.span(templateObject_2$17 || (templateObject_2$17 = __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; });
|
|
6638
|
+
var templateObject_1$1u, templateObject_2$17;
|
|
6639
|
+
|
|
6641
6640
|
var Rating = function (_a) {
|
|
6642
6641
|
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;
|
|
6643
6642
|
function handleAnchorClick(e) {
|
|
@@ -6657,9 +6656,71 @@ var Rating = function (_a) {
|
|
|
6657
6656
|
href: reviewsContainerId,
|
|
6658
6657
|
}
|
|
6659
6658
|
: {};
|
|
6660
|
-
return (jsxs$1(Container$_, __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:
|
|
6661
|
-
};
|
|
6662
|
-
|
|
6659
|
+
return (jsxs$1(Container$_, __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));
|
|
6660
|
+
};
|
|
6661
|
+
|
|
6662
|
+
var STYLES_BY_THEME = {
|
|
6663
|
+
TheSpaDr: {
|
|
6664
|
+
title: {
|
|
6665
|
+
mobile: {
|
|
6666
|
+
fontSize: '14px',
|
|
6667
|
+
},
|
|
6668
|
+
fontSize: '16px',
|
|
6669
|
+
fontWeight: '600',
|
|
6670
|
+
},
|
|
6671
|
+
image: {
|
|
6672
|
+
borderRadius: '8px',
|
|
6673
|
+
},
|
|
6674
|
+
},
|
|
6675
|
+
Revel: {
|
|
6676
|
+
title: {
|
|
6677
|
+
mobile: {
|
|
6678
|
+
fontSize: '16px',
|
|
6679
|
+
},
|
|
6680
|
+
fontSize: '18px',
|
|
6681
|
+
fontWeight: '400',
|
|
6682
|
+
},
|
|
6683
|
+
image: {
|
|
6684
|
+
borderRadius: '20px',
|
|
6685
|
+
},
|
|
6686
|
+
},
|
|
6687
|
+
Shapermint: {
|
|
6688
|
+
title: {
|
|
6689
|
+
mobile: {
|
|
6690
|
+
fontSize: '',
|
|
6691
|
+
},
|
|
6692
|
+
fontSize: '0.83rem',
|
|
6693
|
+
fontWeight: 'normal',
|
|
6694
|
+
},
|
|
6695
|
+
image: {
|
|
6696
|
+
borderRadius: '',
|
|
6697
|
+
},
|
|
6698
|
+
},
|
|
6699
|
+
Truekind: {
|
|
6700
|
+
title: {
|
|
6701
|
+
mobile: {
|
|
6702
|
+
fontSize: '',
|
|
6703
|
+
},
|
|
6704
|
+
fontSize: '0.83rem',
|
|
6705
|
+
fontWeight: 'normal',
|
|
6706
|
+
},
|
|
6707
|
+
image: {
|
|
6708
|
+
borderRadius: '',
|
|
6709
|
+
},
|
|
6710
|
+
},
|
|
6711
|
+
TheBodCon: {
|
|
6712
|
+
title: {
|
|
6713
|
+
mobile: {
|
|
6714
|
+
fontSize: '',
|
|
6715
|
+
},
|
|
6716
|
+
fontSize: '0.83rem',
|
|
6717
|
+
fontWeight: 'normal',
|
|
6718
|
+
},
|
|
6719
|
+
image: {
|
|
6720
|
+
borderRadius: '',
|
|
6721
|
+
},
|
|
6722
|
+
},
|
|
6723
|
+
};
|
|
6663
6724
|
|
|
6664
6725
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6665
6726
|
var width = _a.width, height = _a.height;
|
|
@@ -6672,7 +6733,19 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6672
6733
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
6673
6734
|
var Container$Z = newStyled.a(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
6674
6735
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
6675
|
-
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size:
|
|
6736
|
+
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __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 @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 @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6737
|
+
var theme = _a.theme;
|
|
6738
|
+
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
6739
|
+
}, function (_a) {
|
|
6740
|
+
var theme = _a.theme;
|
|
6741
|
+
return STYLES_BY_THEME[theme.name].title.fontWeight;
|
|
6742
|
+
}, function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; }, function (_a) {
|
|
6743
|
+
var theme = _a.theme;
|
|
6744
|
+
return theme.mediaQueries.mobile;
|
|
6745
|
+
}, function (_a) {
|
|
6746
|
+
var theme = _a.theme;
|
|
6747
|
+
return STYLES_BY_THEME[theme.name].title.mobile.fontSize;
|
|
6748
|
+
});
|
|
6676
6749
|
var getStylesBySize$c = function (size) {
|
|
6677
6750
|
switch (size) {
|
|
6678
6751
|
case ComponentSize.Medium:
|
|
@@ -6770,7 +6843,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6770
6843
|
return jsx(Fragment, {}, void 0);
|
|
6771
6844
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6772
6845
|
};
|
|
6773
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Z, __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' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, 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$Z, __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$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6846
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Z, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Z, __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$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6774
6847
|
letterSpacing: '-0.05rem',
|
|
6775
6848
|
} }), 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));
|
|
6776
6849
|
};
|