@trafilea/afrodita-components 6.30.1 → 6.30.2
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 +61 -53
- package/build/index.esm.js +579 -488
- package/build/index.esm.js.map +1 -1
- package/build/index.js +579 -487
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3181,7 +3181,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3181
3181
|
};
|
|
3182
3182
|
}
|
|
3183
3183
|
};
|
|
3184
|
-
var Container$
|
|
3184
|
+
var Container$1k = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3185
3185
|
var backgroundColor = _a.backgroundColor;
|
|
3186
3186
|
return backgroundColor;
|
|
3187
3187
|
}, function (_a) {
|
|
@@ -3203,7 +3203,7 @@ var Container$1j = newStyled.div(templateObject_1$2c || (templateObject_1$2c = _
|
|
|
3203
3203
|
var size = _a.size;
|
|
3204
3204
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3205
3205
|
});
|
|
3206
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3206
|
+
var H3$3 = newStyled.h3(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3207
3207
|
var textColor = _a.textColor;
|
|
3208
3208
|
return textColor;
|
|
3209
3209
|
}, function (_a) {
|
|
@@ -3218,9 +3218,9 @@ var H3$3 = newStyled.h3(templateObject_2$1w || (templateObject_2$1w = __makeTemp
|
|
|
3218
3218
|
var ClubOfferTag = function (_a) {
|
|
3219
3219
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
3220
3220
|
var theme = useTheme();
|
|
3221
|
-
return (jsx$1(Container$
|
|
3221
|
+
return (jsx$1(Container$1k, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3222
3222
|
};
|
|
3223
|
-
var templateObject_1$
|
|
3223
|
+
var templateObject_1$2d, templateObject_2$1x;
|
|
3224
3224
|
|
|
3225
3225
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3226
3226
|
var _a, _b, _c;
|
|
@@ -3251,7 +3251,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3251
3251
|
};
|
|
3252
3252
|
}
|
|
3253
3253
|
};
|
|
3254
|
-
var Container$
|
|
3254
|
+
var Container$1j = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3255
3255
|
var backgroundColor = _a.backgroundColor;
|
|
3256
3256
|
return backgroundColor;
|
|
3257
3257
|
}, function (_a) {
|
|
@@ -3273,7 +3273,7 @@ var Container$1i = newStyled.div(templateObject_1$2b || (templateObject_1$2b = _
|
|
|
3273
3273
|
var size = _a.size;
|
|
3274
3274
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3275
3275
|
});
|
|
3276
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3276
|
+
var H3$2 = newStyled.h3(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3277
3277
|
var textColor = _a.textColor;
|
|
3278
3278
|
return textColor;
|
|
3279
3279
|
}, function (_a) {
|
|
@@ -3288,9 +3288,9 @@ var H3$2 = newStyled.h3(templateObject_2$1v || (templateObject_2$1v = __makeTemp
|
|
|
3288
3288
|
var DiscountTag$2 = function (_a) {
|
|
3289
3289
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3290
3290
|
var theme = useTheme();
|
|
3291
|
-
return (jsx$1(Container$
|
|
3291
|
+
return (jsx$1(Container$1j, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3292
3292
|
};
|
|
3293
|
-
var templateObject_1$
|
|
3293
|
+
var templateObject_1$2c, templateObject_2$1w;
|
|
3294
3294
|
|
|
3295
3295
|
var Viewports = {
|
|
3296
3296
|
mobile: 'mobile',
|
|
@@ -3399,8 +3399,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3399
3399
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3400
3400
|
}
|
|
3401
3401
|
};
|
|
3402
|
-
var Container$
|
|
3403
|
-
var Price = newStyled.p(templateObject_2$
|
|
3402
|
+
var Container$1i = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3403
|
+
var Price = newStyled.p(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3404
3404
|
var weight = _a.weight;
|
|
3405
3405
|
return (weight ? weight : '400');
|
|
3406
3406
|
}, function (_a) {
|
|
@@ -3424,7 +3424,7 @@ var Price = newStyled.p(templateObject_2$1u || (templateObject_2$1u = __makeTemp
|
|
|
3424
3424
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3425
3425
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3426
3426
|
});
|
|
3427
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3427
|
+
var TagContainer = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3428
3428
|
var _b;
|
|
3429
3429
|
var size = _a.size;
|
|
3430
3430
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3455,11 +3455,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3455
3455
|
: ComponentSize.XSmall;
|
|
3456
3456
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3457
3457
|
};
|
|
3458
|
-
return (jsxs$1(Container$
|
|
3458
|
+
return (jsxs$1(Container$1i, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3459
3459
|
};
|
|
3460
|
-
var templateObject_1$
|
|
3460
|
+
var templateObject_1$2b, templateObject_2$1v, templateObject_3$1a;
|
|
3461
3461
|
|
|
3462
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3462
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3463
3463
|
var PriceLabelV2$1 = function (_a) {
|
|
3464
3464
|
var _b;
|
|
3465
3465
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3512,7 +3512,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3512
3512
|
var savetoString = saveto.toFixed(2);
|
|
3513
3513
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3514
3514
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3515
|
-
return (jsxs$1(Container$
|
|
3515
|
+
return (jsxs$1(Container$1i, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3516
3516
|
marginTop: '-5px',
|
|
3517
3517
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3518
3518
|
? finalPriceArray[0]
|
|
@@ -3530,11 +3530,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3530
3530
|
lineHeight: '22px',
|
|
3531
3531
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3532
3532
|
};
|
|
3533
|
-
var templateObject_1$
|
|
3533
|
+
var templateObject_1$2a;
|
|
3534
3534
|
|
|
3535
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3536
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3537
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3535
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3536
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3537
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3538
3538
|
var PriceLabelV3 = function (_a) {
|
|
3539
3539
|
var _b;
|
|
3540
3540
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3589,7 +3589,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3589
3589
|
return null;
|
|
3590
3590
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3591
3591
|
};
|
|
3592
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3592
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1i, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1i, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3593
3593
|
marginTop: '-5px',
|
|
3594
3594
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3595
3595
|
marginTop: '-6px',
|
|
@@ -3605,9 +3605,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3605
3605
|
lineHeight: '22px',
|
|
3606
3606
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3607
3607
|
};
|
|
3608
|
-
var templateObject_1$
|
|
3608
|
+
var templateObject_1$29, templateObject_2$1u, templateObject_3$19;
|
|
3609
3609
|
|
|
3610
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3610
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3611
3611
|
var PriceLabel = function (_a) {
|
|
3612
3612
|
var _b;
|
|
3613
3613
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3635,15 +3635,15 @@ var PriceLabel = function (_a) {
|
|
|
3635
3635
|
};
|
|
3636
3636
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3637
3637
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3638
|
-
return (jsxs$1(Container$
|
|
3638
|
+
return (jsxs$1(Container$1i, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3639
3639
|
marginTop: '-5px',
|
|
3640
3640
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3641
3641
|
marginTop: '-6px',
|
|
3642
3642
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3643
3643
|
};
|
|
3644
|
-
var templateObject_1$
|
|
3644
|
+
var templateObject_1$28;
|
|
3645
3645
|
|
|
3646
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3646
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3647
3647
|
var PriceLabelV2 = function (_a) {
|
|
3648
3648
|
var _b;
|
|
3649
3649
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3674,13 +3674,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3674
3674
|
var finalPriceString = finalPriceArray[0]
|
|
3675
3675
|
? finalPriceArray[0]
|
|
3676
3676
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3677
|
-
return (jsxs$1(Container$
|
|
3677
|
+
return (jsxs$1(Container$1i, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3678
3678
|
};
|
|
3679
|
-
var templateObject_1$
|
|
3679
|
+
var templateObject_1$27;
|
|
3680
3680
|
|
|
3681
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
3682
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3683
|
-
var templateObject_1$
|
|
3681
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3682
|
+
var ImgWrapper = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3683
|
+
var templateObject_1$26, templateObject_2$1t;
|
|
3684
3684
|
|
|
3685
3685
|
function ClubPriceMemberLabel(_a) {
|
|
3686
3686
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3689,7 +3689,7 @@ function ClubPriceMemberLabel(_a) {
|
|
|
3689
3689
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$1, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3690
3690
|
}
|
|
3691
3691
|
|
|
3692
|
-
var Container$
|
|
3692
|
+
var Container$1h = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3693
3693
|
var height = _a.height;
|
|
3694
3694
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3695
3695
|
}, function (_a) {
|
|
@@ -3714,11 +3714,11 @@ var Container$1g = newStyled.div(templateObject_1$24 || (templateObject_1$24 = _
|
|
|
3714
3714
|
var SkeletonBox = function (_a) {
|
|
3715
3715
|
var width = _a.width, height = _a.height;
|
|
3716
3716
|
var theme = useTheme();
|
|
3717
|
-
return jsx$1(Container$
|
|
3717
|
+
return jsx$1(Container$1h, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3718
3718
|
};
|
|
3719
|
-
var templateObject_1$
|
|
3719
|
+
var templateObject_1$25;
|
|
3720
3720
|
|
|
3721
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3721
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3722
3722
|
var width = _a.width;
|
|
3723
3723
|
return width;
|
|
3724
3724
|
}, function (_a) {
|
|
@@ -3734,7 +3734,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$23 || (templateObject_1$23
|
|
|
3734
3734
|
var opacity = _a.opacity;
|
|
3735
3735
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3736
3736
|
});
|
|
3737
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3737
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3738
3738
|
var width = _a.width;
|
|
3739
3739
|
return width;
|
|
3740
3740
|
}, function (_a) {
|
|
@@ -3747,7 +3747,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1r || (templateObject_2$
|
|
|
3747
3747
|
var opacity = _a.opacity;
|
|
3748
3748
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3749
3749
|
});
|
|
3750
|
-
var templateObject_1$
|
|
3750
|
+
var templateObject_1$24, templateObject_2$1s;
|
|
3751
3751
|
|
|
3752
3752
|
/* eslint-disable no-undef */
|
|
3753
3753
|
var cache = new Map();
|
|
@@ -3923,7 +3923,7 @@ var buildImageUrl = function (_a) {
|
|
|
3923
3923
|
}
|
|
3924
3924
|
};
|
|
3925
3925
|
|
|
3926
|
-
var Img = newStyled.img(templateObject_1$
|
|
3926
|
+
var Img = newStyled.img(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3927
3927
|
var Image$3 = function (_a) {
|
|
3928
3928
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'async' : _d, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "decoding", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3929
3929
|
var config = useTheme().config;
|
|
@@ -3932,12 +3932,12 @@ var Image$3 = function (_a) {
|
|
|
3932
3932
|
: src;
|
|
3933
3933
|
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3934
3934
|
};
|
|
3935
|
-
var templateObject_1$
|
|
3935
|
+
var templateObject_1$23;
|
|
3936
3936
|
|
|
3937
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3938
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3939
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3940
|
-
var templateObject_1$
|
|
3937
|
+
var LabelWrapper = newStyled.label(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3938
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3939
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3940
|
+
var templateObject_1$22, templateObject_2$1r, templateObject_3$18;
|
|
3941
3941
|
|
|
3942
3942
|
var ToggleComponent = function (_a) {
|
|
3943
3943
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -4771,20 +4771,20 @@ function jsxs(type, props, key) {
|
|
|
4771
4771
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4772
4772
|
// `variants` styles that are consistent through all themes.
|
|
4773
4773
|
var TAGS = {
|
|
4774
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4775
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4776
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4777
|
-
display1: newStyled.h1(templateObject_4$
|
|
4778
|
-
display2: newStyled.h2(templateObject_5$
|
|
4779
|
-
display3: newStyled.h3(templateObject_6$
|
|
4780
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4781
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4782
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4783
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4784
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4785
|
-
heading6: newStyled.h6(templateObject_12$
|
|
4786
|
-
heading7: newStyled.h1(templateObject_13$
|
|
4787
|
-
heading8: newStyled.h1(templateObject_14$
|
|
4774
|
+
hero1: newStyled.h1(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject([""], [""]))),
|
|
4775
|
+
hero2: newStyled.h2(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
hero3: newStyled.h3(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
display1: newStyled.h1(templateObject_4$V || (templateObject_4$V = __makeTemplateObject([""], [""]))),
|
|
4778
|
+
display2: newStyled.h2(templateObject_5$G || (templateObject_5$G = __makeTemplateObject([""], [""]))),
|
|
4779
|
+
display3: newStyled.h3(templateObject_6$B || (templateObject_6$B = __makeTemplateObject([""], [""]))),
|
|
4780
|
+
heading1: newStyled.h1(templateObject_7$r || (templateObject_7$r = __makeTemplateObject([""], [""]))),
|
|
4781
|
+
heading2: newStyled.h2(templateObject_8$m || (templateObject_8$m = __makeTemplateObject([""], [""]))),
|
|
4782
|
+
heading3: newStyled.h3(templateObject_9$c || (templateObject_9$c = __makeTemplateObject([""], [""]))),
|
|
4783
|
+
heading4: newStyled.h4(templateObject_10$b || (templateObject_10$b = __makeTemplateObject([""], [""]))),
|
|
4784
|
+
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
4785
|
+
heading6: newStyled.h6(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject([""], [""]))),
|
|
4786
|
+
heading7: newStyled.h1(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""]))),
|
|
4787
|
+
heading8: newStyled.h1(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject([""], [""]))),
|
|
4788
4788
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
4789
4789
|
link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4790
4790
|
button: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
@@ -4907,17 +4907,17 @@ var DEFAULTS = {
|
|
|
4907
4907
|
size: 'regular',
|
|
4908
4908
|
},
|
|
4909
4909
|
};
|
|
4910
|
-
var templateObject_1$
|
|
4911
|
-
|
|
4912
|
-
var Container$
|
|
4913
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4914
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4915
|
-
var Label$
|
|
4916
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4917
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4910
|
+
var templateObject_1$21, templateObject_2$1q, templateObject_3$17, templateObject_4$V, templateObject_5$G, templateObject_6$B, templateObject_7$r, templateObject_8$m, templateObject_9$c, templateObject_10$b, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4911
|
+
|
|
4912
|
+
var Container$1g = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4913
|
+
var Card$4 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4914
|
+
var Tag$2 = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4915
|
+
var Label$7 = newStyled.div(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4916
|
+
var Check$1 = newStyled.div(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4917
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4918
4918
|
var PackSelectorV2 = function (_a) {
|
|
4919
4919
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4920
|
-
return (jsx$1(Container$
|
|
4920
|
+
return (jsx$1(Container$1g, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4921
4921
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4922
4922
|
}) }), void 0));
|
|
4923
4923
|
};
|
|
@@ -4931,7 +4931,7 @@ var PackCard$1 = function (_a) {
|
|
|
4931
4931
|
.then(function (icon) { return setIcon(icon); })
|
|
4932
4932
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4933
4933
|
}, [pack.meta.icon]);
|
|
4934
|
-
return (jsxs$1(Card$4, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$
|
|
4934
|
+
return (jsxs$1(Card$4, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$7, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4935
4935
|
locale: 'en-US',
|
|
4936
4936
|
currency: currencyCode || 'USD',
|
|
4937
4937
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4939,27 +4939,27 @@ var PackCard$1 = function (_a) {
|
|
|
4939
4939
|
currency: currencyCode || 'USD',
|
|
4940
4940
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4941
4941
|
};
|
|
4942
|
-
var templateObject_1$
|
|
4942
|
+
var templateObject_1$20, templateObject_2$1p, templateObject_3$16, templateObject_4$U, templateObject_5$F, templateObject_6$A;
|
|
4943
4943
|
|
|
4944
|
-
var Container$
|
|
4945
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4944
|
+
var Container$1f = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4945
|
+
var DropContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4946
4946
|
var DropList = function (_a) {
|
|
4947
4947
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4948
|
-
return (jsx$1(Container$
|
|
4948
|
+
return (jsx$1(Container$1f, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4949
4949
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4950
4950
|
}) }, void 0));
|
|
4951
4951
|
};
|
|
4952
|
-
var templateObject_1$
|
|
4952
|
+
var templateObject_1$1$, templateObject_2$1o;
|
|
4953
4953
|
|
|
4954
4954
|
var DROPS_TOTAL = 5;
|
|
4955
|
-
var Container$
|
|
4956
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4957
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4955
|
+
var Container$1e = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4956
|
+
var Title$b = newStyled.p(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4957
|
+
var Description$3 = newStyled.p(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4958
4958
|
var AbsorbencyLevel = function (_a) {
|
|
4959
4959
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4960
|
-
return (jsxs$1(Container$
|
|
4960
|
+
return (jsxs$1(Container$1e, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4961
4961
|
};
|
|
4962
|
-
var templateObject_1$
|
|
4962
|
+
var templateObject_1$1_, templateObject_2$1n, templateObject_3$15;
|
|
4963
4963
|
|
|
4964
4964
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4965
4965
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5035,7 +5035,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5035
5035
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5036
5036
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5037
5037
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5038
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5038
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5039
5039
|
var Accordion$1 = function (_a) {
|
|
5040
5040
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5041
5041
|
var theme = useTheme();
|
|
@@ -5059,9 +5059,9 @@ var Accordion$1 = function (_a) {
|
|
|
5059
5059
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5060
5060
|
} }), void 0));
|
|
5061
5061
|
};
|
|
5062
|
-
var templateObject_1$
|
|
5062
|
+
var templateObject_1$1Z;
|
|
5063
5063
|
|
|
5064
|
-
var Container$
|
|
5064
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5065
5065
|
var AccordionOptions = function (_a) {
|
|
5066
5066
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5067
5067
|
var _b = useState({
|
|
@@ -5074,7 +5074,7 @@ var AccordionOptions = function (_a) {
|
|
|
5074
5074
|
}
|
|
5075
5075
|
return false;
|
|
5076
5076
|
};
|
|
5077
|
-
return (jsx$1(Container$
|
|
5077
|
+
return (jsx$1(Container$1d, { children: accordions.map(function (accordion, index) {
|
|
5078
5078
|
var forceOpenValue = getForceOpen(index);
|
|
5079
5079
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5080
5080
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5085,7 +5085,7 @@ var AccordionOptions = function (_a) {
|
|
|
5085
5085
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5086
5086
|
}) }, void 0));
|
|
5087
5087
|
};
|
|
5088
|
-
var templateObject_1$
|
|
5088
|
+
var templateObject_1$1Y;
|
|
5089
5089
|
|
|
5090
5090
|
/**
|
|
5091
5091
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5221,27 +5221,27 @@ var isValidDate = function (value) {
|
|
|
5221
5221
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5222
5222
|
};
|
|
5223
5223
|
|
|
5224
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5225
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5226
|
-
var templateObject_1$
|
|
5224
|
+
var Bold = newStyled.span(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5225
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5226
|
+
var templateObject_1$1X, templateObject_2$1m;
|
|
5227
5227
|
|
|
5228
|
-
var Container$
|
|
5228
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5229
5229
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5230
5230
|
return width;
|
|
5231
5231
|
}, function (_a) {
|
|
5232
5232
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5233
5233
|
return height;
|
|
5234
5234
|
});
|
|
5235
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5236
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5237
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5238
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5239
|
-
var templateObject_1$
|
|
5235
|
+
var FlexCentered = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5236
|
+
var LeftSide = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5237
|
+
var RightSide = newStyled.div(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5238
|
+
var FlexStart = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5239
|
+
var templateObject_1$1W, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$E;
|
|
5240
5240
|
|
|
5241
5241
|
var CouponCard = function (_a) {
|
|
5242
5242
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
5243
5243
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5244
|
-
return (jsxs$1(Container$
|
|
5244
|
+
return (jsxs$1(Container$1c, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () {
|
|
5245
5245
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5246
5246
|
setShowCoupon(function (prev) { return !prev; });
|
|
5247
5247
|
} }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
@@ -5292,14 +5292,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5292
5292
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5293
5293
|
};
|
|
5294
5294
|
|
|
5295
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5296
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5295
|
+
var ErrorText = newStyled.h3(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5296
|
+
var ErrorContainer = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5297
5297
|
var Error$1 = function (_a) {
|
|
5298
5298
|
var error = _a.error;
|
|
5299
5299
|
var theme = useTheme();
|
|
5300
5300
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5301
5301
|
};
|
|
5302
|
-
var templateObject_1$
|
|
5302
|
+
var templateObject_1$1V, templateObject_2$1k;
|
|
5303
5303
|
|
|
5304
5304
|
var BaseSelectButton = function (_a) {
|
|
5305
5305
|
var children = _a.children, as = _a.as;
|
|
@@ -5316,7 +5316,7 @@ function BaseSelectOption(_a) {
|
|
|
5316
5316
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5317
5317
|
}
|
|
5318
5318
|
|
|
5319
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5319
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5320
5320
|
function BaseSelect(_a) {
|
|
5321
5321
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5322
5322
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5326,7 +5326,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5326
5326
|
Options: BaseSelectOptions,
|
|
5327
5327
|
Option: BaseSelectOption,
|
|
5328
5328
|
});
|
|
5329
|
-
var templateObject_1$
|
|
5329
|
+
var templateObject_1$1U;
|
|
5330
5330
|
|
|
5331
5331
|
var CustomButton = newStyled.button(function (_a) {
|
|
5332
5332
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5365,7 +5365,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5365
5365
|
});
|
|
5366
5366
|
});
|
|
5367
5367
|
// TODO Remove this when we find the real solution
|
|
5368
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5368
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5369
5369
|
var open = _a.open;
|
|
5370
5370
|
return open &&
|
|
5371
5371
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5385,7 +5385,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5385
5385
|
} }), void 0));
|
|
5386
5386
|
};
|
|
5387
5387
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5388
|
-
var templateObject_1$
|
|
5388
|
+
var templateObject_1$1T;
|
|
5389
5389
|
|
|
5390
5390
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5391
5391
|
var theme = _a.theme;
|
|
@@ -5463,7 +5463,7 @@ var StyledLabel$4 = newStyled.label(baseStyles, function (props) { return [
|
|
|
5463
5463
|
Styles[props.variant](props.theme),
|
|
5464
5464
|
Styles[props.size](props.theme),
|
|
5465
5465
|
]; });
|
|
5466
|
-
var Label$
|
|
5466
|
+
var Label$6 = function (_a) {
|
|
5467
5467
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
5468
5468
|
var theme = useTheme();
|
|
5469
5469
|
return (jsx$1(StyledLabel$4, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
@@ -5552,7 +5552,7 @@ var CustomCheckboxStyles = {
|
|
|
5552
5552
|
},
|
|
5553
5553
|
};
|
|
5554
5554
|
|
|
5555
|
-
var Container$
|
|
5555
|
+
var Container$1b = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5556
5556
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5557
5557
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5558
5558
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5563,7 +5563,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5563
5563
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5564
5564
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5565
5565
|
]; });
|
|
5566
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5566
|
+
var Input$5 = newStyled.input(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5567
5567
|
var disabled = _a.disabled;
|
|
5568
5568
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5569
5569
|
});
|
|
@@ -5577,9 +5577,9 @@ var Checkbox = function (_a) {
|
|
|
5577
5577
|
}
|
|
5578
5578
|
onChange(e.target.checked);
|
|
5579
5579
|
};
|
|
5580
|
-
return (jsxs$1(Container$
|
|
5580
|
+
return (jsxs$1(Container$1b, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5581
5581
|
};
|
|
5582
|
-
var templateObject_1$
|
|
5582
|
+
var templateObject_1$1S, templateObject_2$1j;
|
|
5583
5583
|
|
|
5584
5584
|
var CustomOption = newStyled.li(function (_a) {
|
|
5585
5585
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5628,9 +5628,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5628
5628
|
Option: BaseDropdownOption,
|
|
5629
5629
|
});
|
|
5630
5630
|
|
|
5631
|
-
var Container$
|
|
5632
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5633
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5631
|
+
var Container$1a = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject([""], [""])));
|
|
5632
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5633
|
+
var SelectedOption = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5634
5634
|
var fontWeight = _a.fontWeight;
|
|
5635
5635
|
return fontWeight || '';
|
|
5636
5636
|
});
|
|
@@ -5662,10 +5662,10 @@ function SimpleDropdown(_a) {
|
|
|
5662
5662
|
}
|
|
5663
5663
|
setSelectedValue(value);
|
|
5664
5664
|
}, [value, options, initialValue]);
|
|
5665
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5665
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1a : Fragment$1;
|
|
5666
5666
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5667
5667
|
}
|
|
5668
|
-
var templateObject_1$
|
|
5668
|
+
var templateObject_1$1R, templateObject_2$1i, templateObject_3$13;
|
|
5669
5669
|
|
|
5670
5670
|
/* base styles & size variants */
|
|
5671
5671
|
var CustomRadioStyles$2 = {
|
|
@@ -5730,9 +5730,9 @@ var ContainerStyles$2 = {
|
|
|
5730
5730
|
},
|
|
5731
5731
|
};
|
|
5732
5732
|
|
|
5733
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5734
|
-
var Container$
|
|
5735
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5733
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5734
|
+
var Container$19 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5735
|
+
var Input$4 = newStyled.input(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5736
5736
|
var disabled = _a.disabled;
|
|
5737
5737
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5738
5738
|
});
|
|
@@ -5740,14 +5740,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5740
5740
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5741
5741
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5742
5742
|
]; });
|
|
5743
|
-
var StyledLabel$3 = newStyled(Label$
|
|
5743
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5744
5744
|
var theme = _a.theme;
|
|
5745
5745
|
return theme.component.radio.textSize;
|
|
5746
5746
|
}, function (_a) {
|
|
5747
5747
|
var theme = _a.theme;
|
|
5748
5748
|
return theme.component.radio.lineHeight;
|
|
5749
5749
|
});
|
|
5750
|
-
var StyledLabelV2 = newStyled(Label$
|
|
5750
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5751
5751
|
var theme = _a.theme;
|
|
5752
5752
|
return theme.component.radio.textSize;
|
|
5753
5753
|
}, function (_a) {
|
|
@@ -5761,9 +5761,9 @@ var RadioInput = function (_a) {
|
|
|
5761
5761
|
var value = event.currentTarget.value;
|
|
5762
5762
|
onChange({ value: value, label: label });
|
|
5763
5763
|
};
|
|
5764
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5764
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$19, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5765
5765
|
};
|
|
5766
|
-
var templateObject_1$
|
|
5766
|
+
var templateObject_1$1Q, templateObject_2$1h, templateObject_3$12, templateObject_4$S;
|
|
5767
5767
|
|
|
5768
5768
|
var useOnClickOutside = function (ref, handler) {
|
|
5769
5769
|
useEffect(function () {
|
|
@@ -5856,7 +5856,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5856
5856
|
}
|
|
5857
5857
|
};
|
|
5858
5858
|
|
|
5859
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5859
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5860
5860
|
var position = _a.position;
|
|
5861
5861
|
return getWrapperFlexDirection(position);
|
|
5862
5862
|
}, function (_a) {
|
|
@@ -5866,7 +5866,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __ma
|
|
|
5866
5866
|
var disableHover = _a.disableHover;
|
|
5867
5867
|
return (disableHover ? 0 : 1);
|
|
5868
5868
|
});
|
|
5869
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5869
|
+
var TooltipContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5870
5870
|
var position = _a.position;
|
|
5871
5871
|
return getContainerFlexDirection(position);
|
|
5872
5872
|
}, function (_a) {
|
|
@@ -5894,14 +5894,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
5894
5894
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5895
5895
|
return actual === expected ? margin : '0';
|
|
5896
5896
|
};
|
|
5897
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5897
|
+
var ContentWrapper = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5898
5898
|
var borderColor = _a.borderColor;
|
|
5899
5899
|
return borderColor;
|
|
5900
5900
|
}, function (_a) {
|
|
5901
5901
|
var backgroundColor = _a.backgroundColor;
|
|
5902
5902
|
return backgroundColor;
|
|
5903
5903
|
});
|
|
5904
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5904
|
+
var TooltipText = newStyled.div(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5905
5905
|
var theme = _a.theme;
|
|
5906
5906
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5907
5907
|
}, function (_a) {
|
|
@@ -5911,17 +5911,17 @@ var TooltipText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __ma
|
|
|
5911
5911
|
var color = _a.color;
|
|
5912
5912
|
return color;
|
|
5913
5913
|
});
|
|
5914
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5915
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5914
|
+
var TopSection = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5915
|
+
var Title$a = newStyled.h1(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5916
5916
|
var color = _a.color;
|
|
5917
5917
|
return color;
|
|
5918
5918
|
});
|
|
5919
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5920
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5919
|
+
var IconContainer$5 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5920
|
+
var CloseToolTip = newStyled.button(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5921
5921
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5922
5922
|
return right;
|
|
5923
5923
|
});
|
|
5924
|
-
var templateObject_1$
|
|
5924
|
+
var templateObject_1$1P, templateObject_2$1g, templateObject_3$11, templateObject_4$R, templateObject_5$D, templateObject_6$z, templateObject_7$q, templateObject_8$l;
|
|
5925
5925
|
|
|
5926
5926
|
var Tooltip = function (_a) {
|
|
5927
5927
|
var _b;
|
|
@@ -5964,8 +5964,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5964
5964
|
};
|
|
5965
5965
|
};
|
|
5966
5966
|
|
|
5967
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5968
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5967
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5968
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5969
5969
|
var selected = _a.selected, theme = _a.theme;
|
|
5970
5970
|
return selected
|
|
5971
5971
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5979,30 +5979,30 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1e || (templateObject_2$1e
|
|
|
5979
5979
|
var theme = _a.theme;
|
|
5980
5980
|
return theme.colors.pallete.primary.color;
|
|
5981
5981
|
});
|
|
5982
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3
|
|
5982
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5983
5983
|
var onClick = _a.onClick;
|
|
5984
5984
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5985
5985
|
});
|
|
5986
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
5987
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
5986
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5987
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5988
5988
|
var theme = _a.theme;
|
|
5989
5989
|
return theme.colors.shades[200].color;
|
|
5990
5990
|
}, function (_a) {
|
|
5991
5991
|
var theme = _a.theme;
|
|
5992
5992
|
return theme.colors.pallete.primary.color;
|
|
5993
5993
|
});
|
|
5994
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
5995
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
5996
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_8$
|
|
5997
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5998
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5999
|
-
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$
|
|
6000
|
-
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$
|
|
5994
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5995
|
+
var Benefit$2 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5996
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5997
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5998
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5999
|
+
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6000
|
+
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6001
6001
|
var selected = _a.selected, theme = _a.theme;
|
|
6002
6002
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6003
6003
|
});
|
|
6004
|
-
var Container$
|
|
6005
|
-
var templateObject_1$
|
|
6004
|
+
var Container$18 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6005
|
+
var templateObject_1$1O, templateObject_2$1f, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6006
6006
|
|
|
6007
6007
|
var radioIds$2 = {
|
|
6008
6008
|
oneTime: {
|
|
@@ -6052,17 +6052,17 @@ var Autoship = function (_a) {
|
|
|
6052
6052
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6053
6053
|
};
|
|
6054
6054
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6055
|
-
return (jsxs$1(Container$
|
|
6055
|
+
return (jsxs$1(Container$18, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$2, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$2, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$2, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$2, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$2, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$2, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6056
6056
|
? benefitsColor.selected
|
|
6057
6057
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$2, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6058
6058
|
};
|
|
6059
6059
|
|
|
6060
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6060
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6061
6061
|
var theme = _a.theme;
|
|
6062
6062
|
return theme.name === 'TheSpaDr' &&
|
|
6063
6063
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6064
6064
|
});
|
|
6065
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6065
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6066
6066
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6067
6067
|
return isSelected
|
|
6068
6068
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6078,7 +6078,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6078
6078
|
}
|
|
6079
6079
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6080
6080
|
};
|
|
6081
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6081
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6082
6082
|
var selected = _a.selected, theme = _a.theme;
|
|
6083
6083
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6084
6084
|
}, function (_a) {
|
|
@@ -6090,32 +6090,32 @@ var ContainerBase$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ =
|
|
|
6090
6090
|
var theme = _a.theme;
|
|
6091
6091
|
return theme.colors.pallete.primary.color;
|
|
6092
6092
|
});
|
|
6093
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6093
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6094
6094
|
var onClick = _a.onClick;
|
|
6095
6095
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6096
6096
|
});
|
|
6097
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6098
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6097
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6098
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6099
6099
|
var theme = _a.theme;
|
|
6100
6100
|
return theme.colors.shades[200].color;
|
|
6101
6101
|
}, function (_a) {
|
|
6102
6102
|
var theme = _a.theme;
|
|
6103
6103
|
return theme.colors.pallete.primary.color;
|
|
6104
6104
|
});
|
|
6105
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6106
|
-
var Benefit$1 = newStyled.div(templateObject_8$
|
|
6107
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_9$
|
|
6108
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
6109
|
-
var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_11$
|
|
6105
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6106
|
+
var Benefit$1 = newStyled.div(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6107
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6108
|
+
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6109
|
+
var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6110
6110
|
var selected = _a.selected, theme = _a.theme;
|
|
6111
6111
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6112
6112
|
});
|
|
6113
|
-
var Container$
|
|
6114
|
-
var TooltipWrapper = newStyled.div(templateObject_13$
|
|
6113
|
+
var Container$17 = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6114
|
+
var TooltipWrapper = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6115
6115
|
var theme = _a.theme;
|
|
6116
6116
|
return theme.component.autoship.tooltip.margin;
|
|
6117
6117
|
});
|
|
6118
|
-
var templateObject_1$
|
|
6118
|
+
var templateObject_1$1N, templateObject_2$1e, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x, templateObject_7$o, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6119
6119
|
|
|
6120
6120
|
var radioIds$1 = {
|
|
6121
6121
|
oneTime: {
|
|
@@ -6175,7 +6175,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6175
6175
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6176
6176
|
};
|
|
6177
6177
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6178
|
-
return (jsxs$1(Container$
|
|
6178
|
+
return (jsxs$1(Container$17, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$1, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$1, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$1, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$1, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6179
6179
|
? benefitsColor.selected
|
|
6180
6180
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6181
6181
|
};
|
|
@@ -6193,13 +6193,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6193
6193
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6194
6194
|
_a$2);
|
|
6195
6195
|
|
|
6196
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6197
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6198
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6199
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6200
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6201
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6202
|
-
var templateObject_1$
|
|
6196
|
+
var CustomerDetails = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
6197
|
+
var CustomerInfo = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6198
|
+
var Name = newStyled.h4(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6199
|
+
var StarIconContainer = newStyled.div(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6200
|
+
var Description$2 = newStyled.p(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6201
|
+
var ReviewDays = newStyled.span(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6202
|
+
var templateObject_1$1M, templateObject_2$1d, templateObject_3$_, templateObject_4$O, templateObject_5$A, templateObject_6$w;
|
|
6203
6203
|
|
|
6204
6204
|
var NameWithStars = function (_a) {
|
|
6205
6205
|
var name = _a.name, size = _a.size;
|
|
@@ -6217,10 +6217,10 @@ var ResultFeedback = function (_a) {
|
|
|
6217
6217
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6218
6218
|
};
|
|
6219
6219
|
|
|
6220
|
-
var Container$
|
|
6221
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6222
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6223
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6220
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6221
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6222
|
+
var ImageCard = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6223
|
+
var UserInfoText = newStyled.div(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6224
6224
|
var theme = _a.theme;
|
|
6225
6225
|
return theme.colors.pallete.secondary.color;
|
|
6226
6226
|
}, function (_a) {
|
|
@@ -6230,7 +6230,7 @@ var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __m
|
|
|
6230
6230
|
var theme = _a.theme, size = _a.size;
|
|
6231
6231
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6232
6232
|
});
|
|
6233
|
-
var templateObject_1$
|
|
6233
|
+
var templateObject_1$1L, templateObject_2$1c, templateObject_3$Z, templateObject_4$N;
|
|
6234
6234
|
|
|
6235
6235
|
/* base styles & size variants */
|
|
6236
6236
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6305,10 +6305,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6305
6305
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6306
6306
|
var infoText = buildInfoText(name, age, months);
|
|
6307
6307
|
var Component = componentByVariant[variant];
|
|
6308
|
-
return (jsxs$1(Container$
|
|
6308
|
+
return (jsxs$1(Container$16, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6309
6309
|
};
|
|
6310
6310
|
|
|
6311
|
-
var Section = newStyled.div(templateObject_1$
|
|
6311
|
+
var Section = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6312
6312
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6313
6313
|
});
|
|
6314
6314
|
var CardHeader = function (_a) {
|
|
@@ -6319,16 +6319,16 @@ var CardFooter = function (_a) {
|
|
|
6319
6319
|
var children = _a.children;
|
|
6320
6320
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6321
6321
|
};
|
|
6322
|
-
var templateObject_1$
|
|
6322
|
+
var templateObject_1$1K;
|
|
6323
6323
|
|
|
6324
|
-
var Body = newStyled.div(templateObject_1$
|
|
6324
|
+
var Body = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6325
6325
|
var CardBody$1 = function (_a) {
|
|
6326
6326
|
var children = _a.children;
|
|
6327
6327
|
return jsx$1(Body, { children: children }, void 0);
|
|
6328
6328
|
};
|
|
6329
|
-
var templateObject_1$
|
|
6329
|
+
var templateObject_1$1J;
|
|
6330
6330
|
|
|
6331
|
-
var Container$
|
|
6331
|
+
var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6332
6332
|
var flex = _a.flex;
|
|
6333
6333
|
return flex &&
|
|
6334
6334
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6343,23 +6343,23 @@ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
6343
6343
|
var Card$2 = function (_a) {
|
|
6344
6344
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6345
6345
|
var theme = useTheme();
|
|
6346
|
-
return (jsx$1(Container$
|
|
6346
|
+
return (jsx$1(Container$15, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6347
6347
|
};
|
|
6348
6348
|
var Card$3 = Object.assign(Card$2, {
|
|
6349
6349
|
Header: CardHeader,
|
|
6350
6350
|
Footer: CardFooter,
|
|
6351
6351
|
Body: CardBody$1,
|
|
6352
6352
|
});
|
|
6353
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1I;
|
|
6354
6354
|
|
|
6355
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6356
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6357
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6355
|
+
var StyledWrapper = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6356
|
+
var StyledContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6357
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6358
6358
|
var color = _a.color;
|
|
6359
6359
|
return color;
|
|
6360
6360
|
});
|
|
6361
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6362
|
-
var templateObject_1$
|
|
6361
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6362
|
+
var templateObject_1$1H, templateObject_2$1b, templateObject_3$Y, templateObject_4$M;
|
|
6363
6363
|
|
|
6364
6364
|
var Minimalistic = function (_a) {
|
|
6365
6365
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6367,28 +6367,28 @@ var Minimalistic = function (_a) {
|
|
|
6367
6367
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6368
6368
|
};
|
|
6369
6369
|
|
|
6370
|
-
var Container$
|
|
6371
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6372
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6373
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6370
|
+
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6371
|
+
var Title$9 = newStyled.h1(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6372
|
+
var Details$1 = newStyled.span(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6373
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6374
6374
|
var Simple = function (_a) {
|
|
6375
6375
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6376
6376
|
var theme = useTheme();
|
|
6377
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6377
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$14, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6378
6378
|
};
|
|
6379
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1G, templateObject_2$1a, templateObject_3$X, templateObject_4$L;
|
|
6380
6380
|
|
|
6381
6381
|
var Bundle = {
|
|
6382
6382
|
Minimalistic: Minimalistic,
|
|
6383
6383
|
Simple: Simple,
|
|
6384
6384
|
};
|
|
6385
6385
|
|
|
6386
|
-
var Container$
|
|
6386
|
+
var Container$13 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6387
6387
|
var displayBNPL = _a.displayBNPL;
|
|
6388
6388
|
return (displayBNPL ? 'flex' : 'none');
|
|
6389
6389
|
});
|
|
6390
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6391
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6390
|
+
var TextContainer$1 = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6391
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6392
6392
|
var BuyNowPayLater = function (_a) {
|
|
6393
6393
|
var _b;
|
|
6394
6394
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6398,43 +6398,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6398
6398
|
console.error('Icon', iconName, 'not found');
|
|
6399
6399
|
return null;
|
|
6400
6400
|
}
|
|
6401
|
-
return (jsx$1(Container$
|
|
6401
|
+
return (jsx$1(Container$13, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6402
6402
|
};
|
|
6403
|
-
var templateObject_1$
|
|
6403
|
+
var templateObject_1$1F, templateObject_2$19, templateObject_3$W;
|
|
6404
6404
|
|
|
6405
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6405
|
+
var Text$6 = newStyled.span(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6406
6406
|
var Title$8 = function (_a) {
|
|
6407
6407
|
var title = _a.title;
|
|
6408
6408
|
var theme = useTheme();
|
|
6409
6409
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6410
6410
|
};
|
|
6411
|
-
var templateObject_1$
|
|
6411
|
+
var templateObject_1$1E;
|
|
6412
6412
|
|
|
6413
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6413
|
+
var P$3 = newStyled.p(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6414
6414
|
var Promo = function (_a) {
|
|
6415
6415
|
var text = _a.text;
|
|
6416
6416
|
var theme = useTheme();
|
|
6417
6417
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6418
6418
|
};
|
|
6419
|
-
var templateObject_1$
|
|
6419
|
+
var templateObject_1$1D;
|
|
6420
6420
|
|
|
6421
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6421
|
+
var Text$5 = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6422
6422
|
var Description$1 = function (_a) {
|
|
6423
6423
|
var text = _a.text;
|
|
6424
6424
|
var theme = useTheme();
|
|
6425
6425
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6426
6426
|
};
|
|
6427
|
-
var templateObject_1$
|
|
6427
|
+
var templateObject_1$1C;
|
|
6428
6428
|
|
|
6429
|
-
var Container$
|
|
6429
|
+
var Container$12 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6430
6430
|
var CloseButton$1 = function (_a) {
|
|
6431
6431
|
var onClick = _a.onClick, size = _a.size;
|
|
6432
6432
|
var theme = useTheme();
|
|
6433
|
-
return (jsx$1(Container$
|
|
6433
|
+
return (jsx$1(Container$12, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6434
6434
|
};
|
|
6435
|
-
var templateObject_1$
|
|
6435
|
+
var templateObject_1$1B;
|
|
6436
6436
|
|
|
6437
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6437
|
+
var Text$4 = newStyled.h3(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6438
6438
|
var backgroundColor = _a.backgroundColor;
|
|
6439
6439
|
return backgroundColor;
|
|
6440
6440
|
}, function (_a) {
|
|
@@ -6449,7 +6449,7 @@ var OfferBanner = function (_a) {
|
|
|
6449
6449
|
var theme = useTheme();
|
|
6450
6450
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6451
6451
|
};
|
|
6452
|
-
var templateObject_1$
|
|
6452
|
+
var templateObject_1$1A;
|
|
6453
6453
|
|
|
6454
6454
|
var CartProductItem = {
|
|
6455
6455
|
Title: Title$8,
|
|
@@ -6459,20 +6459,20 @@ var CartProductItem = {
|
|
|
6459
6459
|
CloseButton: CloseButton$1,
|
|
6460
6460
|
};
|
|
6461
6461
|
|
|
6462
|
-
var Container$
|
|
6463
|
-
var MobileContainer = newStyled(Container$
|
|
6464
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6465
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6466
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6467
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6468
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6469
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6462
|
+
var Container$11 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6463
|
+
var MobileContainer = newStyled(Container$11)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6464
|
+
var DollarPart = newStyled.span(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6465
|
+
var ClubMembersText = newStyled.span(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6466
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6467
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6468
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6469
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6470
6470
|
var ClubPriceLabel = function (_a) {
|
|
6471
6471
|
var clubPrice = _a.clubPrice;
|
|
6472
6472
|
var isMobile = useWindowDimensions().isMobile;
|
|
6473
|
-
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$
|
|
6473
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$11, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6474
6474
|
};
|
|
6475
|
-
var templateObject_1$
|
|
6475
|
+
var templateObject_1$1z, templateObject_2$18, templateObject_3$V, templateObject_4$K, templateObject_5$z, templateObject_6$v, templateObject_7$n, templateObject_8$i;
|
|
6476
6476
|
|
|
6477
6477
|
var Spacing = function (_a) {
|
|
6478
6478
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6480,10 +6480,10 @@ var Spacing = function (_a) {
|
|
|
6480
6480
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6481
6481
|
};
|
|
6482
6482
|
|
|
6483
|
-
var Container
|
|
6484
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6485
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6486
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6483
|
+
var Container$10 = newStyled('div')(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6484
|
+
var Content$2 = newStyled('div')(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6485
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6486
|
+
var Bar$2 = newStyled('div')(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6487
6487
|
var index = _a.index;
|
|
6488
6488
|
return "".concat(6 + 3 * index, "px");
|
|
6489
6489
|
}, function (_a) {
|
|
@@ -6492,15 +6492,15 @@ var Bar$2 = newStyled('div')(templateObject_4$I || (templateObject_4$I = __makeT
|
|
|
6492
6492
|
});
|
|
6493
6493
|
var StrengthBars = function (_a) {
|
|
6494
6494
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6495
|
-
return (jsxs$1(Container
|
|
6495
|
+
return (jsxs$1(Container$10, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6496
6496
|
};
|
|
6497
|
-
var templateObject_1$
|
|
6497
|
+
var templateObject_1$1y, templateObject_2$17, templateObject_3$U, templateObject_4$J;
|
|
6498
6498
|
|
|
6499
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6500
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6501
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6502
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6503
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6499
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6500
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6501
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6502
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6503
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6504
6504
|
var RegularPriceTag = function () {
|
|
6505
6505
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6506
6506
|
};
|
|
@@ -6549,16 +6549,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6549
6549
|
: ComponentSize.XSmall;
|
|
6550
6550
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6551
6551
|
};
|
|
6552
|
-
return (jsxs$1(Container$
|
|
6552
|
+
return (jsxs$1(Container$1i, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6553
6553
|
? finalPriceArray[0]
|
|
6554
6554
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6555
6555
|
};
|
|
6556
|
-
var templateObject_1$
|
|
6556
|
+
var templateObject_1$1x, templateObject_2$16, templateObject_3$T, templateObject_4$I, templateObject_5$y;
|
|
6557
6557
|
|
|
6558
|
-
var Container
|
|
6559
|
-
var templateObject_1$
|
|
6558
|
+
var Container$$ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6559
|
+
var templateObject_1$1w;
|
|
6560
6560
|
|
|
6561
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6561
|
+
var StarContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6562
6562
|
var marginRight = _a.marginRight;
|
|
6563
6563
|
return marginRight;
|
|
6564
6564
|
});
|
|
@@ -6570,11 +6570,11 @@ var StarList = function (_a) {
|
|
|
6570
6570
|
width: theme.component.stars.element[size].width,
|
|
6571
6571
|
height: theme.component.stars.element[size].height,
|
|
6572
6572
|
};
|
|
6573
|
-
return (jsx$1(Container
|
|
6573
|
+
return (jsx$1(Container$$, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6574
6574
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6575
6575
|
}) }, void 0));
|
|
6576
6576
|
};
|
|
6577
|
-
var templateObject_1$
|
|
6577
|
+
var templateObject_1$1v;
|
|
6578
6578
|
|
|
6579
6579
|
/* base styles & size variants */
|
|
6580
6580
|
var LabelStyles = {
|
|
@@ -6615,8 +6615,8 @@ var LabelStyles = {
|
|
|
6615
6615
|
});
|
|
6616
6616
|
},
|
|
6617
6617
|
};
|
|
6618
|
-
var Container$
|
|
6619
|
-
var templateObject_1$
|
|
6618
|
+
var Container$_ = newStyled.a(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6619
|
+
var templateObject_1$1u;
|
|
6620
6620
|
|
|
6621
6621
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6622
6622
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6636,7 +6636,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6636
6636
|
}),
|
|
6637
6637
|
];
|
|
6638
6638
|
});
|
|
6639
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6639
|
+
var RatingLabel = newStyled.span(templateObject_1$1t || (templateObject_1$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; });
|
|
6640
6640
|
var starsNumber = 5;
|
|
6641
6641
|
var Rating = function (_a) {
|
|
6642
6642
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6657,9 +6657,9 @@ var Rating = function (_a) {
|
|
|
6657
6657
|
href: reviewsContainerId,
|
|
6658
6658
|
}
|
|
6659
6659
|
: {};
|
|
6660
|
-
return (jsxs$1(Container$
|
|
6660
|
+
return (jsxs$1(Container$_, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6661
6661
|
};
|
|
6662
|
-
var templateObject_1$
|
|
6662
|
+
var templateObject_1$1t;
|
|
6663
6663
|
|
|
6664
6664
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6665
6665
|
var width = _a.width, height = _a.height;
|
|
@@ -6669,10 +6669,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6669
6669
|
height: height,
|
|
6670
6670
|
});
|
|
6671
6671
|
});
|
|
6672
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6673
|
-
var Container$
|
|
6674
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6675
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6672
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6673
|
+
var Container$Z = newStyled.a(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6674
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6675
|
+
var Title$7 = newStyled.p(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6676
6676
|
var getStylesBySize$c = function (size) {
|
|
6677
6677
|
switch (size) {
|
|
6678
6678
|
case ComponentSize.Medium:
|
|
@@ -6698,17 +6698,17 @@ var getStylesBySize$c = function (size) {
|
|
|
6698
6698
|
};
|
|
6699
6699
|
}
|
|
6700
6700
|
};
|
|
6701
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6701
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6702
6702
|
var style = _a.style;
|
|
6703
6703
|
return style.width;
|
|
6704
6704
|
});
|
|
6705
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6705
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6706
6706
|
var style = _a.style;
|
|
6707
6707
|
return style.width;
|
|
6708
6708
|
});
|
|
6709
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6710
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
6711
|
-
var templateObject_1$
|
|
6709
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6710
|
+
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6711
|
+
var templateObject_1$1s, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x, templateObject_6$u, templateObject_7$m, templateObject_8$h;
|
|
6712
6712
|
|
|
6713
6713
|
var ProductItemMobile = function (_a) {
|
|
6714
6714
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
@@ -6770,7 +6770,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6770
6770
|
return jsx(Fragment, {}, void 0);
|
|
6771
6771
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6772
6772
|
};
|
|
6773
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6773
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Z, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __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(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(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, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", 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), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Z, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && 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: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), 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), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$2, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
6774
6774
|
letterSpacing: '-0.05rem',
|
|
6775
6775
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6776
6776
|
};
|
|
@@ -6783,10 +6783,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6783
6783
|
height: height,
|
|
6784
6784
|
});
|
|
6785
6785
|
});
|
|
6786
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6787
|
-
var Container$
|
|
6788
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6789
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6786
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6787
|
+
var Container$Y = newStyled.a(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6788
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6789
|
+
var Title$6 = newStyled.p(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6790
6790
|
var getStylesBySize$b = function (size) {
|
|
6791
6791
|
switch (size) {
|
|
6792
6792
|
case ComponentSize.Medium:
|
|
@@ -6812,16 +6812,16 @@ var getStylesBySize$b = function (size) {
|
|
|
6812
6812
|
};
|
|
6813
6813
|
}
|
|
6814
6814
|
};
|
|
6815
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6815
|
+
var TopTagContainer$7 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6816
6816
|
var style = _a.style;
|
|
6817
6817
|
return style.width;
|
|
6818
6818
|
});
|
|
6819
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6820
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6819
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6820
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6821
6821
|
var style = _a.style;
|
|
6822
6822
|
return style.width;
|
|
6823
6823
|
});
|
|
6824
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6824
|
+
var MarginTopContainer = newStyled.div(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6825
6825
|
var ProductItemTK = function (_a) {
|
|
6826
6826
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6827
6827
|
display: false,
|
|
@@ -6865,26 +6865,26 @@ var ProductItemTK = function (_a) {
|
|
|
6865
6865
|
: undefined }, void 0));
|
|
6866
6866
|
};
|
|
6867
6867
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6868
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6868
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __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(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$7, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$7, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, 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), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$Y, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6869
6869
|
// @ts-ignore
|
|
6870
6870
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6871
6871
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6872
6872
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6873
6873
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6874
6874
|
};
|
|
6875
|
-
var templateObject_1$
|
|
6875
|
+
var templateObject_1$1r, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w, templateObject_6$t, templateObject_7$l, templateObject_8$g;
|
|
6876
6876
|
|
|
6877
|
-
var Container$
|
|
6877
|
+
var Container$X = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6878
6878
|
function withProductGrid(ProductItemComponent, data) {
|
|
6879
6879
|
function WithProductGrid(props) {
|
|
6880
|
-
return (jsx$1(Container$
|
|
6880
|
+
return (jsx$1(Container$X, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6881
6881
|
}
|
|
6882
6882
|
/* istanbul ignore next */
|
|
6883
6883
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6884
6884
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6885
6885
|
return WithProductGrid;
|
|
6886
6886
|
}
|
|
6887
|
-
var templateObject_1$
|
|
6887
|
+
var templateObject_1$1q;
|
|
6888
6888
|
|
|
6889
6889
|
var Collection = {
|
|
6890
6890
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6931,12 +6931,12 @@ var OutOfStock = function (_a) {
|
|
|
6931
6931
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6932
6932
|
};
|
|
6933
6933
|
|
|
6934
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6935
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6936
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6937
|
-
var Span = newStyled.span(templateObject_4$
|
|
6938
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6939
|
-
var Label$
|
|
6934
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6935
|
+
newStyled(lt.Label)(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6936
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6937
|
+
var Span = newStyled.span(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6938
|
+
var OptionsContainer = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6939
|
+
var Label$5 = function (_a) {
|
|
6940
6940
|
var label = _a.label, values = _a.values;
|
|
6941
6941
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6942
6942
|
};
|
|
@@ -6949,27 +6949,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
6949
6949
|
return (jsx$1(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6950
6950
|
};
|
|
6951
6951
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6952
|
-
Label: Label$
|
|
6952
|
+
Label: Label$5,
|
|
6953
6953
|
Option: Option,
|
|
6954
6954
|
OptionsContainer: OptionsContainer,
|
|
6955
6955
|
});
|
|
6956
|
-
var templateObject_1$
|
|
6956
|
+
var templateObject_1$1p, templateObject_2$13, templateObject_3$Q, templateObject_4$F, templateObject_5$v;
|
|
6957
6957
|
|
|
6958
|
-
var Container$
|
|
6958
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6959
6959
|
var borderColor = _a.borderColor;
|
|
6960
6960
|
return borderColor;
|
|
6961
6961
|
}, function (_a) {
|
|
6962
6962
|
var noStock = _a.noStock;
|
|
6963
6963
|
return (noStock ? '0.4' : '1');
|
|
6964
6964
|
});
|
|
6965
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6965
|
+
var Image$2 = newStyled.img(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6966
6966
|
var PatternSelector = function (_a) {
|
|
6967
6967
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6968
6968
|
var theme = useTheme();
|
|
6969
6969
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6970
|
-
return (jsx$1(Container$
|
|
6970
|
+
return (jsx$1(Container$W, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6971
6971
|
};
|
|
6972
|
-
var templateObject_1$
|
|
6972
|
+
var templateObject_1$1o, templateObject_2$12;
|
|
6973
6973
|
|
|
6974
6974
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6975
6975
|
if (options == null || options.length === 0) {
|
|
@@ -7032,26 +7032,26 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7032
7032
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7033
7033
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7034
7034
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7035
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7035
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7036
7036
|
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7037
7037
|
};
|
|
7038
|
-
var templateObject_1$
|
|
7038
|
+
var templateObject_1$1n;
|
|
7039
7039
|
|
|
7040
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7041
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7042
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7040
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7041
|
+
var Col$1 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7042
|
+
var Row$2 = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
7043
7043
|
return props.rightToLeft &&
|
|
7044
7044
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7045
7045
|
});
|
|
7046
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7047
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7048
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7046
|
+
var H5 = newStyled.h5(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7047
|
+
var H3$1 = newStyled.h3(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7048
|
+
var FreeShipping = newStyled.span(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7049
7049
|
var CrossSellCheckbox = function (_a) {
|
|
7050
7050
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7051
7051
|
var theme = useTheme();
|
|
7052
7052
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7053
7053
|
};
|
|
7054
|
-
var templateObject_1$
|
|
7054
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$P, templateObject_4$E, templateObject_5$u, templateObject_6$s;
|
|
7055
7055
|
|
|
7056
7056
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7057
7057
|
__proto__: null,
|
|
@@ -7079,7 +7079,7 @@ var sizeMapper = (_a = {},
|
|
|
7079
7079
|
_a[ComponentSize.Large] = 'large',
|
|
7080
7080
|
_a[ComponentSize.XSmall] = 'small',
|
|
7081
7081
|
_a);
|
|
7082
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7082
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7083
7083
|
var wide = _a.wide;
|
|
7084
7084
|
return (wide ? '100%' : 'fit-content');
|
|
7085
7085
|
}, function (_a) {
|
|
@@ -7101,11 +7101,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1k || (templateObj
|
|
|
7101
7101
|
var theme = _a.theme;
|
|
7102
7102
|
return theme.colors.text.disabled;
|
|
7103
7103
|
});
|
|
7104
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7104
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7105
7105
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7106
7106
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7107
7107
|
});
|
|
7108
|
-
var templateObject_1$
|
|
7108
|
+
var templateObject_1$1l, templateObject_2$10;
|
|
7109
7109
|
|
|
7110
7110
|
var BaseCTA = function (_a) {
|
|
7111
7111
|
var _b, _c, _d;
|
|
@@ -7192,44 +7192,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7192
7192
|
} }), void 0));
|
|
7193
7193
|
};
|
|
7194
7194
|
|
|
7195
|
-
var Container$
|
|
7196
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7197
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7198
|
-
var Details = newStyled.span(templateObject_4$
|
|
7195
|
+
var Container$V = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7196
|
+
var IconContainer$4 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7197
|
+
var Text$3 = newStyled.p(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7198
|
+
var Details = newStyled.span(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7199
7199
|
var Note = function (_a) {
|
|
7200
7200
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7201
7201
|
var theme = useTheme();
|
|
7202
|
-
return (jsxs$1(Container$
|
|
7202
|
+
return (jsxs$1(Container$V, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7203
7203
|
};
|
|
7204
|
-
var templateObject_1$
|
|
7204
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$D;
|
|
7205
7205
|
|
|
7206
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7206
|
+
var Title$5 = newStyled.h1(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7207
7207
|
var theme = _a.theme;
|
|
7208
7208
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7209
7209
|
});
|
|
7210
|
-
var Line = newStyled.div(templateObject_2$
|
|
7211
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7210
|
+
var Line = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7211
|
+
var Row$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7212
7212
|
flexDirection: ['column', 'row'],
|
|
7213
7213
|
}));
|
|
7214
|
-
var Col = newStyled.div(templateObject_4$
|
|
7214
|
+
var Col = newStyled.div(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7215
7215
|
margin: ['0', '0 1.25rem'],
|
|
7216
7216
|
marginBottom: ['1.875rem', '0'],
|
|
7217
7217
|
alignItems: ['center', 'flex-start'],
|
|
7218
7218
|
textAlign: ['center', 'inherit'],
|
|
7219
7219
|
width: ['100%', 'inherit'],
|
|
7220
7220
|
}));
|
|
7221
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7221
|
+
var IconContainer$3 = newStyled.div(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7222
7222
|
marginRight: ['0', '0.438rem'],
|
|
7223
7223
|
marginBottom: ['10px', '0'],
|
|
7224
7224
|
width: ['auto', '1.5rem'],
|
|
7225
7225
|
}));
|
|
7226
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7226
|
+
var SectionTitle = newStyled.h1(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7227
7227
|
display: ['block', 'flex'],
|
|
7228
7228
|
}), function (_a) {
|
|
7229
7229
|
var theme = _a.theme;
|
|
7230
7230
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7231
7231
|
});
|
|
7232
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7232
|
+
var SectionDetails = newStyled.p(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7233
7233
|
var theme = _a.theme;
|
|
7234
7234
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7235
7235
|
}, function (_a) {
|
|
@@ -7240,22 +7240,22 @@ var SectionDetails = newStyled.p(templateObject_7$j || (templateObject_7$j = __m
|
|
|
7240
7240
|
})
|
|
7241
7241
|
: '';
|
|
7242
7242
|
});
|
|
7243
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7243
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7244
7244
|
var DeliveryDetails = function (_a) {
|
|
7245
7245
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7246
7246
|
var theme = useTheme();
|
|
7247
7247
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7248
7248
|
};
|
|
7249
|
-
var templateObject_1$
|
|
7249
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$C, templateObject_5$t, templateObject_6$r, templateObject_7$k, templateObject_8$f;
|
|
7250
7250
|
|
|
7251
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7251
|
+
var Backdrop = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7252
7252
|
var top = _a.top;
|
|
7253
7253
|
return top;
|
|
7254
7254
|
}, function (_a) {
|
|
7255
7255
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7256
7256
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7257
7257
|
});
|
|
7258
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7258
|
+
var Sidebar = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7259
7259
|
var height = _a.height;
|
|
7260
7260
|
return height;
|
|
7261
7261
|
}, function (_a) {
|
|
@@ -7302,20 +7302,20 @@ var Drawer = function (_a) {
|
|
|
7302
7302
|
}, [isOpen, onClose, onOpen]);
|
|
7303
7303
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7304
7304
|
};
|
|
7305
|
-
var templateObject_1$
|
|
7305
|
+
var templateObject_1$1i, templateObject_2$Z;
|
|
7306
7306
|
|
|
7307
7307
|
var TooltipArrow = function (_a) {
|
|
7308
7308
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7309
7309
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7310
7310
|
};
|
|
7311
7311
|
|
|
7312
|
-
var List = newStyled.ul(templateObject_1$
|
|
7313
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7314
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7315
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7316
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7317
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7318
|
-
var templateObject_1$
|
|
7312
|
+
var List = newStyled.ul(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7313
|
+
var Item$2 = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7314
|
+
var DropdownWrapper = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7315
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7316
|
+
var StyledDropdown = newStyled.ul(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7317
|
+
var DropdownItem = newStyled.li(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7318
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q;
|
|
7319
7319
|
|
|
7320
7320
|
var DropdownListIcons = function (_a) {
|
|
7321
7321
|
var items = _a.items;
|
|
@@ -7328,13 +7328,13 @@ var Dropdown = function (_a) {
|
|
|
7328
7328
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7329
7329
|
};
|
|
7330
7330
|
|
|
7331
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7332
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7333
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7334
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7335
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7336
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7337
|
-
var templateObject_1$
|
|
7331
|
+
var DropdownContainer = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
7332
|
+
var DropdownLabel = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7333
|
+
var SizeLabel = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7334
|
+
var DetailLabel = newStyled.span(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7335
|
+
var DropdownOptions = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7336
|
+
var DropdownOption = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7337
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
7338
7338
|
|
|
7339
7339
|
var SizeDropdown = function (_a) {
|
|
7340
7340
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7357,10 +7357,10 @@ var SizeDropdown = function (_a) {
|
|
|
7357
7357
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7358
7358
|
};
|
|
7359
7359
|
|
|
7360
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7361
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7362
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7363
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7360
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7361
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7362
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7363
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7364
7364
|
var DropdownDialog = function (_a) {
|
|
7365
7365
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7366
7366
|
var theme = useTheme$1();
|
|
@@ -7369,7 +7369,7 @@ var DropdownDialog = function (_a) {
|
|
|
7369
7369
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7370
7370
|
}) }), void 0) }), void 0));
|
|
7371
7371
|
};
|
|
7372
|
-
var templateObject_1$
|
|
7372
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z;
|
|
7373
7373
|
|
|
7374
7374
|
function FilteringDropdown(_a) {
|
|
7375
7375
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7402,29 +7402,29 @@ function FilteringDropdown(_a) {
|
|
|
7402
7402
|
}) }, void 0)] }), void 0));
|
|
7403
7403
|
}
|
|
7404
7404
|
|
|
7405
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7406
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7407
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7408
|
-
var Container$
|
|
7405
|
+
var Title$4 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
7406
|
+
var H3 = newStyled.h3(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
7407
|
+
var ArrowContainer = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7408
|
+
var Container$U = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7409
7409
|
var Accordion = function (_a) {
|
|
7410
7410
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7411
7411
|
var theme = useTheme();
|
|
7412
7412
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7413
|
-
return (jsxs$1(Container$
|
|
7413
|
+
return (jsxs$1(Container$U, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7414
7414
|
};
|
|
7415
|
-
var templateObject_1$
|
|
7416
|
-
|
|
7417
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7418
|
-
var Header$
|
|
7419
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7420
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7421
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7422
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7423
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7424
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7425
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7426
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
7427
|
-
var templateObject_1$
|
|
7415
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
7416
|
+
|
|
7417
|
+
var SectionContent = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
7418
|
+
var Header$2 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7419
|
+
var MobileHeader = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7420
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7421
|
+
var H4 = newStyled.h4(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7422
|
+
var FilterLink = newStyled.a(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7423
|
+
var OptionContainer = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7424
|
+
var ClearAll = newStyled.span(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7425
|
+
var MobileFooter = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7426
|
+
var MobileClearContainer = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7427
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$j, templateObject_8$e, templateObject_9$9, templateObject_10$8;
|
|
7428
7428
|
|
|
7429
7429
|
var getStylesBySize$a = function (size, theme) {
|
|
7430
7430
|
switch (size) {
|
|
@@ -7489,9 +7489,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7489
7489
|
} }), id: id }, void 0));
|
|
7490
7490
|
};
|
|
7491
7491
|
|
|
7492
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7493
|
-
var LI = newStyled.li(templateObject_2$
|
|
7494
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7492
|
+
var UL = newStyled.ul(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
7493
|
+
var LI = newStyled.li(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7494
|
+
var CloseIconContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7495
7495
|
var Tags = function (_a) {
|
|
7496
7496
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7497
7497
|
var theme = useTheme();
|
|
@@ -7499,7 +7499,7 @@ var Tags = function (_a) {
|
|
|
7499
7499
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7500
7500
|
}) }), void 0));
|
|
7501
7501
|
};
|
|
7502
|
-
var templateObject_1$
|
|
7502
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H;
|
|
7503
7503
|
|
|
7504
7504
|
var Filters = function (_a) {
|
|
7505
7505
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7597,7 +7597,7 @@ var Filters = function (_a) {
|
|
|
7597
7597
|
}
|
|
7598
7598
|
return itemsSelectedNumberText;
|
|
7599
7599
|
};
|
|
7600
|
-
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$
|
|
7600
|
+
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$2, { 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) {
|
|
7601
7601
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
7602
7602
|
}), 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
|
|
7603
7603
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
@@ -7635,8 +7635,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7635
7635
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7636
7636
|
};
|
|
7637
7637
|
|
|
7638
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7639
|
-
var Container$
|
|
7638
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7639
|
+
var Container$T = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7640
7640
|
var FitGuarantee = function (_a) {
|
|
7641
7641
|
var _b;
|
|
7642
7642
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7647,17 +7647,17 @@ var FitGuarantee = function (_a) {
|
|
|
7647
7647
|
console.error('Icon', iconName, 'not found');
|
|
7648
7648
|
return null;
|
|
7649
7649
|
}
|
|
7650
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7650
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$T, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$T, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7651
7651
|
margin: '0.1rem 0',
|
|
7652
7652
|
width: '100%',
|
|
7653
7653
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7654
7654
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7655
7655
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7656
7656
|
};
|
|
7657
|
-
var templateObject_1$
|
|
7657
|
+
var templateObject_1$1b, templateObject_2$S;
|
|
7658
7658
|
|
|
7659
|
-
var Container$
|
|
7660
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7659
|
+
var Container$S = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7660
|
+
var P$2 = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7661
7661
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7662
7662
|
border: 'none',
|
|
7663
7663
|
background: 'transparent',
|
|
@@ -7670,9 +7670,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7670
7670
|
var FitPredictor = function (_a) {
|
|
7671
7671
|
var onClick = _a.onClick;
|
|
7672
7672
|
var theme = useTheme();
|
|
7673
|
-
return (jsxs(Container$
|
|
7673
|
+
return (jsxs(Container$S, __assign$1({ theme: theme }, { children: [jsx(Container$S, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7674
7674
|
};
|
|
7675
|
-
var templateObject_1$
|
|
7675
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7676
7676
|
|
|
7677
7677
|
var Button$7 = newStyled.button(function () { return ({
|
|
7678
7678
|
background: 'transparent',
|
|
@@ -11916,14 +11916,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11916
11916
|
return Slider;
|
|
11917
11917
|
}(React__default.Component);
|
|
11918
11918
|
|
|
11919
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11919
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11920
11920
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11921
11921
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11922
11922
|
}, function (_a) {
|
|
11923
11923
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11924
11924
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11925
11925
|
});
|
|
11926
|
-
var templateObject_1$
|
|
11926
|
+
var templateObject_1$19;
|
|
11927
11927
|
|
|
11928
11928
|
var getStylesBySize$9 = function (size) {
|
|
11929
11929
|
// rem units
|
|
@@ -11982,7 +11982,7 @@ var SliderNavigation = function (_a) {
|
|
|
11982
11982
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11983
11983
|
};
|
|
11984
11984
|
|
|
11985
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11985
|
+
var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11986
11986
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11987
11987
|
return borderRadiusVariant &&
|
|
11988
11988
|
"\n border-radius: 20px;\n ";
|
|
@@ -12000,7 +12000,7 @@ var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __make
|
|
|
12000
12000
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12001
12001
|
: 'inherit';
|
|
12002
12002
|
});
|
|
12003
|
-
var templateObject_1$
|
|
12003
|
+
var templateObject_1$18;
|
|
12004
12004
|
|
|
12005
12005
|
var ImageSmallPreview = function (_a) {
|
|
12006
12006
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12008,9 +12008,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12008
12008
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12009
12009
|
};
|
|
12010
12010
|
|
|
12011
|
-
var horizontalStyles = css(templateObject_1$
|
|
12012
|
-
var verticalStyles = css(templateObject_2$
|
|
12013
|
-
var Container$
|
|
12011
|
+
var horizontalStyles = css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12012
|
+
var verticalStyles = css(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12013
|
+
var Container$R = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12014
12014
|
var position = _a.position;
|
|
12015
12015
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12016
12016
|
}, function (_a) {
|
|
@@ -12018,12 +12018,12 @@ var Container$Q = newStyled.div(templateObject_3$F || (templateObject_3$F = __ma
|
|
|
12018
12018
|
return hasOverflowArrows &&
|
|
12019
12019
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12020
12020
|
});
|
|
12021
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
12022
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12023
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12024
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12025
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
12026
|
-
var templateObject_1$
|
|
12021
|
+
var Button$6 = newStyled.button(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12022
|
+
var ArrowsContainer = newStyled.div(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12023
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12024
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12025
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12026
|
+
var templateObject_1$17, templateObject_2$Q, templateObject_3$G, templateObject_4$w, templateObject_5$p, templateObject_6$n, templateObject_7$i, templateObject_8$d;
|
|
12027
12027
|
|
|
12028
12028
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12029
12029
|
var loading = 'eager';
|
|
@@ -12051,7 +12051,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12051
12051
|
var element = document.querySelector(".imageListContainer");
|
|
12052
12052
|
element.scrollBy(0, 200);
|
|
12053
12053
|
};
|
|
12054
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12054
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$R, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12055
12055
|
arrowWidth: 0.75,
|
|
12056
12056
|
arrowHeight: 1.25,
|
|
12057
12057
|
arrowPadding: 1.625,
|
|
@@ -12060,22 +12060,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12060
12060
|
})) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12061
12061
|
};
|
|
12062
12062
|
|
|
12063
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12064
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12065
|
-
var templateObject_1$
|
|
12063
|
+
var ProgressContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12064
|
+
var ProgressFiller = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
12065
|
+
var templateObject_1$16, templateObject_2$P;
|
|
12066
12066
|
|
|
12067
12067
|
var ProgressBar$1 = function (_a) {
|
|
12068
12068
|
var progress = _a.progress, hide = _a.hide;
|
|
12069
12069
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12070
12070
|
};
|
|
12071
12071
|
|
|
12072
|
-
var Container$
|
|
12073
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12074
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12075
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12076
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12077
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12078
|
-
var templateObject_1$
|
|
12072
|
+
var Container$Q = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12073
|
+
var HTMLVideo = newStyled.video(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
12074
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
12075
|
+
var PlayContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
12076
|
+
var PauseContainer = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
12077
|
+
var MuteButton = newStyled.button(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
12078
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m;
|
|
12079
12079
|
|
|
12080
12080
|
var Video$1 = function (_a) {
|
|
12081
12081
|
var _b, _c, _d, _e;
|
|
@@ -12121,7 +12121,7 @@ var Video$1 = function (_a) {
|
|
|
12121
12121
|
setVideoProgress(videoRef.current.currentTime);
|
|
12122
12122
|
}
|
|
12123
12123
|
};
|
|
12124
|
-
return (jsxs$1(Container$
|
|
12124
|
+
return (jsxs$1(Container$Q, __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" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, 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));
|
|
12125
12125
|
};
|
|
12126
12126
|
|
|
12127
12127
|
var propTypes = {exports: {}};
|
|
@@ -13715,39 +13715,39 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13715
13715
|
afterZoomOut: PropTypes.func
|
|
13716
13716
|
} : {};
|
|
13717
13717
|
|
|
13718
|
-
var Container$
|
|
13718
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13719
13719
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13720
13720
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13721
13721
|
});
|
|
13722
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13722
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13723
13723
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13724
13724
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13725
13725
|
}, function (_a) {
|
|
13726
13726
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13727
13727
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13728
13728
|
});
|
|
13729
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13729
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13730
13730
|
var isCTAHidden = _a.isCTAHidden;
|
|
13731
13731
|
return (isCTAHidden ? '60px' : '120px');
|
|
13732
13732
|
});
|
|
13733
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13734
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13735
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13733
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13734
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13735
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13736
13736
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13737
13737
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13738
13738
|
});
|
|
13739
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13739
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13740
13740
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13741
13741
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13742
13742
|
});
|
|
13743
|
-
var templateObject_1$
|
|
13743
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$h;
|
|
13744
13744
|
|
|
13745
13745
|
var ImageProductSlide$1 = function (_a) {
|
|
13746
13746
|
var _b;
|
|
13747
13747
|
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
13748
13748
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13749
13749
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13750
|
-
return (jsxs$1(Container$
|
|
13750
|
+
return (jsxs$1(Container$P, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13751
13751
|
alt: content.alt,
|
|
13752
13752
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13753
13753
|
loading: 'eager',
|
|
@@ -13755,8 +13755,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13755
13755
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13756
13756
|
};
|
|
13757
13757
|
|
|
13758
|
-
var Container$
|
|
13759
|
-
var templateObject_1$
|
|
13758
|
+
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13759
|
+
var templateObject_1$13;
|
|
13760
13760
|
|
|
13761
13761
|
var getInitialIndex = function (images, selectedValue) {
|
|
13762
13762
|
if (selectedValue) {
|
|
@@ -13782,7 +13782,7 @@ var ProductGallery = function (_a) {
|
|
|
13782
13782
|
setActiveIndex(index);
|
|
13783
13783
|
};
|
|
13784
13784
|
var selectedImage = images[activeIndex];
|
|
13785
|
-
return (jsxs$1(Container$
|
|
13785
|
+
return (jsxs$1(Container$O, { 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));
|
|
13786
13786
|
};
|
|
13787
13787
|
|
|
13788
13788
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13804,7 +13804,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13804
13804
|
};
|
|
13805
13805
|
}
|
|
13806
13806
|
};
|
|
13807
|
-
var Container$
|
|
13807
|
+
var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13808
13808
|
var backgroundColor = _a.backgroundColor;
|
|
13809
13809
|
return backgroundColor;
|
|
13810
13810
|
}, function (_a) {
|
|
@@ -13832,11 +13832,11 @@ var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __
|
|
|
13832
13832
|
var IconButton = function (_a) {
|
|
13833
13833
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13834
13834
|
var theme = useTheme();
|
|
13835
|
-
return (jsx$1(Container$
|
|
13835
|
+
return (jsx$1(Container$N, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13836
13836
|
};
|
|
13837
|
-
var templateObject_1$
|
|
13837
|
+
var templateObject_1$12;
|
|
13838
13838
|
|
|
13839
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13839
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13840
13840
|
var AmazonButton = function (_a) {
|
|
13841
13841
|
var onClick = _a.onClick;
|
|
13842
13842
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13845,9 +13845,9 @@ var PaypalButton = function (_a) {
|
|
|
13845
13845
|
var onClick = _a.onClick;
|
|
13846
13846
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13847
13847
|
};
|
|
13848
|
-
var templateObject_1$
|
|
13848
|
+
var templateObject_1$11;
|
|
13849
13849
|
|
|
13850
|
-
var Container$
|
|
13850
|
+
var Container$M = newStyled.div(function (props) { return ({
|
|
13851
13851
|
height: 'auto',
|
|
13852
13852
|
textAlign: 'center',
|
|
13853
13853
|
justifyContent: 'center',
|
|
@@ -13897,12 +13897,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13897
13897
|
textAlign: 'center',
|
|
13898
13898
|
lineHeight: '18px',
|
|
13899
13899
|
};
|
|
13900
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13900
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$M, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13901
13901
|
};
|
|
13902
13902
|
|
|
13903
|
-
var Container$
|
|
13904
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13905
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13903
|
+
var Container$L = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13904
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13905
|
+
var StyledTitle = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13906
13906
|
var titlePosition = _a.titlePosition;
|
|
13907
13907
|
return titlePosition == 'center' &&
|
|
13908
13908
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13910,24 +13910,24 @@ var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __ma
|
|
|
13910
13910
|
var ImageCardWithDescription = function (_a) {
|
|
13911
13911
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13912
13912
|
var isMobile = useWindowDimensions().isMobile;
|
|
13913
|
-
return (jsxs$1(Container$
|
|
13913
|
+
return (jsxs$1(Container$L, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13914
13914
|
};
|
|
13915
|
-
var templateObject_1
|
|
13915
|
+
var templateObject_1$10, templateObject_2$M, templateObject_3$D;
|
|
13916
13916
|
|
|
13917
|
-
var Label$
|
|
13917
|
+
var Label$4 = newStyled.span(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13918
13918
|
var color = _a.color;
|
|
13919
13919
|
return color;
|
|
13920
13920
|
});
|
|
13921
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13921
|
+
var MandatoryIcon = newStyled.span(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13922
13922
|
var color = _a.color;
|
|
13923
13923
|
return color;
|
|
13924
13924
|
});
|
|
13925
13925
|
var InputLabel = function (_a) {
|
|
13926
13926
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13927
13927
|
var theme = useTheme();
|
|
13928
|
-
return (jsxs$1(Label$
|
|
13928
|
+
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13929
13929
|
};
|
|
13930
|
-
var templateObject_1
|
|
13930
|
+
var templateObject_1$$, templateObject_2$L;
|
|
13931
13931
|
|
|
13932
13932
|
var containerByStatus = function (theme, status) {
|
|
13933
13933
|
if (status === InputValidationType.Valid)
|
|
@@ -13936,12 +13936,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13936
13936
|
return theme.colors.semantic.urgent.color;
|
|
13937
13937
|
return '';
|
|
13938
13938
|
};
|
|
13939
|
-
var Container$
|
|
13939
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13940
13940
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13941
13941
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13942
13942
|
});
|
|
13943
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13944
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13943
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13944
|
+
var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13945
13945
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13946
13946
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13947
13947
|
}, function (_a) {
|
|
@@ -13996,11 +13996,11 @@ var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __
|
|
|
13996
13996
|
return hasValue &&
|
|
13997
13997
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13998
13998
|
});
|
|
13999
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13999
|
+
var InputWrapper = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14000
14000
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14001
14001
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14002
14002
|
});
|
|
14003
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14003
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14004
14004
|
var theme = _a.theme;
|
|
14005
14005
|
return theme.component.input.placeholderColor;
|
|
14006
14006
|
}, function (_a) {
|
|
@@ -14013,8 +14013,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
14013
14013
|
var theme = _a.theme;
|
|
14014
14014
|
return theme.component.input.lineHeight;
|
|
14015
14015
|
});
|
|
14016
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14017
|
-
var templateObject_1$
|
|
14016
|
+
var ClearInput = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14017
|
+
var templateObject_1$_, templateObject_2$K, templateObject_3$C, templateObject_4$t, templateObject_5$m, templateObject_6$k;
|
|
14018
14018
|
|
|
14019
14019
|
var BaseInput = function (_a) {
|
|
14020
14020
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -14037,7 +14037,7 @@ var BaseInput = function (_a) {
|
|
|
14037
14037
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14038
14038
|
}, [status]);
|
|
14039
14039
|
var hasValue = Boolean(value);
|
|
14040
|
-
return (jsxs$1(Container$
|
|
14040
|
+
return (jsxs$1(Container$K, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14041
14041
|
onChange(event.target.value, event);
|
|
14042
14042
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
14043
14043
|
onChange('', { target: { value: '' } });
|
|
@@ -14058,11 +14058,11 @@ var Button$5 = function (_a) {
|
|
|
14058
14058
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14059
14059
|
};
|
|
14060
14060
|
|
|
14061
|
-
var Container$
|
|
14061
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14062
14062
|
var theme = _a.theme;
|
|
14063
14063
|
return theme.component.inputCustom.input.borderRadius;
|
|
14064
14064
|
});
|
|
14065
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14065
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14066
14066
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14067
14067
|
return defaultRounded
|
|
14068
14068
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14077,23 +14077,23 @@ var Custom = function (_a) {
|
|
|
14077
14077
|
text: text,
|
|
14078
14078
|
disabled: rest.disabled,
|
|
14079
14079
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14080
|
-
return (jsx$1(Container$
|
|
14080
|
+
return (jsx$1(Container$J, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14081
14081
|
};
|
|
14082
|
-
var templateObject_1$
|
|
14082
|
+
var templateObject_1$Z, templateObject_2$J;
|
|
14083
14083
|
|
|
14084
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14084
|
+
var SuccessContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14085
14085
|
var size = _a.size;
|
|
14086
14086
|
return (size === 'small' ? '36px' : '');
|
|
14087
14087
|
});
|
|
14088
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14089
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14088
|
+
var SuccessMessage = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14089
|
+
var SuccessText = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14090
14090
|
var Success = function (_a) {
|
|
14091
14091
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14092
14092
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14093
14093
|
};
|
|
14094
|
-
var templateObject_1$
|
|
14094
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$B;
|
|
14095
14095
|
|
|
14096
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14096
|
+
var ButtonContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14097
14097
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14098
14098
|
return status === InputValidationType.Empty &&
|
|
14099
14099
|
type === 'primary' &&
|
|
@@ -14110,16 +14110,16 @@ var BasePlusButton = function (_a) {
|
|
|
14110
14110
|
}
|
|
14111
14111
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14112
14112
|
};
|
|
14113
|
-
var templateObject_1$
|
|
14113
|
+
var templateObject_1$X;
|
|
14114
14114
|
|
|
14115
|
-
var Container$
|
|
14116
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14115
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14116
|
+
var IconContainer$2 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14117
14117
|
var BasePlusIcon = function (_a) {
|
|
14118
14118
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14119
14119
|
var theme = useTheme();
|
|
14120
|
-
return (jsx$1(Container$
|
|
14120
|
+
return (jsx$1(Container$I, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14121
14121
|
};
|
|
14122
|
-
var templateObject_1$
|
|
14122
|
+
var templateObject_1$W, templateObject_2$H;
|
|
14123
14123
|
|
|
14124
14124
|
var Input$3 = {
|
|
14125
14125
|
Simple: BaseInput,
|
|
@@ -14164,7 +14164,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14164
14164
|
}, [preventTouch, ref, touchStart]);
|
|
14165
14165
|
}
|
|
14166
14166
|
|
|
14167
|
-
var Container$
|
|
14167
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14168
14168
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14169
14169
|
return borderRadiusVariant &&
|
|
14170
14170
|
"\n border-radius: 40px;\n ";
|
|
@@ -14173,11 +14173,11 @@ var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
14173
14173
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14174
14174
|
});
|
|
14175
14175
|
// max-height: 31.875rem;
|
|
14176
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14177
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14178
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14179
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14180
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14176
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14177
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14178
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14179
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14180
|
+
var Button$4 = newStyled.button(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14181
14181
|
var settings$1 = {
|
|
14182
14182
|
dots: true,
|
|
14183
14183
|
infinite: false,
|
|
@@ -14234,7 +14234,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14234
14234
|
}
|
|
14235
14235
|
}
|
|
14236
14236
|
}, [contents, selectedValue]);
|
|
14237
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14237
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$H, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14238
14238
|
var _a;
|
|
14239
14239
|
var activeSlide = contents[e];
|
|
14240
14240
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14254,16 +14254,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14254
14254
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14255
14255
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14256
14256
|
};
|
|
14257
|
-
var templateObject_1$
|
|
14257
|
+
var templateObject_1$V, templateObject_2$G, templateObject_3$A, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
14258
14258
|
|
|
14259
|
-
var Container$
|
|
14259
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14260
14260
|
var ProductGalleryMobile = function (_a) {
|
|
14261
14261
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
14262
14262
|
var _e = useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14263
14263
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14264
|
-
return (jsx$1(Container$
|
|
14264
|
+
return (jsx$1(Container$G, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
14265
14265
|
};
|
|
14266
|
-
var templateObject_1$
|
|
14266
|
+
var templateObject_1$U;
|
|
14267
14267
|
|
|
14268
14268
|
function _extends() {
|
|
14269
14269
|
_extends = Object.assign || function (target) {
|
|
@@ -14530,27 +14530,27 @@ function useSwipeable(options) {
|
|
|
14530
14530
|
return handlers;
|
|
14531
14531
|
}
|
|
14532
14532
|
|
|
14533
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14533
|
+
var Button$3 = newStyled.button(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
14534
14534
|
var ArrowButton = function (_a) {
|
|
14535
14535
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14536
14536
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14537
14537
|
};
|
|
14538
|
-
var templateObject_1$
|
|
14538
|
+
var templateObject_1$T;
|
|
14539
14539
|
|
|
14540
|
-
var Container$
|
|
14540
|
+
var Container$F = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
14541
14541
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14542
14542
|
var SlideDots = function (_a) {
|
|
14543
14543
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14544
14544
|
var theme = useTheme();
|
|
14545
|
-
return (jsx$1(Container$
|
|
14545
|
+
return (jsx$1(Container$F, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14546
14546
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14547
14547
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14548
14548
|
};
|
|
14549
|
-
var templateObject_1$
|
|
14549
|
+
var templateObject_1$S;
|
|
14550
14550
|
|
|
14551
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14552
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14553
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14551
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
14552
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14553
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14554
14554
|
var SlideNavigation = function (_a) {
|
|
14555
14555
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14556
14556
|
var theme = useTheme();
|
|
@@ -14562,23 +14562,23 @@ var SlideNavigation = function (_a) {
|
|
|
14562
14562
|
onNavigate(selectedIndex + 1);
|
|
14563
14563
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14564
14564
|
};
|
|
14565
|
-
var templateObject_1$
|
|
14565
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14566
14566
|
|
|
14567
|
-
var Container$
|
|
14567
|
+
var Container$E = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14568
14568
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14569
14569
|
return borderRadiusVariant &&
|
|
14570
14570
|
"\n border-radius: 40px;\n ";
|
|
14571
14571
|
});
|
|
14572
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14573
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14572
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$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'); });
|
|
14573
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14574
14574
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14575
14575
|
var _b, _c;
|
|
14576
14576
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14577
|
-
return (jsxs$1(Container$
|
|
14577
|
+
return (jsxs$1(Container$E, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14578
14578
|
});
|
|
14579
|
-
var templateObject_1$
|
|
14579
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14580
14580
|
|
|
14581
|
-
var Container$
|
|
14581
|
+
var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14582
14582
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14583
14583
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14584
14584
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14600,11 +14600,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14600
14600
|
useEffect(function () {
|
|
14601
14601
|
setSelectedImage(images[index]);
|
|
14602
14602
|
}, [index, images]);
|
|
14603
|
-
return (jsxs$1(Container$
|
|
14603
|
+
return (jsxs$1(Container$D, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14604
14604
|
};
|
|
14605
|
-
var templateObject_1$
|
|
14605
|
+
var templateObject_1$P;
|
|
14606
14606
|
|
|
14607
|
-
var Container$
|
|
14607
|
+
var Container$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14608
14608
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14609
14609
|
return borderRadiusVariant &&
|
|
14610
14610
|
"\n border-radius: 40px;\n ";
|
|
@@ -14613,14 +14613,14 @@ var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
14613
14613
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14614
14614
|
});
|
|
14615
14615
|
// max-height: 31.875rem;
|
|
14616
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14617
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14618
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14619
|
-
var Video = newStyled.div(templateObject_5$
|
|
14620
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14621
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14622
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$
|
|
14623
|
-
var Button$2 = newStyled.button(templateObject_9$
|
|
14616
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14617
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14618
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14619
|
+
var Video = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14620
|
+
var VideoTag = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14621
|
+
var Text$2 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14622
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14623
|
+
var Button$2 = newStyled.button(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14624
14624
|
var settings = {
|
|
14625
14625
|
dots: true,
|
|
14626
14626
|
infinite: false,
|
|
@@ -14665,7 +14665,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14665
14665
|
}
|
|
14666
14666
|
}
|
|
14667
14667
|
}, [images, selectedValue]);
|
|
14668
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14668
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$C, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14669
14669
|
var _a;
|
|
14670
14670
|
var activeSlide = images[e];
|
|
14671
14671
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14678,14 +14678,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14678
14678
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14679
14679
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14680
14680
|
};
|
|
14681
|
-
var templateObject_1$
|
|
14681
|
+
var templateObject_1$O, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$c, templateObject_9$8;
|
|
14682
14682
|
|
|
14683
|
-
var Container$
|
|
14683
|
+
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14684
14684
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14685
14685
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14686
|
-
return (jsx$1(Container$
|
|
14686
|
+
return (jsx$1(Container$B, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14687
14687
|
};
|
|
14688
|
-
var templateObject_1$
|
|
14688
|
+
var templateObject_1$N;
|
|
14689
14689
|
|
|
14690
14690
|
var __defProp$1 = Object.defineProperty;
|
|
14691
14691
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14818,21 +14818,21 @@ var Portal = function (_a) {
|
|
|
14818
14818
|
var visibleStyle = function (_a) {
|
|
14819
14819
|
var opened = _a.opened;
|
|
14820
14820
|
return opened
|
|
14821
|
-
? css(templateObject_1$
|
|
14821
|
+
? css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14822
14822
|
};
|
|
14823
14823
|
var transformStyle = function (_a) {
|
|
14824
14824
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14825
14825
|
return opened
|
|
14826
|
-
? css(templateObject_3$
|
|
14826
|
+
? css(templateObject_3$w || (templateObject_3$w = __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$q || (templateObject_4$q = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14827
14827
|
};
|
|
14828
|
-
var Container$
|
|
14828
|
+
var Container$A = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14829
14829
|
var width = _a.width;
|
|
14830
14830
|
return width
|
|
14831
|
-
? css(templateObject_5$
|
|
14831
|
+
? css(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14832
14832
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14833
14833
|
});
|
|
14834
14834
|
}, visibleStyle, transformStyle);
|
|
14835
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14835
|
+
var Overlay = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14836
14836
|
var Modal = function (_a) {
|
|
14837
14837
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14838
14838
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14842,7 +14842,7 @@ var Modal = function (_a) {
|
|
|
14842
14842
|
}
|
|
14843
14843
|
close();
|
|
14844
14844
|
};
|
|
14845
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14845
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$A, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14846
14846
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14847
14847
|
onDismiss();
|
|
14848
14848
|
} }, void 0)] }), void 0));
|
|
@@ -14873,9 +14873,9 @@ var useModal = function (id) {
|
|
|
14873
14873
|
close: close,
|
|
14874
14874
|
}); }, [close, open, opened]);
|
|
14875
14875
|
};
|
|
14876
|
-
var templateObject_1$
|
|
14876
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f;
|
|
14877
14877
|
|
|
14878
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14878
|
+
var Bar$1 = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14879
14879
|
var height = _a.height;
|
|
14880
14880
|
return height || '0.5rem';
|
|
14881
14881
|
}, function (_a) {
|
|
@@ -14914,7 +14914,7 @@ var BarContainer = newStyled.div({
|
|
|
14914
14914
|
padding: '0 16px',
|
|
14915
14915
|
position: 'relative',
|
|
14916
14916
|
});
|
|
14917
|
-
var Container$
|
|
14917
|
+
var Container$z = newStyled.div(function (_a) {
|
|
14918
14918
|
var backgroundColor = _a.backgroundColor;
|
|
14919
14919
|
return ({
|
|
14920
14920
|
width: '475px',
|
|
@@ -14927,7 +14927,7 @@ var Container$y = newStyled.div(function (_a) {
|
|
|
14927
14927
|
background: backgroundColor,
|
|
14928
14928
|
});
|
|
14929
14929
|
});
|
|
14930
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
14930
|
+
var MessageContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
14931
14931
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14932
14932
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14933
14933
|
};
|
|
@@ -14953,21 +14953,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14953
14953
|
}
|
|
14954
14954
|
return (jsxs$1(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0));
|
|
14955
14955
|
};
|
|
14956
|
-
return (jsxs$1(Container$
|
|
14956
|
+
return (jsxs$1(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
14957
14957
|
};
|
|
14958
|
-
var templateObject_1$
|
|
14958
|
+
var templateObject_1$L, templateObject_2$B;
|
|
14959
14959
|
|
|
14960
|
-
var Container$
|
|
14960
|
+
var Container$y = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14961
14961
|
var theme = _a.theme;
|
|
14962
14962
|
return theme.component.orderBar.backgroundColor;
|
|
14963
14963
|
});
|
|
14964
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14964
|
+
var H1 = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14965
14965
|
var OrderBar = function (_a) {
|
|
14966
14966
|
var message = _a.message, color = _a.color;
|
|
14967
14967
|
var theme = useTheme();
|
|
14968
|
-
return (jsxs$1(Container$
|
|
14968
|
+
return (jsxs$1(Container$y, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14969
14969
|
};
|
|
14970
|
-
var templateObject_1$
|
|
14970
|
+
var templateObject_1$K, templateObject_2$A;
|
|
14971
14971
|
|
|
14972
14972
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14973
14973
|
background: props.bgColor,
|
|
@@ -14991,15 +14991,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14991
14991
|
justifyContent: 'center',
|
|
14992
14992
|
gap: '10px',
|
|
14993
14993
|
});
|
|
14994
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14994
|
+
var StyledContent = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
14995
14995
|
var bgColor = _a.bgColor;
|
|
14996
14996
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14997
14997
|
}, function (_a) {
|
|
14998
14998
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14999
14999
|
return width;
|
|
15000
15000
|
});
|
|
15001
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
15002
|
-
var templateObject_1$
|
|
15001
|
+
var StyledController = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
15002
|
+
var templateObject_1$J, templateObject_2$z;
|
|
15003
15003
|
|
|
15004
15004
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15005
15005
|
var background = _a.background, width = _a.width;
|
|
@@ -15040,6 +15040,97 @@ var BasicAccordion = function (_a) {
|
|
|
15040
15040
|
} }), void 0));
|
|
15041
15041
|
};
|
|
15042
15042
|
|
|
15043
|
+
var TableElement$3 = newStyled.table(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
15044
|
+
var TableCell$3 = newStyled.td(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
15045
|
+
var TableHead$3 = newStyled.th(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
15046
|
+
var Label$3 = newStyled('div')(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
15047
|
+
newStyled(Label$3)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
15048
|
+
newStyled(Label$3)(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
15049
|
+
var Container$x = newStyled('div')(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
15050
|
+
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
15051
|
+
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
15052
|
+
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
15053
|
+
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __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"])));
|
|
15054
|
+
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __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"])));
|
|
15055
|
+
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __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"])));
|
|
15056
|
+
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
15057
|
+
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
15058
|
+
});
|
|
15059
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
15060
|
+
|
|
15061
|
+
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
15062
|
+
// TODO: Refactor this color logic
|
|
15063
|
+
var getCellColor$2 = function (index, cell, isLight) {
|
|
15064
|
+
if (index == 0) {
|
|
15065
|
+
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
15066
|
+
}
|
|
15067
|
+
switch (cell) {
|
|
15068
|
+
case 'XS':
|
|
15069
|
+
return '#f5bab0';
|
|
15070
|
+
case 'S':
|
|
15071
|
+
return '#f7a08b';
|
|
15072
|
+
case 'M':
|
|
15073
|
+
return '#ffe1b8';
|
|
15074
|
+
case 'L':
|
|
15075
|
+
return '#f5bab0';
|
|
15076
|
+
case 'XL':
|
|
15077
|
+
return '#8bbeea';
|
|
15078
|
+
case '2XL':
|
|
15079
|
+
return '#b1d7c3';
|
|
15080
|
+
case '3XL':
|
|
15081
|
+
return '#e7a4f7';
|
|
15082
|
+
case '4XL':
|
|
15083
|
+
return '#e7c9b2';
|
|
15084
|
+
default:
|
|
15085
|
+
return '';
|
|
15086
|
+
}
|
|
15087
|
+
};
|
|
15088
|
+
|
|
15089
|
+
var SizeChartTableV3 = function (_a) {
|
|
15090
|
+
var _b, _c;
|
|
15091
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
15092
|
+
var containerRef = useRef(null);
|
|
15093
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
15094
|
+
var _d = useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
15095
|
+
var _e = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _e[0], yLabel = _e[1];
|
|
15096
|
+
var isMultilabel = xLabel && yLabel;
|
|
15097
|
+
var trimmedXLabel = trimLabel(xLabel);
|
|
15098
|
+
var trimmedYLabel = trimLabel(yLabel);
|
|
15099
|
+
useEffect(function () {
|
|
15100
|
+
var _a;
|
|
15101
|
+
var handleScroll = function () {
|
|
15102
|
+
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
15103
|
+
var maxScroll = scrollWidth - clientWidth;
|
|
15104
|
+
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
15105
|
+
setIsAtScrollEnd(function (prevState) {
|
|
15106
|
+
if (isAtEnd !== prevState) {
|
|
15107
|
+
return isAtEnd;
|
|
15108
|
+
}
|
|
15109
|
+
return prevState;
|
|
15110
|
+
});
|
|
15111
|
+
};
|
|
15112
|
+
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
15113
|
+
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
15114
|
+
}, []);
|
|
15115
|
+
// Generate unique ids for each cell
|
|
15116
|
+
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
15117
|
+
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
15118
|
+
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
15119
|
+
value: cell,
|
|
15120
|
+
}); });
|
|
15121
|
+
});
|
|
15122
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Parent, __assign$1({ ref: containerRef }, { children: jsx$1(Container$x, { children: jsxs$1(Column$2, { 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$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsx$1(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsx$1(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$3, __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$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
15123
|
+
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
15124
|
+
} }, { 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$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsx$1(TableCell$3, __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));
|
|
15125
|
+
};
|
|
15126
|
+
var ArrowTip = function (_a) {
|
|
15127
|
+
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
15128
|
+
return (jsx$1(Arrow, __assign$1({ style: {
|
|
15129
|
+
left: isRight ? '85%' : '12%',
|
|
15130
|
+
} }, { children: isRight ? (jsx$1(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsx$1(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
15131
|
+
};
|
|
15132
|
+
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]; };
|
|
15133
|
+
|
|
15043
15134
|
var htmlReactParser = {exports: {}};
|
|
15044
15135
|
|
|
15045
15136
|
var lib$2 = {};
|
|
@@ -19176,7 +19267,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19176
19267
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19177
19268
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19178
19269
|
]; });
|
|
19179
|
-
var StyledLabel$1 = newStyled(Label$
|
|
19270
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
19180
19271
|
var RadioPrimary = function (_a) {
|
|
19181
19272
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19182
19273
|
var theme = useTheme();
|
|
@@ -19275,7 +19366,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19275
19366
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19276
19367
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19277
19368
|
]; });
|
|
19278
|
-
var StyledLabel = newStyled(Label$
|
|
19369
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19279
19370
|
var theme = _a.theme;
|
|
19280
19371
|
return theme.component.radio.textSize;
|
|
19281
19372
|
}, function (_a) {
|
|
@@ -20921,5 +21012,5 @@ var SizeChartTableV2 = function (_a) {
|
|
|
20921
21012
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
20922
21013
|
};
|
|
20923
21014
|
|
|
20924
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
21015
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
20925
21016
|
//# sourceMappingURL=index.esm.js.map
|