@trafilea/afrodita-components 6.31.2 → 6.31.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +21 -13
- package/build/index.esm.js +527 -451
- package/build/index.esm.js.map +1 -1
- package/build/index.js +527 -450
- 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;
|
|
6555
|
+
|
|
6556
|
+
var STARTS_NUMBER = 5;
|
|
6557
6557
|
|
|
6558
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
6559
|
-
var templateObject_1$
|
|
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
6560
|
|
|
6561
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
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
|
};
|
|
@@ -6892,6 +6965,30 @@ var Collection = {
|
|
|
6892
6965
|
ProductItemTK: ProductItemTK,
|
|
6893
6966
|
};
|
|
6894
6967
|
|
|
6968
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6969
|
+
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6970
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6971
|
+
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6972
|
+
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6973
|
+
var Label$5 = function (_a) {
|
|
6974
|
+
var label = _a.label, values = _a.values;
|
|
6975
|
+
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6976
|
+
};
|
|
6977
|
+
var Option = function (_a) {
|
|
6978
|
+
var value = _a.value, children = _a.children;
|
|
6979
|
+
return (jsx$1(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
|
|
6980
|
+
};
|
|
6981
|
+
var ColorRadioGroup = function (_a) {
|
|
6982
|
+
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
6983
|
+
return (jsx$1(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6984
|
+
};
|
|
6985
|
+
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6986
|
+
Label: Label$5,
|
|
6987
|
+
Option: Option,
|
|
6988
|
+
OptionsContainer: OptionsContainer,
|
|
6989
|
+
});
|
|
6990
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
6991
|
+
|
|
6895
6992
|
var OneColorSelector = function (_a) {
|
|
6896
6993
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
6897
6994
|
var theme = useTheme();
|
|
@@ -6931,30 +7028,6 @@ var OutOfStock = function (_a) {
|
|
|
6931
7028
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6932
7029
|
};
|
|
6933
7030
|
|
|
6934
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6935
|
-
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6936
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6937
|
-
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6938
|
-
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6939
|
-
var Label$5 = function (_a) {
|
|
6940
|
-
var label = _a.label, values = _a.values;
|
|
6941
|
-
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6942
|
-
};
|
|
6943
|
-
var Option = function (_a) {
|
|
6944
|
-
var value = _a.value, children = _a.children;
|
|
6945
|
-
return (jsx$1(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
|
|
6946
|
-
};
|
|
6947
|
-
var ColorRadioGroup = function (_a) {
|
|
6948
|
-
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
6949
|
-
return (jsx$1(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6950
|
-
};
|
|
6951
|
-
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6952
|
-
Label: Label$5,
|
|
6953
|
-
Option: Option,
|
|
6954
|
-
OptionsContainer: OptionsContainer,
|
|
6955
|
-
});
|
|
6956
|
-
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
6957
|
-
|
|
6958
7031
|
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6959
7032
|
var borderColor = _a.borderColor;
|
|
6960
7033
|
return borderColor;
|
|
@@ -6971,7 +7044,37 @@ var PatternSelector = function (_a) {
|
|
|
6971
7044
|
};
|
|
6972
7045
|
var templateObject_1$1p, templateObject_2$13;
|
|
6973
7046
|
|
|
6974
|
-
var renderOptions$1 = function (
|
|
7047
|
+
var renderOptions$1 = function (options, showCross) {
|
|
7048
|
+
if (showCross === void 0) { showCross = false; }
|
|
7049
|
+
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7050
|
+
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7051
|
+
}
|
|
7052
|
+
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7053
|
+
var checked = _a.checked;
|
|
7054
|
+
if (option.meta.color) {
|
|
7055
|
+
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
7056
|
+
}
|
|
7057
|
+
if (option.meta.pattern) {
|
|
7058
|
+
return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
|
|
7059
|
+
}
|
|
7060
|
+
return null;
|
|
7061
|
+
} }), option.label)); });
|
|
7062
|
+
};
|
|
7063
|
+
var SingleColorPicker = function (_a) {
|
|
7064
|
+
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
|
|
7065
|
+
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
|
|
7066
|
+
};
|
|
7067
|
+
|
|
7068
|
+
var ColorPickerWithTooltip = function (_a) {
|
|
7069
|
+
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7070
|
+
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7071
|
+
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7072
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7073
|
+
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7074
|
+
};
|
|
7075
|
+
var templateObject_1$1o;
|
|
7076
|
+
|
|
7077
|
+
var renderOptions = function (selectedColor, options) {
|
|
6975
7078
|
if (options == null || options.length === 0) {
|
|
6976
7079
|
return jsx$1(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6977
7080
|
}
|
|
@@ -7004,39 +7107,9 @@ var MultiColorPicker = function (_a) {
|
|
|
7004
7107
|
var valueLabels = Array.from(selectedColor)
|
|
7005
7108
|
.map(function (item) { return item.label; })
|
|
7006
7109
|
.join(' | ');
|
|
7007
|
-
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions
|
|
7008
|
-
};
|
|
7009
|
-
|
|
7010
|
-
var renderOptions = function (options, showCross) {
|
|
7011
|
-
if (showCross === void 0) { showCross = false; }
|
|
7012
|
-
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7013
|
-
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7014
|
-
}
|
|
7015
|
-
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7016
|
-
var checked = _a.checked;
|
|
7017
|
-
if (option.meta.color) {
|
|
7018
|
-
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
7019
|
-
}
|
|
7020
|
-
if (option.meta.pattern) {
|
|
7021
|
-
return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
|
|
7022
|
-
}
|
|
7023
|
-
return null;
|
|
7024
|
-
} }), option.label)); });
|
|
7025
|
-
};
|
|
7026
|
-
var SingleColorPicker = function (_a) {
|
|
7027
|
-
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
|
|
7028
|
-
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
7110
|
+
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7029
7111
|
};
|
|
7030
7112
|
|
|
7031
|
-
var ColorPickerWithTooltip = function (_a) {
|
|
7032
|
-
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7033
|
-
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7034
|
-
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7035
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7036
|
-
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7037
|
-
};
|
|
7038
|
-
var templateObject_1$1o;
|
|
7039
|
-
|
|
7040
7113
|
var Wrapper$5 = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7041
7114
|
var Col$1 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7042
7115
|
var Row$2 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
@@ -14875,265 +14948,9 @@ var useModal = function (id) {
|
|
|
14875
14948
|
};
|
|
14876
14949
|
var templateObject_1$N, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
14877
14950
|
|
|
14878
|
-
var
|
|
14879
|
-
var height = _a.height;
|
|
14880
|
-
return height || '0.5rem';
|
|
14881
|
-
}, function (_a) {
|
|
14882
|
-
var backgroundColor = _a.backgroundColor;
|
|
14883
|
-
return backgroundColor;
|
|
14884
|
-
}, function (_a) {
|
|
14885
|
-
var percent = _a.percent;
|
|
14886
|
-
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
14887
|
-
}, function (_a) {
|
|
14888
|
-
var borderRadius = _a.borderRadius;
|
|
14889
|
-
return borderRadius || '0.25rem';
|
|
14890
|
-
}, function (_a) {
|
|
14891
|
-
var percent = _a.percent;
|
|
14892
|
-
return (percent ? '0' : '-50%');
|
|
14893
|
-
}, function (_a) {
|
|
14894
|
-
var percent = _a.percent;
|
|
14895
|
-
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
14896
|
-
});
|
|
14897
|
-
var Background$1 = newStyled.div(function (_a) {
|
|
14898
|
-
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
14899
|
-
return ({
|
|
14900
|
-
height: height || '0.5rem',
|
|
14901
|
-
width: '100%',
|
|
14902
|
-
backgroundColor: backgroundColor,
|
|
14903
|
-
borderRadius: borderRadius || '0.25rem',
|
|
14904
|
-
});
|
|
14905
|
-
});
|
|
14906
|
-
var BarContainer = newStyled.div({
|
|
14907
|
-
display: 'grid',
|
|
14908
|
-
gridTemplateColumns: '1fr 10fr 1fr',
|
|
14909
|
-
justifyContent: 'center',
|
|
14910
|
-
alignItems: 'center',
|
|
14911
|
-
width: '416px',
|
|
14912
|
-
gap: '8px',
|
|
14913
|
-
maxWidth: '100%',
|
|
14914
|
-
padding: '0 16px',
|
|
14915
|
-
position: 'relative',
|
|
14916
|
-
});
|
|
14917
|
-
var Container$z = newStyled.div(function (_a) {
|
|
14918
|
-
var backgroundColor = _a.backgroundColor;
|
|
14919
|
-
return ({
|
|
14920
|
-
width: '475px',
|
|
14921
|
-
maxWidth: '100%',
|
|
14922
|
-
display: 'flex',
|
|
14923
|
-
gap: '13px',
|
|
14924
|
-
padding: '16px 0',
|
|
14925
|
-
flexDirection: 'column',
|
|
14926
|
-
alignItems: 'center',
|
|
14927
|
-
background: backgroundColor,
|
|
14928
|
-
});
|
|
14929
|
-
});
|
|
14930
|
-
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
14931
|
-
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14932
|
-
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14933
|
-
};
|
|
14934
|
-
var Value = newStyled.div(function (_a) {
|
|
14935
|
-
var isBold = _a.isBold;
|
|
14936
|
-
return ({
|
|
14937
|
-
fontWeight: isBold ? 600 : 400,
|
|
14938
|
-
});
|
|
14939
|
-
});
|
|
14940
|
-
var _calculatePercentage = function (currentAmount, endingValue) {
|
|
14941
|
-
var percentage = currentAmount / endingValue;
|
|
14942
|
-
return percentage > 1 ? 100 : percentage * 100;
|
|
14943
|
-
};
|
|
14944
|
-
var MotivatorProgressBar = function (_a) {
|
|
14945
|
-
var _b = _a.fillColor, fillColor = _b === void 0 ? '#F7A08B' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#F7F7F7' : _c, _d = _a.unfilledColor, unfilledColor = _d === void 0 ? '#EEBFBD' : _d, _e = _a.currencyCode, currencyCode = _e === void 0 ? '$' : _e, _f = _a.endingValue, endingValue = _f === void 0 ? 70 : _f, _g = _a.currentAmount, currentAmount = _g === void 0 ? 0 : _g, rewardUnlockedMessage = _a.rewardUnlockedMessage, _h = _a.isClubBarMotivatorTest, isClubBarMotivatorTest = _h === void 0 ? false : _h;
|
|
14946
|
-
var theme = useTheme();
|
|
14947
|
-
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14948
|
-
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14949
|
-
var getRemainingAmountMessage = function () {
|
|
14950
|
-
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
14951
|
-
if (isClubBarMotivatorTest) {
|
|
14952
|
-
return (jsxs$1(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsx$1("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
14953
|
-
}
|
|
14954
|
-
return (jsxs$1(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0));
|
|
14955
|
-
};
|
|
14956
|
-
return (jsxs$1(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
14957
|
-
};
|
|
14958
|
-
var templateObject_1$M, templateObject_2$C;
|
|
14951
|
+
var htmlReactParser = {exports: {}};
|
|
14959
14952
|
|
|
14960
|
-
var
|
|
14961
|
-
var theme = _a.theme;
|
|
14962
|
-
return theme.component.orderBar.backgroundColor;
|
|
14963
|
-
});
|
|
14964
|
-
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14965
|
-
var OrderBar = function (_a) {
|
|
14966
|
-
var message = _a.message, color = _a.color;
|
|
14967
|
-
var theme = useTheme();
|
|
14968
|
-
return (jsxs$1(Container$y, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14969
|
-
};
|
|
14970
|
-
var templateObject_1$L, templateObject_2$B;
|
|
14971
|
-
|
|
14972
|
-
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14973
|
-
background: props.bgColor,
|
|
14974
|
-
height: '100%',
|
|
14975
|
-
width: '100%',
|
|
14976
|
-
maxHeight: '48px',
|
|
14977
|
-
border: 'none',
|
|
14978
|
-
display: 'flex',
|
|
14979
|
-
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
14980
|
-
justifyContent: 'space-between',
|
|
14981
|
-
alignItems: 'center',
|
|
14982
|
-
padding: '10px 24px',
|
|
14983
|
-
}); });
|
|
14984
|
-
var StyledPanel = newStyled(Ye.Panel)({
|
|
14985
|
-
width: '100%',
|
|
14986
|
-
background: 'transparent',
|
|
14987
|
-
border: 'none',
|
|
14988
|
-
display: 'flex',
|
|
14989
|
-
flexDirection: 'column',
|
|
14990
|
-
alignItems: 'center',
|
|
14991
|
-
justifyContent: 'center',
|
|
14992
|
-
gap: '10px',
|
|
14993
|
-
});
|
|
14994
|
-
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
14995
|
-
var bgColor = _a.bgColor;
|
|
14996
|
-
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14997
|
-
}, function (_a) {
|
|
14998
|
-
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14999
|
-
return width;
|
|
15000
|
-
});
|
|
15001
|
-
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
15002
|
-
var templateObject_1$K, templateObject_2$A;
|
|
15003
|
-
|
|
15004
|
-
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15005
|
-
var background = _a.background, width = _a.width;
|
|
15006
|
-
return ({
|
|
15007
|
-
display: 'flex',
|
|
15008
|
-
flexDirection: 'column',
|
|
15009
|
-
justifyContent: 'center',
|
|
15010
|
-
gap: '10px',
|
|
15011
|
-
background: background !== null && background !== void 0 ? background : '',
|
|
15012
|
-
width: width !== null && width !== void 0 ? width : 'auto',
|
|
15013
|
-
borderRadius: '8px',
|
|
15014
|
-
border: '0.063rem solid',
|
|
15015
|
-
borderColor: '#e5e5e5',
|
|
15016
|
-
padding: 'unset',
|
|
15017
|
-
overflow: 'hidden',
|
|
15018
|
-
});
|
|
15019
|
-
});
|
|
15020
|
-
var ControlIconComponent = memo(function (_a) {
|
|
15021
|
-
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
15022
|
-
var Icon = open ? closeIcon : openIcon;
|
|
15023
|
-
return jsx$1(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
15024
|
-
});
|
|
15025
|
-
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
15026
|
-
var HeaderContentComponent = memo(function (_a) {
|
|
15027
|
-
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
15028
|
-
return jsx$1(Fragment$2, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
15029
|
-
});
|
|
15030
|
-
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
15031
|
-
var AccordionContent = function (_a) {
|
|
15032
|
-
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
15033
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsx$1(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxs$1(StyledController, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsx$1("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsx$1(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsx$1(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsx$1(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
15034
|
-
};
|
|
15035
|
-
var BasicAccordion = function (_a) {
|
|
15036
|
-
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
15037
|
-
return (jsx$1(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
|
|
15038
|
-
var open = _a.open;
|
|
15039
|
-
return (jsx$1(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
|
|
15040
|
-
} }), void 0));
|
|
15041
|
-
};
|
|
15042
|
-
|
|
15043
|
-
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
15044
|
-
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
15045
|
-
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
15046
|
-
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
15047
|
-
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
15048
|
-
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
15049
|
-
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
15050
|
-
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
15051
|
-
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
15052
|
-
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
15053
|
-
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
15054
|
-
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
15055
|
-
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
15056
|
-
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
15057
|
-
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
15058
|
-
});
|
|
15059
|
-
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
15060
|
-
|
|
15061
|
-
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
15062
|
-
// TODO: Refactor this color logic
|
|
15063
|
-
var getCellColor$2 = function (index, cell, isLight) {
|
|
15064
|
-
if (index == 0) {
|
|
15065
|
-
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
15066
|
-
}
|
|
15067
|
-
switch (cell) {
|
|
15068
|
-
case 'XS':
|
|
15069
|
-
return '#f5bab0';
|
|
15070
|
-
case 'S':
|
|
15071
|
-
return '#f7a08b';
|
|
15072
|
-
case 'M':
|
|
15073
|
-
return '#ffe1b8';
|
|
15074
|
-
case 'L':
|
|
15075
|
-
return '#f5bab0';
|
|
15076
|
-
case 'XL':
|
|
15077
|
-
return '#8bbeea';
|
|
15078
|
-
case '2XL':
|
|
15079
|
-
return '#b1d7c3';
|
|
15080
|
-
case '3XL':
|
|
15081
|
-
return '#e7a4f7';
|
|
15082
|
-
case '4XL':
|
|
15083
|
-
return '#e7c9b2';
|
|
15084
|
-
default:
|
|
15085
|
-
return '';
|
|
15086
|
-
}
|
|
15087
|
-
};
|
|
15088
|
-
|
|
15089
|
-
var SizeChartTableV3 = function (_a) {
|
|
15090
|
-
var _b, _c;
|
|
15091
|
-
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
15092
|
-
var containerRef = useRef(null);
|
|
15093
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
15094
|
-
var _d = useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
15095
|
-
var _e = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _e[0], yLabel = _e[1];
|
|
15096
|
-
var isMultilabel = xLabel && yLabel;
|
|
15097
|
-
var trimmedXLabel = trimLabel(xLabel);
|
|
15098
|
-
var trimmedYLabel = trimLabel(yLabel);
|
|
15099
|
-
useEffect(function () {
|
|
15100
|
-
var _a;
|
|
15101
|
-
var handleScroll = function () {
|
|
15102
|
-
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
15103
|
-
var maxScroll = scrollWidth - clientWidth;
|
|
15104
|
-
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
15105
|
-
setIsAtScrollEnd(function (prevState) {
|
|
15106
|
-
if (isAtEnd !== prevState) {
|
|
15107
|
-
return isAtEnd;
|
|
15108
|
-
}
|
|
15109
|
-
return prevState;
|
|
15110
|
-
});
|
|
15111
|
-
};
|
|
15112
|
-
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
15113
|
-
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
15114
|
-
}, []);
|
|
15115
|
-
// Generate unique ids for each cell
|
|
15116
|
-
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
15117
|
-
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
15118
|
-
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
15119
|
-
value: cell,
|
|
15120
|
-
}); });
|
|
15121
|
-
});
|
|
15122
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$x, { children: jsxs$1(Column$2, { children: [isMultilabel && (jsxs$1(Header$1, { children: [jsx$1("div", { children: trimmedYLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsx$1(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsx$1(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxs$1("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsx$1("div", { children: trimmedXLabel }, void 0), jsx$1(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
15123
|
-
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
15124
|
-
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsx$1(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsx$1(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
15125
|
-
};
|
|
15126
|
-
var ArrowTip = function (_a) {
|
|
15127
|
-
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
15128
|
-
return (jsx$1(Arrow, __assign$1({ style: {
|
|
15129
|
-
left: isRight ? '85%' : '12%',
|
|
15130
|
-
} }, { children: isRight ? (jsx$1(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsx$1(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
15131
|
-
};
|
|
15132
|
-
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
15133
|
-
|
|
15134
|
-
var htmlReactParser = {exports: {}};
|
|
15135
|
-
|
|
15136
|
-
var lib$2 = {};
|
|
14953
|
+
var lib$2 = {};
|
|
15137
14954
|
|
|
15138
14955
|
var possibleStandardNamesOptimized$1 = {};
|
|
15139
14956
|
|
|
@@ -18910,6 +18727,265 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18910
18727
|
HTMLReactParser$1.attributesToProps;
|
|
18911
18728
|
HTMLReactParser$1.Element;
|
|
18912
18729
|
|
|
18730
|
+
var Bar$1 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18731
|
+
var height = _a.height;
|
|
18732
|
+
return height || '0.5rem';
|
|
18733
|
+
}, function (_a) {
|
|
18734
|
+
var backgroundColor = _a.backgroundColor;
|
|
18735
|
+
return backgroundColor;
|
|
18736
|
+
}, function (_a) {
|
|
18737
|
+
var percent = _a.percent;
|
|
18738
|
+
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
18739
|
+
}, function (_a) {
|
|
18740
|
+
var borderRadius = _a.borderRadius;
|
|
18741
|
+
return borderRadius || '0.25rem';
|
|
18742
|
+
}, function (_a) {
|
|
18743
|
+
var percent = _a.percent;
|
|
18744
|
+
return (percent ? '0' : '-50%');
|
|
18745
|
+
}, function (_a) {
|
|
18746
|
+
var percent = _a.percent;
|
|
18747
|
+
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
18748
|
+
});
|
|
18749
|
+
var Background$1 = newStyled.div(function (_a) {
|
|
18750
|
+
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
18751
|
+
return ({
|
|
18752
|
+
height: height || '0.5rem',
|
|
18753
|
+
width: '100%',
|
|
18754
|
+
backgroundColor: backgroundColor,
|
|
18755
|
+
borderRadius: borderRadius || '0.25rem',
|
|
18756
|
+
});
|
|
18757
|
+
});
|
|
18758
|
+
var BarContainer = newStyled.div({
|
|
18759
|
+
display: 'grid',
|
|
18760
|
+
gridTemplateColumns: '1fr 10fr 1fr',
|
|
18761
|
+
justifyContent: 'center',
|
|
18762
|
+
alignItems: 'center',
|
|
18763
|
+
width: '416px',
|
|
18764
|
+
gap: '8px',
|
|
18765
|
+
maxWidth: '100%',
|
|
18766
|
+
padding: '0 16px',
|
|
18767
|
+
position: 'relative',
|
|
18768
|
+
});
|
|
18769
|
+
var Container$z = newStyled.div(function (_a) {
|
|
18770
|
+
var backgroundColor = _a.backgroundColor;
|
|
18771
|
+
return ({
|
|
18772
|
+
width: '475px',
|
|
18773
|
+
maxWidth: '100%',
|
|
18774
|
+
display: 'flex',
|
|
18775
|
+
gap: '13px',
|
|
18776
|
+
padding: '16px 0',
|
|
18777
|
+
flexDirection: 'column',
|
|
18778
|
+
alignItems: 'center',
|
|
18779
|
+
background: backgroundColor,
|
|
18780
|
+
});
|
|
18781
|
+
});
|
|
18782
|
+
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18783
|
+
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18784
|
+
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18785
|
+
};
|
|
18786
|
+
var Value = newStyled.div(function (_a) {
|
|
18787
|
+
var isBold = _a.isBold;
|
|
18788
|
+
return ({
|
|
18789
|
+
fontWeight: isBold ? 600 : 400,
|
|
18790
|
+
});
|
|
18791
|
+
});
|
|
18792
|
+
var _calculatePercentage = function (currentAmount, endingValue) {
|
|
18793
|
+
var percentage = currentAmount / endingValue;
|
|
18794
|
+
return percentage > 1 ? 100 : percentage * 100;
|
|
18795
|
+
};
|
|
18796
|
+
var MotivatorProgressBar = function (_a) {
|
|
18797
|
+
var _b = _a.fillColor, fillColor = _b === void 0 ? '#F7A08B' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#F7F7F7' : _c, _d = _a.unfilledColor, unfilledColor = _d === void 0 ? '#EEBFBD' : _d, _e = _a.currencyCode, currencyCode = _e === void 0 ? '$' : _e, _f = _a.endingValue, endingValue = _f === void 0 ? 70 : _f, _g = _a.currentAmount, currentAmount = _g === void 0 ? 0 : _g, rewardUnlockedMessage = _a.rewardUnlockedMessage, _h = _a.isClubBarMotivatorTest, isClubBarMotivatorTest = _h === void 0 ? false : _h, remainingAmountMessage = _a.remainingAmountMessage;
|
|
18798
|
+
var theme = useTheme();
|
|
18799
|
+
var isRewardUnlocked = currentAmount >= endingValue;
|
|
18800
|
+
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
18801
|
+
var getRemainingAmountMessage = function () {
|
|
18802
|
+
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
18803
|
+
if (isClubBarMotivatorTest) {
|
|
18804
|
+
return (jsxs$1(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsx$1("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
18805
|
+
}
|
|
18806
|
+
var message = remainingAmountMessage !== null && remainingAmountMessage !== void 0 ? remainingAmountMessage : "Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";
|
|
18807
|
+
message = message.replace('currencyCode', currencyCode);
|
|
18808
|
+
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18809
|
+
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18810
|
+
};
|
|
18811
|
+
return (jsxs$1(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18812
|
+
};
|
|
18813
|
+
var templateObject_1$M, templateObject_2$C;
|
|
18814
|
+
|
|
18815
|
+
var Container$y = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18816
|
+
var theme = _a.theme;
|
|
18817
|
+
return theme.component.orderBar.backgroundColor;
|
|
18818
|
+
});
|
|
18819
|
+
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18820
|
+
var OrderBar = function (_a) {
|
|
18821
|
+
var message = _a.message, color = _a.color;
|
|
18822
|
+
var theme = useTheme();
|
|
18823
|
+
return (jsxs$1(Container$y, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18824
|
+
};
|
|
18825
|
+
var templateObject_1$L, templateObject_2$B;
|
|
18826
|
+
|
|
18827
|
+
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
18828
|
+
background: props.bgColor,
|
|
18829
|
+
height: '100%',
|
|
18830
|
+
width: '100%',
|
|
18831
|
+
maxHeight: '48px',
|
|
18832
|
+
border: 'none',
|
|
18833
|
+
display: 'flex',
|
|
18834
|
+
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
18835
|
+
justifyContent: 'space-between',
|
|
18836
|
+
alignItems: 'center',
|
|
18837
|
+
padding: '10px 24px',
|
|
18838
|
+
}); });
|
|
18839
|
+
var StyledPanel = newStyled(Ye.Panel)({
|
|
18840
|
+
width: '100%',
|
|
18841
|
+
background: 'transparent',
|
|
18842
|
+
border: 'none',
|
|
18843
|
+
display: 'flex',
|
|
18844
|
+
flexDirection: 'column',
|
|
18845
|
+
alignItems: 'center',
|
|
18846
|
+
justifyContent: 'center',
|
|
18847
|
+
gap: '10px',
|
|
18848
|
+
});
|
|
18849
|
+
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
18850
|
+
var bgColor = _a.bgColor;
|
|
18851
|
+
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
18852
|
+
}, function (_a) {
|
|
18853
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
18854
|
+
return width;
|
|
18855
|
+
});
|
|
18856
|
+
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
18857
|
+
var templateObject_1$K, templateObject_2$A;
|
|
18858
|
+
|
|
18859
|
+
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
18860
|
+
var background = _a.background, width = _a.width;
|
|
18861
|
+
return ({
|
|
18862
|
+
display: 'flex',
|
|
18863
|
+
flexDirection: 'column',
|
|
18864
|
+
justifyContent: 'center',
|
|
18865
|
+
gap: '10px',
|
|
18866
|
+
background: background !== null && background !== void 0 ? background : '',
|
|
18867
|
+
width: width !== null && width !== void 0 ? width : 'auto',
|
|
18868
|
+
borderRadius: '8px',
|
|
18869
|
+
border: '0.063rem solid',
|
|
18870
|
+
borderColor: '#e5e5e5',
|
|
18871
|
+
padding: 'unset',
|
|
18872
|
+
overflow: 'hidden',
|
|
18873
|
+
});
|
|
18874
|
+
});
|
|
18875
|
+
var ControlIconComponent = memo(function (_a) {
|
|
18876
|
+
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
18877
|
+
var Icon = open ? closeIcon : openIcon;
|
|
18878
|
+
return jsx$1(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
18879
|
+
});
|
|
18880
|
+
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
18881
|
+
var HeaderContentComponent = memo(function (_a) {
|
|
18882
|
+
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
18883
|
+
return jsx$1(Fragment$2, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
18884
|
+
});
|
|
18885
|
+
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
18886
|
+
var AccordionContent = function (_a) {
|
|
18887
|
+
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
18888
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsx$1(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxs$1(StyledController, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsx$1("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsx$1(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsx$1(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsx$1(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
18889
|
+
};
|
|
18890
|
+
var BasicAccordion = function (_a) {
|
|
18891
|
+
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
18892
|
+
return (jsx$1(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
|
|
18893
|
+
var open = _a.open;
|
|
18894
|
+
return (jsx$1(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
|
|
18895
|
+
} }), void 0));
|
|
18896
|
+
};
|
|
18897
|
+
|
|
18898
|
+
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
18899
|
+
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
18900
|
+
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
18901
|
+
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
18902
|
+
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
18903
|
+
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
18904
|
+
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
18905
|
+
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
18906
|
+
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
18907
|
+
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
18908
|
+
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
18909
|
+
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
18910
|
+
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
18911
|
+
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
18912
|
+
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
18913
|
+
});
|
|
18914
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
18915
|
+
|
|
18916
|
+
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
18917
|
+
// TODO: Refactor this color logic
|
|
18918
|
+
var getCellColor$2 = function (index, cell, isLight) {
|
|
18919
|
+
if (index == 0) {
|
|
18920
|
+
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
18921
|
+
}
|
|
18922
|
+
switch (cell) {
|
|
18923
|
+
case 'XS':
|
|
18924
|
+
return '#f5bab0';
|
|
18925
|
+
case 'S':
|
|
18926
|
+
return '#f7a08b';
|
|
18927
|
+
case 'M':
|
|
18928
|
+
return '#ffe1b8';
|
|
18929
|
+
case 'L':
|
|
18930
|
+
return '#f5bab0';
|
|
18931
|
+
case 'XL':
|
|
18932
|
+
return '#8bbeea';
|
|
18933
|
+
case '2XL':
|
|
18934
|
+
return '#b1d7c3';
|
|
18935
|
+
case '3XL':
|
|
18936
|
+
return '#e7a4f7';
|
|
18937
|
+
case '4XL':
|
|
18938
|
+
return '#e7c9b2';
|
|
18939
|
+
default:
|
|
18940
|
+
return '';
|
|
18941
|
+
}
|
|
18942
|
+
};
|
|
18943
|
+
|
|
18944
|
+
var SizeChartTableV3 = function (_a) {
|
|
18945
|
+
var _b, _c;
|
|
18946
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
18947
|
+
var containerRef = useRef(null);
|
|
18948
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
18949
|
+
var _d = useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
18950
|
+
var _e = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _e[0], yLabel = _e[1];
|
|
18951
|
+
var isMultilabel = xLabel && yLabel;
|
|
18952
|
+
var trimmedXLabel = trimLabel(xLabel);
|
|
18953
|
+
var trimmedYLabel = trimLabel(yLabel);
|
|
18954
|
+
useEffect(function () {
|
|
18955
|
+
var _a;
|
|
18956
|
+
var handleScroll = function () {
|
|
18957
|
+
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
18958
|
+
var maxScroll = scrollWidth - clientWidth;
|
|
18959
|
+
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
18960
|
+
setIsAtScrollEnd(function (prevState) {
|
|
18961
|
+
if (isAtEnd !== prevState) {
|
|
18962
|
+
return isAtEnd;
|
|
18963
|
+
}
|
|
18964
|
+
return prevState;
|
|
18965
|
+
});
|
|
18966
|
+
};
|
|
18967
|
+
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
18968
|
+
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
18969
|
+
}, []);
|
|
18970
|
+
// Generate unique ids for each cell
|
|
18971
|
+
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
18972
|
+
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
18973
|
+
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
18974
|
+
value: cell,
|
|
18975
|
+
}); });
|
|
18976
|
+
});
|
|
18977
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$x, { children: jsxs$1(Column$2, { children: [isMultilabel && (jsxs$1(Header$1, { children: [jsx$1("div", { children: trimmedYLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsx$1(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsx$1(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxs$1("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsx$1("div", { children: trimmedXLabel }, void 0), jsx$1(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
18978
|
+
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
18979
|
+
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsx$1(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsx$1(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
18980
|
+
};
|
|
18981
|
+
var ArrowTip = function (_a) {
|
|
18982
|
+
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
18983
|
+
return (jsx$1(Arrow, __assign$1({ style: {
|
|
18984
|
+
left: isRight ? '85%' : '12%',
|
|
18985
|
+
} }, { children: isRight ? (jsx$1(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsx$1(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
18986
|
+
};
|
|
18987
|
+
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
18988
|
+
|
|
18913
18989
|
var Container$w = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
18914
18990
|
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18915
18991
|
var Tag$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
@@ -21051,5 +21127,5 @@ var SizeChartTableV2 = function (_a) {
|
|
|
21051
21127
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
21052
21128
|
};
|
|
21053
21129
|
|
|
21054
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21130
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21055
21131
|
//# sourceMappingURL=index.esm.js.map
|