@trafilea/afrodita-components 6.36.21 → 6.37.0
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 +17 -2
- package/build/index.esm.js +553 -525
- package/build/index.esm.js.map +1 -1
- package/build/index.js +553 -524
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3181,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3181
3181
|
};
|
|
3182
3182
|
}
|
|
3183
3183
|
};
|
|
3184
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
3184
|
+
var Container$1p = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __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$1p = newStyled.div(templateObject_1$2i || (templateObject_1$2i = _
|
|
|
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$1F || (templateObject_2$1F = __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$1p, __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$2j, templateObject_2$1F;
|
|
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$1o = newStyled.div(templateObject_1$
|
|
3254
|
+
var Container$1o = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3255
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3256
3256
|
return backgroundColor;
|
|
3257
3257
|
}, function (_a) {
|
|
@@ -3273,7 +3273,7 @@ var Container$1o = newStyled.div(templateObject_1$2h || (templateObject_1$2h = _
|
|
|
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$1E || (templateObject_2$1E = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3277
3277
|
var textColor = _a.textColor;
|
|
3278
3278
|
return textColor;
|
|
3279
3279
|
}, function (_a) {
|
|
@@ -3290,7 +3290,7 @@ var DiscountTag$3 = function (_a) {
|
|
|
3290
3290
|
var theme = useTheme();
|
|
3291
3291
|
return (jsx$1(Container$1o, __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$2i, templateObject_2$1E;
|
|
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$1n = newStyled.div(templateObject_1$
|
|
3403
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3404
3404
|
var weight = _a.weight;
|
|
3405
3405
|
return (weight ? weight : '400');
|
|
3406
3406
|
}, function (_a) {
|
|
@@ -3424,7 +3424,7 @@ var Price = newStyled.p(templateObject_2$1C || (templateObject_2$1C = __makeTemp
|
|
|
3424
3424
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3425
3425
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3426
3426
|
});
|
|
3427
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3427
|
+
var TagContainer = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3428
3428
|
var _b;
|
|
3429
3429
|
var size = _a.size;
|
|
3430
3430
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3457,9 +3457,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3457
3457
|
};
|
|
3458
3458
|
return (jsxs$1(Container$1n, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3459
3459
|
};
|
|
3460
|
-
var templateObject_1$
|
|
3460
|
+
var templateObject_1$2h, templateObject_2$1D, templateObject_3$1g;
|
|
3461
3461
|
|
|
3462
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __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"]);
|
|
@@ -3528,11 +3528,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3528
3528
|
lineHeight: '22px',
|
|
3529
3529
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3530
3530
|
};
|
|
3531
|
-
var templateObject_1$
|
|
3531
|
+
var templateObject_1$2g;
|
|
3532
3532
|
|
|
3533
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3534
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3535
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3533
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3534
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3535
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3536
3536
|
var PriceLabelV3 = function (_a) {
|
|
3537
3537
|
var _b;
|
|
3538
3538
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3603,9 +3603,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3603
3603
|
lineHeight: '22px',
|
|
3604
3604
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3605
3605
|
};
|
|
3606
|
-
var templateObject_1$
|
|
3606
|
+
var templateObject_1$2f, templateObject_2$1C, templateObject_3$1f;
|
|
3607
3607
|
|
|
3608
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3608
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3609
3609
|
var PriceLabel = function (_a) {
|
|
3610
3610
|
var _b;
|
|
3611
3611
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3639,9 +3639,9 @@ var PriceLabel = function (_a) {
|
|
|
3639
3639
|
marginTop: '-6px',
|
|
3640
3640
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3641
3641
|
};
|
|
3642
|
-
var templateObject_1$
|
|
3642
|
+
var templateObject_1$2e;
|
|
3643
3643
|
|
|
3644
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3644
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3645
3645
|
var PriceLabelV2 = function (_a) {
|
|
3646
3646
|
var _b;
|
|
3647
3647
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3674,11 +3674,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3674
3674
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3675
3675
|
return (jsxs$1(Container$1n, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3676
3676
|
};
|
|
3677
|
-
var templateObject_1$
|
|
3677
|
+
var templateObject_1$2d;
|
|
3678
3678
|
|
|
3679
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3680
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3681
|
-
var templateObject_1$
|
|
3679
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __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$1B || (templateObject_2$1B = __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$2c, templateObject_2$1B;
|
|
3682
3682
|
|
|
3683
3683
|
var ClubPriceMemberLabel = function (_a) {
|
|
3684
3684
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3687,7 +3687,7 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3687
3687
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3688
3688
|
};
|
|
3689
3689
|
|
|
3690
|
-
var Container$1m = newStyled.div(templateObject_1$
|
|
3690
|
+
var Container$1m = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3691
3691
|
var height = _a.height;
|
|
3692
3692
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3693
3693
|
}, function (_a) {
|
|
@@ -3714,9 +3714,9 @@ var SkeletonBox = function (_a) {
|
|
|
3714
3714
|
var theme = useTheme();
|
|
3715
3715
|
return jsx$1(Container$1m, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3716
3716
|
};
|
|
3717
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$2b;
|
|
3718
3718
|
|
|
3719
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3719
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3720
3720
|
var width = _a.width;
|
|
3721
3721
|
return width;
|
|
3722
3722
|
}, function (_a) {
|
|
@@ -3732,7 +3732,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$29 || (templateObject_1$29
|
|
|
3732
3732
|
var opacity = _a.opacity;
|
|
3733
3733
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3734
3734
|
});
|
|
3735
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3735
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3736
3736
|
var width = _a.width;
|
|
3737
3737
|
return width;
|
|
3738
3738
|
}, function (_a) {
|
|
@@ -3745,7 +3745,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1z || (templateObject_2$
|
|
|
3745
3745
|
var opacity = _a.opacity;
|
|
3746
3746
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3747
3747
|
});
|
|
3748
|
-
var templateObject_1$
|
|
3748
|
+
var templateObject_1$2a, templateObject_2$1A;
|
|
3749
3749
|
|
|
3750
3750
|
/* eslint-disable no-undef */
|
|
3751
3751
|
var cache = new Map();
|
|
@@ -3921,7 +3921,7 @@ var buildImageUrl = function (_a) {
|
|
|
3921
3921
|
}
|
|
3922
3922
|
};
|
|
3923
3923
|
|
|
3924
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3924
|
+
var Img$1 = newStyled.img(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3925
3925
|
var Image$3 = function (_a) {
|
|
3926
3926
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3927
3927
|
var config = useTheme().config;
|
|
@@ -3930,15 +3930,15 @@ var Image$3 = function (_a) {
|
|
|
3930
3930
|
: src;
|
|
3931
3931
|
return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3932
3932
|
};
|
|
3933
|
-
var templateObject_1$
|
|
3933
|
+
var templateObject_1$29;
|
|
3934
3934
|
|
|
3935
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3936
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3937
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3935
|
+
var LabelWrapper = newStyled.label(templateObject_1$28 || (templateObject_1$28 = __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$1z || (templateObject_2$1z = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3937
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3938
3938
|
var $color = _a.$color;
|
|
3939
3939
|
return $color;
|
|
3940
3940
|
});
|
|
3941
|
-
var templateObject_1$
|
|
3941
|
+
var templateObject_1$28, templateObject_2$1z, templateObject_3$1e;
|
|
3942
3942
|
|
|
3943
3943
|
var ToggleComponent = function (_a) {
|
|
3944
3944
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4772,13 +4772,13 @@ function jsxs(type, props, key) {
|
|
|
4772
4772
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4773
4773
|
// `variants` styles that are consistent through all themes.
|
|
4774
4774
|
var TAGS = {
|
|
4775
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4776
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4777
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4778
|
-
display1: newStyled.h1(templateObject_4$
|
|
4779
|
-
display2: newStyled.h2(templateObject_5$
|
|
4780
|
-
display3: newStyled.h3(templateObject_6$
|
|
4781
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4775
|
+
hero1: newStyled.h1(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
hero2: newStyled.h2(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
hero3: newStyled.h3(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject([""], [""]))),
|
|
4778
|
+
display1: newStyled.h1(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject([""], [""]))),
|
|
4779
|
+
display2: newStyled.h2(templateObject_5$K || (templateObject_5$K = __makeTemplateObject([""], [""]))),
|
|
4780
|
+
display3: newStyled.h3(templateObject_6$F || (templateObject_6$F = __makeTemplateObject([""], [""]))),
|
|
4781
|
+
heading1: newStyled.h1(templateObject_7$w || (templateObject_7$w = __makeTemplateObject([""], [""]))),
|
|
4782
4782
|
heading2: newStyled.h2(templateObject_8$o || (templateObject_8$o = __makeTemplateObject([""], [""]))),
|
|
4783
4783
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4784
4784
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
@@ -4908,14 +4908,14 @@ var DEFAULTS = {
|
|
|
4908
4908
|
size: 'regular',
|
|
4909
4909
|
},
|
|
4910
4910
|
};
|
|
4911
|
-
var templateObject_1$
|
|
4912
|
-
|
|
4913
|
-
var Container$1l = newStyled.div(templateObject_1$
|
|
4914
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4915
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4916
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
4917
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4918
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4911
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$K, templateObject_6$F, templateObject_7$w, templateObject_8$o, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4912
|
+
|
|
4913
|
+
var Container$1l = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4914
|
+
var Card$4 = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4915
|
+
var Tag$2 = newStyled.div(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4916
|
+
var Label$7 = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4917
|
+
var Check$1 = newStyled.div(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4918
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4919
4919
|
var PackSelectorV2 = function (_a) {
|
|
4920
4920
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4921
4921
|
return (jsx$1(Container$1l, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4940,27 +4940,27 @@ var PackCard$1 = function (_a) {
|
|
|
4940
4940
|
currency: currencyCode || 'USD',
|
|
4941
4941
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4942
4942
|
};
|
|
4943
|
-
var templateObject_1$
|
|
4943
|
+
var templateObject_1$26, templateObject_2$1x, templateObject_3$1c, templateObject_4$Z, templateObject_5$J, templateObject_6$E;
|
|
4944
4944
|
|
|
4945
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
4946
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4945
|
+
var Container$1k = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4946
|
+
var DropContainer = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4947
4947
|
var DropList = function (_a) {
|
|
4948
4948
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4949
4949
|
return (jsx$1(Container$1k, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4950
4950
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4951
4951
|
}) }, void 0));
|
|
4952
4952
|
};
|
|
4953
|
-
var templateObject_1$
|
|
4953
|
+
var templateObject_1$25, templateObject_2$1w;
|
|
4954
4954
|
|
|
4955
4955
|
var DROPS_TOTAL = 5;
|
|
4956
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
4957
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4958
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4956
|
+
var Container$1j = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4957
|
+
var Title$b = newStyled.p(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4958
|
+
var Description$3 = newStyled.p(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4959
4959
|
var AbsorbencyLevel = function (_a) {
|
|
4960
4960
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4961
4961
|
return (jsxs$1(Container$1j, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4962
4962
|
};
|
|
4963
|
-
var templateObject_1$
|
|
4963
|
+
var templateObject_1$24, templateObject_2$1v, templateObject_3$1b;
|
|
4964
4964
|
|
|
4965
4965
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4966
4966
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5036,7 +5036,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5036
5036
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5037
5037
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5038
5038
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5039
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5039
|
+
var StyledContent$1 = newStyled.button(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5040
5040
|
var Accordion$1 = function (_a) {
|
|
5041
5041
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5042
5042
|
var theme = useTheme();
|
|
@@ -5060,9 +5060,9 @@ var Accordion$1 = function (_a) {
|
|
|
5060
5060
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5061
5061
|
} }), void 0));
|
|
5062
5062
|
};
|
|
5063
|
-
var templateObject_1$
|
|
5063
|
+
var templateObject_1$23;
|
|
5064
5064
|
|
|
5065
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
5065
|
+
var Container$1i = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5066
5066
|
var AccordionOptions = function (_a) {
|
|
5067
5067
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5068
5068
|
var _b = useState({
|
|
@@ -5086,7 +5086,7 @@ var AccordionOptions = function (_a) {
|
|
|
5086
5086
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5087
5087
|
}) }, void 0));
|
|
5088
5088
|
};
|
|
5089
|
-
var templateObject_1$
|
|
5089
|
+
var templateObject_1$22;
|
|
5090
5090
|
|
|
5091
5091
|
/**
|
|
5092
5092
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5222,22 +5222,22 @@ var isValidDate = function (value) {
|
|
|
5222
5222
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5223
5223
|
};
|
|
5224
5224
|
|
|
5225
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5226
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5227
|
-
var templateObject_1$
|
|
5225
|
+
var Bold = newStyled.span(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5226
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5227
|
+
var templateObject_1$21, templateObject_2$1u;
|
|
5228
5228
|
|
|
5229
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
5229
|
+
var Container$1h = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5230
5230
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5231
5231
|
return width;
|
|
5232
5232
|
}, function (_a) {
|
|
5233
5233
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5234
5234
|
return height;
|
|
5235
5235
|
});
|
|
5236
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5237
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5238
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5239
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5240
|
-
var templateObject_1$
|
|
5236
|
+
var FlexCentered = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5237
|
+
var LeftSide = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5238
|
+
var RightSide = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5239
|
+
var FlexStart = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5240
|
+
var templateObject_1$20, templateObject_2$1t, templateObject_3$1a, templateObject_4$Y, templateObject_5$I;
|
|
5241
5241
|
|
|
5242
5242
|
var CouponCard = function (_a) {
|
|
5243
5243
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5293,14 +5293,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5293
5293
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5294
5294
|
};
|
|
5295
5295
|
|
|
5296
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5297
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5296
|
+
var ErrorText = newStyled.h3(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5297
|
+
var ErrorContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5298
5298
|
var Error$1 = function (_a) {
|
|
5299
5299
|
var error = _a.error;
|
|
5300
5300
|
var theme = useTheme();
|
|
5301
5301
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5302
5302
|
};
|
|
5303
|
-
var templateObject_1$
|
|
5303
|
+
var templateObject_1$1$, templateObject_2$1s;
|
|
5304
5304
|
|
|
5305
5305
|
var BaseSelectButton = function (_a) {
|
|
5306
5306
|
var children = _a.children, as = _a.as;
|
|
@@ -5317,7 +5317,7 @@ function BaseSelectOption(_a) {
|
|
|
5317
5317
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5318
5318
|
}
|
|
5319
5319
|
|
|
5320
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5320
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5321
5321
|
function BaseSelect(_a) {
|
|
5322
5322
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5323
5323
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5327,7 +5327,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5327
5327
|
Options: BaseSelectOptions,
|
|
5328
5328
|
Option: BaseSelectOption,
|
|
5329
5329
|
});
|
|
5330
|
-
var templateObject_1$
|
|
5330
|
+
var templateObject_1$1_;
|
|
5331
5331
|
|
|
5332
5332
|
var CustomButton = newStyled.button(function (_a) {
|
|
5333
5333
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5366,7 +5366,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5366
5366
|
});
|
|
5367
5367
|
});
|
|
5368
5368
|
// TODO Remove this when we find the real solution
|
|
5369
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5369
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5370
5370
|
var open = _a.open;
|
|
5371
5371
|
return open &&
|
|
5372
5372
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5386,7 +5386,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5386
5386
|
} }), void 0));
|
|
5387
5387
|
};
|
|
5388
5388
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5389
|
-
var templateObject_1$
|
|
5389
|
+
var templateObject_1$1Z;
|
|
5390
5390
|
|
|
5391
5391
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5392
5392
|
var theme = _a.theme;
|
|
@@ -5553,7 +5553,7 @@ var CustomCheckboxStyles = {
|
|
|
5553
5553
|
},
|
|
5554
5554
|
};
|
|
5555
5555
|
|
|
5556
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
5556
|
+
var Container$1g = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5557
5557
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5558
5558
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5559
5559
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5564,7 +5564,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5564
5564
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5565
5565
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5566
5566
|
]; });
|
|
5567
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5567
|
+
var Input$5 = newStyled.input(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5568
5568
|
var disabled = _a.disabled;
|
|
5569
5569
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5570
5570
|
});
|
|
@@ -5580,7 +5580,7 @@ var Checkbox = function (_a) {
|
|
|
5580
5580
|
};
|
|
5581
5581
|
return (jsxs$1(Container$1g, { 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: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5582
5582
|
};
|
|
5583
|
-
var templateObject_1$
|
|
5583
|
+
var templateObject_1$1Y, templateObject_2$1r;
|
|
5584
5584
|
|
|
5585
5585
|
var CustomOption = newStyled.li(function (_a) {
|
|
5586
5586
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5629,9 +5629,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5629
5629
|
Option: BaseDropdownOption,
|
|
5630
5630
|
});
|
|
5631
5631
|
|
|
5632
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
5633
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5634
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5632
|
+
var Container$1f = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject([""], [""])));
|
|
5633
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5634
|
+
var SelectedOption = newStyled.span(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5635
5635
|
var fontWeight = _a.fontWeight;
|
|
5636
5636
|
return fontWeight || '';
|
|
5637
5637
|
});
|
|
@@ -5667,7 +5667,7 @@ function SimpleDropdown(_a) {
|
|
|
5667
5667
|
var DropdownContainer = showRequiredPlaceholder ? Container$1f : Fragment$1;
|
|
5668
5668
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5669
5669
|
}
|
|
5670
|
-
var templateObject_1$
|
|
5670
|
+
var templateObject_1$1X, templateObject_2$1q, templateObject_3$19;
|
|
5671
5671
|
|
|
5672
5672
|
/* base styles & size variants */
|
|
5673
5673
|
var CustomRadioStyles$2 = {
|
|
@@ -5732,9 +5732,9 @@ var ContainerStyles$2 = {
|
|
|
5732
5732
|
},
|
|
5733
5733
|
};
|
|
5734
5734
|
|
|
5735
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5735
|
+
var Wrapper$7 = 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"])));
|
|
5736
5736
|
var Container$1e = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5737
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5737
|
+
var Input$4 = newStyled.input(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5738
5738
|
var disabled = _a.disabled;
|
|
5739
5739
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5740
5740
|
});
|
|
@@ -5742,14 +5742,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5742
5742
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5743
5743
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5744
5744
|
]; });
|
|
5745
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5745
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5746
5746
|
var theme = _a.theme;
|
|
5747
5747
|
return theme.component.radio.textSize;
|
|
5748
5748
|
}, function (_a) {
|
|
5749
5749
|
var theme = _a.theme;
|
|
5750
5750
|
return theme.component.radio.lineHeight;
|
|
5751
5751
|
});
|
|
5752
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5752
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$X || (templateObject_4$X = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5753
5753
|
var theme = _a.theme;
|
|
5754
5754
|
return theme.component.radio.textSize;
|
|
5755
5755
|
}, function (_a) {
|
|
@@ -5768,7 +5768,7 @@ var RadioInput = function (_a) {
|
|
|
5768
5768
|
};
|
|
5769
5769
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1e, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5770
5770
|
};
|
|
5771
|
-
var templateObject_1$
|
|
5771
|
+
var templateObject_1$1W, templateObject_2$1p, templateObject_3$18, templateObject_4$X;
|
|
5772
5772
|
|
|
5773
5773
|
var useOnClickOutside = function (ref, handler) {
|
|
5774
5774
|
useEffect(function () {
|
|
@@ -5861,7 +5861,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5861
5861
|
}
|
|
5862
5862
|
};
|
|
5863
5863
|
|
|
5864
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5864
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5865
5865
|
var position = _a.position;
|
|
5866
5866
|
return getWrapperFlexDirection(position);
|
|
5867
5867
|
}, function (_a) {
|
|
@@ -5871,7 +5871,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __ma
|
|
|
5871
5871
|
var disableHover = _a.disableHover;
|
|
5872
5872
|
return (disableHover ? 0 : 1);
|
|
5873
5873
|
});
|
|
5874
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5874
|
+
var TooltipContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5875
5875
|
var position = _a.position;
|
|
5876
5876
|
return getContainerFlexDirection(position);
|
|
5877
5877
|
}, function (_a) {
|
|
@@ -5899,14 +5899,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n
|
|
|
5899
5899
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5900
5900
|
return actual === expected ? margin : '0';
|
|
5901
5901
|
};
|
|
5902
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5902
|
+
var ContentWrapper = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5903
5903
|
var borderColor = _a.borderColor;
|
|
5904
5904
|
return borderColor;
|
|
5905
5905
|
}, function (_a) {
|
|
5906
5906
|
var backgroundColor = _a.backgroundColor;
|
|
5907
5907
|
return backgroundColor;
|
|
5908
5908
|
});
|
|
5909
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5909
|
+
var TooltipText = newStyled.div(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5910
5910
|
var theme = _a.theme;
|
|
5911
5911
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5912
5912
|
}, function (_a) {
|
|
@@ -5916,17 +5916,17 @@ var TooltipText = newStyled.div(templateObject_4$V || (templateObject_4$V = __ma
|
|
|
5916
5916
|
var color = _a.color;
|
|
5917
5917
|
return color;
|
|
5918
5918
|
});
|
|
5919
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5920
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5919
|
+
var TopSection = newStyled.div(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5920
|
+
var Title$a = newStyled.h1(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5921
5921
|
var color = _a.color;
|
|
5922
5922
|
return color;
|
|
5923
5923
|
});
|
|
5924
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
5924
|
+
var IconContainer$6 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5925
5925
|
var CloseToolTip = newStyled.button(templateObject_8$n || (templateObject_8$n = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5926
5926
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5927
5927
|
return right;
|
|
5928
5928
|
});
|
|
5929
|
-
var templateObject_1$
|
|
5929
|
+
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W, templateObject_5$H, templateObject_6$D, templateObject_7$v, templateObject_8$n;
|
|
5930
5930
|
|
|
5931
5931
|
var Tooltip = function (_a) {
|
|
5932
5932
|
var _b;
|
|
@@ -5969,8 +5969,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5969
5969
|
};
|
|
5970
5970
|
};
|
|
5971
5971
|
|
|
5972
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
5973
|
-
var ContainerBase$3 = newStyled.div(templateObject_2$
|
|
5972
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5973
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5974
5974
|
var selected = _a.selected, theme = _a.theme;
|
|
5975
5975
|
return selected
|
|
5976
5976
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5984,20 +5984,20 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1m || (templateObject_2$1m
|
|
|
5984
5984
|
var theme = _a.theme;
|
|
5985
5985
|
return theme.colors.pallete.primary.color;
|
|
5986
5986
|
});
|
|
5987
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$
|
|
5987
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5988
5988
|
var onClick = _a.onClick;
|
|
5989
5989
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5990
5990
|
});
|
|
5991
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$
|
|
5992
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_5$
|
|
5991
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5992
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5993
5993
|
var theme = _a.theme;
|
|
5994
5994
|
return theme.colors.shades[200].color;
|
|
5995
5995
|
}, function (_a) {
|
|
5996
5996
|
var theme = _a.theme;
|
|
5997
5997
|
return theme.colors.pallete.primary.color;
|
|
5998
5998
|
});
|
|
5999
|
-
var BenefitsContainer$3 = newStyled.div(templateObject_6$
|
|
6000
|
-
var Benefit$3 = newStyled.div(templateObject_7$
|
|
5999
|
+
var BenefitsContainer$3 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6000
|
+
var Benefit$3 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6001
6001
|
var BenefitText$3 = newStyled(Text$7)(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6002
6002
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6003
6003
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -6007,7 +6007,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6007
6007
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6008
6008
|
});
|
|
6009
6009
|
var Container$1d = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6010
|
-
var templateObject_1$
|
|
6010
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$G, templateObject_6$C, templateObject_7$u, templateObject_8$m, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6011
6011
|
|
|
6012
6012
|
var radioIds$2 = {
|
|
6013
6013
|
oneTime: {
|
|
@@ -6062,12 +6062,12 @@ var Autoship = function (_a) {
|
|
|
6062
6062
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6063
6063
|
};
|
|
6064
6064
|
|
|
6065
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6065
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6066
6066
|
var theme = _a.theme;
|
|
6067
6067
|
return theme.name === 'TheSpaDr' &&
|
|
6068
6068
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6069
6069
|
});
|
|
6070
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6070
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6071
6071
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6072
6072
|
return isSelected
|
|
6073
6073
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6083,7 +6083,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6083
6083
|
}
|
|
6084
6084
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6085
6085
|
};
|
|
6086
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
6086
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6087
6087
|
var selected = _a.selected, theme = _a.theme;
|
|
6088
6088
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6089
6089
|
}, function (_a) {
|
|
@@ -6095,19 +6095,19 @@ var ContainerBase$2 = newStyled.div(templateObject_3$14 || (templateObject_3$14
|
|
|
6095
6095
|
var theme = _a.theme;
|
|
6096
6096
|
return theme.colors.pallete.primary.color;
|
|
6097
6097
|
});
|
|
6098
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
6098
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6099
6099
|
var onClick = _a.onClick;
|
|
6100
6100
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6101
6101
|
});
|
|
6102
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
6103
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_6$
|
|
6102
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6103
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6104
6104
|
var theme = _a.theme;
|
|
6105
6105
|
return theme.colors.shades[200].color;
|
|
6106
6106
|
}, function (_a) {
|
|
6107
6107
|
var theme = _a.theme;
|
|
6108
6108
|
return theme.colors.pallete.primary.color;
|
|
6109
6109
|
});
|
|
6110
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6110
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6111
6111
|
var Benefit$2 = newStyled.div(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6112
6112
|
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6113
6113
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -6120,7 +6120,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
|
|
|
6120
6120
|
var theme = _a.theme;
|
|
6121
6121
|
return theme.component.autoship.tooltip.margin;
|
|
6122
6122
|
});
|
|
6123
|
-
var templateObject_1$
|
|
6123
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F, templateObject_6$B, templateObject_7$t, templateObject_8$l, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6124
6124
|
|
|
6125
6125
|
var radioIds$1 = {
|
|
6126
6126
|
oneTime: {
|
|
@@ -6198,13 +6198,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6198
6198
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6199
6199
|
_a$2);
|
|
6200
6200
|
|
|
6201
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6202
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6203
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6204
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6205
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6206
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6207
|
-
var templateObject_1$
|
|
6201
|
+
var CustomerDetails = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject([""], [""])));
|
|
6202
|
+
var CustomerInfo = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6203
|
+
var Name = newStyled.h4(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6204
|
+
var StarIconContainer = newStyled.div(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6205
|
+
var Description$2 = newStyled.p(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6206
|
+
var ReviewDays = newStyled.span(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6207
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$E, templateObject_6$A;
|
|
6208
6208
|
|
|
6209
6209
|
var NameWithStars = function (_a) {
|
|
6210
6210
|
var name = _a.name, size = _a.size;
|
|
@@ -6222,10 +6222,10 @@ var ResultFeedback = function (_a) {
|
|
|
6222
6222
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6223
6223
|
};
|
|
6224
6224
|
|
|
6225
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
6226
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6227
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6228
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6225
|
+
var Container$1b = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6226
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6227
|
+
var ImageCard = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6228
|
+
var UserInfoText = newStyled.div(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6229
6229
|
var theme = _a.theme;
|
|
6230
6230
|
return theme.colors.pallete.secondary.color;
|
|
6231
6231
|
}, function (_a) {
|
|
@@ -6235,7 +6235,7 @@ var UserInfoText = newStyled.div(templateObject_4$R || (templateObject_4$R = __m
|
|
|
6235
6235
|
var theme = _a.theme, size = _a.size;
|
|
6236
6236
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6237
6237
|
});
|
|
6238
|
-
var templateObject_1$
|
|
6238
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S;
|
|
6239
6239
|
|
|
6240
6240
|
/* base styles & size variants */
|
|
6241
6241
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6313,7 +6313,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6313
6313
|
return (jsxs$1(Container$1b, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6314
6314
|
};
|
|
6315
6315
|
|
|
6316
|
-
var Section = newStyled.div(templateObject_1$
|
|
6316
|
+
var Section = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6317
6317
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6318
6318
|
});
|
|
6319
6319
|
var CardHeader = function (_a) {
|
|
@@ -6324,16 +6324,16 @@ var CardFooter = function (_a) {
|
|
|
6324
6324
|
var children = _a.children;
|
|
6325
6325
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6326
6326
|
};
|
|
6327
|
-
var templateObject_1$
|
|
6327
|
+
var templateObject_1$1Q;
|
|
6328
6328
|
|
|
6329
|
-
var Body = newStyled.div(templateObject_1$
|
|
6329
|
+
var Body = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6330
6330
|
var CardBody$1 = function (_a) {
|
|
6331
6331
|
var children = _a.children;
|
|
6332
6332
|
return jsx$1(Body, { children: children }, void 0);
|
|
6333
6333
|
};
|
|
6334
|
-
var templateObject_1$
|
|
6334
|
+
var templateObject_1$1P;
|
|
6335
6335
|
|
|
6336
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
6336
|
+
var Container$1a = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6337
6337
|
var flex = _a.flex;
|
|
6338
6338
|
return flex &&
|
|
6339
6339
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6355,16 +6355,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6355
6355
|
Footer: CardFooter,
|
|
6356
6356
|
Body: CardBody$1,
|
|
6357
6357
|
});
|
|
6358
|
-
var templateObject_1$
|
|
6358
|
+
var templateObject_1$1O;
|
|
6359
6359
|
|
|
6360
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6361
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6362
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6360
|
+
var StyledWrapper = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6361
|
+
var StyledContainer = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6362
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6363
6363
|
var color = _a.color;
|
|
6364
6364
|
return color;
|
|
6365
6365
|
});
|
|
6366
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6367
|
-
var templateObject_1$
|
|
6366
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6367
|
+
var templateObject_1$1N, templateObject_2$1j, templateObject_3$12, templateObject_4$R;
|
|
6368
6368
|
|
|
6369
6369
|
var Minimalistic = function (_a) {
|
|
6370
6370
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6372,28 +6372,28 @@ var Minimalistic = function (_a) {
|
|
|
6372
6372
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6373
6373
|
};
|
|
6374
6374
|
|
|
6375
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
6376
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6377
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6378
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6375
|
+
var Container$19 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6376
|
+
var Title$9 = newStyled.h1(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6377
|
+
var Details$1 = newStyled.span(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6378
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6379
6379
|
var Simple = function (_a) {
|
|
6380
6380
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6381
6381
|
var theme = useTheme();
|
|
6382
6382
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$19, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6383
6383
|
};
|
|
6384
|
-
var templateObject_1$
|
|
6384
|
+
var templateObject_1$1M, templateObject_2$1i, templateObject_3$11, templateObject_4$Q;
|
|
6385
6385
|
|
|
6386
6386
|
var Bundle = {
|
|
6387
6387
|
Minimalistic: Minimalistic,
|
|
6388
6388
|
Simple: Simple,
|
|
6389
6389
|
};
|
|
6390
6390
|
|
|
6391
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
6391
|
+
var Container$18 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6392
6392
|
var displayBNPL = _a.displayBNPL;
|
|
6393
6393
|
return (displayBNPL ? 'flex' : 'none');
|
|
6394
6394
|
});
|
|
6395
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6396
|
-
var IconWrapper$1 = newStyled.div(templateObject_3
|
|
6395
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6396
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6397
6397
|
var BuyNowPayLater = function (_a) {
|
|
6398
6398
|
var _b;
|
|
6399
6399
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6405,41 +6405,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6405
6405
|
}
|
|
6406
6406
|
return (jsx$1(Container$18, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6407
6407
|
};
|
|
6408
|
-
var templateObject_1$
|
|
6408
|
+
var templateObject_1$1L, templateObject_2$1h, templateObject_3$10;
|
|
6409
6409
|
|
|
6410
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6410
|
+
var Text$6 = newStyled.span(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6411
6411
|
var Title$8 = function (_a) {
|
|
6412
6412
|
var title = _a.title;
|
|
6413
6413
|
var theme = useTheme();
|
|
6414
6414
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6415
6415
|
};
|
|
6416
|
-
var templateObject_1$
|
|
6416
|
+
var templateObject_1$1K;
|
|
6417
6417
|
|
|
6418
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6418
|
+
var P$3 = newStyled.p(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6419
6419
|
var Promo = function (_a) {
|
|
6420
6420
|
var text = _a.text;
|
|
6421
6421
|
var theme = useTheme();
|
|
6422
6422
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6423
6423
|
};
|
|
6424
|
-
var templateObject_1$
|
|
6424
|
+
var templateObject_1$1J;
|
|
6425
6425
|
|
|
6426
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6426
|
+
var Text$5 = newStyled.span(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6427
6427
|
var Description$1 = function (_a) {
|
|
6428
6428
|
var text = _a.text;
|
|
6429
6429
|
var theme = useTheme();
|
|
6430
6430
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6431
6431
|
};
|
|
6432
|
-
var templateObject_1$
|
|
6432
|
+
var templateObject_1$1I;
|
|
6433
6433
|
|
|
6434
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
6434
|
+
var Container$17 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6435
6435
|
var CloseButton$1 = function (_a) {
|
|
6436
6436
|
var onClick = _a.onClick, size = _a.size;
|
|
6437
6437
|
var theme = useTheme();
|
|
6438
6438
|
return (jsx$1(Container$17, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6439
6439
|
};
|
|
6440
|
-
var templateObject_1$
|
|
6440
|
+
var templateObject_1$1H;
|
|
6441
6441
|
|
|
6442
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6442
|
+
var Text$4 = newStyled.h3(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6443
6443
|
var backgroundColor = _a.backgroundColor;
|
|
6444
6444
|
return backgroundColor;
|
|
6445
6445
|
}, function (_a) {
|
|
@@ -6454,7 +6454,7 @@ var OfferBanner = function (_a) {
|
|
|
6454
6454
|
var theme = useTheme();
|
|
6455
6455
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6456
6456
|
};
|
|
6457
|
-
var templateObject_1$
|
|
6457
|
+
var templateObject_1$1G;
|
|
6458
6458
|
|
|
6459
6459
|
var CartProductItem = {
|
|
6460
6460
|
Title: Title$8,
|
|
@@ -6464,20 +6464,20 @@ var CartProductItem = {
|
|
|
6464
6464
|
CloseButton: CloseButton$1,
|
|
6465
6465
|
};
|
|
6466
6466
|
|
|
6467
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
6468
|
-
var MobileContainer = newStyled(Container$16)(templateObject_2$
|
|
6469
|
-
var DollarPart = newStyled.span(templateObject_3
|
|
6470
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6471
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6472
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6473
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6467
|
+
var Container$16 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6468
|
+
var MobileContainer = newStyled(Container$16)(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6469
|
+
var DollarPart = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6470
|
+
var ClubMembersText = newStyled.span(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6471
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6472
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6473
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6474
6474
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6475
6475
|
var ClubPriceLabel = function (_a) {
|
|
6476
6476
|
var clubPrice = _a.clubPrice;
|
|
6477
6477
|
var isMobile = useWindowDimensions().isMobile;
|
|
6478
6478
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$16, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6479
6479
|
};
|
|
6480
|
-
var templateObject_1$
|
|
6480
|
+
var templateObject_1$1F, templateObject_2$1g, templateObject_3$$, templateObject_4$P, templateObject_5$D, templateObject_6$z, templateObject_7$s, templateObject_8$k;
|
|
6481
6481
|
|
|
6482
6482
|
var Spacing = function (_a) {
|
|
6483
6483
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6485,10 +6485,10 @@ var Spacing = function (_a) {
|
|
|
6485
6485
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6486
6486
|
};
|
|
6487
6487
|
|
|
6488
|
-
var Container$15 = newStyled('div')(templateObject_1$
|
|
6489
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6490
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6491
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6488
|
+
var Container$15 = newStyled('div')(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6489
|
+
var Content$2 = newStyled('div')(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6490
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6491
|
+
var Bar$2 = newStyled('div')(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6492
6492
|
var index = _a.index;
|
|
6493
6493
|
return "".concat(6 + 3 * index, "px");
|
|
6494
6494
|
}, function (_a) {
|
|
@@ -6499,13 +6499,13 @@ var StrengthBars = function (_a) {
|
|
|
6499
6499
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6500
6500
|
return (jsxs$1(Container$15, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6501
6501
|
};
|
|
6502
|
-
var templateObject_1$
|
|
6502
|
+
var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
|
|
6503
6503
|
|
|
6504
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6505
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6506
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6507
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6508
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6504
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6505
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6506
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6507
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6508
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6509
6509
|
var RegularPriceTag = function () {
|
|
6510
6510
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6511
6511
|
};
|
|
@@ -6558,14 +6558,14 @@ var PriceLabelV4 = function (_a) {
|
|
|
6558
6558
|
? finalPriceArray[0]
|
|
6559
6559
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6560
6560
|
};
|
|
6561
|
-
var templateObject_1$
|
|
6561
|
+
var templateObject_1$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C;
|
|
6562
6562
|
|
|
6563
6563
|
var STARTS_NUMBER = 5;
|
|
6564
6564
|
|
|
6565
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6566
|
-
var templateObject_1$
|
|
6565
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6566
|
+
var templateObject_1$1C;
|
|
6567
6567
|
|
|
6568
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6568
|
+
var StarContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6569
6569
|
var marginRight = _a.marginRight;
|
|
6570
6570
|
return marginRight;
|
|
6571
6571
|
});
|
|
@@ -6581,7 +6581,7 @@ var StarList = function (_a) {
|
|
|
6581
6581
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6582
6582
|
}) }, void 0));
|
|
6583
6583
|
};
|
|
6584
|
-
var templateObject_1$
|
|
6584
|
+
var templateObject_1$1B;
|
|
6585
6585
|
|
|
6586
6586
|
/* base styles & size variants */
|
|
6587
6587
|
var LabelStyles = {
|
|
@@ -6622,7 +6622,7 @@ var LabelStyles = {
|
|
|
6622
6622
|
});
|
|
6623
6623
|
},
|
|
6624
6624
|
};
|
|
6625
|
-
var Container$13 = newStyled.a(templateObject_1$
|
|
6625
|
+
var Container$13 = newStyled.a(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6626
6626
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6627
6627
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6628
6628
|
return [
|
|
@@ -6641,8 +6641,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6641
6641
|
}),
|
|
6642
6642
|
];
|
|
6643
6643
|
});
|
|
6644
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6645
|
-
var templateObject_1$
|
|
6644
|
+
var RatingLabel = newStyled.span(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6645
|
+
var templateObject_1$1A, templateObject_2$1d;
|
|
6646
6646
|
|
|
6647
6647
|
var Rating = function (_a) {
|
|
6648
6648
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6737,10 +6737,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6737
6737
|
height: height,
|
|
6738
6738
|
});
|
|
6739
6739
|
});
|
|
6740
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6741
|
-
var Container$12 = newStyled.a(templateObject_2$
|
|
6742
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6743
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6740
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6741
|
+
var Container$12 = newStyled.a(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6742
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6743
|
+
var Title$7 = newStyled.p(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6744
6744
|
var theme = _a.theme;
|
|
6745
6745
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
6746
6746
|
}, function (_a) {
|
|
@@ -6791,17 +6791,17 @@ var getStylesBySize$c = function (size) {
|
|
|
6791
6791
|
};
|
|
6792
6792
|
}
|
|
6793
6793
|
};
|
|
6794
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
6794
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6795
6795
|
var style = _a.style;
|
|
6796
6796
|
return style.width;
|
|
6797
6797
|
});
|
|
6798
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
6798
|
+
var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6799
6799
|
var style = _a.style;
|
|
6800
6800
|
return style.width;
|
|
6801
6801
|
});
|
|
6802
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6802
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6803
6803
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6804
|
-
var templateObject_1$
|
|
6804
|
+
var templateObject_1$1z, templateObject_2$1c, templateObject_3$Y, templateObject_4$M, templateObject_5$B, templateObject_6$y, templateObject_7$r, templateObject_8$j;
|
|
6805
6805
|
|
|
6806
6806
|
var ProductItemMobile = function (_a) {
|
|
6807
6807
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
@@ -6876,10 +6876,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6876
6876
|
height: height,
|
|
6877
6877
|
});
|
|
6878
6878
|
});
|
|
6879
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6880
|
-
var Container$11 = newStyled.a(templateObject_2$
|
|
6881
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6882
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6879
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6880
|
+
var Container$11 = newStyled.a(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6881
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6882
|
+
var Title$6 = newStyled.p(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6883
6883
|
var getStylesBySize$b = function (size) {
|
|
6884
6884
|
switch (size) {
|
|
6885
6885
|
case ComponentSize.Medium:
|
|
@@ -6905,12 +6905,12 @@ var getStylesBySize$b = function (size) {
|
|
|
6905
6905
|
};
|
|
6906
6906
|
}
|
|
6907
6907
|
};
|
|
6908
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6908
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6909
6909
|
var style = _a.style;
|
|
6910
6910
|
return style.width;
|
|
6911
6911
|
});
|
|
6912
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
6913
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
6912
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6913
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6914
6914
|
var style = _a.style;
|
|
6915
6915
|
return style.width;
|
|
6916
6916
|
});
|
|
@@ -6965,9 +6965,9 @@ var ProductItemTK = function (_a) {
|
|
|
6965
6965
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6966
6966
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6967
6967
|
};
|
|
6968
|
-
var templateObject_1$
|
|
6968
|
+
var templateObject_1$1y, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$A, templateObject_6$x, templateObject_7$q, templateObject_8$i;
|
|
6969
6969
|
|
|
6970
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6970
|
+
var Container$10 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6971
6971
|
function withProductGrid(ProductItemComponent, data) {
|
|
6972
6972
|
function WithProductGrid(props) {
|
|
6973
6973
|
return (jsx$1(Container$10, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6977,7 +6977,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6977
6977
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6978
6978
|
return WithProductGrid;
|
|
6979
6979
|
}
|
|
6980
|
-
var templateObject_1$
|
|
6980
|
+
var templateObject_1$1x;
|
|
6981
6981
|
|
|
6982
6982
|
var Collection = {
|
|
6983
6983
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6985,11 +6985,11 @@ var Collection = {
|
|
|
6985
6985
|
ProductItemTK: ProductItemTK,
|
|
6986
6986
|
};
|
|
6987
6987
|
|
|
6988
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6989
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6990
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6991
|
-
var Span = newStyled.span(templateObject_4$
|
|
6992
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6988
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6989
|
+
newStyled(lt.Label)(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6990
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6991
|
+
var Span = newStyled.span(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6992
|
+
var OptionsContainer = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6993
6993
|
var Label$5 = function (_a) {
|
|
6994
6994
|
var label = _a.label, values = _a.values;
|
|
6995
6995
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7007,7 +7007,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7007
7007
|
Option: Option,
|
|
7008
7008
|
OptionsContainer: OptionsContainer,
|
|
7009
7009
|
});
|
|
7010
|
-
var templateObject_1$
|
|
7010
|
+
var templateObject_1$1w, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$z;
|
|
7011
7011
|
|
|
7012
7012
|
var OneColorSelector = function (_a) {
|
|
7013
7013
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7048,21 +7048,21 @@ var OutOfStock = function (_a) {
|
|
|
7048
7048
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7049
7049
|
};
|
|
7050
7050
|
|
|
7051
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
7051
|
+
var Container$$ = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7052
7052
|
var borderColor = _a.borderColor;
|
|
7053
7053
|
return borderColor;
|
|
7054
7054
|
}, function (_a) {
|
|
7055
7055
|
var noStock = _a.noStock;
|
|
7056
7056
|
return (noStock ? '0.4' : '1');
|
|
7057
7057
|
});
|
|
7058
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7058
|
+
var Image$2 = newStyled.img(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7059
7059
|
var PatternSelector = function (_a) {
|
|
7060
7060
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7061
7061
|
var theme = useTheme();
|
|
7062
7062
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7063
7063
|
return (jsx$1(Container$$, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7064
7064
|
};
|
|
7065
|
-
var templateObject_1$
|
|
7065
|
+
var templateObject_1$1v, templateObject_2$19;
|
|
7066
7066
|
|
|
7067
7067
|
var renderOptions$1 = function (options, showCross) {
|
|
7068
7068
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7089,10 +7089,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7089
7089
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7090
7090
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7091
7091
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7092
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7092
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7093
7093
|
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7094
7094
|
};
|
|
7095
|
-
var templateObject_1$
|
|
7095
|
+
var templateObject_1$1u;
|
|
7096
7096
|
|
|
7097
7097
|
var renderOptions = function (selectedColor, options) {
|
|
7098
7098
|
if (options == null || options.length === 0) {
|
|
@@ -7130,21 +7130,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7130
7130
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7131
7131
|
};
|
|
7132
7132
|
|
|
7133
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7134
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7135
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7133
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7134
|
+
var Col$1 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7135
|
+
var Row$2 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"])), function (props) {
|
|
7136
7136
|
return props.rightToLeft &&
|
|
7137
7137
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7138
7138
|
});
|
|
7139
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7140
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7141
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7139
|
+
var H5 = newStyled.h5(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7140
|
+
var H3$1 = newStyled.h3(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7141
|
+
var FreeShipping = newStyled.span(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7142
7142
|
var CrossSellCheckbox = function (_a) {
|
|
7143
7143
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7144
7144
|
var theme = useTheme();
|
|
7145
7145
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7146
7146
|
};
|
|
7147
|
-
var templateObject_1$
|
|
7147
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$V, templateObject_4$J, templateObject_5$y, templateObject_6$w;
|
|
7148
7148
|
|
|
7149
7149
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7150
7150
|
__proto__: null,
|
|
@@ -7172,7 +7172,7 @@ var sizeMapper = (_a = {},
|
|
|
7172
7172
|
_a[ComponentSize.Large] = 'large',
|
|
7173
7173
|
_a[ComponentSize.XSmall] = 'small',
|
|
7174
7174
|
_a);
|
|
7175
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7175
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7176
7176
|
var wide = _a.wide;
|
|
7177
7177
|
return (wide ? '100%' : 'fit-content');
|
|
7178
7178
|
}, function (_a) {
|
|
@@ -7194,11 +7194,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1r || (templateObj
|
|
|
7194
7194
|
var theme = _a.theme;
|
|
7195
7195
|
return theme.colors.text.disabled;
|
|
7196
7196
|
});
|
|
7197
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7197
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7198
7198
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7199
7199
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7200
7200
|
});
|
|
7201
|
-
var templateObject_1$
|
|
7201
|
+
var templateObject_1$1s, templateObject_2$17;
|
|
7202
7202
|
|
|
7203
7203
|
var BaseCTA = function (_a) {
|
|
7204
7204
|
var _b, _c, _d;
|
|
@@ -7285,44 +7285,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7285
7285
|
} }), void 0));
|
|
7286
7286
|
};
|
|
7287
7287
|
|
|
7288
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
7289
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7290
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7291
|
-
var Details = newStyled.span(templateObject_4$
|
|
7288
|
+
var Container$_ = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7289
|
+
var IconContainer$5 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7290
|
+
var Text$3 = newStyled.p(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7291
|
+
var Details = newStyled.span(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7292
7292
|
var Note = function (_a) {
|
|
7293
7293
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7294
7294
|
var theme = useTheme();
|
|
7295
7295
|
return (jsxs$1(Container$_, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7296
7296
|
};
|
|
7297
|
-
var templateObject_1$
|
|
7297
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$U, templateObject_4$I;
|
|
7298
7298
|
|
|
7299
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7299
|
+
var Title$5 = newStyled.h1(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7300
7300
|
var theme = _a.theme;
|
|
7301
7301
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7302
7302
|
});
|
|
7303
|
-
var Line = newStyled.div(templateObject_2$
|
|
7304
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7303
|
+
var Line = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7304
|
+
var Row$1 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7305
7305
|
flexDirection: ['column', 'row'],
|
|
7306
7306
|
}));
|
|
7307
|
-
var Col = newStyled.div(templateObject_4$
|
|
7307
|
+
var Col = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7308
7308
|
margin: ['0', '0 1.25rem'],
|
|
7309
7309
|
marginBottom: ['1.875rem', '0'],
|
|
7310
7310
|
alignItems: ['center', 'flex-start'],
|
|
7311
7311
|
textAlign: ['center', 'inherit'],
|
|
7312
7312
|
width: ['100%', 'inherit'],
|
|
7313
7313
|
}));
|
|
7314
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7314
|
+
var IconContainer$4 = newStyled.div(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7315
7315
|
marginRight: ['0', '0.438rem'],
|
|
7316
7316
|
marginBottom: ['10px', '0'],
|
|
7317
7317
|
width: ['auto', '1.5rem'],
|
|
7318
7318
|
}));
|
|
7319
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7319
|
+
var SectionTitle = newStyled.h1(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7320
7320
|
display: ['block', 'flex'],
|
|
7321
7321
|
}), function (_a) {
|
|
7322
7322
|
var theme = _a.theme;
|
|
7323
7323
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7324
7324
|
});
|
|
7325
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7325
|
+
var SectionDetails = newStyled.p(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7326
7326
|
var theme = _a.theme;
|
|
7327
7327
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7328
7328
|
}, function (_a) {
|
|
@@ -7339,16 +7339,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7339
7339
|
var theme = useTheme();
|
|
7340
7340
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7341
7341
|
};
|
|
7342
|
-
var templateObject_1$
|
|
7342
|
+
var templateObject_1$1q, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$x, templateObject_6$v, templateObject_7$p, templateObject_8$h;
|
|
7343
7343
|
|
|
7344
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7344
|
+
var Backdrop = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7345
7345
|
var top = _a.top;
|
|
7346
7346
|
return top;
|
|
7347
7347
|
}, function (_a) {
|
|
7348
7348
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7349
7349
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7350
7350
|
});
|
|
7351
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7351
|
+
var Sidebar = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7352
7352
|
var height = _a.height;
|
|
7353
7353
|
return height;
|
|
7354
7354
|
}, function (_a) {
|
|
@@ -7395,20 +7395,20 @@ var Drawer = function (_a) {
|
|
|
7395
7395
|
}, [isOpen, onClose, onOpen]);
|
|
7396
7396
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7397
7397
|
};
|
|
7398
|
-
var templateObject_1$
|
|
7398
|
+
var templateObject_1$1p, templateObject_2$14;
|
|
7399
7399
|
|
|
7400
7400
|
var TooltipArrow = function (_a) {
|
|
7401
7401
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7402
7402
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7403
7403
|
};
|
|
7404
7404
|
|
|
7405
|
-
var List = newStyled.ul(templateObject_1$
|
|
7406
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7407
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7408
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7409
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7410
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7411
|
-
var templateObject_1$
|
|
7405
|
+
var List = newStyled.ul(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7406
|
+
var Item$2 = newStyled.li(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7407
|
+
var DropdownWrapper = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7408
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7409
|
+
var StyledDropdown = newStyled.ul(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7410
|
+
var DropdownItem = newStyled.li(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7411
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$u;
|
|
7412
7412
|
|
|
7413
7413
|
var DropdownListIcons = function (_a) {
|
|
7414
7414
|
var items = _a.items;
|
|
@@ -7421,13 +7421,13 @@ var Dropdown = function (_a) {
|
|
|
7421
7421
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7422
7422
|
};
|
|
7423
7423
|
|
|
7424
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7425
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7426
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7427
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7428
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7429
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7430
|
-
var templateObject_1$
|
|
7424
|
+
var DropdownContainer = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
7425
|
+
var DropdownLabel = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7426
|
+
var SizeLabel = newStyled.span(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7427
|
+
var DetailLabel = newStyled.span(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7428
|
+
var DropdownOptions = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7429
|
+
var DropdownOption = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7430
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$t;
|
|
7431
7431
|
|
|
7432
7432
|
var SizeDropdown = function (_a) {
|
|
7433
7433
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7450,10 +7450,10 @@ var SizeDropdown = function (_a) {
|
|
|
7450
7450
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7451
7451
|
};
|
|
7452
7452
|
|
|
7453
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7454
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7455
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7456
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7453
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7454
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7455
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7456
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7457
7457
|
var DropdownDialog = function (_a) {
|
|
7458
7458
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7459
7459
|
var theme = useTheme$1();
|
|
@@ -7462,7 +7462,7 @@ var DropdownDialog = function (_a) {
|
|
|
7462
7462
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7463
7463
|
}) }), void 0) }), void 0));
|
|
7464
7464
|
};
|
|
7465
|
-
var templateObject_1$
|
|
7465
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$Q, templateObject_4$E;
|
|
7466
7466
|
|
|
7467
7467
|
function FilteringDropdown(_a) {
|
|
7468
7468
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7495,29 +7495,29 @@ function FilteringDropdown(_a) {
|
|
|
7495
7495
|
}) }, void 0)] }), void 0));
|
|
7496
7496
|
}
|
|
7497
7497
|
|
|
7498
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7499
|
-
var H3 = newStyled.h3(templateObject_2
|
|
7500
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7501
|
-
var Container$Z = newStyled.div(templateObject_4$
|
|
7498
|
+
var Title$4 = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
7499
|
+
var H3 = newStyled.h3(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
7500
|
+
var ArrowContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7501
|
+
var Container$Z = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7502
7502
|
var Accordion = function (_a) {
|
|
7503
7503
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7504
7504
|
var theme = useTheme();
|
|
7505
7505
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7506
7506
|
return (jsxs$1(Container$Z, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7507
7507
|
};
|
|
7508
|
-
var templateObject_1$
|
|
7509
|
-
|
|
7510
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7511
|
-
var Header$3 = newStyled.div(templateObject_2
|
|
7512
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7513
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7514
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7515
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7516
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7508
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
7509
|
+
|
|
7510
|
+
var SectionContent = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
7511
|
+
var Header$3 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7512
|
+
var MobileHeader = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7513
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7514
|
+
var H4 = newStyled.h4(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7515
|
+
var FilterLink = newStyled.a(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7516
|
+
var OptionContainer = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7517
7517
|
var ClearAll = newStyled.span(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7518
7518
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7519
7519
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7520
|
-
var templateObject_1$
|
|
7520
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C, templateObject_5$u, templateObject_6$s, templateObject_7$o, templateObject_8$g, templateObject_9$a, templateObject_10$9;
|
|
7521
7521
|
|
|
7522
7522
|
var getStylesBySize$a = function (size, theme) {
|
|
7523
7523
|
switch (size) {
|
|
@@ -7582,9 +7582,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7582
7582
|
} }), id: id }, void 0));
|
|
7583
7583
|
};
|
|
7584
7584
|
|
|
7585
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7586
|
-
var LI = newStyled.li(templateObject_2$
|
|
7587
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7585
|
+
var UL = newStyled.ul(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
7586
|
+
var LI = newStyled.li(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7587
|
+
var CloseIconContainer = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7588
7588
|
var Tags = function (_a) {
|
|
7589
7589
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7590
7590
|
var theme = useTheme();
|
|
@@ -7592,7 +7592,7 @@ var Tags = function (_a) {
|
|
|
7592
7592
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7593
7593
|
}) }), void 0));
|
|
7594
7594
|
};
|
|
7595
|
-
var templateObject_1$
|
|
7595
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N;
|
|
7596
7596
|
|
|
7597
7597
|
var Filters = function (_a) {
|
|
7598
7598
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7728,8 +7728,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7728
7728
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7729
7729
|
};
|
|
7730
7730
|
|
|
7731
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7732
|
-
var Container$Y = newStyled.div(templateObject_2$
|
|
7731
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7732
|
+
var Container$Y = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7733
7733
|
var FitGuarantee = function (_a) {
|
|
7734
7734
|
var _b;
|
|
7735
7735
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7747,10 +7747,10 @@ var FitGuarantee = function (_a) {
|
|
|
7747
7747
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7748
7748
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7749
7749
|
};
|
|
7750
|
-
var templateObject_1$
|
|
7750
|
+
var templateObject_1$1i, templateObject_2$Z;
|
|
7751
7751
|
|
|
7752
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
7753
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7752
|
+
var Container$X = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7753
|
+
var P$2 = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7754
7754
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7755
7755
|
border: 'none',
|
|
7756
7756
|
background: 'transparent',
|
|
@@ -7765,7 +7765,7 @@ var FitPredictor = function (_a) {
|
|
|
7765
7765
|
var theme = useTheme();
|
|
7766
7766
|
return (jsxs(Container$X, __assign$1({ theme: theme }, { children: [jsx(Container$X, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7767
7767
|
};
|
|
7768
|
-
var templateObject_1$
|
|
7768
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7769
7769
|
|
|
7770
7770
|
var Button$8 = newStyled.button(function () { return ({
|
|
7771
7771
|
background: 'transparent',
|
|
@@ -12009,14 +12009,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12009
12009
|
return Slider;
|
|
12010
12010
|
}(React__default.Component);
|
|
12011
12011
|
|
|
12012
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12012
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12013
12013
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12014
12014
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12015
12015
|
}, function (_a) {
|
|
12016
12016
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12017
12017
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12018
12018
|
});
|
|
12019
|
-
var templateObject_1$
|
|
12019
|
+
var templateObject_1$1g;
|
|
12020
12020
|
|
|
12021
12021
|
var getStylesBySize$9 = function (size) {
|
|
12022
12022
|
// rem units
|
|
@@ -12075,7 +12075,7 @@ var SliderNavigation = function (_a) {
|
|
|
12075
12075
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12076
12076
|
};
|
|
12077
12077
|
|
|
12078
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12078
|
+
var Image$1 = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
12079
12079
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12080
12080
|
return borderRadiusVariant &&
|
|
12081
12081
|
"\n border-radius: 20px;\n ";
|
|
@@ -12093,7 +12093,7 @@ var Image$1 = newStyled.img(templateObject_1$1e || (templateObject_1$1e = __make
|
|
|
12093
12093
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12094
12094
|
: 'inherit';
|
|
12095
12095
|
});
|
|
12096
|
-
var templateObject_1$
|
|
12096
|
+
var templateObject_1$1f;
|
|
12097
12097
|
|
|
12098
12098
|
var ImageSmallPreview = function (_a) {
|
|
12099
12099
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12101,9 +12101,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12101
12101
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12102
12102
|
};
|
|
12103
12103
|
|
|
12104
|
-
var horizontalStyles = css(templateObject_1$
|
|
12105
|
-
var verticalStyles = css(templateObject_2$
|
|
12106
|
-
var Container$W = newStyled.div(templateObject_3$
|
|
12104
|
+
var horizontalStyles = css(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12105
|
+
var verticalStyles = css(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12106
|
+
var Container$W = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12107
12107
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12108
12108
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12109
12109
|
}, function (_a) {
|
|
@@ -12114,12 +12114,12 @@ var Container$W = newStyled.div(templateObject_3$L || (templateObject_3$L = __ma
|
|
|
12114
12114
|
return hasOverflowArrows &&
|
|
12115
12115
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12116
12116
|
});
|
|
12117
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12118
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12119
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12120
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12117
|
+
var Button$7 = newStyled.button(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12118
|
+
var ArrowsContainer = newStyled.div(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12119
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12120
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12121
12121
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12122
|
-
var templateObject_1$
|
|
12122
|
+
var templateObject_1$1e, templateObject_2$X, templateObject_3$M, templateObject_4$B, templateObject_5$t, templateObject_6$r, templateObject_7$n, templateObject_8$f;
|
|
12123
12123
|
|
|
12124
12124
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12125
12125
|
var loading = 'eager';
|
|
@@ -12156,22 +12156,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12156
12156
|
})) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12157
12157
|
};
|
|
12158
12158
|
|
|
12159
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12160
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12161
|
-
var templateObject_1$
|
|
12159
|
+
var ProgressContainer = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12160
|
+
var ProgressFiller = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
12161
|
+
var templateObject_1$1d, templateObject_2$W;
|
|
12162
12162
|
|
|
12163
12163
|
var ProgressBar$1 = function (_a) {
|
|
12164
12164
|
var progress = _a.progress, hide = _a.hide;
|
|
12165
12165
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12166
12166
|
};
|
|
12167
12167
|
|
|
12168
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
12169
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12170
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12171
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12172
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12173
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12174
|
-
var templateObject_1$
|
|
12168
|
+
var Container$V = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12169
|
+
var HTMLVideo = newStyled.video(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12170
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
12171
|
+
var PlayContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12172
|
+
var PauseContainer = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
12173
|
+
var MuteButton = newStyled.button(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
12174
|
+
var templateObject_1$1c, templateObject_2$V, templateObject_3$L, templateObject_4$A, templateObject_5$s, templateObject_6$q;
|
|
12175
12175
|
|
|
12176
12176
|
var Video$1 = function (_a) {
|
|
12177
12177
|
var _b, _c, _d, _e;
|
|
@@ -13815,32 +13815,32 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13815
13815
|
afterZoomOut: PropTypes.func
|
|
13816
13816
|
} : {};
|
|
13817
13817
|
|
|
13818
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
13818
|
+
var Container$U = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13819
13819
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13820
13820
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13821
13821
|
});
|
|
13822
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
13822
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13823
13823
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13824
13824
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13825
13825
|
}, function (_a) {
|
|
13826
13826
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13827
13827
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13828
13828
|
});
|
|
13829
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
13829
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13830
13830
|
var isCTAHidden = _a.isCTAHidden;
|
|
13831
13831
|
return (isCTAHidden ? '60px' : '120px');
|
|
13832
13832
|
});
|
|
13833
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_4$
|
|
13834
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13835
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13833
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13834
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13835
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13836
13836
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13837
13837
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13838
13838
|
});
|
|
13839
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13839
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13840
13840
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13841
13841
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13842
13842
|
});
|
|
13843
|
-
var templateObject_1$
|
|
13843
|
+
var templateObject_1$1b, templateObject_2$U, templateObject_3$K, templateObject_4$z, templateObject_5$r, templateObject_6$p, templateObject_7$m;
|
|
13844
13844
|
|
|
13845
13845
|
var ImageProductSlide$1 = function (_a) {
|
|
13846
13846
|
var _b;
|
|
@@ -13855,8 +13855,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13855
13855
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13856
13856
|
};
|
|
13857
13857
|
|
|
13858
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
13859
|
-
var templateObject_1$
|
|
13858
|
+
var Container$T = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13859
|
+
var templateObject_1$1a;
|
|
13860
13860
|
|
|
13861
13861
|
var getInitialIndex = function (images, selectedValue) {
|
|
13862
13862
|
if (selectedValue) {
|
|
@@ -13904,7 +13904,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13904
13904
|
};
|
|
13905
13905
|
}
|
|
13906
13906
|
};
|
|
13907
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
13907
|
+
var Container$S = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13908
13908
|
var backgroundColor = _a.backgroundColor;
|
|
13909
13909
|
return backgroundColor;
|
|
13910
13910
|
}, function (_a) {
|
|
@@ -13934,9 +13934,9 @@ var IconButton = function (_a) {
|
|
|
13934
13934
|
var theme = useTheme();
|
|
13935
13935
|
return (jsx$1(Container$S, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13936
13936
|
};
|
|
13937
|
-
var templateObject_1$
|
|
13937
|
+
var templateObject_1$19;
|
|
13938
13938
|
|
|
13939
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13939
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13940
13940
|
var AmazonButton = function (_a) {
|
|
13941
13941
|
var onClick = _a.onClick;
|
|
13942
13942
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13945,7 +13945,7 @@ var PaypalButton = function (_a) {
|
|
|
13945
13945
|
var onClick = _a.onClick;
|
|
13946
13946
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13947
13947
|
};
|
|
13948
|
-
var templateObject_1$
|
|
13948
|
+
var templateObject_1$18;
|
|
13949
13949
|
|
|
13950
13950
|
var Container$R = newStyled.div(function (props) { return ({
|
|
13951
13951
|
height: 'auto',
|
|
@@ -14000,9 +14000,9 @@ var IconsWithTitle = function (_a) {
|
|
|
14000
14000
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$R, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14001
14001
|
};
|
|
14002
14002
|
|
|
14003
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
14004
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14005
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14003
|
+
var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14004
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14005
|
+
var StyledTitle = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14006
14006
|
var titlePosition = _a.titlePosition;
|
|
14007
14007
|
return titlePosition == 'center' &&
|
|
14008
14008
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14012,13 +14012,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14012
14012
|
var isMobile = useWindowDimensions().isMobile;
|
|
14013
14013
|
return (jsxs$1(Container$Q, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14014
14014
|
};
|
|
14015
|
-
var templateObject_1$
|
|
14015
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$J;
|
|
14016
14016
|
|
|
14017
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14017
|
+
var Label$4 = newStyled.span(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14018
14018
|
var color = _a.color;
|
|
14019
14019
|
return color;
|
|
14020
14020
|
});
|
|
14021
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14021
|
+
var MandatoryIcon = newStyled.span(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14022
14022
|
var color = _a.color;
|
|
14023
14023
|
return color;
|
|
14024
14024
|
});
|
|
@@ -14027,7 +14027,7 @@ var InputLabel = function (_a) {
|
|
|
14027
14027
|
var theme = useTheme();
|
|
14028
14028
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14029
14029
|
};
|
|
14030
|
-
var templateObject_1$
|
|
14030
|
+
var templateObject_1$16, templateObject_2$S;
|
|
14031
14031
|
|
|
14032
14032
|
var containerByStatus = function (theme, status) {
|
|
14033
14033
|
if (status === InputValidationType.Valid)
|
|
@@ -14036,12 +14036,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14036
14036
|
return theme.colors.semantic.urgent.color;
|
|
14037
14037
|
return '';
|
|
14038
14038
|
};
|
|
14039
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
14039
|
+
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14040
14040
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14041
14041
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14042
14042
|
});
|
|
14043
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14044
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14043
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14044
|
+
var StyledInput = newStyled.input(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14045
14045
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14046
14046
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14047
14047
|
}, function (_a) {
|
|
@@ -14096,11 +14096,11 @@ var StyledInput = newStyled.input(templateObject_3$H || (templateObject_3$H = __
|
|
|
14096
14096
|
return hasValue &&
|
|
14097
14097
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14098
14098
|
});
|
|
14099
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14099
|
+
var InputWrapper = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14100
14100
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14101
14101
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14102
14102
|
});
|
|
14103
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14103
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14104
14104
|
var theme = _a.theme;
|
|
14105
14105
|
return theme.component.input.placeholderColor;
|
|
14106
14106
|
}, function (_a) {
|
|
@@ -14113,8 +14113,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5
|
|
|
14113
14113
|
var theme = _a.theme;
|
|
14114
14114
|
return theme.component.input.lineHeight;
|
|
14115
14115
|
});
|
|
14116
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14117
|
-
var templateObject_1$
|
|
14116
|
+
var ClearInput = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14117
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$I, templateObject_4$y, templateObject_5$q, templateObject_6$o;
|
|
14118
14118
|
|
|
14119
14119
|
var BaseInput = function (_a) {
|
|
14120
14120
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -14158,11 +14158,11 @@ var Button$6 = function (_a) {
|
|
|
14158
14158
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14159
14159
|
};
|
|
14160
14160
|
|
|
14161
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
14161
|
+
var Container$O = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14162
14162
|
var theme = _a.theme;
|
|
14163
14163
|
return theme.component.inputCustom.input.borderRadius;
|
|
14164
14164
|
});
|
|
14165
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14165
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14166
14166
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14167
14167
|
return defaultRounded
|
|
14168
14168
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14179,21 +14179,21 @@ var Custom = function (_a) {
|
|
|
14179
14179
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14180
14180
|
return (jsx$1(Container$O, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14181
14181
|
};
|
|
14182
|
-
var templateObject_1$
|
|
14182
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14183
14183
|
|
|
14184
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14184
|
+
var SuccessContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14185
14185
|
var size = _a.size;
|
|
14186
14186
|
return (size === 'small' ? '36px' : '');
|
|
14187
14187
|
});
|
|
14188
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14189
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14188
|
+
var SuccessMessage = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14189
|
+
var SuccessText = newStyled.span(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14190
14190
|
var Success = function (_a) {
|
|
14191
14191
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14192
14192
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14193
14193
|
};
|
|
14194
|
-
var templateObject_1$
|
|
14194
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$H;
|
|
14195
14195
|
|
|
14196
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14196
|
+
var ButtonContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14197
14197
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14198
14198
|
return status === InputValidationType.Empty &&
|
|
14199
14199
|
type === 'primary' &&
|
|
@@ -14210,16 +14210,16 @@ var BasePlusButton = function (_a) {
|
|
|
14210
14210
|
}
|
|
14211
14211
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14212
14212
|
};
|
|
14213
|
-
var templateObject_1$
|
|
14213
|
+
var templateObject_1$12;
|
|
14214
14214
|
|
|
14215
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
14216
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14215
|
+
var Container$N = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14216
|
+
var IconContainer$3 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14217
14217
|
var BasePlusIcon = function (_a) {
|
|
14218
14218
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14219
14219
|
var theme = useTheme();
|
|
14220
14220
|
return (jsx$1(Container$N, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14221
14221
|
};
|
|
14222
|
-
var templateObject_1$
|
|
14222
|
+
var templateObject_1$11, templateObject_2$O;
|
|
14223
14223
|
|
|
14224
14224
|
var Input$3 = {
|
|
14225
14225
|
Simple: BaseInput,
|
|
@@ -14359,21 +14359,21 @@ var Portal = function (_a) {
|
|
|
14359
14359
|
var visibleStyle = function (_a) {
|
|
14360
14360
|
var opened = _a.opened;
|
|
14361
14361
|
return opened
|
|
14362
|
-
? css(templateObject_1
|
|
14362
|
+
? css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14363
14363
|
};
|
|
14364
14364
|
var transformStyle = function (_a) {
|
|
14365
14365
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14366
14366
|
return opened
|
|
14367
|
-
? css(templateObject_3$
|
|
14367
|
+
? css(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14368
14368
|
};
|
|
14369
|
-
var Container$M = newStyled.div(templateObject_6$
|
|
14369
|
+
var Container$M = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14370
14370
|
var width = _a.width;
|
|
14371
14371
|
return width
|
|
14372
|
-
? css(templateObject_5$
|
|
14372
|
+
? css(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14373
14373
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14374
14374
|
});
|
|
14375
14375
|
}, visibleStyle, transformStyle);
|
|
14376
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14376
|
+
var Overlay = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14377
14377
|
var Modal = function (_a) {
|
|
14378
14378
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14379
14379
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14414,7 +14414,7 @@ var useModal = function (id) {
|
|
|
14414
14414
|
close: close,
|
|
14415
14415
|
}); }, [close, open, opened]);
|
|
14416
14416
|
};
|
|
14417
|
-
var templateObject_1
|
|
14417
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$G, templateObject_4$x, templateObject_5$p, templateObject_6$n, templateObject_7$l;
|
|
14418
14418
|
|
|
14419
14419
|
var htmlReactParser = {exports: {}};
|
|
14420
14420
|
|
|
@@ -18195,7 +18195,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18195
18195
|
HTMLReactParser$1.attributesToProps;
|
|
18196
18196
|
HTMLReactParser$1.Element;
|
|
18197
18197
|
|
|
18198
|
-
var Bar$1 = newStyled.div(templateObject_1
|
|
18198
|
+
var Bar$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18199
18199
|
var height = _a.height;
|
|
18200
18200
|
return height || '0.5rem';
|
|
18201
18201
|
}, function (_a) {
|
|
@@ -18247,7 +18247,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18247
18247
|
background: backgroundColor,
|
|
18248
18248
|
});
|
|
18249
18249
|
});
|
|
18250
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18250
|
+
var MessageContainer = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18251
18251
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18252
18252
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18253
18253
|
};
|
|
@@ -18278,27 +18278,27 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18278
18278
|
};
|
|
18279
18279
|
return (jsxs$1(Container$L, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18280
18280
|
};
|
|
18281
|
-
var templateObject_1
|
|
18281
|
+
var templateObject_1$$, templateObject_2$M;
|
|
18282
18282
|
|
|
18283
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
18283
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18284
18284
|
var theme = _a.theme;
|
|
18285
18285
|
return theme.component.orderBar.backgroundColor;
|
|
18286
18286
|
});
|
|
18287
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18287
|
+
var H1 = newStyled.h1(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18288
18288
|
var OrderBar = function (_a) {
|
|
18289
18289
|
var message = _a.message, color = _a.color;
|
|
18290
18290
|
var theme = useTheme();
|
|
18291
18291
|
return (jsxs$1(Container$K, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18292
18292
|
};
|
|
18293
|
-
var templateObject_1$
|
|
18294
|
-
|
|
18295
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
18296
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18297
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18298
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18299
|
-
var Check = newStyled.div(templateObject_5$
|
|
18300
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18301
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18293
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18294
|
+
|
|
18295
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18296
|
+
var Card$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18297
|
+
var Tag$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18298
|
+
var Label$3 = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18299
|
+
var Check = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18300
|
+
var IconContainer$2 = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18301
|
+
var IconPlaceholder = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18302
18302
|
var DiscountContainer = newStyled.div(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18303
18303
|
var PackSelector = function (_a) {
|
|
18304
18304
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -18329,14 +18329,14 @@ var PackCard = function (_a) {
|
|
|
18329
18329
|
currency: currencyCode || 'USD',
|
|
18330
18330
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18331
18331
|
};
|
|
18332
|
-
var templateObject_1$
|
|
18332
|
+
var templateObject_1$Z, templateObject_2$K, templateObject_3$F, templateObject_4$w, templateObject_5$o, templateObject_6$m, templateObject_7$k, templateObject_8$e;
|
|
18333
18333
|
|
|
18334
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
18335
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18336
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18334
|
+
var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18335
|
+
var IconContainer$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18336
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18337
18337
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18338
18338
|
}));
|
|
18339
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18339
|
+
var PageNumber = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18340
18340
|
var bold = _a.bold;
|
|
18341
18341
|
return (bold ? '700' : '500');
|
|
18342
18342
|
}, function (_a) {
|
|
@@ -18353,7 +18353,7 @@ var PageNumber = newStyled.span(templateObject_4$u || (templateObject_4$u = __ma
|
|
|
18353
18353
|
var background = _a.background;
|
|
18354
18354
|
return background || 'unset';
|
|
18355
18355
|
});
|
|
18356
|
-
var templateObject_1$
|
|
18356
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$E, templateObject_4$v;
|
|
18357
18357
|
|
|
18358
18358
|
var Pagination = function (_a) {
|
|
18359
18359
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18418,7 +18418,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18418
18418
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18419
18419
|
};
|
|
18420
18420
|
|
|
18421
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
18421
|
+
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18422
18422
|
var width = _a.width;
|
|
18423
18423
|
return width;
|
|
18424
18424
|
}, function (_a) {
|
|
@@ -18436,12 +18436,12 @@ var PaymentMethod = function (_a) {
|
|
|
18436
18436
|
var theme = useTheme();
|
|
18437
18437
|
return (jsx$1(Container$H, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18438
18438
|
};
|
|
18439
|
-
var templateObject_1$
|
|
18439
|
+
var templateObject_1$X;
|
|
18440
18440
|
|
|
18441
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
18441
|
+
var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18442
18442
|
var IMAGE_WIDTH = '63px';
|
|
18443
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18444
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18443
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18444
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18445
18445
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18446
18446
|
}), IMAGE_WIDTH);
|
|
18447
18447
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18464,7 +18464,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18464
18464
|
margin: margin,
|
|
18465
18465
|
});
|
|
18466
18466
|
});
|
|
18467
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18467
|
+
var PriceContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18468
18468
|
var withTag = _a.withTag; _a.theme;
|
|
18469
18469
|
return withTag
|
|
18470
18470
|
? mediaQueries({
|
|
@@ -18473,9 +18473,9 @@ var PriceContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = _
|
|
|
18473
18473
|
})
|
|
18474
18474
|
: 'justify-content: end';
|
|
18475
18475
|
});
|
|
18476
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18477
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18478
|
-
var Gift = newStyled.span(templateObject_7$
|
|
18476
|
+
var Quantity = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18477
|
+
var StyledSpan = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18478
|
+
var Gift = newStyled.span(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18479
18479
|
var theme = _a.theme;
|
|
18480
18480
|
return theme.colors.semantic.urgent.color;
|
|
18481
18481
|
});
|
|
@@ -18485,7 +18485,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18485
18485
|
var theme = useTheme();
|
|
18486
18486
|
return (jsxs$1(Container$G, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18487
18487
|
};
|
|
18488
|
-
var templateObject_1$
|
|
18488
|
+
var templateObject_1$W, templateObject_2$I, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j;
|
|
18489
18489
|
|
|
18490
18490
|
var P$1 = newStyled.p(function (_a) {
|
|
18491
18491
|
var color = _a.color;
|
|
@@ -18499,7 +18499,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18499
18499
|
margin: '0.938rem 4.188rem',
|
|
18500
18500
|
});
|
|
18501
18501
|
});
|
|
18502
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18502
|
+
var Bar = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18503
18503
|
var height = _a.height;
|
|
18504
18504
|
return height || '0.5rem';
|
|
18505
18505
|
}, function (_a) {
|
|
@@ -18544,12 +18544,12 @@ var ProgressBar = function (_a) {
|
|
|
18544
18544
|
var theme = useTheme();
|
|
18545
18545
|
return (jsxs$1(Container$F, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18546
18546
|
};
|
|
18547
|
-
var templateObject_1$
|
|
18547
|
+
var templateObject_1$V;
|
|
18548
18548
|
|
|
18549
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
18550
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18551
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18552
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18549
|
+
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18550
|
+
var Item$1 = newStyled.span(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18551
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18552
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18553
18553
|
var QuantityPicker = function (_a) {
|
|
18554
18554
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18555
18555
|
var theme = useTheme();
|
|
@@ -18574,7 +18574,7 @@ var QuantityPicker = function (_a) {
|
|
|
18574
18574
|
}, [value, clamp]);
|
|
18575
18575
|
return (jsxs$1(Container$E, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18576
18576
|
};
|
|
18577
|
-
var templateObject_1$
|
|
18577
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$C, templateObject_4$t;
|
|
18578
18578
|
|
|
18579
18579
|
/* base styles & size variants */
|
|
18580
18580
|
var CustomRadioStyles$1 = {
|
|
@@ -18643,9 +18643,9 @@ var ContainerStyles$1 = {
|
|
|
18643
18643
|
},
|
|
18644
18644
|
};
|
|
18645
18645
|
|
|
18646
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18646
|
+
var Wrapper$3 = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18647
18647
|
var Container$D = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18648
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18648
|
+
var Input$2 = newStyled.input(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18649
18649
|
var disabled = _a.disabled;
|
|
18650
18650
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18651
18651
|
});
|
|
@@ -18653,7 +18653,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18653
18653
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18654
18654
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18655
18655
|
]; });
|
|
18656
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
18656
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
18657
18657
|
var RadioPrimary = function (_a) {
|
|
18658
18658
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
18659
18659
|
var theme = useTheme();
|
|
@@ -18663,7 +18663,7 @@ var RadioPrimary = function (_a) {
|
|
|
18663
18663
|
};
|
|
18664
18664
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18665
18665
|
};
|
|
18666
|
-
var templateObject_1$
|
|
18666
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$B;
|
|
18667
18667
|
|
|
18668
18668
|
var RadioGroupInput = function (_a) {
|
|
18669
18669
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18742,9 +18742,9 @@ var ContainerStyles = {
|
|
|
18742
18742
|
},
|
|
18743
18743
|
};
|
|
18744
18744
|
|
|
18745
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18745
|
+
var Wrapper$2 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18746
18746
|
var Container$C = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18747
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18747
|
+
var Input$1 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18748
18748
|
var disabled = _a.disabled;
|
|
18749
18749
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18750
18750
|
});
|
|
@@ -18752,7 +18752,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18752
18752
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18753
18753
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18754
18754
|
]; });
|
|
18755
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
18755
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
18756
18756
|
var theme = _a.theme;
|
|
18757
18757
|
return theme.component.radio.textSize;
|
|
18758
18758
|
}, function (_a) {
|
|
@@ -18768,7 +18768,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18768
18768
|
};
|
|
18769
18769
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$C, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18770
18770
|
};
|
|
18771
|
-
var templateObject_1$
|
|
18771
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$A;
|
|
18772
18772
|
|
|
18773
18773
|
var ClubRadioGroupInput = function (_a) {
|
|
18774
18774
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18796,13 +18796,13 @@ function formatDate(date, format) {
|
|
|
18796
18796
|
}
|
|
18797
18797
|
}
|
|
18798
18798
|
|
|
18799
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
18800
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18801
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18802
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18803
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
18804
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
18805
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18799
|
+
var Container$B = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18800
|
+
var Content$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18801
|
+
var StarsContent = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18802
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18803
|
+
var DateText$1 = newStyled.span(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
18804
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
18805
|
+
var VerifiedText = newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
18806
18806
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18807
18807
|
var ReviewDescription = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18808
18808
|
var ImageContainer$2 = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
@@ -18837,17 +18837,17 @@ var Review$1 = function (_a) {
|
|
|
18837
18837
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$B, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
18838
18838
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18839
18839
|
};
|
|
18840
|
-
var templateObject_1$
|
|
18840
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$z, templateObject_4$s, templateObject_5$m, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18841
18841
|
|
|
18842
18842
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18843
18843
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18844
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
18845
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18846
|
-
var Content = newStyled.div(templateObject_3$
|
|
18847
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18848
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18849
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
18850
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18844
|
+
var Container$A = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
18845
|
+
var Heading = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18846
|
+
var Content = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18847
|
+
var ReviewContainer = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18848
|
+
var DateText = newStyled.span(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18849
|
+
var VariantText = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18850
|
+
var ReviewerName = newStyled.h2(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
18851
18851
|
var ReviewTitle = newStyled.h3(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18852
18852
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
18853
18853
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
@@ -18893,15 +18893,15 @@ var Review = function (_a) {
|
|
|
18893
18893
|
: description,
|
|
18894
18894
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18895
18895
|
};
|
|
18896
|
-
var templateObject_1$
|
|
18897
|
-
|
|
18898
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
18899
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18900
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18901
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18902
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
18903
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18904
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18896
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$y, templateObject_4$r, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18897
|
+
|
|
18898
|
+
var Container$z = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
18899
|
+
var ReviewsContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18900
|
+
var ReviewsCount = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18901
|
+
var ReviewsStars = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
18902
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
18903
|
+
var ReviewsImages = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
18904
|
+
var SummaryItem = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
18905
18905
|
var backgroundUrl = _a.backgroundUrl;
|
|
18906
18906
|
return "url(".concat(backgroundUrl, ")");
|
|
18907
18907
|
});
|
|
@@ -18911,17 +18911,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18911
18911
|
var theme = useTheme();
|
|
18912
18912
|
return (jsxs$1(Container$z, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18913
18913
|
};
|
|
18914
|
-
var templateObject_1$
|
|
18914
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$x, templateObject_4$q, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
18915
18915
|
|
|
18916
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
18917
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
18916
|
+
var Container$y = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
18917
|
+
var Text$1 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
18918
18918
|
var ScrollToTop = function (_a) {
|
|
18919
18919
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18920
18920
|
var theme = useTheme();
|
|
18921
18921
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18922
18922
|
return (jsxs$1(Container$y, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18923
18923
|
};
|
|
18924
|
-
var templateObject_1$
|
|
18924
|
+
var templateObject_1$O, templateObject_2$B;
|
|
18925
18925
|
|
|
18926
18926
|
var Input = newStyled.input(function (props) { return ({
|
|
18927
18927
|
padding: props.theme.component.input.padding,
|
|
@@ -18952,7 +18952,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18952
18952
|
},
|
|
18953
18953
|
}); });
|
|
18954
18954
|
|
|
18955
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
18955
|
+
var Container$x = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18956
18956
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18957
18957
|
}));
|
|
18958
18958
|
var Description = newStyled.div({
|
|
@@ -18971,7 +18971,7 @@ var ProductItem = function (_a) {
|
|
|
18971
18971
|
var theme = useTheme();
|
|
18972
18972
|
return (jsxs$1(Container$x, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18973
18973
|
};
|
|
18974
|
-
var templateObject_1$
|
|
18974
|
+
var templateObject_1$N;
|
|
18975
18975
|
|
|
18976
18976
|
var Container$w = newStyled.div({
|
|
18977
18977
|
display: 'flex',
|
|
@@ -18987,7 +18987,7 @@ var Ul = newStyled.ul({
|
|
|
18987
18987
|
margin: '0px',
|
|
18988
18988
|
padding: '0px',
|
|
18989
18989
|
});
|
|
18990
|
-
var Li = newStyled.li(templateObject_1$
|
|
18990
|
+
var Li = newStyled.li(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
18991
18991
|
padding: [0, '0rem 1rem'],
|
|
18992
18992
|
borderRadius: [0, '0.5rem'],
|
|
18993
18993
|
}));
|
|
@@ -18999,12 +18999,12 @@ var Anchor = newStyled.a({
|
|
|
18999
18999
|
padding: 0,
|
|
19000
19000
|
textDecoration: 'none',
|
|
19001
19001
|
});
|
|
19002
|
-
var Container$v = newStyled.div(templateObject_2$
|
|
19002
|
+
var Container$v = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19003
19003
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19004
19004
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19005
19005
|
borderRadius: ['0', '0.5rem'],
|
|
19006
19006
|
}));
|
|
19007
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19007
|
+
var Header$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19008
19008
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19009
19009
|
}));
|
|
19010
19010
|
var ResultsPanel = function (_a) {
|
|
@@ -19012,9 +19012,9 @@ var ResultsPanel = function (_a) {
|
|
|
19012
19012
|
var theme = useTheme();
|
|
19013
19013
|
return (jsxs$1(Container$v, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$2, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19014
19014
|
};
|
|
19015
|
-
var templateObject_1$
|
|
19015
|
+
var templateObject_1$M, templateObject_2$A, templateObject_3$w;
|
|
19016
19016
|
|
|
19017
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19017
|
+
var Button$5 = newStyled.button(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
19018
19018
|
right: ['1rem', '7.75rem'],
|
|
19019
19019
|
top: ['0.75rem', '0.75rem'],
|
|
19020
19020
|
}));
|
|
@@ -19023,7 +19023,7 @@ var ClearButton = function (_a) {
|
|
|
19023
19023
|
var theme = useTheme();
|
|
19024
19024
|
return (jsx$1(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19025
19025
|
};
|
|
19026
|
-
var templateObject_1$
|
|
19026
|
+
var templateObject_1$L;
|
|
19027
19027
|
|
|
19028
19028
|
var SearchIconContainer = newStyled.div({
|
|
19029
19029
|
display: 'flex',
|
|
@@ -19033,7 +19033,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19033
19033
|
background: 'white',
|
|
19034
19034
|
alignSelf: 'center',
|
|
19035
19035
|
});
|
|
19036
|
-
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19036
|
+
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19037
19037
|
var SearchControl = function (_a) {
|
|
19038
19038
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19039
19039
|
var theme = useTheme();
|
|
@@ -19049,7 +19049,7 @@ var SearchControl = function (_a) {
|
|
|
19049
19049
|
}
|
|
19050
19050
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19051
19051
|
};
|
|
19052
|
-
var templateObject_1$
|
|
19052
|
+
var templateObject_1$K;
|
|
19053
19053
|
|
|
19054
19054
|
var initialState$1 = { selectedOption: undefined, open: false, term: '' };
|
|
19055
19055
|
var reducer = function (state, action) {
|
|
@@ -19116,20 +19116,20 @@ var SearchBar = function (_a) {
|
|
|
19116
19116
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19117
19117
|
};
|
|
19118
19118
|
|
|
19119
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19120
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19121
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19122
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19123
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19119
|
+
var Container$t = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19120
|
+
var BackArrow = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19121
|
+
var BoldSpan = newStyled.span(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19122
|
+
var NormalSpan = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19123
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19124
19124
|
var SearchNavigation = function (_a) {
|
|
19125
19125
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19126
19126
|
return (jsxs$1(Container$t, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19127
19127
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19128
19128
|
}) }, void 0)] }, void 0));
|
|
19129
19129
|
};
|
|
19130
|
-
var templateObject_1$
|
|
19130
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$v, templateObject_4$p, templateObject_5$j;
|
|
19131
19131
|
|
|
19132
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
19132
|
+
var Container$s = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19133
19133
|
var alignCenter = _a.alignCenter;
|
|
19134
19134
|
return alignCenter &&
|
|
19135
19135
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19139,26 +19139,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19139
19139
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19140
19140
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19141
19141
|
});
|
|
19142
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19143
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19142
|
+
var TitleText = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19143
|
+
var BannerText = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19144
19144
|
var ShortBanner = function (_a) {
|
|
19145
19145
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19146
19146
|
var theme = useTheme();
|
|
19147
19147
|
return (jsxs$1(Container$s, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19148
19148
|
};
|
|
19149
|
-
var templateObject_1$
|
|
19150
|
-
|
|
19151
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19152
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19153
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19154
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19155
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19156
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19157
|
-
var Container$r = newStyled('div')(templateObject_7$
|
|
19149
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$u;
|
|
19150
|
+
|
|
19151
|
+
var TableElement$3 = newStyled.table(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19152
|
+
var TableCell$3 = newStyled.td(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19153
|
+
var TableHead$3 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19154
|
+
var Label$2 = newStyled('div')(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19155
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19156
|
+
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19157
|
+
var Container$r = 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"])));
|
|
19158
19158
|
var LabelText$1 = 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"])));
|
|
19159
19159
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19160
19160
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19161
|
-
var templateObject_1$
|
|
19161
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$t, templateObject_4$o, templateObject_5$i, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$6;
|
|
19162
19162
|
|
|
19163
19163
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19164
19164
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19199,16 +19199,16 @@ var SizeChartTable = function (_a) {
|
|
|
19199
19199
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19200
19200
|
};
|
|
19201
19201
|
|
|
19202
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19203
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19204
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19205
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19202
|
+
var TableElement$2 = newStyled.table(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19203
|
+
var TableCell$2 = newStyled.td(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19204
|
+
var TableHead$2 = newStyled.th(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19205
|
+
var TableRow$2 = newStyled.tr(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19206
19206
|
var SizeTable = function (_a) {
|
|
19207
19207
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19208
19208
|
var theme = useTheme();
|
|
19209
19209
|
return (jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19210
19210
|
};
|
|
19211
|
-
var templateObject_1$
|
|
19211
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$s, templateObject_4$n;
|
|
19212
19212
|
|
|
19213
19213
|
var getStylesBySize$7 = function (size) {
|
|
19214
19214
|
switch (size) {
|
|
@@ -19235,7 +19235,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19235
19235
|
} });
|
|
19236
19236
|
};
|
|
19237
19237
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19238
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19238
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19239
19239
|
};
|
|
19240
19240
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19241
19241
|
if (disabled)
|
|
@@ -19251,23 +19251,23 @@ var TextButton = function (_a) {
|
|
|
19251
19251
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19252
19252
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19253
19253
|
};
|
|
19254
|
-
var templateObject_1$
|
|
19254
|
+
var templateObject_1$F;
|
|
19255
19255
|
|
|
19256
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
19257
|
-
var P = newStyled.p(templateObject_2$
|
|
19258
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19256
|
+
var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19257
|
+
var P = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19258
|
+
var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19259
19259
|
var SizeFitGuide = function (_a) {
|
|
19260
19260
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19261
19261
|
return (jsxs$1(Container$q, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19262
19262
|
};
|
|
19263
|
-
var templateObject_1$
|
|
19263
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$r;
|
|
19264
19264
|
|
|
19265
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19265
|
+
var ButtonsContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19266
19266
|
var inline = _a.inline;
|
|
19267
19267
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19268
19268
|
});
|
|
19269
|
-
var Row = newStyled.div(templateObject_2$
|
|
19270
|
-
var templateObject_1$
|
|
19269
|
+
var Row = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19270
|
+
var templateObject_1$D, templateObject_2$u;
|
|
19271
19271
|
|
|
19272
19272
|
var SizeSelector = function (_a) {
|
|
19273
19273
|
var _b;
|
|
@@ -19289,7 +19289,7 @@ var SizeSelector = function (_a) {
|
|
|
19289
19289
|
}) }), void 0)] }), void 0));
|
|
19290
19290
|
};
|
|
19291
19291
|
|
|
19292
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19292
|
+
var TabContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19293
19293
|
var titleSize = _a.titleSize;
|
|
19294
19294
|
return titleSize;
|
|
19295
19295
|
}, function (_a) {
|
|
@@ -19306,18 +19306,18 @@ var Tab = function (_a) {
|
|
|
19306
19306
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19307
19307
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19308
19308
|
};
|
|
19309
|
-
var templateObject_1$
|
|
19309
|
+
var templateObject_1$C;
|
|
19310
19310
|
|
|
19311
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
19312
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19311
|
+
var Container$p = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19312
|
+
var TabList = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19313
19313
|
var backgroundColor = _a.backgroundColor;
|
|
19314
19314
|
return backgroundColor;
|
|
19315
19315
|
}, function (_a) {
|
|
19316
19316
|
var borderColor = _a.borderColor;
|
|
19317
19317
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19318
19318
|
});
|
|
19319
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19320
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19319
|
+
var TabContent = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19320
|
+
var TabSeparator = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19321
19321
|
var Tabs = function (_a) {
|
|
19322
19322
|
var _b;
|
|
19323
19323
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19328,14 +19328,14 @@ var Tabs = function (_a) {
|
|
|
19328
19328
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19329
19329
|
return (jsxs$1(Container$p, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19330
19330
|
};
|
|
19331
|
-
var templateObject_1$
|
|
19331
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$q, templateObject_4$m;
|
|
19332
19332
|
|
|
19333
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19333
|
+
var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19334
19334
|
var Tag = function (_a) {
|
|
19335
19335
|
var text = _a.text, className = _a.className;
|
|
19336
19336
|
return jsx$1(Container$o, __assign$1({ className: className }, { children: text }), void 0);
|
|
19337
19337
|
};
|
|
19338
|
-
var templateObject_1$
|
|
19338
|
+
var templateObject_1$A;
|
|
19339
19339
|
|
|
19340
19340
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19341
19341
|
switch (size) {
|
|
@@ -19446,9 +19446,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19446
19446
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19447
19447
|
};
|
|
19448
19448
|
|
|
19449
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19450
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19451
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19449
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19450
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19451
|
+
var FullscreenVideo = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19452
19452
|
var ImageVideo = function (_a) {
|
|
19453
19453
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19454
19454
|
var video = useRef(null);
|
|
@@ -19468,12 +19468,12 @@ var ImageVideo = function (_a) {
|
|
|
19468
19468
|
height: '100%',
|
|
19469
19469
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19470
19470
|
};
|
|
19471
|
-
var templateObject_1$
|
|
19471
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$p;
|
|
19472
19472
|
|
|
19473
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19474
|
-
var ContainerMobile = css(templateObject_2$
|
|
19475
|
-
var Container$n = newStyled.div(templateObject_3$
|
|
19476
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19473
|
+
var ContainerDesktop = css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19474
|
+
var ContainerMobile = css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19475
|
+
var Container$n = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19476
|
+
var TextContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19477
19477
|
var TextWithImage = function (_a) {
|
|
19478
19478
|
var _b, _c, _d, _e;
|
|
19479
19479
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19503,25 +19503,25 @@ var TextWithImage = function (_a) {
|
|
|
19503
19503
|
},
|
|
19504
19504
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19505
19505
|
};
|
|
19506
|
-
var templateObject_1$
|
|
19506
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$o, templateObject_4$l;
|
|
19507
19507
|
|
|
19508
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19508
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19509
19509
|
var timerColor = _a.timerColor;
|
|
19510
19510
|
return timerColor || '';
|
|
19511
19511
|
});
|
|
19512
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19512
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
19513
19513
|
var timerColor = _a.timerColor;
|
|
19514
19514
|
return timerColor || '';
|
|
19515
19515
|
});
|
|
19516
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19516
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
19517
19517
|
var theme = _a.theme;
|
|
19518
19518
|
return theme.colors.shades.white.color;
|
|
19519
19519
|
}, function (_a) {
|
|
19520
19520
|
var theme = _a.theme;
|
|
19521
19521
|
return theme.colors.shades.white.color;
|
|
19522
19522
|
});
|
|
19523
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19524
|
-
var templateObject_1$
|
|
19523
|
+
var Unit = newStyled.p(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
19524
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$n, templateObject_4$k;
|
|
19525
19525
|
|
|
19526
19526
|
var HRS = 'HRS';
|
|
19527
19527
|
var MIN = 'MIN';
|
|
@@ -19564,14 +19564,14 @@ var Timer = function (_a) {
|
|
|
19564
19564
|
|
|
19565
19565
|
var slideInAnimation = function (distanceFromTop) {
|
|
19566
19566
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
19567
|
-
return keyframes(templateObject_1$
|
|
19567
|
+
return keyframes(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19568
19568
|
};
|
|
19569
19569
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19570
19570
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
19571
|
-
return keyframes(templateObject_2$
|
|
19571
|
+
return keyframes(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
19572
19572
|
};
|
|
19573
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
19574
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
19573
|
+
var ToastContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
19574
|
+
var ToastContent = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
19575
19575
|
var distanceFromTop = _a.distanceFromTop;
|
|
19576
19576
|
return distanceFromTop || '124px';
|
|
19577
19577
|
}, function (_a) {
|
|
@@ -19584,12 +19584,12 @@ var ToastContent = newStyled.div(templateObject_4$i || (templateObject_4$i = __m
|
|
|
19584
19584
|
var distanceFromTop = _a.distanceFromTop;
|
|
19585
19585
|
return mobileSlideInAnimation(distanceFromTop);
|
|
19586
19586
|
});
|
|
19587
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
19587
|
+
var ToastText = newStyled.p(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
19588
19588
|
var severity = _a.severity;
|
|
19589
19589
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
19590
19590
|
});
|
|
19591
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
19592
|
-
var templateObject_1$
|
|
19591
|
+
var CloseIcon = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
19592
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$m, templateObject_4$j, templateObject_5$h, templateObject_6$g;
|
|
19593
19593
|
|
|
19594
19594
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
19595
19595
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -19609,9 +19609,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
19609
19609
|
});
|
|
19610
19610
|
Toast.displayName = 'Toast';
|
|
19611
19611
|
|
|
19612
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19613
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19614
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19612
|
+
var Wrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19613
|
+
var GrandTotal = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19614
|
+
var Currency = newStyled.span(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19615
19615
|
var theme = _a.theme;
|
|
19616
19616
|
return theme.component.total.basicTotal.currency.color;
|
|
19617
19617
|
}, function (_a) {
|
|
@@ -19624,21 +19624,21 @@ var Currency = newStyled.span(templateObject_3$k || (templateObject_3$k = __make
|
|
|
19624
19624
|
var theme = _a.theme;
|
|
19625
19625
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19626
19626
|
});
|
|
19627
|
-
var Container$m = newStyled.div(templateObject_4$
|
|
19627
|
+
var Container$m = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19628
19628
|
var highlightColor = _a.highlightColor;
|
|
19629
19629
|
return highlightColor;
|
|
19630
19630
|
});
|
|
19631
|
-
var TotalContainer = newStyled(Container$m)(templateObject_5$
|
|
19631
|
+
var TotalContainer = newStyled(Container$m)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19632
19632
|
var showTotalLabel = _a.showTotalLabel;
|
|
19633
19633
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19634
19634
|
});
|
|
19635
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19636
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19635
|
+
var DiscountText = newStyled.h3(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
19636
|
+
var DiscountAmount = newStyled.h3(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
19637
19637
|
var theme = _a.theme;
|
|
19638
19638
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19639
19639
|
});
|
|
19640
19640
|
var TotalLabel = newStyled(Text$7)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19641
|
-
var templateObject_1$
|
|
19641
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$l, templateObject_4$i, templateObject_5$g, templateObject_6$f, templateObject_7$e, templateObject_8$a;
|
|
19642
19642
|
|
|
19643
19643
|
var Total = function (_a) {
|
|
19644
19644
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -19646,19 +19646,19 @@ var Total = function (_a) {
|
|
|
19646
19646
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$m, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19647
19647
|
};
|
|
19648
19648
|
|
|
19649
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19649
|
+
var Wrapper = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19650
19650
|
var color = _a.color;
|
|
19651
19651
|
return color;
|
|
19652
19652
|
});
|
|
19653
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19654
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19653
|
+
var ItemContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
19654
|
+
var Item = newStyled.h4(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19655
19655
|
var theme = _a.theme;
|
|
19656
19656
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19657
19657
|
}, function (_a) {
|
|
19658
19658
|
var theme = _a.theme;
|
|
19659
19659
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19660
19660
|
});
|
|
19661
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19661
|
+
var CouponItem = newStyled(Item)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19662
19662
|
var color = _a.color;
|
|
19663
19663
|
return color;
|
|
19664
19664
|
});
|
|
@@ -19671,26 +19671,26 @@ var Subtotal = function (_a) {
|
|
|
19671
19671
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19672
19672
|
})] }), void 0));
|
|
19673
19673
|
};
|
|
19674
|
-
var templateObject_1$
|
|
19674
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$k, templateObject_4$h;
|
|
19675
19675
|
|
|
19676
19676
|
var Totals = {
|
|
19677
19677
|
Total: Total,
|
|
19678
19678
|
Subtotal: Subtotal,
|
|
19679
19679
|
};
|
|
19680
19680
|
|
|
19681
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19682
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19683
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19684
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19685
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19686
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19681
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19682
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19683
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19684
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19685
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
19686
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
19687
19687
|
return props.finishedTrack
|
|
19688
19688
|
? props.finishedTrackColor
|
|
19689
19689
|
: props.activeTrack
|
|
19690
19690
|
? props.activeTrackColor
|
|
19691
19691
|
: '';
|
|
19692
19692
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19693
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19693
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
19694
19694
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19695
19695
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19696
19696
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -19730,17 +19730,17 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19730
19730
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19731
19731
|
})] }), void 0));
|
|
19732
19732
|
};
|
|
19733
|
-
var templateObject_1$
|
|
19734
|
-
|
|
19735
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19736
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19737
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19738
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19739
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
19740
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
19733
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$e, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
19734
|
+
|
|
19735
|
+
var Container$k = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19736
|
+
var CheckpointContainer = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19737
|
+
var CheckpointDate = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19738
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19739
|
+
var CheckpointStatus = newStyled.p(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
19740
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19741
19741
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19742
19742
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19743
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
19743
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19744
19744
|
var LastCheckpointTrack = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19745
19745
|
var TrackingProgress = function (_a) {
|
|
19746
19746
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
@@ -19770,7 +19770,35 @@ var TrackingProgress = function (_a) {
|
|
|
19770
19770
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19771
19771
|
})] }), void 0));
|
|
19772
19772
|
};
|
|
19773
|
-
var templateObject_1$
|
|
19773
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$8;
|
|
19774
|
+
|
|
19775
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
19776
|
+
var checked = _a.checked;
|
|
19777
|
+
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
19778
|
+
});
|
|
19779
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
19780
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
19781
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
19782
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
19783
|
+
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
19784
|
+
var CheckboxInput = newStyled.input(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
19785
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$c, templateObject_7$b;
|
|
19786
|
+
|
|
19787
|
+
function AutoshipOfferCard(_a) {
|
|
19788
|
+
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
19789
|
+
var _c = useState(true), showMoreBenefits = _c[0], setShowMoreBenefits = _c[1];
|
|
19790
|
+
var _d = useState(isChecked), check = _d[0], setCheck = _d[1];
|
|
19791
|
+
var handleShowMore = function () {
|
|
19792
|
+
setShowMoreBenefits(!showMoreBenefits);
|
|
19793
|
+
};
|
|
19794
|
+
var handleCheckBox = function () {
|
|
19795
|
+
setCheck(!check);
|
|
19796
|
+
if (handleCheckBoxChange) {
|
|
19797
|
+
handleCheckBoxChange(!check);
|
|
19798
|
+
}
|
|
19799
|
+
};
|
|
19800
|
+
return (jsxs$1(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper$1, { children: [jsx$1("div", { children: jsx$1(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsx$1("div", { children: copy }, void 0)] }, void 0), !check && (jsxs$1(AutoShipBodyWrapper$1, { children: [jsxs$1(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem$1, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
19801
|
+
}
|
|
19774
19802
|
|
|
19775
19803
|
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
19776
19804
|
var checked = _a.checked;
|
|
@@ -19785,7 +19813,7 @@ newStyled.input(templateObject_7$a || (templateObject_7$a = __makeTemplateObject
|
|
|
19785
19813
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
19786
19814
|
var templateObject_1$q, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$a, templateObject_8$7;
|
|
19787
19815
|
|
|
19788
|
-
function
|
|
19816
|
+
function AutoshipOfferCardCta(_a) {
|
|
19789
19817
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
19790
19818
|
var _c = useState(true), showMoreBenefits = _c[0], setShowMoreBenefits = _c[1];
|
|
19791
19819
|
var _d = useState(isChecked), check = _d[0], setCheck = _d[1];
|
|
@@ -21709,5 +21737,5 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
21709
21737
|
}, useV2Style: true, checked: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), disabled: radiosStatuses.oneTime.disabled, highlighted: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
21710
21738
|
};
|
|
21711
21739
|
|
|
21712
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21740
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21713
21741
|
//# sourceMappingURL=index.esm.js.map
|