@trafilea/afrodita-components 6.30.2 → 6.31.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 +18 -1
- package/build/index.esm.js +617 -578
- package/build/index.esm.js.map +1 -1
- package/build/index.js +617 -577
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3181,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3181
3181
|
};
|
|
3182
3182
|
}
|
|
3183
3183
|
};
|
|
3184
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
3184
|
+
var Container$1k = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3185
3185
|
var backgroundColor = _a.backgroundColor;
|
|
3186
3186
|
return backgroundColor;
|
|
3187
3187
|
}, function (_a) {
|
|
@@ -3203,7 +3203,7 @@ var Container$1k = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
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$1y || (templateObject_2$1y = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3207
3207
|
var textColor = _a.textColor;
|
|
3208
3208
|
return textColor;
|
|
3209
3209
|
}, function (_a) {
|
|
@@ -3220,7 +3220,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3220
3220
|
var theme = useTheme();
|
|
3221
3221
|
return (jsx$1(Container$1k, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3222
3222
|
};
|
|
3223
|
-
var templateObject_1$
|
|
3223
|
+
var templateObject_1$2e, templateObject_2$1y;
|
|
3224
3224
|
|
|
3225
3225
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3226
3226
|
var _a, _b, _c;
|
|
@@ -3251,7 +3251,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3251
3251
|
};
|
|
3252
3252
|
}
|
|
3253
3253
|
};
|
|
3254
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3254
|
+
var Container$1j = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3255
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3256
3256
|
return backgroundColor;
|
|
3257
3257
|
}, function (_a) {
|
|
@@ -3273,7 +3273,7 @@ var Container$1j = newStyled.div(templateObject_1$2c || (templateObject_1$2c = _
|
|
|
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$1x || (templateObject_2$1x = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3277
3277
|
var textColor = _a.textColor;
|
|
3278
3278
|
return textColor;
|
|
3279
3279
|
}, function (_a) {
|
|
@@ -3290,7 +3290,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3290
3290
|
var theme = useTheme();
|
|
3291
3291
|
return (jsx$1(Container$1j, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3292
3292
|
};
|
|
3293
|
-
var templateObject_1$
|
|
3293
|
+
var templateObject_1$2d, templateObject_2$1x;
|
|
3294
3294
|
|
|
3295
3295
|
var Viewports = {
|
|
3296
3296
|
mobile: 'mobile',
|
|
@@ -3399,8 +3399,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3399
3399
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3400
3400
|
}
|
|
3401
3401
|
};
|
|
3402
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3403
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1i = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1w || (templateObject_2$1w = __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$1v || (templateObject_2$1v = __makeTemp
|
|
|
3424
3424
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3425
3425
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3426
3426
|
});
|
|
3427
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3427
|
+
var TagContainer = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3428
3428
|
var _b;
|
|
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$1i, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3459
3459
|
};
|
|
3460
|
-
var templateObject_1$
|
|
3460
|
+
var templateObject_1$2c, templateObject_2$1w, templateObject_3$1b;
|
|
3461
3461
|
|
|
3462
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __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"]);
|
|
@@ -3530,11 +3530,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3530
3530
|
lineHeight: '22px',
|
|
3531
3531
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3532
3532
|
};
|
|
3533
|
-
var templateObject_1$
|
|
3533
|
+
var templateObject_1$2b;
|
|
3534
3534
|
|
|
3535
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3536
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3537
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3535
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3536
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3537
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3538
3538
|
var PriceLabelV3 = function (_a) {
|
|
3539
3539
|
var _b;
|
|
3540
3540
|
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"]);
|
|
@@ -3605,9 +3605,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3605
3605
|
lineHeight: '22px',
|
|
3606
3606
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3607
3607
|
};
|
|
3608
|
-
var templateObject_1$
|
|
3608
|
+
var templateObject_1$2a, templateObject_2$1v, templateObject_3$1a;
|
|
3609
3609
|
|
|
3610
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3610
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3611
3611
|
var PriceLabel = function (_a) {
|
|
3612
3612
|
var _b;
|
|
3613
3613
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3641,9 +3641,9 @@ var PriceLabel = function (_a) {
|
|
|
3641
3641
|
marginTop: '-6px',
|
|
3642
3642
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3643
3643
|
};
|
|
3644
|
-
var templateObject_1$
|
|
3644
|
+
var templateObject_1$29;
|
|
3645
3645
|
|
|
3646
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3646
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3647
3647
|
var PriceLabelV2 = function (_a) {
|
|
3648
3648
|
var _b;
|
|
3649
3649
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3676,20 +3676,20 @@ var PriceLabelV2 = function (_a) {
|
|
|
3676
3676
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3677
3677
|
return (jsxs$1(Container$1i, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3678
3678
|
};
|
|
3679
|
-
var templateObject_1$
|
|
3679
|
+
var templateObject_1$28;
|
|
3680
3680
|
|
|
3681
|
-
var ContainerWrapper$
|
|
3682
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3683
|
-
var templateObject_1$
|
|
3681
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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"])));
|
|
3682
|
+
var ImgWrapper = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
3683
|
+
var templateObject_1$27, templateObject_2$1u;
|
|
3684
3684
|
|
|
3685
3685
|
function ClubPriceMemberLabel(_a) {
|
|
3686
3686
|
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
3687
|
var color = isClub ? '#882A2B' : '#292929';
|
|
3688
3688
|
var PriceComponent = isPDP ? (jsx$1(PriceLabelV2, { originalPrice: rest.originalPrice, finalPrice: rest.finalPrice, color: color, isClubOffer: isCollections }, void 0)) : (jsx$1(PriceLabel, __assign$1({}, rest, { color: color, isClubOffer: isCollections }), void 0));
|
|
3689
|
-
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$
|
|
3689
|
+
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3690
3690
|
}
|
|
3691
3691
|
|
|
3692
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3692
|
+
var Container$1h = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3693
3693
|
var height = _a.height;
|
|
3694
3694
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3695
3695
|
}, function (_a) {
|
|
@@ -3716,9 +3716,9 @@ var SkeletonBox = function (_a) {
|
|
|
3716
3716
|
var theme = useTheme();
|
|
3717
3717
|
return jsx$1(Container$1h, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3718
3718
|
};
|
|
3719
|
-
var templateObject_1$
|
|
3719
|
+
var templateObject_1$26;
|
|
3720
3720
|
|
|
3721
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3721
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3722
3722
|
var width = _a.width;
|
|
3723
3723
|
return width;
|
|
3724
3724
|
}, function (_a) {
|
|
@@ -3734,7 +3734,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$24 || (templateObject_1$24
|
|
|
3734
3734
|
var opacity = _a.opacity;
|
|
3735
3735
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3736
3736
|
});
|
|
3737
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3737
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3738
3738
|
var width = _a.width;
|
|
3739
3739
|
return width;
|
|
3740
3740
|
}, function (_a) {
|
|
@@ -3747,7 +3747,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1s || (templateObject_2$
|
|
|
3747
3747
|
var opacity = _a.opacity;
|
|
3748
3748
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3749
3749
|
});
|
|
3750
|
-
var templateObject_1$
|
|
3750
|
+
var templateObject_1$25, templateObject_2$1t;
|
|
3751
3751
|
|
|
3752
3752
|
/* eslint-disable no-undef */
|
|
3753
3753
|
var cache = new Map();
|
|
@@ -3923,7 +3923,7 @@ var buildImageUrl = function (_a) {
|
|
|
3923
3923
|
}
|
|
3924
3924
|
};
|
|
3925
3925
|
|
|
3926
|
-
var Img = newStyled.img(templateObject_1$
|
|
3926
|
+
var Img = newStyled.img(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3927
3927
|
var Image$3 = function (_a) {
|
|
3928
3928
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3929
3929
|
var config = useTheme().config;
|
|
@@ -3932,12 +3932,12 @@ var Image$3 = function (_a) {
|
|
|
3932
3932
|
: src;
|
|
3933
3933
|
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3934
3934
|
};
|
|
3935
|
-
var templateObject_1$
|
|
3935
|
+
var templateObject_1$24;
|
|
3936
3936
|
|
|
3937
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3938
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3939
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3940
|
-
var templateObject_1$
|
|
3937
|
+
var LabelWrapper = newStyled.label(templateObject_1$23 || (templateObject_1$23 = __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"])));
|
|
3938
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3939
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3940
|
+
var templateObject_1$23, templateObject_2$1s, templateObject_3$19;
|
|
3941
3941
|
|
|
3942
3942
|
var ToggleComponent = function (_a) {
|
|
3943
3943
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -4771,13 +4771,13 @@ function jsxs(type, props, key) {
|
|
|
4771
4771
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4772
4772
|
// `variants` styles that are consistent through all themes.
|
|
4773
4773
|
var TAGS = {
|
|
4774
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4775
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4776
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4777
|
-
display1: newStyled.h1(templateObject_4$
|
|
4778
|
-
display2: newStyled.h2(templateObject_5$
|
|
4779
|
-
display3: newStyled.h3(templateObject_6$
|
|
4780
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4774
|
+
hero1: newStyled.h1(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""]))),
|
|
4775
|
+
hero2: newStyled.h2(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
hero3: newStyled.h3(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
display1: newStyled.h1(templateObject_4$W || (templateObject_4$W = __makeTemplateObject([""], [""]))),
|
|
4778
|
+
display2: newStyled.h2(templateObject_5$H || (templateObject_5$H = __makeTemplateObject([""], [""]))),
|
|
4779
|
+
display3: newStyled.h3(templateObject_6$C || (templateObject_6$C = __makeTemplateObject([""], [""]))),
|
|
4780
|
+
heading1: newStyled.h1(templateObject_7$s || (templateObject_7$s = __makeTemplateObject([""], [""]))),
|
|
4781
4781
|
heading2: newStyled.h2(templateObject_8$m || (templateObject_8$m = __makeTemplateObject([""], [""]))),
|
|
4782
4782
|
heading3: newStyled.h3(templateObject_9$c || (templateObject_9$c = __makeTemplateObject([""], [""]))),
|
|
4783
4783
|
heading4: newStyled.h4(templateObject_10$b || (templateObject_10$b = __makeTemplateObject([""], [""]))),
|
|
@@ -4907,14 +4907,14 @@ var DEFAULTS = {
|
|
|
4907
4907
|
size: 'regular',
|
|
4908
4908
|
},
|
|
4909
4909
|
};
|
|
4910
|
-
var templateObject_1$
|
|
4911
|
-
|
|
4912
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
4913
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4914
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4915
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
4916
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4917
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4910
|
+
var templateObject_1$22, templateObject_2$1r, templateObject_3$18, templateObject_4$W, templateObject_5$H, templateObject_6$C, templateObject_7$s, templateObject_8$m, templateObject_9$c, templateObject_10$b, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4911
|
+
|
|
4912
|
+
var Container$1g = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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"])));
|
|
4913
|
+
var Card$4 = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4914
|
+
var Tag$2 = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4915
|
+
var Label$7 = newStyled.div(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4916
|
+
var Check$1 = newStyled.div(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4917
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$B || (templateObject_6$B = __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"])));
|
|
4918
4918
|
var PackSelectorV2 = function (_a) {
|
|
4919
4919
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4920
4920
|
return (jsx$1(Container$1g, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4939,27 +4939,27 @@ var PackCard$1 = function (_a) {
|
|
|
4939
4939
|
currency: currencyCode || 'USD',
|
|
4940
4940
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4941
4941
|
};
|
|
4942
|
-
var templateObject_1$
|
|
4942
|
+
var templateObject_1$21, templateObject_2$1q, templateObject_3$17, templateObject_4$V, templateObject_5$G, templateObject_6$B;
|
|
4943
4943
|
|
|
4944
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4945
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4944
|
+
var Container$1f = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4945
|
+
var DropContainer = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4946
4946
|
var DropList = function (_a) {
|
|
4947
4947
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4948
4948
|
return (jsx$1(Container$1f, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4949
4949
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4950
4950
|
}) }, void 0));
|
|
4951
4951
|
};
|
|
4952
|
-
var templateObject_1$
|
|
4952
|
+
var templateObject_1$20, templateObject_2$1p;
|
|
4953
4953
|
|
|
4954
4954
|
var DROPS_TOTAL = 5;
|
|
4955
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4956
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4957
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4955
|
+
var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4956
|
+
var Title$b = newStyled.p(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4957
|
+
var Description$3 = newStyled.p(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4958
4958
|
var AbsorbencyLevel = function (_a) {
|
|
4959
4959
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4960
4960
|
return (jsxs$1(Container$1e, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4961
4961
|
};
|
|
4962
|
-
var templateObject_1$
|
|
4962
|
+
var templateObject_1$1$, templateObject_2$1o, templateObject_3$16;
|
|
4963
4963
|
|
|
4964
4964
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4965
4965
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5035,7 +5035,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5035
5035
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5036
5036
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5037
5037
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5038
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5038
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5039
5039
|
var Accordion$1 = function (_a) {
|
|
5040
5040
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5041
5041
|
var theme = useTheme();
|
|
@@ -5059,9 +5059,9 @@ var Accordion$1 = function (_a) {
|
|
|
5059
5059
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5060
5060
|
} }), void 0));
|
|
5061
5061
|
};
|
|
5062
|
-
var templateObject_1$
|
|
5062
|
+
var templateObject_1$1_;
|
|
5063
5063
|
|
|
5064
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
5064
|
+
var Container$1d = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5065
5065
|
var AccordionOptions = function (_a) {
|
|
5066
5066
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5067
5067
|
var _b = useState({
|
|
@@ -5085,7 +5085,7 @@ var AccordionOptions = function (_a) {
|
|
|
5085
5085
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5086
5086
|
}) }, void 0));
|
|
5087
5087
|
};
|
|
5088
|
-
var templateObject_1$
|
|
5088
|
+
var templateObject_1$1Z;
|
|
5089
5089
|
|
|
5090
5090
|
/**
|
|
5091
5091
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5221,22 +5221,22 @@ var isValidDate = function (value) {
|
|
|
5221
5221
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5222
5222
|
};
|
|
5223
5223
|
|
|
5224
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5225
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5226
|
-
var templateObject_1$
|
|
5224
|
+
var Bold = newStyled.span(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5225
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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"])));
|
|
5226
|
+
var templateObject_1$1Y, templateObject_2$1n;
|
|
5227
5227
|
|
|
5228
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5228
|
+
var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5229
5229
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5230
5230
|
return width;
|
|
5231
5231
|
}, function (_a) {
|
|
5232
5232
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5233
5233
|
return height;
|
|
5234
5234
|
});
|
|
5235
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5236
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5237
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5238
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5239
|
-
var templateObject_1$
|
|
5235
|
+
var FlexCentered = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5236
|
+
var LeftSide = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5237
|
+
var RightSide = newStyled.div(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5238
|
+
var FlexStart = newStyled.div(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5239
|
+
var templateObject_1$1X, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F;
|
|
5240
5240
|
|
|
5241
5241
|
var CouponCard = function (_a) {
|
|
5242
5242
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5292,14 +5292,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5292
5292
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5293
5293
|
};
|
|
5294
5294
|
|
|
5295
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5296
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5295
|
+
var ErrorText = newStyled.h3(templateObject_1$1W || (templateObject_1$1W = __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; });
|
|
5296
|
+
var ErrorContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5297
5297
|
var Error$1 = function (_a) {
|
|
5298
5298
|
var error = _a.error;
|
|
5299
5299
|
var theme = useTheme();
|
|
5300
5300
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5301
5301
|
};
|
|
5302
|
-
var templateObject_1$
|
|
5302
|
+
var templateObject_1$1W, templateObject_2$1l;
|
|
5303
5303
|
|
|
5304
5304
|
var BaseSelectButton = function (_a) {
|
|
5305
5305
|
var children = _a.children, as = _a.as;
|
|
@@ -5316,7 +5316,7 @@ function BaseSelectOption(_a) {
|
|
|
5316
5316
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5317
5317
|
}
|
|
5318
5318
|
|
|
5319
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5319
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5320
5320
|
function BaseSelect(_a) {
|
|
5321
5321
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5322
5322
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5326,7 +5326,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5326
5326
|
Options: BaseSelectOptions,
|
|
5327
5327
|
Option: BaseSelectOption,
|
|
5328
5328
|
});
|
|
5329
|
-
var templateObject_1$
|
|
5329
|
+
var templateObject_1$1V;
|
|
5330
5330
|
|
|
5331
5331
|
var CustomButton = newStyled.button(function (_a) {
|
|
5332
5332
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5365,7 +5365,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5365
5365
|
});
|
|
5366
5366
|
});
|
|
5367
5367
|
// TODO Remove this when we find the real solution
|
|
5368
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5368
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5369
5369
|
var open = _a.open;
|
|
5370
5370
|
return open &&
|
|
5371
5371
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5385,7 +5385,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5385
5385
|
} }), void 0));
|
|
5386
5386
|
};
|
|
5387
5387
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5388
|
-
var templateObject_1$
|
|
5388
|
+
var templateObject_1$1U;
|
|
5389
5389
|
|
|
5390
5390
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5391
5391
|
var theme = _a.theme;
|
|
@@ -5552,7 +5552,7 @@ var CustomCheckboxStyles = {
|
|
|
5552
5552
|
},
|
|
5553
5553
|
};
|
|
5554
5554
|
|
|
5555
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5555
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5556
5556
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5557
5557
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5558
5558
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5563,7 +5563,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5563
5563
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5564
5564
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5565
5565
|
]; });
|
|
5566
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5566
|
+
var Input$5 = newStyled.input(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5567
5567
|
var disabled = _a.disabled;
|
|
5568
5568
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5569
5569
|
});
|
|
@@ -5579,7 +5579,7 @@ var Checkbox = function (_a) {
|
|
|
5579
5579
|
};
|
|
5580
5580
|
return (jsxs$1(Container$1b, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5581
5581
|
};
|
|
5582
|
-
var templateObject_1$
|
|
5582
|
+
var templateObject_1$1T, templateObject_2$1k;
|
|
5583
5583
|
|
|
5584
5584
|
var CustomOption = newStyled.li(function (_a) {
|
|
5585
5585
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5628,9 +5628,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5628
5628
|
Option: BaseDropdownOption,
|
|
5629
5629
|
});
|
|
5630
5630
|
|
|
5631
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5632
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5633
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5631
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject([""], [""])));
|
|
5632
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5633
|
+
var SelectedOption = newStyled.span(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5634
5634
|
var fontWeight = _a.fontWeight;
|
|
5635
5635
|
return fontWeight || '';
|
|
5636
5636
|
});
|
|
@@ -5665,7 +5665,7 @@ function SimpleDropdown(_a) {
|
|
|
5665
5665
|
var DropdownContainer = showRequiredPlaceholder ? Container$1a : Fragment$1;
|
|
5666
5666
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5667
5667
|
}
|
|
5668
|
-
var templateObject_1$
|
|
5668
|
+
var templateObject_1$1S, templateObject_2$1j, templateObject_3$14;
|
|
5669
5669
|
|
|
5670
5670
|
/* base styles & size variants */
|
|
5671
5671
|
var CustomRadioStyles$2 = {
|
|
@@ -5730,9 +5730,9 @@ var ContainerStyles$2 = {
|
|
|
5730
5730
|
},
|
|
5731
5731
|
};
|
|
5732
5732
|
|
|
5733
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5733
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5734
5734
|
var Container$19 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5735
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5735
|
+
var Input$4 = newStyled.input(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5736
5736
|
var disabled = _a.disabled;
|
|
5737
5737
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5738
5738
|
});
|
|
@@ -5740,14 +5740,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5740
5740
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5741
5741
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5742
5742
|
]; });
|
|
5743
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5743
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5744
5744
|
var theme = _a.theme;
|
|
5745
5745
|
return theme.component.radio.textSize;
|
|
5746
5746
|
}, function (_a) {
|
|
5747
5747
|
var theme = _a.theme;
|
|
5748
5748
|
return theme.component.radio.lineHeight;
|
|
5749
5749
|
});
|
|
5750
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5750
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5751
5751
|
var theme = _a.theme;
|
|
5752
5752
|
return theme.component.radio.textSize;
|
|
5753
5753
|
}, function (_a) {
|
|
@@ -5763,7 +5763,7 @@ var RadioInput = function (_a) {
|
|
|
5763
5763
|
};
|
|
5764
5764
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$19, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5765
5765
|
};
|
|
5766
|
-
var templateObject_1$
|
|
5766
|
+
var templateObject_1$1R, templateObject_2$1i, templateObject_3$13, templateObject_4$T;
|
|
5767
5767
|
|
|
5768
5768
|
var useOnClickOutside = function (ref, handler) {
|
|
5769
5769
|
useEffect(function () {
|
|
@@ -5856,7 +5856,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5856
5856
|
}
|
|
5857
5857
|
};
|
|
5858
5858
|
|
|
5859
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5859
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5860
5860
|
var position = _a.position;
|
|
5861
5861
|
return getWrapperFlexDirection(position);
|
|
5862
5862
|
}, function (_a) {
|
|
@@ -5866,7 +5866,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __ma
|
|
|
5866
5866
|
var disableHover = _a.disableHover;
|
|
5867
5867
|
return (disableHover ? 0 : 1);
|
|
5868
5868
|
});
|
|
5869
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5869
|
+
var TooltipContainer = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5870
5870
|
var position = _a.position;
|
|
5871
5871
|
return getContainerFlexDirection(position);
|
|
5872
5872
|
}, function (_a) {
|
|
@@ -5894,14 +5894,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g
|
|
|
5894
5894
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5895
5895
|
return actual === expected ? margin : '0';
|
|
5896
5896
|
};
|
|
5897
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5897
|
+
var ContentWrapper = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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) {
|
|
5898
5898
|
var borderColor = _a.borderColor;
|
|
5899
5899
|
return borderColor;
|
|
5900
5900
|
}, function (_a) {
|
|
5901
5901
|
var backgroundColor = _a.backgroundColor;
|
|
5902
5902
|
return backgroundColor;
|
|
5903
5903
|
});
|
|
5904
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5904
|
+
var TooltipText = newStyled.div(templateObject_4$S || (templateObject_4$S = __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) {
|
|
5905
5905
|
var theme = _a.theme;
|
|
5906
5906
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5907
5907
|
}, function (_a) {
|
|
@@ -5911,17 +5911,17 @@ var TooltipText = newStyled.div(templateObject_4$R || (templateObject_4$R = __ma
|
|
|
5911
5911
|
var color = _a.color;
|
|
5912
5912
|
return color;
|
|
5913
5913
|
});
|
|
5914
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5915
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5914
|
+
var TopSection = newStyled.div(templateObject_5$E || (templateObject_5$E = __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"])));
|
|
5915
|
+
var Title$a = newStyled.h1(templateObject_6$A || (templateObject_6$A = __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) {
|
|
5916
5916
|
var color = _a.color;
|
|
5917
5917
|
return color;
|
|
5918
5918
|
});
|
|
5919
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5919
|
+
var IconContainer$5 = newStyled.div(templateObject_7$r || (templateObject_7$r = __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"])));
|
|
5920
5920
|
var CloseToolTip = newStyled.button(templateObject_8$l || (templateObject_8$l = __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) {
|
|
5921
5921
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5922
5922
|
return right;
|
|
5923
5923
|
});
|
|
5924
|
-
var templateObject_1$
|
|
5924
|
+
var templateObject_1$1Q, templateObject_2$1h, templateObject_3$12, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$l;
|
|
5925
5925
|
|
|
5926
5926
|
var Tooltip = function (_a) {
|
|
5927
5927
|
var _b;
|
|
@@ -5964,8 +5964,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5964
5964
|
};
|
|
5965
5965
|
};
|
|
5966
5966
|
|
|
5967
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5968
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5967
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5968
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5969
5969
|
var selected = _a.selected, theme = _a.theme;
|
|
5970
5970
|
return selected
|
|
5971
5971
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5979,20 +5979,20 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
5979
5979
|
var theme = _a.theme;
|
|
5980
5980
|
return theme.colors.pallete.primary.color;
|
|
5981
5981
|
});
|
|
5982
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$
|
|
5982
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$11 || (templateObject_3$11 = __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) {
|
|
5983
5983
|
var onClick = _a.onClick;
|
|
5984
5984
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5985
5985
|
});
|
|
5986
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
5987
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
5986
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5987
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_5$D || (templateObject_5$D = __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) {
|
|
5988
5988
|
var theme = _a.theme;
|
|
5989
5989
|
return theme.colors.shades[200].color;
|
|
5990
5990
|
}, function (_a) {
|
|
5991
5991
|
var theme = _a.theme;
|
|
5992
5992
|
return theme.colors.pallete.primary.color;
|
|
5993
5993
|
});
|
|
5994
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
5995
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
5994
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5995
|
+
var Benefit$2 = newStyled.div(templateObject_7$q || (templateObject_7$q = __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"])));
|
|
5996
5996
|
var BenefitText$2 = newStyled(Text$7)(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5997
5997
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5998
5998
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -6002,7 +6002,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6002
6002
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6003
6003
|
});
|
|
6004
6004
|
var Container$18 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6005
|
-
var templateObject_1$
|
|
6005
|
+
var templateObject_1$1P, templateObject_2$1g, templateObject_3$11, templateObject_4$R, templateObject_5$D, templateObject_6$z, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6006
6006
|
|
|
6007
6007
|
var radioIds$2 = {
|
|
6008
6008
|
oneTime: {
|
|
@@ -6057,12 +6057,12 @@ var Autoship = function (_a) {
|
|
|
6057
6057
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$2, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6058
6058
|
};
|
|
6059
6059
|
|
|
6060
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6060
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6061
6061
|
var theme = _a.theme;
|
|
6062
6062
|
return theme.name === 'TheSpaDr' &&
|
|
6063
6063
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6064
6064
|
});
|
|
6065
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6065
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6066
6066
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6067
6067
|
return isSelected
|
|
6068
6068
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6078,7 +6078,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6078
6078
|
}
|
|
6079
6079
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6080
6080
|
};
|
|
6081
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6081
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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) {
|
|
6082
6082
|
var selected = _a.selected, theme = _a.theme;
|
|
6083
6083
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6084
6084
|
}, function (_a) {
|
|
@@ -6090,19 +6090,19 @@ var ContainerBase$1 = newStyled.div(templateObject_3$$ || (templateObject_3$$ =
|
|
|
6090
6090
|
var theme = _a.theme;
|
|
6091
6091
|
return theme.colors.pallete.primary.color;
|
|
6092
6092
|
});
|
|
6093
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6093
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$Q || (templateObject_4$Q = __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) {
|
|
6094
6094
|
var onClick = _a.onClick;
|
|
6095
6095
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6096
6096
|
});
|
|
6097
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6098
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6097
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6098
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$y || (templateObject_6$y = __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) {
|
|
6099
6099
|
var theme = _a.theme;
|
|
6100
6100
|
return theme.colors.shades[200].color;
|
|
6101
6101
|
}, function (_a) {
|
|
6102
6102
|
var theme = _a.theme;
|
|
6103
6103
|
return theme.colors.pallete.primary.color;
|
|
6104
6104
|
});
|
|
6105
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6105
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6106
6106
|
var Benefit$1 = newStyled.div(templateObject_8$j || (templateObject_8$j = __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"])));
|
|
6107
6107
|
var BenefitText$1 = newStyled(Text$7)(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6108
6108
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$9 || (templateObject_10$9 = __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"])));
|
|
@@ -6115,7 +6115,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$3 || (templateObject_13$3 =
|
|
|
6115
6115
|
var theme = _a.theme;
|
|
6116
6116
|
return theme.component.autoship.tooltip.margin;
|
|
6117
6117
|
});
|
|
6118
|
-
var templateObject_1$
|
|
6118
|
+
var templateObject_1$1O, templateObject_2$1f, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6119
6119
|
|
|
6120
6120
|
var radioIds$1 = {
|
|
6121
6121
|
oneTime: {
|
|
@@ -6193,13 +6193,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6193
6193
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6194
6194
|
_a$2);
|
|
6195
6195
|
|
|
6196
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6197
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6198
|
-
var Name = newStyled.h4(templateObject_3
|
|
6199
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6200
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6201
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6202
|
-
var templateObject_1$
|
|
6196
|
+
var CustomerDetails = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""])));
|
|
6197
|
+
var CustomerInfo = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6198
|
+
var Name = newStyled.h4(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6199
|
+
var StarIconContainer = newStyled.div(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6200
|
+
var Description$2 = newStyled.p(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6201
|
+
var ReviewDays = newStyled.span(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6202
|
+
var templateObject_1$1N, templateObject_2$1e, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x;
|
|
6203
6203
|
|
|
6204
6204
|
var NameWithStars = function (_a) {
|
|
6205
6205
|
var name = _a.name, size = _a.size;
|
|
@@ -6217,10 +6217,10 @@ var ResultFeedback = function (_a) {
|
|
|
6217
6217
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6218
6218
|
};
|
|
6219
6219
|
|
|
6220
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
6221
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6222
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6223
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6220
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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; });
|
|
6221
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6222
|
+
var ImageCard = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6223
|
+
var UserInfoText = newStyled.div(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6224
6224
|
var theme = _a.theme;
|
|
6225
6225
|
return theme.colors.pallete.secondary.color;
|
|
6226
6226
|
}, function (_a) {
|
|
@@ -6230,7 +6230,7 @@ var UserInfoText = newStyled.div(templateObject_4$N || (templateObject_4$N = __m
|
|
|
6230
6230
|
var theme = _a.theme, size = _a.size;
|
|
6231
6231
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6232
6232
|
});
|
|
6233
|
-
var templateObject_1$
|
|
6233
|
+
var templateObject_1$1M, templateObject_2$1d, templateObject_3$_, templateObject_4$O;
|
|
6234
6234
|
|
|
6235
6235
|
/* base styles & size variants */
|
|
6236
6236
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6308,7 +6308,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6308
6308
|
return (jsxs$1(Container$16, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6309
6309
|
};
|
|
6310
6310
|
|
|
6311
|
-
var Section = newStyled.div(templateObject_1$
|
|
6311
|
+
var Section = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6312
6312
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6313
6313
|
});
|
|
6314
6314
|
var CardHeader = function (_a) {
|
|
@@ -6319,16 +6319,16 @@ var CardFooter = function (_a) {
|
|
|
6319
6319
|
var children = _a.children;
|
|
6320
6320
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6321
6321
|
};
|
|
6322
|
-
var templateObject_1$
|
|
6322
|
+
var templateObject_1$1L;
|
|
6323
6323
|
|
|
6324
|
-
var Body = newStyled.div(templateObject_1$
|
|
6324
|
+
var Body = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6325
6325
|
var CardBody$1 = function (_a) {
|
|
6326
6326
|
var children = _a.children;
|
|
6327
6327
|
return jsx$1(Body, { children: children }, void 0);
|
|
6328
6328
|
};
|
|
6329
|
-
var templateObject_1$
|
|
6329
|
+
var templateObject_1$1K;
|
|
6330
6330
|
|
|
6331
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6331
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6332
6332
|
var flex = _a.flex;
|
|
6333
6333
|
return flex &&
|
|
6334
6334
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6350,16 +6350,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6350
6350
|
Footer: CardFooter,
|
|
6351
6351
|
Body: CardBody$1,
|
|
6352
6352
|
});
|
|
6353
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1J;
|
|
6354
6354
|
|
|
6355
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6356
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6357
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6355
|
+
var StyledWrapper = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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"])));
|
|
6356
|
+
var StyledContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6357
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6358
6358
|
var color = _a.color;
|
|
6359
6359
|
return color;
|
|
6360
6360
|
});
|
|
6361
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6362
|
-
var templateObject_1$
|
|
6361
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6362
|
+
var templateObject_1$1I, templateObject_2$1c, templateObject_3$Z, templateObject_4$N;
|
|
6363
6363
|
|
|
6364
6364
|
var Minimalistic = function (_a) {
|
|
6365
6365
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6367,28 +6367,28 @@ var Minimalistic = function (_a) {
|
|
|
6367
6367
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6368
6368
|
};
|
|
6369
6369
|
|
|
6370
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6371
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6372
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6373
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6370
|
+
var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6371
|
+
var Title$9 = newStyled.h1(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6372
|
+
var Details$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6373
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6374
6374
|
var Simple = function (_a) {
|
|
6375
6375
|
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;
|
|
6376
6376
|
var theme = useTheme();
|
|
6377
6377
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$14, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6378
6378
|
};
|
|
6379
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1H, templateObject_2$1b, templateObject_3$Y, templateObject_4$M;
|
|
6380
6380
|
|
|
6381
6381
|
var Bundle = {
|
|
6382
6382
|
Minimalistic: Minimalistic,
|
|
6383
6383
|
Simple: Simple,
|
|
6384
6384
|
};
|
|
6385
6385
|
|
|
6386
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6386
|
+
var Container$13 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6387
6387
|
var displayBNPL = _a.displayBNPL;
|
|
6388
6388
|
return (displayBNPL ? 'flex' : 'none');
|
|
6389
6389
|
});
|
|
6390
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6391
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6390
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6391
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6392
6392
|
var BuyNowPayLater = function (_a) {
|
|
6393
6393
|
var _b;
|
|
6394
6394
|
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;
|
|
@@ -6400,41 +6400,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6400
6400
|
}
|
|
6401
6401
|
return (jsx$1(Container$13, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6402
6402
|
};
|
|
6403
|
-
var templateObject_1$
|
|
6403
|
+
var templateObject_1$1G, templateObject_2$1a, templateObject_3$X;
|
|
6404
6404
|
|
|
6405
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6405
|
+
var Text$6 = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6406
6406
|
var Title$8 = function (_a) {
|
|
6407
6407
|
var title = _a.title;
|
|
6408
6408
|
var theme = useTheme();
|
|
6409
6409
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6410
6410
|
};
|
|
6411
|
-
var templateObject_1$
|
|
6411
|
+
var templateObject_1$1F;
|
|
6412
6412
|
|
|
6413
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6413
|
+
var P$3 = newStyled.p(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6414
6414
|
var Promo = function (_a) {
|
|
6415
6415
|
var text = _a.text;
|
|
6416
6416
|
var theme = useTheme();
|
|
6417
6417
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6418
6418
|
};
|
|
6419
|
-
var templateObject_1$
|
|
6419
|
+
var templateObject_1$1E;
|
|
6420
6420
|
|
|
6421
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6421
|
+
var Text$5 = newStyled.span(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6422
6422
|
var Description$1 = function (_a) {
|
|
6423
6423
|
var text = _a.text;
|
|
6424
6424
|
var theme = useTheme();
|
|
6425
6425
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6426
6426
|
};
|
|
6427
|
-
var templateObject_1$
|
|
6427
|
+
var templateObject_1$1D;
|
|
6428
6428
|
|
|
6429
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6429
|
+
var Container$12 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6430
6430
|
var CloseButton$1 = function (_a) {
|
|
6431
6431
|
var onClick = _a.onClick, size = _a.size;
|
|
6432
6432
|
var theme = useTheme();
|
|
6433
6433
|
return (jsx$1(Container$12, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6434
6434
|
};
|
|
6435
|
-
var templateObject_1$
|
|
6435
|
+
var templateObject_1$1C;
|
|
6436
6436
|
|
|
6437
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6437
|
+
var Text$4 = newStyled.h3(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6438
6438
|
var backgroundColor = _a.backgroundColor;
|
|
6439
6439
|
return backgroundColor;
|
|
6440
6440
|
}, function (_a) {
|
|
@@ -6449,7 +6449,7 @@ var OfferBanner = function (_a) {
|
|
|
6449
6449
|
var theme = useTheme();
|
|
6450
6450
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6451
6451
|
};
|
|
6452
|
-
var templateObject_1$
|
|
6452
|
+
var templateObject_1$1B;
|
|
6453
6453
|
|
|
6454
6454
|
var CartProductItem = {
|
|
6455
6455
|
Title: Title$8,
|
|
@@ -6459,20 +6459,20 @@ var CartProductItem = {
|
|
|
6459
6459
|
CloseButton: CloseButton$1,
|
|
6460
6460
|
};
|
|
6461
6461
|
|
|
6462
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6463
|
-
var MobileContainer = newStyled(Container$11)(templateObject_2$
|
|
6464
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6465
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6466
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6467
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6468
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6462
|
+
var Container$11 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
6463
|
+
var MobileContainer = newStyled(Container$11)(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6464
|
+
var DollarPart = newStyled.span(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6465
|
+
var ClubMembersText = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6466
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6467
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6468
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6469
6469
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6470
6470
|
var ClubPriceLabel = function (_a) {
|
|
6471
6471
|
var clubPrice = _a.clubPrice;
|
|
6472
6472
|
var isMobile = useWindowDimensions().isMobile;
|
|
6473
6473
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$11, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6474
6474
|
};
|
|
6475
|
-
var templateObject_1$
|
|
6475
|
+
var templateObject_1$1A, templateObject_2$19, templateObject_3$W, templateObject_4$L, templateObject_5$A, templateObject_6$w, templateObject_7$o, templateObject_8$i;
|
|
6476
6476
|
|
|
6477
6477
|
var Spacing = function (_a) {
|
|
6478
6478
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6480,10 +6480,10 @@ var Spacing = function (_a) {
|
|
|
6480
6480
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6481
6481
|
};
|
|
6482
6482
|
|
|
6483
|
-
var Container$10 = newStyled('div')(templateObject_1$
|
|
6484
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6485
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6486
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6483
|
+
var Container$10 = newStyled('div')(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
6484
|
+
var Content$2 = newStyled('div')(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6485
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6486
|
+
var Bar$2 = newStyled('div')(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6487
6487
|
var index = _a.index;
|
|
6488
6488
|
return "".concat(6 + 3 * index, "px");
|
|
6489
6489
|
}, function (_a) {
|
|
@@ -6494,13 +6494,13 @@ var StrengthBars = function (_a) {
|
|
|
6494
6494
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6495
6495
|
return (jsxs$1(Container$10, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6496
6496
|
};
|
|
6497
|
-
var templateObject_1$
|
|
6497
|
+
var templateObject_1$1z, templateObject_2$18, templateObject_3$V, templateObject_4$K;
|
|
6498
6498
|
|
|
6499
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6500
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6501
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6502
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6503
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6499
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6500
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6501
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6502
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6503
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6504
6504
|
var RegularPriceTag = function () {
|
|
6505
6505
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6506
6506
|
};
|
|
@@ -6553,12 +6553,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6553
6553
|
? finalPriceArray[0]
|
|
6554
6554
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6555
6555
|
};
|
|
6556
|
-
var templateObject_1$
|
|
6556
|
+
var templateObject_1$1y, templateObject_2$17, templateObject_3$U, templateObject_4$J, templateObject_5$z;
|
|
6557
6557
|
|
|
6558
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
6559
|
-
var templateObject_1$
|
|
6558
|
+
var Container$$ = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6559
|
+
var templateObject_1$1x;
|
|
6560
6560
|
|
|
6561
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6561
|
+
var StarContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6562
6562
|
var marginRight = _a.marginRight;
|
|
6563
6563
|
return marginRight;
|
|
6564
6564
|
});
|
|
@@ -6574,7 +6574,7 @@ var StarList = function (_a) {
|
|
|
6574
6574
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6575
6575
|
}) }, void 0));
|
|
6576
6576
|
};
|
|
6577
|
-
var templateObject_1$
|
|
6577
|
+
var templateObject_1$1w;
|
|
6578
6578
|
|
|
6579
6579
|
/* base styles & size variants */
|
|
6580
6580
|
var LabelStyles = {
|
|
@@ -6615,8 +6615,8 @@ var LabelStyles = {
|
|
|
6615
6615
|
});
|
|
6616
6616
|
},
|
|
6617
6617
|
};
|
|
6618
|
-
var Container$_ = newStyled.a(templateObject_1$
|
|
6619
|
-
var templateObject_1$
|
|
6618
|
+
var Container$_ = newStyled.a(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
6619
|
+
var templateObject_1$1v;
|
|
6620
6620
|
|
|
6621
6621
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6622
6622
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6636,7 +6636,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6636
6636
|
}),
|
|
6637
6637
|
];
|
|
6638
6638
|
});
|
|
6639
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6639
|
+
var RatingLabel = newStyled.span(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
6640
6640
|
var starsNumber = 5;
|
|
6641
6641
|
var Rating = function (_a) {
|
|
6642
6642
|
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;
|
|
@@ -6659,7 +6659,7 @@ var Rating = function (_a) {
|
|
|
6659
6659
|
: {};
|
|
6660
6660
|
return (jsxs$1(Container$_, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6661
6661
|
};
|
|
6662
|
-
var templateObject_1$
|
|
6662
|
+
var templateObject_1$1u;
|
|
6663
6663
|
|
|
6664
6664
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6665
6665
|
var width = _a.width, height = _a.height;
|
|
@@ -6669,10 +6669,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6669
6669
|
height: height,
|
|
6670
6670
|
});
|
|
6671
6671
|
});
|
|
6672
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6673
|
-
var Container$Z = newStyled.a(templateObject_2$
|
|
6674
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6675
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6672
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6673
|
+
var Container$Z = newStyled.a(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6674
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6675
|
+
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size: 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; });
|
|
6676
6676
|
var getStylesBySize$c = function (size) {
|
|
6677
6677
|
switch (size) {
|
|
6678
6678
|
case ComponentSize.Medium:
|
|
@@ -6698,17 +6698,17 @@ var getStylesBySize$c = function (size) {
|
|
|
6698
6698
|
};
|
|
6699
6699
|
}
|
|
6700
6700
|
};
|
|
6701
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6701
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$y || (templateObject_5$y = __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) {
|
|
6702
6702
|
var style = _a.style;
|
|
6703
6703
|
return style.width;
|
|
6704
6704
|
});
|
|
6705
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6705
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$v || (templateObject_6$v = __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) {
|
|
6706
6706
|
var style = _a.style;
|
|
6707
6707
|
return style.width;
|
|
6708
6708
|
});
|
|
6709
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6709
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6710
6710
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6711
|
-
var templateObject_1$
|
|
6711
|
+
var templateObject_1$1t, templateObject_2$16, templateObject_3$T, templateObject_4$I, templateObject_5$y, templateObject_6$v, templateObject_7$n, templateObject_8$h;
|
|
6712
6712
|
|
|
6713
6713
|
var ProductItemMobile = function (_a) {
|
|
6714
6714
|
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 ? {
|
|
@@ -6783,10 +6783,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6783
6783
|
height: height,
|
|
6784
6784
|
});
|
|
6785
6785
|
});
|
|
6786
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6787
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6788
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6789
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6786
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
6787
|
+
var Container$Y = newStyled.a(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
6788
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
6789
|
+
var Title$6 = newStyled.p(templateObject_4$H || (templateObject_4$H = __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; });
|
|
6790
6790
|
var getStylesBySize$b = function (size) {
|
|
6791
6791
|
switch (size) {
|
|
6792
6792
|
case ComponentSize.Medium:
|
|
@@ -6812,12 +6812,12 @@ var getStylesBySize$b = function (size) {
|
|
|
6812
6812
|
};
|
|
6813
6813
|
}
|
|
6814
6814
|
};
|
|
6815
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6815
|
+
var TopTagContainer$7 = newStyled.div(templateObject_5$x || (templateObject_5$x = __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) {
|
|
6816
6816
|
var style = _a.style;
|
|
6817
6817
|
return style.width;
|
|
6818
6818
|
});
|
|
6819
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6820
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6819
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
6820
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$m || (templateObject_7$m = __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) {
|
|
6821
6821
|
var style = _a.style;
|
|
6822
6822
|
return style.width;
|
|
6823
6823
|
});
|
|
@@ -6872,9 +6872,9 @@ var ProductItemTK = function (_a) {
|
|
|
6872
6872
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6873
6873
|
} }, { 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));
|
|
6874
6874
|
};
|
|
6875
|
-
var templateObject_1$
|
|
6875
|
+
var templateObject_1$1s, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x, templateObject_6$u, templateObject_7$m, templateObject_8$g;
|
|
6876
6876
|
|
|
6877
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
6877
|
+
var Container$X = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"])));
|
|
6878
6878
|
function withProductGrid(ProductItemComponent, data) {
|
|
6879
6879
|
function WithProductGrid(props) {
|
|
6880
6880
|
return (jsx$1(Container$X, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6884,7 +6884,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6884
6884
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6885
6885
|
return WithProductGrid;
|
|
6886
6886
|
}
|
|
6887
|
-
var templateObject_1$
|
|
6887
|
+
var templateObject_1$1r;
|
|
6888
6888
|
|
|
6889
6889
|
var Collection = {
|
|
6890
6890
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6931,11 +6931,11 @@ var OutOfStock = function (_a) {
|
|
|
6931
6931
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6932
6932
|
};
|
|
6933
6933
|
|
|
6934
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6935
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6936
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6937
|
-
var Span = newStyled.span(templateObject_4$
|
|
6938
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6934
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6935
|
+
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6936
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6937
|
+
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6938
|
+
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6939
6939
|
var Label$5 = function (_a) {
|
|
6940
6940
|
var label = _a.label, values = _a.values;
|
|
6941
6941
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6953,23 +6953,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6953
6953
|
Option: Option,
|
|
6954
6954
|
OptionsContainer: OptionsContainer,
|
|
6955
6955
|
});
|
|
6956
|
-
var templateObject_1$
|
|
6956
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
6957
6957
|
|
|
6958
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6958
|
+
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6959
6959
|
var borderColor = _a.borderColor;
|
|
6960
6960
|
return borderColor;
|
|
6961
6961
|
}, function (_a) {
|
|
6962
6962
|
var noStock = _a.noStock;
|
|
6963
6963
|
return (noStock ? '0.4' : '1');
|
|
6964
6964
|
});
|
|
6965
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6965
|
+
var Image$2 = newStyled.img(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6966
6966
|
var PatternSelector = function (_a) {
|
|
6967
6967
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6968
6968
|
var theme = useTheme();
|
|
6969
6969
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6970
6970
|
return (jsx$1(Container$W, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6971
6971
|
};
|
|
6972
|
-
var templateObject_1$
|
|
6972
|
+
var templateObject_1$1p, templateObject_2$13;
|
|
6973
6973
|
|
|
6974
6974
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6975
6975
|
if (options == null || options.length === 0) {
|
|
@@ -7032,26 +7032,26 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7032
7032
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7033
7033
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7034
7034
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7035
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7035
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7036
7036
|
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7037
7037
|
};
|
|
7038
|
-
var templateObject_1$
|
|
7038
|
+
var templateObject_1$1o;
|
|
7039
7039
|
|
|
7040
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7041
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7042
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7040
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7041
|
+
var Col$1 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7042
|
+
var Row$2 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
7043
7043
|
return props.rightToLeft &&
|
|
7044
7044
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7045
7045
|
});
|
|
7046
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7047
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7048
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7046
|
+
var H5 = newStyled.h5(templateObject_4$F || (templateObject_4$F = __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; });
|
|
7047
|
+
var H3$1 = newStyled.h3(templateObject_5$v || (templateObject_5$v = __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; });
|
|
7048
|
+
var FreeShipping = newStyled.span(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7049
7049
|
var CrossSellCheckbox = function (_a) {
|
|
7050
7050
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7051
7051
|
var theme = useTheme();
|
|
7052
7052
|
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));
|
|
7053
7053
|
};
|
|
7054
|
-
var templateObject_1$
|
|
7054
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$Q, templateObject_4$F, templateObject_5$v, templateObject_6$t;
|
|
7055
7055
|
|
|
7056
7056
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7057
7057
|
__proto__: null,
|
|
@@ -7079,7 +7079,7 @@ var sizeMapper = (_a = {},
|
|
|
7079
7079
|
_a[ComponentSize.Large] = 'large',
|
|
7080
7080
|
_a[ComponentSize.XSmall] = 'small',
|
|
7081
7081
|
_a);
|
|
7082
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7082
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
7083
7083
|
var wide = _a.wide;
|
|
7084
7084
|
return (wide ? '100%' : 'fit-content');
|
|
7085
7085
|
}, function (_a) {
|
|
@@ -7101,11 +7101,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObj
|
|
|
7101
7101
|
var theme = _a.theme;
|
|
7102
7102
|
return theme.colors.text.disabled;
|
|
7103
7103
|
});
|
|
7104
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7104
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7105
7105
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7106
7106
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7107
7107
|
});
|
|
7108
|
-
var templateObject_1$
|
|
7108
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
7109
7109
|
|
|
7110
7110
|
var BaseCTA = function (_a) {
|
|
7111
7111
|
var _b, _c, _d;
|
|
@@ -7192,44 +7192,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7192
7192
|
} }), void 0));
|
|
7193
7193
|
};
|
|
7194
7194
|
|
|
7195
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
7196
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7197
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7198
|
-
var Details = newStyled.span(templateObject_4$
|
|
7195
|
+
var Container$V = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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; });
|
|
7196
|
+
var IconContainer$4 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
7197
|
+
var Text$3 = newStyled.p(templateObject_3$P || (templateObject_3$P = __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; });
|
|
7198
|
+
var Details = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7199
7199
|
var Note = function (_a) {
|
|
7200
7200
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7201
7201
|
var theme = useTheme();
|
|
7202
7202
|
return (jsxs$1(Container$V, __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));
|
|
7203
7203
|
};
|
|
7204
|
-
var templateObject_1$
|
|
7204
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$E;
|
|
7205
7205
|
|
|
7206
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7206
|
+
var Title$5 = newStyled.h1(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
7207
7207
|
var theme = _a.theme;
|
|
7208
7208
|
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 ");
|
|
7209
7209
|
});
|
|
7210
|
-
var Line = newStyled.div(templateObject_2
|
|
7211
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7210
|
+
var Line = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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; });
|
|
7211
|
+
var Row$1 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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({
|
|
7212
7212
|
flexDirection: ['column', 'row'],
|
|
7213
7213
|
}));
|
|
7214
|
-
var Col = newStyled.div(templateObject_4$
|
|
7214
|
+
var Col = newStyled.div(templateObject_4$D || (templateObject_4$D = __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({
|
|
7215
7215
|
margin: ['0', '0 1.25rem'],
|
|
7216
7216
|
marginBottom: ['1.875rem', '0'],
|
|
7217
7217
|
alignItems: ['center', 'flex-start'],
|
|
7218
7218
|
textAlign: ['center', 'inherit'],
|
|
7219
7219
|
width: ['100%', 'inherit'],
|
|
7220
7220
|
}));
|
|
7221
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7221
|
+
var IconContainer$3 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7222
7222
|
marginRight: ['0', '0.438rem'],
|
|
7223
7223
|
marginBottom: ['10px', '0'],
|
|
7224
7224
|
width: ['auto', '1.5rem'],
|
|
7225
7225
|
}));
|
|
7226
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7226
|
+
var SectionTitle = newStyled.h1(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7227
7227
|
display: ['block', 'flex'],
|
|
7228
7228
|
}), function (_a) {
|
|
7229
7229
|
var theme = _a.theme;
|
|
7230
7230
|
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 ");
|
|
7231
7231
|
});
|
|
7232
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7232
|
+
var SectionDetails = newStyled.p(templateObject_7$l || (templateObject_7$l = __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) {
|
|
7233
7233
|
var theme = _a.theme;
|
|
7234
7234
|
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 ");
|
|
7235
7235
|
}, function (_a) {
|
|
@@ -7246,16 +7246,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7246
7246
|
var theme = useTheme();
|
|
7247
7247
|
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));
|
|
7248
7248
|
};
|
|
7249
|
-
var templateObject_1$
|
|
7249
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$D, templateObject_5$u, templateObject_6$s, templateObject_7$l, templateObject_8$f;
|
|
7250
7250
|
|
|
7251
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7251
|
+
var Backdrop = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
7252
7252
|
var top = _a.top;
|
|
7253
7253
|
return top;
|
|
7254
7254
|
}, function (_a) {
|
|
7255
7255
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7256
7256
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7257
7257
|
});
|
|
7258
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7258
|
+
var Sidebar = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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) {
|
|
7259
7259
|
var height = _a.height;
|
|
7260
7260
|
return height;
|
|
7261
7261
|
}, function (_a) {
|
|
@@ -7302,20 +7302,20 @@ var Drawer = function (_a) {
|
|
|
7302
7302
|
}, [isOpen, onClose, onOpen]);
|
|
7303
7303
|
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;
|
|
7304
7304
|
};
|
|
7305
|
-
var templateObject_1$
|
|
7305
|
+
var templateObject_1$1j, templateObject_2$_;
|
|
7306
7306
|
|
|
7307
7307
|
var TooltipArrow = function (_a) {
|
|
7308
7308
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7309
7309
|
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));
|
|
7310
7310
|
};
|
|
7311
7311
|
|
|
7312
|
-
var List = newStyled.ul(templateObject_1$
|
|
7313
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7314
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7315
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7316
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7317
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7318
|
-
var templateObject_1$
|
|
7312
|
+
var List = newStyled.ul(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7313
|
+
var Item$2 = newStyled.li(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
7314
|
+
var DropdownWrapper = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
7315
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
7316
|
+
var StyledDropdown = newStyled.ul(templateObject_5$t || (templateObject_5$t = __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; });
|
|
7317
|
+
var DropdownItem = newStyled.li(templateObject_6$r || (templateObject_6$r = __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; });
|
|
7318
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$N, templateObject_4$C, templateObject_5$t, templateObject_6$r;
|
|
7319
7319
|
|
|
7320
7320
|
var DropdownListIcons = function (_a) {
|
|
7321
7321
|
var items = _a.items;
|
|
@@ -7328,13 +7328,13 @@ var Dropdown = function (_a) {
|
|
|
7328
7328
|
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));
|
|
7329
7329
|
};
|
|
7330
7330
|
|
|
7331
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7332
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7333
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7334
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7335
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7336
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7337
|
-
var templateObject_1$
|
|
7331
|
+
var DropdownContainer = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
7332
|
+
var DropdownLabel = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
7333
|
+
var SizeLabel = newStyled.span(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7334
|
+
var DetailLabel = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
7335
|
+
var DropdownOptions = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
7336
|
+
var DropdownOption = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
7337
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q;
|
|
7338
7338
|
|
|
7339
7339
|
var SizeDropdown = function (_a) {
|
|
7340
7340
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7357,10 +7357,10 @@ var SizeDropdown = function (_a) {
|
|
|
7357
7357
|
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));
|
|
7358
7358
|
};
|
|
7359
7359
|
|
|
7360
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7361
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7362
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7363
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7360
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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; });
|
|
7361
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$X || (templateObject_2$X = __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; });
|
|
7362
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
7363
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7364
7364
|
var DropdownDialog = function (_a) {
|
|
7365
7365
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7366
7366
|
var theme = useTheme$1();
|
|
@@ -7369,7 +7369,7 @@ var DropdownDialog = function (_a) {
|
|
|
7369
7369
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7370
7370
|
}) }), void 0) }), void 0));
|
|
7371
7371
|
};
|
|
7372
|
-
var templateObject_1$
|
|
7372
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A;
|
|
7373
7373
|
|
|
7374
7374
|
function FilteringDropdown(_a) {
|
|
7375
7375
|
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;
|
|
@@ -7402,29 +7402,29 @@ function FilteringDropdown(_a) {
|
|
|
7402
7402
|
}) }, void 0)] }), void 0));
|
|
7403
7403
|
}
|
|
7404
7404
|
|
|
7405
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7406
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7407
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7408
|
-
var Container$U = newStyled.div(templateObject_4$
|
|
7405
|
+
var Title$4 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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; });
|
|
7406
|
+
var H3 = newStyled.h3(templateObject_2$W || (templateObject_2$W = __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; });
|
|
7407
|
+
var ArrowContainer = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7408
|
+
var Container$U = newStyled.div(templateObject_4$z || (templateObject_4$z = __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'); });
|
|
7409
7409
|
var Accordion = function (_a) {
|
|
7410
7410
|
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;
|
|
7411
7411
|
var theme = useTheme();
|
|
7412
7412
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7413
7413
|
return (jsxs$1(Container$U, __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));
|
|
7414
7414
|
};
|
|
7415
|
-
var templateObject_1$
|
|
7416
|
-
|
|
7417
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7418
|
-
var Header$2 = newStyled.div(templateObject_2$
|
|
7419
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7420
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7421
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7422
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7423
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7415
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z;
|
|
7416
|
+
|
|
7417
|
+
var SectionContent = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
7418
|
+
var Header$2 = newStyled.div(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
7419
|
+
var MobileHeader = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
7420
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
7421
|
+
var H4 = newStyled.h4(templateObject_5$r || (templateObject_5$r = __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; });
|
|
7422
|
+
var FilterLink = newStyled.a(templateObject_6$p || (templateObject_6$p = __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; });
|
|
7423
|
+
var OptionContainer = newStyled.div(templateObject_7$k || (templateObject_7$k = __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'); });
|
|
7424
7424
|
var ClearAll = newStyled.span(templateObject_8$e || (templateObject_8$e = __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; });
|
|
7425
7425
|
var MobileFooter = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __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"])));
|
|
7426
7426
|
var MobileClearContainer = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __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"])));
|
|
7427
|
-
var templateObject_1$
|
|
7427
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y, templateObject_5$r, templateObject_6$p, templateObject_7$k, templateObject_8$e, templateObject_9$9, templateObject_10$8;
|
|
7428
7428
|
|
|
7429
7429
|
var getStylesBySize$a = function (size, theme) {
|
|
7430
7430
|
switch (size) {
|
|
@@ -7489,9 +7489,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7489
7489
|
} }), id: id }, void 0));
|
|
7490
7490
|
};
|
|
7491
7491
|
|
|
7492
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7493
|
-
var LI = newStyled.li(templateObject_2$
|
|
7494
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7492
|
+
var UL = newStyled.ul(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
7493
|
+
var LI = newStyled.li(templateObject_2$U || (templateObject_2$U = __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; });
|
|
7494
|
+
var CloseIconContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
7495
7495
|
var Tags = function (_a) {
|
|
7496
7496
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7497
7497
|
var theme = useTheme();
|
|
@@ -7499,7 +7499,7 @@ var Tags = function (_a) {
|
|
|
7499
7499
|
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));
|
|
7500
7500
|
}) }), void 0));
|
|
7501
7501
|
};
|
|
7502
|
-
var templateObject_1$
|
|
7502
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I;
|
|
7503
7503
|
|
|
7504
7504
|
var Filters = function (_a) {
|
|
7505
7505
|
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;
|
|
@@ -7635,8 +7635,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7635
7635
|
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));
|
|
7636
7636
|
};
|
|
7637
7637
|
|
|
7638
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7639
|
-
var Container$T = newStyled.div(templateObject_2$
|
|
7638
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
7639
|
+
var Container$T = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
7640
7640
|
var FitGuarantee = function (_a) {
|
|
7641
7641
|
var _b;
|
|
7642
7642
|
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;
|
|
@@ -7654,10 +7654,10 @@ var FitGuarantee = function (_a) {
|
|
|
7654
7654
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7655
7655
|
} }, { 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));
|
|
7656
7656
|
};
|
|
7657
|
-
var templateObject_1$
|
|
7657
|
+
var templateObject_1$1c, templateObject_2$T;
|
|
7658
7658
|
|
|
7659
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
7660
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7659
|
+
var Container$S = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
7660
|
+
var P$2 = newStyled.p(templateObject_2$S || (templateObject_2$S = __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; });
|
|
7661
7661
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7662
7662
|
border: 'none',
|
|
7663
7663
|
background: 'transparent',
|
|
@@ -7672,7 +7672,7 @@ var FitPredictor = function (_a) {
|
|
|
7672
7672
|
var theme = useTheme();
|
|
7673
7673
|
return (jsxs(Container$S, __assign$1({ theme: theme }, { children: [jsx(Container$S, { 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));
|
|
7674
7674
|
};
|
|
7675
|
-
var templateObject_1$
|
|
7675
|
+
var templateObject_1$1b, templateObject_2$S;
|
|
7676
7676
|
|
|
7677
7677
|
var Button$7 = newStyled.button(function () { return ({
|
|
7678
7678
|
background: 'transparent',
|
|
@@ -11916,14 +11916,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11916
11916
|
return Slider;
|
|
11917
11917
|
}(React__default.Component);
|
|
11918
11918
|
|
|
11919
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11919
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
11920
11920
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11921
11921
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11922
11922
|
}, function (_a) {
|
|
11923
11923
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11924
11924
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11925
11925
|
});
|
|
11926
|
-
var templateObject_1$
|
|
11926
|
+
var templateObject_1$1a;
|
|
11927
11927
|
|
|
11928
11928
|
var getStylesBySize$9 = function (size) {
|
|
11929
11929
|
// rem units
|
|
@@ -11982,7 +11982,7 @@ var SliderNavigation = function (_a) {
|
|
|
11982
11982
|
} }, { 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));
|
|
11983
11983
|
};
|
|
11984
11984
|
|
|
11985
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11985
|
+
var Image$1 = newStyled.img(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
11986
11986
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11987
11987
|
return borderRadiusVariant &&
|
|
11988
11988
|
"\n border-radius: 20px;\n ";
|
|
@@ -12000,7 +12000,7 @@ var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __make
|
|
|
12000
12000
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12001
12001
|
: 'inherit';
|
|
12002
12002
|
});
|
|
12003
|
-
var templateObject_1$
|
|
12003
|
+
var templateObject_1$19;
|
|
12004
12004
|
|
|
12005
12005
|
var ImageSmallPreview = function (_a) {
|
|
12006
12006
|
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;
|
|
@@ -12008,9 +12008,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12008
12008
|
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));
|
|
12009
12009
|
};
|
|
12010
12010
|
|
|
12011
|
-
var horizontalStyles = css(templateObject_1$
|
|
12012
|
-
var verticalStyles = css(templateObject_2$
|
|
12013
|
-
var Container$R = newStyled.div(templateObject_3$
|
|
12011
|
+
var horizontalStyles = css(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
12012
|
+
var verticalStyles = css(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
12013
|
+
var Container$R = newStyled.div(templateObject_3$H || (templateObject_3$H = __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) {
|
|
12014
12014
|
var position = _a.position;
|
|
12015
12015
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12016
12016
|
}, function (_a) {
|
|
@@ -12018,12 +12018,12 @@ var Container$R = newStyled.div(templateObject_3$G || (templateObject_3$G = __ma
|
|
|
12018
12018
|
return hasOverflowArrows &&
|
|
12019
12019
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12020
12020
|
});
|
|
12021
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
12022
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12023
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12024
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12021
|
+
var Button$6 = newStyled.button(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
12022
|
+
var ArrowsContainer = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
12023
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
12024
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
12025
12025
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$d || (templateObject_8$d = __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"])));
|
|
12026
|
-
var templateObject_1$
|
|
12026
|
+
var templateObject_1$18, templateObject_2$R, templateObject_3$H, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$j, templateObject_8$d;
|
|
12027
12027
|
|
|
12028
12028
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12029
12029
|
var loading = 'eager';
|
|
@@ -12060,22 +12060,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12060
12060
|
})) }), 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));
|
|
12061
12061
|
};
|
|
12062
12062
|
|
|
12063
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12064
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12065
|
-
var templateObject_1$
|
|
12063
|
+
var ProgressContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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); });
|
|
12064
|
+
var ProgressFiller = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
12065
|
+
var templateObject_1$17, templateObject_2$Q;
|
|
12066
12066
|
|
|
12067
12067
|
var ProgressBar$1 = function (_a) {
|
|
12068
12068
|
var progress = _a.progress, hide = _a.hide;
|
|
12069
12069
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12070
12070
|
};
|
|
12071
12071
|
|
|
12072
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
12073
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12074
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12075
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12076
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12077
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12078
|
-
var templateObject_1$
|
|
12072
|
+
var Container$Q = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12073
|
+
var HTMLVideo = newStyled.video(templateObject_2$P || (templateObject_2$P = __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; });
|
|
12074
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
12075
|
+
var PlayContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
12076
|
+
var PauseContainer = newStyled.div(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
12077
|
+
var MuteButton = newStyled.button(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
12078
|
+
var templateObject_1$16, templateObject_2$P, templateObject_3$G, templateObject_4$w, templateObject_5$p, templateObject_6$n;
|
|
12079
12079
|
|
|
12080
12080
|
var Video$1 = function (_a) {
|
|
12081
12081
|
var _b, _c, _d, _e;
|
|
@@ -13715,32 +13715,32 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13715
13715
|
afterZoomOut: PropTypes.func
|
|
13716
13716
|
} : {};
|
|
13717
13717
|
|
|
13718
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13718
|
+
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
13719
13719
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13720
13720
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13721
13721
|
});
|
|
13722
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13722
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13723
13723
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13724
13724
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13725
13725
|
}, function (_a) {
|
|
13726
13726
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13727
13727
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13728
13728
|
});
|
|
13729
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13729
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13730
13730
|
var isCTAHidden = _a.isCTAHidden;
|
|
13731
13731
|
return (isCTAHidden ? '60px' : '120px');
|
|
13732
13732
|
});
|
|
13733
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13734
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13735
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13733
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
13734
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
13735
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13736
13736
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13737
13737
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13738
13738
|
});
|
|
13739
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13739
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13740
13740
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13741
13741
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13742
13742
|
});
|
|
13743
|
-
var templateObject_1$
|
|
13743
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$i;
|
|
13744
13744
|
|
|
13745
13745
|
var ImageProductSlide$1 = function (_a) {
|
|
13746
13746
|
var _b;
|
|
@@ -13755,8 +13755,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13755
13755
|
}, 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));
|
|
13756
13756
|
};
|
|
13757
13757
|
|
|
13758
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13759
|
-
var templateObject_1$
|
|
13758
|
+
var Container$O = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
13759
|
+
var templateObject_1$14;
|
|
13760
13760
|
|
|
13761
13761
|
var getInitialIndex = function (images, selectedValue) {
|
|
13762
13762
|
if (selectedValue) {
|
|
@@ -13804,7 +13804,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13804
13804
|
};
|
|
13805
13805
|
}
|
|
13806
13806
|
};
|
|
13807
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13807
|
+
var Container$N = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
13808
13808
|
var backgroundColor = _a.backgroundColor;
|
|
13809
13809
|
return backgroundColor;
|
|
13810
13810
|
}, function (_a) {
|
|
@@ -13834,9 +13834,9 @@ var IconButton = function (_a) {
|
|
|
13834
13834
|
var theme = useTheme();
|
|
13835
13835
|
return (jsx$1(Container$N, __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));
|
|
13836
13836
|
};
|
|
13837
|
-
var templateObject_1$
|
|
13837
|
+
var templateObject_1$13;
|
|
13838
13838
|
|
|
13839
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13839
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$12 || (templateObject_1$12 = __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; });
|
|
13840
13840
|
var AmazonButton = function (_a) {
|
|
13841
13841
|
var onClick = _a.onClick;
|
|
13842
13842
|
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));
|
|
@@ -13845,7 +13845,7 @@ var PaypalButton = function (_a) {
|
|
|
13845
13845
|
var onClick = _a.onClick;
|
|
13846
13846
|
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));
|
|
13847
13847
|
};
|
|
13848
|
-
var templateObject_1$
|
|
13848
|
+
var templateObject_1$12;
|
|
13849
13849
|
|
|
13850
13850
|
var Container$M = newStyled.div(function (props) { return ({
|
|
13851
13851
|
height: 'auto',
|
|
@@ -13900,9 +13900,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13900
13900
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$M, __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));
|
|
13901
13901
|
};
|
|
13902
13902
|
|
|
13903
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
13904
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13905
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13903
|
+
var Container$L = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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'); });
|
|
13904
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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'); });
|
|
13905
|
+
var StyledTitle = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13906
13906
|
var titlePosition = _a.titlePosition;
|
|
13907
13907
|
return titlePosition == 'center' &&
|
|
13908
13908
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13912,13 +13912,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13912
13912
|
var isMobile = useWindowDimensions().isMobile;
|
|
13913
13913
|
return (jsxs$1(Container$L, __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));
|
|
13914
13914
|
};
|
|
13915
|
-
var templateObject_1$
|
|
13915
|
+
var templateObject_1$11, templateObject_2$N, templateObject_3$E;
|
|
13916
13916
|
|
|
13917
|
-
var Label$4 = newStyled.span(templateObject_1
|
|
13917
|
+
var Label$4 = newStyled.span(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
13918
13918
|
var color = _a.color;
|
|
13919
13919
|
return color;
|
|
13920
13920
|
});
|
|
13921
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13921
|
+
var MandatoryIcon = newStyled.span(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13922
13922
|
var color = _a.color;
|
|
13923
13923
|
return color;
|
|
13924
13924
|
});
|
|
@@ -13927,7 +13927,7 @@ var InputLabel = function (_a) {
|
|
|
13927
13927
|
var theme = useTheme();
|
|
13928
13928
|
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));
|
|
13929
13929
|
};
|
|
13930
|
-
var templateObject_1
|
|
13930
|
+
var templateObject_1$10, templateObject_2$M;
|
|
13931
13931
|
|
|
13932
13932
|
var containerByStatus = function (theme, status) {
|
|
13933
13933
|
if (status === InputValidationType.Valid)
|
|
@@ -13936,12 +13936,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13936
13936
|
return theme.colors.semantic.urgent.color;
|
|
13937
13937
|
return '';
|
|
13938
13938
|
};
|
|
13939
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13939
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13940
13940
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13941
13941
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13942
13942
|
});
|
|
13943
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13944
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13943
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
13944
|
+
var StyledInput = newStyled.input(templateObject_3$D || (templateObject_3$D = __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) {
|
|
13945
13945
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13946
13946
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13947
13947
|
}, function (_a) {
|
|
@@ -13996,11 +13996,11 @@ var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __
|
|
|
13996
13996
|
return hasValue &&
|
|
13997
13997
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13998
13998
|
});
|
|
13999
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13999
|
+
var InputWrapper = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14000
14000
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14001
14001
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14002
14002
|
});
|
|
14003
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14003
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$n || (templateObject_5$n = __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) {
|
|
14004
14004
|
var theme = _a.theme;
|
|
14005
14005
|
return theme.component.input.placeholderColor;
|
|
14006
14006
|
}, function (_a) {
|
|
@@ -14013,8 +14013,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$m || (templateObject_5
|
|
|
14013
14013
|
var theme = _a.theme;
|
|
14014
14014
|
return theme.component.input.lineHeight;
|
|
14015
14015
|
});
|
|
14016
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14017
|
-
var templateObject_1
|
|
14016
|
+
var ClearInput = newStyled.div(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
14017
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
14018
14018
|
|
|
14019
14019
|
var BaseInput = function (_a) {
|
|
14020
14020
|
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"]);
|
|
@@ -14058,11 +14058,11 @@ var Button$5 = function (_a) {
|
|
|
14058
14058
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14059
14059
|
};
|
|
14060
14060
|
|
|
14061
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
14061
|
+
var Container$J = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
14062
14062
|
var theme = _a.theme;
|
|
14063
14063
|
return theme.component.inputCustom.input.borderRadius;
|
|
14064
14064
|
});
|
|
14065
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14065
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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) {
|
|
14066
14066
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14067
14067
|
return defaultRounded
|
|
14068
14068
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14079,21 +14079,21 @@ var Custom = function (_a) {
|
|
|
14079
14079
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14080
14080
|
return (jsx$1(Container$J, __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));
|
|
14081
14081
|
};
|
|
14082
|
-
var templateObject_1$
|
|
14082
|
+
var templateObject_1$_, templateObject_2$K;
|
|
14083
14083
|
|
|
14084
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14084
|
+
var SuccessContainer = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14085
14085
|
var size = _a.size;
|
|
14086
14086
|
return (size === 'small' ? '36px' : '');
|
|
14087
14087
|
});
|
|
14088
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14089
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14088
|
+
var SuccessMessage = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
14089
|
+
var SuccessText = newStyled.span(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
14090
14090
|
var Success = function (_a) {
|
|
14091
14091
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14092
14092
|
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));
|
|
14093
14093
|
};
|
|
14094
|
-
var templateObject_1$
|
|
14094
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$C;
|
|
14095
14095
|
|
|
14096
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14096
|
+
var ButtonContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
14097
14097
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14098
14098
|
return status === InputValidationType.Empty &&
|
|
14099
14099
|
type === 'primary' &&
|
|
@@ -14110,16 +14110,16 @@ var BasePlusButton = function (_a) {
|
|
|
14110
14110
|
}
|
|
14111
14111
|
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));
|
|
14112
14112
|
};
|
|
14113
|
-
var templateObject_1$
|
|
14113
|
+
var templateObject_1$Y;
|
|
14114
14114
|
|
|
14115
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14116
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14115
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14116
|
+
var IconContainer$2 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
14117
14117
|
var BasePlusIcon = function (_a) {
|
|
14118
14118
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14119
14119
|
var theme = useTheme();
|
|
14120
14120
|
return (jsx$1(Container$I, { 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));
|
|
14121
14121
|
};
|
|
14122
|
-
var templateObject_1$
|
|
14122
|
+
var templateObject_1$X, templateObject_2$I;
|
|
14123
14123
|
|
|
14124
14124
|
var Input$3 = {
|
|
14125
14125
|
Simple: BaseInput,
|
|
@@ -14164,7 +14164,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14164
14164
|
}, [preventTouch, ref, touchStart]);
|
|
14165
14165
|
}
|
|
14166
14166
|
|
|
14167
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14167
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
14168
14168
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14169
14169
|
return borderRadiusVariant &&
|
|
14170
14170
|
"\n border-radius: 40px;\n ";
|
|
@@ -14173,11 +14173,11 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
14173
14173
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14174
14174
|
});
|
|
14175
14175
|
// max-height: 31.875rem;
|
|
14176
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14177
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14178
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14179
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14180
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14176
|
+
var TopTagContainer$5 = 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'); });
|
|
14177
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14178
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14179
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14180
|
+
var Button$4 = newStyled.button(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
14181
14181
|
var settings$1 = {
|
|
14182
14182
|
dots: true,
|
|
14183
14183
|
infinite: false,
|
|
@@ -14254,16 +14254,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14254
14254
|
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));
|
|
14255
14255
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14256
14256
|
};
|
|
14257
|
-
var templateObject_1$
|
|
14257
|
+
var templateObject_1$W, templateObject_2$H, templateObject_3$B, templateObject_4$t, templateObject_5$m, templateObject_6$k;
|
|
14258
14258
|
|
|
14259
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14259
|
+
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
14260
14260
|
var ProductGalleryMobile = function (_a) {
|
|
14261
14261
|
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;
|
|
14262
14262
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14263
14263
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14264
14264
|
return (jsx$1(Container$G, __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));
|
|
14265
14265
|
};
|
|
14266
|
-
var templateObject_1$
|
|
14266
|
+
var templateObject_1$V;
|
|
14267
14267
|
|
|
14268
14268
|
function _extends() {
|
|
14269
14269
|
_extends = Object.assign || function (target) {
|
|
@@ -14530,14 +14530,14 @@ function useSwipeable(options) {
|
|
|
14530
14530
|
return handlers;
|
|
14531
14531
|
}
|
|
14532
14532
|
|
|
14533
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14533
|
+
var Button$3 = newStyled.button(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
14534
14534
|
var ArrowButton = function (_a) {
|
|
14535
14535
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14536
14536
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14537
14537
|
};
|
|
14538
|
-
var templateObject_1$
|
|
14538
|
+
var templateObject_1$U;
|
|
14539
14539
|
|
|
14540
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14540
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
14541
14541
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14542
14542
|
var SlideDots = function (_a) {
|
|
14543
14543
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14546,11 +14546,11 @@ var SlideDots = function (_a) {
|
|
|
14546
14546
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14547
14547
|
: 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));
|
|
14548
14548
|
};
|
|
14549
|
-
var templateObject_1$
|
|
14549
|
+
var templateObject_1$T;
|
|
14550
14550
|
|
|
14551
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14552
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14553
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14551
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
14552
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14553
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14554
14554
|
var SlideNavigation = function (_a) {
|
|
14555
14555
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14556
14556
|
var theme = useTheme();
|
|
@@ -14562,23 +14562,23 @@ var SlideNavigation = function (_a) {
|
|
|
14562
14562
|
onNavigate(selectedIndex + 1);
|
|
14563
14563
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14564
14564
|
};
|
|
14565
|
-
var templateObject_1$
|
|
14565
|
+
var templateObject_1$S, templateObject_2$G, templateObject_3$A;
|
|
14566
14566
|
|
|
14567
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14567
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
14568
14568
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14569
14569
|
return borderRadiusVariant &&
|
|
14570
14570
|
"\n border-radius: 40px;\n ";
|
|
14571
14571
|
});
|
|
14572
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14573
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14572
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$F || (templateObject_2$F = __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'); });
|
|
14573
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14574
14574
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14575
14575
|
var _b, _c;
|
|
14576
14576
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14577
14577
|
return (jsxs$1(Container$E, __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));
|
|
14578
14578
|
});
|
|
14579
|
-
var templateObject_1$
|
|
14579
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14580
14580
|
|
|
14581
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14581
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
14582
14582
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14583
14583
|
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;
|
|
14584
14584
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14602,9 +14602,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14602
14602
|
}, [index, images]);
|
|
14603
14603
|
return (jsxs$1(Container$D, __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));
|
|
14604
14604
|
};
|
|
14605
|
-
var templateObject_1$
|
|
14605
|
+
var templateObject_1$Q;
|
|
14606
14606
|
|
|
14607
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14607
|
+
var Container$C = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
14608
14608
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14609
14609
|
return borderRadiusVariant &&
|
|
14610
14610
|
"\n border-radius: 40px;\n ";
|
|
@@ -14613,12 +14613,12 @@ var Container$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
14613
14613
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14614
14614
|
});
|
|
14615
14615
|
// max-height: 31.875rem;
|
|
14616
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14617
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14618
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14619
|
-
var Video = newStyled.div(templateObject_5$
|
|
14620
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14621
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14616
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$E || (templateObject_2$E = __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'); });
|
|
14617
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14618
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
14619
|
+
var Video = newStyled.div(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
14620
|
+
var VideoTag = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
14621
|
+
var Text$2 = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14622
14622
|
var NavButtonContainer$1 = newStyled.div(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14623
14623
|
var Button$2 = newStyled.button(templateObject_9$8 || (templateObject_9$8 = __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"])));
|
|
14624
14624
|
var settings = {
|
|
@@ -14678,14 +14678,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14678
14678
|
} }, 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));
|
|
14679
14679
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14680
14680
|
};
|
|
14681
|
-
var templateObject_1$
|
|
14681
|
+
var templateObject_1$P, templateObject_2$E, templateObject_3$y, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8;
|
|
14682
14682
|
|
|
14683
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14683
|
+
var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
14684
14684
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14685
14685
|
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;
|
|
14686
14686
|
return (jsx$1(Container$B, __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));
|
|
14687
14687
|
};
|
|
14688
|
-
var templateObject_1$
|
|
14688
|
+
var templateObject_1$O;
|
|
14689
14689
|
|
|
14690
14690
|
var __defProp$1 = Object.defineProperty;
|
|
14691
14691
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14818,21 +14818,21 @@ var Portal = function (_a) {
|
|
|
14818
14818
|
var visibleStyle = function (_a) {
|
|
14819
14819
|
var opened = _a.opened;
|
|
14820
14820
|
return opened
|
|
14821
|
-
? css(templateObject_1$
|
|
14821
|
+
? css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14822
14822
|
};
|
|
14823
14823
|
var transformStyle = function (_a) {
|
|
14824
14824
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14825
14825
|
return opened
|
|
14826
|
-
? css(templateObject_3$
|
|
14826
|
+
? css(templateObject_3$x || (templateObject_3$x = __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$r || (templateObject_4$r = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14827
14827
|
};
|
|
14828
|
-
var Container$A = newStyled.div(templateObject_6$
|
|
14828
|
+
var Container$A = newStyled.div(templateObject_6$i || (templateObject_6$i = __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) {
|
|
14829
14829
|
var width = _a.width;
|
|
14830
14830
|
return width
|
|
14831
|
-
? css(templateObject_5$
|
|
14831
|
+
? css(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14832
14832
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14833
14833
|
});
|
|
14834
14834
|
}, visibleStyle, transformStyle);
|
|
14835
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14835
|
+
var Overlay = newStyled.div(templateObject_7$g || (templateObject_7$g = __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);
|
|
14836
14836
|
var Modal = function (_a) {
|
|
14837
14837
|
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;
|
|
14838
14838
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14873,9 +14873,9 @@ var useModal = function (id) {
|
|
|
14873
14873
|
close: close,
|
|
14874
14874
|
}); }, [close, open, opened]);
|
|
14875
14875
|
};
|
|
14876
|
-
var templateObject_1$
|
|
14876
|
+
var templateObject_1$N, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
14877
14877
|
|
|
14878
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14878
|
+
var Bar$1 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14879
14879
|
var height = _a.height;
|
|
14880
14880
|
return height || '0.5rem';
|
|
14881
14881
|
}, function (_a) {
|
|
@@ -14927,7 +14927,7 @@ var Container$z = newStyled.div(function (_a) {
|
|
|
14927
14927
|
background: backgroundColor,
|
|
14928
14928
|
});
|
|
14929
14929
|
});
|
|
14930
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
14930
|
+
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
14931
14931
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14932
14932
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14933
14933
|
};
|
|
@@ -14955,19 +14955,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14955
14955
|
};
|
|
14956
14956
|
return (jsxs$1(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
14957
14957
|
};
|
|
14958
|
-
var templateObject_1$
|
|
14958
|
+
var templateObject_1$M, templateObject_2$C;
|
|
14959
14959
|
|
|
14960
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
14960
|
+
var Container$y = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14961
14961
|
var theme = _a.theme;
|
|
14962
14962
|
return theme.component.orderBar.backgroundColor;
|
|
14963
14963
|
});
|
|
14964
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14964
|
+
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14965
14965
|
var OrderBar = function (_a) {
|
|
14966
14966
|
var message = _a.message, color = _a.color;
|
|
14967
14967
|
var theme = useTheme();
|
|
14968
14968
|
return (jsxs$1(Container$y, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14969
14969
|
};
|
|
14970
|
-
var templateObject_1$
|
|
14970
|
+
var templateObject_1$L, templateObject_2$B;
|
|
14971
14971
|
|
|
14972
14972
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14973
14973
|
background: props.bgColor,
|
|
@@ -14991,15 +14991,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14991
14991
|
justifyContent: 'center',
|
|
14992
14992
|
gap: '10px',
|
|
14993
14993
|
});
|
|
14994
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14994
|
+
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
14995
14995
|
var bgColor = _a.bgColor;
|
|
14996
14996
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14997
14997
|
}, function (_a) {
|
|
14998
14998
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14999
14999
|
return width;
|
|
15000
15000
|
});
|
|
15001
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
15002
|
-
var templateObject_1$
|
|
15001
|
+
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
15002
|
+
var templateObject_1$K, templateObject_2$A;
|
|
15003
15003
|
|
|
15004
15004
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15005
15005
|
var background = _a.background, width = _a.width;
|
|
@@ -15040,13 +15040,13 @@ var BasicAccordion = function (_a) {
|
|
|
15040
15040
|
} }), void 0));
|
|
15041
15041
|
};
|
|
15042
15042
|
|
|
15043
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
15044
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
15045
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
15046
|
-
var Label$3 = newStyled('div')(templateObject_4$
|
|
15047
|
-
newStyled(Label$3)(templateObject_5$
|
|
15048
|
-
newStyled(Label$3)(templateObject_6$
|
|
15049
|
-
var Container$x = newStyled('div')(templateObject_7$
|
|
15043
|
+
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
15044
|
+
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
15045
|
+
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
15046
|
+
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
15047
|
+
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
15048
|
+
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
15049
|
+
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
15050
15050
|
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
15051
15051
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
15052
15052
|
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
@@ -15056,7 +15056,7 @@ var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __mak
|
|
|
15056
15056
|
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
15057
15057
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
15058
15058
|
});
|
|
15059
|
-
var templateObject_1$
|
|
15059
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
15060
15060
|
|
|
15061
15061
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
15062
15062
|
// TODO: Refactor this color logic
|
|
@@ -18910,13 +18910,13 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18910
18910
|
HTMLReactParser$1.attributesToProps;
|
|
18911
18911
|
HTMLReactParser$1.Element;
|
|
18912
18912
|
|
|
18913
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18914
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18915
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18916
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18917
|
-
var Check = newStyled.div(templateObject_5$
|
|
18918
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18919
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18913
|
+
var Container$w = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18914
|
+
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18915
|
+
var Tag$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18916
|
+
var Label$2 = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
18917
|
+
var Check = 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"])));
|
|
18918
|
+
var IconContainer$1 = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
18919
|
+
var IconPlaceholder = newStyled.div(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
18920
18920
|
var DiscountContainer = newStyled.div(templateObject_8$a || (templateObject_8$a = __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"])));
|
|
18921
18921
|
var PackSelector = function (_a) {
|
|
18922
18922
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -18947,14 +18947,14 @@ var PackCard = function (_a) {
|
|
|
18947
18947
|
currency: currencyCode || 'USD',
|
|
18948
18948
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18949
18949
|
};
|
|
18950
|
-
var templateObject_1$
|
|
18950
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e, templateObject_8$a;
|
|
18951
18951
|
|
|
18952
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18953
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18954
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18952
|
+
var Container$v = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
18953
|
+
var IconContainer = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
18954
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18955
18955
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18956
18956
|
}));
|
|
18957
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18957
|
+
var PageNumber = newStyled.span(templateObject_4$o || (templateObject_4$o = __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) {
|
|
18958
18958
|
var bold = _a.bold;
|
|
18959
18959
|
return (bold ? '700' : '500');
|
|
18960
18960
|
}, function (_a) {
|
|
@@ -18971,7 +18971,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18971
18971
|
var background = _a.background;
|
|
18972
18972
|
return background || 'unset';
|
|
18973
18973
|
});
|
|
18974
|
-
var templateObject_1$
|
|
18974
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$u, templateObject_4$o;
|
|
18975
18975
|
|
|
18976
18976
|
var Pagination = function (_a) {
|
|
18977
18977
|
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;
|
|
@@ -19036,7 +19036,7 @@ var PaginatorBlog = function (_a) {
|
|
|
19036
19036
|
: 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));
|
|
19037
19037
|
};
|
|
19038
19038
|
|
|
19039
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
19039
|
+
var Container$u = newStyled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
19040
19040
|
var width = _a.width;
|
|
19041
19041
|
return width;
|
|
19042
19042
|
}, function (_a) {
|
|
@@ -19054,12 +19054,12 @@ var PaymentMethod = function (_a) {
|
|
|
19054
19054
|
var theme = useTheme();
|
|
19055
19055
|
return (jsx$1(Container$u, __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));
|
|
19056
19056
|
};
|
|
19057
|
-
var templateObject_1$
|
|
19057
|
+
var templateObject_1$G;
|
|
19058
19058
|
|
|
19059
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19059
|
+
var Container$t = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
19060
19060
|
var IMAGE_WIDTH = '63px';
|
|
19061
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19062
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19061
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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);
|
|
19062
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __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({
|
|
19063
19063
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19064
19064
|
}), IMAGE_WIDTH);
|
|
19065
19065
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19082,7 +19082,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19082
19082
|
margin: margin,
|
|
19083
19083
|
});
|
|
19084
19084
|
});
|
|
19085
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19085
|
+
var PriceContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __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) {
|
|
19086
19086
|
var withTag = _a.withTag; _a.theme;
|
|
19087
19087
|
return withTag
|
|
19088
19088
|
? mediaQueries({
|
|
@@ -19091,15 +19091,15 @@ var PriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = _
|
|
|
19091
19091
|
})
|
|
19092
19092
|
: 'justify-content: end';
|
|
19093
19093
|
});
|
|
19094
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19095
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
19094
|
+
var Quantity = newStyled.div(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
19095
|
+
var StyledSpan = newStyled.span(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19096
19096
|
var SimpleOrderItem = function (_a) {
|
|
19097
19097
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19098
19098
|
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;
|
|
19099
19099
|
var theme = useTheme();
|
|
19100
19100
|
return (jsxs$1(Container$t, __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));
|
|
19101
19101
|
};
|
|
19102
|
-
var templateObject_1$
|
|
19102
|
+
var templateObject_1$F, templateObject_2$w, templateObject_3$t, templateObject_4$n, templateObject_5$h, templateObject_6$f;
|
|
19103
19103
|
|
|
19104
19104
|
var P$1 = newStyled.p(function (_a) {
|
|
19105
19105
|
var color = _a.color;
|
|
@@ -19113,7 +19113,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19113
19113
|
margin: '0.938rem 4.188rem',
|
|
19114
19114
|
});
|
|
19115
19115
|
});
|
|
19116
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19116
|
+
var Bar = newStyled.div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
19117
19117
|
var height = _a.height;
|
|
19118
19118
|
return height || '0.5rem';
|
|
19119
19119
|
}, function (_a) {
|
|
@@ -19158,12 +19158,12 @@ var ProgressBar = function (_a) {
|
|
|
19158
19158
|
var theme = useTheme();
|
|
19159
19159
|
return (jsxs$1(Container$s, __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));
|
|
19160
19160
|
};
|
|
19161
|
-
var templateObject_1$
|
|
19161
|
+
var templateObject_1$E;
|
|
19162
19162
|
|
|
19163
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
19164
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19165
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19166
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19163
|
+
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __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; });
|
|
19164
|
+
var Item$1 = newStyled.span(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
19165
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
19166
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$m || (templateObject_4$m = __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)'; });
|
|
19167
19167
|
var QuantityPicker = function (_a) {
|
|
19168
19168
|
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;
|
|
19169
19169
|
var theme = useTheme();
|
|
@@ -19188,7 +19188,7 @@ var QuantityPicker = function (_a) {
|
|
|
19188
19188
|
}, [value, clamp]);
|
|
19189
19189
|
return (jsxs$1(Container$r, __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));
|
|
19190
19190
|
};
|
|
19191
|
-
var templateObject_1$
|
|
19191
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$s, templateObject_4$m;
|
|
19192
19192
|
|
|
19193
19193
|
/* base styles & size variants */
|
|
19194
19194
|
var CustomRadioStyles$1 = {
|
|
@@ -19257,9 +19257,9 @@ var ContainerStyles$1 = {
|
|
|
19257
19257
|
},
|
|
19258
19258
|
};
|
|
19259
19259
|
|
|
19260
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19260
|
+
var Wrapper$3 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19261
19261
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19262
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19262
|
+
var Input$2 = newStyled.input(templateObject_2$u || (templateObject_2$u = __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) {
|
|
19263
19263
|
var disabled = _a.disabled;
|
|
19264
19264
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19265
19265
|
});
|
|
@@ -19267,7 +19267,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19267
19267
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19268
19268
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19269
19269
|
]; });
|
|
19270
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19270
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
19271
19271
|
var RadioPrimary = function (_a) {
|
|
19272
19272
|
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;
|
|
19273
19273
|
var theme = useTheme();
|
|
@@ -19277,7 +19277,7 @@ var RadioPrimary = function (_a) {
|
|
|
19277
19277
|
};
|
|
19278
19278
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __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));
|
|
19279
19279
|
};
|
|
19280
|
-
var templateObject_1$
|
|
19280
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$r;
|
|
19281
19281
|
|
|
19282
19282
|
var RadioGroupInput = function (_a) {
|
|
19283
19283
|
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;
|
|
@@ -19356,9 +19356,9 @@ var ContainerStyles = {
|
|
|
19356
19356
|
},
|
|
19357
19357
|
};
|
|
19358
19358
|
|
|
19359
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19359
|
+
var Wrapper$2 = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
19360
19360
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19361
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19361
|
+
var Input$1 = newStyled.input(templateObject_2$t || (templateObject_2$t = __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) {
|
|
19362
19362
|
var disabled = _a.disabled;
|
|
19363
19363
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19364
19364
|
});
|
|
@@ -19366,7 +19366,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19366
19366
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19367
19367
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19368
19368
|
]; });
|
|
19369
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19369
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19370
19370
|
var theme = _a.theme;
|
|
19371
19371
|
return theme.component.radio.textSize;
|
|
19372
19372
|
}, function (_a) {
|
|
@@ -19382,7 +19382,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19382
19382
|
};
|
|
19383
19383
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$p, __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));
|
|
19384
19384
|
};
|
|
19385
|
-
var templateObject_1$
|
|
19385
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$q;
|
|
19386
19386
|
|
|
19387
19387
|
var ClubRadioGroupInput = function (_a) {
|
|
19388
19388
|
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;
|
|
@@ -19410,17 +19410,17 @@ function formatDate(date, format) {
|
|
|
19410
19410
|
}
|
|
19411
19411
|
}
|
|
19412
19412
|
|
|
19413
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19414
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19415
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19416
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19417
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19418
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19419
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19413
|
+
var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19414
|
+
var Content$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
19415
|
+
var StarsContent = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19416
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
19417
|
+
var DateText$1 = newStyled.span(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
19418
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
19419
|
+
var VerifiedText = newStyled.h1(templateObject_7$d || (templateObject_7$d = __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"])));
|
|
19420
19420
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$9 || (templateObject_8$9 = __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"])));
|
|
19421
19421
|
var ReviewDescription = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __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"])));
|
|
19422
19422
|
var ImageContainer$2 = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __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"])));
|
|
19423
|
-
var ImageWrapper$
|
|
19423
|
+
var ImageWrapper$3 = newStyled(Image$3)(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n width: 100%;\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"], ["\n width: 100%;\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"])));
|
|
19424
19424
|
var VideoWrapper = newStyled.video(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 100%;\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"], ["\n width: 100%;\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"])));
|
|
19425
19425
|
var ProductContainer = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
19426
19426
|
var ProductTitle = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
@@ -19449,26 +19449,26 @@ var Review$1 = function (_a) {
|
|
|
19449
19449
|
}
|
|
19450
19450
|
}, [opened]);
|
|
19451
19451
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$o, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19452
|
-
(!isVideo ? (jsx$1(ImageWrapper$
|
|
19452
|
+
(!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));
|
|
19453
19453
|
};
|
|
19454
|
-
var templateObject_1$
|
|
19454
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$p, templateObject_4$l, templateObject_5$g, templateObject_6$e, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$6, 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;
|
|
19455
19455
|
|
|
19456
19456
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19457
19457
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19458
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19459
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19460
|
-
var Content = newStyled.div(templateObject_3$
|
|
19461
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19462
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19463
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19464
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19458
|
+
var Container$n = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19459
|
+
var Heading = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19460
|
+
var Content = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19461
|
+
var ReviewContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19462
|
+
var DateText = newStyled.span(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
19463
|
+
var VariantText = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
19464
|
+
var ReviewerName = newStyled.h2(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
19465
19465
|
var ReviewTitle = newStyled.h3(templateObject_8$8 || (templateObject_8$8 = __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"])));
|
|
19466
19466
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __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"])));
|
|
19467
19467
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$5 || (templateObject_10$5 = __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"])));
|
|
19468
19468
|
var ImagesContainer = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
19469
19469
|
var Images = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
19470
19470
|
var ImageSpace = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
19471
|
-
var ImageWrapper$
|
|
19471
|
+
var ImageWrapper$2 = newStyled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"], ["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
19472
19472
|
var HelpfulContainerDesktop = newStyled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"], ["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"])), function (_a) {
|
|
19473
19473
|
var showMoreDesktop = _a.showMoreDesktop;
|
|
19474
19474
|
return (showMoreDesktop ? '12px' : '50px');
|
|
@@ -19505,17 +19505,17 @@ var Review = function (_a) {
|
|
|
19505
19505
|
__html: showMoreDesktop
|
|
19506
19506
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19507
19507
|
: description,
|
|
19508
|
-
} }, 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$
|
|
19508
|
+
} }, 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));
|
|
19509
19509
|
};
|
|
19510
|
-
var templateObject_1$
|
|
19511
|
-
|
|
19512
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19513
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19514
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19515
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19516
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19517
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19518
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19510
|
+
var templateObject_1$z, templateObject_2$r, templateObject_3$o, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$c, templateObject_8$8, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19511
|
+
|
|
19512
|
+
var Container$m = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19513
|
+
var ReviewsContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
19514
|
+
var ReviewsCount = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
19515
|
+
var ReviewsStars = newStyled.div(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
19516
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
19517
|
+
var ReviewsImages = newStyled.div(templateObject_6$c || (templateObject_6$c = __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"])));
|
|
19518
|
+
var SummaryItem = newStyled.div(templateObject_7$b || (templateObject_7$b = __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) {
|
|
19519
19519
|
var backgroundUrl = _a.backgroundUrl;
|
|
19520
19520
|
return "url(".concat(backgroundUrl, ")");
|
|
19521
19521
|
});
|
|
@@ -19525,17 +19525,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19525
19525
|
var theme = useTheme();
|
|
19526
19526
|
return (jsxs$1(Container$m, { 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));
|
|
19527
19527
|
};
|
|
19528
|
-
var templateObject_1$
|
|
19528
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$n, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$b;
|
|
19529
19529
|
|
|
19530
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19531
|
-
var Text = newStyled.p(templateObject_2$
|
|
19530
|
+
var Container$l = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19531
|
+
var Text = newStyled.p(templateObject_2$p || (templateObject_2$p = __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; });
|
|
19532
19532
|
var ScrollToTop = function (_a) {
|
|
19533
19533
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19534
19534
|
var theme = useTheme();
|
|
19535
19535
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19536
19536
|
return (jsxs$1(Container$l, __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));
|
|
19537
19537
|
};
|
|
19538
|
-
var templateObject_1$
|
|
19538
|
+
var templateObject_1$x, templateObject_2$p;
|
|
19539
19539
|
|
|
19540
19540
|
var Input = newStyled.input(function (props) { return ({
|
|
19541
19541
|
padding: props.theme.component.input.padding,
|
|
@@ -19566,7 +19566,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19566
19566
|
},
|
|
19567
19567
|
}); });
|
|
19568
19568
|
|
|
19569
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19569
|
+
var Container$k = newStyled.div(templateObject_1$w || (templateObject_1$w = __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({
|
|
19570
19570
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19571
19571
|
}));
|
|
19572
19572
|
var Description = newStyled.div({
|
|
@@ -19585,7 +19585,7 @@ var ProductItem = function (_a) {
|
|
|
19585
19585
|
var theme = useTheme();
|
|
19586
19586
|
return (jsxs$1(Container$k, __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));
|
|
19587
19587
|
};
|
|
19588
|
-
var templateObject_1$
|
|
19588
|
+
var templateObject_1$w;
|
|
19589
19589
|
|
|
19590
19590
|
var Container$j = newStyled.div({
|
|
19591
19591
|
display: 'flex',
|
|
@@ -19601,7 +19601,7 @@ var Ul = newStyled.ul({
|
|
|
19601
19601
|
margin: '0px',
|
|
19602
19602
|
padding: '0px',
|
|
19603
19603
|
});
|
|
19604
|
-
var Li = newStyled.li(templateObject_1$
|
|
19604
|
+
var Li = newStyled.li(templateObject_1$v || (templateObject_1$v = __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({
|
|
19605
19605
|
padding: [0, '0rem 1rem'],
|
|
19606
19606
|
borderRadius: [0, '0.5rem'],
|
|
19607
19607
|
}));
|
|
@@ -19613,12 +19613,12 @@ var Anchor = newStyled.a({
|
|
|
19613
19613
|
padding: 0,
|
|
19614
19614
|
textDecoration: 'none',
|
|
19615
19615
|
});
|
|
19616
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19616
|
+
var Container$i = newStyled.div(templateObject_2$o || (templateObject_2$o = __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({
|
|
19617
19617
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19618
19618
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19619
19619
|
borderRadius: ['0', '0.5rem'],
|
|
19620
19620
|
}));
|
|
19621
|
-
var Header = newStyled.div(templateObject_3$
|
|
19621
|
+
var Header = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19622
19622
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19623
19623
|
}));
|
|
19624
19624
|
var ResultsPanel = function (_a) {
|
|
@@ -19626,9 +19626,9 @@ var ResultsPanel = function (_a) {
|
|
|
19626
19626
|
var theme = useTheme();
|
|
19627
19627
|
return (jsxs$1(Container$i, __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));
|
|
19628
19628
|
};
|
|
19629
|
-
var templateObject_1$
|
|
19629
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$m;
|
|
19630
19630
|
|
|
19631
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19631
|
+
var Button$1 = newStyled.button(templateObject_1$u || (templateObject_1$u = __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({
|
|
19632
19632
|
right: ['1rem', '7.75rem'],
|
|
19633
19633
|
top: ['0.75rem', '0.75rem'],
|
|
19634
19634
|
}));
|
|
@@ -19637,7 +19637,7 @@ var ClearButton = function (_a) {
|
|
|
19637
19637
|
var theme = useTheme();
|
|
19638
19638
|
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));
|
|
19639
19639
|
};
|
|
19640
|
-
var templateObject_1$
|
|
19640
|
+
var templateObject_1$u;
|
|
19641
19641
|
|
|
19642
19642
|
var SearchIconContainer = newStyled.div({
|
|
19643
19643
|
display: 'flex',
|
|
@@ -19647,7 +19647,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19647
19647
|
background: 'white',
|
|
19648
19648
|
alignSelf: 'center',
|
|
19649
19649
|
});
|
|
19650
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19650
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
19651
19651
|
var SearchControl = function (_a) {
|
|
19652
19652
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19653
19653
|
var theme = useTheme();
|
|
@@ -19663,7 +19663,7 @@ var SearchControl = function (_a) {
|
|
|
19663
19663
|
}
|
|
19664
19664
|
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));
|
|
19665
19665
|
};
|
|
19666
|
-
var templateObject_1$
|
|
19666
|
+
var templateObject_1$t;
|
|
19667
19667
|
|
|
19668
19668
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19669
19669
|
var reducer = function (state, action) {
|
|
@@ -19730,20 +19730,20 @@ var SearchBar = function (_a) {
|
|
|
19730
19730
|
} }, 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));
|
|
19731
19731
|
};
|
|
19732
19732
|
|
|
19733
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19734
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19735
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19736
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19737
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19733
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
19734
|
+
var BackArrow = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19735
|
+
var BoldSpan = newStyled.span(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
19736
|
+
var NormalSpan = newStyled.span(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
19737
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
19738
19738
|
var SearchNavigation = function (_a) {
|
|
19739
19739
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19740
19740
|
return (jsxs$1(Container$g, { 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) {
|
|
19741
19741
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19742
19742
|
}) }, void 0)] }, void 0));
|
|
19743
19743
|
};
|
|
19744
|
-
var templateObject_1$
|
|
19744
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$d;
|
|
19745
19745
|
|
|
19746
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19746
|
+
var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
19747
19747
|
var alignCenter = _a.alignCenter;
|
|
19748
19748
|
return alignCenter &&
|
|
19749
19749
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19753,26 +19753,26 @@ var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
19753
19753
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19754
19754
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19755
19755
|
});
|
|
19756
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19757
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19756
|
+
var TitleText = newStyled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
19757
|
+
var BannerText = newStyled.div(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
19758
19758
|
var ShortBanner = function (_a) {
|
|
19759
19759
|
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;
|
|
19760
19760
|
var theme = useTheme();
|
|
19761
19761
|
return (jsxs$1(Container$f, __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));
|
|
19762
19762
|
};
|
|
19763
|
-
var templateObject_1$
|
|
19764
|
-
|
|
19765
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19766
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19767
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19768
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19769
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19770
|
-
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$
|
|
19771
|
-
var Container$e = newStyled('div')(templateObject_7$
|
|
19763
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k;
|
|
19764
|
+
|
|
19765
|
+
var TableElement$2 = newStyled.table(templateObject_1$q || (templateObject_1$q = __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; });
|
|
19766
|
+
var TableCell$2 = newStyled.td(templateObject_2$l || (templateObject_2$l = __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; });
|
|
19767
|
+
var TableHead$2 = newStyled.th(templateObject_3$j || (templateObject_3$j = __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; });
|
|
19768
|
+
var Label$1 = newStyled('div')(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
19769
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19770
|
+
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19771
|
+
var Container$e = newStyled('div')(templateObject_7$a || (templateObject_7$a = __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"])));
|
|
19772
19772
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __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"])));
|
|
19773
19773
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
19774
19774
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __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; });
|
|
19775
|
-
var templateObject_1$
|
|
19775
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$h, templateObject_5$c, templateObject_6$b, templateObject_7$a, templateObject_8$7, templateObject_9$4, templateObject_10$4;
|
|
19776
19776
|
|
|
19777
19777
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19778
19778
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19813,16 +19813,16 @@ var SizeChartTable = function (_a) {
|
|
|
19813
19813
|
}, 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));
|
|
19814
19814
|
};
|
|
19815
19815
|
|
|
19816
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19817
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19818
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19819
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19816
|
+
var TableElement$1 = newStyled.table(templateObject_1$p || (templateObject_1$p = __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; });
|
|
19817
|
+
var TableCell$1 = newStyled.td(templateObject_2$k || (templateObject_2$k = __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; });
|
|
19818
|
+
var TableHead$1 = newStyled.th(templateObject_3$i || (templateObject_3$i = __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; });
|
|
19819
|
+
var TableRow$1 = newStyled.tr(templateObject_4$g || (templateObject_4$g = __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; });
|
|
19820
19820
|
var SizeTable = function (_a) {
|
|
19821
19821
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19822
19822
|
var theme = useTheme();
|
|
19823
19823
|
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));
|
|
19824
19824
|
};
|
|
19825
|
-
var templateObject_1$
|
|
19825
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$g;
|
|
19826
19826
|
|
|
19827
19827
|
var getStylesBySize$7 = function (size) {
|
|
19828
19828
|
switch (size) {
|
|
@@ -19849,7 +19849,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19849
19849
|
} });
|
|
19850
19850
|
};
|
|
19851
19851
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19852
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19852
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$o || (templateObject_1$o = __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));
|
|
19853
19853
|
};
|
|
19854
19854
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19855
19855
|
if (disabled)
|
|
@@ -19865,23 +19865,23 @@ var TextButton = function (_a) {
|
|
|
19865
19865
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19866
19866
|
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));
|
|
19867
19867
|
};
|
|
19868
|
-
var templateObject_1$
|
|
19868
|
+
var templateObject_1$o;
|
|
19869
19869
|
|
|
19870
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19871
|
-
var P = newStyled.p(templateObject_2$
|
|
19872
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19870
|
+
var Container$d = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
19871
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19872
|
+
var PercentageSpan = newStyled.span(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
19873
19873
|
var SizeFitGuide = function (_a) {
|
|
19874
19874
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19875
19875
|
return (jsxs$1(Container$d, { 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));
|
|
19876
19876
|
};
|
|
19877
|
-
var templateObject_1$
|
|
19877
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$h;
|
|
19878
19878
|
|
|
19879
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19879
|
+
var ButtonsContainer = newStyled.div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
19880
19880
|
var inline = _a.inline;
|
|
19881
19881
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19882
19882
|
});
|
|
19883
|
-
var Row = newStyled.div(templateObject_2$
|
|
19884
|
-
var templateObject_1$
|
|
19883
|
+
var Row = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
19884
|
+
var templateObject_1$m, templateObject_2$i;
|
|
19885
19885
|
|
|
19886
19886
|
var SizeSelector = function (_a) {
|
|
19887
19887
|
var _b;
|
|
@@ -19903,7 +19903,7 @@ var SizeSelector = function (_a) {
|
|
|
19903
19903
|
}) }), void 0)] }), void 0));
|
|
19904
19904
|
};
|
|
19905
19905
|
|
|
19906
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19906
|
+
var TabContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
19907
19907
|
var titleSize = _a.titleSize;
|
|
19908
19908
|
return titleSize;
|
|
19909
19909
|
}, function (_a) {
|
|
@@ -19920,18 +19920,18 @@ var Tab = function (_a) {
|
|
|
19920
19920
|
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;
|
|
19921
19921
|
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));
|
|
19922
19922
|
};
|
|
19923
|
-
var templateObject_1$
|
|
19923
|
+
var templateObject_1$l;
|
|
19924
19924
|
|
|
19925
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19926
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19925
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19926
|
+
var TabList = newStyled.div(templateObject_2$h || (templateObject_2$h = __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) {
|
|
19927
19927
|
var backgroundColor = _a.backgroundColor;
|
|
19928
19928
|
return backgroundColor;
|
|
19929
19929
|
}, function (_a) {
|
|
19930
19930
|
var borderColor = _a.borderColor;
|
|
19931
19931
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19932
19932
|
});
|
|
19933
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19934
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19933
|
+
var TabContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19934
|
+
var TabSeparator = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
19935
19935
|
var Tabs = function (_a) {
|
|
19936
19936
|
var _b;
|
|
19937
19937
|
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;
|
|
@@ -19942,14 +19942,14 @@ var Tabs = function (_a) {
|
|
|
19942
19942
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19943
19943
|
return (jsxs$1(Container$c, __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));
|
|
19944
19944
|
};
|
|
19945
|
-
var templateObject_1$
|
|
19945
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$g, templateObject_4$f;
|
|
19946
19946
|
|
|
19947
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19947
|
+
var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
19948
19948
|
var Tag = function (_a) {
|
|
19949
19949
|
var text = _a.text, className = _a.className;
|
|
19950
19950
|
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19951
19951
|
};
|
|
19952
|
-
var templateObject_1$
|
|
19952
|
+
var templateObject_1$j;
|
|
19953
19953
|
|
|
19954
19954
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19955
19955
|
switch (size) {
|
|
@@ -20060,9 +20060,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20060
20060
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20061
20061
|
};
|
|
20062
20062
|
|
|
20063
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
20064
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
20065
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20063
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
20064
|
+
var VideoOverlay = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
20065
|
+
var FullscreenVideo = newStyled.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
20066
20066
|
var ImageVideo = function (_a) {
|
|
20067
20067
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20068
20068
|
var video = useRef(null);
|
|
@@ -20070,7 +20070,7 @@ var ImageVideo = function (_a) {
|
|
|
20070
20070
|
var handleOnClick = function () {
|
|
20071
20071
|
setOpened(true);
|
|
20072
20072
|
};
|
|
20073
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper, { children: [jsx$1(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$7, __assign$1({ variant: "link", style: {
|
|
20073
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper$1, { children: [jsx$1(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$7, __assign$1({ variant: "link", style: {
|
|
20074
20074
|
position: 'absolute',
|
|
20075
20075
|
top: '10px',
|
|
20076
20076
|
right: '10px',
|
|
@@ -20082,12 +20082,12 @@ var ImageVideo = function (_a) {
|
|
|
20082
20082
|
height: '100%',
|
|
20083
20083
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20084
20084
|
};
|
|
20085
|
-
var templateObject_1$
|
|
20085
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$f;
|
|
20086
20086
|
|
|
20087
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20088
|
-
var ContainerMobile = css(templateObject_2$
|
|
20089
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
20090
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20087
|
+
var ContainerDesktop = css(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
20088
|
+
var ContainerMobile = css(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
20089
|
+
var Container$a = newStyled.div(templateObject_3$e || (templateObject_3$e = __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);
|
|
20090
|
+
var TextContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
20091
20091
|
var TextWithImage = function (_a) {
|
|
20092
20092
|
var _b, _c, _d, _e;
|
|
20093
20093
|
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"]);
|
|
@@ -20117,25 +20117,25 @@ var TextWithImage = function (_a) {
|
|
|
20117
20117
|
},
|
|
20118
20118
|
} }, 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));
|
|
20119
20119
|
};
|
|
20120
|
-
var templateObject_1$
|
|
20120
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$e;
|
|
20121
20121
|
|
|
20122
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
20122
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20123
20123
|
var timerColor = _a.timerColor;
|
|
20124
20124
|
return timerColor || '';
|
|
20125
20125
|
});
|
|
20126
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
20126
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$e || (templateObject_2$e = __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) {
|
|
20127
20127
|
var timerColor = _a.timerColor;
|
|
20128
20128
|
return timerColor || '';
|
|
20129
20129
|
});
|
|
20130
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
20130
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __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) {
|
|
20131
20131
|
var theme = _a.theme;
|
|
20132
20132
|
return theme.colors.shades.white.color;
|
|
20133
20133
|
}, function (_a) {
|
|
20134
20134
|
var theme = _a.theme;
|
|
20135
20135
|
return theme.colors.shades.white.color;
|
|
20136
20136
|
});
|
|
20137
|
-
var Unit = newStyled.p(templateObject_4$
|
|
20138
|
-
var templateObject_1$
|
|
20137
|
+
var Unit = newStyled.p(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
20138
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$d;
|
|
20139
20139
|
|
|
20140
20140
|
var HRS = 'HRS';
|
|
20141
20141
|
var MIN = 'MIN';
|
|
@@ -20178,14 +20178,14 @@ var Timer = function (_a) {
|
|
|
20178
20178
|
|
|
20179
20179
|
var slideInAnimation = function (distanceFromTop) {
|
|
20180
20180
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20181
|
-
return keyframes(templateObject_1$
|
|
20181
|
+
return keyframes(templateObject_1$f || (templateObject_1$f = __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);
|
|
20182
20182
|
};
|
|
20183
20183
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20184
20184
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20185
|
-
return keyframes(templateObject_2$
|
|
20185
|
+
return keyframes(templateObject_2$d || (templateObject_2$d = __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);
|
|
20186
20186
|
};
|
|
20187
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20188
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20187
|
+
var ToastContainer = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
20188
|
+
var ToastContent = newStyled.div(templateObject_4$c || (templateObject_4$c = __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) {
|
|
20189
20189
|
var distanceFromTop = _a.distanceFromTop;
|
|
20190
20190
|
return distanceFromTop || '124px';
|
|
20191
20191
|
}, function (_a) {
|
|
@@ -20198,12 +20198,12 @@ var ToastContent = newStyled.div(templateObject_4$b || (templateObject_4$b = __m
|
|
|
20198
20198
|
var distanceFromTop = _a.distanceFromTop;
|
|
20199
20199
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20200
20200
|
});
|
|
20201
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20201
|
+
var ToastText = newStyled.p(templateObject_5$b || (templateObject_5$b = __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) {
|
|
20202
20202
|
var severity = _a.severity;
|
|
20203
20203
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20204
20204
|
});
|
|
20205
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20206
|
-
var templateObject_1$
|
|
20205
|
+
var CloseIcon = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20206
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$c, templateObject_5$b, templateObject_6$a;
|
|
20207
20207
|
|
|
20208
20208
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20209
20209
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20223,9 +20223,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20223
20223
|
});
|
|
20224
20224
|
Toast.displayName = 'Toast';
|
|
20225
20225
|
|
|
20226
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20227
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20228
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20226
|
+
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
20227
|
+
var GrandTotal = newStyled.h1(templateObject_2$c || (templateObject_2$c = __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; });
|
|
20228
|
+
var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __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) {
|
|
20229
20229
|
var theme = _a.theme;
|
|
20230
20230
|
return theme.component.total.basicTotal.currency.color;
|
|
20231
20231
|
}, function (_a) {
|
|
@@ -20238,21 +20238,21 @@ var Currency = newStyled.span(templateObject_3$a || (templateObject_3$a = __make
|
|
|
20238
20238
|
var theme = _a.theme;
|
|
20239
20239
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20240
20240
|
});
|
|
20241
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20241
|
+
var Container$9 = newStyled.div(templateObject_4$b || (templateObject_4$b = __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) {
|
|
20242
20242
|
var highlightColor = _a.highlightColor;
|
|
20243
20243
|
return highlightColor;
|
|
20244
20244
|
});
|
|
20245
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20245
|
+
var TotalContainer = newStyled(Container$9)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20246
20246
|
var showTotalLabel = _a.showTotalLabel;
|
|
20247
20247
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20248
20248
|
});
|
|
20249
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20250
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20249
|
+
var DiscountText = newStyled.h3(templateObject_6$9 || (templateObject_6$9 = __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"])));
|
|
20250
|
+
var DiscountAmount = newStyled.h3(templateObject_7$9 || (templateObject_7$9 = __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) {
|
|
20251
20251
|
var theme = _a.theme;
|
|
20252
20252
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20253
20253
|
});
|
|
20254
20254
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20255
|
-
var templateObject_1$
|
|
20255
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$9, templateObject_8$6;
|
|
20256
20256
|
|
|
20257
20257
|
var Total = function (_a) {
|
|
20258
20258
|
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;
|
|
@@ -20260,19 +20260,19 @@ var Total = function (_a) {
|
|
|
20260
20260
|
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$9, __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));
|
|
20261
20261
|
};
|
|
20262
20262
|
|
|
20263
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20263
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20264
20264
|
var color = _a.color;
|
|
20265
20265
|
return color;
|
|
20266
20266
|
});
|
|
20267
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20268
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20267
|
+
var ItemContainer = newStyled.div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
20268
|
+
var Item = newStyled.h4(templateObject_3$a || (templateObject_3$a = __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) {
|
|
20269
20269
|
var theme = _a.theme;
|
|
20270
20270
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20271
20271
|
}, function (_a) {
|
|
20272
20272
|
var theme = _a.theme;
|
|
20273
20273
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20274
20274
|
});
|
|
20275
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20275
|
+
var CouponItem = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20276
20276
|
var color = _a.color;
|
|
20277
20277
|
return color;
|
|
20278
20278
|
});
|
|
@@ -20285,26 +20285,26 @@ var Subtotal = function (_a) {
|
|
|
20285
20285
|
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));
|
|
20286
20286
|
})] }), void 0));
|
|
20287
20287
|
};
|
|
20288
|
-
var templateObject_1$
|
|
20288
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$a;
|
|
20289
20289
|
|
|
20290
20290
|
var Totals = {
|
|
20291
20291
|
Total: Total,
|
|
20292
20292
|
Subtotal: Subtotal,
|
|
20293
20293
|
};
|
|
20294
20294
|
|
|
20295
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20296
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20297
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20298
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20299
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20300
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20295
|
+
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20296
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20297
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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; });
|
|
20298
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$9 || (templateObject_4$9 = __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'); });
|
|
20299
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
20300
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$8 || (templateObject_6$8 = __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) {
|
|
20301
20301
|
return props.finishedTrack
|
|
20302
20302
|
? props.finishedTrackColor
|
|
20303
20303
|
: props.activeTrack
|
|
20304
20304
|
? props.activeTrackColor
|
|
20305
20305
|
: '';
|
|
20306
20306
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20307
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20307
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$8 || (templateObject_7$8 = __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"])));
|
|
20308
20308
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __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) {
|
|
20309
20309
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20310
20310
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20344,17 +20344,17 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20344
20344
|
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));
|
|
20345
20345
|
})] }), void 0));
|
|
20346
20346
|
};
|
|
20347
|
-
var templateObject_1$
|
|
20348
|
-
|
|
20349
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20350
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20351
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20352
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20353
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20354
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20347
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8, templateObject_7$8, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20348
|
+
|
|
20349
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20350
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20351
|
+
var CheckpointDate = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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; });
|
|
20352
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$8 || (templateObject_4$8 = __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'); });
|
|
20353
|
+
var CheckpointStatus = newStyled.p(templateObject_5$8 || (templateObject_5$8 = __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'); });
|
|
20354
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
20355
20355
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20356
20356
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20357
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20357
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __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)'); });
|
|
20358
20358
|
var LastCheckpointTrack = newStyled.div(templateObject_8$4 || (templateObject_8$4 = __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; });
|
|
20359
20359
|
var TrackingProgress = function (_a) {
|
|
20360
20360
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
@@ -20384,9 +20384,9 @@ var TrackingProgress = function (_a) {
|
|
|
20384
20384
|
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));
|
|
20385
20385
|
})] }), void 0));
|
|
20386
20386
|
};
|
|
20387
|
-
var templateObject_1$
|
|
20387
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$4;
|
|
20388
20388
|
|
|
20389
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20389
|
+
var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __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) {
|
|
20390
20390
|
var textPosition = _a.textPosition;
|
|
20391
20391
|
return textPosition;
|
|
20392
20392
|
}, function (_a) {
|
|
@@ -20399,7 +20399,7 @@ var TimerContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = _
|
|
|
20399
20399
|
var borderRadius = _a.borderRadius;
|
|
20400
20400
|
return borderRadius || '8px';
|
|
20401
20401
|
});
|
|
20402
|
-
var templateObject_1$
|
|
20402
|
+
var templateObject_1$a;
|
|
20403
20403
|
|
|
20404
20404
|
var getDefaultCountdown = function () {
|
|
20405
20405
|
var tomorrowDate = new Date();
|
|
@@ -20415,7 +20415,7 @@ var HurryUp = function (_a) {
|
|
|
20415
20415
|
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));
|
|
20416
20416
|
};
|
|
20417
20417
|
|
|
20418
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20418
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
20419
20419
|
var size = _a.size;
|
|
20420
20420
|
return (size ? size : '100%');
|
|
20421
20421
|
}, function (_a) {
|
|
@@ -20429,7 +20429,7 @@ var borderSize = {
|
|
|
20429
20429
|
large: '3px',
|
|
20430
20430
|
};
|
|
20431
20431
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20432
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20432
|
+
var StyledSpinner = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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) {
|
|
20433
20433
|
var size = _a.size;
|
|
20434
20434
|
return borderSize[size];
|
|
20435
20435
|
}, function (_a) {
|
|
@@ -20442,13 +20442,52 @@ var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __
|
|
|
20442
20442
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20443
20443
|
return duration;
|
|
20444
20444
|
});
|
|
20445
|
-
var templateObject_1$
|
|
20445
|
+
var templateObject_1$9, templateObject_2$8;
|
|
20446
20446
|
|
|
20447
20447
|
var Spinner = function (_a) {
|
|
20448
20448
|
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;
|
|
20449
20449
|
return (jsx$1(Container$6, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
20450
20450
|
};
|
|
20451
20451
|
|
|
20452
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
20453
|
+
var ImageWrapper = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
20454
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$7 || (templateObject_3$7 = __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 auto;\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 auto;\n max-height: 123px;\n }\n"])));
|
|
20455
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n width: 185px;\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n width: 185px;\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20456
|
+
var TitleWrapper = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20457
|
+
var SubTitleWrapper = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20458
|
+
var ButtonsWrapper = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20459
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6;
|
|
20460
|
+
|
|
20461
|
+
function CartItemCard(_a) {
|
|
20462
|
+
var style = _a.style, className = _a.className, children = _a.children;
|
|
20463
|
+
return (jsx$1(ContainerWrapper$1, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20464
|
+
}
|
|
20465
|
+
var CartItemImage = function (_a) {
|
|
20466
|
+
var alt = _a.alt, src = _a.src, className = _a.className, sizes = _a.sizes;
|
|
20467
|
+
return (jsx$1(ImageWrapper, { children: jsx$1(ImageComponent, { alt: alt, src: src, className: className, sizes: sizes }, void 0) }, void 0));
|
|
20468
|
+
};
|
|
20469
|
+
var BodyContent = function (_a) {
|
|
20470
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20471
|
+
return (jsx$1(RightComponentWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20472
|
+
};
|
|
20473
|
+
var TitleContent = function (_a) {
|
|
20474
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20475
|
+
return (jsx$1(TitleWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20476
|
+
};
|
|
20477
|
+
var SubTitleContent = function (_a) {
|
|
20478
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20479
|
+
return (jsx$1(SubTitleWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20480
|
+
};
|
|
20481
|
+
var ButtonsContent = function (_a) {
|
|
20482
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20483
|
+
return (jsx$1(ButtonsWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20484
|
+
};
|
|
20485
|
+
BodyContent.TitleContent = TitleContent;
|
|
20486
|
+
BodyContent.SubTitleContent = SubTitleContent;
|
|
20487
|
+
BodyContent.ButtonsContent = ButtonsContent;
|
|
20488
|
+
CartItemCard.CartItemImageContent = CartItemImage;
|
|
20489
|
+
CartItemCard.BodyContent = BodyContent;
|
|
20490
|
+
|
|
20452
20491
|
var radioIds = {
|
|
20453
20492
|
oneTime: {
|
|
20454
20493
|
id: 'one-time-purchase',
|
|
@@ -21012,5 +21051,5 @@ var SizeChartTableV2 = function (_a) {
|
|
|
21012
21051
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
21013
21052
|
};
|
|
21014
21053
|
|
|
21015
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21054
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21016
21055
|
//# sourceMappingURL=index.esm.js.map
|