@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.js
CHANGED
|
@@ -3207,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3207
3207
|
};
|
|
3208
3208
|
}
|
|
3209
3209
|
};
|
|
3210
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
3210
|
+
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) {
|
|
3211
3211
|
var backgroundColor = _a.backgroundColor;
|
|
3212
3212
|
return backgroundColor;
|
|
3213
3213
|
}, function (_a) {
|
|
@@ -3229,7 +3229,7 @@ var Container$1k = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
3229
3229
|
var size = _a.size;
|
|
3230
3230
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3231
3231
|
});
|
|
3232
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3232
|
+
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) {
|
|
3233
3233
|
var textColor = _a.textColor;
|
|
3234
3234
|
return textColor;
|
|
3235
3235
|
}, function (_a) {
|
|
@@ -3246,7 +3246,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3246
3246
|
var theme = useTheme();
|
|
3247
3247
|
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
3248
3248
|
};
|
|
3249
|
-
var templateObject_1$
|
|
3249
|
+
var templateObject_1$2e, templateObject_2$1y;
|
|
3250
3250
|
|
|
3251
3251
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3252
3252
|
var _a, _b, _c;
|
|
@@ -3277,7 +3277,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3277
3277
|
};
|
|
3278
3278
|
}
|
|
3279
3279
|
};
|
|
3280
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3280
|
+
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) {
|
|
3281
3281
|
var backgroundColor = _a.backgroundColor;
|
|
3282
3282
|
return backgroundColor;
|
|
3283
3283
|
}, function (_a) {
|
|
@@ -3299,7 +3299,7 @@ var Container$1j = newStyled.div(templateObject_1$2c || (templateObject_1$2c = _
|
|
|
3299
3299
|
var size = _a.size;
|
|
3300
3300
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3301
3301
|
});
|
|
3302
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3302
|
+
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) {
|
|
3303
3303
|
var textColor = _a.textColor;
|
|
3304
3304
|
return textColor;
|
|
3305
3305
|
}, function (_a) {
|
|
@@ -3316,7 +3316,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3316
3316
|
var theme = useTheme();
|
|
3317
3317
|
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
3318
3318
|
};
|
|
3319
|
-
var templateObject_1$
|
|
3319
|
+
var templateObject_1$2d, templateObject_2$1x;
|
|
3320
3320
|
|
|
3321
3321
|
var Viewports = {
|
|
3322
3322
|
mobile: 'mobile',
|
|
@@ -3425,8 +3425,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3425
3425
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3426
3426
|
}
|
|
3427
3427
|
};
|
|
3428
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3429
|
-
var Price = newStyled.p(templateObject_2$
|
|
3428
|
+
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"])));
|
|
3429
|
+
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) {
|
|
3430
3430
|
var weight = _a.weight;
|
|
3431
3431
|
return (weight ? weight : '400');
|
|
3432
3432
|
}, function (_a) {
|
|
@@ -3450,7 +3450,7 @@ var Price = newStyled.p(templateObject_2$1v || (templateObject_2$1v = __makeTemp
|
|
|
3450
3450
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3451
3451
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3452
3452
|
});
|
|
3453
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3453
|
+
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) {
|
|
3454
3454
|
var _b;
|
|
3455
3455
|
var size = _a.size;
|
|
3456
3456
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3483,9 +3483,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3483
3483
|
};
|
|
3484
3484
|
return (jsxRuntime.jsxs(Container$1i, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3485
3485
|
};
|
|
3486
|
-
var templateObject_1$
|
|
3486
|
+
var templateObject_1$2c, templateObject_2$1w, templateObject_3$1b;
|
|
3487
3487
|
|
|
3488
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3489
3489
|
var PriceLabelV2$1 = function (_a) {
|
|
3490
3490
|
var _b;
|
|
3491
3491
|
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 ? exports.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"]);
|
|
@@ -3556,11 +3556,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3556
3556
|
lineHeight: '22px',
|
|
3557
3557
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3558
3558
|
};
|
|
3559
|
-
var templateObject_1$
|
|
3559
|
+
var templateObject_1$2b;
|
|
3560
3560
|
|
|
3561
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3562
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3563
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3561
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3562
|
+
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"])));
|
|
3563
|
+
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"])));
|
|
3564
3564
|
var PriceLabelV3 = function (_a) {
|
|
3565
3565
|
var _b;
|
|
3566
3566
|
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 ? exports.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"]);
|
|
@@ -3631,9 +3631,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3631
3631
|
lineHeight: '22px',
|
|
3632
3632
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3633
3633
|
};
|
|
3634
|
-
var templateObject_1$
|
|
3634
|
+
var templateObject_1$2a, templateObject_2$1v, templateObject_3$1a;
|
|
3635
3635
|
|
|
3636
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3636
|
+
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"])));
|
|
3637
3637
|
var PriceLabel = function (_a) {
|
|
3638
3638
|
var _b;
|
|
3639
3639
|
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 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3667,9 +3667,9 @@ var PriceLabel = function (_a) {
|
|
|
3667
3667
|
marginTop: '-6px',
|
|
3668
3668
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3669
3669
|
};
|
|
3670
|
-
var templateObject_1$
|
|
3670
|
+
var templateObject_1$29;
|
|
3671
3671
|
|
|
3672
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3672
|
+
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"])));
|
|
3673
3673
|
var PriceLabelV2 = function (_a) {
|
|
3674
3674
|
var _b;
|
|
3675
3675
|
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 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3702,20 +3702,20 @@ var PriceLabelV2 = function (_a) {
|
|
|
3702
3702
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3703
3703
|
return (jsxRuntime.jsxs(Container$1i, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3704
3704
|
};
|
|
3705
|
-
var templateObject_1$
|
|
3705
|
+
var templateObject_1$28;
|
|
3706
3706
|
|
|
3707
|
-
var ContainerWrapper$
|
|
3708
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3709
|
-
var templateObject_1$
|
|
3707
|
+
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"])));
|
|
3708
|
+
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"])));
|
|
3709
|
+
var templateObject_1$27, templateObject_2$1u;
|
|
3710
3710
|
|
|
3711
3711
|
function ClubPriceMemberLabel(_a) {
|
|
3712
3712
|
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"]);
|
|
3713
3713
|
var color = isClub ? '#882A2B' : '#292929';
|
|
3714
3714
|
var PriceComponent = isPDP ? (jsxRuntime.jsx(PriceLabelV2, { originalPrice: rest.originalPrice, finalPrice: rest.finalPrice, color: color, isClubOffer: isCollections }, void 0)) : (jsxRuntime.jsx(PriceLabel, __assign$1({}, rest, { color: color, isClubOffer: isCollections }), void 0));
|
|
3715
|
-
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$
|
|
3715
|
+
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3716
3716
|
}
|
|
3717
3717
|
|
|
3718
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3718
|
+
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) {
|
|
3719
3719
|
var height = _a.height;
|
|
3720
3720
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3721
3721
|
}, function (_a) {
|
|
@@ -3742,9 +3742,9 @@ var SkeletonBox = function (_a) {
|
|
|
3742
3742
|
var theme = useTheme();
|
|
3743
3743
|
return jsxRuntime.jsx(Container$1h, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3744
3744
|
};
|
|
3745
|
-
var templateObject_1$
|
|
3745
|
+
var templateObject_1$26;
|
|
3746
3746
|
|
|
3747
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3747
|
+
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) {
|
|
3748
3748
|
var width = _a.width;
|
|
3749
3749
|
return width;
|
|
3750
3750
|
}, function (_a) {
|
|
@@ -3760,7 +3760,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$24 || (templateObject_1$24
|
|
|
3760
3760
|
var opacity = _a.opacity;
|
|
3761
3761
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3762
3762
|
});
|
|
3763
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3763
|
+
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) {
|
|
3764
3764
|
var width = _a.width;
|
|
3765
3765
|
return width;
|
|
3766
3766
|
}, function (_a) {
|
|
@@ -3773,7 +3773,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1s || (templateObject_2$
|
|
|
3773
3773
|
var opacity = _a.opacity;
|
|
3774
3774
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3775
3775
|
});
|
|
3776
|
-
var templateObject_1$
|
|
3776
|
+
var templateObject_1$25, templateObject_2$1t;
|
|
3777
3777
|
|
|
3778
3778
|
/* eslint-disable no-undef */
|
|
3779
3779
|
var cache = new Map();
|
|
@@ -3949,7 +3949,7 @@ var buildImageUrl = function (_a) {
|
|
|
3949
3949
|
}
|
|
3950
3950
|
};
|
|
3951
3951
|
|
|
3952
|
-
var Img = newStyled.img(templateObject_1$
|
|
3952
|
+
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; });
|
|
3953
3953
|
var Image$3 = function (_a) {
|
|
3954
3954
|
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"]);
|
|
3955
3955
|
var config = useTheme().config;
|
|
@@ -3958,12 +3958,12 @@ var Image$3 = function (_a) {
|
|
|
3958
3958
|
: src;
|
|
3959
3959
|
return (jsxRuntime.jsx(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));
|
|
3960
3960
|
};
|
|
3961
|
-
var templateObject_1$
|
|
3961
|
+
var templateObject_1$24;
|
|
3962
3962
|
|
|
3963
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3964
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3965
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3966
|
-
var templateObject_1$
|
|
3963
|
+
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"])));
|
|
3964
|
+
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"])));
|
|
3965
|
+
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"])));
|
|
3966
|
+
var templateObject_1$23, templateObject_2$1s, templateObject_3$19;
|
|
3967
3967
|
|
|
3968
3968
|
var ToggleComponent = function (_a) {
|
|
3969
3969
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -4797,13 +4797,13 @@ function jsxs(type, props, key) {
|
|
|
4797
4797
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4798
4798
|
// `variants` styles that are consistent through all themes.
|
|
4799
4799
|
var TAGS = {
|
|
4800
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4801
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4802
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4803
|
-
display1: newStyled.h1(templateObject_4$
|
|
4804
|
-
display2: newStyled.h2(templateObject_5$
|
|
4805
|
-
display3: newStyled.h3(templateObject_6$
|
|
4806
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4800
|
+
hero1: newStyled.h1(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""]))),
|
|
4801
|
+
hero2: newStyled.h2(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject([""], [""]))),
|
|
4802
|
+
hero3: newStyled.h3(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject([""], [""]))),
|
|
4803
|
+
display1: newStyled.h1(templateObject_4$W || (templateObject_4$W = __makeTemplateObject([""], [""]))),
|
|
4804
|
+
display2: newStyled.h2(templateObject_5$H || (templateObject_5$H = __makeTemplateObject([""], [""]))),
|
|
4805
|
+
display3: newStyled.h3(templateObject_6$C || (templateObject_6$C = __makeTemplateObject([""], [""]))),
|
|
4806
|
+
heading1: newStyled.h1(templateObject_7$s || (templateObject_7$s = __makeTemplateObject([""], [""]))),
|
|
4807
4807
|
heading2: newStyled.h2(templateObject_8$m || (templateObject_8$m = __makeTemplateObject([""], [""]))),
|
|
4808
4808
|
heading3: newStyled.h3(templateObject_9$c || (templateObject_9$c = __makeTemplateObject([""], [""]))),
|
|
4809
4809
|
heading4: newStyled.h4(templateObject_10$b || (templateObject_10$b = __makeTemplateObject([""], [""]))),
|
|
@@ -4933,14 +4933,14 @@ var DEFAULTS = {
|
|
|
4933
4933
|
size: 'regular',
|
|
4934
4934
|
},
|
|
4935
4935
|
};
|
|
4936
|
-
var templateObject_1$
|
|
4937
|
-
|
|
4938
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
4939
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4940
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4941
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
4942
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4943
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4936
|
+
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;
|
|
4937
|
+
|
|
4938
|
+
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"])));
|
|
4939
|
+
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"])));
|
|
4940
|
+
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"])));
|
|
4941
|
+
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"])));
|
|
4942
|
+
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"])));
|
|
4943
|
+
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"])));
|
|
4944
4944
|
var PackSelectorV2 = function (_a) {
|
|
4945
4945
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4946
4946
|
return (jsxRuntime.jsx(Container$1g, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4965,27 +4965,27 @@ var PackCard$1 = function (_a) {
|
|
|
4965
4965
|
currency: currencyCode || 'USD',
|
|
4966
4966
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4967
4967
|
};
|
|
4968
|
-
var templateObject_1$
|
|
4968
|
+
var templateObject_1$21, templateObject_2$1q, templateObject_3$17, templateObject_4$V, templateObject_5$G, templateObject_6$B;
|
|
4969
4969
|
|
|
4970
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4971
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4970
|
+
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"])));
|
|
4971
|
+
var DropContainer = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4972
4972
|
var DropList = function (_a) {
|
|
4973
4973
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4974
4974
|
return (jsxRuntime.jsx(Container$1f, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4975
4975
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4976
4976
|
}) }, void 0));
|
|
4977
4977
|
};
|
|
4978
|
-
var templateObject_1$
|
|
4978
|
+
var templateObject_1$20, templateObject_2$1p;
|
|
4979
4979
|
|
|
4980
4980
|
var DROPS_TOTAL = 5;
|
|
4981
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4982
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4983
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4981
|
+
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"])));
|
|
4982
|
+
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"])));
|
|
4983
|
+
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"])));
|
|
4984
4984
|
var AbsorbencyLevel = function (_a) {
|
|
4985
4985
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4986
4986
|
return (jsxRuntime.jsxs(Container$1e, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4987
4987
|
};
|
|
4988
|
-
var templateObject_1$
|
|
4988
|
+
var templateObject_1$1$, templateObject_2$1o, templateObject_3$16;
|
|
4989
4989
|
|
|
4990
4990
|
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]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.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===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.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(`
|
|
4991
4991
|
`),"","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(`
|
|
@@ -5061,7 +5061,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5061
5061
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5062
5062
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5063
5063
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5064
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5064
|
+
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"])));
|
|
5065
5065
|
var Accordion$1 = function (_a) {
|
|
5066
5066
|
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;
|
|
5067
5067
|
var theme = useTheme();
|
|
@@ -5085,9 +5085,9 @@ var Accordion$1 = function (_a) {
|
|
|
5085
5085
|
} }, { children: jsxRuntime.jsx(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 && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5086
5086
|
} }), void 0));
|
|
5087
5087
|
};
|
|
5088
|
-
var templateObject_1$
|
|
5088
|
+
var templateObject_1$1_;
|
|
5089
5089
|
|
|
5090
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
5090
|
+
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"])));
|
|
5091
5091
|
var AccordionOptions = function (_a) {
|
|
5092
5092
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5093
5093
|
var _b = React$2.useState({
|
|
@@ -5111,7 +5111,7 @@ var AccordionOptions = function (_a) {
|
|
|
5111
5111
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5112
5112
|
}) }, void 0));
|
|
5113
5113
|
};
|
|
5114
|
-
var templateObject_1$
|
|
5114
|
+
var templateObject_1$1Z;
|
|
5115
5115
|
|
|
5116
5116
|
/**
|
|
5117
5117
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5247,22 +5247,22 @@ var isValidDate = function (value) {
|
|
|
5247
5247
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5248
5248
|
};
|
|
5249
5249
|
|
|
5250
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5251
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5252
|
-
var templateObject_1$
|
|
5250
|
+
var Bold = newStyled.span(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5251
|
+
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"])));
|
|
5252
|
+
var templateObject_1$1Y, templateObject_2$1n;
|
|
5253
5253
|
|
|
5254
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5254
|
+
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) {
|
|
5255
5255
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5256
5256
|
return width;
|
|
5257
5257
|
}, function (_a) {
|
|
5258
5258
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5259
5259
|
return height;
|
|
5260
5260
|
});
|
|
5261
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5262
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5263
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5264
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5265
|
-
var templateObject_1$
|
|
5261
|
+
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"])));
|
|
5262
|
+
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"])));
|
|
5263
|
+
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"])));
|
|
5264
|
+
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"])));
|
|
5265
|
+
var templateObject_1$1X, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F;
|
|
5266
5266
|
|
|
5267
5267
|
var CouponCard = function (_a) {
|
|
5268
5268
|
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;
|
|
@@ -5318,14 +5318,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5318
5318
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5319
5319
|
};
|
|
5320
5320
|
|
|
5321
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5322
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5321
|
+
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; });
|
|
5322
|
+
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"])));
|
|
5323
5323
|
var Error$1 = function (_a) {
|
|
5324
5324
|
var error = _a.error;
|
|
5325
5325
|
var theme = useTheme();
|
|
5326
5326
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5327
5327
|
};
|
|
5328
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1W, templateObject_2$1l;
|
|
5329
5329
|
|
|
5330
5330
|
var BaseSelectButton = function (_a) {
|
|
5331
5331
|
var children = _a.children, as = _a.as;
|
|
@@ -5342,7 +5342,7 @@ function BaseSelectOption(_a) {
|
|
|
5342
5342
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5343
5343
|
}
|
|
5344
5344
|
|
|
5345
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5345
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5346
5346
|
function BaseSelect(_a) {
|
|
5347
5347
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5348
5348
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5352,7 +5352,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5352
5352
|
Options: BaseSelectOptions,
|
|
5353
5353
|
Option: BaseSelectOption,
|
|
5354
5354
|
});
|
|
5355
|
-
var templateObject_1$
|
|
5355
|
+
var templateObject_1$1V;
|
|
5356
5356
|
|
|
5357
5357
|
var CustomButton = newStyled.button(function (_a) {
|
|
5358
5358
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5391,7 +5391,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5391
5391
|
});
|
|
5392
5392
|
});
|
|
5393
5393
|
// TODO Remove this when we find the real solution
|
|
5394
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5394
|
+
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) {
|
|
5395
5395
|
var open = _a.open;
|
|
5396
5396
|
return open &&
|
|
5397
5397
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5411,7 +5411,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5411
5411
|
} }), void 0));
|
|
5412
5412
|
};
|
|
5413
5413
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5414
|
-
var templateObject_1$
|
|
5414
|
+
var templateObject_1$1U;
|
|
5415
5415
|
|
|
5416
5416
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5417
5417
|
var theme = _a.theme;
|
|
@@ -5578,7 +5578,7 @@ var CustomCheckboxStyles = {
|
|
|
5578
5578
|
},
|
|
5579
5579
|
};
|
|
5580
5580
|
|
|
5581
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5581
|
+
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"])));
|
|
5582
5582
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5583
5583
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5584
5584
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5589,7 +5589,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5589
5589
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5590
5590
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5591
5591
|
]; });
|
|
5592
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5592
|
+
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) {
|
|
5593
5593
|
var disabled = _a.disabled;
|
|
5594
5594
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5595
5595
|
});
|
|
@@ -5605,7 +5605,7 @@ var Checkbox = function (_a) {
|
|
|
5605
5605
|
};
|
|
5606
5606
|
return (jsxRuntime.jsxs(Container$1b, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5607
5607
|
};
|
|
5608
|
-
var templateObject_1$
|
|
5608
|
+
var templateObject_1$1T, templateObject_2$1k;
|
|
5609
5609
|
|
|
5610
5610
|
var CustomOption = newStyled.li(function (_a) {
|
|
5611
5611
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5654,9 +5654,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5654
5654
|
Option: BaseDropdownOption,
|
|
5655
5655
|
});
|
|
5656
5656
|
|
|
5657
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5658
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5659
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5657
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject([""], [""])));
|
|
5658
|
+
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"])));
|
|
5659
|
+
var SelectedOption = newStyled.span(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5660
5660
|
var fontWeight = _a.fontWeight;
|
|
5661
5661
|
return fontWeight || '';
|
|
5662
5662
|
});
|
|
@@ -5691,7 +5691,7 @@ function SimpleDropdown(_a) {
|
|
|
5691
5691
|
var DropdownContainer = showRequiredPlaceholder ? Container$1a : React$2.Fragment;
|
|
5692
5692
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(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) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5693
5693
|
}
|
|
5694
|
-
var templateObject_1$
|
|
5694
|
+
var templateObject_1$1S, templateObject_2$1j, templateObject_3$14;
|
|
5695
5695
|
|
|
5696
5696
|
/* base styles & size variants */
|
|
5697
5697
|
var CustomRadioStyles$2 = {
|
|
@@ -5756,9 +5756,9 @@ var ContainerStyles$2 = {
|
|
|
5756
5756
|
},
|
|
5757
5757
|
};
|
|
5758
5758
|
|
|
5759
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5759
|
+
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"])));
|
|
5760
5760
|
var Container$19 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5761
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5761
|
+
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) {
|
|
5762
5762
|
var disabled = _a.disabled;
|
|
5763
5763
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5764
5764
|
});
|
|
@@ -5766,14 +5766,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5766
5766
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5767
5767
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5768
5768
|
]; });
|
|
5769
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5769
|
+
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) {
|
|
5770
5770
|
var theme = _a.theme;
|
|
5771
5771
|
return theme.component.radio.textSize;
|
|
5772
5772
|
}, function (_a) {
|
|
5773
5773
|
var theme = _a.theme;
|
|
5774
5774
|
return theme.component.radio.lineHeight;
|
|
5775
5775
|
});
|
|
5776
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5776
|
+
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) {
|
|
5777
5777
|
var theme = _a.theme;
|
|
5778
5778
|
return theme.component.radio.textSize;
|
|
5779
5779
|
}, function (_a) {
|
|
@@ -5789,7 +5789,7 @@ var RadioInput = function (_a) {
|
|
|
5789
5789
|
};
|
|
5790
5790
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$19, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5791
5791
|
};
|
|
5792
|
-
var templateObject_1$
|
|
5792
|
+
var templateObject_1$1R, templateObject_2$1i, templateObject_3$13, templateObject_4$T;
|
|
5793
5793
|
|
|
5794
5794
|
var useOnClickOutside = function (ref, handler) {
|
|
5795
5795
|
React$2.useEffect(function () {
|
|
@@ -5882,7 +5882,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5882
5882
|
}
|
|
5883
5883
|
};
|
|
5884
5884
|
|
|
5885
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5885
|
+
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) {
|
|
5886
5886
|
var position = _a.position;
|
|
5887
5887
|
return getWrapperFlexDirection(position);
|
|
5888
5888
|
}, function (_a) {
|
|
@@ -5892,7 +5892,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __ma
|
|
|
5892
5892
|
var disableHover = _a.disableHover;
|
|
5893
5893
|
return (disableHover ? 0 : 1);
|
|
5894
5894
|
});
|
|
5895
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5895
|
+
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) {
|
|
5896
5896
|
var position = _a.position;
|
|
5897
5897
|
return getContainerFlexDirection(position);
|
|
5898
5898
|
}, function (_a) {
|
|
@@ -5920,14 +5920,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g
|
|
|
5920
5920
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5921
5921
|
return actual === expected ? margin : '0';
|
|
5922
5922
|
};
|
|
5923
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5923
|
+
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) {
|
|
5924
5924
|
var borderColor = _a.borderColor;
|
|
5925
5925
|
return borderColor;
|
|
5926
5926
|
}, function (_a) {
|
|
5927
5927
|
var backgroundColor = _a.backgroundColor;
|
|
5928
5928
|
return backgroundColor;
|
|
5929
5929
|
});
|
|
5930
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5930
|
+
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) {
|
|
5931
5931
|
var theme = _a.theme;
|
|
5932
5932
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5933
5933
|
}, function (_a) {
|
|
@@ -5937,17 +5937,17 @@ var TooltipText = newStyled.div(templateObject_4$R || (templateObject_4$R = __ma
|
|
|
5937
5937
|
var color = _a.color;
|
|
5938
5938
|
return color;
|
|
5939
5939
|
});
|
|
5940
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5941
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5940
|
+
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"])));
|
|
5941
|
+
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) {
|
|
5942
5942
|
var color = _a.color;
|
|
5943
5943
|
return color;
|
|
5944
5944
|
});
|
|
5945
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5945
|
+
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"])));
|
|
5946
5946
|
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) {
|
|
5947
5947
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5948
5948
|
return right;
|
|
5949
5949
|
});
|
|
5950
|
-
var templateObject_1$
|
|
5950
|
+
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;
|
|
5951
5951
|
|
|
5952
5952
|
var Tooltip = function (_a) {
|
|
5953
5953
|
var _b;
|
|
@@ -5990,8 +5990,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5990
5990
|
};
|
|
5991
5991
|
};
|
|
5992
5992
|
|
|
5993
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5994
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5993
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5994
|
+
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) {
|
|
5995
5995
|
var selected = _a.selected, theme = _a.theme;
|
|
5996
5996
|
return selected
|
|
5997
5997
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6005,20 +6005,20 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
6005
6005
|
var theme = _a.theme;
|
|
6006
6006
|
return theme.colors.pallete.primary.color;
|
|
6007
6007
|
});
|
|
6008
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$
|
|
6008
|
+
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) {
|
|
6009
6009
|
var onClick = _a.onClick;
|
|
6010
6010
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6011
6011
|
});
|
|
6012
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
6013
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
6012
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6013
|
+
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) {
|
|
6014
6014
|
var theme = _a.theme;
|
|
6015
6015
|
return theme.colors.shades[200].color;
|
|
6016
6016
|
}, function (_a) {
|
|
6017
6017
|
var theme = _a.theme;
|
|
6018
6018
|
return theme.colors.pallete.primary.color;
|
|
6019
6019
|
});
|
|
6020
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
6021
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
6020
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6021
|
+
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"])));
|
|
6022
6022
|
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"])));
|
|
6023
6023
|
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"])));
|
|
6024
6024
|
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"])));
|
|
@@ -6028,7 +6028,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6028
6028
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6029
6029
|
});
|
|
6030
6030
|
var Container$18 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6031
|
-
var templateObject_1$
|
|
6031
|
+
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;
|
|
6032
6032
|
|
|
6033
6033
|
var radioIds$2 = {
|
|
6034
6034
|
oneTime: {
|
|
@@ -6083,12 +6083,12 @@ var Autoship = function (_a) {
|
|
|
6083
6083
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6084
6084
|
};
|
|
6085
6085
|
|
|
6086
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6086
|
+
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) {
|
|
6087
6087
|
var theme = _a.theme;
|
|
6088
6088
|
return theme.name === 'TheSpaDr' &&
|
|
6089
6089
|
"\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 ";
|
|
6090
6090
|
});
|
|
6091
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6091
|
+
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) {
|
|
6092
6092
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6093
6093
|
return isSelected
|
|
6094
6094
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6104,7 +6104,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6104
6104
|
}
|
|
6105
6105
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6106
6106
|
};
|
|
6107
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6107
|
+
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) {
|
|
6108
6108
|
var selected = _a.selected, theme = _a.theme;
|
|
6109
6109
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6110
6110
|
}, function (_a) {
|
|
@@ -6116,19 +6116,19 @@ var ContainerBase$1 = newStyled.div(templateObject_3$$ || (templateObject_3$$ =
|
|
|
6116
6116
|
var theme = _a.theme;
|
|
6117
6117
|
return theme.colors.pallete.primary.color;
|
|
6118
6118
|
});
|
|
6119
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6119
|
+
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) {
|
|
6120
6120
|
var onClick = _a.onClick;
|
|
6121
6121
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6122
6122
|
});
|
|
6123
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6124
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6123
|
+
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"])));
|
|
6124
|
+
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) {
|
|
6125
6125
|
var theme = _a.theme;
|
|
6126
6126
|
return theme.colors.shades[200].color;
|
|
6127
6127
|
}, function (_a) {
|
|
6128
6128
|
var theme = _a.theme;
|
|
6129
6129
|
return theme.colors.pallete.primary.color;
|
|
6130
6130
|
});
|
|
6131
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6131
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6132
6132
|
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"])));
|
|
6133
6133
|
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"])));
|
|
6134
6134
|
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"])));
|
|
@@ -6141,7 +6141,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$3 || (templateObject_13$3 =
|
|
|
6141
6141
|
var theme = _a.theme;
|
|
6142
6142
|
return theme.component.autoship.tooltip.margin;
|
|
6143
6143
|
});
|
|
6144
|
-
var templateObject_1$
|
|
6144
|
+
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;
|
|
6145
6145
|
|
|
6146
6146
|
var radioIds$1 = {
|
|
6147
6147
|
oneTime: {
|
|
@@ -6219,13 +6219,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6219
6219
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6220
6220
|
_a$2);
|
|
6221
6221
|
|
|
6222
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6223
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6224
|
-
var Name = newStyled.h4(templateObject_3
|
|
6225
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6226
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6227
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6228
|
-
var templateObject_1$
|
|
6222
|
+
var CustomerDetails = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""])));
|
|
6223
|
+
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"])));
|
|
6224
|
+
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"])));
|
|
6225
|
+
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"])));
|
|
6226
|
+
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"])));
|
|
6227
|
+
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"])));
|
|
6228
|
+
var templateObject_1$1N, templateObject_2$1e, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x;
|
|
6229
6229
|
|
|
6230
6230
|
var NameWithStars = function (_a) {
|
|
6231
6231
|
var name = _a.name, size = _a.size;
|
|
@@ -6243,10 +6243,10 @@ var ResultFeedback = function (_a) {
|
|
|
6243
6243
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6244
6244
|
};
|
|
6245
6245
|
|
|
6246
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
6247
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6248
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6249
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6246
|
+
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; });
|
|
6247
|
+
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"])));
|
|
6248
|
+
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; });
|
|
6249
|
+
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) {
|
|
6250
6250
|
var theme = _a.theme;
|
|
6251
6251
|
return theme.colors.pallete.secondary.color;
|
|
6252
6252
|
}, function (_a) {
|
|
@@ -6256,7 +6256,7 @@ var UserInfoText = newStyled.div(templateObject_4$N || (templateObject_4$N = __m
|
|
|
6256
6256
|
var theme = _a.theme, size = _a.size;
|
|
6257
6257
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6258
6258
|
});
|
|
6259
|
-
var templateObject_1$
|
|
6259
|
+
var templateObject_1$1M, templateObject_2$1d, templateObject_3$_, templateObject_4$O;
|
|
6260
6260
|
|
|
6261
6261
|
/* base styles & size variants */
|
|
6262
6262
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6334,7 +6334,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6334
6334
|
return (jsxRuntime.jsxs(Container$16, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6335
6335
|
};
|
|
6336
6336
|
|
|
6337
|
-
var Section = newStyled.div(templateObject_1$
|
|
6337
|
+
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) {
|
|
6338
6338
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6339
6339
|
});
|
|
6340
6340
|
var CardHeader = function (_a) {
|
|
@@ -6345,16 +6345,16 @@ var CardFooter = function (_a) {
|
|
|
6345
6345
|
var children = _a.children;
|
|
6346
6346
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6347
6347
|
};
|
|
6348
|
-
var templateObject_1$
|
|
6348
|
+
var templateObject_1$1L;
|
|
6349
6349
|
|
|
6350
|
-
var Body = newStyled.div(templateObject_1$
|
|
6350
|
+
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"])));
|
|
6351
6351
|
var CardBody$1 = function (_a) {
|
|
6352
6352
|
var children = _a.children;
|
|
6353
6353
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6354
6354
|
};
|
|
6355
|
-
var templateObject_1$
|
|
6355
|
+
var templateObject_1$1K;
|
|
6356
6356
|
|
|
6357
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6357
|
+
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) {
|
|
6358
6358
|
var flex = _a.flex;
|
|
6359
6359
|
return flex &&
|
|
6360
6360
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6376,16 +6376,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6376
6376
|
Footer: CardFooter,
|
|
6377
6377
|
Body: CardBody$1,
|
|
6378
6378
|
});
|
|
6379
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1J;
|
|
6380
6380
|
|
|
6381
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6382
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6383
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6381
|
+
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"])));
|
|
6382
|
+
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"])));
|
|
6383
|
+
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) {
|
|
6384
6384
|
var color = _a.color;
|
|
6385
6385
|
return color;
|
|
6386
6386
|
});
|
|
6387
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6388
|
-
var templateObject_1$
|
|
6387
|
+
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"])));
|
|
6388
|
+
var templateObject_1$1I, templateObject_2$1c, templateObject_3$Z, templateObject_4$N;
|
|
6389
6389
|
|
|
6390
6390
|
var Minimalistic = function (_a) {
|
|
6391
6391
|
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;
|
|
@@ -6393,28 +6393,28 @@ var Minimalistic = function (_a) {
|
|
|
6393
6393
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6394
6394
|
};
|
|
6395
6395
|
|
|
6396
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6397
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6398
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6399
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6396
|
+
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"])));
|
|
6397
|
+
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; });
|
|
6398
|
+
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; });
|
|
6399
|
+
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"])));
|
|
6400
6400
|
var Simple = function (_a) {
|
|
6401
6401
|
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;
|
|
6402
6402
|
var theme = useTheme();
|
|
6403
6403
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6404
6404
|
};
|
|
6405
|
-
var templateObject_1$
|
|
6405
|
+
var templateObject_1$1H, templateObject_2$1b, templateObject_3$Y, templateObject_4$M;
|
|
6406
6406
|
|
|
6407
6407
|
var Bundle = {
|
|
6408
6408
|
Minimalistic: Minimalistic,
|
|
6409
6409
|
Simple: Simple,
|
|
6410
6410
|
};
|
|
6411
6411
|
|
|
6412
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6412
|
+
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) {
|
|
6413
6413
|
var displayBNPL = _a.displayBNPL;
|
|
6414
6414
|
return (displayBNPL ? 'flex' : 'none');
|
|
6415
6415
|
});
|
|
6416
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6417
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6416
|
+
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"])));
|
|
6417
|
+
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"])));
|
|
6418
6418
|
var BuyNowPayLater = function (_a) {
|
|
6419
6419
|
var _b;
|
|
6420
6420
|
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;
|
|
@@ -6426,41 +6426,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6426
6426
|
}
|
|
6427
6427
|
return (jsxRuntime.jsx(Container$13, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6428
6428
|
};
|
|
6429
|
-
var templateObject_1$
|
|
6429
|
+
var templateObject_1$1G, templateObject_2$1a, templateObject_3$X;
|
|
6430
6430
|
|
|
6431
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6431
|
+
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; });
|
|
6432
6432
|
var Title$8 = function (_a) {
|
|
6433
6433
|
var title = _a.title;
|
|
6434
6434
|
var theme = useTheme();
|
|
6435
6435
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6436
6436
|
};
|
|
6437
|
-
var templateObject_1$
|
|
6437
|
+
var templateObject_1$1F;
|
|
6438
6438
|
|
|
6439
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6439
|
+
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; });
|
|
6440
6440
|
var Promo = function (_a) {
|
|
6441
6441
|
var text = _a.text;
|
|
6442
6442
|
var theme = useTheme();
|
|
6443
6443
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6444
6444
|
};
|
|
6445
|
-
var templateObject_1$
|
|
6445
|
+
var templateObject_1$1E;
|
|
6446
6446
|
|
|
6447
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6447
|
+
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; });
|
|
6448
6448
|
var Description$1 = function (_a) {
|
|
6449
6449
|
var text = _a.text;
|
|
6450
6450
|
var theme = useTheme();
|
|
6451
6451
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6452
6452
|
};
|
|
6453
|
-
var templateObject_1$
|
|
6453
|
+
var templateObject_1$1D;
|
|
6454
6454
|
|
|
6455
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6455
|
+
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"); });
|
|
6456
6456
|
var CloseButton$1 = function (_a) {
|
|
6457
6457
|
var onClick = _a.onClick, size = _a.size;
|
|
6458
6458
|
var theme = useTheme();
|
|
6459
6459
|
return (jsxRuntime.jsx(Container$12, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6460
6460
|
};
|
|
6461
|
-
var templateObject_1$
|
|
6461
|
+
var templateObject_1$1C;
|
|
6462
6462
|
|
|
6463
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6463
|
+
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) {
|
|
6464
6464
|
var backgroundColor = _a.backgroundColor;
|
|
6465
6465
|
return backgroundColor;
|
|
6466
6466
|
}, function (_a) {
|
|
@@ -6475,7 +6475,7 @@ var OfferBanner = function (_a) {
|
|
|
6475
6475
|
var theme = useTheme();
|
|
6476
6476
|
return (jsxRuntime.jsx(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));
|
|
6477
6477
|
};
|
|
6478
|
-
var templateObject_1$
|
|
6478
|
+
var templateObject_1$1B;
|
|
6479
6479
|
|
|
6480
6480
|
var CartProductItem = {
|
|
6481
6481
|
Title: Title$8,
|
|
@@ -6485,20 +6485,20 @@ var CartProductItem = {
|
|
|
6485
6485
|
CloseButton: CloseButton$1,
|
|
6486
6486
|
};
|
|
6487
6487
|
|
|
6488
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6489
|
-
var MobileContainer = newStyled(Container$11)(templateObject_2$
|
|
6490
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6491
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6492
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6493
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6494
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6488
|
+
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"])));
|
|
6489
|
+
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"])));
|
|
6490
|
+
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"])));
|
|
6491
|
+
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"])));
|
|
6492
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6493
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6494
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6495
6495
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6496
6496
|
var ClubPriceLabel = function (_a) {
|
|
6497
6497
|
var clubPrice = _a.clubPrice;
|
|
6498
6498
|
var isMobile = useWindowDimensions().isMobile;
|
|
6499
6499
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$11, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6500
6500
|
};
|
|
6501
|
-
var templateObject_1$
|
|
6501
|
+
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;
|
|
6502
6502
|
|
|
6503
6503
|
var Spacing = function (_a) {
|
|
6504
6504
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6506,10 +6506,10 @@ var Spacing = function (_a) {
|
|
|
6506
6506
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6507
6507
|
};
|
|
6508
6508
|
|
|
6509
|
-
var Container$10 = newStyled('div')(templateObject_1$
|
|
6510
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6511
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6512
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6509
|
+
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"])));
|
|
6510
|
+
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"])));
|
|
6511
|
+
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"])));
|
|
6512
|
+
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) {
|
|
6513
6513
|
var index = _a.index;
|
|
6514
6514
|
return "".concat(6 + 3 * index, "px");
|
|
6515
6515
|
}, function (_a) {
|
|
@@ -6520,13 +6520,13 @@ var StrengthBars = function (_a) {
|
|
|
6520
6520
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6521
6521
|
return (jsxRuntime.jsxs(Container$10, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6522
6522
|
};
|
|
6523
|
-
var templateObject_1$
|
|
6523
|
+
var templateObject_1$1z, templateObject_2$18, templateObject_3$V, templateObject_4$K;
|
|
6524
6524
|
|
|
6525
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6526
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6527
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6528
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6529
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6525
|
+
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"])));
|
|
6526
|
+
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"])));
|
|
6527
|
+
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"])));
|
|
6528
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6529
|
+
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"])));
|
|
6530
6530
|
var RegularPriceTag = function () {
|
|
6531
6531
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6532
6532
|
};
|
|
@@ -6579,12 +6579,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6579
6579
|
? finalPriceArray[0]
|
|
6580
6580
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6581
6581
|
};
|
|
6582
|
-
var templateObject_1$
|
|
6582
|
+
var templateObject_1$1y, templateObject_2$17, templateObject_3$U, templateObject_4$J, templateObject_5$z;
|
|
6583
6583
|
|
|
6584
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
6585
|
-
var templateObject_1$
|
|
6584
|
+
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"])));
|
|
6585
|
+
var templateObject_1$1x;
|
|
6586
6586
|
|
|
6587
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6587
|
+
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) {
|
|
6588
6588
|
var marginRight = _a.marginRight;
|
|
6589
6589
|
return marginRight;
|
|
6590
6590
|
});
|
|
@@ -6600,7 +6600,7 @@ var StarList = function (_a) {
|
|
|
6600
6600
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6601
6601
|
}) }, void 0));
|
|
6602
6602
|
};
|
|
6603
|
-
var templateObject_1$
|
|
6603
|
+
var templateObject_1$1w;
|
|
6604
6604
|
|
|
6605
6605
|
/* base styles & size variants */
|
|
6606
6606
|
var LabelStyles = {
|
|
@@ -6641,8 +6641,8 @@ var LabelStyles = {
|
|
|
6641
6641
|
});
|
|
6642
6642
|
},
|
|
6643
6643
|
};
|
|
6644
|
-
var Container$_ = newStyled.a(templateObject_1$
|
|
6645
|
-
var templateObject_1$
|
|
6644
|
+
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"])));
|
|
6645
|
+
var templateObject_1$1v;
|
|
6646
6646
|
|
|
6647
6647
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6648
6648
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6662,7 +6662,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6662
6662
|
}),
|
|
6663
6663
|
];
|
|
6664
6664
|
});
|
|
6665
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6665
|
+
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; });
|
|
6666
6666
|
var starsNumber = 5;
|
|
6667
6667
|
var Rating = function (_a) {
|
|
6668
6668
|
var _b = _a.size, size = _b === void 0 ? exports.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;
|
|
@@ -6685,7 +6685,7 @@ var Rating = function (_a) {
|
|
|
6685
6685
|
: {};
|
|
6686
6686
|
return (jsxRuntime.jsxs(Container$_, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6687
6687
|
};
|
|
6688
|
-
var templateObject_1$
|
|
6688
|
+
var templateObject_1$1u;
|
|
6689
6689
|
|
|
6690
6690
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6691
6691
|
var width = _a.width, height = _a.height;
|
|
@@ -6695,10 +6695,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6695
6695
|
height: height,
|
|
6696
6696
|
});
|
|
6697
6697
|
});
|
|
6698
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6699
|
-
var Container$Z = newStyled.a(templateObject_2$
|
|
6700
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6701
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6698
|
+
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"])));
|
|
6699
|
+
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"])));
|
|
6700
|
+
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"])));
|
|
6701
|
+
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; });
|
|
6702
6702
|
var getStylesBySize$c = function (size) {
|
|
6703
6703
|
switch (size) {
|
|
6704
6704
|
case exports.ComponentSize.Medium:
|
|
@@ -6724,17 +6724,17 @@ var getStylesBySize$c = function (size) {
|
|
|
6724
6724
|
};
|
|
6725
6725
|
}
|
|
6726
6726
|
};
|
|
6727
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6727
|
+
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) {
|
|
6728
6728
|
var style = _a.style;
|
|
6729
6729
|
return style.width;
|
|
6730
6730
|
});
|
|
6731
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6731
|
+
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) {
|
|
6732
6732
|
var style = _a.style;
|
|
6733
6733
|
return style.width;
|
|
6734
6734
|
});
|
|
6735
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6735
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6736
6736
|
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"])));
|
|
6737
|
-
var templateObject_1$
|
|
6737
|
+
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;
|
|
6738
6738
|
|
|
6739
6739
|
var ProductItemMobile = function (_a) {
|
|
6740
6740
|
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 ? {
|
|
@@ -6809,10 +6809,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6809
6809
|
height: height,
|
|
6810
6810
|
});
|
|
6811
6811
|
});
|
|
6812
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6813
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6814
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6815
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6812
|
+
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; });
|
|
6813
|
+
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"])));
|
|
6814
|
+
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"])));
|
|
6815
|
+
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; });
|
|
6816
6816
|
var getStylesBySize$b = function (size) {
|
|
6817
6817
|
switch (size) {
|
|
6818
6818
|
case exports.ComponentSize.Medium:
|
|
@@ -6838,12 +6838,12 @@ var getStylesBySize$b = function (size) {
|
|
|
6838
6838
|
};
|
|
6839
6839
|
}
|
|
6840
6840
|
};
|
|
6841
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6841
|
+
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) {
|
|
6842
6842
|
var style = _a.style;
|
|
6843
6843
|
return style.width;
|
|
6844
6844
|
});
|
|
6845
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6846
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6845
|
+
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"])));
|
|
6846
|
+
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) {
|
|
6847
6847
|
var style = _a.style;
|
|
6848
6848
|
return style.width;
|
|
6849
6849
|
});
|
|
@@ -6898,9 +6898,9 @@ var ProductItemTK = function (_a) {
|
|
|
6898
6898
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6899
6899
|
} }, { 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));
|
|
6900
6900
|
};
|
|
6901
|
-
var templateObject_1$
|
|
6901
|
+
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;
|
|
6902
6902
|
|
|
6903
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
6903
|
+
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"])));
|
|
6904
6904
|
function withProductGrid(ProductItemComponent, data) {
|
|
6905
6905
|
function WithProductGrid(props) {
|
|
6906
6906
|
return (jsxRuntime.jsx(Container$X, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6910,7 +6910,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6910
6910
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6911
6911
|
return WithProductGrid;
|
|
6912
6912
|
}
|
|
6913
|
-
var templateObject_1$
|
|
6913
|
+
var templateObject_1$1r;
|
|
6914
6914
|
|
|
6915
6915
|
var Collection = {
|
|
6916
6916
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6957,11 +6957,11 @@ var OutOfStock = function (_a) {
|
|
|
6957
6957
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6958
6958
|
};
|
|
6959
6959
|
|
|
6960
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6961
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6962
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6963
|
-
var Span = newStyled.span(templateObject_4$
|
|
6964
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6960
|
+
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"])));
|
|
6961
|
+
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6962
|
+
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"])));
|
|
6963
|
+
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6964
|
+
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"])));
|
|
6965
6965
|
var Label$5 = function (_a) {
|
|
6966
6966
|
var label = _a.label, values = _a.values;
|
|
6967
6967
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6979,23 +6979,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6979
6979
|
Option: Option,
|
|
6980
6980
|
OptionsContainer: OptionsContainer,
|
|
6981
6981
|
});
|
|
6982
|
-
var templateObject_1$
|
|
6982
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
6983
6983
|
|
|
6984
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6984
|
+
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) {
|
|
6985
6985
|
var borderColor = _a.borderColor;
|
|
6986
6986
|
return borderColor;
|
|
6987
6987
|
}, function (_a) {
|
|
6988
6988
|
var noStock = _a.noStock;
|
|
6989
6989
|
return (noStock ? '0.4' : '1');
|
|
6990
6990
|
});
|
|
6991
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6991
|
+
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"])));
|
|
6992
6992
|
var PatternSelector = function (_a) {
|
|
6993
6993
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6994
6994
|
var theme = useTheme();
|
|
6995
6995
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6996
6996
|
return (jsxRuntime.jsx(Container$W, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6997
6997
|
};
|
|
6998
|
-
var templateObject_1$
|
|
6998
|
+
var templateObject_1$1p, templateObject_2$13;
|
|
6999
6999
|
|
|
7000
7000
|
var renderOptions$1 = function (selectedColor, options) {
|
|
7001
7001
|
if (options == null || options.length === 0) {
|
|
@@ -7058,26 +7058,26 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7058
7058
|
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;
|
|
7059
7059
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7060
7060
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7061
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7061
|
+
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 "])));
|
|
7062
7062
|
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));
|
|
7063
7063
|
};
|
|
7064
|
-
var templateObject_1$
|
|
7064
|
+
var templateObject_1$1o;
|
|
7065
7065
|
|
|
7066
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7067
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7068
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7066
|
+
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'); });
|
|
7067
|
+
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"])));
|
|
7068
|
+
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) {
|
|
7069
7069
|
return props.rightToLeft &&
|
|
7070
7070
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7071
7071
|
});
|
|
7072
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7073
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7074
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7072
|
+
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; });
|
|
7073
|
+
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; });
|
|
7074
|
+
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; });
|
|
7075
7075
|
var CrossSellCheckbox = function (_a) {
|
|
7076
7076
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7077
7077
|
var theme = useTheme();
|
|
7078
7078
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7079
7079
|
};
|
|
7080
|
-
var templateObject_1$
|
|
7080
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$Q, templateObject_4$F, templateObject_5$v, templateObject_6$t;
|
|
7081
7081
|
|
|
7082
7082
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7083
7083
|
__proto__: null,
|
|
@@ -7105,7 +7105,7 @@ var sizeMapper = (_a = {},
|
|
|
7105
7105
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7106
7106
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7107
7107
|
_a);
|
|
7108
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7108
|
+
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) {
|
|
7109
7109
|
var wide = _a.wide;
|
|
7110
7110
|
return (wide ? '100%' : 'fit-content');
|
|
7111
7111
|
}, function (_a) {
|
|
@@ -7127,11 +7127,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObj
|
|
|
7127
7127
|
var theme = _a.theme;
|
|
7128
7128
|
return theme.colors.text.disabled;
|
|
7129
7129
|
});
|
|
7130
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7130
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7131
7131
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7132
7132
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7133
7133
|
});
|
|
7134
|
-
var templateObject_1$
|
|
7134
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
7135
7135
|
|
|
7136
7136
|
var BaseCTA = function (_a) {
|
|
7137
7137
|
var _b, _c, _d;
|
|
@@ -7218,44 +7218,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7218
7218
|
} }), void 0));
|
|
7219
7219
|
};
|
|
7220
7220
|
|
|
7221
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
7222
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7223
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7224
|
-
var Details = newStyled.span(templateObject_4$
|
|
7221
|
+
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; });
|
|
7222
|
+
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"])));
|
|
7223
|
+
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; });
|
|
7224
|
+
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; });
|
|
7225
7225
|
var Note = function (_a) {
|
|
7226
7226
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7227
7227
|
var theme = useTheme();
|
|
7228
7228
|
return (jsxRuntime.jsxs(Container$V, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7229
7229
|
};
|
|
7230
|
-
var templateObject_1$
|
|
7230
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$E;
|
|
7231
7231
|
|
|
7232
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7232
|
+
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) {
|
|
7233
7233
|
var theme = _a.theme;
|
|
7234
7234
|
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 ");
|
|
7235
7235
|
});
|
|
7236
|
-
var Line = newStyled.div(templateObject_2
|
|
7237
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7236
|
+
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; });
|
|
7237
|
+
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({
|
|
7238
7238
|
flexDirection: ['column', 'row'],
|
|
7239
7239
|
}));
|
|
7240
|
-
var Col = newStyled.div(templateObject_4$
|
|
7240
|
+
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({
|
|
7241
7241
|
margin: ['0', '0 1.25rem'],
|
|
7242
7242
|
marginBottom: ['1.875rem', '0'],
|
|
7243
7243
|
alignItems: ['center', 'flex-start'],
|
|
7244
7244
|
textAlign: ['center', 'inherit'],
|
|
7245
7245
|
width: ['100%', 'inherit'],
|
|
7246
7246
|
}));
|
|
7247
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7247
|
+
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({
|
|
7248
7248
|
marginRight: ['0', '0.438rem'],
|
|
7249
7249
|
marginBottom: ['10px', '0'],
|
|
7250
7250
|
width: ['auto', '1.5rem'],
|
|
7251
7251
|
}));
|
|
7252
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7252
|
+
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({
|
|
7253
7253
|
display: ['block', 'flex'],
|
|
7254
7254
|
}), function (_a) {
|
|
7255
7255
|
var theme = _a.theme;
|
|
7256
7256
|
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 ");
|
|
7257
7257
|
});
|
|
7258
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7258
|
+
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) {
|
|
7259
7259
|
var theme = _a.theme;
|
|
7260
7260
|
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 ");
|
|
7261
7261
|
}, function (_a) {
|
|
@@ -7272,16 +7272,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7272
7272
|
var theme = useTheme();
|
|
7273
7273
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7274
7274
|
};
|
|
7275
|
-
var templateObject_1$
|
|
7275
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$D, templateObject_5$u, templateObject_6$s, templateObject_7$l, templateObject_8$f;
|
|
7276
7276
|
|
|
7277
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7277
|
+
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) {
|
|
7278
7278
|
var top = _a.top;
|
|
7279
7279
|
return top;
|
|
7280
7280
|
}, function (_a) {
|
|
7281
7281
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7282
7282
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7283
7283
|
});
|
|
7284
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7284
|
+
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) {
|
|
7285
7285
|
var height = _a.height;
|
|
7286
7286
|
return height;
|
|
7287
7287
|
}, function (_a) {
|
|
@@ -7328,20 +7328,20 @@ var Drawer = function (_a) {
|
|
|
7328
7328
|
}, [isOpen, onClose, onOpen]);
|
|
7329
7329
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(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;
|
|
7330
7330
|
};
|
|
7331
|
-
var templateObject_1$
|
|
7331
|
+
var templateObject_1$1j, templateObject_2$_;
|
|
7332
7332
|
|
|
7333
7333
|
var TooltipArrow = function (_a) {
|
|
7334
7334
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7335
7335
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("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));
|
|
7336
7336
|
};
|
|
7337
7337
|
|
|
7338
|
-
var List = newStyled.ul(templateObject_1$
|
|
7339
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7340
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7341
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7342
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7343
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7344
|
-
var templateObject_1$
|
|
7338
|
+
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"])));
|
|
7339
|
+
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"])));
|
|
7340
|
+
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"])));
|
|
7341
|
+
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"])));
|
|
7342
|
+
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; });
|
|
7343
|
+
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; });
|
|
7344
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$N, templateObject_4$C, templateObject_5$t, templateObject_6$r;
|
|
7345
7345
|
|
|
7346
7346
|
var DropdownListIcons = function (_a) {
|
|
7347
7347
|
var items = _a.items;
|
|
@@ -7354,13 +7354,13 @@ var Dropdown = function (_a) {
|
|
|
7354
7354
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(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));
|
|
7355
7355
|
};
|
|
7356
7356
|
|
|
7357
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7358
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7359
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7360
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7361
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7362
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7363
|
-
var templateObject_1$
|
|
7357
|
+
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"])));
|
|
7358
|
+
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"])));
|
|
7359
|
+
var SizeLabel = newStyled.span(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7360
|
+
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"])));
|
|
7361
|
+
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"])));
|
|
7362
|
+
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"])));
|
|
7363
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q;
|
|
7364
7364
|
|
|
7365
7365
|
var SizeDropdown = function (_a) {
|
|
7366
7366
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7383,10 +7383,10 @@ var SizeDropdown = function (_a) {
|
|
|
7383
7383
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(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: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7384
7384
|
};
|
|
7385
7385
|
|
|
7386
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7387
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7388
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7389
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7386
|
+
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; });
|
|
7387
|
+
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; });
|
|
7388
|
+
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"])));
|
|
7389
|
+
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"])));
|
|
7390
7390
|
var DropdownDialog = function (_a) {
|
|
7391
7391
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7392
7392
|
var theme = useTheme$1();
|
|
@@ -7395,7 +7395,7 @@ var DropdownDialog = function (_a) {
|
|
|
7395
7395
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7396
7396
|
}) }), void 0) }), void 0));
|
|
7397
7397
|
};
|
|
7398
|
-
var templateObject_1$
|
|
7398
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A;
|
|
7399
7399
|
|
|
7400
7400
|
function FilteringDropdown(_a) {
|
|
7401
7401
|
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;
|
|
@@ -7428,29 +7428,29 @@ function FilteringDropdown(_a) {
|
|
|
7428
7428
|
}) }, void 0)] }), void 0));
|
|
7429
7429
|
}
|
|
7430
7430
|
|
|
7431
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7432
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7433
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7434
|
-
var Container$U = newStyled.div(templateObject_4$
|
|
7431
|
+
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; });
|
|
7432
|
+
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; });
|
|
7433
|
+
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"])));
|
|
7434
|
+
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'); });
|
|
7435
7435
|
var Accordion = function (_a) {
|
|
7436
7436
|
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;
|
|
7437
7437
|
var theme = useTheme();
|
|
7438
7438
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7439
7439
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7440
7440
|
};
|
|
7441
|
-
var templateObject_1$
|
|
7442
|
-
|
|
7443
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7444
|
-
var Header$2 = newStyled.div(templateObject_2$
|
|
7445
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7446
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7447
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7448
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7449
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7441
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z;
|
|
7442
|
+
|
|
7443
|
+
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; });
|
|
7444
|
+
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"])));
|
|
7445
|
+
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"])));
|
|
7446
|
+
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"])));
|
|
7447
|
+
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; });
|
|
7448
|
+
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; });
|
|
7449
|
+
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'); });
|
|
7450
7450
|
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; });
|
|
7451
7451
|
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"])));
|
|
7452
7452
|
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"])));
|
|
7453
|
-
var templateObject_1$
|
|
7453
|
+
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;
|
|
7454
7454
|
|
|
7455
7455
|
var getStylesBySize$a = function (size, theme) {
|
|
7456
7456
|
switch (size) {
|
|
@@ -7515,9 +7515,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7515
7515
|
} }), id: id }, void 0));
|
|
7516
7516
|
};
|
|
7517
7517
|
|
|
7518
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7519
|
-
var LI = newStyled.li(templateObject_2$
|
|
7520
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7518
|
+
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"])));
|
|
7519
|
+
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; });
|
|
7520
|
+
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"])));
|
|
7521
7521
|
var Tags = function (_a) {
|
|
7522
7522
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7523
7523
|
var theme = useTheme();
|
|
@@ -7525,7 +7525,7 @@ var Tags = function (_a) {
|
|
|
7525
7525
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7526
7526
|
}) }), void 0));
|
|
7527
7527
|
};
|
|
7528
|
-
var templateObject_1$
|
|
7528
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I;
|
|
7529
7529
|
|
|
7530
7530
|
var Filters = function (_a) {
|
|
7531
7531
|
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;
|
|
@@ -7661,8 +7661,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7661
7661
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7662
7662
|
};
|
|
7663
7663
|
|
|
7664
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7665
|
-
var Container$T = newStyled.div(templateObject_2$
|
|
7664
|
+
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"])));
|
|
7665
|
+
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"])));
|
|
7666
7666
|
var FitGuarantee = function (_a) {
|
|
7667
7667
|
var _b;
|
|
7668
7668
|
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;
|
|
@@ -7680,10 +7680,10 @@ var FitGuarantee = function (_a) {
|
|
|
7680
7680
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7681
7681
|
} }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
7682
7682
|
};
|
|
7683
|
-
var templateObject_1$
|
|
7683
|
+
var templateObject_1$1c, templateObject_2$T;
|
|
7684
7684
|
|
|
7685
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
7686
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7685
|
+
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"])));
|
|
7686
|
+
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; });
|
|
7687
7687
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7688
7688
|
border: 'none',
|
|
7689
7689
|
background: 'transparent',
|
|
@@ -7698,7 +7698,7 @@ var FitPredictor = function (_a) {
|
|
|
7698
7698
|
var theme = useTheme();
|
|
7699
7699
|
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));
|
|
7700
7700
|
};
|
|
7701
|
-
var templateObject_1$
|
|
7701
|
+
var templateObject_1$1b, templateObject_2$S;
|
|
7702
7702
|
|
|
7703
7703
|
var Button$7 = newStyled.button(function () { return ({
|
|
7704
7704
|
background: 'transparent',
|
|
@@ -11942,14 +11942,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11942
11942
|
return Slider;
|
|
11943
11943
|
}(React__default["default"].Component);
|
|
11944
11944
|
|
|
11945
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11945
|
+
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) {
|
|
11946
11946
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11947
11947
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11948
11948
|
}, function (_a) {
|
|
11949
11949
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11950
11950
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11951
11951
|
});
|
|
11952
|
-
var templateObject_1$
|
|
11952
|
+
var templateObject_1$1a;
|
|
11953
11953
|
|
|
11954
11954
|
var getStylesBySize$9 = function (size) {
|
|
11955
11955
|
// rem units
|
|
@@ -12008,7 +12008,7 @@ var SliderNavigation = function (_a) {
|
|
|
12008
12008
|
} }, { 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));
|
|
12009
12009
|
};
|
|
12010
12010
|
|
|
12011
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12011
|
+
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) {
|
|
12012
12012
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12013
12013
|
return borderRadiusVariant &&
|
|
12014
12014
|
"\n border-radius: 20px;\n ";
|
|
@@ -12026,7 +12026,7 @@ var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __make
|
|
|
12026
12026
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12027
12027
|
: 'inherit';
|
|
12028
12028
|
});
|
|
12029
|
-
var templateObject_1$
|
|
12029
|
+
var templateObject_1$19;
|
|
12030
12030
|
|
|
12031
12031
|
var ImageSmallPreview = function (_a) {
|
|
12032
12032
|
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;
|
|
@@ -12034,9 +12034,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12034
12034
|
return (jsxRuntime.jsx(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));
|
|
12035
12035
|
};
|
|
12036
12036
|
|
|
12037
|
-
var horizontalStyles = css(templateObject_1$
|
|
12038
|
-
var verticalStyles = css(templateObject_2$
|
|
12039
|
-
var Container$R = newStyled.div(templateObject_3$
|
|
12037
|
+
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"])));
|
|
12038
|
+
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"])));
|
|
12039
|
+
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) {
|
|
12040
12040
|
var position = _a.position;
|
|
12041
12041
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12042
12042
|
}, function (_a) {
|
|
@@ -12044,12 +12044,12 @@ var Container$R = newStyled.div(templateObject_3$G || (templateObject_3$G = __ma
|
|
|
12044
12044
|
return hasOverflowArrows &&
|
|
12045
12045
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12046
12046
|
});
|
|
12047
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
12048
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12049
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12050
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12047
|
+
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"])));
|
|
12048
|
+
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"])));
|
|
12049
|
+
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"])));
|
|
12050
|
+
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"])));
|
|
12051
12051
|
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"])));
|
|
12052
|
-
var templateObject_1$
|
|
12052
|
+
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;
|
|
12053
12053
|
|
|
12054
12054
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12055
12055
|
var loading = 'eager';
|
|
@@ -12086,22 +12086,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12086
12086
|
})) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12087
12087
|
};
|
|
12088
12088
|
|
|
12089
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12090
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12091
|
-
var templateObject_1$
|
|
12089
|
+
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); });
|
|
12090
|
+
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; });
|
|
12091
|
+
var templateObject_1$17, templateObject_2$Q;
|
|
12092
12092
|
|
|
12093
12093
|
var ProgressBar$1 = function (_a) {
|
|
12094
12094
|
var progress = _a.progress, hide = _a.hide;
|
|
12095
12095
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12096
12096
|
};
|
|
12097
12097
|
|
|
12098
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
12099
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12100
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12101
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12102
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12103
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12104
|
-
var templateObject_1$
|
|
12098
|
+
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"])));
|
|
12099
|
+
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; });
|
|
12100
|
+
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"])));
|
|
12101
|
+
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"])));
|
|
12102
|
+
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"])));
|
|
12103
|
+
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"])));
|
|
12104
|
+
var templateObject_1$16, templateObject_2$P, templateObject_3$G, templateObject_4$w, templateObject_5$p, templateObject_6$n;
|
|
12105
12105
|
|
|
12106
12106
|
var Video$1 = function (_a) {
|
|
12107
12107
|
var _b, _c, _d, _e;
|
|
@@ -13741,32 +13741,32 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13741
13741
|
afterZoomOut: PropTypes.func
|
|
13742
13742
|
} : {};
|
|
13743
13743
|
|
|
13744
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13744
|
+
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) {
|
|
13745
13745
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13746
13746
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13747
13747
|
});
|
|
13748
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13748
|
+
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) {
|
|
13749
13749
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13750
13750
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13751
13751
|
}, function (_a) {
|
|
13752
13752
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13753
13753
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13754
13754
|
});
|
|
13755
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13755
|
+
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) {
|
|
13756
13756
|
var isCTAHidden = _a.isCTAHidden;
|
|
13757
13757
|
return (isCTAHidden ? '60px' : '120px');
|
|
13758
13758
|
});
|
|
13759
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13760
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13761
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13759
|
+
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"])));
|
|
13760
|
+
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"])));
|
|
13761
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13762
13762
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13763
13763
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13764
13764
|
});
|
|
13765
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13765
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13766
13766
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13767
13767
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13768
13768
|
});
|
|
13769
|
-
var templateObject_1$
|
|
13769
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$i;
|
|
13770
13770
|
|
|
13771
13771
|
var ImageProductSlide$1 = function (_a) {
|
|
13772
13772
|
var _b;
|
|
@@ -13781,8 +13781,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13781
13781
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13782
13782
|
};
|
|
13783
13783
|
|
|
13784
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13785
|
-
var templateObject_1$
|
|
13784
|
+
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"])));
|
|
13785
|
+
var templateObject_1$14;
|
|
13786
13786
|
|
|
13787
13787
|
var getInitialIndex = function (images, selectedValue) {
|
|
13788
13788
|
if (selectedValue) {
|
|
@@ -13830,7 +13830,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13830
13830
|
};
|
|
13831
13831
|
}
|
|
13832
13832
|
};
|
|
13833
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13833
|
+
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) {
|
|
13834
13834
|
var backgroundColor = _a.backgroundColor;
|
|
13835
13835
|
return backgroundColor;
|
|
13836
13836
|
}, function (_a) {
|
|
@@ -13860,9 +13860,9 @@ var IconButton = function (_a) {
|
|
|
13860
13860
|
var theme = useTheme();
|
|
13861
13861
|
return (jsxRuntime.jsx(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));
|
|
13862
13862
|
};
|
|
13863
|
-
var templateObject_1$
|
|
13863
|
+
var templateObject_1$13;
|
|
13864
13864
|
|
|
13865
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13865
|
+
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; });
|
|
13866
13866
|
var AmazonButton = function (_a) {
|
|
13867
13867
|
var onClick = _a.onClick;
|
|
13868
13868
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13871,7 +13871,7 @@ var PaypalButton = function (_a) {
|
|
|
13871
13871
|
var onClick = _a.onClick;
|
|
13872
13872
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13873
13873
|
};
|
|
13874
|
-
var templateObject_1$
|
|
13874
|
+
var templateObject_1$12;
|
|
13875
13875
|
|
|
13876
13876
|
var Container$M = newStyled.div(function (props) { return ({
|
|
13877
13877
|
height: 'auto',
|
|
@@ -13926,9 +13926,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13926
13926
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$M, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(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));
|
|
13927
13927
|
};
|
|
13928
13928
|
|
|
13929
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
13930
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13931
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13929
|
+
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'); });
|
|
13930
|
+
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'); });
|
|
13931
|
+
var StyledTitle = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13932
13932
|
var titlePosition = _a.titlePosition;
|
|
13933
13933
|
return titlePosition == 'center' &&
|
|
13934
13934
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13938,13 +13938,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13938
13938
|
var isMobile = useWindowDimensions().isMobile;
|
|
13939
13939
|
return (jsxRuntime.jsxs(Container$L, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13940
13940
|
};
|
|
13941
|
-
var templateObject_1$
|
|
13941
|
+
var templateObject_1$11, templateObject_2$N, templateObject_3$E;
|
|
13942
13942
|
|
|
13943
|
-
var Label$4 = newStyled.span(templateObject_1
|
|
13943
|
+
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) {
|
|
13944
13944
|
var color = _a.color;
|
|
13945
13945
|
return color;
|
|
13946
13946
|
});
|
|
13947
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13947
|
+
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) {
|
|
13948
13948
|
var color = _a.color;
|
|
13949
13949
|
return color;
|
|
13950
13950
|
});
|
|
@@ -13953,7 +13953,7 @@ var InputLabel = function (_a) {
|
|
|
13953
13953
|
var theme = useTheme();
|
|
13954
13954
|
return (jsxRuntime.jsxs(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13955
13955
|
};
|
|
13956
|
-
var templateObject_1
|
|
13956
|
+
var templateObject_1$10, templateObject_2$M;
|
|
13957
13957
|
|
|
13958
13958
|
var containerByStatus = function (theme, status) {
|
|
13959
13959
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13962,12 +13962,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13962
13962
|
return theme.colors.semantic.urgent.color;
|
|
13963
13963
|
return '';
|
|
13964
13964
|
};
|
|
13965
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13965
|
+
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) {
|
|
13966
13966
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13967
13967
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13968
13968
|
});
|
|
13969
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13970
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13969
|
+
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"])));
|
|
13970
|
+
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) {
|
|
13971
13971
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13972
13972
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13973
13973
|
}, function (_a) {
|
|
@@ -14022,11 +14022,11 @@ var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __
|
|
|
14022
14022
|
return hasValue &&
|
|
14023
14023
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14024
14024
|
});
|
|
14025
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14025
|
+
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) {
|
|
14026
14026
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14027
14027
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14028
14028
|
});
|
|
14029
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14029
|
+
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) {
|
|
14030
14030
|
var theme = _a.theme;
|
|
14031
14031
|
return theme.component.input.placeholderColor;
|
|
14032
14032
|
}, function (_a) {
|
|
@@ -14039,8 +14039,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$m || (templateObject_5
|
|
|
14039
14039
|
var theme = _a.theme;
|
|
14040
14040
|
return theme.component.input.lineHeight;
|
|
14041
14041
|
});
|
|
14042
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14043
|
-
var templateObject_1
|
|
14042
|
+
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"])));
|
|
14043
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
14044
14044
|
|
|
14045
14045
|
var BaseInput = function (_a) {
|
|
14046
14046
|
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"]);
|
|
@@ -14084,11 +14084,11 @@ var Button$5 = function (_a) {
|
|
|
14084
14084
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14085
14085
|
};
|
|
14086
14086
|
|
|
14087
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
14087
|
+
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) {
|
|
14088
14088
|
var theme = _a.theme;
|
|
14089
14089
|
return theme.component.inputCustom.input.borderRadius;
|
|
14090
14090
|
});
|
|
14091
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14091
|
+
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) {
|
|
14092
14092
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14093
14093
|
return defaultRounded
|
|
14094
14094
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14105,21 +14105,21 @@ var Custom = function (_a) {
|
|
|
14105
14105
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14106
14106
|
return (jsxRuntime.jsx(Container$J, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14107
14107
|
};
|
|
14108
|
-
var templateObject_1$
|
|
14108
|
+
var templateObject_1$_, templateObject_2$K;
|
|
14109
14109
|
|
|
14110
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14110
|
+
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) {
|
|
14111
14111
|
var size = _a.size;
|
|
14112
14112
|
return (size === 'small' ? '36px' : '');
|
|
14113
14113
|
});
|
|
14114
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14115
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14114
|
+
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"])));
|
|
14115
|
+
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"])));
|
|
14116
14116
|
var Success = function (_a) {
|
|
14117
14117
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14118
14118
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14119
14119
|
};
|
|
14120
|
-
var templateObject_1$
|
|
14120
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$C;
|
|
14121
14121
|
|
|
14122
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14122
|
+
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) {
|
|
14123
14123
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14124
14124
|
return status === exports.InputValidationType.Empty &&
|
|
14125
14125
|
type === 'primary' &&
|
|
@@ -14136,16 +14136,16 @@ var BasePlusButton = function (_a) {
|
|
|
14136
14136
|
}
|
|
14137
14137
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14138
14138
|
};
|
|
14139
|
-
var templateObject_1$
|
|
14139
|
+
var templateObject_1$Y;
|
|
14140
14140
|
|
|
14141
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14142
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14141
|
+
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"])));
|
|
14142
|
+
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"])));
|
|
14143
14143
|
var BasePlusIcon = function (_a) {
|
|
14144
14144
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14145
14145
|
var theme = useTheme();
|
|
14146
14146
|
return (jsxRuntime.jsx(Container$I, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14147
14147
|
};
|
|
14148
|
-
var templateObject_1$
|
|
14148
|
+
var templateObject_1$X, templateObject_2$I;
|
|
14149
14149
|
|
|
14150
14150
|
var Input$3 = {
|
|
14151
14151
|
Simple: BaseInput,
|
|
@@ -14190,7 +14190,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14190
14190
|
}, [preventTouch, ref, touchStart]);
|
|
14191
14191
|
}
|
|
14192
14192
|
|
|
14193
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14193
|
+
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) {
|
|
14194
14194
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14195
14195
|
return borderRadiusVariant &&
|
|
14196
14196
|
"\n border-radius: 40px;\n ";
|
|
@@ -14199,11 +14199,11 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
14199
14199
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14200
14200
|
});
|
|
14201
14201
|
// max-height: 31.875rem;
|
|
14202
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14203
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14204
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14205
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14206
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14202
|
+
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'); });
|
|
14203
|
+
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"])));
|
|
14204
|
+
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"])));
|
|
14205
|
+
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"])));
|
|
14206
|
+
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"])));
|
|
14207
14207
|
var settings$1 = {
|
|
14208
14208
|
dots: true,
|
|
14209
14209
|
infinite: false,
|
|
@@ -14280,16 +14280,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14280
14280
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14281
14281
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14282
14282
|
};
|
|
14283
|
-
var templateObject_1$
|
|
14283
|
+
var templateObject_1$W, templateObject_2$H, templateObject_3$B, templateObject_4$t, templateObject_5$m, templateObject_6$k;
|
|
14284
14284
|
|
|
14285
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14285
|
+
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"])));
|
|
14286
14286
|
var ProductGalleryMobile = function (_a) {
|
|
14287
14287
|
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;
|
|
14288
14288
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14289
14289
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14290
14290
|
return (jsxRuntime.jsx(Container$G, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(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));
|
|
14291
14291
|
};
|
|
14292
|
-
var templateObject_1$
|
|
14292
|
+
var templateObject_1$V;
|
|
14293
14293
|
|
|
14294
14294
|
function _extends() {
|
|
14295
14295
|
_extends = Object.assign || function (target) {
|
|
@@ -14556,14 +14556,14 @@ function useSwipeable(options) {
|
|
|
14556
14556
|
return handlers;
|
|
14557
14557
|
}
|
|
14558
14558
|
|
|
14559
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14559
|
+
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"])));
|
|
14560
14560
|
var ArrowButton = function (_a) {
|
|
14561
14561
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14562
14562
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14563
14563
|
};
|
|
14564
|
-
var templateObject_1$
|
|
14564
|
+
var templateObject_1$U;
|
|
14565
14565
|
|
|
14566
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14566
|
+
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"])));
|
|
14567
14567
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14568
14568
|
var SlideDots = function (_a) {
|
|
14569
14569
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14572,11 +14572,11 @@ var SlideDots = function (_a) {
|
|
|
14572
14572
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14573
14573
|
: 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));
|
|
14574
14574
|
};
|
|
14575
|
-
var templateObject_1$
|
|
14575
|
+
var templateObject_1$T;
|
|
14576
14576
|
|
|
14577
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14578
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14579
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14577
|
+
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"])));
|
|
14578
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14579
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14580
14580
|
var SlideNavigation = function (_a) {
|
|
14581
14581
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14582
14582
|
var theme = useTheme();
|
|
@@ -14588,23 +14588,23 @@ var SlideNavigation = function (_a) {
|
|
|
14588
14588
|
onNavigate(selectedIndex + 1);
|
|
14589
14589
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14590
14590
|
};
|
|
14591
|
-
var templateObject_1$
|
|
14591
|
+
var templateObject_1$S, templateObject_2$G, templateObject_3$A;
|
|
14592
14592
|
|
|
14593
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14593
|
+
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) {
|
|
14594
14594
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14595
14595
|
return borderRadiusVariant &&
|
|
14596
14596
|
"\n border-radius: 40px;\n ";
|
|
14597
14597
|
});
|
|
14598
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14599
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14598
|
+
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'); });
|
|
14599
|
+
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"])));
|
|
14600
14600
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14601
14601
|
var _b, _c;
|
|
14602
14602
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14603
14603
|
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsx("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));
|
|
14604
14604
|
});
|
|
14605
|
-
var templateObject_1$
|
|
14605
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14606
14606
|
|
|
14607
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14607
|
+
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"])));
|
|
14608
14608
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14609
14609
|
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;
|
|
14610
14610
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14628,9 +14628,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14628
14628
|
}, [index, images]);
|
|
14629
14629
|
return (jsxRuntime.jsxs(Container$D, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14630
14630
|
};
|
|
14631
|
-
var templateObject_1$
|
|
14631
|
+
var templateObject_1$Q;
|
|
14632
14632
|
|
|
14633
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14633
|
+
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) {
|
|
14634
14634
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14635
14635
|
return borderRadiusVariant &&
|
|
14636
14636
|
"\n border-radius: 40px;\n ";
|
|
@@ -14639,12 +14639,12 @@ var Container$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
14639
14639
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14640
14640
|
});
|
|
14641
14641
|
// max-height: 31.875rem;
|
|
14642
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14643
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14644
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14645
|
-
var Video = newStyled.div(templateObject_5$
|
|
14646
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14647
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14642
|
+
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'); });
|
|
14643
|
+
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"])));
|
|
14644
|
+
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"])));
|
|
14645
|
+
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"])));
|
|
14646
|
+
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"])));
|
|
14647
|
+
var Text$2 = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14648
14648
|
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"])));
|
|
14649
14649
|
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"])));
|
|
14650
14650
|
var settings = {
|
|
@@ -14704,14 +14704,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14704
14704
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14705
14705
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14706
14706
|
};
|
|
14707
|
-
var templateObject_1$
|
|
14707
|
+
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;
|
|
14708
14708
|
|
|
14709
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14709
|
+
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"])));
|
|
14710
14710
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14711
14711
|
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;
|
|
14712
14712
|
return (jsxRuntime.jsx(Container$B, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14713
14713
|
};
|
|
14714
|
-
var templateObject_1$
|
|
14714
|
+
var templateObject_1$O;
|
|
14715
14715
|
|
|
14716
14716
|
var __defProp$1 = Object.defineProperty;
|
|
14717
14717
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14844,21 +14844,21 @@ var Portal = function (_a) {
|
|
|
14844
14844
|
var visibleStyle = function (_a) {
|
|
14845
14845
|
var opened = _a.opened;
|
|
14846
14846
|
return opened
|
|
14847
|
-
? css(templateObject_1$
|
|
14847
|
+
? 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 "])));
|
|
14848
14848
|
};
|
|
14849
14849
|
var transformStyle = function (_a) {
|
|
14850
14850
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14851
14851
|
return opened
|
|
14852
|
-
? css(templateObject_3$
|
|
14852
|
+
? 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%');
|
|
14853
14853
|
};
|
|
14854
|
-
var Container$A = newStyled.div(templateObject_6$
|
|
14854
|
+
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) {
|
|
14855
14855
|
var width = _a.width;
|
|
14856
14856
|
return width
|
|
14857
|
-
? css(templateObject_5$
|
|
14857
|
+
? css(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14858
14858
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14859
14859
|
});
|
|
14860
14860
|
}, visibleStyle, transformStyle);
|
|
14861
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14861
|
+
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);
|
|
14862
14862
|
var Modal = function (_a) {
|
|
14863
14863
|
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;
|
|
14864
14864
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14899,9 +14899,9 @@ var useModal = function (id) {
|
|
|
14899
14899
|
close: close,
|
|
14900
14900
|
}); }, [close, open, opened]);
|
|
14901
14901
|
};
|
|
14902
|
-
var templateObject_1$
|
|
14902
|
+
var templateObject_1$N, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
14903
14903
|
|
|
14904
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14904
|
+
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) {
|
|
14905
14905
|
var height = _a.height;
|
|
14906
14906
|
return height || '0.5rem';
|
|
14907
14907
|
}, function (_a) {
|
|
@@ -14953,7 +14953,7 @@ var Container$z = newStyled.div(function (_a) {
|
|
|
14953
14953
|
background: backgroundColor,
|
|
14954
14954
|
});
|
|
14955
14955
|
});
|
|
14956
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
14956
|
+
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"])));
|
|
14957
14957
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14958
14958
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14959
14959
|
};
|
|
@@ -14981,19 +14981,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14981
14981
|
};
|
|
14982
14982
|
return (jsxRuntime.jsxs(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
14983
14983
|
};
|
|
14984
|
-
var templateObject_1$
|
|
14984
|
+
var templateObject_1$M, templateObject_2$C;
|
|
14985
14985
|
|
|
14986
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
14986
|
+
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) {
|
|
14987
14987
|
var theme = _a.theme;
|
|
14988
14988
|
return theme.component.orderBar.backgroundColor;
|
|
14989
14989
|
});
|
|
14990
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14990
|
+
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; });
|
|
14991
14991
|
var OrderBar = function (_a) {
|
|
14992
14992
|
var message = _a.message, color = _a.color;
|
|
14993
14993
|
var theme = useTheme();
|
|
14994
14994
|
return (jsxRuntime.jsxs(Container$y, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14995
14995
|
};
|
|
14996
|
-
var templateObject_1$
|
|
14996
|
+
var templateObject_1$L, templateObject_2$B;
|
|
14997
14997
|
|
|
14998
14998
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14999
14999
|
background: props.bgColor,
|
|
@@ -15017,15 +15017,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
15017
15017
|
justifyContent: 'center',
|
|
15018
15018
|
gap: '10px',
|
|
15019
15019
|
});
|
|
15020
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
15020
|
+
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) {
|
|
15021
15021
|
var bgColor = _a.bgColor;
|
|
15022
15022
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
15023
15023
|
}, function (_a) {
|
|
15024
15024
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
15025
15025
|
return width;
|
|
15026
15026
|
});
|
|
15027
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
15028
|
-
var templateObject_1$
|
|
15027
|
+
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"])));
|
|
15028
|
+
var templateObject_1$K, templateObject_2$A;
|
|
15029
15029
|
|
|
15030
15030
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15031
15031
|
var background = _a.background, width = _a.width;
|
|
@@ -15066,13 +15066,13 @@ var BasicAccordion = function (_a) {
|
|
|
15066
15066
|
} }), void 0));
|
|
15067
15067
|
};
|
|
15068
15068
|
|
|
15069
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
15070
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
15071
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
15072
|
-
var Label$3 = newStyled('div')(templateObject_4$
|
|
15073
|
-
newStyled(Label$3)(templateObject_5$
|
|
15074
|
-
newStyled(Label$3)(templateObject_6$
|
|
15075
|
-
var Container$x = newStyled('div')(templateObject_7$
|
|
15069
|
+
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'); });
|
|
15070
|
+
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'); });
|
|
15071
|
+
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'); });
|
|
15072
|
+
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"])));
|
|
15073
|
+
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
15074
|
+
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"])));
|
|
15075
|
+
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"])));
|
|
15076
15076
|
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"])));
|
|
15077
15077
|
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"])));
|
|
15078
15078
|
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"])));
|
|
@@ -15082,7 +15082,7 @@ var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __mak
|
|
|
15082
15082
|
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
15083
15083
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
15084
15084
|
});
|
|
15085
|
-
var templateObject_1$
|
|
15085
|
+
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;
|
|
15086
15086
|
|
|
15087
15087
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
15088
15088
|
// TODO: Refactor this color logic
|
|
@@ -18936,13 +18936,13 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18936
18936
|
HTMLReactParser$1.attributesToProps;
|
|
18937
18937
|
HTMLReactParser$1.Element;
|
|
18938
18938
|
|
|
18939
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18940
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18941
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18942
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18943
|
-
var Check = newStyled.div(templateObject_5$
|
|
18944
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18945
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18939
|
+
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"])));
|
|
18940
|
+
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"])));
|
|
18941
|
+
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"])));
|
|
18942
|
+
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"])));
|
|
18943
|
+
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"])));
|
|
18944
|
+
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"])));
|
|
18945
|
+
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"])));
|
|
18946
18946
|
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"])));
|
|
18947
18947
|
var PackSelector = function (_a) {
|
|
18948
18948
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -18973,14 +18973,14 @@ var PackCard = function (_a) {
|
|
|
18973
18973
|
currency: currencyCode || 'USD',
|
|
18974
18974
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18975
18975
|
};
|
|
18976
|
-
var templateObject_1$
|
|
18976
|
+
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;
|
|
18977
18977
|
|
|
18978
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18979
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18980
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18978
|
+
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"])));
|
|
18979
|
+
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"])));
|
|
18980
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18981
18981
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18982
18982
|
}));
|
|
18983
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18983
|
+
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) {
|
|
18984
18984
|
var bold = _a.bold;
|
|
18985
18985
|
return (bold ? '700' : '500');
|
|
18986
18986
|
}, function (_a) {
|
|
@@ -18997,7 +18997,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18997
18997
|
var background = _a.background;
|
|
18998
18998
|
return background || 'unset';
|
|
18999
18999
|
});
|
|
19000
|
-
var templateObject_1$
|
|
19000
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$u, templateObject_4$o;
|
|
19001
19001
|
|
|
19002
19002
|
var Pagination = function (_a) {
|
|
19003
19003
|
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;
|
|
@@ -19062,7 +19062,7 @@ var PaginatorBlog = function (_a) {
|
|
|
19062
19062
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19063
19063
|
};
|
|
19064
19064
|
|
|
19065
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
19065
|
+
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) {
|
|
19066
19066
|
var width = _a.width;
|
|
19067
19067
|
return width;
|
|
19068
19068
|
}, function (_a) {
|
|
@@ -19080,12 +19080,12 @@ var PaymentMethod = function (_a) {
|
|
|
19080
19080
|
var theme = useTheme();
|
|
19081
19081
|
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
19082
19082
|
};
|
|
19083
|
-
var templateObject_1$
|
|
19083
|
+
var templateObject_1$G;
|
|
19084
19084
|
|
|
19085
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19085
|
+
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"])));
|
|
19086
19086
|
var IMAGE_WIDTH = '63px';
|
|
19087
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19088
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19087
|
+
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);
|
|
19088
|
+
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({
|
|
19089
19089
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19090
19090
|
}), IMAGE_WIDTH);
|
|
19091
19091
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19108,7 +19108,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19108
19108
|
margin: margin,
|
|
19109
19109
|
});
|
|
19110
19110
|
});
|
|
19111
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19111
|
+
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) {
|
|
19112
19112
|
var withTag = _a.withTag; _a.theme;
|
|
19113
19113
|
return withTag
|
|
19114
19114
|
? mediaQueries({
|
|
@@ -19117,15 +19117,15 @@ var PriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = _
|
|
|
19117
19117
|
})
|
|
19118
19118
|
: 'justify-content: end';
|
|
19119
19119
|
});
|
|
19120
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19121
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
19120
|
+
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"])));
|
|
19121
|
+
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"])));
|
|
19122
19122
|
var SimpleOrderItem = function (_a) {
|
|
19123
19123
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19124
19124
|
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;
|
|
19125
19125
|
var theme = useTheme();
|
|
19126
19126
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(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, jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(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));
|
|
19127
19127
|
};
|
|
19128
|
-
var templateObject_1$
|
|
19128
|
+
var templateObject_1$F, templateObject_2$w, templateObject_3$t, templateObject_4$n, templateObject_5$h, templateObject_6$f;
|
|
19129
19129
|
|
|
19130
19130
|
var P$1 = newStyled.p(function (_a) {
|
|
19131
19131
|
var color = _a.color;
|
|
@@ -19139,7 +19139,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19139
19139
|
margin: '0.938rem 4.188rem',
|
|
19140
19140
|
});
|
|
19141
19141
|
});
|
|
19142
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19142
|
+
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) {
|
|
19143
19143
|
var height = _a.height;
|
|
19144
19144
|
return height || '0.5rem';
|
|
19145
19145
|
}, function (_a) {
|
|
@@ -19184,12 +19184,12 @@ var ProgressBar = function (_a) {
|
|
|
19184
19184
|
var theme = useTheme();
|
|
19185
19185
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19186
19186
|
};
|
|
19187
|
-
var templateObject_1$
|
|
19187
|
+
var templateObject_1$E;
|
|
19188
19188
|
|
|
19189
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
19190
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19191
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19192
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19189
|
+
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; });
|
|
19190
|
+
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"])));
|
|
19191
|
+
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"])));
|
|
19192
|
+
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)'; });
|
|
19193
19193
|
var QuantityPicker = function (_a) {
|
|
19194
19194
|
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;
|
|
19195
19195
|
var theme = useTheme();
|
|
@@ -19214,7 +19214,7 @@ var QuantityPicker = function (_a) {
|
|
|
19214
19214
|
}, [value, clamp]);
|
|
19215
19215
|
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(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));
|
|
19216
19216
|
};
|
|
19217
|
-
var templateObject_1$
|
|
19217
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$s, templateObject_4$m;
|
|
19218
19218
|
|
|
19219
19219
|
/* base styles & size variants */
|
|
19220
19220
|
var CustomRadioStyles$1 = {
|
|
@@ -19283,9 +19283,9 @@ var ContainerStyles$1 = {
|
|
|
19283
19283
|
},
|
|
19284
19284
|
};
|
|
19285
19285
|
|
|
19286
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19286
|
+
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"])));
|
|
19287
19287
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19288
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19288
|
+
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) {
|
|
19289
19289
|
var disabled = _a.disabled;
|
|
19290
19290
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19291
19291
|
});
|
|
@@ -19293,7 +19293,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19293
19293
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19294
19294
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19295
19295
|
]; });
|
|
19296
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19296
|
+
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"])));
|
|
19297
19297
|
var RadioPrimary = function (_a) {
|
|
19298
19298
|
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 ? exports.ComponentSize.Medium : _d;
|
|
19299
19299
|
var theme = useTheme();
|
|
@@ -19303,7 +19303,7 @@ var RadioPrimary = function (_a) {
|
|
|
19303
19303
|
};
|
|
19304
19304
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19305
19305
|
};
|
|
19306
|
-
var templateObject_1$
|
|
19306
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$r;
|
|
19307
19307
|
|
|
19308
19308
|
var RadioGroupInput = function (_a) {
|
|
19309
19309
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19382,9 +19382,9 @@ var ContainerStyles = {
|
|
|
19382
19382
|
},
|
|
19383
19383
|
};
|
|
19384
19384
|
|
|
19385
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19385
|
+
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"])));
|
|
19386
19386
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19387
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19387
|
+
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) {
|
|
19388
19388
|
var disabled = _a.disabled;
|
|
19389
19389
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19390
19390
|
});
|
|
@@ -19392,7 +19392,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19392
19392
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19393
19393
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19394
19394
|
]; });
|
|
19395
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19395
|
+
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) {
|
|
19396
19396
|
var theme = _a.theme;
|
|
19397
19397
|
return theme.component.radio.textSize;
|
|
19398
19398
|
}, function (_a) {
|
|
@@ -19408,7 +19408,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19408
19408
|
};
|
|
19409
19409
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(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));
|
|
19410
19410
|
};
|
|
19411
|
-
var templateObject_1$
|
|
19411
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$q;
|
|
19412
19412
|
|
|
19413
19413
|
var ClubRadioGroupInput = function (_a) {
|
|
19414
19414
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19436,17 +19436,17 @@ function formatDate(date, format) {
|
|
|
19436
19436
|
}
|
|
19437
19437
|
}
|
|
19438
19438
|
|
|
19439
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19440
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19441
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19442
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19443
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19444
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19445
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19439
|
+
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"])));
|
|
19440
|
+
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"])));
|
|
19441
|
+
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"])));
|
|
19442
|
+
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"])));
|
|
19443
|
+
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"])));
|
|
19444
|
+
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"])));
|
|
19445
|
+
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"])));
|
|
19446
19446
|
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"])));
|
|
19447
19447
|
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"])));
|
|
19448
19448
|
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"])));
|
|
19449
|
-
var ImageWrapper$
|
|
19449
|
+
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"])));
|
|
19450
19450
|
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"])));
|
|
19451
19451
|
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"])));
|
|
19452
19452
|
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"])));
|
|
@@ -19475,26 +19475,26 @@ var Review$1 = function (_a) {
|
|
|
19475
19475
|
}
|
|
19476
19476
|
}, [opened]);
|
|
19477
19477
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19478
|
-
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$
|
|
19478
|
+
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19479
19479
|
};
|
|
19480
|
-
var templateObject_1$
|
|
19480
|
+
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;
|
|
19481
19481
|
|
|
19482
19482
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19483
19483
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19484
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19485
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19486
|
-
var Content = newStyled.div(templateObject_3$
|
|
19487
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19488
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19489
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19490
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19484
|
+
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"])));
|
|
19485
|
+
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"])));
|
|
19486
|
+
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"])));
|
|
19487
|
+
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"])));
|
|
19488
|
+
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"])));
|
|
19489
|
+
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"])));
|
|
19490
|
+
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"])));
|
|
19491
19491
|
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"])));
|
|
19492
19492
|
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"])));
|
|
19493
19493
|
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"])));
|
|
19494
19494
|
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"])));
|
|
19495
19495
|
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"])));
|
|
19496
19496
|
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"])));
|
|
19497
|
-
var ImageWrapper$
|
|
19497
|
+
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"])));
|
|
19498
19498
|
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) {
|
|
19499
19499
|
var showMoreDesktop = _a.showMoreDesktop;
|
|
19500
19500
|
return (showMoreDesktop ? '12px' : '50px');
|
|
@@ -19531,17 +19531,17 @@ var Review = function (_a) {
|
|
|
19531
19531
|
__html: showMoreDesktop
|
|
19532
19532
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19533
19533
|
: description,
|
|
19534
|
-
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$
|
|
19534
|
+
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19535
19535
|
};
|
|
19536
|
-
var templateObject_1$
|
|
19537
|
-
|
|
19538
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19539
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19540
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19541
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19542
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19543
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19544
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19536
|
+
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;
|
|
19537
|
+
|
|
19538
|
+
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"])));
|
|
19539
|
+
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"])));
|
|
19540
|
+
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"])));
|
|
19541
|
+
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"])));
|
|
19542
|
+
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"])));
|
|
19543
|
+
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"])));
|
|
19544
|
+
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) {
|
|
19545
19545
|
var backgroundUrl = _a.backgroundUrl;
|
|
19546
19546
|
return "url(".concat(backgroundUrl, ")");
|
|
19547
19547
|
});
|
|
@@ -19551,17 +19551,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19551
19551
|
var theme = useTheme();
|
|
19552
19552
|
return (jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19553
19553
|
};
|
|
19554
|
-
var templateObject_1$
|
|
19554
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$n, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$b;
|
|
19555
19555
|
|
|
19556
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19557
|
-
var Text = newStyled.p(templateObject_2$
|
|
19556
|
+
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"])));
|
|
19557
|
+
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; });
|
|
19558
19558
|
var ScrollToTop = function (_a) {
|
|
19559
19559
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19560
19560
|
var theme = useTheme();
|
|
19561
19561
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19562
19562
|
return (jsxRuntime.jsxs(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19563
19563
|
};
|
|
19564
|
-
var templateObject_1$
|
|
19564
|
+
var templateObject_1$x, templateObject_2$p;
|
|
19565
19565
|
|
|
19566
19566
|
var Input = newStyled.input(function (props) { return ({
|
|
19567
19567
|
padding: props.theme.component.input.padding,
|
|
@@ -19592,7 +19592,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19592
19592
|
},
|
|
19593
19593
|
}); });
|
|
19594
19594
|
|
|
19595
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19595
|
+
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({
|
|
19596
19596
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19597
19597
|
}));
|
|
19598
19598
|
var Description = newStyled.div({
|
|
@@ -19611,7 +19611,7 @@ var ProductItem = function (_a) {
|
|
|
19611
19611
|
var theme = useTheme();
|
|
19612
19612
|
return (jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19613
19613
|
};
|
|
19614
|
-
var templateObject_1$
|
|
19614
|
+
var templateObject_1$w;
|
|
19615
19615
|
|
|
19616
19616
|
var Container$j = newStyled.div({
|
|
19617
19617
|
display: 'flex',
|
|
@@ -19627,7 +19627,7 @@ var Ul = newStyled.ul({
|
|
|
19627
19627
|
margin: '0px',
|
|
19628
19628
|
padding: '0px',
|
|
19629
19629
|
});
|
|
19630
|
-
var Li = newStyled.li(templateObject_1$
|
|
19630
|
+
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({
|
|
19631
19631
|
padding: [0, '0rem 1rem'],
|
|
19632
19632
|
borderRadius: [0, '0.5rem'],
|
|
19633
19633
|
}));
|
|
@@ -19639,12 +19639,12 @@ var Anchor = newStyled.a({
|
|
|
19639
19639
|
padding: 0,
|
|
19640
19640
|
textDecoration: 'none',
|
|
19641
19641
|
});
|
|
19642
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19642
|
+
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({
|
|
19643
19643
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19644
19644
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19645
19645
|
borderRadius: ['0', '0.5rem'],
|
|
19646
19646
|
}));
|
|
19647
|
-
var Header = newStyled.div(templateObject_3$
|
|
19647
|
+
var Header = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19648
19648
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19649
19649
|
}));
|
|
19650
19650
|
var ResultsPanel = function (_a) {
|
|
@@ -19652,9 +19652,9 @@ var ResultsPanel = function (_a) {
|
|
|
19652
19652
|
var theme = useTheme();
|
|
19653
19653
|
return (jsxRuntime.jsxs(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19654
19654
|
};
|
|
19655
|
-
var templateObject_1$
|
|
19655
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$m;
|
|
19656
19656
|
|
|
19657
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19657
|
+
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({
|
|
19658
19658
|
right: ['1rem', '7.75rem'],
|
|
19659
19659
|
top: ['0.75rem', '0.75rem'],
|
|
19660
19660
|
}));
|
|
@@ -19663,7 +19663,7 @@ var ClearButton = function (_a) {
|
|
|
19663
19663
|
var theme = useTheme();
|
|
19664
19664
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19665
19665
|
};
|
|
19666
|
-
var templateObject_1$
|
|
19666
|
+
var templateObject_1$u;
|
|
19667
19667
|
|
|
19668
19668
|
var SearchIconContainer = newStyled.div({
|
|
19669
19669
|
display: 'flex',
|
|
@@ -19673,7 +19673,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19673
19673
|
background: 'white',
|
|
19674
19674
|
alignSelf: 'center',
|
|
19675
19675
|
});
|
|
19676
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19676
|
+
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"])));
|
|
19677
19677
|
var SearchControl = function (_a) {
|
|
19678
19678
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19679
19679
|
var theme = useTheme();
|
|
@@ -19689,7 +19689,7 @@ var SearchControl = function (_a) {
|
|
|
19689
19689
|
}
|
|
19690
19690
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19691
19691
|
};
|
|
19692
|
-
var templateObject_1$
|
|
19692
|
+
var templateObject_1$t;
|
|
19693
19693
|
|
|
19694
19694
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19695
19695
|
var reducer = function (state, action) {
|
|
@@ -19756,20 +19756,20 @@ var SearchBar = function (_a) {
|
|
|
19756
19756
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(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));
|
|
19757
19757
|
};
|
|
19758
19758
|
|
|
19759
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19760
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19761
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19762
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19763
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19759
|
+
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"])));
|
|
19760
|
+
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"])));
|
|
19761
|
+
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"])));
|
|
19762
|
+
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"])));
|
|
19763
|
+
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"])));
|
|
19764
19764
|
var SearchNavigation = function (_a) {
|
|
19765
19765
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19766
19766
|
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19767
19767
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19768
19768
|
}) }, void 0)] }, void 0));
|
|
19769
19769
|
};
|
|
19770
|
-
var templateObject_1$
|
|
19770
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$d;
|
|
19771
19771
|
|
|
19772
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19772
|
+
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) {
|
|
19773
19773
|
var alignCenter = _a.alignCenter;
|
|
19774
19774
|
return alignCenter &&
|
|
19775
19775
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19779,26 +19779,26 @@ var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
19779
19779
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19780
19780
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19781
19781
|
});
|
|
19782
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19783
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19782
|
+
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"])));
|
|
19783
|
+
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"])));
|
|
19784
19784
|
var ShortBanner = function (_a) {
|
|
19785
19785
|
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;
|
|
19786
19786
|
var theme = useTheme();
|
|
19787
19787
|
return (jsxRuntime.jsxs(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19788
19788
|
};
|
|
19789
|
-
var templateObject_1$
|
|
19790
|
-
|
|
19791
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19792
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19793
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19794
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19795
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19796
|
-
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$
|
|
19797
|
-
var Container$e = newStyled('div')(templateObject_7$
|
|
19789
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k;
|
|
19790
|
+
|
|
19791
|
+
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; });
|
|
19792
|
+
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; });
|
|
19793
|
+
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; });
|
|
19794
|
+
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"])));
|
|
19795
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19796
|
+
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"])));
|
|
19797
|
+
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"])));
|
|
19798
19798
|
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"])));
|
|
19799
19799
|
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"])));
|
|
19800
19800
|
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; });
|
|
19801
|
-
var templateObject_1$
|
|
19801
|
+
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;
|
|
19802
19802
|
|
|
19803
19803
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19804
19804
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19839,16 +19839,16 @@ var SizeChartTable = function (_a) {
|
|
|
19839
19839
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(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 (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19840
19840
|
};
|
|
19841
19841
|
|
|
19842
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19843
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19844
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19845
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19842
|
+
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; });
|
|
19843
|
+
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; });
|
|
19844
|
+
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; });
|
|
19845
|
+
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; });
|
|
19846
19846
|
var SizeTable = function (_a) {
|
|
19847
19847
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19848
19848
|
var theme = useTheme();
|
|
19849
19849
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19850
19850
|
};
|
|
19851
|
-
var templateObject_1$
|
|
19851
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$g;
|
|
19852
19852
|
|
|
19853
19853
|
var getStylesBySize$7 = function (size) {
|
|
19854
19854
|
switch (size) {
|
|
@@ -19875,7 +19875,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19875
19875
|
} });
|
|
19876
19876
|
};
|
|
19877
19877
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19878
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19878
|
+
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));
|
|
19879
19879
|
};
|
|
19880
19880
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19881
19881
|
if (disabled)
|
|
@@ -19891,23 +19891,23 @@ var TextButton = function (_a) {
|
|
|
19891
19891
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19892
19892
|
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));
|
|
19893
19893
|
};
|
|
19894
|
-
var templateObject_1$
|
|
19894
|
+
var templateObject_1$o;
|
|
19895
19895
|
|
|
19896
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19897
|
-
var P = newStyled.p(templateObject_2$
|
|
19898
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19896
|
+
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"])));
|
|
19897
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19898
|
+
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"])));
|
|
19899
19899
|
var SizeFitGuide = function (_a) {
|
|
19900
19900
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19901
19901
|
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19902
19902
|
};
|
|
19903
|
-
var templateObject_1$
|
|
19903
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$h;
|
|
19904
19904
|
|
|
19905
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19905
|
+
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) {
|
|
19906
19906
|
var inline = _a.inline;
|
|
19907
19907
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19908
19908
|
});
|
|
19909
|
-
var Row = newStyled.div(templateObject_2$
|
|
19910
|
-
var templateObject_1$
|
|
19909
|
+
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"])));
|
|
19910
|
+
var templateObject_1$m, templateObject_2$i;
|
|
19911
19911
|
|
|
19912
19912
|
var SizeSelector = function (_a) {
|
|
19913
19913
|
var _b;
|
|
@@ -19929,7 +19929,7 @@ var SizeSelector = function (_a) {
|
|
|
19929
19929
|
}) }), void 0)] }), void 0));
|
|
19930
19930
|
};
|
|
19931
19931
|
|
|
19932
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19932
|
+
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) {
|
|
19933
19933
|
var titleSize = _a.titleSize;
|
|
19934
19934
|
return titleSize;
|
|
19935
19935
|
}, function (_a) {
|
|
@@ -19946,18 +19946,18 @@ var Tab = function (_a) {
|
|
|
19946
19946
|
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;
|
|
19947
19947
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(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));
|
|
19948
19948
|
};
|
|
19949
|
-
var templateObject_1$
|
|
19949
|
+
var templateObject_1$l;
|
|
19950
19950
|
|
|
19951
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19952
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19951
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19952
|
+
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) {
|
|
19953
19953
|
var backgroundColor = _a.backgroundColor;
|
|
19954
19954
|
return backgroundColor;
|
|
19955
19955
|
}, function (_a) {
|
|
19956
19956
|
var borderColor = _a.borderColor;
|
|
19957
19957
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19958
19958
|
});
|
|
19959
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19960
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19959
|
+
var TabContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19960
|
+
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"])));
|
|
19961
19961
|
var Tabs = function (_a) {
|
|
19962
19962
|
var _b;
|
|
19963
19963
|
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;
|
|
@@ -19968,14 +19968,14 @@ var Tabs = function (_a) {
|
|
|
19968
19968
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19969
19969
|
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19970
19970
|
};
|
|
19971
|
-
var templateObject_1$
|
|
19971
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$g, templateObject_4$f;
|
|
19972
19972
|
|
|
19973
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19973
|
+
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"])));
|
|
19974
19974
|
var Tag = function (_a) {
|
|
19975
19975
|
var text = _a.text, className = _a.className;
|
|
19976
19976
|
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19977
19977
|
};
|
|
19978
|
-
var templateObject_1$
|
|
19978
|
+
var templateObject_1$j;
|
|
19979
19979
|
|
|
19980
19980
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19981
19981
|
switch (size) {
|
|
@@ -20086,9 +20086,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20086
20086
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20087
20087
|
};
|
|
20088
20088
|
|
|
20089
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
20090
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
20091
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20089
|
+
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"])));
|
|
20090
|
+
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"])));
|
|
20091
|
+
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"])));
|
|
20092
20092
|
var ImageVideo = function (_a) {
|
|
20093
20093
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20094
20094
|
var video = React$2.useRef(null);
|
|
@@ -20096,7 +20096,7 @@ var ImageVideo = function (_a) {
|
|
|
20096
20096
|
var handleOnClick = function () {
|
|
20097
20097
|
setOpened(true);
|
|
20098
20098
|
};
|
|
20099
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", style: {
|
|
20099
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper$1, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", style: {
|
|
20100
20100
|
position: 'absolute',
|
|
20101
20101
|
top: '10px',
|
|
20102
20102
|
right: '10px',
|
|
@@ -20108,12 +20108,12 @@ var ImageVideo = function (_a) {
|
|
|
20108
20108
|
height: '100%',
|
|
20109
20109
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20110
20110
|
};
|
|
20111
|
-
var templateObject_1$
|
|
20111
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$f;
|
|
20112
20112
|
|
|
20113
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20114
|
-
var ContainerMobile = css(templateObject_2$
|
|
20115
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
20116
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20113
|
+
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"])));
|
|
20114
|
+
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"])));
|
|
20115
|
+
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);
|
|
20116
|
+
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"])));
|
|
20117
20117
|
var TextWithImage = function (_a) {
|
|
20118
20118
|
var _b, _c, _d, _e;
|
|
20119
20119
|
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"]);
|
|
@@ -20143,25 +20143,25 @@ var TextWithImage = function (_a) {
|
|
|
20143
20143
|
},
|
|
20144
20144
|
} }, 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));
|
|
20145
20145
|
};
|
|
20146
|
-
var templateObject_1$
|
|
20146
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$e;
|
|
20147
20147
|
|
|
20148
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
20148
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20149
20149
|
var timerColor = _a.timerColor;
|
|
20150
20150
|
return timerColor || '';
|
|
20151
20151
|
});
|
|
20152
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
20152
|
+
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) {
|
|
20153
20153
|
var timerColor = _a.timerColor;
|
|
20154
20154
|
return timerColor || '';
|
|
20155
20155
|
});
|
|
20156
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
20156
|
+
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) {
|
|
20157
20157
|
var theme = _a.theme;
|
|
20158
20158
|
return theme.colors.shades.white.color;
|
|
20159
20159
|
}, function (_a) {
|
|
20160
20160
|
var theme = _a.theme;
|
|
20161
20161
|
return theme.colors.shades.white.color;
|
|
20162
20162
|
});
|
|
20163
|
-
var Unit = newStyled.p(templateObject_4$
|
|
20164
|
-
var templateObject_1$
|
|
20163
|
+
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"])));
|
|
20164
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$d;
|
|
20165
20165
|
|
|
20166
20166
|
var HRS = 'HRS';
|
|
20167
20167
|
var MIN = 'MIN';
|
|
@@ -20204,14 +20204,14 @@ var Timer = function (_a) {
|
|
|
20204
20204
|
|
|
20205
20205
|
var slideInAnimation = function (distanceFromTop) {
|
|
20206
20206
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20207
|
-
return keyframes(templateObject_1$
|
|
20207
|
+
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);
|
|
20208
20208
|
};
|
|
20209
20209
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20210
20210
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20211
|
-
return keyframes(templateObject_2$
|
|
20211
|
+
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);
|
|
20212
20212
|
};
|
|
20213
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20214
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20213
|
+
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"])));
|
|
20214
|
+
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) {
|
|
20215
20215
|
var distanceFromTop = _a.distanceFromTop;
|
|
20216
20216
|
return distanceFromTop || '124px';
|
|
20217
20217
|
}, function (_a) {
|
|
@@ -20224,12 +20224,12 @@ var ToastContent = newStyled.div(templateObject_4$b || (templateObject_4$b = __m
|
|
|
20224
20224
|
var distanceFromTop = _a.distanceFromTop;
|
|
20225
20225
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20226
20226
|
});
|
|
20227
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20227
|
+
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) {
|
|
20228
20228
|
var severity = _a.severity;
|
|
20229
20229
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20230
20230
|
});
|
|
20231
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20232
|
-
var templateObject_1$
|
|
20231
|
+
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"])));
|
|
20232
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$c, templateObject_5$b, templateObject_6$a;
|
|
20233
20233
|
|
|
20234
20234
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20235
20235
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20249,9 +20249,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20249
20249
|
});
|
|
20250
20250
|
Toast.displayName = 'Toast';
|
|
20251
20251
|
|
|
20252
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20253
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20254
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20252
|
+
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"])));
|
|
20253
|
+
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; });
|
|
20254
|
+
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) {
|
|
20255
20255
|
var theme = _a.theme;
|
|
20256
20256
|
return theme.component.total.basicTotal.currency.color;
|
|
20257
20257
|
}, function (_a) {
|
|
@@ -20264,21 +20264,21 @@ var Currency = newStyled.span(templateObject_3$a || (templateObject_3$a = __make
|
|
|
20264
20264
|
var theme = _a.theme;
|
|
20265
20265
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20266
20266
|
});
|
|
20267
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20267
|
+
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) {
|
|
20268
20268
|
var highlightColor = _a.highlightColor;
|
|
20269
20269
|
return highlightColor;
|
|
20270
20270
|
});
|
|
20271
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20271
|
+
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) {
|
|
20272
20272
|
var showTotalLabel = _a.showTotalLabel;
|
|
20273
20273
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20274
20274
|
});
|
|
20275
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20276
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20275
|
+
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"])));
|
|
20276
|
+
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) {
|
|
20277
20277
|
var theme = _a.theme;
|
|
20278
20278
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20279
20279
|
});
|
|
20280
20280
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20281
|
-
var templateObject_1$
|
|
20281
|
+
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;
|
|
20282
20282
|
|
|
20283
20283
|
var Total = function (_a) {
|
|
20284
20284
|
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;
|
|
@@ -20286,19 +20286,19 @@ var Total = function (_a) {
|
|
|
20286
20286
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20287
20287
|
};
|
|
20288
20288
|
|
|
20289
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20289
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20290
20290
|
var color = _a.color;
|
|
20291
20291
|
return color;
|
|
20292
20292
|
});
|
|
20293
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20294
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20293
|
+
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"])));
|
|
20294
|
+
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) {
|
|
20295
20295
|
var theme = _a.theme;
|
|
20296
20296
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20297
20297
|
}, function (_a) {
|
|
20298
20298
|
var theme = _a.theme;
|
|
20299
20299
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20300
20300
|
});
|
|
20301
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20301
|
+
var CouponItem = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20302
20302
|
var color = _a.color;
|
|
20303
20303
|
return color;
|
|
20304
20304
|
});
|
|
@@ -20311,26 +20311,26 @@ var Subtotal = function (_a) {
|
|
|
20311
20311
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20312
20312
|
})] }), void 0));
|
|
20313
20313
|
};
|
|
20314
|
-
var templateObject_1$
|
|
20314
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$a;
|
|
20315
20315
|
|
|
20316
20316
|
var Totals = {
|
|
20317
20317
|
Total: Total,
|
|
20318
20318
|
Subtotal: Subtotal,
|
|
20319
20319
|
};
|
|
20320
20320
|
|
|
20321
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20322
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20323
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20324
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20325
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20326
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20321
|
+
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"])));
|
|
20322
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20323
|
+
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; });
|
|
20324
|
+
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'); });
|
|
20325
|
+
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"])));
|
|
20326
|
+
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) {
|
|
20327
20327
|
return props.finishedTrack
|
|
20328
20328
|
? props.finishedTrackColor
|
|
20329
20329
|
: props.activeTrack
|
|
20330
20330
|
? props.activeTrackColor
|
|
20331
20331
|
: '';
|
|
20332
20332
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20333
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20333
|
+
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"])));
|
|
20334
20334
|
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) {
|
|
20335
20335
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20336
20336
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20370,17 +20370,17 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20370
20370
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20371
20371
|
})] }), void 0));
|
|
20372
20372
|
};
|
|
20373
|
-
var templateObject_1$
|
|
20374
|
-
|
|
20375
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20376
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20377
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20378
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20379
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20380
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20373
|
+
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;
|
|
20374
|
+
|
|
20375
|
+
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"])));
|
|
20376
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20377
|
+
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; });
|
|
20378
|
+
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'); });
|
|
20379
|
+
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'); });
|
|
20380
|
+
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) {
|
|
20381
20381
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20382
20382
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20383
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20383
|
+
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)'); });
|
|
20384
20384
|
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; });
|
|
20385
20385
|
var TrackingProgress = function (_a) {
|
|
20386
20386
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
@@ -20410,9 +20410,9 @@ var TrackingProgress = function (_a) {
|
|
|
20410
20410
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20411
20411
|
})] }), void 0));
|
|
20412
20412
|
};
|
|
20413
|
-
var templateObject_1$
|
|
20413
|
+
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;
|
|
20414
20414
|
|
|
20415
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20415
|
+
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) {
|
|
20416
20416
|
var textPosition = _a.textPosition;
|
|
20417
20417
|
return textPosition;
|
|
20418
20418
|
}, function (_a) {
|
|
@@ -20425,7 +20425,7 @@ var TimerContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = _
|
|
|
20425
20425
|
var borderRadius = _a.borderRadius;
|
|
20426
20426
|
return borderRadius || '8px';
|
|
20427
20427
|
});
|
|
20428
|
-
var templateObject_1$
|
|
20428
|
+
var templateObject_1$a;
|
|
20429
20429
|
|
|
20430
20430
|
var getDefaultCountdown = function () {
|
|
20431
20431
|
var tomorrowDate = new Date();
|
|
@@ -20441,7 +20441,7 @@ var HurryUp = function (_a) {
|
|
|
20441
20441
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20442
20442
|
};
|
|
20443
20443
|
|
|
20444
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20444
|
+
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) {
|
|
20445
20445
|
var size = _a.size;
|
|
20446
20446
|
return (size ? size : '100%');
|
|
20447
20447
|
}, function (_a) {
|
|
@@ -20455,7 +20455,7 @@ var borderSize = {
|
|
|
20455
20455
|
large: '3px',
|
|
20456
20456
|
};
|
|
20457
20457
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20458
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20458
|
+
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) {
|
|
20459
20459
|
var size = _a.size;
|
|
20460
20460
|
return borderSize[size];
|
|
20461
20461
|
}, function (_a) {
|
|
@@ -20468,13 +20468,52 @@ var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __
|
|
|
20468
20468
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20469
20469
|
return duration;
|
|
20470
20470
|
});
|
|
20471
|
-
var templateObject_1$
|
|
20471
|
+
var templateObject_1$9, templateObject_2$8;
|
|
20472
20472
|
|
|
20473
20473
|
var Spinner = function (_a) {
|
|
20474
20474
|
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;
|
|
20475
20475
|
return (jsxRuntime.jsx(Container$6, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
20476
20476
|
};
|
|
20477
20477
|
|
|
20478
|
+
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"])));
|
|
20479
|
+
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"])));
|
|
20480
|
+
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"])));
|
|
20481
|
+
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"])));
|
|
20482
|
+
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"])));
|
|
20483
|
+
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"])));
|
|
20484
|
+
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"])));
|
|
20485
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6;
|
|
20486
|
+
|
|
20487
|
+
function CartItemCard(_a) {
|
|
20488
|
+
var style = _a.style, className = _a.className, children = _a.children;
|
|
20489
|
+
return (jsxRuntime.jsx(ContainerWrapper$1, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20490
|
+
}
|
|
20491
|
+
var CartItemImage = function (_a) {
|
|
20492
|
+
var alt = _a.alt, src = _a.src, className = _a.className, sizes = _a.sizes;
|
|
20493
|
+
return (jsxRuntime.jsx(ImageWrapper, { children: jsxRuntime.jsx(ImageComponent, { alt: alt, src: src, className: className, sizes: sizes }, void 0) }, void 0));
|
|
20494
|
+
};
|
|
20495
|
+
var BodyContent = function (_a) {
|
|
20496
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20497
|
+
return (jsxRuntime.jsx(RightComponentWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20498
|
+
};
|
|
20499
|
+
var TitleContent = function (_a) {
|
|
20500
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20501
|
+
return (jsxRuntime.jsx(TitleWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20502
|
+
};
|
|
20503
|
+
var SubTitleContent = function (_a) {
|
|
20504
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20505
|
+
return (jsxRuntime.jsx(SubTitleWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20506
|
+
};
|
|
20507
|
+
var ButtonsContent = function (_a) {
|
|
20508
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20509
|
+
return (jsxRuntime.jsx(ButtonsWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20510
|
+
};
|
|
20511
|
+
BodyContent.TitleContent = TitleContent;
|
|
20512
|
+
BodyContent.SubTitleContent = SubTitleContent;
|
|
20513
|
+
BodyContent.ButtonsContent = ButtonsContent;
|
|
20514
|
+
CartItemCard.CartItemImageContent = CartItemImage;
|
|
20515
|
+
CartItemCard.BodyContent = BodyContent;
|
|
20516
|
+
|
|
20478
20517
|
var radioIds = {
|
|
20479
20518
|
oneTime: {
|
|
20480
20519
|
id: 'one-time-purchase',
|
|
@@ -21055,6 +21094,7 @@ exports.BuyNowPayLater = BuyNowPayLater;
|
|
|
21055
21094
|
exports.CacheProvider = CacheProvider;
|
|
21056
21095
|
exports.CancellationFlowAccordionContentPerPartner = CancellationFlowAccordionContentPerPartner;
|
|
21057
21096
|
exports.Card = Card$3;
|
|
21097
|
+
exports.CartItemCard = CartItemCard;
|
|
21058
21098
|
exports.CartProductItem = CartProductItem;
|
|
21059
21099
|
exports.CategorySquareTag = CategorySquareTag;
|
|
21060
21100
|
exports.CategoryTag = CategoryTag;
|