@trafilea/afrodita-components 6.33.4 → 6.34.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 +19 -3
- package/build/index.esm.js +601 -576
- package/build/index.esm.js.map +1 -1
- package/build/index.js +601 -575
- package/build/index.js.map +1 -1
- package/package.json +3 -18
package/build/index.esm.js
CHANGED
|
@@ -3181,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3181
3181
|
};
|
|
3182
3182
|
}
|
|
3183
3183
|
};
|
|
3184
|
-
var Container$1l = newStyled.div(templateObject_1$
|
|
3184
|
+
var Container$1l = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3185
3185
|
var backgroundColor = _a.backgroundColor;
|
|
3186
3186
|
return backgroundColor;
|
|
3187
3187
|
}, function (_a) {
|
|
@@ -3203,7 +3203,7 @@ var Container$1l = newStyled.div(templateObject_1$2f || (templateObject_1$2f = _
|
|
|
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$1C || (templateObject_2$1C = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
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$1l, __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$2g, templateObject_2$1C;
|
|
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$1k = newStyled.div(templateObject_1$
|
|
3254
|
+
var Container$1k = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3255
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3256
3256
|
return backgroundColor;
|
|
3257
3257
|
}, function (_a) {
|
|
@@ -3273,7 +3273,7 @@ var Container$1k = newStyled.div(templateObject_1$2e || (templateObject_1$2e = _
|
|
|
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$1B || (templateObject_2$1B = __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$1k, __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$2f, templateObject_2$1B;
|
|
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$1j = newStyled.div(templateObject_1$
|
|
3403
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1j = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1A || (templateObject_2$1A = __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$1z || (templateObject_2$1z = __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$1d || (templateObject_3$1d = __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$1j, __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$2e, templateObject_2$1A, templateObject_3$1d;
|
|
3461
3461
|
|
|
3462
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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$2d;
|
|
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$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3534
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3535
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1c || (templateObject_3$1c = __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$2c, templateObject_2$1z, templateObject_3$1c;
|
|
3607
3607
|
|
|
3608
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3608
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
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$2b;
|
|
3643
3643
|
|
|
3644
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3644
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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$1j, __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$2a;
|
|
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$29 || (templateObject_1$29 = __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$1y || (templateObject_2$1y = __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$29, templateObject_2$1y;
|
|
3682
3682
|
|
|
3683
3683
|
function ClubPriceMemberLabel(_a) {
|
|
3684
3684
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3687,7 +3687,7 @@ function ClubPriceMemberLabel(_a) {
|
|
|
3687
3687
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3688
3688
|
}
|
|
3689
3689
|
|
|
3690
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3690
|
+
var Container$1i = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __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$1i, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3716
3716
|
};
|
|
3717
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$28;
|
|
3718
3718
|
|
|
3719
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3719
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$27 || (templateObject_1$27 = __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$26 || (templateObject_1$26
|
|
|
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$1x || (templateObject_2$1x = __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$1w || (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$27, templateObject_2$1x;
|
|
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 = newStyled.img(templateObject_1$
|
|
3924
|
+
var Img = newStyled.img(templateObject_1$26 || (templateObject_1$26 = __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, __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$26;
|
|
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$25 || (templateObject_1$25 = __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$1w || (templateObject_2$1w = __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$1b || (templateObject_3$1b = __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$25, templateObject_2$1w, templateObject_3$1b;
|
|
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$24 || (templateObject_1$24 = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
hero2: newStyled.h2(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
hero3: newStyled.h3(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject([""], [""]))),
|
|
4778
|
+
display1: newStyled.h1(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject([""], [""]))),
|
|
4779
|
+
display2: newStyled.h2(templateObject_5$J || (templateObject_5$J = __makeTemplateObject([""], [""]))),
|
|
4780
|
+
display3: newStyled.h3(templateObject_6$E || (templateObject_6$E = __makeTemplateObject([""], [""]))),
|
|
4781
|
+
heading1: newStyled.h1(templateObject_7$u || (templateObject_7$u = __makeTemplateObject([""], [""]))),
|
|
4782
4782
|
heading2: newStyled.h2(templateObject_8$n || (templateObject_8$n = __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$1h = 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$24, templateObject_2$1v, templateObject_3$1a, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$u, templateObject_8$n, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4912
|
+
|
|
4913
|
+
var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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$1u || (templateObject_2$1u = __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$19 || (templateObject_3$19 = __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$X || (templateObject_4$X = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4917
|
+
var Check$1 = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4918
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4919
4919
|
var PackSelectorV2 = function (_a) {
|
|
4920
4920
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4921
4921
|
return (jsx$1(Container$1h, __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$23, templateObject_2$1u, templateObject_3$19, templateObject_4$X, templateObject_5$I, templateObject_6$D;
|
|
4944
4944
|
|
|
4945
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
4946
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4945
|
+
var Container$1g = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __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$1t || (templateObject_2$1t = __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$1g, { 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$22, templateObject_2$1t;
|
|
4954
4954
|
|
|
4955
4955
|
var DROPS_TOTAL = 5;
|
|
4956
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4957
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4958
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4956
|
+
var Container$1f = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4957
|
+
var Title$b = newStyled.p(templateObject_2$1s || (templateObject_2$1s = __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$18 || (templateObject_3$18 = __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$1f, { 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$21, templateObject_2$1s, templateObject_3$18;
|
|
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$20 || (templateObject_1$20 = __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$20;
|
|
5064
5064
|
|
|
5065
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
5065
|
+
var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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$1$;
|
|
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$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5226
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5227
|
+
var templateObject_1$1_, templateObject_2$1r;
|
|
5228
5228
|
|
|
5229
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
5229
|
+
var Container$1d = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __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$1q || (templateObject_2$1q = __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$17 || (templateObject_3$17 = __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$W || (templateObject_4$W = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5239
|
+
var FlexStart = newStyled.div(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5240
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$17, templateObject_4$W, templateObject_5$H;
|
|
5241
5241
|
|
|
5242
5242
|
var CouponCard = function (_a) {
|
|
5243
5243
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -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$1Y || (templateObject_1$1Y = __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$1p || (templateObject_2$1p = __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$1Y, templateObject_2$1p;
|
|
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$1X || (templateObject_1$1X = __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$1X;
|
|
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$1W || (templateObject_1$1W = __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$1W;
|
|
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$1c = newStyled.div(templateObject_1$
|
|
5556
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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$1o || (templateObject_2$1o = __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$1c, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5582
5582
|
};
|
|
5583
|
-
var templateObject_1$
|
|
5583
|
+
var templateObject_1$1V, templateObject_2$1o;
|
|
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$1b = newStyled.div(templateObject_1$
|
|
5633
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5634
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5632
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""])));
|
|
5633
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1n || (templateObject_2$1n = __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$16 || (templateObject_3$16 = __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$1b : 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$1U, templateObject_2$1n, templateObject_3$16;
|
|
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$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5736
5736
|
var Container$1a = 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$1m || (templateObject_2$1m = __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$15 || (templateObject_3$15 = __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$V || (templateObject_4$V = __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$1a, __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$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$V;
|
|
5772
5772
|
|
|
5773
5773
|
var useOnClickOutside = function (ref, handler) {
|
|
5774
5774
|
useEffect(function () {
|
|
@@ -5861,7 +5861,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5861
5861
|
}
|
|
5862
5862
|
};
|
|
5863
5863
|
|
|
5864
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5864
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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$1R || (templateObject_1$1R = __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$1l || (templateObject_2$1l = __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$1k || (templateObject_2$1k
|
|
|
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$14 || (templateObject_3$14 = __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$U || (templateObject_4$U = __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$T || (templateObject_4$T = __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$G || (templateObject_5$G = __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$C || (templateObject_6$C = __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$5 = newStyled.div(templateObject_7$
|
|
5924
|
+
var IconContainer$5 = newStyled.div(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5925
5925
|
var CloseToolTip = newStyled.button(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5926
5926
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5927
5927
|
return right;
|
|
5928
5928
|
});
|
|
5929
|
-
var templateObject_1$
|
|
5929
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$U, templateObject_5$G, templateObject_6$C, templateObject_7$t, templateObject_8$m;
|
|
5930
5930
|
|
|
5931
5931
|
var Tooltip = function (_a) {
|
|
5932
5932
|
var _b;
|
|
@@ -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$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5973
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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$1j || (templateObject_2$1j
|
|
|
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$13 || (templateObject_3$13 = __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$T || (templateObject_4$T = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5992
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5993
5993
|
var theme = _a.theme;
|
|
5994
5994
|
return theme.colors.shades[200].color;
|
|
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$B || (templateObject_6$B = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6000
|
+
var Benefit$3 = newStyled.div(templateObject_7$s || (templateObject_7$s = __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$l || (templateObject_8$l = __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$19 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6010
|
-
var templateObject_1$
|
|
6010
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$s, templateObject_8$l, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6011
6011
|
|
|
6012
6012
|
var radioIds$2 = {
|
|
6013
6013
|
oneTime: {
|
|
@@ -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$1Q || (templateObject_1$1Q = __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$1j || (templateObject_2$1j = __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$12 || (templateObject_3$12 = __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$11 || (templateObject_3$11
|
|
|
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$S || (templateObject_4$S = __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$E || (templateObject_5$E = __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$A || (templateObject_6$A = __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$r || (templateObject_7$r = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6111
6111
|
var Benefit$2 = newStyled.div(templateObject_8$k || (templateObject_8$k = __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$1Q, templateObject_2$1j, templateObject_3$12, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6124
6124
|
|
|
6125
6125
|
var radioIds$1 = {
|
|
6126
6126
|
oneTime: {
|
|
@@ -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$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
6202
|
+
var CustomerInfo = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6203
|
+
var Name = newStyled.h4(templateObject_3$11 || (templateObject_3$11 = __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$R || (templateObject_4$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6205
|
+
var Description$2 = newStyled.p(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6206
|
+
var ReviewDays = newStyled.span(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6207
|
+
var templateObject_1$1P, templateObject_2$1i, templateObject_3$11, templateObject_4$R, templateObject_5$D, templateObject_6$z;
|
|
6208
6208
|
|
|
6209
6209
|
var NameWithStars = function (_a) {
|
|
6210
6210
|
var name = _a.name, size = _a.size;
|
|
@@ -6222,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$17 = 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$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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$1h || (templateObject_2$1h = __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$10 || (templateObject_3$10 = __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$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6229
6229
|
var theme = _a.theme;
|
|
6230
6230
|
return theme.colors.pallete.secondary.color;
|
|
6231
6231
|
}, function (_a) {
|
|
@@ -6235,7 +6235,7 @@ var UserInfoText = newStyled.div(templateObject_4$P || (templateObject_4$P = __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$1O, templateObject_2$1h, templateObject_3$10, templateObject_4$Q;
|
|
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$17, __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$1N || (templateObject_1$1N = __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$1N;
|
|
6328
6328
|
|
|
6329
|
-
var Body = newStyled.div(templateObject_1$
|
|
6329
|
+
var Body = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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$1M;
|
|
6335
6335
|
|
|
6336
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
6336
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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$1L;
|
|
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$1K || (templateObject_1$1K = __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$1g || (templateObject_2$1g = __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$$ || (templateObject_3$$ = __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$P || (templateObject_4$P = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6367
|
+
var templateObject_1$1K, templateObject_2$1g, templateObject_3$$, templateObject_4$P;
|
|
6368
6368
|
|
|
6369
6369
|
var Minimalistic = function (_a) {
|
|
6370
6370
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6372,28 +6372,28 @@ var Minimalistic = function (_a) {
|
|
|
6372
6372
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6373
6373
|
};
|
|
6374
6374
|
|
|
6375
|
-
var Container$15 = 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$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6376
|
+
var Title$9 = newStyled.h1(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6377
|
+
var Details$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6378
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6379
6379
|
var Simple = function (_a) {
|
|
6380
6380
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6381
6381
|
var theme = useTheme();
|
|
6382
6382
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$15, { 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$1J, templateObject_2$1f, templateObject_3$_, templateObject_4$O;
|
|
6385
6385
|
|
|
6386
6386
|
var Bundle = {
|
|
6387
6387
|
Minimalistic: Minimalistic,
|
|
6388
6388
|
Simple: Simple,
|
|
6389
6389
|
};
|
|
6390
6390
|
|
|
6391
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6391
|
+
var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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$1e || (templateObject_2$1e = __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$Z || (templateObject_3$Z = __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$14, __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$1I, templateObject_2$1e, templateObject_3$Z;
|
|
6409
6409
|
|
|
6410
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6410
|
+
var Text$6 = newStyled.span(templateObject_1$1H || (templateObject_1$1H = __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$1H;
|
|
6417
6417
|
|
|
6418
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6418
|
+
var P$3 = newStyled.p(templateObject_1$1G || (templateObject_1$1G = __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$1G;
|
|
6425
6425
|
|
|
6426
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6426
|
+
var Text$5 = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __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$1F;
|
|
6433
6433
|
|
|
6434
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6434
|
+
var Container$13 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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$13, __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$1E;
|
|
6441
6441
|
|
|
6442
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6442
|
+
var Text$4 = newStyled.h3(templateObject_1$1D || (templateObject_1$1D = __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$1D;
|
|
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$12 = newStyled.div(templateObject_1$
|
|
6468
|
-
var MobileContainer = newStyled(Container$12)(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$12 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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$12)(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6469
|
+
var DollarPart = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __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$N || (templateObject_4$N = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6471
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6472
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6473
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6474
6474
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (templateObject_8$j = __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$12, { 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$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$q, templateObject_8$j;
|
|
6481
6481
|
|
|
6482
6482
|
var Spacing = function (_a) {
|
|
6483
6483
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6485,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$11 = 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$11 = newStyled('div')(templateObject_1$1B || (templateObject_1$1B = __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$1c || (templateObject_2$1c = __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$X || (templateObject_3$X = __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$M || (templateObject_4$M = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6492
6492
|
var index = _a.index;
|
|
6493
6493
|
return "".concat(6 + 3 * index, "px");
|
|
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$11, __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$1B, templateObject_2$1c, templateObject_3$X, templateObject_4$M;
|
|
6503
6503
|
|
|
6504
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6505
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6506
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6507
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6508
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6504
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1A || (templateObject_1$1A = __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$1b || (templateObject_2$1b = __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$W || (templateObject_3$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6507
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6508
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6509
6509
|
var RegularPriceTag = function () {
|
|
6510
6510
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
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$1A, templateObject_2$1b, templateObject_3$W, templateObject_4$L, templateObject_5$B;
|
|
6562
6562
|
|
|
6563
6563
|
var STARTS_NUMBER = 5;
|
|
6564
6564
|
|
|
6565
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6566
|
-
var templateObject_1$
|
|
6565
|
+
var Container$10 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6566
|
+
var templateObject_1$1z;
|
|
6567
6567
|
|
|
6568
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6568
|
+
var StarContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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$1y;
|
|
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$$ = newStyled.a(templateObject_1$
|
|
6625
|
+
var Container$$ = newStyled.a(templateObject_1$1x || (templateObject_1$1x = __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$1a || (templateObject_2$1a = __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$1x, templateObject_2$1a;
|
|
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$_ = 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$1w || (templateObject_1$1w = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6741
|
+
var Container$_ = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6742
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6743
|
+
var Title$7 = newStyled.p(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6744
6744
|
var theme = _a.theme;
|
|
6745
6745
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
6746
6746
|
}, function (_a) {
|
|
@@ -6791,17 +6791,17 @@ var getStylesBySize$c = function (size) {
|
|
|
6791
6791
|
};
|
|
6792
6792
|
}
|
|
6793
6793
|
};
|
|
6794
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6794
|
+
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) {
|
|
6795
6795
|
var style = _a.style;
|
|
6796
6796
|
return style.width;
|
|
6797
6797
|
});
|
|
6798
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6798
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$x || (templateObject_6$x = __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$p || (templateObject_7$p = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6803
6803
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6804
|
-
var templateObject_1$
|
|
6804
|
+
var templateObject_1$1w, templateObject_2$19, templateObject_3$V, templateObject_4$K, templateObject_5$A, templateObject_6$x, templateObject_7$p, templateObject_8$i;
|
|
6805
6805
|
|
|
6806
6806
|
var ProductItemMobile = function (_a) {
|
|
6807
6807
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
@@ -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$Z = 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$1v || (templateObject_1$1v = __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$Z = newStyled.a(templateObject_2$18 || (templateObject_2$18 = __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$U || (templateObject_3$U = __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$J || (templateObject_4$J = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6883
6883
|
var getStylesBySize$b = function (size) {
|
|
6884
6884
|
switch (size) {
|
|
6885
6885
|
case ComponentSize.Medium:
|
|
@@ -6905,12 +6905,12 @@ var getStylesBySize$b = function (size) {
|
|
|
6905
6905
|
};
|
|
6906
6906
|
}
|
|
6907
6907
|
};
|
|
6908
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6908
|
+
var TopTagContainer$7 = newStyled.div(templateObject_5$z || (templateObject_5$z = __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$2 = newStyled.div(templateObject_6$
|
|
6913
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6912
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6913
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6914
6914
|
var style = _a.style;
|
|
6915
6915
|
return style.width;
|
|
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$1v, templateObject_2$18, templateObject_3$U, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$o, templateObject_8$h;
|
|
6969
6969
|
|
|
6970
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
6970
|
+
var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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$Y, __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$1u;
|
|
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$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6989
|
+
newStyled(lt.Label)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6990
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$T || (templateObject_3$T = __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$I || (templateObject_4$I = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6992
|
+
var OptionsContainer = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6993
6993
|
var Label$5 = function (_a) {
|
|
6994
6994
|
var label = _a.label, values = _a.values;
|
|
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$1t, templateObject_2$17, templateObject_3$T, templateObject_4$I, templateObject_5$y;
|
|
7011
7011
|
|
|
7012
7012
|
var OneColorSelector = function (_a) {
|
|
7013
7013
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7048,21 +7048,21 @@ var OutOfStock = function (_a) {
|
|
|
7048
7048
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7049
7049
|
};
|
|
7050
7050
|
|
|
7051
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
7051
|
+
var Container$X = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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$16 || (templateObject_2$16 = __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$X, __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$1s, templateObject_2$16;
|
|
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$1r || (templateObject_1$1r = __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$1r;
|
|
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$1q || (templateObject_1$1q = __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$15 || (templateObject_2$15 = __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$S || (templateObject_3$S = __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$H || (templateObject_4$H = __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$x || (templateObject_5$x = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7141
|
+
var FreeShipping = newStyled.span(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7142
7142
|
var CrossSellCheckbox = function (_a) {
|
|
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$1q, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x, templateObject_6$v;
|
|
7148
7148
|
|
|
7149
7149
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7150
7150
|
__proto__: null,
|
|
@@ -7172,7 +7172,7 @@ var sizeMapper = (_a = {},
|
|
|
7172
7172
|
_a[ComponentSize.Large] = 'large',
|
|
7173
7173
|
_a[ComponentSize.XSmall] = 'small',
|
|
7174
7174
|
_a);
|
|
7175
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7175
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1p || (templateObject_1$1p = __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$1o || (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$14 || (templateObject_2$14 = __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$1p, templateObject_2$14;
|
|
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$W = newStyled.div(templateObject_1$
|
|
7289
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7290
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7291
|
-
var Details = newStyled.span(templateObject_4$
|
|
7288
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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$4 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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$R || (templateObject_3$R = __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$G || (templateObject_4$G = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7292
7292
|
var Note = function (_a) {
|
|
7293
7293
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7294
7294
|
var theme = useTheme();
|
|
7295
7295
|
return (jsxs$1(Container$W, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { 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$1o, templateObject_2$13, templateObject_3$R, templateObject_4$G;
|
|
7298
7298
|
|
|
7299
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7299
|
+
var Title$5 = newStyled.h1(templateObject_1$1n || (templateObject_1$1n = __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$12 || (templateObject_2$12 = __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$Q || (templateObject_3$Q = __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$F || (templateObject_4$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
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$3 = newStyled.div(templateObject_5$
|
|
7314
|
+
var IconContainer$3 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7315
7315
|
marginRight: ['0', '0.438rem'],
|
|
7316
7316
|
marginBottom: ['10px', '0'],
|
|
7317
7317
|
width: ['auto', '1.5rem'],
|
|
7318
7318
|
}));
|
|
7319
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7319
|
+
var SectionTitle = newStyled.h1(templateObject_6$u || (templateObject_6$u = __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$n || (templateObject_7$n = __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$3, __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$3, __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$3, __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$1n, templateObject_2$12, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$u, templateObject_7$n, templateObject_8$g;
|
|
7343
7343
|
|
|
7344
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7344
|
+
var Backdrop = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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$11 || (templateObject_2$11 = __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$1m, templateObject_2$11;
|
|
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$1l || (templateObject_1$1l = __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$10 || (templateObject_2$10 = __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$P || (templateObject_3$P = __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$E || (templateObject_4$E = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7409
|
+
var StyledDropdown = newStyled.ul(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7410
|
+
var DropdownItem = newStyled.li(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7411
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$E, templateObject_5$v, templateObject_6$t;
|
|
7412
7412
|
|
|
7413
7413
|
var DropdownListIcons = function (_a) {
|
|
7414
7414
|
var items = _a.items;
|
|
@@ -7421,13 +7421,13 @@ var Dropdown = function (_a) {
|
|
|
7421
7421
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7422
7422
|
};
|
|
7423
7423
|
|
|
7424
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7425
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
7426
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
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$1k || (templateObject_1$1k = __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$$ || (templateObject_2$$ = __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$O || (templateObject_3$O = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7427
|
+
var DetailLabel = newStyled.span(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7428
|
+
var DropdownOptions = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7429
|
+
var DropdownOption = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7430
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$D, templateObject_5$u, templateObject_6$s;
|
|
7431
7431
|
|
|
7432
7432
|
var SizeDropdown = function (_a) {
|
|
7433
7433
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7450,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$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7454
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7455
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$N || (templateObject_3$N = __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$C || (templateObject_4$C = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7457
7457
|
var DropdownDialog = function (_a) {
|
|
7458
7458
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
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$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C;
|
|
7466
7466
|
|
|
7467
7467
|
function FilteringDropdown(_a) {
|
|
7468
7468
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7495,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$V = newStyled.div(templateObject_4$
|
|
7498
|
+
var Title$4 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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$Z || (templateObject_2$Z = __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$M || (templateObject_3$M = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7501
|
+
var Container$V = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7502
7502
|
var Accordion = function (_a) {
|
|
7503
7503
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7504
7504
|
var theme = useTheme();
|
|
7505
7505
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7506
7506
|
return (jsxs$1(Container$V, __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$2 = 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$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$B;
|
|
7509
|
+
|
|
7510
|
+
var SectionContent = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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$2 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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$L || (templateObject_3$L = __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$A || (templateObject_4$A = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7514
|
+
var H4 = newStyled.h4(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7515
|
+
var FilterLink = newStyled.a(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7516
|
+
var OptionContainer = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7517
7517
|
var ClearAll = newStyled.span(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7518
7518
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7519
7519
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7520
|
-
var templateObject_1$
|
|
7520
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$m, templateObject_8$f, templateObject_9$a, templateObject_10$9;
|
|
7521
7521
|
|
|
7522
7522
|
var getStylesBySize$a = function (size, theme) {
|
|
7523
7523
|
switch (size) {
|
|
@@ -7582,9 +7582,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7582
7582
|
} }), id: id }, void 0));
|
|
7583
7583
|
};
|
|
7584
7584
|
|
|
7585
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7586
|
-
var LI = newStyled.li(templateObject_2$
|
|
7587
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7585
|
+
var UL = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __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$X || (templateObject_2$X = __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$K || (templateObject_3$K = __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$1g, templateObject_2$X, templateObject_3$K;
|
|
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$U = newStyled.div(templateObject_2$
|
|
7731
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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$U = newStyled.div(templateObject_2$W || (templateObject_2$W = __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$1f, templateObject_2$W;
|
|
7751
7751
|
|
|
7752
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
7753
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7752
|
+
var Container$T = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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$V || (templateObject_2$V = __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$T, __assign$1({ theme: theme }, { children: [jsx(Container$T, { 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$1e, templateObject_2$V;
|
|
7769
7769
|
|
|
7770
7770
|
var Button$7 = newStyled.button(function () { return ({
|
|
7771
7771
|
background: 'transparent',
|
|
@@ -12009,14 +12009,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12009
12009
|
return Slider;
|
|
12010
12010
|
}(React__default.Component);
|
|
12011
12011
|
|
|
12012
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12012
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1d || (templateObject_1$1d = __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$1d;
|
|
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$1c || (templateObject_1$1c = __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$1b || (templateObject_1$1b = __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$1c;
|
|
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$S = newStyled.div(templateObject_3$
|
|
12104
|
+
var horizontalStyles = css(templateObject_1$1b || (templateObject_1$1b = __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$U || (templateObject_2$U = __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$S = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12107
12107
|
var position = _a.position;
|
|
12108
12108
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12109
12109
|
}, function (_a) {
|
|
@@ -12111,12 +12111,12 @@ var Container$S = newStyled.div(templateObject_3$I || (templateObject_3$I = __ma
|
|
|
12111
12111
|
return hasOverflowArrows &&
|
|
12112
12112
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12113
12113
|
});
|
|
12114
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
12115
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12116
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12117
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12114
|
+
var Button$6 = newStyled.button(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12115
|
+
var ArrowsContainer = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12116
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12117
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12118
12118
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12119
|
-
var templateObject_1$
|
|
12119
|
+
var templateObject_1$1b, templateObject_2$U, templateObject_3$J, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$l, templateObject_8$e;
|
|
12120
12120
|
|
|
12121
12121
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12122
12122
|
var loading = 'eager';
|
|
@@ -12153,22 +12153,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12153
12153
|
})) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12154
12154
|
};
|
|
12155
12155
|
|
|
12156
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12157
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12158
|
-
var templateObject_1$
|
|
12156
|
+
var ProgressContainer = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12157
|
+
var ProgressFiller = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
12158
|
+
var templateObject_1$1a, templateObject_2$T;
|
|
12159
12159
|
|
|
12160
12160
|
var ProgressBar$1 = function (_a) {
|
|
12161
12161
|
var progress = _a.progress, hide = _a.hide;
|
|
12162
12162
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12163
12163
|
};
|
|
12164
12164
|
|
|
12165
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
12166
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12167
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12168
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12169
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12170
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12171
|
-
var templateObject_1$
|
|
12165
|
+
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12166
|
+
var HTMLVideo = newStyled.video(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12167
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
12168
|
+
var PlayContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12169
|
+
var PauseContainer = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
12170
|
+
var MuteButton = newStyled.button(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
12171
|
+
var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$y, templateObject_5$r, templateObject_6$p;
|
|
12172
12172
|
|
|
12173
12173
|
var Video$1 = function (_a) {
|
|
12174
12174
|
var _b, _c, _d, _e;
|
|
@@ -13808,32 +13808,32 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13808
13808
|
afterZoomOut: PropTypes.func
|
|
13809
13809
|
} : {};
|
|
13810
13810
|
|
|
13811
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
13811
|
+
var Container$Q = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13812
13812
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13813
13813
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13814
13814
|
});
|
|
13815
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13815
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13816
13816
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13817
13817
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13818
13818
|
}, function (_a) {
|
|
13819
13819
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13820
13820
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13821
13821
|
});
|
|
13822
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13822
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13823
13823
|
var isCTAHidden = _a.isCTAHidden;
|
|
13824
13824
|
return (isCTAHidden ? '60px' : '120px');
|
|
13825
13825
|
});
|
|
13826
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13827
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13828
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13826
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13827
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13828
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13829
13829
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13830
13830
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13831
13831
|
});
|
|
13832
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13832
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13833
13833
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13834
13834
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13835
13835
|
});
|
|
13836
|
-
var templateObject_1$
|
|
13836
|
+
var templateObject_1$18, templateObject_2$R, templateObject_3$H, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$k;
|
|
13837
13837
|
|
|
13838
13838
|
var ImageProductSlide$1 = function (_a) {
|
|
13839
13839
|
var _b;
|
|
@@ -13848,8 +13848,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13848
13848
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13849
13849
|
};
|
|
13850
13850
|
|
|
13851
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13852
|
-
var templateObject_1$
|
|
13851
|
+
var Container$P = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13852
|
+
var templateObject_1$17;
|
|
13853
13853
|
|
|
13854
13854
|
var getInitialIndex = function (images, selectedValue) {
|
|
13855
13855
|
if (selectedValue) {
|
|
@@ -13897,7 +13897,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13897
13897
|
};
|
|
13898
13898
|
}
|
|
13899
13899
|
};
|
|
13900
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13900
|
+
var Container$O = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13901
13901
|
var backgroundColor = _a.backgroundColor;
|
|
13902
13902
|
return backgroundColor;
|
|
13903
13903
|
}, function (_a) {
|
|
@@ -13927,9 +13927,9 @@ var IconButton = function (_a) {
|
|
|
13927
13927
|
var theme = useTheme();
|
|
13928
13928
|
return (jsx$1(Container$O, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13929
13929
|
};
|
|
13930
|
-
var templateObject_1$
|
|
13930
|
+
var templateObject_1$16;
|
|
13931
13931
|
|
|
13932
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13932
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13933
13933
|
var AmazonButton = function (_a) {
|
|
13934
13934
|
var onClick = _a.onClick;
|
|
13935
13935
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13938,7 +13938,7 @@ var PaypalButton = function (_a) {
|
|
|
13938
13938
|
var onClick = _a.onClick;
|
|
13939
13939
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13940
13940
|
};
|
|
13941
|
-
var templateObject_1$
|
|
13941
|
+
var templateObject_1$15;
|
|
13942
13942
|
|
|
13943
13943
|
var Container$N = newStyled.div(function (props) { return ({
|
|
13944
13944
|
height: 'auto',
|
|
@@ -13993,9 +13993,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13993
13993
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$N, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13994
13994
|
};
|
|
13995
13995
|
|
|
13996
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13997
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13998
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13996
|
+
var Container$M = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13997
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13998
|
+
var StyledTitle = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13999
13999
|
var titlePosition = _a.titlePosition;
|
|
14000
14000
|
return titlePosition == 'center' &&
|
|
14001
14001
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14005,13 +14005,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14005
14005
|
var isMobile = useWindowDimensions().isMobile;
|
|
14006
14006
|
return (jsxs$1(Container$M, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14007
14007
|
};
|
|
14008
|
-
var templateObject_1$
|
|
14008
|
+
var templateObject_1$14, templateObject_2$Q, templateObject_3$G;
|
|
14009
14009
|
|
|
14010
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14010
|
+
var Label$4 = newStyled.span(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14011
14011
|
var color = _a.color;
|
|
14012
14012
|
return color;
|
|
14013
14013
|
});
|
|
14014
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14014
|
+
var MandatoryIcon = newStyled.span(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14015
14015
|
var color = _a.color;
|
|
14016
14016
|
return color;
|
|
14017
14017
|
});
|
|
@@ -14020,7 +14020,7 @@ var InputLabel = function (_a) {
|
|
|
14020
14020
|
var theme = useTheme();
|
|
14021
14021
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14022
14022
|
};
|
|
14023
|
-
var templateObject_1$
|
|
14023
|
+
var templateObject_1$13, templateObject_2$P;
|
|
14024
14024
|
|
|
14025
14025
|
var containerByStatus = function (theme, status) {
|
|
14026
14026
|
if (status === InputValidationType.Valid)
|
|
@@ -14029,12 +14029,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14029
14029
|
return theme.colors.semantic.urgent.color;
|
|
14030
14030
|
return '';
|
|
14031
14031
|
};
|
|
14032
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
14032
|
+
var Container$L = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14033
14033
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14034
14034
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14035
14035
|
});
|
|
14036
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14037
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14036
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14037
|
+
var StyledInput = newStyled.input(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14038
14038
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14039
14039
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14040
14040
|
}, function (_a) {
|
|
@@ -14089,11 +14089,11 @@ var StyledInput = newStyled.input(templateObject_3$E || (templateObject_3$E = __
|
|
|
14089
14089
|
return hasValue &&
|
|
14090
14090
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14091
14091
|
});
|
|
14092
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14092
|
+
var InputWrapper = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14093
14093
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14094
14094
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14095
14095
|
});
|
|
14096
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14096
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5$p = __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) {
|
|
14097
14097
|
var theme = _a.theme;
|
|
14098
14098
|
return theme.component.input.placeholderColor;
|
|
14099
14099
|
}, function (_a) {
|
|
@@ -14106,8 +14106,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$o || (templateObject_5
|
|
|
14106
14106
|
var theme = _a.theme;
|
|
14107
14107
|
return theme.component.input.lineHeight;
|
|
14108
14108
|
});
|
|
14109
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14110
|
-
var templateObject_1$
|
|
14109
|
+
var ClearInput = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14110
|
+
var templateObject_1$12, templateObject_2$O, templateObject_3$F, templateObject_4$w, templateObject_5$p, templateObject_6$n;
|
|
14111
14111
|
|
|
14112
14112
|
var BaseInput = function (_a) {
|
|
14113
14113
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -14151,11 +14151,11 @@ var Button$5 = function (_a) {
|
|
|
14151
14151
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14152
14152
|
};
|
|
14153
14153
|
|
|
14154
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
14154
|
+
var Container$K = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14155
14155
|
var theme = _a.theme;
|
|
14156
14156
|
return theme.component.inputCustom.input.borderRadius;
|
|
14157
14157
|
});
|
|
14158
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14158
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14159
14159
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14160
14160
|
return defaultRounded
|
|
14161
14161
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14172,21 +14172,21 @@ var Custom = function (_a) {
|
|
|
14172
14172
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14173
14173
|
return (jsx$1(Container$K, __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$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14174
14174
|
};
|
|
14175
|
-
var templateObject_1$
|
|
14175
|
+
var templateObject_1$11, templateObject_2$N;
|
|
14176
14176
|
|
|
14177
|
-
var SuccessContainer = newStyled.div(templateObject_1
|
|
14177
|
+
var SuccessContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14178
14178
|
var size = _a.size;
|
|
14179
14179
|
return (size === 'small' ? '36px' : '');
|
|
14180
14180
|
});
|
|
14181
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14182
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14181
|
+
var SuccessMessage = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14182
|
+
var SuccessText = newStyled.span(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14183
14183
|
var Success = function (_a) {
|
|
14184
14184
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14185
14185
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14186
14186
|
};
|
|
14187
|
-
var templateObject_1
|
|
14187
|
+
var templateObject_1$10, templateObject_2$M, templateObject_3$E;
|
|
14188
14188
|
|
|
14189
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
14189
|
+
var ButtonContainer = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14190
14190
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14191
14191
|
return status === InputValidationType.Empty &&
|
|
14192
14192
|
type === 'primary' &&
|
|
@@ -14203,16 +14203,16 @@ var BasePlusButton = function (_a) {
|
|
|
14203
14203
|
}
|
|
14204
14204
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14205
14205
|
};
|
|
14206
|
-
var templateObject_1
|
|
14206
|
+
var templateObject_1$$;
|
|
14207
14207
|
|
|
14208
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
14209
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14208
|
+
var Container$J = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14209
|
+
var IconContainer$2 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14210
14210
|
var BasePlusIcon = function (_a) {
|
|
14211
14211
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14212
14212
|
var theme = useTheme();
|
|
14213
14213
|
return (jsx$1(Container$J, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14214
14214
|
};
|
|
14215
|
-
var templateObject_1$
|
|
14215
|
+
var templateObject_1$_, templateObject_2$L;
|
|
14216
14216
|
|
|
14217
14217
|
var Input$3 = {
|
|
14218
14218
|
Simple: BaseInput,
|
|
@@ -14257,7 +14257,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14257
14257
|
}, [preventTouch, ref, touchStart]);
|
|
14258
14258
|
}
|
|
14259
14259
|
|
|
14260
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14260
|
+
var Container$I = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14261
14261
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14262
14262
|
return borderRadiusVariant &&
|
|
14263
14263
|
"\n border-radius: 40px;\n ";
|
|
@@ -14266,11 +14266,11 @@ var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __ma
|
|
|
14266
14266
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14267
14267
|
});
|
|
14268
14268
|
// max-height: 31.875rem;
|
|
14269
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14270
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14271
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14272
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14273
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14269
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14270
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14271
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14272
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14273
|
+
var Button$4 = newStyled.button(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14274
14274
|
var settings$1 = {
|
|
14275
14275
|
dots: true,
|
|
14276
14276
|
infinite: false,
|
|
@@ -14347,16 +14347,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14347
14347
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14348
14348
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14349
14349
|
};
|
|
14350
|
-
var templateObject_1$
|
|
14350
|
+
var templateObject_1$Z, templateObject_2$K, templateObject_3$D, templateObject_4$v, templateObject_5$o, templateObject_6$m;
|
|
14351
14351
|
|
|
14352
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14352
|
+
var Container$H = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14353
14353
|
var ProductGalleryMobile = function (_a) {
|
|
14354
14354
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
14355
14355
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14356
14356
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14357
14357
|
return (jsx$1(Container$H, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
14358
14358
|
};
|
|
14359
|
-
var templateObject_1$
|
|
14359
|
+
var templateObject_1$Y;
|
|
14360
14360
|
|
|
14361
14361
|
function _extends() {
|
|
14362
14362
|
_extends = Object.assign || function (target) {
|
|
@@ -14623,14 +14623,14 @@ function useSwipeable(options) {
|
|
|
14623
14623
|
return handlers;
|
|
14624
14624
|
}
|
|
14625
14625
|
|
|
14626
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14626
|
+
var Button$3 = newStyled.button(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
14627
14627
|
var ArrowButton = function (_a) {
|
|
14628
14628
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14629
14629
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14630
14630
|
};
|
|
14631
|
-
var templateObject_1$
|
|
14631
|
+
var templateObject_1$X;
|
|
14632
14632
|
|
|
14633
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14633
|
+
var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
14634
14634
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14635
14635
|
var SlideDots = function (_a) {
|
|
14636
14636
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14639,11 +14639,11 @@ var SlideDots = function (_a) {
|
|
|
14639
14639
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14640
14640
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14641
14641
|
};
|
|
14642
|
-
var templateObject_1$
|
|
14642
|
+
var templateObject_1$W;
|
|
14643
14643
|
|
|
14644
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14645
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14646
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14644
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
14645
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14646
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14647
14647
|
var SlideNavigation = function (_a) {
|
|
14648
14648
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14649
14649
|
var theme = useTheme();
|
|
@@ -14655,23 +14655,23 @@ var SlideNavigation = function (_a) {
|
|
|
14655
14655
|
onNavigate(selectedIndex + 1);
|
|
14656
14656
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14657
14657
|
};
|
|
14658
|
-
var templateObject_1$
|
|
14658
|
+
var templateObject_1$V, templateObject_2$J, templateObject_3$C;
|
|
14659
14659
|
|
|
14660
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14660
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14661
14661
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14662
14662
|
return borderRadiusVariant &&
|
|
14663
14663
|
"\n border-radius: 40px;\n ";
|
|
14664
14664
|
});
|
|
14665
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14666
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14665
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14666
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14667
14667
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14668
14668
|
var _b, _c;
|
|
14669
14669
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14670
14670
|
return (jsxs$1(Container$F, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14671
14671
|
});
|
|
14672
|
-
var templateObject_1$
|
|
14672
|
+
var templateObject_1$U, templateObject_2$I, templateObject_3$B;
|
|
14673
14673
|
|
|
14674
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14674
|
+
var Container$E = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14675
14675
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14676
14676
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14677
14677
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14695,9 +14695,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14695
14695
|
}, [index, images]);
|
|
14696
14696
|
return (jsxs$1(Container$E, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14697
14697
|
};
|
|
14698
|
-
var templateObject_1$
|
|
14698
|
+
var templateObject_1$T;
|
|
14699
14699
|
|
|
14700
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14700
|
+
var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14701
14701
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14702
14702
|
return borderRadiusVariant &&
|
|
14703
14703
|
"\n border-radius: 40px;\n ";
|
|
@@ -14706,12 +14706,12 @@ var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
14706
14706
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14707
14707
|
});
|
|
14708
14708
|
// max-height: 31.875rem;
|
|
14709
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14710
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14711
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14712
|
-
var Video = newStyled.div(templateObject_5$
|
|
14713
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14714
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14709
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14710
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14711
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14712
|
+
var Video = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14713
|
+
var VideoTag = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14714
|
+
var Text$2 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14715
14715
|
var NavButtonContainer$1 = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14716
14716
|
var Button$2 = newStyled.button(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14717
14717
|
var settings = {
|
|
@@ -14771,14 +14771,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14771
14771
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14772
14772
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14773
14773
|
};
|
|
14774
|
-
var templateObject_1$
|
|
14774
|
+
var templateObject_1$S, templateObject_2$H, templateObject_3$A, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d, templateObject_9$9;
|
|
14775
14775
|
|
|
14776
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14776
|
+
var Container$C = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14777
14777
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14778
14778
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14779
14779
|
return (jsx$1(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14780
14780
|
};
|
|
14781
|
-
var templateObject_1$
|
|
14781
|
+
var templateObject_1$R;
|
|
14782
14782
|
|
|
14783
14783
|
var __defProp$1 = Object.defineProperty;
|
|
14784
14784
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14911,21 +14911,21 @@ var Portal = function (_a) {
|
|
|
14911
14911
|
var visibleStyle = function (_a) {
|
|
14912
14912
|
var opened = _a.opened;
|
|
14913
14913
|
return opened
|
|
14914
|
-
? css(templateObject_1$
|
|
14914
|
+
? css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14915
14915
|
};
|
|
14916
14916
|
var transformStyle = function (_a) {
|
|
14917
14917
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14918
14918
|
return opened
|
|
14919
|
-
? css(templateObject_3$
|
|
14919
|
+
? css(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14920
14920
|
};
|
|
14921
|
-
var Container$B = newStyled.div(templateObject_6$
|
|
14921
|
+
var Container$B = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14922
14922
|
var width = _a.width;
|
|
14923
14923
|
return width
|
|
14924
|
-
? css(templateObject_5$
|
|
14924
|
+
? css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14925
14925
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14926
14926
|
});
|
|
14927
14927
|
}, visibleStyle, transformStyle);
|
|
14928
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14928
|
+
var Overlay = newStyled.div(templateObject_7$i || (templateObject_7$i = __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);
|
|
14929
14929
|
var Modal = function (_a) {
|
|
14930
14930
|
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;
|
|
14931
14931
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14966,7 +14966,7 @@ var useModal = function (id) {
|
|
|
14966
14966
|
close: close,
|
|
14967
14967
|
}); }, [close, open, opened]);
|
|
14968
14968
|
};
|
|
14969
|
-
var templateObject_1$
|
|
14969
|
+
var templateObject_1$Q, templateObject_2$G, templateObject_3$z, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$i;
|
|
14970
14970
|
|
|
14971
14971
|
var htmlReactParser = {exports: {}};
|
|
14972
14972
|
|
|
@@ -18747,7 +18747,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18747
18747
|
HTMLReactParser$1.attributesToProps;
|
|
18748
18748
|
HTMLReactParser$1.Element;
|
|
18749
18749
|
|
|
18750
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18750
|
+
var Bar$1 = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
18751
18751
|
var height = _a.height;
|
|
18752
18752
|
return height || '0.5rem';
|
|
18753
18753
|
}, function (_a) {
|
|
@@ -18799,7 +18799,7 @@ var Container$A = newStyled.div(function (_a) {
|
|
|
18799
18799
|
background: backgroundColor,
|
|
18800
18800
|
});
|
|
18801
18801
|
});
|
|
18802
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18802
|
+
var MessageContainer = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18803
18803
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18804
18804
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18805
18805
|
};
|
|
@@ -18830,19 +18830,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18830
18830
|
};
|
|
18831
18831
|
return (jsxs$1(Container$A, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18832
18832
|
};
|
|
18833
|
-
var templateObject_1$
|
|
18833
|
+
var templateObject_1$P, templateObject_2$F;
|
|
18834
18834
|
|
|
18835
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
18835
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18836
18836
|
var theme = _a.theme;
|
|
18837
18837
|
return theme.component.orderBar.backgroundColor;
|
|
18838
18838
|
});
|
|
18839
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18839
|
+
var H1 = newStyled.h1(templateObject_2$E || (templateObject_2$E = __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; });
|
|
18840
18840
|
var OrderBar = function (_a) {
|
|
18841
18841
|
var message = _a.message, color = _a.color;
|
|
18842
18842
|
var theme = useTheme();
|
|
18843
18843
|
return (jsxs$1(Container$z, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18844
18844
|
};
|
|
18845
|
-
var templateObject_1$
|
|
18845
|
+
var templateObject_1$O, templateObject_2$E;
|
|
18846
18846
|
|
|
18847
18847
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
18848
18848
|
background: props.bgColor,
|
|
@@ -18866,15 +18866,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
18866
18866
|
justifyContent: 'center',
|
|
18867
18867
|
gap: '10px',
|
|
18868
18868
|
});
|
|
18869
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
18869
|
+
var StyledContent = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
18870
18870
|
var bgColor = _a.bgColor;
|
|
18871
18871
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
18872
18872
|
}, function (_a) {
|
|
18873
18873
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
18874
18874
|
return width;
|
|
18875
18875
|
});
|
|
18876
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
18877
|
-
var templateObject_1$
|
|
18876
|
+
var StyledController = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
18877
|
+
var templateObject_1$N, templateObject_2$D;
|
|
18878
18878
|
|
|
18879
18879
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
18880
18880
|
var background = _a.background, width = _a.width;
|
|
@@ -18915,13 +18915,13 @@ var BasicAccordion = function (_a) {
|
|
|
18915
18915
|
} }), void 0));
|
|
18916
18916
|
};
|
|
18917
18917
|
|
|
18918
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
18919
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
18920
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
18921
|
-
var Label$3 = newStyled('div')(templateObject_4$
|
|
18922
|
-
newStyled(Label$3)(templateObject_5$
|
|
18923
|
-
newStyled(Label$3)(templateObject_6$
|
|
18924
|
-
var Container$y = newStyled('div')(templateObject_7$
|
|
18918
|
+
var TableElement$3 = newStyled.table(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
18919
|
+
var TableCell$3 = newStyled.td(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
18920
|
+
var TableHead$3 = newStyled.th(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
18921
|
+
var Label$3 = newStyled('div')(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
18922
|
+
newStyled(Label$3)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
18923
|
+
newStyled(Label$3)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
18924
|
+
var Container$y = newStyled('div')(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
18925
18925
|
newStyled('span')(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
18926
18926
|
var Column$2 = newStyled('div')(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
18927
18927
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
@@ -18931,7 +18931,7 @@ var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __mak
|
|
|
18931
18931
|
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
18932
18932
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
18933
18933
|
});
|
|
18934
|
-
var templateObject_1$
|
|
18934
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$y, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
18935
18935
|
|
|
18936
18936
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
18937
18937
|
// TODO: Refactor this color logic
|
|
@@ -19006,13 +19006,13 @@ var ArrowTip = function (_a) {
|
|
|
19006
19006
|
};
|
|
19007
19007
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
19008
19008
|
|
|
19009
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
19010
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
19011
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
19012
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
19013
|
-
var Check = newStyled.div(templateObject_5$
|
|
19014
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
19015
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
19009
|
+
var Container$x = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
19010
|
+
var Card$1 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
19011
|
+
var Tag$1 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
19012
|
+
var Label$2 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
19013
|
+
var Check = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
19014
|
+
var IconContainer$1 = newStyled.div(templateObject_6$i || (templateObject_6$i = __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"])));
|
|
19015
|
+
var IconPlaceholder = newStyled.div(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
19016
19016
|
var DiscountContainer = newStyled.div(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
19017
19017
|
var PackSelector = function (_a) {
|
|
19018
19018
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -19043,14 +19043,14 @@ var PackCard = function (_a) {
|
|
|
19043
19043
|
currency: currencyCode || 'USD',
|
|
19044
19044
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
19045
19045
|
};
|
|
19046
|
-
var templateObject_1$
|
|
19046
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$b;
|
|
19047
19047
|
|
|
19048
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
19049
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
19050
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
19048
|
+
var Container$w = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
19049
|
+
var IconContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
19050
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
19051
19051
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
19052
19052
|
}));
|
|
19053
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
19053
|
+
var PageNumber = newStyled.span(templateObject_4$q || (templateObject_4$q = __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) {
|
|
19054
19054
|
var bold = _a.bold;
|
|
19055
19055
|
return (bold ? '700' : '500');
|
|
19056
19056
|
}, function (_a) {
|
|
@@ -19067,7 +19067,7 @@ var PageNumber = newStyled.span(templateObject_4$p || (templateObject_4$p = __ma
|
|
|
19067
19067
|
var background = _a.background;
|
|
19068
19068
|
return background || 'unset';
|
|
19069
19069
|
});
|
|
19070
|
-
var templateObject_1$
|
|
19070
|
+
var templateObject_1$K, templateObject_2$A, templateObject_3$w, templateObject_4$q;
|
|
19071
19071
|
|
|
19072
19072
|
var Pagination = function (_a) {
|
|
19073
19073
|
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;
|
|
@@ -19132,7 +19132,7 @@ var PaginatorBlog = function (_a) {
|
|
|
19132
19132
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19133
19133
|
};
|
|
19134
19134
|
|
|
19135
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
19135
|
+
var Container$v = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
19136
19136
|
var width = _a.width;
|
|
19137
19137
|
return width;
|
|
19138
19138
|
}, function (_a) {
|
|
@@ -19150,12 +19150,12 @@ var PaymentMethod = function (_a) {
|
|
|
19150
19150
|
var theme = useTheme();
|
|
19151
19151
|
return (jsx$1(Container$v, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
19152
19152
|
};
|
|
19153
|
-
var templateObject_1$
|
|
19153
|
+
var templateObject_1$J;
|
|
19154
19154
|
|
|
19155
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
19155
|
+
var Container$u = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
19156
19156
|
var IMAGE_WIDTH = '63px';
|
|
19157
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19158
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19157
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
19158
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
19159
19159
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19160
19160
|
}), IMAGE_WIDTH);
|
|
19161
19161
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19178,7 +19178,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19178
19178
|
margin: margin,
|
|
19179
19179
|
});
|
|
19180
19180
|
});
|
|
19181
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19181
|
+
var PriceContainer = newStyled.div(templateObject_4$p || (templateObject_4$p = __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) {
|
|
19182
19182
|
var withTag = _a.withTag; _a.theme;
|
|
19183
19183
|
return withTag
|
|
19184
19184
|
? mediaQueries({
|
|
@@ -19187,15 +19187,15 @@ var PriceContainer = newStyled.div(templateObject_4$o || (templateObject_4$o = _
|
|
|
19187
19187
|
})
|
|
19188
19188
|
: 'justify-content: end';
|
|
19189
19189
|
});
|
|
19190
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19191
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
19190
|
+
var Quantity = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
19191
|
+
var StyledSpan = newStyled.span(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19192
19192
|
var SimpleOrderItem = function (_a) {
|
|
19193
19193
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19194
19194
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
19195
19195
|
var theme = useTheme();
|
|
19196
19196
|
return (jsxs$1(Container$u, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
19197
19197
|
};
|
|
19198
|
-
var templateObject_1$
|
|
19198
|
+
var templateObject_1$I, templateObject_2$z, templateObject_3$v, templateObject_4$p, templateObject_5$j, templateObject_6$h;
|
|
19199
19199
|
|
|
19200
19200
|
var P$1 = newStyled.p(function (_a) {
|
|
19201
19201
|
var color = _a.color;
|
|
@@ -19209,7 +19209,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19209
19209
|
margin: '0.938rem 4.188rem',
|
|
19210
19210
|
});
|
|
19211
19211
|
});
|
|
19212
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19212
|
+
var Bar = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
19213
19213
|
var height = _a.height;
|
|
19214
19214
|
return height || '0.5rem';
|
|
19215
19215
|
}, function (_a) {
|
|
@@ -19254,12 +19254,12 @@ var ProgressBar = function (_a) {
|
|
|
19254
19254
|
var theme = useTheme();
|
|
19255
19255
|
return (jsxs$1(Container$t, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19256
19256
|
};
|
|
19257
|
-
var templateObject_1$
|
|
19257
|
+
var templateObject_1$H;
|
|
19258
19258
|
|
|
19259
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
19260
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19261
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19262
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19259
|
+
var Container$s = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
19260
|
+
var Item$1 = newStyled.span(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
19261
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19262
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
19263
19263
|
var QuantityPicker = function (_a) {
|
|
19264
19264
|
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;
|
|
19265
19265
|
var theme = useTheme();
|
|
@@ -19284,7 +19284,7 @@ var QuantityPicker = function (_a) {
|
|
|
19284
19284
|
}, [value, clamp]);
|
|
19285
19285
|
return (jsxs$1(Container$s, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19286
19286
|
};
|
|
19287
|
-
var templateObject_1$
|
|
19287
|
+
var templateObject_1$G, templateObject_2$y, templateObject_3$u, templateObject_4$o;
|
|
19288
19288
|
|
|
19289
19289
|
/* base styles & size variants */
|
|
19290
19290
|
var CustomRadioStyles$1 = {
|
|
@@ -19353,9 +19353,9 @@ var ContainerStyles$1 = {
|
|
|
19353
19353
|
},
|
|
19354
19354
|
};
|
|
19355
19355
|
|
|
19356
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19356
|
+
var Wrapper$3 = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19357
19357
|
var Container$r = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19358
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19358
|
+
var Input$2 = newStyled.input(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19359
19359
|
var disabled = _a.disabled;
|
|
19360
19360
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19361
19361
|
});
|
|
@@ -19363,7 +19363,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19363
19363
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19364
19364
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19365
19365
|
]; });
|
|
19366
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19366
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
19367
19367
|
var RadioPrimary = function (_a) {
|
|
19368
19368
|
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;
|
|
19369
19369
|
var theme = useTheme();
|
|
@@ -19373,7 +19373,7 @@ var RadioPrimary = function (_a) {
|
|
|
19373
19373
|
};
|
|
19374
19374
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$r, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19375
19375
|
};
|
|
19376
|
-
var templateObject_1$
|
|
19376
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$t;
|
|
19377
19377
|
|
|
19378
19378
|
var RadioGroupInput = function (_a) {
|
|
19379
19379
|
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;
|
|
@@ -19452,9 +19452,9 @@ var ContainerStyles = {
|
|
|
19452
19452
|
},
|
|
19453
19453
|
};
|
|
19454
19454
|
|
|
19455
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19455
|
+
var Wrapper$2 = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19456
19456
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19457
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19457
|
+
var Input$1 = newStyled.input(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19458
19458
|
var disabled = _a.disabled;
|
|
19459
19459
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19460
19460
|
});
|
|
@@ -19462,7 +19462,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19462
19462
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19463
19463
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19464
19464
|
]; });
|
|
19465
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19465
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19466
19466
|
var theme = _a.theme;
|
|
19467
19467
|
return theme.component.radio.textSize;
|
|
19468
19468
|
}, function (_a) {
|
|
@@ -19478,7 +19478,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19478
19478
|
};
|
|
19479
19479
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19480
19480
|
};
|
|
19481
|
-
var templateObject_1$
|
|
19481
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s;
|
|
19482
19482
|
|
|
19483
19483
|
var ClubRadioGroupInput = function (_a) {
|
|
19484
19484
|
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;
|
|
@@ -19506,13 +19506,13 @@ function formatDate(date, format) {
|
|
|
19506
19506
|
}
|
|
19507
19507
|
}
|
|
19508
19508
|
|
|
19509
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
19510
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19511
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19512
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19513
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19514
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19515
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19509
|
+
var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19510
|
+
var Content$1 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19511
|
+
var StarsContent = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19512
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19513
|
+
var DateText$1 = newStyled.span(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
19514
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
19515
|
+
var VerifiedText = newStyled.h1(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
19516
19516
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$a || (templateObject_8$a = __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"])));
|
|
19517
19517
|
var ReviewDescription = newStyled.div(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
19518
19518
|
var ImageContainer$2 = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __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"])));
|
|
@@ -19547,17 +19547,17 @@ var Review$1 = function (_a) {
|
|
|
19547
19547
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$p, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19548
19548
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19549
19549
|
};
|
|
19550
|
-
var templateObject_1$
|
|
19550
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$g, templateObject_7$f, templateObject_8$a, templateObject_9$7, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19551
19551
|
|
|
19552
19552
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19553
19553
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19554
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19555
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19556
|
-
var Content = newStyled.div(templateObject_3$
|
|
19557
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19558
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19559
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19560
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19554
|
+
var Container$o = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19555
|
+
var Heading = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19556
|
+
var Content = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19557
|
+
var ReviewContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19558
|
+
var DateText = newStyled.span(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
19559
|
+
var VariantText = newStyled.div(templateObject_6$f || (templateObject_6$f = __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"])));
|
|
19560
|
+
var ReviewerName = newStyled.h2(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
19561
19561
|
var ReviewTitle = newStyled.h3(templateObject_8$9 || (templateObject_8$9 = __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"])));
|
|
19562
19562
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __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"])));
|
|
19563
19563
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __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"])));
|
|
@@ -19603,15 +19603,15 @@ var Review = function (_a) {
|
|
|
19603
19603
|
: description,
|
|
19604
19604
|
} }, 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));
|
|
19605
19605
|
};
|
|
19606
|
-
var templateObject_1$
|
|
19607
|
-
|
|
19608
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19609
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19610
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19611
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19612
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19613
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19614
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19606
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$f, templateObject_7$e, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19607
|
+
|
|
19608
|
+
var Container$n = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19609
|
+
var ReviewsContainer = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19610
|
+
var ReviewsCount = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19611
|
+
var ReviewsStars = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19612
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
19613
|
+
var ReviewsImages = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
19614
|
+
var SummaryItem = newStyled.div(templateObject_7$d || (templateObject_7$d = __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) {
|
|
19615
19615
|
var backgroundUrl = _a.backgroundUrl;
|
|
19616
19616
|
return "url(".concat(backgroundUrl, ")");
|
|
19617
19617
|
});
|
|
@@ -19621,17 +19621,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19621
19621
|
var theme = useTheme();
|
|
19622
19622
|
return (jsxs$1(Container$n, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19623
19623
|
};
|
|
19624
|
-
var templateObject_1$
|
|
19624
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$p, templateObject_4$l, templateObject_5$g, templateObject_6$e, templateObject_7$d;
|
|
19625
19625
|
|
|
19626
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19627
|
-
var Text = newStyled.p(templateObject_2$
|
|
19626
|
+
var Container$m = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19627
|
+
var Text = newStyled.p(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19628
19628
|
var ScrollToTop = function (_a) {
|
|
19629
19629
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19630
19630
|
var theme = useTheme();
|
|
19631
19631
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19632
19632
|
return (jsxs$1(Container$m, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19633
19633
|
};
|
|
19634
|
-
var templateObject_1$
|
|
19634
|
+
var templateObject_1$A, templateObject_2$s;
|
|
19635
19635
|
|
|
19636
19636
|
var Input = newStyled.input(function (props) { return ({
|
|
19637
19637
|
padding: props.theme.component.input.padding,
|
|
@@ -19662,7 +19662,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19662
19662
|
},
|
|
19663
19663
|
}); });
|
|
19664
19664
|
|
|
19665
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19665
|
+
var Container$l = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
19666
19666
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19667
19667
|
}));
|
|
19668
19668
|
var Description = newStyled.div({
|
|
@@ -19681,7 +19681,7 @@ var ProductItem = function (_a) {
|
|
|
19681
19681
|
var theme = useTheme();
|
|
19682
19682
|
return (jsxs$1(Container$l, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19683
19683
|
};
|
|
19684
|
-
var templateObject_1$
|
|
19684
|
+
var templateObject_1$z;
|
|
19685
19685
|
|
|
19686
19686
|
var Container$k = newStyled.div({
|
|
19687
19687
|
display: 'flex',
|
|
@@ -19697,7 +19697,7 @@ var Ul = newStyled.ul({
|
|
|
19697
19697
|
margin: '0px',
|
|
19698
19698
|
padding: '0px',
|
|
19699
19699
|
});
|
|
19700
|
-
var Li = newStyled.li(templateObject_1$
|
|
19700
|
+
var Li = newStyled.li(templateObject_1$y || (templateObject_1$y = __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({
|
|
19701
19701
|
padding: [0, '0rem 1rem'],
|
|
19702
19702
|
borderRadius: [0, '0.5rem'],
|
|
19703
19703
|
}));
|
|
@@ -19709,12 +19709,12 @@ var Anchor = newStyled.a({
|
|
|
19709
19709
|
padding: 0,
|
|
19710
19710
|
textDecoration: 'none',
|
|
19711
19711
|
});
|
|
19712
|
-
var Container$j = newStyled.div(templateObject_2$
|
|
19712
|
+
var Container$j = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19713
19713
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19714
19714
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19715
19715
|
borderRadius: ['0', '0.5rem'],
|
|
19716
19716
|
}));
|
|
19717
|
-
var Header = newStyled.div(templateObject_3$
|
|
19717
|
+
var Header = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19718
19718
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19719
19719
|
}));
|
|
19720
19720
|
var ResultsPanel = function (_a) {
|
|
@@ -19722,9 +19722,9 @@ var ResultsPanel = function (_a) {
|
|
|
19722
19722
|
var theme = useTheme();
|
|
19723
19723
|
return (jsxs$1(Container$j, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19724
19724
|
};
|
|
19725
|
-
var templateObject_1$
|
|
19725
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$o;
|
|
19726
19726
|
|
|
19727
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19727
|
+
var Button$1 = newStyled.button(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
19728
19728
|
right: ['1rem', '7.75rem'],
|
|
19729
19729
|
top: ['0.75rem', '0.75rem'],
|
|
19730
19730
|
}));
|
|
@@ -19733,7 +19733,7 @@ var ClearButton = function (_a) {
|
|
|
19733
19733
|
var theme = useTheme();
|
|
19734
19734
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19735
19735
|
};
|
|
19736
|
-
var templateObject_1$
|
|
19736
|
+
var templateObject_1$x;
|
|
19737
19737
|
|
|
19738
19738
|
var SearchIconContainer = newStyled.div({
|
|
19739
19739
|
display: 'flex',
|
|
@@ -19743,7 +19743,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19743
19743
|
background: 'white',
|
|
19744
19744
|
alignSelf: 'center',
|
|
19745
19745
|
});
|
|
19746
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19746
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
19747
19747
|
var SearchControl = function (_a) {
|
|
19748
19748
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19749
19749
|
var theme = useTheme();
|
|
@@ -19759,7 +19759,7 @@ var SearchControl = function (_a) {
|
|
|
19759
19759
|
}
|
|
19760
19760
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19761
19761
|
};
|
|
19762
|
-
var templateObject_1$
|
|
19762
|
+
var templateObject_1$w;
|
|
19763
19763
|
|
|
19764
19764
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19765
19765
|
var reducer = function (state, action) {
|
|
@@ -19826,20 +19826,20 @@ var SearchBar = function (_a) {
|
|
|
19826
19826
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19827
19827
|
};
|
|
19828
19828
|
|
|
19829
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
19830
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19831
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19832
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19833
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19829
|
+
var Container$h = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19830
|
+
var BackArrow = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19831
|
+
var BoldSpan = newStyled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19832
|
+
var NormalSpan = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19833
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19834
19834
|
var SearchNavigation = function (_a) {
|
|
19835
19835
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19836
19836
|
return (jsxs$1(Container$h, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19837
19837
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19838
19838
|
}) }, void 0)] }, void 0));
|
|
19839
19839
|
};
|
|
19840
|
-
var templateObject_1$
|
|
19840
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$n, templateObject_4$k, templateObject_5$f;
|
|
19841
19841
|
|
|
19842
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19842
|
+
var Container$g = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19843
19843
|
var alignCenter = _a.alignCenter;
|
|
19844
19844
|
return alignCenter &&
|
|
19845
19845
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19849,26 +19849,26 @@ var Container$g = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
19849
19849
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19850
19850
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19851
19851
|
});
|
|
19852
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19853
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19852
|
+
var TitleText = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
19853
|
+
var BannerText = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
19854
19854
|
var ShortBanner = function (_a) {
|
|
19855
19855
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19856
19856
|
var theme = useTheme();
|
|
19857
19857
|
return (jsxs$1(Container$g, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19858
19858
|
};
|
|
19859
|
-
var templateObject_1$
|
|
19860
|
-
|
|
19861
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19862
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19863
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19864
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19865
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19866
|
-
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$
|
|
19867
|
-
var Container$f = newStyled('div')(templateObject_7$
|
|
19859
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$m;
|
|
19860
|
+
|
|
19861
|
+
var TableElement$2 = newStyled.table(templateObject_1$t || (templateObject_1$t = __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; });
|
|
19862
|
+
var TableCell$2 = newStyled.td(templateObject_2$o || (templateObject_2$o = __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; });
|
|
19863
|
+
var TableHead$2 = newStyled.th(templateObject_3$l || (templateObject_3$l = __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; });
|
|
19864
|
+
var Label$1 = newStyled('div')(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19865
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19866
|
+
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19867
|
+
var Container$f = newStyled('div')(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19868
19868
|
var LabelText$1 = newStyled('span')(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19869
19869
|
var Column$1 = newStyled('div')(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19870
19870
|
var TableRow$2 = newStyled.tr(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19871
|
-
var templateObject_1$
|
|
19871
|
+
var templateObject_1$t, templateObject_2$o, templateObject_3$l, templateObject_4$j, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$8, templateObject_9$5, templateObject_10$5;
|
|
19872
19872
|
|
|
19873
19873
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19874
19874
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19909,16 +19909,16 @@ var SizeChartTable = function (_a) {
|
|
|
19909
19909
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19910
19910
|
};
|
|
19911
19911
|
|
|
19912
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19913
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19914
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19915
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19912
|
+
var TableElement$1 = newStyled.table(templateObject_1$s || (templateObject_1$s = __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; });
|
|
19913
|
+
var TableCell$1 = newStyled.td(templateObject_2$n || (templateObject_2$n = __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; });
|
|
19914
|
+
var TableHead$1 = newStyled.th(templateObject_3$k || (templateObject_3$k = __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; });
|
|
19915
|
+
var TableRow$1 = newStyled.tr(templateObject_4$i || (templateObject_4$i = __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; });
|
|
19916
19916
|
var SizeTable = function (_a) {
|
|
19917
19917
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19918
19918
|
var theme = useTheme();
|
|
19919
19919
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __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$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19920
19920
|
};
|
|
19921
|
-
var templateObject_1$
|
|
19921
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$k, templateObject_4$i;
|
|
19922
19922
|
|
|
19923
19923
|
var getStylesBySize$7 = function (size) {
|
|
19924
19924
|
switch (size) {
|
|
@@ -19945,7 +19945,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19945
19945
|
} });
|
|
19946
19946
|
};
|
|
19947
19947
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19948
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19948
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$r || (templateObject_1$r = __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));
|
|
19949
19949
|
};
|
|
19950
19950
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19951
19951
|
if (disabled)
|
|
@@ -19956,28 +19956,28 @@ var getIconFill = function (theme, disabled, iconColor) {
|
|
|
19956
19956
|
return theme.colors.shades['550'].color;
|
|
19957
19957
|
};
|
|
19958
19958
|
var TextButton = function (_a) {
|
|
19959
|
-
var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, onClick = _a.onClick;
|
|
19959
|
+
var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, _c = _a.uppercase, uppercase = _c === void 0 ? true : _c, onClick = _a.onClick, testId = _a.testId;
|
|
19960
19960
|
var theme = useTheme();
|
|
19961
19961
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19962
|
-
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 }, { children: text }), void 0));
|
|
19962
|
+
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));
|
|
19963
19963
|
};
|
|
19964
|
-
var templateObject_1$
|
|
19964
|
+
var templateObject_1$r;
|
|
19965
19965
|
|
|
19966
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
19967
|
-
var P = newStyled.p(templateObject_2$
|
|
19968
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19966
|
+
var Container$e = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19967
|
+
var P = newStyled.p(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19968
|
+
var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19969
19969
|
var SizeFitGuide = function (_a) {
|
|
19970
19970
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19971
19971
|
return (jsxs$1(Container$e, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19972
19972
|
};
|
|
19973
|
-
var templateObject_1$
|
|
19973
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19974
19974
|
|
|
19975
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19975
|
+
var ButtonsContainer = newStyled.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
19976
19976
|
var inline = _a.inline;
|
|
19977
19977
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19978
19978
|
});
|
|
19979
|
-
var Row = newStyled.div(templateObject_2$
|
|
19980
|
-
var templateObject_1$
|
|
19979
|
+
var Row = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19980
|
+
var templateObject_1$p, templateObject_2$l;
|
|
19981
19981
|
|
|
19982
19982
|
var SizeSelector = function (_a) {
|
|
19983
19983
|
var _b;
|
|
@@ -19999,7 +19999,7 @@ var SizeSelector = function (_a) {
|
|
|
19999
19999
|
}) }), void 0)] }), void 0));
|
|
20000
20000
|
};
|
|
20001
20001
|
|
|
20002
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
20002
|
+
var TabContainer = newStyled.div(templateObject_1$o || (templateObject_1$o = __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) {
|
|
20003
20003
|
var titleSize = _a.titleSize;
|
|
20004
20004
|
return titleSize;
|
|
20005
20005
|
}, function (_a) {
|
|
@@ -20016,18 +20016,18 @@ var Tab = function (_a) {
|
|
|
20016
20016
|
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;
|
|
20017
20017
|
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));
|
|
20018
20018
|
};
|
|
20019
|
-
var templateObject_1$
|
|
20019
|
+
var templateObject_1$o;
|
|
20020
20020
|
|
|
20021
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
20022
|
-
var TabList = newStyled.div(templateObject_2$
|
|
20021
|
+
var Container$d = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
20022
|
+
var TabList = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
20023
20023
|
var backgroundColor = _a.backgroundColor;
|
|
20024
20024
|
return backgroundColor;
|
|
20025
20025
|
}, function (_a) {
|
|
20026
20026
|
var borderColor = _a.borderColor;
|
|
20027
20027
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
20028
20028
|
});
|
|
20029
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
20030
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
20029
|
+
var TabContent = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
20030
|
+
var TabSeparator = newStyled.div(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
20031
20031
|
var Tabs = function (_a) {
|
|
20032
20032
|
var _b;
|
|
20033
20033
|
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;
|
|
@@ -20038,14 +20038,14 @@ var Tabs = function (_a) {
|
|
|
20038
20038
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
20039
20039
|
return (jsxs$1(Container$d, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
20040
20040
|
};
|
|
20041
|
-
var templateObject_1$
|
|
20041
|
+
var templateObject_1$n, templateObject_2$k, templateObject_3$i, templateObject_4$h;
|
|
20042
20042
|
|
|
20043
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
20043
|
+
var Container$c = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
20044
20044
|
var Tag = function (_a) {
|
|
20045
20045
|
var text = _a.text, className = _a.className;
|
|
20046
20046
|
return jsx$1(Container$c, __assign$1({ className: className }, { children: text }), void 0);
|
|
20047
20047
|
};
|
|
20048
|
-
var templateObject_1$
|
|
20048
|
+
var templateObject_1$m;
|
|
20049
20049
|
|
|
20050
20050
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
20051
20051
|
switch (size) {
|
|
@@ -20156,9 +20156,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20156
20156
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20157
20157
|
};
|
|
20158
20158
|
|
|
20159
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
20160
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
20161
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20159
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
20160
|
+
var VideoOverlay = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
20161
|
+
var FullscreenVideo = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
20162
20162
|
var ImageVideo = function (_a) {
|
|
20163
20163
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20164
20164
|
var video = useRef(null);
|
|
@@ -20178,12 +20178,12 @@ var ImageVideo = function (_a) {
|
|
|
20178
20178
|
height: '100%',
|
|
20179
20179
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20180
20180
|
};
|
|
20181
|
-
var templateObject_1$
|
|
20181
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$h;
|
|
20182
20182
|
|
|
20183
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20184
|
-
var ContainerMobile = css(templateObject_2$
|
|
20185
|
-
var Container$b = newStyled.div(templateObject_3$
|
|
20186
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20183
|
+
var ContainerDesktop = css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
20184
|
+
var ContainerMobile = css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
20185
|
+
var Container$b = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
20186
|
+
var TextContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
20187
20187
|
var TextWithImage = function (_a) {
|
|
20188
20188
|
var _b, _c, _d, _e;
|
|
20189
20189
|
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"]);
|
|
@@ -20213,25 +20213,25 @@ var TextWithImage = function (_a) {
|
|
|
20213
20213
|
},
|
|
20214
20214
|
} }, 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));
|
|
20215
20215
|
};
|
|
20216
|
-
var templateObject_1$
|
|
20216
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$g, templateObject_4$g;
|
|
20217
20217
|
|
|
20218
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
20218
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20219
20219
|
var timerColor = _a.timerColor;
|
|
20220
20220
|
return timerColor || '';
|
|
20221
20221
|
});
|
|
20222
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
20222
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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) {
|
|
20223
20223
|
var timerColor = _a.timerColor;
|
|
20224
20224
|
return timerColor || '';
|
|
20225
20225
|
});
|
|
20226
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
20226
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$f || (templateObject_3$f = __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) {
|
|
20227
20227
|
var theme = _a.theme;
|
|
20228
20228
|
return theme.colors.shades.white.color;
|
|
20229
20229
|
}, function (_a) {
|
|
20230
20230
|
var theme = _a.theme;
|
|
20231
20231
|
return theme.colors.shades.white.color;
|
|
20232
20232
|
});
|
|
20233
|
-
var Unit = newStyled.p(templateObject_4$
|
|
20234
|
-
var templateObject_1$
|
|
20233
|
+
var Unit = newStyled.p(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
20234
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$f;
|
|
20235
20235
|
|
|
20236
20236
|
var HRS = 'HRS';
|
|
20237
20237
|
var MIN = 'MIN';
|
|
@@ -20274,14 +20274,14 @@ var Timer = function (_a) {
|
|
|
20274
20274
|
|
|
20275
20275
|
var slideInAnimation = function (distanceFromTop) {
|
|
20276
20276
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20277
|
-
return keyframes(templateObject_1$
|
|
20277
|
+
return keyframes(templateObject_1$i || (templateObject_1$i = __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);
|
|
20278
20278
|
};
|
|
20279
20279
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20280
20280
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20281
|
-
return keyframes(templateObject_2$
|
|
20281
|
+
return keyframes(templateObject_2$g || (templateObject_2$g = __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);
|
|
20282
20282
|
};
|
|
20283
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20284
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20283
|
+
var ToastContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
20284
|
+
var ToastContent = newStyled.div(templateObject_4$e || (templateObject_4$e = __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) {
|
|
20285
20285
|
var distanceFromTop = _a.distanceFromTop;
|
|
20286
20286
|
return distanceFromTop || '124px';
|
|
20287
20287
|
}, function (_a) {
|
|
@@ -20294,12 +20294,12 @@ var ToastContent = newStyled.div(templateObject_4$d || (templateObject_4$d = __m
|
|
|
20294
20294
|
var distanceFromTop = _a.distanceFromTop;
|
|
20295
20295
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20296
20296
|
});
|
|
20297
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20297
|
+
var ToastText = newStyled.p(templateObject_5$d || (templateObject_5$d = __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) {
|
|
20298
20298
|
var severity = _a.severity;
|
|
20299
20299
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20300
20300
|
});
|
|
20301
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20302
|
-
var templateObject_1$
|
|
20301
|
+
var CloseIcon = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20302
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$e, templateObject_4$e, templateObject_5$d, templateObject_6$c;
|
|
20303
20303
|
|
|
20304
20304
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20305
20305
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20319,9 +20319,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20319
20319
|
});
|
|
20320
20320
|
Toast.displayName = 'Toast';
|
|
20321
20321
|
|
|
20322
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20323
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20324
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20322
|
+
var Wrapper$1 = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
20323
|
+
var GrandTotal = newStyled.h1(templateObject_2$f || (templateObject_2$f = __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; });
|
|
20324
|
+
var Currency = newStyled.span(templateObject_3$d || (templateObject_3$d = __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) {
|
|
20325
20325
|
var theme = _a.theme;
|
|
20326
20326
|
return theme.component.total.basicTotal.currency.color;
|
|
20327
20327
|
}, function (_a) {
|
|
@@ -20334,21 +20334,21 @@ var Currency = newStyled.span(templateObject_3$c || (templateObject_3$c = __make
|
|
|
20334
20334
|
var theme = _a.theme;
|
|
20335
20335
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20336
20336
|
});
|
|
20337
|
-
var Container$a = newStyled.div(templateObject_4$
|
|
20337
|
+
var Container$a = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20338
20338
|
var highlightColor = _a.highlightColor;
|
|
20339
20339
|
return highlightColor;
|
|
20340
20340
|
});
|
|
20341
|
-
var TotalContainer = newStyled(Container$a)(templateObject_5$
|
|
20341
|
+
var TotalContainer = newStyled(Container$a)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20342
20342
|
var showTotalLabel = _a.showTotalLabel;
|
|
20343
20343
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20344
20344
|
});
|
|
20345
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20346
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20345
|
+
var DiscountText = newStyled.h3(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
20346
|
+
var DiscountAmount = newStyled.h3(templateObject_7$b || (templateObject_7$b = __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) {
|
|
20347
20347
|
var theme = _a.theme;
|
|
20348
20348
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20349
20349
|
});
|
|
20350
20350
|
var TotalLabel = newStyled(Text$7)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20351
|
-
var templateObject_1$
|
|
20351
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$d, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$b, templateObject_8$7;
|
|
20352
20352
|
|
|
20353
20353
|
var Total = function (_a) {
|
|
20354
20354
|
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;
|
|
@@ -20356,19 +20356,19 @@ var Total = function (_a) {
|
|
|
20356
20356
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$a, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20357
20357
|
};
|
|
20358
20358
|
|
|
20359
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20359
|
+
var Wrapper = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20360
20360
|
var color = _a.color;
|
|
20361
20361
|
return color;
|
|
20362
20362
|
});
|
|
20363
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20364
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20363
|
+
var ItemContainer = newStyled.div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
20364
|
+
var Item = newStyled.h4(templateObject_3$c || (templateObject_3$c = __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) {
|
|
20365
20365
|
var theme = _a.theme;
|
|
20366
20366
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20367
20367
|
}, function (_a) {
|
|
20368
20368
|
var theme = _a.theme;
|
|
20369
20369
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20370
20370
|
});
|
|
20371
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20371
|
+
var CouponItem = newStyled(Item)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20372
20372
|
var color = _a.color;
|
|
20373
20373
|
return color;
|
|
20374
20374
|
});
|
|
@@ -20381,26 +20381,26 @@ var Subtotal = function (_a) {
|
|
|
20381
20381
|
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));
|
|
20382
20382
|
})] }), void 0));
|
|
20383
20383
|
};
|
|
20384
|
-
var templateObject_1$
|
|
20384
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c, templateObject_4$c;
|
|
20385
20385
|
|
|
20386
20386
|
var Totals = {
|
|
20387
20387
|
Total: Total,
|
|
20388
20388
|
Subtotal: Subtotal,
|
|
20389
20389
|
};
|
|
20390
20390
|
|
|
20391
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
20392
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20393
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20394
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20395
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20396
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20391
|
+
var Container$9 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20392
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20393
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20394
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20395
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
20396
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$a || (templateObject_6$a = __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) {
|
|
20397
20397
|
return props.finishedTrack
|
|
20398
20398
|
? props.finishedTrackColor
|
|
20399
20399
|
: props.activeTrack
|
|
20400
20400
|
? props.activeTrackColor
|
|
20401
20401
|
: '';
|
|
20402
20402
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20403
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20403
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$a || (templateObject_7$a = __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"])));
|
|
20404
20404
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __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) {
|
|
20405
20405
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20406
20406
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20440,17 +20440,17 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20440
20440
|
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));
|
|
20441
20441
|
})] }), void 0));
|
|
20442
20442
|
};
|
|
20443
|
-
var templateObject_1$
|
|
20444
|
-
|
|
20445
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20446
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20447
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20448
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20449
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20450
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20443
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$b, templateObject_5$b, templateObject_6$a, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$2;
|
|
20444
|
+
|
|
20445
|
+
var Container$8 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20446
|
+
var CheckpointContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20447
|
+
var CheckpointDate = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20448
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20449
|
+
var CheckpointStatus = newStyled.p(templateObject_5$a || (templateObject_5$a = __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'); });
|
|
20450
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$9 || (templateObject_6$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) {
|
|
20451
20451
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20452
20452
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20453
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20453
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __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)'); });
|
|
20454
20454
|
var LastCheckpointTrack = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __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; });
|
|
20455
20455
|
var TrackingProgress = function (_a) {
|
|
20456
20456
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
@@ -20480,9 +20480,9 @@ var TrackingProgress = function (_a) {
|
|
|
20480
20480
|
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));
|
|
20481
20481
|
})] }), void 0));
|
|
20482
20482
|
};
|
|
20483
|
-
var templateObject_1$
|
|
20483
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$a, templateObject_4$a, templateObject_5$a, templateObject_6$9, templateObject_7$9, templateObject_8$5;
|
|
20484
20484
|
|
|
20485
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20485
|
+
var TimerContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20486
20486
|
var textPosition = _a.textPosition;
|
|
20487
20487
|
return textPosition;
|
|
20488
20488
|
}, function (_a) {
|
|
@@ -20495,7 +20495,7 @@ var TimerContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = _
|
|
|
20495
20495
|
var borderRadius = _a.borderRadius;
|
|
20496
20496
|
return borderRadius || '8px';
|
|
20497
20497
|
});
|
|
20498
|
-
var templateObject_1$
|
|
20498
|
+
var templateObject_1$d;
|
|
20499
20499
|
|
|
20500
20500
|
var getDefaultCountdown = function () {
|
|
20501
20501
|
var tomorrowDate = new Date();
|
|
@@ -20511,7 +20511,7 @@ var HurryUp = function (_a) {
|
|
|
20511
20511
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20512
20512
|
};
|
|
20513
20513
|
|
|
20514
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20514
|
+
var Container$7 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20515
20515
|
var size = _a.size;
|
|
20516
20516
|
return (size ? size : '100%');
|
|
20517
20517
|
}, function (_a) {
|
|
@@ -20525,7 +20525,7 @@ var borderSize = {
|
|
|
20525
20525
|
large: '3px',
|
|
20526
20526
|
};
|
|
20527
20527
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20528
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20528
|
+
var StyledSpinner = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20529
20529
|
var size = _a.size;
|
|
20530
20530
|
return borderSize[size];
|
|
20531
20531
|
}, function (_a) {
|
|
@@ -20538,7 +20538,7 @@ var StyledSpinner = newStyled.div(templateObject_2$a || (templateObject_2$a = __
|
|
|
20538
20538
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20539
20539
|
return duration;
|
|
20540
20540
|
});
|
|
20541
|
-
var templateObject_1$
|
|
20541
|
+
var templateObject_1$c, templateObject_2$b;
|
|
20542
20542
|
|
|
20543
20543
|
var Spinner = function (_a) {
|
|
20544
20544
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
@@ -20574,15 +20574,40 @@ var getDropdownOptions = function (frequency) {
|
|
|
20574
20574
|
}); });
|
|
20575
20575
|
};
|
|
20576
20576
|
|
|
20577
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
20578
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_2$
|
|
20579
|
-
var templateObject_1$
|
|
20577
|
+
var Benefit$1 = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
20578
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20579
|
+
var templateObject_1$b, templateObject_2$a;
|
|
20580
20580
|
|
|
20581
20581
|
var BenefitsList = function (_a) {
|
|
20582
20582
|
var benefits = _a.benefits, isSelected = _a.isSelected, selectedColor = _a.selectedColor, baseColor = _a.baseColor;
|
|
20583
20583
|
return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) { return (jsxs$1(Benefit$1, { children: [jsx$1(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
|
|
20584
20584
|
};
|
|
20585
20585
|
|
|
20586
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"])));
|
|
20587
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
20588
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
20589
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
20590
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20591
|
+
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"])));
|
|
20592
|
+
var CheckboxInput = newStyled.input(templateObject_7$8 || (templateObject_7$8 = __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"])));
|
|
20593
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8, templateObject_7$8;
|
|
20594
|
+
|
|
20595
|
+
function AutoshipOfferCard(_a) {
|
|
20596
|
+
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20597
|
+
var _c = useState(false), showMoreBenefits = _c[0], setShowMoreBenefits = _c[1];
|
|
20598
|
+
var _d = useState(isChecked), check = _d[0], setCheck = _d[1];
|
|
20599
|
+
var handleShowMore = function () {
|
|
20600
|
+
setShowMoreBenefits(!showMoreBenefits);
|
|
20601
|
+
};
|
|
20602
|
+
var handleCheckBox = function () {
|
|
20603
|
+
setCheck(!check);
|
|
20604
|
+
if (handleCheckBoxChange) {
|
|
20605
|
+
handleCheckBoxChange(!check);
|
|
20606
|
+
}
|
|
20607
|
+
};
|
|
20608
|
+
return (jsxs$1(AutoShipCardContainerWrapper, { children: [jsxs$1(AutoShipHeaderBarWrapper, { 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), jsxs$1(AutoShipBodyWrapper, { children: [jsxs$1(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [showMoreBenefits ? (jsx$1("span", { children: showMore.openedCopy }, void 0)) : (jsx$1("span", { children: showMore.closedCopy }, void 0)), showMoreBenefits ? (jsx$1(Icon$1, { name: "arrows/chevron_up" }, void 0)) : (jsx$1(Icon$1, { name: "arrows/chevron_down" }, void 0))] }), void 0), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem, { 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));
|
|
20609
|
+
}
|
|
20610
|
+
|
|
20586
20611
|
var ContainerWrapper$1 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20587
20612
|
var ImageWrapper = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20588
20613
|
var ImageComponent = newStyled(Image$3)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
@@ -21335,5 +21360,5 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
21335
21360
|
}, 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));
|
|
21336
21361
|
};
|
|
21337
21362
|
|
|
21338
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21363
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21339
21364
|
//# sourceMappingURL=index.esm.js.map
|