@trafilea/afrodita-components 6.54.13 → 6.55.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 +20 -1
- package/build/index.esm.js +743 -667
- package/build/index.esm.js.map +1 -1
- package/build/index.js +744 -666
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3195,7 +3195,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3195
3195
|
};
|
|
3196
3196
|
}
|
|
3197
3197
|
};
|
|
3198
|
-
var Container$1z = newStyled.div(templateObject_1$
|
|
3198
|
+
var Container$1z = newStyled.div(templateObject_1$2F || (templateObject_1$2F = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3199
3199
|
var backgroundColor = _a.backgroundColor;
|
|
3200
3200
|
return backgroundColor;
|
|
3201
3201
|
}, function (_a) {
|
|
@@ -3217,7 +3217,7 @@ var Container$1z = newStyled.div(templateObject_1$2D || (templateObject_1$2D = _
|
|
|
3217
3217
|
var size = _a.size;
|
|
3218
3218
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3219
3219
|
});
|
|
3220
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3220
|
+
var H3$2 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __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) {
|
|
3221
3221
|
var textColor = _a.textColor;
|
|
3222
3222
|
return textColor;
|
|
3223
3223
|
}, function (_a) {
|
|
@@ -3234,7 +3234,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3234
3234
|
var theme = useTheme();
|
|
3235
3235
|
return (jsx$1(Container$1z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3236
3236
|
};
|
|
3237
|
-
var templateObject_1$
|
|
3237
|
+
var templateObject_1$2F, templateObject_2$1V;
|
|
3238
3238
|
|
|
3239
3239
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3240
3240
|
var _a, _b, _c;
|
|
@@ -3265,7 +3265,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3265
3265
|
};
|
|
3266
3266
|
}
|
|
3267
3267
|
};
|
|
3268
|
-
var Container$1y = newStyled.div(templateObject_1$
|
|
3268
|
+
var Container$1y = 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) {
|
|
3269
3269
|
var backgroundColor = _a.backgroundColor;
|
|
3270
3270
|
return backgroundColor;
|
|
3271
3271
|
}, function (_a) {
|
|
@@ -3287,7 +3287,7 @@ var Container$1y = newStyled.div(templateObject_1$2C || (templateObject_1$2C = _
|
|
|
3287
3287
|
var size = _a.size;
|
|
3288
3288
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3289
3289
|
});
|
|
3290
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3290
|
+
var H3$1 = newStyled.h3(templateObject_2$1U || (templateObject_2$1U = __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) {
|
|
3291
3291
|
var textColor = _a.textColor;
|
|
3292
3292
|
return textColor;
|
|
3293
3293
|
}, function (_a) {
|
|
@@ -3304,7 +3304,7 @@ var DiscountTag$4 = function (_a) {
|
|
|
3304
3304
|
var theme = useTheme();
|
|
3305
3305
|
return (jsx$1(Container$1y, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$1, __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));
|
|
3306
3306
|
};
|
|
3307
|
-
var templateObject_1$
|
|
3307
|
+
var templateObject_1$2E, templateObject_2$1U;
|
|
3308
3308
|
|
|
3309
3309
|
var Viewports = {
|
|
3310
3310
|
mobile: 'mobile',
|
|
@@ -3413,8 +3413,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3413
3413
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3414
3414
|
}
|
|
3415
3415
|
};
|
|
3416
|
-
var Container$1x = newStyled.div(templateObject_1$
|
|
3417
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3416
|
+
var Container$1x = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3417
|
+
var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __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) {
|
|
3418
3418
|
var weight = _a.weight;
|
|
3419
3419
|
return (weight ? weight : '400');
|
|
3420
3420
|
}, function (_a) {
|
|
@@ -3438,7 +3438,7 @@ var Price$1 = newStyled.p(templateObject_2$1S || (templateObject_2$1S = __makeTe
|
|
|
3438
3438
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3439
3439
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3440
3440
|
});
|
|
3441
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3441
|
+
var TagContainer = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3442
3442
|
var _b;
|
|
3443
3443
|
var size = _a.size;
|
|
3444
3444
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3471,7 +3471,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3471
3471
|
};
|
|
3472
3472
|
return (jsxs$1(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3473
3473
|
};
|
|
3474
|
-
var templateObject_1$
|
|
3474
|
+
var templateObject_1$2D, templateObject_2$1T, templateObject_3$1t;
|
|
3475
3475
|
|
|
3476
3476
|
var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
|
|
3477
3477
|
|
|
@@ -3481,7 +3481,7 @@ var getCurrencySymbol = function (finalPrice) {
|
|
|
3481
3481
|
return currencySymbol !== null && currencySymbol !== void 0 ? currencySymbol : currencySymbolFallback;
|
|
3482
3482
|
};
|
|
3483
3483
|
|
|
3484
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3484
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3485
3485
|
var PriceLabelV2$1 = function (_a) {
|
|
3486
3486
|
var _b;
|
|
3487
3487
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, _j = _a.showDecimals, showDecimals = _j === void 0 ? true : _j, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings", "showDecimals"]);
|
|
@@ -3545,11 +3545,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3545
3545
|
lineHeight: '22px',
|
|
3546
3546
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3547
3547
|
};
|
|
3548
|
-
var templateObject_1$
|
|
3548
|
+
var templateObject_1$2C;
|
|
3549
3549
|
|
|
3550
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3551
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3552
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3550
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2B || (templateObject_1$2B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3551
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1S || (templateObject_2$1S = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3552
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1s || (templateObject_3$1s = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3553
3553
|
var PriceLabelV3 = function (_a) {
|
|
3554
3554
|
var _b;
|
|
3555
3555
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3615,10 +3615,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3615
3615
|
lineHeight: '22px',
|
|
3616
3616
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3617
3617
|
};
|
|
3618
|
-
var templateObject_1$
|
|
3618
|
+
var templateObject_1$2B, templateObject_2$1S, templateObject_3$1s;
|
|
3619
3619
|
|
|
3620
|
-
var Container$1w = newStyled.div(templateObject_1$
|
|
3621
|
-
var Price = newStyled.p(templateObject_2$
|
|
3620
|
+
var Container$1w = newStyled.div(templateObject_1$2A || (templateObject_1$2A = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3621
|
+
var Price = newStyled.p(templateObject_2$1R || (templateObject_2$1R = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3622
3622
|
var weight = _a.weight;
|
|
3623
3623
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3624
3624
|
}, function (_a) {
|
|
@@ -3631,7 +3631,7 @@ var Price = newStyled.p(templateObject_2$1Q || (templateObject_2$1Q = __makeTemp
|
|
|
3631
3631
|
var underlined = _a.underlined;
|
|
3632
3632
|
return (underlined ? 'line-through' : 'none');
|
|
3633
3633
|
});
|
|
3634
|
-
var templateObject_1$
|
|
3634
|
+
var templateObject_1$2A, templateObject_2$1R;
|
|
3635
3635
|
|
|
3636
3636
|
function getTestId$1() {
|
|
3637
3637
|
var args = [];
|
|
@@ -3655,7 +3655,7 @@ var PriceLabelV5 = function (_a) {
|
|
|
3655
3655
|
return (jsx$1(Container$1w, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsx$1(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3656
3656
|
};
|
|
3657
3657
|
|
|
3658
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3658
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2z || (templateObject_1$2z = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3659
3659
|
var PriceLabel = function (_a) {
|
|
3660
3660
|
var _b;
|
|
3661
3661
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3684,9 +3684,9 @@ var PriceLabel = function (_a) {
|
|
|
3684
3684
|
marginTop: '-6px',
|
|
3685
3685
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3686
3686
|
};
|
|
3687
|
-
var templateObject_1$
|
|
3687
|
+
var templateObject_1$2z;
|
|
3688
3688
|
|
|
3689
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3689
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2y || (templateObject_1$2y = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3690
3690
|
var PriceLabelV2 = function (_a) {
|
|
3691
3691
|
var _b;
|
|
3692
3692
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3714,11 +3714,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3714
3714
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3715
3715
|
return (jsxs$1(Container$1x, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3716
3716
|
};
|
|
3717
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$2y;
|
|
3718
3718
|
|
|
3719
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3720
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3721
|
-
var templateObject_1$
|
|
3719
|
+
var ContainerWrapper$3 = newStyled.div(templateObject_1$2x || (templateObject_1$2x = __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"])));
|
|
3720
|
+
var ImgWrapper = newStyled.div(templateObject_2$1Q || (templateObject_2$1Q = __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"])));
|
|
3721
|
+
var templateObject_1$2x, templateObject_2$1Q;
|
|
3722
3722
|
|
|
3723
3723
|
var ClubPriceMemberLabel = function (_a) {
|
|
3724
3724
|
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"]);
|
|
@@ -3727,13 +3727,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3727
3727
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$3, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3728
3728
|
};
|
|
3729
3729
|
|
|
3730
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3730
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
3731
3731
|
var width = _a.width;
|
|
3732
3732
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3733
3733
|
});
|
|
3734
|
-
var templateObject_1$
|
|
3734
|
+
var templateObject_1$2w;
|
|
3735
3735
|
|
|
3736
|
-
var Container$1v = newStyled.div(templateObject_1$
|
|
3736
|
+
var Container$1v = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __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) {
|
|
3737
3737
|
var height = _a.height;
|
|
3738
3738
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3739
3739
|
}, function (_a) {
|
|
@@ -3760,9 +3760,9 @@ var SkeletonBox = function (_a) {
|
|
|
3760
3760
|
var theme = useTheme();
|
|
3761
3761
|
return jsx$1(Container$1v, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3762
3762
|
};
|
|
3763
|
-
var templateObject_1$
|
|
3763
|
+
var templateObject_1$2v;
|
|
3764
3764
|
|
|
3765
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3765
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __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) {
|
|
3766
3766
|
var width = _a.width;
|
|
3767
3767
|
return width;
|
|
3768
3768
|
}, function (_a) {
|
|
@@ -3778,7 +3778,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2s || (templateObject_1$2s
|
|
|
3778
3778
|
var opacity = _a.opacity;
|
|
3779
3779
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3780
3780
|
});
|
|
3781
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3781
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __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) {
|
|
3782
3782
|
var width = _a.width;
|
|
3783
3783
|
return width;
|
|
3784
3784
|
}, function (_a) {
|
|
@@ -3791,7 +3791,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1O || (templateObject_2$
|
|
|
3791
3791
|
var opacity = _a.opacity;
|
|
3792
3792
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3793
3793
|
});
|
|
3794
|
-
var templateObject_1$
|
|
3794
|
+
var templateObject_1$2u, templateObject_2$1P;
|
|
3795
3795
|
|
|
3796
3796
|
/* eslint-disable no-undef */
|
|
3797
3797
|
var cache = new Map();
|
|
@@ -3967,7 +3967,7 @@ var buildImageUrl = function (_a) {
|
|
|
3967
3967
|
}
|
|
3968
3968
|
};
|
|
3969
3969
|
|
|
3970
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3970
|
+
var Img$1 = newStyled.img(templateObject_1$2t || (templateObject_1$2t = __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; });
|
|
3971
3971
|
var Image$3 = function (_a) {
|
|
3972
3972
|
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"]);
|
|
3973
3973
|
var config = useTheme().config;
|
|
@@ -3976,15 +3976,15 @@ var Image$3 = function (_a) {
|
|
|
3976
3976
|
: src;
|
|
3977
3977
|
return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3978
3978
|
};
|
|
3979
|
-
var templateObject_1$
|
|
3979
|
+
var templateObject_1$2t;
|
|
3980
3980
|
|
|
3981
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3982
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3983
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3981
|
+
var LabelWrapper = newStyled.label(templateObject_1$2s || (templateObject_1$2s = __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"])));
|
|
3982
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1O || (templateObject_2$1O = __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"])));
|
|
3983
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1r || (templateObject_3$1r = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3984
3984
|
var $color = _a.$color;
|
|
3985
3985
|
return $color;
|
|
3986
3986
|
});
|
|
3987
|
-
var templateObject_1$
|
|
3987
|
+
var templateObject_1$2s, templateObject_2$1O, templateObject_3$1r;
|
|
3988
3988
|
|
|
3989
3989
|
var ToggleComponent = function (_a) {
|
|
3990
3990
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c, rest = __rest(_a, ["onToggle", "isChecked", "color"]);
|
|
@@ -4866,11 +4866,11 @@ function jsxs(type, props, key) {
|
|
|
4866
4866
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4867
4867
|
// `variants` styles that are consistent through all themes.
|
|
4868
4868
|
var TAGS = {
|
|
4869
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4870
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4871
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4872
|
-
display1: newStyled.h1(templateObject_4$
|
|
4873
|
-
display2: newStyled.h2(templateObject_5$
|
|
4869
|
+
hero1: newStyled.h1(templateObject_1$2r || (templateObject_1$2r = __makeTemplateObject([""], [""]))),
|
|
4870
|
+
hero2: newStyled.h2(templateObject_2$1N || (templateObject_2$1N = __makeTemplateObject([""], [""]))),
|
|
4871
|
+
hero3: newStyled.h3(templateObject_3$1q || (templateObject_3$1q = __makeTemplateObject([""], [""]))),
|
|
4872
|
+
display1: newStyled.h1(templateObject_4$18 || (templateObject_4$18 = __makeTemplateObject([""], [""]))),
|
|
4873
|
+
display2: newStyled.h2(templateObject_5$T || (templateObject_5$T = __makeTemplateObject([""], [""]))),
|
|
4874
4874
|
display3: newStyled.h3(templateObject_6$J || (templateObject_6$J = __makeTemplateObject([""], [""]))),
|
|
4875
4875
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4876
4876
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
@@ -5006,13 +5006,13 @@ var DEFAULTS = {
|
|
|
5006
5006
|
size: 'regular',
|
|
5007
5007
|
},
|
|
5008
5008
|
};
|
|
5009
|
-
var templateObject_1$
|
|
5009
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$J, templateObject_7$A, templateObject_8$t, templateObject_9$g, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5010
5010
|
|
|
5011
|
-
var Container$1u = newStyled.div(templateObject_1$
|
|
5012
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5013
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5014
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
5015
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
5011
|
+
var Container$1u = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __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"])));
|
|
5012
|
+
var Card$4 = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __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"])));
|
|
5013
|
+
var Tag$2 = newStyled.div(templateObject_3$1p || (templateObject_3$1p = __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"])));
|
|
5014
|
+
var Label$7 = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __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"])));
|
|
5015
|
+
var Check$1 = newStyled.div(templateObject_5$S || (templateObject_5$S = __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"])));
|
|
5016
5016
|
var DiscountContainer$1 = newStyled.div(templateObject_6$I || (templateObject_6$I = __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"])));
|
|
5017
5017
|
var PackSelectorV2 = function (_a) {
|
|
5018
5018
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -5038,27 +5038,27 @@ var PackCard$1 = function (_a) {
|
|
|
5038
5038
|
currency: currencyCode || 'USD',
|
|
5039
5039
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5040
5040
|
};
|
|
5041
|
-
var templateObject_1$
|
|
5041
|
+
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$17, templateObject_5$S, templateObject_6$I;
|
|
5042
5042
|
|
|
5043
|
-
var Container$1t = newStyled.div(templateObject_1$
|
|
5044
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5043
|
+
var Container$1t = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5044
|
+
var DropContainer = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5045
5045
|
var DropList = function (_a) {
|
|
5046
5046
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5047
5047
|
return (jsx$1(Container$1t, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5048
5048
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5049
5049
|
}) }, void 0));
|
|
5050
5050
|
};
|
|
5051
|
-
var templateObject_1$
|
|
5051
|
+
var templateObject_1$2p, templateObject_2$1L;
|
|
5052
5052
|
|
|
5053
5053
|
var DROPS_TOTAL = 5;
|
|
5054
|
-
var Container$1s = newStyled.div(templateObject_1$
|
|
5055
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5056
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5054
|
+
var Container$1s = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5055
|
+
var Title$b = newStyled.p(templateObject_2$1K || (templateObject_2$1K = __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"])));
|
|
5056
|
+
var Description$3 = newStyled.p(templateObject_3$1o || (templateObject_3$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-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"])));
|
|
5057
5057
|
var AbsorbencyLevel = function (_a) {
|
|
5058
5058
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5059
5059
|
return (jsxs$1(Container$1s, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5060
5060
|
};
|
|
5061
|
-
var templateObject_1$
|
|
5061
|
+
var templateObject_1$2o, templateObject_2$1K, templateObject_3$1o;
|
|
5062
5062
|
|
|
5063
5063
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5064
5064
|
`),"","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(`
|
|
@@ -5134,7 +5134,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5134
5134
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5135
5135
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5136
5136
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5137
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5137
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2n || (templateObject_1$2n = __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"])));
|
|
5138
5138
|
var Accordion$1 = function (_a) {
|
|
5139
5139
|
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, testId = _a.testId;
|
|
5140
5140
|
var theme = useTheme();
|
|
@@ -5158,9 +5158,9 @@ var Accordion$1 = function (_a) {
|
|
|
5158
5158
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5159
5159
|
} }), void 0));
|
|
5160
5160
|
};
|
|
5161
|
-
var templateObject_1$
|
|
5161
|
+
var templateObject_1$2n;
|
|
5162
5162
|
|
|
5163
|
-
var Container$1r = newStyled.div(templateObject_1$
|
|
5163
|
+
var Container$1r = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5164
5164
|
var AccordionOptions = function (_a) {
|
|
5165
5165
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5166
5166
|
var _b = useState({
|
|
@@ -5184,7 +5184,7 @@ var AccordionOptions = function (_a) {
|
|
|
5184
5184
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5185
5185
|
}) }, void 0));
|
|
5186
5186
|
};
|
|
5187
|
-
var templateObject_1$
|
|
5187
|
+
var templateObject_1$2m;
|
|
5188
5188
|
|
|
5189
5189
|
var isDangerouslySetInnerHTML = function (content) {
|
|
5190
5190
|
return content && typeof content === 'object' && '__html' in content;
|
|
@@ -5397,22 +5397,22 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5397
5397
|
literal: true,
|
|
5398
5398
|
});
|
|
5399
5399
|
|
|
5400
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5401
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5402
|
-
var templateObject_1$
|
|
5400
|
+
var Bold = newStyled.span(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5401
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1J || (templateObject_2$1J = __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"])));
|
|
5402
|
+
var templateObject_1$2l, templateObject_2$1J;
|
|
5403
5403
|
|
|
5404
|
-
var Container$1q = newStyled.div(templateObject_1$
|
|
5404
|
+
var Container$1q = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __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) {
|
|
5405
5405
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5406
5406
|
return width;
|
|
5407
5407
|
}, function (_a) {
|
|
5408
5408
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5409
5409
|
return height;
|
|
5410
5410
|
});
|
|
5411
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5412
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5413
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5414
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5415
|
-
var templateObject_1$
|
|
5411
|
+
var FlexCentered = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __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"])));
|
|
5412
|
+
var LeftSide = newStyled.div(templateObject_3$1n || (templateObject_3$1n = __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"])));
|
|
5413
|
+
var RightSide = newStyled.div(templateObject_4$16 || (templateObject_4$16 = __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"])));
|
|
5414
|
+
var FlexStart = newStyled.div(templateObject_5$R || (templateObject_5$R = __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"])));
|
|
5415
|
+
var templateObject_1$2k, templateObject_2$1I, templateObject_3$1n, templateObject_4$16, templateObject_5$R;
|
|
5416
5416
|
|
|
5417
5417
|
var CouponCard = function (_a) {
|
|
5418
5418
|
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;
|
|
@@ -5500,14 +5500,14 @@ var isValidDate = function (value) {
|
|
|
5500
5500
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5501
5501
|
};
|
|
5502
5502
|
|
|
5503
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5504
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5503
|
+
var ErrorText = newStyled.h3(templateObject_1$2j || (templateObject_1$2j = __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; });
|
|
5504
|
+
var ErrorContainer = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __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"])));
|
|
5505
5505
|
var Error$1 = function (_a) {
|
|
5506
5506
|
var error = _a.error;
|
|
5507
5507
|
var theme = useTheme();
|
|
5508
5508
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5509
5509
|
};
|
|
5510
|
-
var templateObject_1$
|
|
5510
|
+
var templateObject_1$2j, templateObject_2$1H;
|
|
5511
5511
|
|
|
5512
5512
|
var BaseSelectButton = function (_a) {
|
|
5513
5513
|
var children = _a.children, as = _a.as;
|
|
@@ -5524,7 +5524,7 @@ function BaseSelectOption(_a) {
|
|
|
5524
5524
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5525
5525
|
}
|
|
5526
5526
|
|
|
5527
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5527
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5528
5528
|
function BaseSelect(_a) {
|
|
5529
5529
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5530
5530
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5534,7 +5534,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5534
5534
|
Options: BaseSelectOptions,
|
|
5535
5535
|
Option: BaseSelectOption,
|
|
5536
5536
|
});
|
|
5537
|
-
var templateObject_1$
|
|
5537
|
+
var templateObject_1$2i;
|
|
5538
5538
|
|
|
5539
5539
|
var CustomButton = newStyled.button(function (_a) {
|
|
5540
5540
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5573,7 +5573,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5573
5573
|
});
|
|
5574
5574
|
});
|
|
5575
5575
|
// TODO Remove this when we find the real solution
|
|
5576
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5576
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5577
5577
|
var open = _a.open;
|
|
5578
5578
|
return open &&
|
|
5579
5579
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5593,7 +5593,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5593
5593
|
} }), void 0));
|
|
5594
5594
|
};
|
|
5595
5595
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5596
|
-
var templateObject_1$
|
|
5596
|
+
var templateObject_1$2h;
|
|
5597
5597
|
|
|
5598
5598
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5599
5599
|
var theme = _a.theme;
|
|
@@ -5760,7 +5760,7 @@ var CustomCheckboxStyles = {
|
|
|
5760
5760
|
},
|
|
5761
5761
|
};
|
|
5762
5762
|
|
|
5763
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
5763
|
+
var Container$1p = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __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"])));
|
|
5764
5764
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5765
5765
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5766
5766
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5771,7 +5771,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5771
5771
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5772
5772
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5773
5773
|
]; });
|
|
5774
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5774
|
+
var Input$5 = newStyled.input(templateObject_2$1G || (templateObject_2$1G = __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) {
|
|
5775
5775
|
var disabled = _a.disabled;
|
|
5776
5776
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5777
5777
|
});
|
|
@@ -5789,7 +5789,7 @@ var Checkbox = function (_a) {
|
|
|
5789
5789
|
? theme.colors.shades['black'].color
|
|
5790
5790
|
: theme.colors.shades['white'].color }, void 0)) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5791
5791
|
};
|
|
5792
|
-
var templateObject_1$
|
|
5792
|
+
var templateObject_1$2g, templateObject_2$1G;
|
|
5793
5793
|
|
|
5794
5794
|
var CustomOption = newStyled.li(function (_a) {
|
|
5795
5795
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5838,9 +5838,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5838
5838
|
Option: BaseDropdownOption,
|
|
5839
5839
|
});
|
|
5840
5840
|
|
|
5841
|
-
var Container$1o = newStyled.div(templateObject_1$
|
|
5842
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5843
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5841
|
+
var Container$1o = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject([""], [""])));
|
|
5842
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __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"])));
|
|
5843
|
+
var SelectedOption = newStyled.span(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5844
5844
|
var fontWeight = _a.fontWeight;
|
|
5845
5845
|
return fontWeight || '';
|
|
5846
5846
|
});
|
|
@@ -5876,7 +5876,7 @@ function SimpleDropdown(_a) {
|
|
|
5876
5876
|
var DropdownContainer = showRequiredPlaceholder ? Container$1o : Fragment$1;
|
|
5877
5877
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5878
5878
|
}
|
|
5879
|
-
var templateObject_1$
|
|
5879
|
+
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m;
|
|
5880
5880
|
|
|
5881
5881
|
/* base styles & size variants */
|
|
5882
5882
|
var CustomRadioStyles$2 = {
|
|
@@ -5941,9 +5941,9 @@ var ContainerStyles$2 = {
|
|
|
5941
5941
|
},
|
|
5942
5942
|
};
|
|
5943
5943
|
|
|
5944
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5944
|
+
var Wrapper$7 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5945
5945
|
var Container$1n = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5946
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5946
|
+
var Input$4 = newStyled.input(templateObject_2$1E || (templateObject_2$1E = __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) {
|
|
5947
5947
|
var disabled = _a.disabled;
|
|
5948
5948
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5949
5949
|
});
|
|
@@ -5951,14 +5951,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5951
5951
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5952
5952
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5953
5953
|
]; });
|
|
5954
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5954
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1l || (templateObject_3$1l = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5955
5955
|
var theme = _a.theme;
|
|
5956
5956
|
return theme.component.radio.textSize;
|
|
5957
5957
|
}, function (_a) {
|
|
5958
5958
|
var theme = _a.theme;
|
|
5959
5959
|
return theme.component.radio.lineHeight;
|
|
5960
5960
|
});
|
|
5961
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5961
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5962
5962
|
var theme = _a.theme;
|
|
5963
5963
|
return theme.component.radio.textSize;
|
|
5964
5964
|
}, function (_a) {
|
|
@@ -5977,7 +5977,7 @@ var RadioInput = function (_a) {
|
|
|
5977
5977
|
};
|
|
5978
5978
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1n, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5979
5979
|
};
|
|
5980
|
-
var templateObject_1$
|
|
5980
|
+
var templateObject_1$2e, templateObject_2$1E, templateObject_3$1l, templateObject_4$15;
|
|
5981
5981
|
|
|
5982
5982
|
var useOnClickOutside = function (ref, handler) {
|
|
5983
5983
|
useEffect(function () {
|
|
@@ -6070,7 +6070,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6070
6070
|
}
|
|
6071
6071
|
};
|
|
6072
6072
|
|
|
6073
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6073
|
+
var Wrapper$6 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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) {
|
|
6074
6074
|
var position = _a.position;
|
|
6075
6075
|
return getWrapperFlexDirection(position);
|
|
6076
6076
|
}, function (_a) {
|
|
@@ -6080,7 +6080,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __ma
|
|
|
6080
6080
|
var disableHover = _a.disableHover;
|
|
6081
6081
|
return (disableHover ? 0 : 1);
|
|
6082
6082
|
});
|
|
6083
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6083
|
+
var TooltipContainer = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __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) {
|
|
6084
6084
|
var position = _a.position;
|
|
6085
6085
|
return getContainerFlexDirection(position);
|
|
6086
6086
|
}, function (_a) {
|
|
@@ -6108,14 +6108,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1C || (templateObject_2$1C
|
|
|
6108
6108
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6109
6109
|
return actual === expected ? margin : '0';
|
|
6110
6110
|
};
|
|
6111
|
-
var ContentWrapper$1 = newStyled.div(templateObject_3$
|
|
6111
|
+
var ContentWrapper$1 = newStyled.div(templateObject_3$1k || (templateObject_3$1k = __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) {
|
|
6112
6112
|
var borderColor = _a.borderColor;
|
|
6113
6113
|
return borderColor;
|
|
6114
6114
|
}, function (_a) {
|
|
6115
6115
|
var backgroundColor = _a.backgroundColor;
|
|
6116
6116
|
return backgroundColor;
|
|
6117
6117
|
});
|
|
6118
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6118
|
+
var TooltipText = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __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) {
|
|
6119
6119
|
var theme = _a.theme;
|
|
6120
6120
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6121
6121
|
}, function (_a) {
|
|
@@ -6125,7 +6125,7 @@ var TooltipText = newStyled.div(templateObject_4$13 || (templateObject_4$13 = __
|
|
|
6125
6125
|
var color = _a.color;
|
|
6126
6126
|
return color;
|
|
6127
6127
|
});
|
|
6128
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6128
|
+
var TopSection = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __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"])));
|
|
6129
6129
|
var Title$a = newStyled.h1(templateObject_6$H || (templateObject_6$H = __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) {
|
|
6130
6130
|
var color = _a.color;
|
|
6131
6131
|
return color;
|
|
@@ -6135,7 +6135,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6135
6135
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6136
6136
|
return right;
|
|
6137
6137
|
});
|
|
6138
|
-
var templateObject_1$
|
|
6138
|
+
var templateObject_1$2d, templateObject_2$1D, templateObject_3$1k, templateObject_4$14, templateObject_5$Q, templateObject_6$H, templateObject_7$z, templateObject_8$s;
|
|
6139
6139
|
|
|
6140
6140
|
var Tooltip = function (_a) {
|
|
6141
6141
|
var _b;
|
|
@@ -6178,8 +6178,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6178
6178
|
};
|
|
6179
6179
|
};
|
|
6180
6180
|
|
|
6181
|
-
var FlexContainer$4 = newStyled.div(templateObject_1$
|
|
6182
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6181
|
+
var FlexContainer$4 = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6182
|
+
var ContainerBase$5 = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __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) {
|
|
6183
6183
|
var selected = _a.selected, theme = _a.theme;
|
|
6184
6184
|
return selected
|
|
6185
6185
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6193,12 +6193,12 @@ var ContainerBase$5 = newStyled.div(templateObject_2$1B || (templateObject_2$1B
|
|
|
6193
6193
|
var theme = _a.theme;
|
|
6194
6194
|
return theme.colors.pallete.primary.color;
|
|
6195
6195
|
});
|
|
6196
|
-
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$
|
|
6196
|
+
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1j || (templateObject_3$1j = __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) {
|
|
6197
6197
|
var onClick = _a.onClick;
|
|
6198
6198
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6199
6199
|
});
|
|
6200
|
-
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$
|
|
6201
|
-
var SubscriptionHeader$5 = newStyled.div(templateObject_5$
|
|
6200
|
+
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$13 || (templateObject_4$13 = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6201
|
+
var SubscriptionHeader$5 = newStyled.div(templateObject_5$P || (templateObject_5$P = __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) {
|
|
6202
6202
|
var theme = _a.theme;
|
|
6203
6203
|
return theme.colors.shades[200].color;
|
|
6204
6204
|
}, function (_a) {
|
|
@@ -6216,7 +6216,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6216
6216
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6217
6217
|
});
|
|
6218
6218
|
var Container$1m = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6219
|
-
var templateObject_1$
|
|
6219
|
+
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$G, templateObject_7$y, templateObject_8$r, templateObject_9$f, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6220
6220
|
|
|
6221
6221
|
var radioIds$3 = {
|
|
6222
6222
|
oneTime: {
|
|
@@ -6271,12 +6271,12 @@ var Autoship = function (_a) {
|
|
|
6271
6271
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$4, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$4, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6272
6272
|
};
|
|
6273
6273
|
|
|
6274
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6274
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6275
6275
|
var theme = _a.theme;
|
|
6276
6276
|
return theme.name === 'TheSpaDr' &&
|
|
6277
6277
|
"\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 ";
|
|
6278
6278
|
});
|
|
6279
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6279
|
+
var DiscountTag$3 = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __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) {
|
|
6280
6280
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6281
6281
|
return isSelected
|
|
6282
6282
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6292,7 +6292,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6292
6292
|
}
|
|
6293
6293
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6294
6294
|
};
|
|
6295
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$
|
|
6295
|
+
var ContainerBase$4 = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __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) {
|
|
6296
6296
|
var selected = _a.selected, theme = _a.theme;
|
|
6297
6297
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6298
6298
|
}, function (_a) {
|
|
@@ -6304,11 +6304,11 @@ var ContainerBase$4 = newStyled.div(templateObject_3$1h || (templateObject_3$1h
|
|
|
6304
6304
|
var theme = _a.theme;
|
|
6305
6305
|
return theme.colors.pallete.primary.color;
|
|
6306
6306
|
});
|
|
6307
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$
|
|
6307
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$12 || (templateObject_4$12 = __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) {
|
|
6308
6308
|
var onClick = _a.onClick;
|
|
6309
6309
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6310
6310
|
});
|
|
6311
|
-
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$
|
|
6311
|
+
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$O || (templateObject_5$O = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6312
6312
|
var SubscriptionHeader$4 = newStyled.div(templateObject_6$F || (templateObject_6$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6313
6313
|
var theme = _a.theme;
|
|
6314
6314
|
return theme.colors.shades[200].color;
|
|
@@ -6329,7 +6329,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6329
6329
|
var theme = _a.theme;
|
|
6330
6330
|
return theme.component.autoship.tooltip.margin;
|
|
6331
6331
|
});
|
|
6332
|
-
var templateObject_1$
|
|
6332
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$F, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6333
6333
|
|
|
6334
6334
|
var radioIds$2 = {
|
|
6335
6335
|
oneTime: {
|
|
@@ -6408,13 +6408,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6408
6408
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6409
6409
|
_a$2);
|
|
6410
6410
|
|
|
6411
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6412
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6413
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6414
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6415
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6411
|
+
var CustomerDetails = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject([""], [""])));
|
|
6412
|
+
var CustomerInfo = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __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"])));
|
|
6413
|
+
var Name = newStyled.h4(templateObject_3$1h || (templateObject_3$1h = __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"])));
|
|
6414
|
+
var StarIconContainer = newStyled.div(templateObject_4$11 || (templateObject_4$11 = __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"])));
|
|
6415
|
+
var Description$2 = newStyled.p(templateObject_5$N || (templateObject_5$N = __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"])));
|
|
6416
6416
|
var ReviewDays = newStyled.span(templateObject_6$E || (templateObject_6$E = __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"])));
|
|
6417
|
-
var templateObject_1$
|
|
6417
|
+
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$11, templateObject_5$N, templateObject_6$E;
|
|
6418
6418
|
|
|
6419
6419
|
var NameWithStars = function (_a) {
|
|
6420
6420
|
var name = _a.name, size = _a.size;
|
|
@@ -6432,10 +6432,10 @@ var ResultFeedback = function (_a) {
|
|
|
6432
6432
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6433
6433
|
};
|
|
6434
6434
|
|
|
6435
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
6436
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6437
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6438
|
-
var UserInfoText = newStyled.div(templateObject_4
|
|
6435
|
+
var Container$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __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; });
|
|
6436
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
6437
|
+
var ImageCard = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __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; });
|
|
6438
|
+
var UserInfoText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __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) {
|
|
6439
6439
|
var theme = _a.theme;
|
|
6440
6440
|
return theme.colors.pallete.secondary.color;
|
|
6441
6441
|
}, function (_a) {
|
|
@@ -6445,7 +6445,7 @@ var UserInfoText = newStyled.div(templateObject_4$$ || (templateObject_4$$ = __m
|
|
|
6445
6445
|
var theme = _a.theme, size = _a.size;
|
|
6446
6446
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6447
6447
|
});
|
|
6448
|
-
var templateObject_1$
|
|
6448
|
+
var templateObject_1$29, templateObject_2$1z, templateObject_3$1g, templateObject_4$10;
|
|
6449
6449
|
|
|
6450
6450
|
/* base styles & size variants */
|
|
6451
6451
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6523,7 +6523,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6523
6523
|
return (jsxs$1(Container$1k, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6524
6524
|
};
|
|
6525
6525
|
|
|
6526
|
-
var Section = newStyled.div(templateObject_1$
|
|
6526
|
+
var Section = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __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) {
|
|
6527
6527
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6528
6528
|
});
|
|
6529
6529
|
var CardHeader = function (_a) {
|
|
@@ -6534,16 +6534,16 @@ var CardFooter = function (_a) {
|
|
|
6534
6534
|
var children = _a.children;
|
|
6535
6535
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6536
6536
|
};
|
|
6537
|
-
var templateObject_1$
|
|
6537
|
+
var templateObject_1$28;
|
|
6538
6538
|
|
|
6539
|
-
var Body$3 = newStyled.div(templateObject_1$
|
|
6539
|
+
var Body$3 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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"])));
|
|
6540
6540
|
var CardBody$1 = function (_a) {
|
|
6541
6541
|
var children = _a.children;
|
|
6542
6542
|
return jsx$1(Body$3, { children: children }, void 0);
|
|
6543
6543
|
};
|
|
6544
|
-
var templateObject_1$
|
|
6544
|
+
var templateObject_1$27;
|
|
6545
6545
|
|
|
6546
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
6546
|
+
var Container$1j = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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) {
|
|
6547
6547
|
var flex = _a.flex;
|
|
6548
6548
|
return flex &&
|
|
6549
6549
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6565,16 +6565,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6565
6565
|
Footer: CardFooter,
|
|
6566
6566
|
Body: CardBody$1,
|
|
6567
6567
|
});
|
|
6568
|
-
var templateObject_1$
|
|
6568
|
+
var templateObject_1$26;
|
|
6569
6569
|
|
|
6570
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6571
|
-
var StyledContainer$1 = newStyled.div(templateObject_2$
|
|
6572
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6570
|
+
var StyledWrapper = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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"])));
|
|
6571
|
+
var StyledContainer$1 = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __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"])));
|
|
6572
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$1f || (templateObject_3$1f = __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) {
|
|
6573
6573
|
var color = _a.color;
|
|
6574
6574
|
return color;
|
|
6575
6575
|
});
|
|
6576
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4
|
|
6577
|
-
var templateObject_1$
|
|
6576
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$$ || (templateObject_4$$ = __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"])));
|
|
6577
|
+
var templateObject_1$25, templateObject_2$1y, templateObject_3$1f, templateObject_4$$;
|
|
6578
6578
|
|
|
6579
6579
|
var Minimalistic = function (_a) {
|
|
6580
6580
|
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;
|
|
@@ -6582,24 +6582,24 @@ var Minimalistic = function (_a) {
|
|
|
6582
6582
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer$1, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer$1, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer$1, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6583
6583
|
};
|
|
6584
6584
|
|
|
6585
|
-
var StyledContainer = newStyled.div(templateObject_1$
|
|
6586
|
-
var templateObject_1$
|
|
6585
|
+
var StyledContainer = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 12px;\n @media (max-width: 992px) {\n padding: 0.62px;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 12px;\n @media (max-width: 992px) {\n padding: 0.62px;\n"])));
|
|
6586
|
+
var templateObject_1$24;
|
|
6587
6587
|
|
|
6588
6588
|
var Motivator = function (_a) {
|
|
6589
6589
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, content = _a.content, _d = _a.testId, testId = _d === void 0 ? 'motivator' : _d;
|
|
6590
6590
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: true, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsx$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: typeof content === 'string' ? (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: content }), void 0)) : (content) }), void 0) }), void 0));
|
|
6591
6591
|
};
|
|
6592
6592
|
|
|
6593
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
6594
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6595
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6596
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6593
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6594
|
+
var Title$9 = newStyled.h1(templateObject_2$1x || (templateObject_2$1x = __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; });
|
|
6595
|
+
var Details$1 = newStyled.span(templateObject_3$1e || (templateObject_3$1e = __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; });
|
|
6596
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$_ || (templateObject_4$_ = __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"])));
|
|
6597
6597
|
var Simple = function (_a) {
|
|
6598
6598
|
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;
|
|
6599
6599
|
var theme = useTheme();
|
|
6600
6600
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1i, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6601
6601
|
};
|
|
6602
|
-
var templateObject_1$
|
|
6602
|
+
var templateObject_1$23, templateObject_2$1x, templateObject_3$1e, templateObject_4$_;
|
|
6603
6603
|
|
|
6604
6604
|
var Bundle = {
|
|
6605
6605
|
Minimalistic: Minimalistic,
|
|
@@ -6607,12 +6607,12 @@ var Bundle = {
|
|
|
6607
6607
|
Motivator: Motivator,
|
|
6608
6608
|
};
|
|
6609
6609
|
|
|
6610
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
6610
|
+
var Container$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __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) {
|
|
6611
6611
|
var displayBNPL = _a.displayBNPL;
|
|
6612
6612
|
return (displayBNPL ? 'flex' : 'none');
|
|
6613
6613
|
});
|
|
6614
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6615
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6614
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6615
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __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"])));
|
|
6616
6616
|
var BuyNowPayLater = function (_a) {
|
|
6617
6617
|
var _b;
|
|
6618
6618
|
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, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
|
|
@@ -6639,9 +6639,9 @@ var BuyNowPayLater = function (_a) {
|
|
|
6639
6639
|
paddingRight: '0.25rem',
|
|
6640
6640
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6641
6641
|
};
|
|
6642
|
-
var templateObject_1$
|
|
6642
|
+
var templateObject_1$22, templateObject_2$1w, templateObject_3$1d;
|
|
6643
6643
|
|
|
6644
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
6644
|
+
var Text$6 = newStyled.h3(templateObject_1$21 || (templateObject_1$21 = __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) {
|
|
6645
6645
|
var backgroundColor = _a.backgroundColor;
|
|
6646
6646
|
return backgroundColor;
|
|
6647
6647
|
}, function (_a) {
|
|
@@ -6656,42 +6656,42 @@ var OfferBanner = function (_a) {
|
|
|
6656
6656
|
var theme = useTheme();
|
|
6657
6657
|
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6658
6658
|
};
|
|
6659
|
-
var templateObject_1$
|
|
6659
|
+
var templateObject_1$21;
|
|
6660
6660
|
|
|
6661
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
6661
|
+
var Container$1g = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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"); });
|
|
6662
6662
|
var CloseButton$1 = function (_a) {
|
|
6663
6663
|
var onClick = _a.onClick, size = _a.size;
|
|
6664
6664
|
var theme = useTheme();
|
|
6665
6665
|
return (jsx$1(Container$1g, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6666
6666
|
};
|
|
6667
|
-
var templateObject_1$
|
|
6667
|
+
var templateObject_1$20;
|
|
6668
6668
|
|
|
6669
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6669
|
+
var Text$5 = newStyled.span(templateObject_1$1$ || (templateObject_1$1$ = __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; });
|
|
6670
6670
|
var Description$1 = function (_a) {
|
|
6671
6671
|
var text = _a.text;
|
|
6672
6672
|
var theme = useTheme();
|
|
6673
6673
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6674
6674
|
};
|
|
6675
|
-
var templateObject_1$
|
|
6675
|
+
var templateObject_1$1$;
|
|
6676
6676
|
|
|
6677
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6677
|
+
var P$4 = newStyled.p(templateObject_1$1_ || (templateObject_1$1_ = __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; });
|
|
6678
6678
|
var Promo = function (_a) {
|
|
6679
6679
|
var text = _a.text;
|
|
6680
6680
|
var theme = useTheme();
|
|
6681
6681
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6682
6682
|
};
|
|
6683
|
-
var templateObject_1$
|
|
6683
|
+
var templateObject_1$1_;
|
|
6684
6684
|
|
|
6685
|
-
var Text$4 = newStyled.span(templateObject_1$
|
|
6685
|
+
var Text$4 = newStyled.span(templateObject_1$1Z || (templateObject_1$1Z = __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; });
|
|
6686
6686
|
var Title$8 = function (_a) {
|
|
6687
6687
|
var title = _a.title;
|
|
6688
6688
|
var theme = useTheme();
|
|
6689
6689
|
return jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6690
6690
|
};
|
|
6691
|
-
var templateObject_1$
|
|
6691
|
+
var templateObject_1$1Z;
|
|
6692
6692
|
|
|
6693
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
6694
|
-
var templateObject_1$
|
|
6693
|
+
var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"], ["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6694
|
+
var templateObject_1$1Y;
|
|
6695
6695
|
|
|
6696
6696
|
var TrashButton = function (_a) {
|
|
6697
6697
|
var onClick = _a.onClick, size = _a.size;
|
|
@@ -6708,11 +6708,11 @@ var CartProductItem = {
|
|
|
6708
6708
|
TrashButton: TrashButton,
|
|
6709
6709
|
};
|
|
6710
6710
|
|
|
6711
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
6712
|
-
var MobileContainer = newStyled(Container$1e)(templateObject_2$
|
|
6713
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6714
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6715
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6711
|
+
var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
6712
|
+
var MobileContainer = newStyled(Container$1e)(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6713
|
+
var DollarPart = newStyled.span(templateObject_3$1c || (templateObject_3$1c = __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"])));
|
|
6714
|
+
var ClubMembersText = newStyled.span(templateObject_4$Z || (templateObject_4$Z = __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"])));
|
|
6715
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6716
6716
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6717
6717
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6718
6718
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6721,7 +6721,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6721
6721
|
var isMobile = useWindowDimensions().isMobile;
|
|
6722
6722
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$1e, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6723
6723
|
};
|
|
6724
|
-
var templateObject_1$
|
|
6724
|
+
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z, templateObject_5$M, templateObject_6$D, templateObject_7$w, templateObject_8$p;
|
|
6725
6725
|
|
|
6726
6726
|
var Spacing = function (_a) {
|
|
6727
6727
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6729,10 +6729,10 @@ var Spacing = function (_a) {
|
|
|
6729
6729
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6730
6730
|
};
|
|
6731
6731
|
|
|
6732
|
-
var Container$1d = newStyled('div')(templateObject_1$
|
|
6733
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6734
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6735
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6732
|
+
var Container$1d = newStyled('div')(templateObject_1$1W || (templateObject_1$1W = __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"])));
|
|
6733
|
+
var Content$2 = newStyled('div')(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
6734
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$1b || (templateObject_3$1b = __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"])));
|
|
6735
|
+
var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __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) {
|
|
6736
6736
|
var index = _a.index;
|
|
6737
6737
|
return "".concat(6 + 3 * index, "px");
|
|
6738
6738
|
}, function (_a) {
|
|
@@ -6743,10 +6743,10 @@ var StrengthBars = function (_a) {
|
|
|
6743
6743
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6744
6744
|
return (jsxs$1(Container$1d, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6745
6745
|
};
|
|
6746
|
-
var templateObject_1$
|
|
6746
|
+
var templateObject_1$1W, templateObject_2$1u, templateObject_3$1b, templateObject_4$Y;
|
|
6747
6747
|
|
|
6748
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6749
|
-
var templateObject_1$
|
|
6748
|
+
var Benefit$2 = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6749
|
+
var templateObject_1$1V;
|
|
6750
6750
|
|
|
6751
6751
|
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
6752
6752
|
|
|
@@ -6768,10 +6768,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6768
6768
|
|
|
6769
6769
|
var STARTS_NUMBER = 5;
|
|
6770
6770
|
|
|
6771
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
6772
|
-
var templateObject_1$
|
|
6771
|
+
var Container$1c = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6772
|
+
var templateObject_1$1U;
|
|
6773
6773
|
|
|
6774
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6774
|
+
var StarContainer = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6775
6775
|
var marginRight = _a.marginRight;
|
|
6776
6776
|
return marginRight;
|
|
6777
6777
|
});
|
|
@@ -6787,7 +6787,7 @@ var StarList = function (_a) {
|
|
|
6787
6787
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6788
6788
|
}) }, void 0));
|
|
6789
6789
|
};
|
|
6790
|
-
var templateObject_1$
|
|
6790
|
+
var templateObject_1$1T;
|
|
6791
6791
|
|
|
6792
6792
|
/* base styles & size variants */
|
|
6793
6793
|
var LabelStyles = {
|
|
@@ -6835,7 +6835,7 @@ var LabelStyles = {
|
|
|
6835
6835
|
});
|
|
6836
6836
|
},
|
|
6837
6837
|
};
|
|
6838
|
-
var Container$1b = newStyled.a(templateObject_1$
|
|
6838
|
+
var Container$1b = newStyled.a(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
6839
6839
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6840
6840
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6841
6841
|
return [
|
|
@@ -6854,8 +6854,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6854
6854
|
}),
|
|
6855
6855
|
];
|
|
6856
6856
|
});
|
|
6857
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6858
|
-
var templateObject_1$
|
|
6857
|
+
var RatingLabel = newStyled.span(templateObject_2$1t || (templateObject_2$1t = __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; });
|
|
6858
|
+
var templateObject_1$1S, templateObject_2$1t;
|
|
6859
6859
|
|
|
6860
6860
|
var Rating = function (_a) {
|
|
6861
6861
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6879,19 +6879,19 @@ var Rating = function (_a) {
|
|
|
6879
6879
|
return (jsxs$1(Container$1b, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6880
6880
|
};
|
|
6881
6881
|
|
|
6882
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6882
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
6883
6883
|
var width = _a.width;
|
|
6884
6884
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6885
6885
|
}, function (_a) {
|
|
6886
6886
|
var height = _a.height;
|
|
6887
6887
|
return height !== null && height !== void 0 ? height : 'auto';
|
|
6888
6888
|
});
|
|
6889
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6890
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6889
|
+
var RatingWrapper = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
6890
|
+
var RatingText = newStyled.span(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
6891
6891
|
var fontSize = _a.fontSize;
|
|
6892
6892
|
return fontSize;
|
|
6893
6893
|
});
|
|
6894
|
-
var templateObject_1$
|
|
6894
|
+
var templateObject_1$1R, templateObject_2$1s, templateObject_3$1a;
|
|
6895
6895
|
|
|
6896
6896
|
var OfferAtCartImage = function (_a) {
|
|
6897
6897
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width, height = _a.height;
|
|
@@ -6909,6 +6909,17 @@ var OfferAtCartTitle = function (_a) {
|
|
|
6909
6909
|
return jsx$1(Fragment$2, { children: content }, void 0);
|
|
6910
6910
|
};
|
|
6911
6911
|
|
|
6912
|
+
var Arrow$1 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 50;\n border-radius: 50%;\n background-color: #d4605b;\n box-shadow: 0 4px 20px 0 #00000040;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 50;\n border-radius: 50%;\n background-color: #d4605b;\n box-shadow: 0 4px 20px 0 #00000040;\n bottom: 20px;\n"])));
|
|
6913
|
+
var templateObject_1$1Q;
|
|
6914
|
+
|
|
6915
|
+
var ArrowTip$1 = function (_a) {
|
|
6916
|
+
var _b = _a.isRight, isRight = _b === void 0 ? false : _b;
|
|
6917
|
+
var theme = useTheme$1();
|
|
6918
|
+
return (jsx$1(Arrow$1, __assign$1({ style: {
|
|
6919
|
+
left: isRight ? '85%' : '12%',
|
|
6920
|
+
}, "data-testid": "arrow" }, { children: isRight ? (jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['white'].color, width: '22px' }, void 0)) : (jsx$1(Icon.Arrows.ChevronLeftVariant, { fill: theme.colors.shades['white'].color, width: '22px' }, void 0)) }), void 0));
|
|
6921
|
+
};
|
|
6922
|
+
|
|
6912
6923
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
6913
6924
|
var frequency = _a.frequency, onChange = _a.onChange;
|
|
6914
6925
|
var options = getDropdownOptions(frequency);
|
|
@@ -6938,9 +6949,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6938
6949
|
}); });
|
|
6939
6950
|
};
|
|
6940
6951
|
|
|
6941
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6942
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6943
|
-
var templateObject_1$
|
|
6952
|
+
var Benefit$1 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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"])));
|
|
6953
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6954
|
+
var templateObject_1$1P, templateObject_2$1r;
|
|
6944
6955
|
|
|
6945
6956
|
var BenefitsList = function (_a) {
|
|
6946
6957
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6951,23 +6962,23 @@ var BenefitsList = function (_a) {
|
|
|
6951
6962
|
}) }, void 0));
|
|
6952
6963
|
};
|
|
6953
6964
|
|
|
6954
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6965
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6955
6966
|
var timerColor = _a.timerColor;
|
|
6956
6967
|
return timerColor || '';
|
|
6957
6968
|
});
|
|
6958
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6969
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __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) {
|
|
6959
6970
|
var timerColor = _a.timerColor;
|
|
6960
6971
|
return timerColor || '';
|
|
6961
6972
|
});
|
|
6962
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
6973
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$19 || (templateObject_3$19 = __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) {
|
|
6963
6974
|
var theme = _a.theme;
|
|
6964
6975
|
return theme.colors.shades.white.color;
|
|
6965
6976
|
}, function (_a) {
|
|
6966
6977
|
var theme = _a.theme;
|
|
6967
6978
|
return theme.colors.shades.white.color;
|
|
6968
6979
|
});
|
|
6969
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6970
|
-
var templateObject_1$
|
|
6980
|
+
var Unit = newStyled.p(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
6981
|
+
var templateObject_1$1O, templateObject_2$1q, templateObject_3$19, templateObject_4$X;
|
|
6971
6982
|
|
|
6972
6983
|
var HRS = 'HRS';
|
|
6973
6984
|
var MIN = 'MIN';
|
|
@@ -7008,7 +7019,7 @@ var Timer = function (_a) {
|
|
|
7008
7019
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
7009
7020
|
};
|
|
7010
7021
|
|
|
7011
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
7022
|
+
var TimerContainer = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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) {
|
|
7012
7023
|
var textPosition = _a.textPosition;
|
|
7013
7024
|
return textPosition;
|
|
7014
7025
|
}, function (_a) {
|
|
@@ -7021,7 +7032,7 @@ var TimerContainer = newStyled.div(templateObject_1$1M || (templateObject_1$1M =
|
|
|
7021
7032
|
var borderRadius = _a.borderRadius;
|
|
7022
7033
|
return borderRadius || '8px';
|
|
7023
7034
|
});
|
|
7024
|
-
var templateObject_1$
|
|
7035
|
+
var templateObject_1$1N;
|
|
7025
7036
|
|
|
7026
7037
|
var getDefaultCountdown = function () {
|
|
7027
7038
|
var tomorrowDate = new Date();
|
|
@@ -7037,7 +7048,7 @@ var HurryUp = function (_a) {
|
|
|
7037
7048
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
7038
7049
|
};
|
|
7039
7050
|
|
|
7040
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
7051
|
+
var Container$1a = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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) {
|
|
7041
7052
|
var size = _a.size;
|
|
7042
7053
|
return (size ? size : '100%');
|
|
7043
7054
|
}, function (_a) {
|
|
@@ -7052,7 +7063,7 @@ var borderSize = {
|
|
|
7052
7063
|
large: '3px',
|
|
7053
7064
|
};
|
|
7054
7065
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7055
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7066
|
+
var StyledSpinner = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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) {
|
|
7056
7067
|
var size = _a.size;
|
|
7057
7068
|
return borderSize[size];
|
|
7058
7069
|
}, function (_a) {
|
|
@@ -7065,29 +7076,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1o || (templateObject_2$1o =
|
|
|
7065
7076
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7066
7077
|
return duration;
|
|
7067
7078
|
});
|
|
7068
|
-
var templateObject_1$
|
|
7079
|
+
var templateObject_1$1M, templateObject_2$1p;
|
|
7069
7080
|
|
|
7070
7081
|
var Spinner = function (_a) {
|
|
7071
7082
|
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;
|
|
7072
7083
|
return (jsx$1(Container$1a, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
7073
7084
|
};
|
|
7074
7085
|
|
|
7075
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7076
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7077
|
-
var templateObject_1$
|
|
7086
|
+
var ProgressContainer = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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); });
|
|
7087
|
+
var ProgressFiller = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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; });
|
|
7088
|
+
var templateObject_1$1L, templateObject_2$1o;
|
|
7078
7089
|
|
|
7079
7090
|
var ProgressBar$1 = function (_a) {
|
|
7080
7091
|
var progress = _a.progress, hide = _a.hide;
|
|
7081
7092
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7082
7093
|
};
|
|
7083
7094
|
|
|
7084
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
7085
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7086
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
7087
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7088
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7095
|
+
var Container$19 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7096
|
+
var HTMLVideo = newStyled.video(templateObject_2$1n || (templateObject_2$1n = __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; });
|
|
7097
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
7098
|
+
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 &:hover {\n cursor: pointer;\n }\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\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
7099
|
+
var PauseContainer = newStyled.div(templateObject_5$L || (templateObject_5$L = __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"])));
|
|
7089
7100
|
var MuteButton = newStyled.button(templateObject_6$C || (templateObject_6$C = __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"])));
|
|
7090
|
-
var templateObject_1$
|
|
7101
|
+
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18, templateObject_4$W, templateObject_5$L, templateObject_6$C;
|
|
7091
7102
|
|
|
7092
7103
|
var Video$1 = function (_a) {
|
|
7093
7104
|
var _b, _c;
|
|
@@ -7141,11 +7152,11 @@ var Video$1 = function (_a) {
|
|
|
7141
7152
|
return (jsxs$1(Container$19, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: handleOnloadedData, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7142
7153
|
};
|
|
7143
7154
|
|
|
7144
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7155
|
+
var LikeCount = newStyled.span(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"])), function (_a) {
|
|
7145
7156
|
var theme = _a.theme;
|
|
7146
7157
|
return theme.colors.shades.black.color;
|
|
7147
7158
|
});
|
|
7148
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7159
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"], ["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"])), function (_a) {
|
|
7149
7160
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7150
7161
|
return position;
|
|
7151
7162
|
}, function (_a) {
|
|
@@ -7164,7 +7175,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1l || (templateObject_2
|
|
|
7164
7175
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7165
7176
|
return boxSizing;
|
|
7166
7177
|
});
|
|
7167
|
-
var templateObject_1$
|
|
7178
|
+
var templateObject_1$1J, templateObject_2$1m;
|
|
7168
7179
|
|
|
7169
7180
|
var getStylesBySize$c = function (size) {
|
|
7170
7181
|
switch (size) {
|
|
@@ -7185,7 +7196,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7185
7196
|
};
|
|
7186
7197
|
}
|
|
7187
7198
|
};
|
|
7188
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
7199
|
+
var Container$18 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\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: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\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) {
|
|
7189
7200
|
var backgroundColor = _a.backgroundColor;
|
|
7190
7201
|
return backgroundColor;
|
|
7191
7202
|
}, function (_a) {
|
|
@@ -7228,7 +7239,7 @@ var IconButton = function (_a) {
|
|
|
7228
7239
|
var theme = useTheme();
|
|
7229
7240
|
return (jsx$1(Container$18, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
7230
7241
|
};
|
|
7231
|
-
var templateObject_1$
|
|
7242
|
+
var templateObject_1$1I;
|
|
7232
7243
|
|
|
7233
7244
|
var LikeButton = function (_a) {
|
|
7234
7245
|
var _b;
|
|
@@ -7241,11 +7252,11 @@ var LikeButton = function (_a) {
|
|
|
7241
7252
|
return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
7242
7253
|
};
|
|
7243
7254
|
|
|
7244
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7245
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7246
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7247
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7248
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7255
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
7256
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
7257
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7258
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7259
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7249
7260
|
var RegularPriceTag = function () {
|
|
7250
7261
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7251
7262
|
};
|
|
@@ -7294,7 +7305,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7294
7305
|
? finalPriceArray[0]
|
|
7295
7306
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7296
7307
|
};
|
|
7297
|
-
var templateObject_1$
|
|
7308
|
+
var templateObject_1$1H, templateObject_2$1l, templateObject_3$17, templateObject_4$V, templateObject_5$K;
|
|
7298
7309
|
|
|
7299
7310
|
var STYLES_BY_THEME = {
|
|
7300
7311
|
TheSpaDr: {
|
|
@@ -7367,10 +7378,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7367
7378
|
height: height,
|
|
7368
7379
|
});
|
|
7369
7380
|
});
|
|
7370
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7371
|
-
var Container$17 = newStyled.a(templateObject_2$
|
|
7372
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7373
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7381
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1G || (templateObject_1$1G = __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"])));
|
|
7382
|
+
var Container$17 = newStyled.a(templateObject_2$1k || (templateObject_2$1k = __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 &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\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\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7383
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7384
|
+
var Title$7 = newStyled.h2(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
7374
7385
|
var theme = _a.theme;
|
|
7375
7386
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7376
7387
|
}, function (_a) {
|
|
@@ -7421,7 +7432,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7421
7432
|
};
|
|
7422
7433
|
}
|
|
7423
7434
|
};
|
|
7424
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7435
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$J || (templateObject_5$J = __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) {
|
|
7425
7436
|
var style = _a.style;
|
|
7426
7437
|
return style.width;
|
|
7427
7438
|
});
|
|
@@ -7431,7 +7442,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$B || (templateObject_6
|
|
|
7431
7442
|
});
|
|
7432
7443
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7433
7444
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7434
|
-
var templateObject_1$
|
|
7445
|
+
var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$B, templateObject_7$v, templateObject_8$o;
|
|
7435
7446
|
|
|
7436
7447
|
var ProductItemMobile = function (_a) {
|
|
7437
7448
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7548,10 +7559,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7548
7559
|
height: height,
|
|
7549
7560
|
});
|
|
7550
7561
|
});
|
|
7551
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7552
|
-
var Container$16 = newStyled.a(templateObject_2$
|
|
7553
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7554
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7562
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1F || (templateObject_1$1F = __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; });
|
|
7563
|
+
var Container$16 = newStyled.a(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
7564
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
7565
|
+
var Title$6 = newStyled.p(templateObject_4$T || (templateObject_4$T = __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; });
|
|
7555
7566
|
var getStylesBySize$a = function (size) {
|
|
7556
7567
|
switch (size) {
|
|
7557
7568
|
case ComponentSize.Medium:
|
|
@@ -7577,7 +7588,7 @@ var getStylesBySize$a = function (size) {
|
|
|
7577
7588
|
};
|
|
7578
7589
|
}
|
|
7579
7590
|
};
|
|
7580
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7591
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$I || (templateObject_5$I = __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) {
|
|
7581
7592
|
var style = _a.style;
|
|
7582
7593
|
return style.width;
|
|
7583
7594
|
});
|
|
@@ -7659,9 +7670,9 @@ var ProductItemTK = function (_a) {
|
|
|
7659
7670
|
colorPicker.position === 'middle' &&
|
|
7660
7671
|
!colorPicker.shouldStopCardClick && 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));
|
|
7661
7672
|
};
|
|
7662
|
-
var templateObject_1$
|
|
7673
|
+
var templateObject_1$1F, templateObject_2$1j, templateObject_3$15, templateObject_4$T, templateObject_5$I, templateObject_6$A, templateObject_7$u, templateObject_8$n;
|
|
7663
7674
|
|
|
7664
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
7675
|
+
var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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"])));
|
|
7665
7676
|
function withProductGrid(ProductItemComponent, data) {
|
|
7666
7677
|
function WithProductGrid(props) {
|
|
7667
7678
|
return (jsx$1(Container$15, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -7671,7 +7682,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
7671
7682
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7672
7683
|
return WithProductGrid;
|
|
7673
7684
|
}
|
|
7674
|
-
var templateObject_1$
|
|
7685
|
+
var templateObject_1$1E;
|
|
7675
7686
|
|
|
7676
7687
|
var Collection = {
|
|
7677
7688
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7679,11 +7690,11 @@ var Collection = {
|
|
|
7679
7690
|
ProductItemTK: ProductItemTK,
|
|
7680
7691
|
};
|
|
7681
7692
|
|
|
7682
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7683
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7684
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7685
|
-
var Span = newStyled.span(templateObject_4$
|
|
7686
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7693
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7694
|
+
newStyled(lt.Label)(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7695
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
7696
|
+
var Span = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7697
|
+
var OptionsContainer = newStyled.div(templateObject_5$H || (templateObject_5$H = __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"])));
|
|
7687
7698
|
var Label$5 = function (_a) {
|
|
7688
7699
|
var label = _a.label, values = _a.values;
|
|
7689
7700
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7701,7 +7712,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7701
7712
|
Option: Option,
|
|
7702
7713
|
OptionsContainer: OptionsContainer,
|
|
7703
7714
|
});
|
|
7704
|
-
var templateObject_1$
|
|
7715
|
+
var templateObject_1$1D, templateObject_2$1i, templateObject_3$14, templateObject_4$S, templateObject_5$H;
|
|
7705
7716
|
|
|
7706
7717
|
var OneColorSelector = function (_a) {
|
|
7707
7718
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7742,21 +7753,21 @@ var OutOfStock = function (_a) {
|
|
|
7742
7753
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7743
7754
|
};
|
|
7744
7755
|
|
|
7745
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
7756
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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) {
|
|
7746
7757
|
var borderColor = _a.borderColor;
|
|
7747
7758
|
return borderColor;
|
|
7748
7759
|
}, function (_a) {
|
|
7749
7760
|
var noStock = _a.noStock;
|
|
7750
7761
|
return (noStock ? '0.4' : '1');
|
|
7751
7762
|
});
|
|
7752
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7763
|
+
var Image$2 = newStyled.img(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7753
7764
|
var PatternSelector = function (_a) {
|
|
7754
7765
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7755
7766
|
var theme = useTheme();
|
|
7756
7767
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7757
7768
|
return (jsx$1(Container$14, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7758
7769
|
};
|
|
7759
|
-
var templateObject_1$
|
|
7770
|
+
var templateObject_1$1C, templateObject_2$1h;
|
|
7760
7771
|
|
|
7761
7772
|
var renderOptions$1 = function (options, showCross) {
|
|
7762
7773
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7779,9 +7790,9 @@ var SingleColorPicker = function (_a) {
|
|
|
7779
7790
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.5rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
|
|
7780
7791
|
};
|
|
7781
7792
|
|
|
7782
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7783
|
-
var NumericTooltip = newStyled.div(templateObject_2$
|
|
7784
|
-
var templateObject_1$
|
|
7793
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\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 position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\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"])));
|
|
7794
|
+
var NumericTooltip = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"])));
|
|
7795
|
+
var templateObject_1$1B, templateObject_2$1g;
|
|
7785
7796
|
|
|
7786
7797
|
var ColorPickerWithTooltip = function (_a) {
|
|
7787
7798
|
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, className = _a.className, tooltipOptions = _a.tooltipOptions;
|
|
@@ -7828,21 +7839,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7828
7839
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7829
7840
|
};
|
|
7830
7841
|
|
|
7831
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7832
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7833
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7842
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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'); });
|
|
7843
|
+
var Col$1 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7844
|
+
var Row$2 = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __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) {
|
|
7834
7845
|
return props.rightToLeft &&
|
|
7835
7846
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7836
7847
|
});
|
|
7837
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7838
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7848
|
+
var H5 = newStyled.h5(templateObject_4$R || (templateObject_4$R = __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; });
|
|
7849
|
+
var H3 = newStyled.h3(templateObject_5$G || (templateObject_5$G = __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; });
|
|
7839
7850
|
var FreeShipping = newStyled.span(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7840
7851
|
var CrossSellCheckbox = function (_a) {
|
|
7841
7852
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7842
7853
|
var theme = useTheme();
|
|
7843
7854
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7844
7855
|
};
|
|
7845
|
-
var templateObject_1$
|
|
7856
|
+
var templateObject_1$1A, templateObject_2$1f, templateObject_3$13, templateObject_4$R, templateObject_5$G, templateObject_6$z;
|
|
7846
7857
|
|
|
7847
7858
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7848
7859
|
__proto__: null,
|
|
@@ -7871,7 +7882,7 @@ var sizeMapper = (_a = {},
|
|
|
7871
7882
|
_a[ComponentSize.XSmall] = 'small',
|
|
7872
7883
|
_a[ComponentSize.XXSmall] = 'small',
|
|
7873
7884
|
_a);
|
|
7874
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7885
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n ", "\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 ", "\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7875
7886
|
var wide = _a.wide;
|
|
7876
7887
|
return (wide ? '100%' : 'fit-content');
|
|
7877
7888
|
}, function (_a) {
|
|
@@ -7896,11 +7907,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1y || (templateObj
|
|
|
7896
7907
|
var theme = _a.theme;
|
|
7897
7908
|
return theme.colors.text.disabled;
|
|
7898
7909
|
});
|
|
7899
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7910
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7900
7911
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7901
7912
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7902
7913
|
});
|
|
7903
|
-
var templateObject_1$
|
|
7914
|
+
var templateObject_1$1z, templateObject_2$1e;
|
|
7904
7915
|
|
|
7905
7916
|
var BaseCTA = function (_a) {
|
|
7906
7917
|
var _b, _c, _d;
|
|
@@ -7991,33 +8002,33 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7991
8002
|
} }), void 0));
|
|
7992
8003
|
};
|
|
7993
8004
|
|
|
7994
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
7995
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7996
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7997
|
-
var Details = newStyled.span(templateObject_4$
|
|
8005
|
+
var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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; });
|
|
8006
|
+
var IconContainer$5 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
8007
|
+
var Text$3 = newStyled.p(templateObject_3$12 || (templateObject_3$12 = __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; });
|
|
8008
|
+
var Details = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7998
8009
|
var Note = function (_a) {
|
|
7999
8010
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
8000
8011
|
var theme = useTheme();
|
|
8001
8012
|
return (jsxs$1(Container$13, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
8002
8013
|
};
|
|
8003
|
-
var templateObject_1$
|
|
8014
|
+
var templateObject_1$1y, templateObject_2$1d, templateObject_3$12, templateObject_4$Q;
|
|
8004
8015
|
|
|
8005
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
8016
|
+
var Title$5 = newStyled.h1(templateObject_1$1x || (templateObject_1$1x = __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) {
|
|
8006
8017
|
var theme = _a.theme;
|
|
8007
8018
|
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 ");
|
|
8008
8019
|
});
|
|
8009
|
-
var Line = newStyled.div(templateObject_2$
|
|
8010
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
8020
|
+
var Line = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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; });
|
|
8021
|
+
var Row$1 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __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({
|
|
8011
8022
|
flexDirection: ['column', 'row'],
|
|
8012
8023
|
}));
|
|
8013
|
-
var Col = newStyled.div(templateObject_4$
|
|
8024
|
+
var Col = newStyled.div(templateObject_4$P || (templateObject_4$P = __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({
|
|
8014
8025
|
margin: ['0', '0 1.25rem'],
|
|
8015
8026
|
marginBottom: ['1.875rem', '0'],
|
|
8016
8027
|
alignItems: ['center', 'flex-start'],
|
|
8017
8028
|
textAlign: ['center', 'inherit'],
|
|
8018
8029
|
width: ['100%', 'inherit'],
|
|
8019
8030
|
}));
|
|
8020
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
8031
|
+
var IconContainer$4 = newStyled.div(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
8021
8032
|
marginRight: ['0', '0.438rem'],
|
|
8022
8033
|
marginBottom: ['10px', '0'],
|
|
8023
8034
|
width: ['auto', '1.5rem'],
|
|
@@ -8045,16 +8056,16 @@ var DeliveryDetails = function (_a) {
|
|
|
8045
8056
|
var theme = useTheme();
|
|
8046
8057
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
8047
8058
|
};
|
|
8048
|
-
var templateObject_1$
|
|
8059
|
+
var templateObject_1$1x, templateObject_2$1c, templateObject_3$11, templateObject_4$P, templateObject_5$F, templateObject_6$y, templateObject_7$t, templateObject_8$m;
|
|
8049
8060
|
|
|
8050
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
8061
|
+
var Backdrop = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
8051
8062
|
var top = _a.top;
|
|
8052
8063
|
return top;
|
|
8053
8064
|
}, function (_a) {
|
|
8054
8065
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
8055
8066
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
8056
8067
|
});
|
|
8057
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
8068
|
+
var Sidebar = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
8058
8069
|
var height = _a.height;
|
|
8059
8070
|
return height;
|
|
8060
8071
|
}, function (_a) {
|
|
@@ -8101,20 +8112,20 @@ var Drawer = function (_a) {
|
|
|
8101
8112
|
}, [isOpen, onClose, onOpen]);
|
|
8102
8113
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
8103
8114
|
};
|
|
8104
|
-
var templateObject_1$
|
|
8115
|
+
var templateObject_1$1w, templateObject_2$1b;
|
|
8105
8116
|
|
|
8106
8117
|
var TooltipArrow = function (_a) {
|
|
8107
8118
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8108
8119
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
8109
8120
|
};
|
|
8110
8121
|
|
|
8111
|
-
var List = newStyled.ul(templateObject_1$
|
|
8112
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8113
|
-
var DropdownWrapper = newStyled.div(templateObject_3
|
|
8114
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8115
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8122
|
+
var List = newStyled.ul(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
8123
|
+
var Item$2 = newStyled.li(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
8124
|
+
var DropdownWrapper = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
8125
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
8126
|
+
var StyledDropdown = newStyled.ul(templateObject_5$E || (templateObject_5$E = __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; });
|
|
8116
8127
|
var DropdownItem = newStyled.li(templateObject_6$x || (templateObject_6$x = __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; });
|
|
8117
|
-
var templateObject_1$
|
|
8128
|
+
var templateObject_1$1v, templateObject_2$1a, templateObject_3$10, templateObject_4$O, templateObject_5$E, templateObject_6$x;
|
|
8118
8129
|
|
|
8119
8130
|
var DropdownListIcons = function (_a) {
|
|
8120
8131
|
var items = _a.items;
|
|
@@ -8127,13 +8138,13 @@ var Dropdown = function (_a) {
|
|
|
8127
8138
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
8128
8139
|
};
|
|
8129
8140
|
|
|
8130
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8131
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
8132
|
-
var SizeLabel = newStyled.span(templateObject_3
|
|
8133
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8134
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8141
|
+
var DropdownContainer = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
8142
|
+
var DropdownLabel = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
8143
|
+
var SizeLabel = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8144
|
+
var DetailLabel = newStyled.span(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
8145
|
+
var DropdownOptions = newStyled.div(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
8135
8146
|
var DropdownOption = newStyled.div(templateObject_6$w || (templateObject_6$w = __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"])));
|
|
8136
|
-
var templateObject_1$
|
|
8147
|
+
var templateObject_1$1u, templateObject_2$19, templateObject_3$$, templateObject_4$N, templateObject_5$D, templateObject_6$w;
|
|
8137
8148
|
|
|
8138
8149
|
var SizeDropdown = function (_a) {
|
|
8139
8150
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8156,15 +8167,15 @@ var SizeDropdown = function (_a) {
|
|
|
8156
8167
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
8157
8168
|
};
|
|
8158
8169
|
|
|
8159
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8160
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$
|
|
8161
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8170
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
8171
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\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: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\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; });
|
|
8172
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$_ || (templateObject_3$_ = __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: ", ";\n right: ", ";\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 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: ", ";\n right: ", ";\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 overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
8162
8173
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8163
8174
|
}, function (props) {
|
|
8164
8175
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8165
8176
|
});
|
|
8166
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8167
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8177
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
8178
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
8168
8179
|
var DropdownDialog = function (_a) {
|
|
8169
8180
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
8170
8181
|
var theme = useTheme$1();
|
|
@@ -8173,7 +8184,7 @@ var DropdownDialog = function (_a) {
|
|
|
8173
8184
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8174
8185
|
}) }), void 0) }), void 0));
|
|
8175
8186
|
};
|
|
8176
|
-
var templateObject_1$
|
|
8187
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$_, templateObject_4$M, templateObject_5$C;
|
|
8177
8188
|
|
|
8178
8189
|
function FilteringDropdown(_a) {
|
|
8179
8190
|
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;
|
|
@@ -8269,33 +8280,33 @@ var SelectorSecondary = function (_a) {
|
|
|
8269
8280
|
} }), id: id }, void 0));
|
|
8270
8281
|
};
|
|
8271
8282
|
|
|
8272
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8273
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8274
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8275
|
-
var Container$12 = newStyled.div(templateObject_4$
|
|
8283
|
+
var Title$4 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
8284
|
+
var P$3 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __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; });
|
|
8285
|
+
var ArrowContainer = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8286
|
+
var Container$12 = newStyled.div(templateObject_4$L || (templateObject_4$L = __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'); });
|
|
8276
8287
|
var Accordion = function (_a) {
|
|
8277
8288
|
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;
|
|
8278
8289
|
var theme = useTheme();
|
|
8279
8290
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8280
8291
|
return (jsxs$1(Container$12, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8281
8292
|
};
|
|
8282
|
-
var templateObject_1$
|
|
8293
|
+
var templateObject_1$1s, templateObject_2$17, templateObject_3$Z, templateObject_4$L;
|
|
8283
8294
|
|
|
8284
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8285
|
-
var Header$
|
|
8286
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8287
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8288
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8295
|
+
var SectionContent = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
8296
|
+
var Header$4 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
8297
|
+
var MobileHeader = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
8298
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
8299
|
+
var H4 = newStyled.h4(templateObject_5$B || (templateObject_5$B = __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; });
|
|
8289
8300
|
var FilterLink = newStyled.a(templateObject_6$v || (templateObject_6$v = __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; });
|
|
8290
8301
|
var OptionContainer = newStyled.div(templateObject_7$s || (templateObject_7$s = __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'); });
|
|
8291
8302
|
var ClearAll = newStyled.span(templateObject_8$l || (templateObject_8$l = __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; });
|
|
8292
8303
|
var MobileFooter = newStyled.div(templateObject_9$d || (templateObject_9$d = __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"])));
|
|
8293
8304
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __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"])));
|
|
8294
|
-
var templateObject_1$
|
|
8305
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$Y, templateObject_4$K, templateObject_5$B, templateObject_6$v, templateObject_7$s, templateObject_8$l, templateObject_9$d, templateObject_10$b;
|
|
8295
8306
|
|
|
8296
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8297
|
-
var LI = newStyled.li(templateObject_2$
|
|
8298
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8307
|
+
var UL = newStyled.ul(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
8308
|
+
var LI = newStyled.li(templateObject_2$15 || (templateObject_2$15 = __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; });
|
|
8309
|
+
var CloseIconContainer = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
8299
8310
|
var Tags = function (_a) {
|
|
8300
8311
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8301
8312
|
var theme = useTheme();
|
|
@@ -8303,7 +8314,7 @@ var Tags = function (_a) {
|
|
|
8303
8314
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
8304
8315
|
}) }), void 0));
|
|
8305
8316
|
};
|
|
8306
|
-
var templateObject_1$
|
|
8317
|
+
var templateObject_1$1q, templateObject_2$15, templateObject_3$X;
|
|
8307
8318
|
|
|
8308
8319
|
var Filters = function (_a) {
|
|
8309
8320
|
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;
|
|
@@ -8403,7 +8414,7 @@ var Filters = function (_a) {
|
|
|
8403
8414
|
}
|
|
8404
8415
|
return itemsSelectedNumberText;
|
|
8405
8416
|
};
|
|
8406
|
-
return (jsxs$1(Fragment$2, { children: [!isMobile ? (jsx$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxs$1(Fragment$2, { children: [jsxs$1(Header$
|
|
8417
|
+
return (jsxs$1(Fragment$2, { children: [!isMobile ? (jsx$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxs$1(Fragment$2, { children: [jsxs$1(Header$4, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) {
|
|
8407
8418
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
8408
8419
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
8409
8420
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
@@ -8441,8 +8452,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8441
8452
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
8442
8453
|
};
|
|
8443
8454
|
|
|
8444
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8445
|
-
var Container$11 = newStyled.div(templateObject_2$
|
|
8455
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
8456
|
+
var Container$11 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
8446
8457
|
var FitGuarantee = function (_a) {
|
|
8447
8458
|
var _b;
|
|
8448
8459
|
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;
|
|
@@ -8460,10 +8471,10 @@ var FitGuarantee = function (_a) {
|
|
|
8460
8471
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8461
8472
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
8462
8473
|
};
|
|
8463
|
-
var templateObject_1$
|
|
8474
|
+
var templateObject_1$1p, templateObject_2$14;
|
|
8464
8475
|
|
|
8465
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
8466
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8476
|
+
var Container$10 = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
8477
|
+
var P$2 = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __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; });
|
|
8467
8478
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8468
8479
|
border: 'none',
|
|
8469
8480
|
background: 'transparent',
|
|
@@ -8478,7 +8489,7 @@ var FitPredictor = function (_a) {
|
|
|
8478
8489
|
var theme = useTheme();
|
|
8479
8490
|
return (jsxs(Container$10, __assign$1({ theme: theme }, { children: [jsx(Container$10, { 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));
|
|
8480
8491
|
};
|
|
8481
|
-
var templateObject_1$
|
|
8492
|
+
var templateObject_1$1o, templateObject_2$13;
|
|
8482
8493
|
|
|
8483
8494
|
var Button$8 = newStyled.button(function () { return ({
|
|
8484
8495
|
background: 'transparent',
|
|
@@ -12722,14 +12733,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12722
12733
|
return Slider;
|
|
12723
12734
|
}(React__default.Component);
|
|
12724
12735
|
|
|
12725
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12736
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
12726
12737
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12727
12738
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12728
12739
|
}, function (_a) {
|
|
12729
12740
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12730
12741
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12731
12742
|
});
|
|
12732
|
-
var templateObject_1$
|
|
12743
|
+
var templateObject_1$1n;
|
|
12733
12744
|
|
|
12734
12745
|
var getStylesBySize$8 = function (size) {
|
|
12735
12746
|
// rem units
|
|
@@ -12788,7 +12799,7 @@ var SliderNavigation = function (_a) {
|
|
|
12788
12799
|
} }, { 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));
|
|
12789
12800
|
};
|
|
12790
12801
|
|
|
12791
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12802
|
+
var Image$1 = newStyled.img(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
12792
12803
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12793
12804
|
return borderRadiusVariant &&
|
|
12794
12805
|
"\n border-radius: 20px;\n ";
|
|
@@ -12806,7 +12817,7 @@ var Image$1 = newStyled.img(templateObject_1$1l || (templateObject_1$1l = __make
|
|
|
12806
12817
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12807
12818
|
: 'inherit';
|
|
12808
12819
|
});
|
|
12809
|
-
var templateObject_1$
|
|
12820
|
+
var templateObject_1$1m;
|
|
12810
12821
|
|
|
12811
12822
|
var ImageSmallPreview = function (_a) {
|
|
12812
12823
|
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;
|
|
@@ -12814,9 +12825,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12814
12825
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12815
12826
|
};
|
|
12816
12827
|
|
|
12817
|
-
var horizontalStyles = css(templateObject_1$
|
|
12818
|
-
var verticalStyles = css(templateObject_2$
|
|
12819
|
-
var Container$$ = newStyled.div(templateObject_3$
|
|
12828
|
+
var horizontalStyles = css(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
12829
|
+
var verticalStyles = css(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
12830
|
+
var Container$$ = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12820
12831
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12821
12832
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12822
12833
|
}, function (_a) {
|
|
@@ -12827,12 +12838,12 @@ var Container$$ = newStyled.div(templateObject_3$V || (templateObject_3$V = __ma
|
|
|
12827
12838
|
return hasOverflowArrows &&
|
|
12828
12839
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12829
12840
|
});
|
|
12830
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12831
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12841
|
+
var Button$7 = newStyled.button(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
12842
|
+
var ArrowsContainer = newStyled.div(templateObject_5$A || (templateObject_5$A = __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"])));
|
|
12832
12843
|
var ArrowBaseStyles = newStyled.div(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
12833
12844
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$r || (templateObject_7$r = __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"])));
|
|
12834
12845
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$k || (templateObject_8$k = __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"])));
|
|
12835
|
-
var templateObject_1$
|
|
12846
|
+
var templateObject_1$1l, templateObject_2$12, templateObject_3$W, templateObject_4$J, templateObject_5$A, templateObject_6$u, templateObject_7$r, templateObject_8$k;
|
|
12836
12847
|
|
|
12837
12848
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12838
12849
|
var loading = 'eager';
|
|
@@ -14460,23 +14471,23 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14460
14471
|
afterZoomOut: PropTypes.func
|
|
14461
14472
|
} : {};
|
|
14462
14473
|
|
|
14463
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
14474
|
+
var Container$_ = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
14464
14475
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14465
14476
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14466
14477
|
});
|
|
14467
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14478
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14468
14479
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14469
14480
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14470
14481
|
}, function (_a) {
|
|
14471
14482
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14472
14483
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14473
14484
|
});
|
|
14474
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14485
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14475
14486
|
var isCTAHidden = _a.isCTAHidden;
|
|
14476
14487
|
return (isCTAHidden ? '60px' : '120px');
|
|
14477
14488
|
});
|
|
14478
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14479
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14489
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14490
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14480
14491
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$t || (templateObject_6$t = __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"])));
|
|
14481
14492
|
var ImageStyled = newStyled(Image$3)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14482
14493
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -14486,7 +14497,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$j || (temp
|
|
|
14486
14497
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14487
14498
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14488
14499
|
});
|
|
14489
|
-
var templateObject_1$
|
|
14500
|
+
var templateObject_1$1k, templateObject_2$11, templateObject_3$V, templateObject_4$I, templateObject_5$z, templateObject_6$t, templateObject_7$q, templateObject_8$j;
|
|
14490
14501
|
|
|
14491
14502
|
var ImageProductSlide$1 = function (_a) {
|
|
14492
14503
|
var _b;
|
|
@@ -14501,8 +14512,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14501
14512
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14502
14513
|
};
|
|
14503
14514
|
|
|
14504
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
14505
|
-
var templateObject_1$
|
|
14515
|
+
var Container$Z = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
14516
|
+
var templateObject_1$1j;
|
|
14506
14517
|
|
|
14507
14518
|
var getInitialIndex = function (images, selectedValue) {
|
|
14508
14519
|
if (selectedValue) {
|
|
@@ -14531,7 +14542,7 @@ var ProductGallery = function (_a) {
|
|
|
14531
14542
|
return (jsxs$1(Container$Z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
14532
14543
|
};
|
|
14533
14544
|
|
|
14534
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14545
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1i || (templateObject_1$1i = __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; });
|
|
14535
14546
|
var AmazonButton = function (_a) {
|
|
14536
14547
|
var onClick = _a.onClick;
|
|
14537
14548
|
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -14540,7 +14551,7 @@ var PaypalButton = function (_a) {
|
|
|
14540
14551
|
var onClick = _a.onClick;
|
|
14541
14552
|
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14542
14553
|
};
|
|
14543
|
-
var templateObject_1$
|
|
14554
|
+
var templateObject_1$1i;
|
|
14544
14555
|
|
|
14545
14556
|
var Container$Y = newStyled.div(function (props) { return ({
|
|
14546
14557
|
height: 'auto',
|
|
@@ -14595,9 +14606,9 @@ var IconsWithTitle = function (_a) {
|
|
|
14595
14606
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$Y, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14596
14607
|
};
|
|
14597
14608
|
|
|
14598
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
14599
|
-
var ImageContainer$4 = newStyled.div(templateObject_2
|
|
14600
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14609
|
+
var Container$X = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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'); });
|
|
14610
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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'); });
|
|
14611
|
+
var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14601
14612
|
var titlePosition = _a.titlePosition;
|
|
14602
14613
|
return titlePosition == 'center' &&
|
|
14603
14614
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14607,13 +14618,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14607
14618
|
var isMobile = useWindowDimensions().isMobile;
|
|
14608
14619
|
return (jsxs$1(Container$X, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14609
14620
|
};
|
|
14610
|
-
var templateObject_1$
|
|
14621
|
+
var templateObject_1$1h, templateObject_2$10, templateObject_3$U;
|
|
14611
14622
|
|
|
14612
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14623
|
+
var Label$4 = newStyled.span(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
14613
14624
|
var color = _a.color;
|
|
14614
14625
|
return color;
|
|
14615
14626
|
});
|
|
14616
|
-
var MandatoryIcon = newStyled.span(templateObject_2
|
|
14627
|
+
var MandatoryIcon = newStyled.span(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14617
14628
|
var color = _a.color;
|
|
14618
14629
|
return color;
|
|
14619
14630
|
});
|
|
@@ -14622,7 +14633,7 @@ var InputLabel = function (_a) {
|
|
|
14622
14633
|
var theme = useTheme();
|
|
14623
14634
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14624
14635
|
};
|
|
14625
|
-
var templateObject_1$
|
|
14636
|
+
var templateObject_1$1g, templateObject_2$$;
|
|
14626
14637
|
|
|
14627
14638
|
var containerByStatus = function (theme, status) {
|
|
14628
14639
|
if (status === InputValidationType.Valid)
|
|
@@ -14631,12 +14642,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14631
14642
|
return theme.colors.semantic.urgent.color;
|
|
14632
14643
|
return '';
|
|
14633
14644
|
};
|
|
14634
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
14645
|
+
var Container$W = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14635
14646
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14636
14647
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14637
14648
|
});
|
|
14638
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14639
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14649
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
14650
|
+
var StyledInput = newStyled.input(templateObject_3$T || (templateObject_3$T = __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) {
|
|
14640
14651
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14641
14652
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14642
14653
|
}, function (_a) {
|
|
@@ -14691,11 +14702,11 @@ var StyledInput = newStyled.input(templateObject_3$S || (templateObject_3$S = __
|
|
|
14691
14702
|
return hasValue &&
|
|
14692
14703
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14693
14704
|
});
|
|
14694
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14705
|
+
var InputWrapper = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14695
14706
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14696
14707
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14697
14708
|
});
|
|
14698
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14709
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$y || (templateObject_5$y = __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) {
|
|
14699
14710
|
var theme = _a.theme;
|
|
14700
14711
|
return theme.component.input.placeholderColor;
|
|
14701
14712
|
}, function (_a) {
|
|
@@ -14709,7 +14720,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$x || (templateObject_5
|
|
|
14709
14720
|
return theme.component.input.lineHeight;
|
|
14710
14721
|
});
|
|
14711
14722
|
var ClearInput = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
14712
|
-
var templateObject_1$
|
|
14723
|
+
var templateObject_1$1f, templateObject_2$_, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$s;
|
|
14713
14724
|
|
|
14714
14725
|
var BaseInput = function (_a) {
|
|
14715
14726
|
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, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14754,11 +14765,11 @@ var Button$6 = function (_a) {
|
|
|
14754
14765
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14755
14766
|
};
|
|
14756
14767
|
|
|
14757
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
14768
|
+
var Container$V = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
14758
14769
|
var theme = _a.theme;
|
|
14759
14770
|
return theme.component.inputCustom.input.borderRadius;
|
|
14760
14771
|
});
|
|
14761
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14772
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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) {
|
|
14762
14773
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14763
14774
|
return defaultRounded
|
|
14764
14775
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14775,21 +14786,21 @@ var Custom = function (_a) {
|
|
|
14775
14786
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14776
14787
|
return (jsx$1(Container$V, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14777
14788
|
};
|
|
14778
|
-
var templateObject_1$
|
|
14789
|
+
var templateObject_1$1e, templateObject_2$Z;
|
|
14779
14790
|
|
|
14780
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14791
|
+
var SuccessContainer = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14781
14792
|
var size = _a.size;
|
|
14782
14793
|
return (size === 'small' ? '36px' : '');
|
|
14783
14794
|
});
|
|
14784
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14785
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14795
|
+
var SuccessMessage = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
14796
|
+
var SuccessText = newStyled.span(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
14786
14797
|
var Success = function (_a) {
|
|
14787
14798
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14788
14799
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14789
14800
|
};
|
|
14790
|
-
var templateObject_1$
|
|
14801
|
+
var templateObject_1$1d, templateObject_2$Y, templateObject_3$S;
|
|
14791
14802
|
|
|
14792
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14803
|
+
var ButtonContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
14793
14804
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14794
14805
|
return status === InputValidationType.Empty &&
|
|
14795
14806
|
type === 'primary' &&
|
|
@@ -14806,16 +14817,16 @@ var BasePlusButton = function (_a) {
|
|
|
14806
14817
|
}
|
|
14807
14818
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14808
14819
|
};
|
|
14809
|
-
var templateObject_1$
|
|
14820
|
+
var templateObject_1$1c;
|
|
14810
14821
|
|
|
14811
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
14812
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14822
|
+
var Container$U = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14823
|
+
var IconContainer$3 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
14813
14824
|
var BasePlusIcon = function (_a) {
|
|
14814
14825
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14815
14826
|
var theme = useTheme();
|
|
14816
14827
|
return (jsx$1(Container$U, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14817
14828
|
};
|
|
14818
|
-
var templateObject_1$
|
|
14829
|
+
var templateObject_1$1b, templateObject_2$X;
|
|
14819
14830
|
|
|
14820
14831
|
var Input$3 = {
|
|
14821
14832
|
Simple: BaseInput,
|
|
@@ -14955,17 +14966,17 @@ var Portal = function (_a) {
|
|
|
14955
14966
|
var visibleStyle = function (_a) {
|
|
14956
14967
|
var opened = _a.opened;
|
|
14957
14968
|
return opened
|
|
14958
|
-
? css(templateObject_1$
|
|
14969
|
+
? css(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14959
14970
|
};
|
|
14960
14971
|
var transformStyle = function (_a) {
|
|
14961
14972
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14962
14973
|
return opened
|
|
14963
|
-
? css(templateObject_3$
|
|
14974
|
+
? css(templateObject_3$R || (templateObject_3$R = __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$G || (templateObject_4$G = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14964
14975
|
};
|
|
14965
14976
|
var Container$T = newStyled.div(templateObject_6$r || (templateObject_6$r = __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) {
|
|
14966
14977
|
var width = _a.width;
|
|
14967
14978
|
return width
|
|
14968
|
-
? css(templateObject_5$
|
|
14979
|
+
? css(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14969
14980
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14970
14981
|
});
|
|
14971
14982
|
}, visibleStyle, transformStyle);
|
|
@@ -15010,7 +15021,7 @@ var useModal = function (id) {
|
|
|
15010
15021
|
close: close,
|
|
15011
15022
|
}); }, [close, open, opened]);
|
|
15012
15023
|
};
|
|
15013
|
-
var templateObject_1$
|
|
15024
|
+
var templateObject_1$1a, templateObject_2$W, templateObject_3$R, templateObject_4$G, templateObject_5$x, templateObject_6$r, templateObject_7$p;
|
|
15014
15025
|
|
|
15015
15026
|
var htmlReactParser = {exports: {}};
|
|
15016
15027
|
|
|
@@ -18791,7 +18802,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18791
18802
|
HTMLReactParser$1.attributesToProps;
|
|
18792
18803
|
HTMLReactParser$1.Element;
|
|
18793
18804
|
|
|
18794
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18805
|
+
var Bar$1 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
18795
18806
|
var height = _a.height;
|
|
18796
18807
|
return height || '0.5rem';
|
|
18797
18808
|
}, function (_a) {
|
|
@@ -18843,7 +18854,7 @@ var Container$S = newStyled.div(function (_a) {
|
|
|
18843
18854
|
background: backgroundColor,
|
|
18844
18855
|
});
|
|
18845
18856
|
});
|
|
18846
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18857
|
+
var MessageContainer = newStyled.div(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18847
18858
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18848
18859
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18849
18860
|
};
|
|
@@ -18874,25 +18885,25 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18874
18885
|
};
|
|
18875
18886
|
return (jsxs$1(Container$S, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18876
18887
|
};
|
|
18877
|
-
var templateObject_1$
|
|
18888
|
+
var templateObject_1$19, templateObject_2$V;
|
|
18878
18889
|
|
|
18879
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
18890
|
+
var Container$R = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
18880
18891
|
var theme = _a.theme;
|
|
18881
18892
|
return theme.component.orderBar.backgroundColor;
|
|
18882
18893
|
});
|
|
18883
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18894
|
+
var H1 = newStyled.h1(templateObject_2$U || (templateObject_2$U = __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; });
|
|
18884
18895
|
var OrderBar = function (_a) {
|
|
18885
18896
|
var message = _a.message, color = _a.color;
|
|
18886
18897
|
var theme = useTheme();
|
|
18887
18898
|
return (jsxs$1(Container$R, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18888
18899
|
};
|
|
18889
|
-
var templateObject_1$
|
|
18900
|
+
var templateObject_1$18, templateObject_2$U;
|
|
18890
18901
|
|
|
18891
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
18892
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18893
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18894
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18895
|
-
var Check = newStyled.div(templateObject_5$
|
|
18902
|
+
var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
18903
|
+
var Card$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
18904
|
+
var Tag$1 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
18905
|
+
var Label$3 = newStyled.div(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
18906
|
+
var Check = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
18896
18907
|
var IconContainer$2 = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
18897
18908
|
var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o = __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"])));
|
|
18898
18909
|
var DiscountContainer = newStyled.div(templateObject_8$i || (templateObject_8$i = __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"])));
|
|
@@ -18925,14 +18936,14 @@ var PackCard = function (_a) {
|
|
|
18925
18936
|
currency: currencyCode || 'USD',
|
|
18926
18937
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18927
18938
|
};
|
|
18928
|
-
var templateObject_1$
|
|
18939
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$q, templateObject_7$o, templateObject_8$i;
|
|
18929
18940
|
|
|
18930
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
18931
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18932
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18941
|
+
var Container$P = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
18942
|
+
var IconContainer$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
18943
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18933
18944
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18934
18945
|
}));
|
|
18935
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18946
|
+
var PageNumber = newStyled.span(templateObject_4$E || (templateObject_4$E = __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) {
|
|
18936
18947
|
var bold = _a.bold;
|
|
18937
18948
|
return (bold ? '700' : '500');
|
|
18938
18949
|
}, function (_a) {
|
|
@@ -18949,7 +18960,7 @@ var PageNumber = newStyled.span(templateObject_4$D || (templateObject_4$D = __ma
|
|
|
18949
18960
|
var background = _a.background;
|
|
18950
18961
|
return background || 'unset';
|
|
18951
18962
|
});
|
|
18952
|
-
var templateObject_1$
|
|
18963
|
+
var templateObject_1$16, templateObject_2$S, templateObject_3$P, templateObject_4$E;
|
|
18953
18964
|
|
|
18954
18965
|
var Pagination = function (_a) {
|
|
18955
18966
|
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;
|
|
@@ -19014,7 +19025,7 @@ var PaginatorBlog = function (_a) {
|
|
|
19014
19025
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
19015
19026
|
};
|
|
19016
19027
|
|
|
19017
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
19028
|
+
var Container$O = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
19018
19029
|
var width = _a.width;
|
|
19019
19030
|
return width;
|
|
19020
19031
|
}, function (_a) {
|
|
@@ -19032,12 +19043,12 @@ var PaymentMethod = function (_a) {
|
|
|
19032
19043
|
var theme = useTheme();
|
|
19033
19044
|
return (jsx$1(Container$O, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
19034
19045
|
};
|
|
19035
|
-
var templateObject_1$
|
|
19046
|
+
var templateObject_1$15;
|
|
19036
19047
|
|
|
19037
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
19048
|
+
var Container$N = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
19038
19049
|
var IMAGE_WIDTH$1 = '63px';
|
|
19039
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19040
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19050
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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$1);
|
|
19051
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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({
|
|
19041
19052
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19042
19053
|
}), IMAGE_WIDTH$1);
|
|
19043
19054
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19060,7 +19071,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19060
19071
|
margin: margin,
|
|
19061
19072
|
});
|
|
19062
19073
|
});
|
|
19063
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19074
|
+
var PriceContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = __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) {
|
|
19064
19075
|
var withTag = _a.withTag; _a.theme;
|
|
19065
19076
|
return withTag
|
|
19066
19077
|
? mediaQueries({
|
|
@@ -19069,7 +19080,7 @@ var PriceContainer = newStyled.div(templateObject_4$C || (templateObject_4$C = _
|
|
|
19069
19080
|
})
|
|
19070
19081
|
: 'justify-content: end';
|
|
19071
19082
|
});
|
|
19072
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19083
|
+
var Quantity = newStyled.div(templateObject_5$v || (templateObject_5$v = __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"])));
|
|
19073
19084
|
var StyledSpan = newStyled.span(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19074
19085
|
var Gift = newStyled.span(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
19075
19086
|
var theme = _a.theme;
|
|
@@ -19081,7 +19092,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19081
19092
|
var theme = useTheme();
|
|
19082
19093
|
return (jsxs$1(Container$N, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
19083
19094
|
};
|
|
19084
|
-
var templateObject_1$
|
|
19095
|
+
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$p, templateObject_7$n;
|
|
19085
19096
|
|
|
19086
19097
|
var P$1 = newStyled.p(function (_a) {
|
|
19087
19098
|
var color = _a.color;
|
|
@@ -19095,7 +19106,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19095
19106
|
margin: '0.938rem 4.188rem',
|
|
19096
19107
|
});
|
|
19097
19108
|
});
|
|
19098
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19109
|
+
var Bar = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
19099
19110
|
var height = _a.height;
|
|
19100
19111
|
return height || '0.5rem';
|
|
19101
19112
|
}, function (_a) {
|
|
@@ -19140,12 +19151,12 @@ var ProgressBar = function (_a) {
|
|
|
19140
19151
|
var theme = useTheme();
|
|
19141
19152
|
return (jsxs$1(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19142
19153
|
};
|
|
19143
|
-
var templateObject_1$
|
|
19154
|
+
var templateObject_1$13;
|
|
19144
19155
|
|
|
19145
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
19146
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19147
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19148
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19156
|
+
var Container$L = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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; });
|
|
19157
|
+
var Item$1 = newStyled.span(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
19158
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
19159
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$C || (templateObject_4$C = __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)'; });
|
|
19149
19160
|
var QuantityPicker = function (_a) {
|
|
19150
19161
|
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;
|
|
19151
19162
|
var theme = useTheme();
|
|
@@ -19170,7 +19181,7 @@ var QuantityPicker = function (_a) {
|
|
|
19170
19181
|
}, [value, clamp]);
|
|
19171
19182
|
return (jsxs$1(Container$L, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19172
19183
|
};
|
|
19173
|
-
var templateObject_1$
|
|
19184
|
+
var templateObject_1$12, templateObject_2$Q, templateObject_3$N, templateObject_4$C;
|
|
19174
19185
|
|
|
19175
19186
|
/* base styles & size variants */
|
|
19176
19187
|
var CustomRadioStyles$1 = {
|
|
@@ -19239,9 +19250,9 @@ var ContainerStyles$1 = {
|
|
|
19239
19250
|
},
|
|
19240
19251
|
};
|
|
19241
19252
|
|
|
19242
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19253
|
+
var Wrapper$3 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19243
19254
|
var Container$K = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19244
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19255
|
+
var Input$2 = newStyled.input(templateObject_2$P || (templateObject_2$P = __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) {
|
|
19245
19256
|
var disabled = _a.disabled;
|
|
19246
19257
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19247
19258
|
});
|
|
@@ -19249,7 +19260,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19249
19260
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19250
19261
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19251
19262
|
]; });
|
|
19252
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19263
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
19253
19264
|
var RadioPrimary = function (_a) {
|
|
19254
19265
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19255
19266
|
var theme = useTheme();
|
|
@@ -19259,7 +19270,7 @@ var RadioPrimary = function (_a) {
|
|
|
19259
19270
|
};
|
|
19260
19271
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$K, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19261
19272
|
};
|
|
19262
|
-
var templateObject_1$
|
|
19273
|
+
var templateObject_1$11, templateObject_2$P, templateObject_3$M;
|
|
19263
19274
|
|
|
19264
19275
|
var RadioGroupInput = function (_a) {
|
|
19265
19276
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19338,9 +19349,9 @@ var ContainerStyles = {
|
|
|
19338
19349
|
},
|
|
19339
19350
|
};
|
|
19340
19351
|
|
|
19341
|
-
var Wrapper$2 = newStyled.div(templateObject_1
|
|
19352
|
+
var Wrapper$2 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
19342
19353
|
var Container$J = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19343
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19354
|
+
var Input$1 = newStyled.input(templateObject_2$O || (templateObject_2$O = __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) {
|
|
19344
19355
|
var disabled = _a.disabled;
|
|
19345
19356
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19346
19357
|
});
|
|
@@ -19348,7 +19359,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19348
19359
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19349
19360
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19350
19361
|
]; });
|
|
19351
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19362
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19352
19363
|
var theme = _a.theme;
|
|
19353
19364
|
return theme.component.radio.textSize;
|
|
19354
19365
|
}, function (_a) {
|
|
@@ -19364,7 +19375,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19364
19375
|
};
|
|
19365
19376
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$J, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19366
19377
|
};
|
|
19367
|
-
var templateObject_1
|
|
19378
|
+
var templateObject_1$10, templateObject_2$O, templateObject_3$L;
|
|
19368
19379
|
|
|
19369
19380
|
var ClubRadioGroupInput = function (_a) {
|
|
19370
19381
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19392,11 +19403,11 @@ function formatDate(date, format) {
|
|
|
19392
19403
|
}
|
|
19393
19404
|
}
|
|
19394
19405
|
|
|
19395
|
-
var Container$I = newStyled.div(templateObject_1
|
|
19396
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19397
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19398
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19399
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19406
|
+
var Container$I = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
19407
|
+
var Content$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
19408
|
+
var StarsContent = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19409
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
19410
|
+
var DateText$1 = newStyled.span(templateObject_5$u || (templateObject_5$u = __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"])));
|
|
19400
19411
|
var ReviewerName$1 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
19401
19412
|
var VerifiedText = newStyled.h1(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
19402
19413
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
@@ -19433,15 +19444,15 @@ var Review$1 = function (_a) {
|
|
|
19433
19444
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$I, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19434
19445
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19435
19446
|
};
|
|
19436
|
-
var templateObject_1
|
|
19447
|
+
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$B, templateObject_5$u, templateObject_6$o, templateObject_7$m, templateObject_8$h, templateObject_9$c, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19437
19448
|
|
|
19438
19449
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19439
19450
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19440
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
19441
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19442
|
-
var Content = newStyled.div(templateObject_3$
|
|
19443
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19444
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19451
|
+
var Container$H = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
19452
|
+
var Heading = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
19453
|
+
var Content = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19454
|
+
var ReviewContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19455
|
+
var DateText = newStyled.span(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
19445
19456
|
var VariantText = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
19446
19457
|
var ReviewerName = newStyled.h2(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
19447
19458
|
var ReviewTitle = newStyled.h3(templateObject_8$g || (templateObject_8$g = __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"])));
|
|
@@ -19489,13 +19500,13 @@ var Review = function (_a) {
|
|
|
19489
19500
|
: description,
|
|
19490
19501
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19491
19502
|
};
|
|
19492
|
-
var templateObject_1$
|
|
19503
|
+
var templateObject_1$_, templateObject_2$M, templateObject_3$J, templateObject_4$A, templateObject_5$t, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19493
19504
|
|
|
19494
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
19495
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19496
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19497
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19498
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19505
|
+
var Container$G = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
19506
|
+
var ReviewsContainer = newStyled.div(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
19507
|
+
var ReviewsCount = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
19508
|
+
var ReviewsStars = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
19509
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
19499
19510
|
var ReviewsImages = newStyled.div(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
19500
19511
|
var SummaryItem = newStyled.div(templateObject_7$k || (templateObject_7$k = __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) {
|
|
19501
19512
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19507,23 +19518,23 @@ var ReviewsHeader = function (_a) {
|
|
|
19507
19518
|
var theme = useTheme();
|
|
19508
19519
|
return (jsxs$1(Container$G, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19509
19520
|
};
|
|
19510
|
-
var templateObject_1$
|
|
19521
|
+
var templateObject_1$Z, templateObject_2$L, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$m, templateObject_7$k;
|
|
19511
19522
|
|
|
19512
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
19513
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19523
|
+
var Container$F = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
19524
|
+
var Text$1 = newStyled.p(templateObject_2$K || (templateObject_2$K = __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; });
|
|
19514
19525
|
var ScrollToTop = function (_a) {
|
|
19515
19526
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19516
19527
|
var theme = useTheme();
|
|
19517
19528
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19518
19529
|
return (jsxs$1(Container$F, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19519
19530
|
};
|
|
19520
|
-
var templateObject_1$
|
|
19531
|
+
var templateObject_1$Y, templateObject_2$K;
|
|
19521
19532
|
|
|
19522
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19533
|
+
var Button$5 = newStyled.button(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"])), mediaQueries({
|
|
19523
19534
|
right: ['1rem', '7.75rem'],
|
|
19524
19535
|
top: ['0.75rem', '0.75rem'],
|
|
19525
19536
|
}));
|
|
19526
|
-
var templateObject_1$
|
|
19537
|
+
var templateObject_1$X;
|
|
19527
19538
|
|
|
19528
19539
|
var ClearButton = function (_a) {
|
|
19529
19540
|
var onClick = _a.onClick;
|
|
@@ -19542,7 +19553,7 @@ var Footer = function (_a) {
|
|
|
19542
19553
|
return (jsx$1(Container$E, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19543
19554
|
};
|
|
19544
19555
|
|
|
19545
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
19556
|
+
var Container$D = 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({
|
|
19546
19557
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19547
19558
|
}));
|
|
19548
19559
|
var Description = newStyled.div({
|
|
@@ -19556,7 +19567,7 @@ var Description = newStyled.div({
|
|
|
19556
19567
|
textAlign: 'start',
|
|
19557
19568
|
},
|
|
19558
19569
|
});
|
|
19559
|
-
var templateObject_1$
|
|
19570
|
+
var templateObject_1$W;
|
|
19560
19571
|
|
|
19561
19572
|
var ProductItem = function (_a) {
|
|
19562
19573
|
var _b;
|
|
@@ -19569,7 +19580,7 @@ var OptionsList = newStyled.ul({
|
|
|
19569
19580
|
margin: '0px',
|
|
19570
19581
|
padding: '0px',
|
|
19571
19582
|
});
|
|
19572
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19583
|
+
var OptionItem = 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({
|
|
19573
19584
|
padding: [0, '0rem 1rem'],
|
|
19574
19585
|
borderRadius: [0, '0.5rem'],
|
|
19575
19586
|
}));
|
|
@@ -19581,20 +19592,20 @@ var Anchor = newStyled.a({
|
|
|
19581
19592
|
padding: 0,
|
|
19582
19593
|
textDecoration: 'none',
|
|
19583
19594
|
});
|
|
19584
|
-
var Container$C = newStyled.div(templateObject_2$
|
|
19595
|
+
var Container$C = newStyled.div(templateObject_2$J || (templateObject_2$J = __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({
|
|
19585
19596
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19586
19597
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19587
19598
|
borderRadius: ['0', '0.5rem'],
|
|
19588
19599
|
}));
|
|
19589
|
-
var Header$
|
|
19600
|
+
var Header$3 = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19590
19601
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19591
19602
|
}));
|
|
19592
|
-
var templateObject_1$
|
|
19603
|
+
var templateObject_1$V, templateObject_2$J, templateObject_3$H;
|
|
19593
19604
|
|
|
19594
19605
|
var ResultsPanel = function (_a) {
|
|
19595
19606
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19596
19607
|
var theme = useTheme();
|
|
19597
|
-
return (jsxs$1(Container$C, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$
|
|
19608
|
+
return (jsxs$1(Container$C, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$3, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(OptionsList, { children: options.map(function (_a) {
|
|
19598
19609
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19599
19610
|
return (jsx$1(OptionItem, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: optionUrl }, { children: jsx$1(ProductItem, { src: src, title: title, price: price }, void 0) }), void 0) }), title));
|
|
19600
19611
|
}) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19608,8 +19619,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19608
19619
|
background: 'white',
|
|
19609
19620
|
alignSelf: 'center',
|
|
19610
19621
|
});
|
|
19611
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19612
|
-
var templateObject_1$
|
|
19622
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
19623
|
+
var templateObject_1$U;
|
|
19613
19624
|
|
|
19614
19625
|
var SearchControl = function (_a) {
|
|
19615
19626
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19721,12 +19732,12 @@ var SearchBar = function (_a) {
|
|
|
19721
19732
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19722
19733
|
};
|
|
19723
19734
|
|
|
19724
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
19725
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19726
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19727
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19728
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19729
|
-
var templateObject_1$
|
|
19735
|
+
var Container$A = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
19736
|
+
var BackArrow = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19737
|
+
var BoldSpan = newStyled.span(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
19738
|
+
var NormalSpan = newStyled.span(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
19739
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
19740
|
+
var templateObject_1$T, templateObject_2$I, templateObject_3$G, templateObject_4$y, templateObject_5$r;
|
|
19730
19741
|
|
|
19731
19742
|
var SearchNavigation = function (_a) {
|
|
19732
19743
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19735,7 +19746,7 @@ var SearchNavigation = function (_a) {
|
|
|
19735
19746
|
}) }, void 0)] }, void 0));
|
|
19736
19747
|
};
|
|
19737
19748
|
|
|
19738
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
19749
|
+
var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __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) {
|
|
19739
19750
|
var alignCenter = _a.alignCenter;
|
|
19740
19751
|
return alignCenter &&
|
|
19741
19752
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19745,26 +19756,26 @@ var Container$z = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
19745
19756
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19746
19757
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19747
19758
|
});
|
|
19748
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19749
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19759
|
+
var TitleText = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
19760
|
+
var BannerText = newStyled.div(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
19750
19761
|
var ShortBanner = function (_a) {
|
|
19751
19762
|
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;
|
|
19752
19763
|
var theme = useTheme();
|
|
19753
19764
|
return (jsxs$1(Container$z, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19754
19765
|
};
|
|
19755
|
-
var templateObject_1$
|
|
19766
|
+
var templateObject_1$S, templateObject_2$H, templateObject_3$F;
|
|
19756
19767
|
|
|
19757
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19758
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19759
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19760
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19761
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19768
|
+
var TableElement$3 = newStyled.table(templateObject_1$R || (templateObject_1$R = __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; });
|
|
19769
|
+
var TableCell$3 = newStyled.td(templateObject_2$G || (templateObject_2$G = __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; });
|
|
19770
|
+
var TableHead$3 = newStyled.th(templateObject_3$E || (templateObject_3$E = __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; });
|
|
19771
|
+
var Label$2 = newStyled('div')(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
19772
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19762
19773
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19763
19774
|
var Container$y = newStyled('div')(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
19764
19775
|
var LabelText$1 = newStyled('span')(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
19765
19776
|
var Column$2 = newStyled('div')(templateObject_9$a || (templateObject_9$a = __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"])));
|
|
19766
19777
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\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; });
|
|
19767
|
-
var templateObject_1$
|
|
19778
|
+
var templateObject_1$R, templateObject_2$G, templateObject_3$E, templateObject_4$x, templateObject_5$q, templateObject_6$l, templateObject_7$j, templateObject_8$f, templateObject_9$a, templateObject_10$8;
|
|
19768
19779
|
|
|
19769
19780
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19770
19781
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19805,16 +19816,16 @@ var SizeChartTable = function (_a) {
|
|
|
19805
19816
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19806
19817
|
};
|
|
19807
19818
|
|
|
19808
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19809
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19810
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19811
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19819
|
+
var TableElement$2 = newStyled.table(templateObject_1$Q || (templateObject_1$Q = __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; });
|
|
19820
|
+
var TableCell$2 = newStyled.td(templateObject_2$F || (templateObject_2$F = __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; });
|
|
19821
|
+
var TableHead$2 = newStyled.th(templateObject_3$D || (templateObject_3$D = __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; });
|
|
19822
|
+
var TableRow$2 = newStyled.tr(templateObject_4$w || (templateObject_4$w = __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; });
|
|
19812
19823
|
var SizeTable = function (_a) {
|
|
19813
19824
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19814
19825
|
var theme = useTheme();
|
|
19815
19826
|
return (jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19816
19827
|
};
|
|
19817
|
-
var templateObject_1$
|
|
19828
|
+
var templateObject_1$Q, templateObject_2$F, templateObject_3$D, templateObject_4$w;
|
|
19818
19829
|
|
|
19819
19830
|
var getStylesBySize$7 = function (size) {
|
|
19820
19831
|
switch (size) {
|
|
@@ -19841,7 +19852,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19841
19852
|
} });
|
|
19842
19853
|
};
|
|
19843
19854
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19844
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19855
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$P || (templateObject_1$P = __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));
|
|
19845
19856
|
};
|
|
19846
19857
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19847
19858
|
if (disabled)
|
|
@@ -19857,23 +19868,23 @@ var TextButton = function (_a) {
|
|
|
19857
19868
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19858
19869
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19859
19870
|
};
|
|
19860
|
-
var templateObject_1$
|
|
19871
|
+
var templateObject_1$P;
|
|
19861
19872
|
|
|
19862
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
19863
|
-
var P = newStyled.p(templateObject_2$
|
|
19864
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19873
|
+
var Container$x = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
19874
|
+
var P = newStyled.p(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19875
|
+
var PercentageSpan = newStyled.span(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
19865
19876
|
var SizeFitGuide = function (_a) {
|
|
19866
19877
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19867
19878
|
return (jsxs$1(Container$x, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19868
19879
|
};
|
|
19869
|
-
var templateObject_1$
|
|
19880
|
+
var templateObject_1$O, templateObject_2$E, templateObject_3$C;
|
|
19870
19881
|
|
|
19871
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19882
|
+
var ButtonsContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
19872
19883
|
var inline = _a.inline;
|
|
19873
19884
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19874
19885
|
});
|
|
19875
|
-
var Row = newStyled.div(templateObject_2$
|
|
19876
|
-
var templateObject_1$
|
|
19886
|
+
var Row = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19887
|
+
var templateObject_1$N, templateObject_2$D;
|
|
19877
19888
|
|
|
19878
19889
|
var SizeSelector = function (_a) {
|
|
19879
19890
|
var _b;
|
|
@@ -19895,7 +19906,7 @@ var SizeSelector = function (_a) {
|
|
|
19895
19906
|
}) }), void 0)] }), void 0));
|
|
19896
19907
|
};
|
|
19897
19908
|
|
|
19898
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19909
|
+
var TabContainer = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
19899
19910
|
var titleSize = _a.titleSize;
|
|
19900
19911
|
return titleSize;
|
|
19901
19912
|
}, function (_a) {
|
|
@@ -19912,18 +19923,18 @@ var Tab = function (_a) {
|
|
|
19912
19923
|
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;
|
|
19913
19924
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19914
19925
|
};
|
|
19915
|
-
var templateObject_1$
|
|
19926
|
+
var templateObject_1$M;
|
|
19916
19927
|
|
|
19917
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
19918
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19928
|
+
var Container$w = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19929
|
+
var TabList = newStyled.div(templateObject_2$C || (templateObject_2$C = __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) {
|
|
19919
19930
|
var backgroundColor = _a.backgroundColor;
|
|
19920
19931
|
return backgroundColor;
|
|
19921
19932
|
}, function (_a) {
|
|
19922
19933
|
var borderColor = _a.borderColor;
|
|
19923
19934
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19924
19935
|
});
|
|
19925
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19926
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19936
|
+
var TabContent = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19937
|
+
var TabSeparator = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
19927
19938
|
var Tabs = function (_a) {
|
|
19928
19939
|
var _b;
|
|
19929
19940
|
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;
|
|
@@ -19934,14 +19945,14 @@ var Tabs = function (_a) {
|
|
|
19934
19945
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19935
19946
|
return (jsxs$1(Container$w, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19936
19947
|
};
|
|
19937
|
-
var templateObject_1$
|
|
19948
|
+
var templateObject_1$L, templateObject_2$C, templateObject_3$B, templateObject_4$v;
|
|
19938
19949
|
|
|
19939
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
19950
|
+
var Container$v = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19940
19951
|
var Tag = function (_a) {
|
|
19941
19952
|
var text = _a.text, className = _a.className;
|
|
19942
19953
|
return jsx$1(Container$v, __assign$1({ className: className }, { children: text }), void 0);
|
|
19943
19954
|
};
|
|
19944
|
-
var templateObject_1$
|
|
19955
|
+
var templateObject_1$K;
|
|
19945
19956
|
|
|
19946
19957
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19947
19958
|
switch (size) {
|
|
@@ -20054,9 +20065,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20054
20065
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20055
20066
|
};
|
|
20056
20067
|
|
|
20057
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
20058
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
20059
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20068
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
20069
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
20070
|
+
var FullscreenVideo = newStyled.div(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
20060
20071
|
var ImageVideo = function (_a) {
|
|
20061
20072
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20062
20073
|
var video = useRef(null);
|
|
@@ -20076,12 +20087,12 @@ var ImageVideo = function (_a) {
|
|
|
20076
20087
|
height: '100%',
|
|
20077
20088
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20078
20089
|
};
|
|
20079
|
-
var templateObject_1$
|
|
20090
|
+
var templateObject_1$J, templateObject_2$B, templateObject_3$A;
|
|
20080
20091
|
|
|
20081
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20082
|
-
var ContainerMobile = css(templateObject_2$
|
|
20083
|
-
var Container$u = newStyled.div(templateObject_3$
|
|
20084
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20092
|
+
var ContainerDesktop = css(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
20093
|
+
var ContainerMobile = css(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
20094
|
+
var Container$u = newStyled.div(templateObject_3$z || (templateObject_3$z = __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);
|
|
20095
|
+
var TextContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
20085
20096
|
var TextWithImage = function (_a) {
|
|
20086
20097
|
var _b, _c, _d, _e;
|
|
20087
20098
|
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"]);
|
|
@@ -20111,18 +20122,18 @@ var TextWithImage = function (_a) {
|
|
|
20111
20122
|
},
|
|
20112
20123
|
} }, 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));
|
|
20113
20124
|
};
|
|
20114
|
-
var templateObject_1$
|
|
20125
|
+
var templateObject_1$I, templateObject_2$A, templateObject_3$z, templateObject_4$u;
|
|
20115
20126
|
|
|
20116
20127
|
var slideInAnimation = function (distanceFromTop) {
|
|
20117
20128
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20118
|
-
return keyframes(templateObject_1$
|
|
20129
|
+
return keyframes(templateObject_1$H || (templateObject_1$H = __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);
|
|
20119
20130
|
};
|
|
20120
20131
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20121
20132
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20122
|
-
return keyframes(templateObject_2$
|
|
20133
|
+
return keyframes(templateObject_2$z || (templateObject_2$z = __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);
|
|
20123
20134
|
};
|
|
20124
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20125
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20135
|
+
var ToastContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
20136
|
+
var ToastContent = newStyled.div(templateObject_4$t || (templateObject_4$t = __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) {
|
|
20126
20137
|
var distanceFromTop = _a.distanceFromTop;
|
|
20127
20138
|
return distanceFromTop || '124px';
|
|
20128
20139
|
}, function (_a) {
|
|
@@ -20135,12 +20146,12 @@ var ToastContent = newStyled.div(templateObject_4$s || (templateObject_4$s = __m
|
|
|
20135
20146
|
var distanceFromTop = _a.distanceFromTop;
|
|
20136
20147
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20137
20148
|
});
|
|
20138
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20149
|
+
var ToastText = newStyled.p(templateObject_5$p || (templateObject_5$p = __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) {
|
|
20139
20150
|
var severity = _a.severity;
|
|
20140
20151
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20141
20152
|
});
|
|
20142
20153
|
var CloseIcon = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20143
|
-
var templateObject_1$
|
|
20154
|
+
var templateObject_1$H, templateObject_2$z, templateObject_3$y, templateObject_4$t, templateObject_5$p, templateObject_6$k;
|
|
20144
20155
|
|
|
20145
20156
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20146
20157
|
var _b;
|
|
@@ -20162,9 +20173,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20162
20173
|
});
|
|
20163
20174
|
Toast.displayName = 'Toast';
|
|
20164
20175
|
|
|
20165
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20166
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20167
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20176
|
+
var Wrapper$1 = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
20177
|
+
var GrandTotal = newStyled.h1(templateObject_2$y || (templateObject_2$y = __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; });
|
|
20178
|
+
var Currency = newStyled.span(templateObject_3$x || (templateObject_3$x = __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) {
|
|
20168
20179
|
var theme = _a.theme;
|
|
20169
20180
|
return theme.component.total.basicTotal.currency.color;
|
|
20170
20181
|
}, function (_a) {
|
|
@@ -20177,11 +20188,11 @@ var Currency = newStyled.span(templateObject_3$w || (templateObject_3$w = __make
|
|
|
20177
20188
|
var theme = _a.theme;
|
|
20178
20189
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20179
20190
|
});
|
|
20180
|
-
var Container$t = newStyled.div(templateObject_4$
|
|
20191
|
+
var Container$t = newStyled.div(templateObject_4$s || (templateObject_4$s = __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) {
|
|
20181
20192
|
var highlightColor = _a.highlightColor;
|
|
20182
20193
|
return highlightColor;
|
|
20183
20194
|
});
|
|
20184
|
-
var TotalContainer = newStyled(Container$t)(templateObject_5$
|
|
20195
|
+
var TotalContainer = newStyled(Container$t)(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20185
20196
|
var showTotalLabel = _a.showTotalLabel;
|
|
20186
20197
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20187
20198
|
});
|
|
@@ -20191,7 +20202,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$i || (templateObject_7$i = __
|
|
|
20191
20202
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20192
20203
|
});
|
|
20193
20204
|
var TotalLabel = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20194
|
-
var templateObject_1$
|
|
20205
|
+
var templateObject_1$G, templateObject_2$y, templateObject_3$x, templateObject_4$s, templateObject_5$o, templateObject_6$j, templateObject_7$i, templateObject_8$e;
|
|
20195
20206
|
|
|
20196
20207
|
var Total = function (_a) {
|
|
20197
20208
|
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;
|
|
@@ -20199,19 +20210,19 @@ var Total = function (_a) {
|
|
|
20199
20210
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$t, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20200
20211
|
};
|
|
20201
20212
|
|
|
20202
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20213
|
+
var Wrapper = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20203
20214
|
var color = _a.color;
|
|
20204
20215
|
return color;
|
|
20205
20216
|
});
|
|
20206
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20207
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20217
|
+
var ItemContainer = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
20218
|
+
var Item = newStyled.h4(templateObject_3$w || (templateObject_3$w = __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) {
|
|
20208
20219
|
var theme = _a.theme;
|
|
20209
20220
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20210
20221
|
}, function (_a) {
|
|
20211
20222
|
var theme = _a.theme;
|
|
20212
20223
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20213
20224
|
});
|
|
20214
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20225
|
+
var CouponItem = newStyled(Item)(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20215
20226
|
var color = _a.color;
|
|
20216
20227
|
return color;
|
|
20217
20228
|
});
|
|
@@ -20224,18 +20235,18 @@ var Subtotal = function (_a) {
|
|
|
20224
20235
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20225
20236
|
})] }), void 0));
|
|
20226
20237
|
};
|
|
20227
|
-
var templateObject_1$
|
|
20238
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$w, templateObject_4$r;
|
|
20228
20239
|
|
|
20229
20240
|
var Totals = {
|
|
20230
20241
|
Total: Total,
|
|
20231
20242
|
Subtotal: Subtotal,
|
|
20232
20243
|
};
|
|
20233
20244
|
|
|
20234
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
20235
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20236
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20237
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20238
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20245
|
+
var Container$s = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20246
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20247
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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; });
|
|
20248
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$q || (templateObject_4$q = __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'); });
|
|
20249
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
20239
20250
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$i || (templateObject_6$i = __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) {
|
|
20240
20251
|
return props.finishedTrack
|
|
20241
20252
|
? props.finishedTrackColor
|
|
@@ -20283,13 +20294,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20283
20294
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20284
20295
|
})] }), void 0));
|
|
20285
20296
|
};
|
|
20286
|
-
var templateObject_1$
|
|
20297
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$v, templateObject_4$q, templateObject_5$n, templateObject_6$i, templateObject_7$h, templateObject_8$d, templateObject_9$9, templateObject_10$7, templateObject_11$5;
|
|
20287
20298
|
|
|
20288
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
20289
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20290
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20291
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20292
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20299
|
+
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20300
|
+
var CheckpointContainer = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20301
|
+
var CheckpointDate = newStyled.div(templateObject_3$u || (templateObject_3$u = __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; });
|
|
20302
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$p || (templateObject_4$p = __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'); });
|
|
20303
|
+
var CheckpointStatus = newStyled.p(templateObject_5$m || (templateObject_5$m = __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'); });
|
|
20293
20304
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$h || (templateObject_6$h = __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) {
|
|
20294
20305
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20295
20306
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20323,19 +20334,19 @@ var TrackingProgress = function (_a) {
|
|
|
20323
20334
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20324
20335
|
})] }), void 0));
|
|
20325
20336
|
};
|
|
20326
|
-
var templateObject_1$
|
|
20337
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$u, templateObject_4$p, templateObject_5$m, templateObject_6$h, templateObject_7$g, templateObject_8$c;
|
|
20327
20338
|
|
|
20328
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20339
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20329
20340
|
var checked = _a.checked;
|
|
20330
20341
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20331
20342
|
});
|
|
20332
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20333
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20334
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20335
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20343
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20344
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20345
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20346
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20336
20347
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20337
20348
|
var CheckboxInput = newStyled.input(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20338
|
-
var templateObject_1$
|
|
20349
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$t, templateObject_4$o, templateObject_5$l, templateObject_6$g, templateObject_7$f;
|
|
20339
20350
|
|
|
20340
20351
|
function AutoshipOfferCard(_a) {
|
|
20341
20352
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20359,18 +20370,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20359
20370
|
return (jsxs$1(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper$1, { children: [jsx$1("div", { children: jsx$1(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsx$1("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxs$1(AutoShipBodyWrapper$1, { children: [jsxs$1(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem$1, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20360
20371
|
}
|
|
20361
20372
|
|
|
20362
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20373
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20363
20374
|
var checked = _a.checked;
|
|
20364
20375
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20365
20376
|
});
|
|
20366
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20367
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20368
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20369
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20377
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20378
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20379
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20380
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20370
20381
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20371
20382
|
newStyled.input(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20372
20383
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20373
|
-
var templateObject_1$
|
|
20384
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$n, templateObject_5$k, templateObject_6$f, templateObject_7$e, templateObject_8$b;
|
|
20374
20385
|
|
|
20375
20386
|
function AutoshipOfferCardCta(_a) {
|
|
20376
20387
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20388,18 +20399,18 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20388
20399
|
return (jsxs$1(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper, { children: [jsx$1("div", { children: copy }, void 0), check && (jsx$1(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxs$1(Fragment$2, { children: [jsxs$1(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxs$1(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsx$1("div", { children: jsx$1(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
|
|
20389
20400
|
}
|
|
20390
20401
|
|
|
20391
|
-
var ContainerBase$3 = newStyled.div(templateObject_1$
|
|
20392
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$
|
|
20393
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_3$
|
|
20394
|
-
newStyled.div(templateObject_4$
|
|
20395
|
-
newStyled.div(templateObject_5$
|
|
20402
|
+
var ContainerBase$3 = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"], ["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"])));
|
|
20403
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"])));
|
|
20404
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
20405
|
+
newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20406
|
+
newStyled.div(templateObject_5$j || (templateObject_5$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"])));
|
|
20396
20407
|
newStyled(Text$7)(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20397
20408
|
var Container$q = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20398
20409
|
var Benefits$2 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"])), function (_a) {
|
|
20399
20410
|
var height = _a.height;
|
|
20400
20411
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20401
20412
|
});
|
|
20402
|
-
var templateObject_1$
|
|
20413
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$r, templateObject_4$m, templateObject_5$j, templateObject_6$e, templateObject_7$d, templateObject_8$a;
|
|
20403
20414
|
|
|
20404
20415
|
var renderCopy = function (copy) {
|
|
20405
20416
|
if (typeof copy === 'string') {
|
|
@@ -20439,15 +20450,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20439
20450
|
justifyContent: 'center',
|
|
20440
20451
|
gap: '10px',
|
|
20441
20452
|
});
|
|
20442
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20453
|
+
var StyledContent = newStyled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
20443
20454
|
var bgColor = _a.bgColor;
|
|
20444
20455
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20445
20456
|
}, function (_a) {
|
|
20446
20457
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
20447
20458
|
return width;
|
|
20448
20459
|
});
|
|
20449
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
20450
|
-
var templateObject_1$
|
|
20460
|
+
var StyledController = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
20461
|
+
var templateObject_1$z, templateObject_2$r;
|
|
20451
20462
|
|
|
20452
20463
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20453
20464
|
var background = _a.background, width = _a.width;
|
|
@@ -20488,14 +20499,14 @@ var BasicAccordion = function (_a) {
|
|
|
20488
20499
|
} }), void 0));
|
|
20489
20500
|
};
|
|
20490
20501
|
|
|
20491
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
20492
|
-
var ImageWrapper = newStyled.div(templateObject_2$
|
|
20493
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
20494
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
20495
|
-
var TitleWrapper$2 = newStyled.div(templateObject_5$
|
|
20502
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
20503
|
+
var ImageWrapper = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
20504
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20505
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$l || (templateObject_4$l = __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 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 gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20506
|
+
var TitleWrapper$2 = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20496
20507
|
var SubTitleWrapper = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
20497
20508
|
var ButtonsWrapper = newStyled.div(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
20498
|
-
var templateObject_1$
|
|
20509
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$q, templateObject_4$l, templateObject_5$i, templateObject_6$d, templateObject_7$c;
|
|
20499
20510
|
|
|
20500
20511
|
function CartItemCard(_a) {
|
|
20501
20512
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20541,9 +20552,9 @@ var Shades200Color$1 = '#bbbbbb';
|
|
|
20541
20552
|
var Shades700Color$1 = '#292929';
|
|
20542
20553
|
var PrimaryColor$1 = '#f7a08b';
|
|
20543
20554
|
var ClubBorderColor$1 = '#882a2b';
|
|
20544
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
20545
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
20546
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
20555
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20556
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient$1);
|
|
20557
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __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) {
|
|
20547
20558
|
var selected = _a.selected;
|
|
20548
20559
|
return selected ? "1.5px solid ".concat(ClubBorderColor$1) : "1px solid ".concat(Shades200Color$1);
|
|
20549
20560
|
}, function (_a) {
|
|
@@ -20552,14 +20563,14 @@ var ContainerBase$2 = newStyled.div(templateObject_3$o || (templateObject_3$o =
|
|
|
20552
20563
|
? "& label {\n font-weight: 700;\n }"
|
|
20553
20564
|
: '';
|
|
20554
20565
|
}, PrimaryColor$1);
|
|
20555
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
20566
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20556
20567
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20557
20568
|
return (isNoMember && selected ? Shades700Color$1 : '');
|
|
20558
20569
|
}, function (_a) {
|
|
20559
20570
|
var onClick = _a.onClick;
|
|
20560
20571
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20561
20572
|
});
|
|
20562
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
20573
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20563
20574
|
var SubscriptionHeader$2 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20564
20575
|
var isSelected = _a.isSelected;
|
|
20565
20576
|
return (isSelected ? "1px solid ".concat(Shades200Color$1) : "none");
|
|
@@ -20584,7 +20595,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20584
20595
|
: Shades200Color$1;
|
|
20585
20596
|
});
|
|
20586
20597
|
var Container$p = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20587
|
-
var templateObject_1$
|
|
20598
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$p, templateObject_4$k, templateObject_5$h, templateObject_6$c, templateObject_7$b, templateObject_8$9, templateObject_9$8, templateObject_10$6, templateObject_11$4;
|
|
20588
20599
|
|
|
20589
20600
|
var ClubOfferSelector = function (_a) {
|
|
20590
20601
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20644,9 +20655,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20644
20655
|
var Shades700Color = '#292929';
|
|
20645
20656
|
var PrimaryColor = '#f7a08b';
|
|
20646
20657
|
var ClubBorderColor = '#882a2b';
|
|
20647
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20648
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
20649
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
20658
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20659
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20660
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __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) {
|
|
20650
20661
|
var selected = _a.selected;
|
|
20651
20662
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20652
20663
|
}, function (_a) {
|
|
@@ -20655,14 +20666,14 @@ var ContainerBase$1 = newStyled.div(templateObject_3$n || (templateObject_3$n =
|
|
|
20655
20666
|
? "& label {\n font-weight: 700;\n }"
|
|
20656
20667
|
: '';
|
|
20657
20668
|
}, PrimaryColor);
|
|
20658
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
20669
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20659
20670
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20660
20671
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20661
20672
|
}, function (_a) {
|
|
20662
20673
|
var onClick = _a.onClick;
|
|
20663
20674
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20664
20675
|
});
|
|
20665
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
20676
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20666
20677
|
var SubscriptionHeader$1 = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20667
20678
|
var isSelected = _a.isSelected;
|
|
20668
20679
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20688,7 +20699,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20688
20699
|
});
|
|
20689
20700
|
var Container$o = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20690
20701
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20691
|
-
var templateObject_1$
|
|
20702
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$o, templateObject_4$j, templateObject_5$g, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20692
20703
|
|
|
20693
20704
|
var ClubOfferSelector2 = function (_a) {
|
|
20694
20705
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, termsTextLink = _a.termsTextLink;
|
|
@@ -20734,25 +20745,25 @@ var ClubOfferSelector2 = function (_a) {
|
|
|
20734
20745
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector2.id) }, void 0) }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer$1, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: updatedClubOfferBenefits[0] } }, void 0) }, void 0))] }), void 0), isSelected && (jsxs$1(TermsText, __assign$1({ variant: "body" }, { children: [updatedClubOfferBenefits[1], jsxs$1("span", { children: ["Terms ", jsx$1("a", __assign$1({ href: termsTextLink }, { children: "here" }), void 0), "."] }, void 0)] }), void 0)), jsxs$1(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20735
20746
|
};
|
|
20736
20747
|
|
|
20737
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20748
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20738
20749
|
var $checked = _a.$checked;
|
|
20739
20750
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20740
20751
|
}, function (_a) {
|
|
20741
20752
|
var $checked = _a.$checked;
|
|
20742
20753
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20743
20754
|
});
|
|
20744
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20745
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20746
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20747
|
-
var ClubCopyTextWrapper = newStyled.div(templateObject_5$
|
|
20748
|
-
var templateObject_1$
|
|
20755
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20756
|
+
var CardBody = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20757
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20758
|
+
var ClubCopyTextWrapper = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20759
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$n, templateObject_4$i, templateObject_5$f;
|
|
20749
20760
|
|
|
20750
20761
|
function Card(_a) {
|
|
20751
20762
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
20752
20763
|
return (jsxs$1(ContainerWrapper$1, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxs$1(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
|
|
20753
20764
|
}
|
|
20754
20765
|
|
|
20755
|
-
var StyledButton = newStyled.button(templateObject_1$
|
|
20766
|
+
var StyledButton = newStyled.button(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"], ["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"])), function (_a) {
|
|
20756
20767
|
var customStyle = _a.customStyle;
|
|
20757
20768
|
return customStyle && __assign$1({}, customStyle);
|
|
20758
20769
|
});
|
|
@@ -20765,7 +20776,7 @@ var JoinClubCard = function (_a) {
|
|
|
20765
20776
|
};
|
|
20766
20777
|
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsx$1(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked, color: toggleColor }, void 0)) }), void 0));
|
|
20767
20778
|
};
|
|
20768
|
-
var templateObject_1$
|
|
20779
|
+
var templateObject_1$u;
|
|
20769
20780
|
|
|
20770
20781
|
function useOfferAtCartForAutoshipCrossSell(props) {
|
|
20771
20782
|
var theme = useTheme$1();
|
|
@@ -20789,21 +20800,21 @@ function useOfferAtCartForAutoshipCrossSell(props) {
|
|
|
20789
20800
|
return __assign$1({ handleOnClick: handleOnClick, theme: theme, isMobile: isMobile, selectedSize: selectedSize, setSelectedSize: setSelectedSize, showErrorMessage: showErrorMessage, setShowErrorMessage: setShowErrorMessage }, props);
|
|
20790
20801
|
}
|
|
20791
20802
|
|
|
20792
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
20793
|
-
var Body$2 = newStyled.div(templateObject_2$
|
|
20803
|
+
var Container$n = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"])));
|
|
20804
|
+
var Body$2 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20794
20805
|
var height = _a.height;
|
|
20795
20806
|
return height;
|
|
20796
20807
|
});
|
|
20797
|
-
var RightContent = newStyled.div(templateObject_3$
|
|
20798
|
-
var Benefits$1 = newStyled.div(templateObject_4$
|
|
20808
|
+
var RightContent = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"])));
|
|
20809
|
+
var Benefits$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20799
20810
|
var height = _a.height;
|
|
20800
20811
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20801
20812
|
}, function (_a) {
|
|
20802
20813
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20803
20814
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20804
20815
|
});
|
|
20805
|
-
var Actions = newStyled.div(templateObject_5$
|
|
20806
|
-
var templateObject_1$
|
|
20816
|
+
var Actions = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20817
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$m, templateObject_4$h, templateObject_5$e;
|
|
20807
20818
|
|
|
20808
20819
|
var getTitleProps = function (_a) {
|
|
20809
20820
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20842,15 +20853,15 @@ var VariantType$1;
|
|
|
20842
20853
|
VariantType["V1"] = "v1";
|
|
20843
20854
|
VariantType["V2"] = "v2";
|
|
20844
20855
|
})(VariantType$1 || (VariantType$1 = {}));
|
|
20845
|
-
var ContainerV2 = newStyled.div(templateObject_1$
|
|
20856
|
+
var ContainerV2 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"])), function (_a) {
|
|
20846
20857
|
var variant = _a.variant;
|
|
20847
20858
|
return (variant === VariantType$1.V2 ? '#F7F7F7' : 'white');
|
|
20848
20859
|
});
|
|
20849
|
-
var ActionsV2 = newStyled.div(templateObject_2$
|
|
20850
|
-
var SizeCardItem = newStyled.div(templateObject_3$
|
|
20851
|
-
var SizeCardWrapper = newStyled.div(templateObject_4$
|
|
20852
|
-
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$
|
|
20853
|
-
var templateObject_1$
|
|
20860
|
+
var ActionsV2 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20861
|
+
var SizeCardItem = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"])));
|
|
20862
|
+
var SizeCardWrapper = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"])));
|
|
20863
|
+
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"])));
|
|
20864
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$g, templateObject_5$d;
|
|
20854
20865
|
|
|
20855
20866
|
var SizeOptions = function (_a) {
|
|
20856
20867
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20870,12 +20881,12 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20870
20881
|
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType$1.V2 : VariantType$1.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body$2, { children: [src && alt && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsx$1(RightContent, { children: jsx$1(Benefits$1, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsx$1("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsx$1(BottomCopyWrapper$1, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20871
20882
|
};
|
|
20872
20883
|
|
|
20873
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
20874
|
-
var QuatityLabel$1 = newStyled.div(templateObject_2$
|
|
20875
|
-
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$
|
|
20876
|
-
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$
|
|
20877
|
-
var ContentWrapper = newStyled.div(templateObject_5$
|
|
20878
|
-
var templateObject_1$
|
|
20884
|
+
var Container$m = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"], ["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"])), function (props) { return (props.isMobile ? '16px 8px' : '20px 12px'); });
|
|
20885
|
+
var QuatityLabel$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"])));
|
|
20886
|
+
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n line-height: 17px;\n"], ["\n line-height: 17px;\n"])));
|
|
20887
|
+
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", ";\n white-space: nowrap;\n"], ["\n padding: ", ";\n white-space: nowrap;\n"])), function (props) { return (props.size === ComponentSize.XSmall ? '8px' : '14px 32px'); });
|
|
20888
|
+
var ContentWrapper = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"])));
|
|
20889
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$f, templateObject_5$c;
|
|
20879
20890
|
|
|
20880
20891
|
var OfferAtCartV3 = function (_a) {
|
|
20881
20892
|
var className = _a.className, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b, titleContent = _a.title.content, onAddToCart = _a.onAddToCart, ctaText = _a.ctaText;
|
|
@@ -20885,20 +20896,20 @@ var OfferAtCartV3 = function (_a) {
|
|
|
20885
20896
|
|
|
20886
20897
|
var classNames = ".twoOffers > div > div > div{background-color:white;}.benefits{display:flex;flex-direction:column;width:100%!important;}.benefits > div > div{width:100%!important;}.benefits > div > div > div{display:flex;flex-direction:row;gap:8px;width:100%;justify-content:space-between;}";
|
|
20887
20898
|
|
|
20888
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
20889
|
-
var TitleWrapper$1 = newStyled.div(templateObject_2$
|
|
20890
|
-
var Body$1 = newStyled.div(templateObject_3$
|
|
20899
|
+
var Container$l = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #f7f7f7;\n font-size: 14px;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #f7f7f7;\n font-size: 14px;\n"])));
|
|
20900
|
+
var TitleWrapper$1 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #d1d1d1;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #d1d1d1;\n"])));
|
|
20901
|
+
var Body$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20891
20902
|
var height = _a.height;
|
|
20892
20903
|
return height;
|
|
20893
20904
|
});
|
|
20894
|
-
var Benefits = newStyled.div(templateObject_4$
|
|
20905
|
+
var Benefits = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20895
20906
|
var height = _a.height;
|
|
20896
20907
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20897
20908
|
}, function (_a) {
|
|
20898
20909
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20899
20910
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20900
20911
|
});
|
|
20901
|
-
var templateObject_1$
|
|
20912
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$e;
|
|
20902
20913
|
|
|
20903
20914
|
var OfferAtCartV4 = function (props) {
|
|
20904
20915
|
var _a = useOfferAtCartForAutoshipCrossSell(props), className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, image = _a.image, benefits = _a.benefits, _c = _a.ctaText, ctaText = _c === void 0 ? 'Yes, I want this offer' : _c, sizeOptions = _a.sizeOptions, rating = _a.rating, bottomCopy = _a.bottomCopy, theme = _a.theme, setSelectedSize = _a.setSelectedSize, setShowErrorMessage = _a.setShowErrorMessage, isMobile = _a.isMobile, showErrorMessage = _a.showErrorMessage, handleOnClick = _a.handleOnClick;
|
|
@@ -20908,16 +20919,16 @@ var OfferAtCartV4 = function (props) {
|
|
|
20908
20919
|
return (jsx$1(Container$l, __assign$1({ className: className }, { children: jsxs$1(Fragment$2, { children: [jsxs$1(TitleWrapper$1, { children: [image && (jsx$1(OfferAtCartImage, { width: "66px", height: "66px", isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0)] }, void 0), jsxs$1(Body$1, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsx$1("span", { children: "Includes:" }, void 0), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ id: "benefits", className: classNames.benefits }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && RenderActionSection(), !isMobile && showErrorMessage && ErrorMessage(theme)] }, void 0)] }), void 0), isMobile && RenderActionSection(), isMobile && showErrorMessage && ErrorMessage(theme), bottomCopy && jsx$1("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }, void 0) }), void 0));
|
|
20909
20920
|
};
|
|
20910
20921
|
|
|
20911
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
20912
|
-
var ProductImageContainer = newStyled.div(templateObject_2$
|
|
20913
|
-
var Body = newStyled.div(templateObject_3$
|
|
20914
|
-
var QuatityLabel = newStyled.div(templateObject_4$
|
|
20915
|
-
newStyled.div(templateObject_5$
|
|
20922
|
+
var Container$k = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"], ["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"])));
|
|
20923
|
+
var ProductImageContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n position: relative;\n margin-right: 16.5px;\n"], ["\n position: relative;\n margin-right: 16.5px;\n"])));
|
|
20924
|
+
var Body = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5px;\n"])));
|
|
20925
|
+
var QuatityLabel = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 5px;\n right: -16.5px;\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 5px;\n right: -16.5px;\n"])));
|
|
20926
|
+
newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"], ["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"])));
|
|
20916
20927
|
var OfferTitle = newStyled(Text$7)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"], ["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"])));
|
|
20917
20928
|
var OfferText = newStyled(Text$7)(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"], ["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"])));
|
|
20918
20929
|
var DiscountValueText = newStyled.span(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
20919
20930
|
var OfferButton = newStyled(ButtonSecondary)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"], ["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"])));
|
|
20920
|
-
var templateObject_1$
|
|
20931
|
+
var templateObject_1$p, templateObject_2$i, templateObject_3$i, templateObject_4$d, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$6;
|
|
20921
20932
|
|
|
20922
20933
|
var VariantType;
|
|
20923
20934
|
(function (VariantType) {
|
|
@@ -20939,11 +20950,11 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20939
20950
|
height: height,
|
|
20940
20951
|
});
|
|
20941
20952
|
});
|
|
20942
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
20943
|
-
var Container$j = newStyled.a(templateObject_2$
|
|
20944
|
-
var ProdCardContainer$2 = newStyled.div(templateObject_3$
|
|
20945
|
-
var Title$2 = newStyled.h2(templateObject_4$
|
|
20946
|
-
newStyled.div(templateObject_5$
|
|
20953
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
20954
|
+
var Container$j = newStyled.a(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
20955
|
+
var ProdCardContainer$2 = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
20956
|
+
var Title$2 = newStyled.h2(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20957
|
+
newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20947
20958
|
var style = _a.style;
|
|
20948
20959
|
return style.width;
|
|
20949
20960
|
});
|
|
@@ -20953,7 +20964,7 @@ var BottomTagContainer$6 = newStyled.div(templateObject_6$9 || (templateObject_6
|
|
|
20953
20964
|
});
|
|
20954
20965
|
newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20955
20966
|
var DiscountLabel$2 = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"])));
|
|
20956
|
-
var templateObject_1$
|
|
20967
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$c, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6;
|
|
20957
20968
|
|
|
20958
20969
|
var PriceLabelDisplay = function (_a) {
|
|
20959
20970
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -20990,7 +21001,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
20990
21001
|
};
|
|
20991
21002
|
}
|
|
20992
21003
|
};
|
|
20993
|
-
var TopTagContainer$6 = newStyled.div(templateObject_1$
|
|
21004
|
+
var TopTagContainer$6 = newStyled.div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
20994
21005
|
var style = _a.style;
|
|
20995
21006
|
return style.width;
|
|
20996
21007
|
});
|
|
@@ -21008,7 +21019,7 @@ var ProductCard = function (_a) {
|
|
|
21008
21019
|
}, [size]);
|
|
21009
21020
|
return (jsxs$1(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs$1(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs$1(ImageContainer$1, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx$1(TopTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx$1(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx$1(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxs$1(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === ComponentSize.Small ? 'start' : 'center') } }, { children: [jsx$1(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsx$1(Spacing, { size: space }, void 0), jsx$1(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx$1(Spacing, { size: space }, void 0), priceLoading ? (jsx$1(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsx$1(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsx$1(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsx$1(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
|
|
21010
21021
|
};
|
|
21011
|
-
var templateObject_1$
|
|
21022
|
+
var templateObject_1$n;
|
|
21012
21023
|
|
|
21013
21024
|
var ImageContainer = newStyled.div(function (_a) {
|
|
21014
21025
|
var width = _a.width, height = _a.height;
|
|
@@ -21018,11 +21029,11 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
21018
21029
|
height: height,
|
|
21019
21030
|
});
|
|
21020
21031
|
});
|
|
21021
|
-
var DiscountLabel$1 = newStyled.div(templateObject_1$
|
|
21022
|
-
var ImageHoverContainer = newStyled.img(templateObject_2$
|
|
21023
|
-
var Container$i = newStyled.a(templateObject_3$
|
|
21024
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_4$
|
|
21025
|
-
var Title$1 = newStyled.h2(templateObject_5$
|
|
21032
|
+
var DiscountLabel$1 = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
21033
|
+
var ImageHoverContainer = newStyled.img(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
21034
|
+
var Container$i = newStyled.a(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
21035
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
21036
|
+
var Title$1 = newStyled.h2(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
21026
21037
|
var TopTagContainer$5 = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __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) {
|
|
21027
21038
|
var style = _a.style;
|
|
21028
21039
|
return style.width;
|
|
@@ -21040,7 +21051,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7
|
|
|
21040
21051
|
var style = _a.style;
|
|
21041
21052
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21042
21053
|
});
|
|
21043
|
-
var templateObject_1$
|
|
21054
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$b, templateObject_5$9, templateObject_6$8, templateObject_7$7;
|
|
21044
21055
|
|
|
21045
21056
|
var getStylesBySize$1 = function (size) {
|
|
21046
21057
|
switch (size) {
|
|
@@ -21116,11 +21127,11 @@ newStyled.div(function (_a) {
|
|
|
21116
21127
|
height: height,
|
|
21117
21128
|
});
|
|
21118
21129
|
});
|
|
21119
|
-
var DiscountLabel = newStyled.div(templateObject_1$
|
|
21120
|
-
newStyled.img(templateObject_2$
|
|
21121
|
-
var Container$h = newStyled.a(templateObject_3$
|
|
21122
|
-
var ProdCardContainer = newStyled.div(templateObject_4$
|
|
21123
|
-
var Title = newStyled.h2(templateObject_5$
|
|
21130
|
+
var DiscountLabel = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
21131
|
+
newStyled.img(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
21132
|
+
var Container$h = newStyled.a(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
21133
|
+
var ProdCardContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
21134
|
+
var Title = newStyled.h2(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
21124
21135
|
newStyled.div(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
21125
21136
|
var style = _a.style;
|
|
21126
21137
|
return style.width;
|
|
@@ -21138,7 +21149,7 @@ newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([
|
|
|
21138
21149
|
var style = _a.style;
|
|
21139
21150
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21140
21151
|
});
|
|
21141
|
-
var templateObject_1$
|
|
21152
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$a, templateObject_5$8, templateObject_6$7, templateObject_7$6;
|
|
21142
21153
|
|
|
21143
21154
|
var getStylesBySize = function (size) {
|
|
21144
21155
|
switch (size) {
|
|
@@ -21259,7 +21270,7 @@ var playVideoCommand = function () {
|
|
|
21259
21270
|
sendCommandToIframe('playVideo');
|
|
21260
21271
|
};
|
|
21261
21272
|
|
|
21262
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
21273
|
+
var Container$g = newStyled.div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
21263
21274
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21264
21275
|
return borderRadiusVariant &&
|
|
21265
21276
|
"\n border-radius: 40px;\n ";
|
|
@@ -21267,10 +21278,10 @@ var Container$g = newStyled.div(templateObject_1$j || (templateObject_1$j = __ma
|
|
|
21267
21278
|
var theme = _a.theme;
|
|
21268
21279
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21269
21280
|
});
|
|
21270
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
21271
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_3$
|
|
21272
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_4$
|
|
21273
|
-
var NavButtonContainer$3 = newStyled.div(templateObject_5$
|
|
21281
|
+
var TopTagContainer$4 = 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'); });
|
|
21282
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
21283
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21284
|
+
var NavButtonContainer$3 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21274
21285
|
var Button$4 = newStyled.button(templateObject_6$6 || (templateObject_6$6 = __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"])));
|
|
21275
21286
|
var settings$4 = {
|
|
21276
21287
|
dots: true,
|
|
@@ -21349,16 +21360,16 @@ var ImageProductSlide = function (_a) {
|
|
|
21349
21360
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
21350
21361
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21351
21362
|
};
|
|
21352
|
-
var templateObject_1$
|
|
21363
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$9, templateObject_5$7, templateObject_6$6;
|
|
21353
21364
|
|
|
21354
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
21365
|
+
var Container$f = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
21355
21366
|
var ProductGalleryMobile = function (_a) {
|
|
21356
21367
|
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;
|
|
21357
21368
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
21358
21369
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
21359
21370
|
return (jsx$1(Container$f, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
21360
21371
|
};
|
|
21361
|
-
var templateObject_1$
|
|
21372
|
+
var templateObject_1$j;
|
|
21362
21373
|
|
|
21363
21374
|
function _extends() {
|
|
21364
21375
|
_extends = Object.assign || function (target) {
|
|
@@ -21625,14 +21636,14 @@ function useSwipeable(options) {
|
|
|
21625
21636
|
return handlers;
|
|
21626
21637
|
}
|
|
21627
21638
|
|
|
21628
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
21639
|
+
var Button$3 = newStyled.button(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
21629
21640
|
var ArrowButton = function (_a) {
|
|
21630
21641
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
21631
21642
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
21632
21643
|
};
|
|
21633
|
-
var templateObject_1$
|
|
21644
|
+
var templateObject_1$i;
|
|
21634
21645
|
|
|
21635
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
21646
|
+
var Container$e = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
21636
21647
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
21637
21648
|
var SlideDots = function (_a) {
|
|
21638
21649
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -21641,11 +21652,11 @@ var SlideDots = function (_a) {
|
|
|
21641
21652
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
21642
21653
|
: 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));
|
|
21643
21654
|
};
|
|
21644
|
-
var templateObject_1$
|
|
21655
|
+
var templateObject_1$h;
|
|
21645
21656
|
|
|
21646
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
21647
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
21648
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
21657
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
21658
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
21659
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
21649
21660
|
var SlideNavigation = function (_a) {
|
|
21650
21661
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
21651
21662
|
var theme = useTheme();
|
|
@@ -21657,23 +21668,23 @@ var SlideNavigation = function (_a) {
|
|
|
21657
21668
|
onNavigate(selectedIndex + 1);
|
|
21658
21669
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
21659
21670
|
};
|
|
21660
|
-
var templateObject_1$
|
|
21671
|
+
var templateObject_1$g, templateObject_2$d, templateObject_3$d;
|
|
21661
21672
|
|
|
21662
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
21673
|
+
var Container$d = newStyled.div(templateObject_1$f || (templateObject_1$f = __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) {
|
|
21663
21674
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21664
21675
|
return borderRadiusVariant &&
|
|
21665
21676
|
"\n border-radius: 40px;\n ";
|
|
21666
21677
|
});
|
|
21667
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
21668
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
21678
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$c || (templateObject_2$c = __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'); });
|
|
21679
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21669
21680
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
21670
21681
|
var _b, _c;
|
|
21671
21682
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
21672
21683
|
return (jsxs$1(Container$d, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
21673
21684
|
});
|
|
21674
|
-
var templateObject_1$
|
|
21685
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$c;
|
|
21675
21686
|
|
|
21676
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
21687
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
21677
21688
|
var ProductGalleryMobileV2 = function (_a) {
|
|
21678
21689
|
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;
|
|
21679
21690
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -21697,9 +21708,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
21697
21708
|
}, [index, images]);
|
|
21698
21709
|
return (jsxs$1(Container$c, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
21699
21710
|
};
|
|
21700
|
-
var templateObject_1$
|
|
21711
|
+
var templateObject_1$e;
|
|
21701
21712
|
|
|
21702
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
21713
|
+
var Container$b = newStyled.div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
21703
21714
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21704
21715
|
return borderRadiusVariant &&
|
|
21705
21716
|
"\n border-radius: 40px;\n ";
|
|
@@ -21707,10 +21718,10 @@ var Container$b = newStyled.div(templateObject_1$c || (templateObject_1$c = __ma
|
|
|
21707
21718
|
var theme = _a.theme;
|
|
21708
21719
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21709
21720
|
});
|
|
21710
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
21711
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
21712
|
-
var VideoOverlay = newStyled.div(templateObject_4$
|
|
21713
|
-
var Video = newStyled.div(templateObject_5$
|
|
21721
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b = __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'); });
|
|
21722
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21723
|
+
var VideoOverlay = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
21724
|
+
var Video = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
21714
21725
|
var VideoTag = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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"])));
|
|
21715
21726
|
var Text = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
21716
21727
|
var NavButtonContainer$2 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
@@ -21774,14 +21785,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
21774
21785
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
21775
21786
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21776
21787
|
};
|
|
21777
|
-
var templateObject_1$
|
|
21788
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$5, templateObject_9$5;
|
|
21778
21789
|
|
|
21779
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
21790
|
+
var Container$a = newStyled.div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
21780
21791
|
var ProductGalleryMobileV3 = function (_a) {
|
|
21781
21792
|
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;
|
|
21782
21793
|
return (jsx$1(Container$a, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
21783
21794
|
};
|
|
21784
|
-
var templateObject_1$
|
|
21795
|
+
var templateObject_1$c;
|
|
21785
21796
|
|
|
21786
21797
|
function closeZoom() {
|
|
21787
21798
|
var closeButton = document.querySelectorAll('.iiz__btn.iiz__close.iiz__close--visible')[0];
|
|
@@ -21802,10 +21813,10 @@ var afterChangeSlide = function (_a) {
|
|
|
21802
21813
|
closeZoom();
|
|
21803
21814
|
};
|
|
21804
21815
|
|
|
21805
|
-
var TopTagContainer$1 = newStyled.div(templateObject_1$
|
|
21806
|
-
var TopRightTagContainer = newStyled.div(templateObject_2$
|
|
21807
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
21808
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
21816
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21817
|
+
var TopRightTagContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
21818
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21819
|
+
var Container$9 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"], ["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"])), function (_a) {
|
|
21809
21820
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21810
21821
|
return borderRadiusVariant &&
|
|
21811
21822
|
"\n border-radius: 40px;\n ";
|
|
@@ -21817,7 +21828,7 @@ var Container$9 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __ma
|
|
|
21817
21828
|
return lastImage &&
|
|
21818
21829
|
"\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n ";
|
|
21819
21830
|
});
|
|
21820
|
-
var templateObject_1$
|
|
21831
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$a, templateObject_4$7;
|
|
21821
21832
|
|
|
21822
21833
|
var settings$2 = {
|
|
21823
21834
|
dots: true,
|
|
@@ -21876,9 +21887,9 @@ var ContentGallery = function (_a) {
|
|
|
21876
21887
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21877
21888
|
};
|
|
21878
21889
|
|
|
21879
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_1$
|
|
21880
|
-
var Button$1 = newStyled.button(templateObject_2$
|
|
21881
|
-
var Container$8 = newStyled.div(templateObject_3$
|
|
21890
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21891
|
+
var Button$1 = newStyled.button(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21892
|
+
var Container$8 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
21882
21893
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21883
21894
|
return borderRadiusVariant &&
|
|
21884
21895
|
"\n border-radius: 40px;\n ";
|
|
@@ -21886,7 +21897,7 @@ var Container$8 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __ma
|
|
|
21886
21897
|
var theme = _a.theme;
|
|
21887
21898
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21888
21899
|
});
|
|
21889
|
-
var templateObject_1$
|
|
21900
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$9;
|
|
21890
21901
|
|
|
21891
21902
|
var settings$1 = {
|
|
21892
21903
|
dots: false,
|
|
@@ -22053,7 +22064,7 @@ var SubContainer = newStyled.div({
|
|
|
22053
22064
|
marginTop: '0px',
|
|
22054
22065
|
},
|
|
22055
22066
|
});
|
|
22056
|
-
var Header$
|
|
22067
|
+
var Header$2 = newStyled.div({
|
|
22057
22068
|
display: 'flex',
|
|
22058
22069
|
justifyContent: 'end',
|
|
22059
22070
|
alignItems: 'center',
|
|
@@ -22082,7 +22093,7 @@ var GalleryDetailed = function (_a) {
|
|
|
22082
22093
|
function closeGallery() {
|
|
22083
22094
|
setGalleryOpened(false);
|
|
22084
22095
|
}
|
|
22085
|
-
return (jsxs$1(Container$6, { children: [jsx$1(Header$
|
|
22096
|
+
return (jsxs$1(Container$6, { children: [jsx$1(Header$2, { children: jsx$1(IconContainer, __assign$1({ onClick: closeGallery }, { children: jsx$1(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsxs$1(SubContainer, { children: [jsx$1(MainContent, { contents: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(Slider, { images: images, test: !!productImageDataTestId, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex }, void 0)] }, void 0)] }, void 0));
|
|
22086
22097
|
};
|
|
22087
22098
|
|
|
22088
22099
|
var ProductGalleryMobileV4 = function (_a) {
|
|
@@ -22154,8 +22165,8 @@ var THUMBNAIL_SETTINGS = {
|
|
|
22154
22165
|
],
|
|
22155
22166
|
};
|
|
22156
22167
|
|
|
22157
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
22158
|
-
var SliderContainer = newStyled.div(templateObject_2$
|
|
22168
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
22169
|
+
var SliderContainer = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
22159
22170
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
22160
22171
|
return borderRadiusVariant &&
|
|
22161
22172
|
"\n border-radius: 40px;\n ";
|
|
@@ -22163,9 +22174,9 @@ var SliderContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 =
|
|
|
22163
22174
|
var theme = _a.theme;
|
|
22164
22175
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
22165
22176
|
});
|
|
22166
|
-
var TopTagContainer = newStyled.div(templateObject_3$
|
|
22167
|
-
var BottomTagContainer = newStyled.div(templateObject_4$
|
|
22168
|
-
var NavButtonContainer = newStyled.div(templateObject_5$
|
|
22177
|
+
var TopTagContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
22178
|
+
var BottomTagContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
22179
|
+
var NavButtonContainer = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
22169
22180
|
var theme = _a.theme;
|
|
22170
22181
|
return theme.colors.shades.white.color;
|
|
22171
22182
|
});
|
|
@@ -22192,7 +22203,7 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$4 || (templateObject_1
|
|
|
22192
22203
|
var borderRadius = _a.borderRadius;
|
|
22193
22204
|
return borderRadius || '0px';
|
|
22194
22205
|
});
|
|
22195
|
-
var templateObject_1$
|
|
22206
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$4, templateObject_10$4;
|
|
22196
22207
|
|
|
22197
22208
|
var ProductGalleryMobileV5 = function (_a) {
|
|
22198
22209
|
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
@@ -22219,10 +22230,10 @@ var ProductGalleryMobileV5 = function (_a) {
|
|
|
22219
22230
|
}) }), void 0)] }), void 0) }), void 0));
|
|
22220
22231
|
};
|
|
22221
22232
|
|
|
22222
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
22223
|
-
var ThumbnailWrapper = newStyled.button(templateObject_2$
|
|
22224
|
-
var Thumbnail = newStyled(Image$3)(templateObject_3$
|
|
22225
|
-
var templateObject_1$
|
|
22233
|
+
var Container$4 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n padding-top: 8px;\n gap: 8px;\n overflow-x: auto;\n overflow-y: hidden;\n"], ["\n display: flex;\n padding-top: 8px;\n gap: 8px;\n overflow-x: auto;\n overflow-y: hidden;\n"])));
|
|
22234
|
+
var ThumbnailWrapper = newStyled.button(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n all: unset;\n flex-shrink: 0;\n display: block;\n border: none;\n padding: 0;\n width: 81px;\n height: 86px;\n overflow: hidden;\n scroll-margin-left: 0.5rem;\n scroll-margin-right: 0.5rem;\n box-sizing: border-box;\n border: ", ";\n"], ["\n all: unset;\n flex-shrink: 0;\n display: block;\n border: none;\n padding: 0;\n width: 81px;\n height: 86px;\n overflow: hidden;\n scroll-margin-left: 0.5rem;\n scroll-margin-right: 0.5rem;\n box-sizing: border-box;\n border: ", ";\n"])), function (props) { return (props.active ? '1px solid #292929' : 'unset'); });
|
|
22235
|
+
var Thumbnail = newStyled(Image$3)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n width: 100%;\n object-fit: cover;\n overflow: hidden;\n"], ["\n width: 100%;\n object-fit: cover;\n overflow: hidden;\n"])));
|
|
22236
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$7;
|
|
22226
22237
|
|
|
22227
22238
|
var ColorVariantGallery = function (_a) {
|
|
22228
22239
|
var images = _a.images, selectedImage = _a.selectedImage, setSelectedImage = _a.setSelectedImage;
|
|
@@ -22252,11 +22263,11 @@ var ColorVariantGallery = function (_a) {
|
|
|
22252
22263
|
return (jsx$1(Container$4, __assign$1({ ref: containerRef }, { children: images.map(function (img, i) { return (jsx$1(ThumbnailWrapper, __assign$1({ active: isTheActiveImage(img), onClick: function () { return handleSelectImage(img); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsx$1(Thumbnail, { src: img.url, alt: img.alt, width: "81px", loading: "eager" }, void 0) }), img.url)); }) }), void 0));
|
|
22253
22264
|
};
|
|
22254
22265
|
|
|
22255
|
-
var MainGalleryContainer = newStyled.div(templateObject_1$
|
|
22256
|
-
var TopTag = newStyled.div(templateObject_2$
|
|
22257
|
-
var BottomTag = newStyled.div(templateObject_3$
|
|
22258
|
-
var TopRightTag = newStyled.div(templateObject_4$
|
|
22259
|
-
var templateObject_1$
|
|
22266
|
+
var MainGalleryContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
22267
|
+
var TopTag = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n overflow: hidden;\n left: 0;\n top: 0;\n div > div {\n margin: 0;\n }\n"], ["\n position: absolute;\n overflow: hidden;\n left: 0;\n top: 0;\n div > div {\n margin: 0;\n }\n"])));
|
|
22268
|
+
var BottomTag = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
22269
|
+
var TopRightTag = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
22270
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5;
|
|
22260
22271
|
|
|
22261
22272
|
var settings = {
|
|
22262
22273
|
dots: false,
|
|
@@ -22310,8 +22321,8 @@ var MainGallery = function (_a) {
|
|
|
22310
22321
|
}) }), void 0) }), void 0));
|
|
22311
22322
|
};
|
|
22312
22323
|
|
|
22313
|
-
var GalleryContainer = newStyled.div(templateObject_1$
|
|
22314
|
-
var templateObject_1$
|
|
22324
|
+
var GalleryContainer = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n margin-left: 15px;\n"], ["\n margin-left: 15px;\n"])));
|
|
22325
|
+
var templateObject_1$6;
|
|
22315
22326
|
|
|
22316
22327
|
var getSelectedColorVariant = function (selectedValue, colorVariants) {
|
|
22317
22328
|
if (!selectedValue) {
|
|
@@ -22335,18 +22346,18 @@ var ProductGalleryMobileV6 = function (_a) {
|
|
|
22335
22346
|
return (jsxs$1(GalleryContainer, __assign$1({ ref: containerRef, "data-testid": "gallery-v6-container" }, { children: [jsx$1(MainGallery, { "data-testid": "gallery-v6-main", contents: mainGalleryImages, containerRef: containerRef, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag }, void 0), jsx$1(ColorVariantGallery, { "data-testid": "gallery-v6-color-variants", images: variantImages, selectedImage: selectedColorVariant, setSelectedImage: setSelectedColorVariant }, void 0)] }), void 0));
|
|
22336
22347
|
};
|
|
22337
22348
|
|
|
22338
|
-
var ScrollContainer = newStyled.div(templateObject_1$
|
|
22339
|
-
var TableElement$1 = newStyled.table(templateObject_2$
|
|
22340
|
-
var TableCell$1 = newStyled.td(templateObject_3$
|
|
22341
|
-
var TableHead$1 = newStyled.th(templateObject_4$
|
|
22342
|
-
var Label$1 = newStyled('div')(templateObject_5$
|
|
22349
|
+
var ScrollContainer = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"])));
|
|
22350
|
+
var TableElement$1 = newStyled.table(templateObject_2$5 || (templateObject_2$5 = __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; });
|
|
22351
|
+
var TableCell$1 = newStyled.td(templateObject_3$5 || (templateObject_3$5 = __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; });
|
|
22352
|
+
var TableHead$1 = newStyled.th(templateObject_4$4 || (templateObject_4$4 = __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; });
|
|
22353
|
+
var Label$1 = newStyled('div')(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
22343
22354
|
var TopLabel = newStyled(Label$1)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22344
22355
|
var LeftLabel = newStyled(Label$1)(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
22345
22356
|
var Container$3 = newStyled('div')(templateObject_8$3 || (templateObject_8$3 = __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"])));
|
|
22346
22357
|
var LabelText = newStyled('span')(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
22347
22358
|
var Column$1 = newStyled('div')(templateObject_10$3 || (templateObject_10$3 = __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"])));
|
|
22348
22359
|
var TableRow$1 = newStyled.tr(templateObject_11$2 || (templateObject_11$2 = __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; });
|
|
22349
|
-
var templateObject_1$
|
|
22360
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
22350
22361
|
|
|
22351
22362
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
22352
22363
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -22386,23 +22397,23 @@ var SizeChartTableV2 = function (_a) {
|
|
|
22386
22397
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
22387
22398
|
};
|
|
22388
22399
|
|
|
22389
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
22390
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
22391
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
22392
|
-
var Label = newStyled('div')(templateObject_4$
|
|
22393
|
-
newStyled(Label)(templateObject_5$
|
|
22400
|
+
var TableElement = newStyled.table(templateObject_1$4 || (templateObject_1$4 = __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'); });
|
|
22401
|
+
var TableCell = newStyled.td(templateObject_2$4 || (templateObject_2$4 = __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'); });
|
|
22402
|
+
var TableHead = newStyled.th(templateObject_3$4 || (templateObject_3$4 = __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'); });
|
|
22403
|
+
var Label = newStyled('div')(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
22404
|
+
newStyled(Label)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22394
22405
|
newStyled(Label)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
22395
22406
|
var Container$2 = newStyled('div')(templateObject_7$2 || (templateObject_7$2 = __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"])));
|
|
22396
22407
|
newStyled('span')(templateObject_8$2 || (templateObject_8$2 = __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"])));
|
|
22397
22408
|
var Column = newStyled('div')(templateObject_9$2 || (templateObject_9$2 = __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"])));
|
|
22398
22409
|
var TableRow = newStyled.tr(templateObject_10$2 || (templateObject_10$2 = __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"])));
|
|
22399
|
-
var Header = newStyled('div')(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
22400
|
-
var Parent = newStyled('div')(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
22410
|
+
var Header$1 = newStyled('div')(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
22411
|
+
var Parent$1 = newStyled('div')(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
22401
22412
|
var Arrow = newStyled('div')(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
22402
22413
|
var TableHeader = newStyled('thead')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
22403
22414
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
22404
22415
|
});
|
|
22405
|
-
var templateObject_1$
|
|
22416
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14;
|
|
22406
22417
|
|
|
22407
22418
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
22408
22419
|
// TODO: Refactor this color logic
|
|
@@ -22475,7 +22486,7 @@ var SizeChartTableV3 = function (_a) {
|
|
|
22475
22486
|
value: cell,
|
|
22476
22487
|
}); });
|
|
22477
22488
|
});
|
|
22478
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$2, { children: jsxs$1(Column, { children: [isMultilabel && (jsxs$1(Header, { children: [jsx$1("div", { children: trimmedYLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsx$1(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsx$1(TableRow, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxs$1("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsx$1("div", { children: trimmedXLabel }, void 0), jsx$1(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
22489
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent$1, __assign$1({ ref: containerRef }, { children: jsx$1(Container$2, { children: jsxs$1(Column, { children: [isMultilabel && (jsxs$1(Header$1, { children: [jsx$1("div", { children: trimmedYLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsx$1(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsx$1(TableRow, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxs$1("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsx$1("div", { children: trimmedXLabel }, void 0), jsx$1(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
22479
22490
|
backgroundColor: getCellColor(index, cell.value, true),
|
|
22480
22491
|
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsx$1("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsx$1(TableCell, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsx$1(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
22481
22492
|
};
|
|
@@ -22487,6 +22498,71 @@ var ArrowTip = function (_a) {
|
|
|
22487
22498
|
};
|
|
22488
22499
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
22489
22500
|
|
|
22501
|
+
var Parent = newStyled('div')(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n max-width: 100%;\n position: relative;\n overflow-x: auto;\n width: 850px;\n &::-webkit-scrollbar {\n display: none;\n }\n @media (max-width: 768px) {\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100%;\n position: relative;\n overflow-x: auto;\n width: 850px;\n &::-webkit-scrollbar {\n display: none;\n }\n @media (max-width: 768px) {\n -ms-overflow-style: none;\n }\n"])));
|
|
22502
|
+
var Header = newStyled.td(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n background: #f7ece4;\n padding: 12px 44px;\n width: 100%;\n text-align: left;\n border-radius: ", ";\n border: ", ";\n"], ["\n background: #f7ece4;\n padding: 12px 44px;\n width: 100%;\n text-align: left;\n border-radius: ", ";\n border: ", ";\n"])), function (props) { return (props.index === 0 ? '8px 8px 0 0' : 0); }, function (props) { return (props.index === 0 ? '0' : '0.5px solid #BBBBBB'); });
|
|
22503
|
+
var TableContainer = newStyled.tbody(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n width: fit-content;\n border-collapse: collapse;\n"], ["\n width: fit-content;\n border-collapse: collapse;\n"])));
|
|
22504
|
+
var Cell = newStyled.td(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n text-align: center;\n padding: 20px;\n border: 0.5px solid #bbbbbb;\n background-color: ", ";\n white-space: nowrap;\n font-weight: 600;\n font-size: 14px;\n width: 85px;\n max-width: 85px;\n box-sizing: border-box;\n ", "\n"], ["\n text-align: center;\n padding: 20px;\n border: 0.5px solid #bbbbbb;\n background-color: ", ";\n white-space: nowrap;\n font-weight: 600;\n font-size: 14px;\n width: 85px;\n max-width: 85px;\n box-sizing: border-box;\n ", "\n"])), function (props) { return props.background; }, function (props) {
|
|
22505
|
+
return props.isSticky &&
|
|
22506
|
+
"\n position: sticky;\n z-index: 3;\n left:0;\n ";
|
|
22507
|
+
});
|
|
22508
|
+
var SharedRowCell = newStyled(Cell)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n padding: 0 6px;\n p {\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n }\n"], ["\n padding: 0 6px;\n p {\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n }\n"])));
|
|
22509
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$2;
|
|
22510
|
+
|
|
22511
|
+
var BACKGROUND_COLORS = [
|
|
22512
|
+
'#FAFAFA',
|
|
22513
|
+
'#EDF6FC',
|
|
22514
|
+
'#FBDFDA',
|
|
22515
|
+
'#FFE6C2',
|
|
22516
|
+
'#F5DAFC',
|
|
22517
|
+
'#F9DFDC',
|
|
22518
|
+
'#E4F1EA',
|
|
22519
|
+
'#EDF6FC',
|
|
22520
|
+
'#F5E9E0',
|
|
22521
|
+
'#FFE6C2',
|
|
22522
|
+
];
|
|
22523
|
+
function getCellBackground(index, data, rowLength, theme) {
|
|
22524
|
+
if (!data) {
|
|
22525
|
+
return theme.colors.shades['white'].color;
|
|
22526
|
+
}
|
|
22527
|
+
var isSharedFirstCell = rowLength < 10;
|
|
22528
|
+
return (BACKGROUND_COLORS[isSharedFirstCell ? index + 1 : index] || theme.colors.shades['white'].color);
|
|
22529
|
+
}
|
|
22530
|
+
function getCellIsSticky(index, rowLength) {
|
|
22531
|
+
return index === 0 && rowLength === 10;
|
|
22532
|
+
}
|
|
22533
|
+
var isDataCell = function (cell) {
|
|
22534
|
+
return typeof cell === 'object' && cell !== null && 'content' in cell;
|
|
22535
|
+
};
|
|
22536
|
+
function parseCellContent(content) {
|
|
22537
|
+
var cellContentChunks = content.split(/ (=) /);
|
|
22538
|
+
return (jsx$1(Fragment$1, { children: cellContentChunks.map(function (data, i) { return (jsx$1(Text$7, __assign$1({ variant: "body", style: i === cellContentChunks.length - 1 ? {} : { marginBottom: '5px' } }, { children: data }), "shared-cell-text-".concat(data, "-").concat(i))); }) }, void 0));
|
|
22539
|
+
}
|
|
22540
|
+
|
|
22541
|
+
var SCROLL_END_THRESHOLD = 0.92;
|
|
22542
|
+
var SizeChartTableV4 = function (_a) {
|
|
22543
|
+
var data = _a.data;
|
|
22544
|
+
var theme = useTheme();
|
|
22545
|
+
var containerRef = useRef(null);
|
|
22546
|
+
var _b = useState(false), isAtScrollEnd = _b[0], setIsAtScrollEnd = _b[1];
|
|
22547
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
22548
|
+
useEffect(function () {
|
|
22549
|
+
var handleScroll = function () {
|
|
22550
|
+
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
22551
|
+
var maxScroll = scrollWidth - clientWidth;
|
|
22552
|
+
var isAtEnd = scrollLeft >= maxScroll * SCROLL_END_THRESHOLD;
|
|
22553
|
+
setIsAtScrollEnd(isAtEnd);
|
|
22554
|
+
};
|
|
22555
|
+
var container = containerRef.current;
|
|
22556
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll);
|
|
22557
|
+
return function () {
|
|
22558
|
+
container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
|
|
22559
|
+
};
|
|
22560
|
+
}, []);
|
|
22561
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: data.map(function (table, index) { return (jsxs$1(TableContainer, { children: [jsx$1("thead", { children: jsx$1("tr", { children: jsx$1(Header, __assign$1({ index: index, colSpan: 10 }, { children: jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: table.header }), void 0) }), void 0) }, void 0) }, void 0), jsx$1("tbody", { children: table.data.map(function (row, rowIndex) { return (jsx$1("tr", { children: row.map(function (cell, cellIndex) {
|
|
22562
|
+
return isDataCell(cell) ? (jsx$1(SharedRowCell, __assign$1({ rowSpan: cell.rowSpan, background: getCellBackground(cellIndex, cell.content, row.length, theme), isSticky: getCellIsSticky(cellIndex, row.length) }, { children: parseCellContent(cell.content) }), "cell-".concat(index, "-").concat(rowIndex, "-").concat(cellIndex))) : (jsx$1(Cell, __assign$1({ background: getCellBackground(cellIndex, cell, row.length, theme), isSticky: getCellIsSticky(cellIndex, row.length) }, { children: cell }), "cell-".concat(index, "-").concat(rowIndex, "-").concat(cellIndex)));
|
|
22563
|
+
}) }, "row-".concat(index, "-").concat(rowIndex))); }) }, void 0)] }, "table-container-".concat(index))); }) }), void 0), isMobile && jsx$1(ArrowTip$1, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
22564
|
+
};
|
|
22565
|
+
|
|
22490
22566
|
var FlexContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
22491
22567
|
var theme = _a.theme;
|
|
22492
22568
|
return theme.name === 'TheSpaDr' &&
|
|
@@ -22695,5 +22771,5 @@ function TwoCtasAtCart(_a) {
|
|
|
22695
22771
|
return (jsxs$1(Container, __assign$1({ id: "twoCtasAtCart" }, { children: [jsx$1(TitleWrapper, __assign$1({ id: "twoCtasAtCartTitle" }, { children: title }), void 0), jsx$1(ButtonPrimary, { onClick: saveMoreButtonAction, text: saveMoreButtonLabel, wide: true }, void 0), jsxs$1(BodyContainer, { children: [jsx$1(GridContainer, __assign$1({ style: { marginTop: '8px' } }, { children: descriptions.map(function (description, index) { return (jsx$1(DescriptionItem, { text: description.text, smallerText: description.smallerText, iconName: description === null || description === void 0 ? void 0 : description.iconName, type: description === null || description === void 0 ? void 0 : description.type, link: description === null || description === void 0 ? void 0 : description.link }, "".concat(description.text, "-").concat(index))); }) }), void 0), bottomCopy && jsx$1(BottomCopyWrapper, { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }, void 0), jsx$1(OutLineButtonContainer, { children: version === BottomButtonVersionsTypes.link ? (jsx$1(SaveLessLinkButton, __assign$1({ href: "#", onClick: saveLessButtonAction }, { children: saveLessButtonLabel }), void 0)) : (jsx$1(BtnOutlineWrapper, { wide: true, onClick: saveLessButtonAction, text: saveLessButtonLabel }, void 0)) }, void 0)] }), void 0));
|
|
22696
22772
|
}
|
|
22697
22773
|
|
|
22698
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipPdpCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferAtCartV3, OfferAtCartV4, OfferAtPDP, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, PriceLabelV5, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProductGalleryMobileV6, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, TwoCtasAtCart, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, debounce$1 as debounce, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22774
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, ArrowTip$1 as ArrowTip, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipPdpCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferAtCartV3, OfferAtCartV4, OfferAtPDP, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, PriceLabelV5, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProductGalleryMobileV6, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeChartTableV4, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, TwoCtasAtCart, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, debounce$1 as debounce, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22699
22775
|
//# sourceMappingURL=index.esm.js.map
|