@trafilea/afrodita-components 6.55.7 → 6.56.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +21 -1
- package/build/index.esm.js +310 -294
- package/build/index.esm.js.map +1 -1
- package/build/index.js +310 -293
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3195,7 +3195,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3195
3195
|
};
|
|
3196
3196
|
}
|
|
3197
3197
|
};
|
|
3198
|
-
var Container$
|
|
3198
|
+
var Container$1A = newStyled.div(templateObject_1$2G || (templateObject_1$2G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3199
3199
|
var backgroundColor = _a.backgroundColor;
|
|
3200
3200
|
return backgroundColor;
|
|
3201
3201
|
}, function (_a) {
|
|
@@ -3217,7 +3217,7 @@ var Container$1z = newStyled.div(templateObject_1$2F || (templateObject_1$2F = _
|
|
|
3217
3217
|
var size = _a.size;
|
|
3218
3218
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3219
3219
|
});
|
|
3220
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3220
|
+
var H3$2 = newStyled.h3(templateObject_2$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) {
|
|
3221
3221
|
var textColor = _a.textColor;
|
|
3222
3222
|
return textColor;
|
|
3223
3223
|
}, function (_a) {
|
|
@@ -3232,9 +3232,9 @@ var H3$2 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __makeTemp
|
|
|
3232
3232
|
var ClubOfferTag = function (_a) {
|
|
3233
3233
|
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;
|
|
3234
3234
|
var theme = useTheme();
|
|
3235
|
-
return (jsx$1(Container$
|
|
3235
|
+
return (jsx$1(Container$1A, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3236
3236
|
};
|
|
3237
|
-
var templateObject_1$
|
|
3237
|
+
var templateObject_1$2G, templateObject_2$1W;
|
|
3238
3238
|
|
|
3239
3239
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3240
3240
|
var _a, _b, _c;
|
|
@@ -3265,7 +3265,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3265
3265
|
};
|
|
3266
3266
|
}
|
|
3267
3267
|
};
|
|
3268
|
-
var Container$
|
|
3268
|
+
var Container$1z = newStyled.div(templateObject_1$2F || (templateObject_1$2F = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3269
3269
|
var backgroundColor = _a.backgroundColor;
|
|
3270
3270
|
return backgroundColor;
|
|
3271
3271
|
}, function (_a) {
|
|
@@ -3287,7 +3287,7 @@ var Container$1y = newStyled.div(templateObject_1$2E || (templateObject_1$2E = _
|
|
|
3287
3287
|
var size = _a.size;
|
|
3288
3288
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3289
3289
|
});
|
|
3290
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3290
|
+
var H3$1 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3291
3291
|
var textColor = _a.textColor;
|
|
3292
3292
|
return textColor;
|
|
3293
3293
|
}, function (_a) {
|
|
@@ -3302,9 +3302,9 @@ var H3$1 = newStyled.h3(templateObject_2$1U || (templateObject_2$1U = __makeTemp
|
|
|
3302
3302
|
var DiscountTag$4 = function (_a) {
|
|
3303
3303
|
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;
|
|
3304
3304
|
var theme = useTheme();
|
|
3305
|
-
return (jsx$1(Container$
|
|
3305
|
+
return (jsx$1(Container$1z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3306
3306
|
};
|
|
3307
|
-
var templateObject_1$
|
|
3307
|
+
var templateObject_1$2F, templateObject_2$1V;
|
|
3308
3308
|
|
|
3309
3309
|
var Viewports = {
|
|
3310
3310
|
mobile: 'mobile',
|
|
@@ -3373,8 +3373,8 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
3373
3373
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
3374
3374
|
};
|
|
3375
3375
|
|
|
3376
|
-
var Container$
|
|
3377
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3376
|
+
var Container$1y = newStyled.div(templateObject_1$2E || (templateObject_1$2E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3377
|
+
var Price$1 = newStyled.p(templateObject_2$1U || (templateObject_2$1U = __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) {
|
|
3378
3378
|
var weight = _a.weight;
|
|
3379
3379
|
return (weight ? weight : '400');
|
|
3380
3380
|
}, function (_a) {
|
|
@@ -3398,7 +3398,7 @@ var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __makeTe
|
|
|
3398
3398
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3399
3399
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3400
3400
|
});
|
|
3401
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3401
|
+
var TagContainer = newStyled.div(templateObject_3$1u || (templateObject_3$1u = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3402
3402
|
var _b;
|
|
3403
3403
|
var size = _a.size;
|
|
3404
3404
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3407,7 +3407,7 @@ var PriceContainer$3 = newStyled.div(templateObject_4$19 || (templateObject_4$19
|
|
|
3407
3407
|
var invertDirection = _a.invertDirection;
|
|
3408
3408
|
return (invertDirection ? 'row-reverse' : 'row');
|
|
3409
3409
|
});
|
|
3410
|
-
var templateObject_1$
|
|
3410
|
+
var templateObject_1$2E, templateObject_2$1U, templateObject_3$1u, templateObject_4$19;
|
|
3411
3411
|
|
|
3412
3412
|
var getStylesBySize$e = function (size, theme) {
|
|
3413
3413
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -3475,7 +3475,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3475
3475
|
: ComponentSize.XSmall;
|
|
3476
3476
|
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3477
3477
|
};
|
|
3478
|
-
return (jsxs$1(Container$
|
|
3478
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }), void 0)) : (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsx$1(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3479
3479
|
};
|
|
3480
3480
|
|
|
3481
3481
|
var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
|
|
@@ -3486,7 +3486,7 @@ var getCurrencySymbol = function (finalPrice) {
|
|
|
3486
3486
|
return currencySymbol !== null && currencySymbol !== void 0 ? currencySymbol : currencySymbolFallback;
|
|
3487
3487
|
};
|
|
3488
3488
|
|
|
3489
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3489
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3490
3490
|
var PriceLabelV2$1 = function (_a) {
|
|
3491
3491
|
var _b;
|
|
3492
3492
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, _j = _a.showDecimals, showDecimals = _j === void 0 ? true : _j, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings", "showDecimals"]);
|
|
@@ -3534,7 +3534,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3534
3534
|
var savetoString = saveto.toFixed(2);
|
|
3535
3535
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3536
3536
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3537
|
-
return (jsxs$1(Container$
|
|
3537
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3538
3538
|
? finalPriceArray[0]
|
|
3539
3539
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), showDecimals && (jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3540
3540
|
marginTop: '-6px',
|
|
@@ -3550,11 +3550,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3550
3550
|
lineHeight: '22px',
|
|
3551
3551
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3552
3552
|
};
|
|
3553
|
-
var templateObject_1$
|
|
3553
|
+
var templateObject_1$2D;
|
|
3554
3554
|
|
|
3555
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3556
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3557
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3555
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3556
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1T || (templateObject_2$1T = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3557
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3558
3558
|
var PriceLabelV3 = function (_a) {
|
|
3559
3559
|
var _b;
|
|
3560
3560
|
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"]);
|
|
@@ -3604,7 +3604,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3604
3604
|
return null;
|
|
3605
3605
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$2(testId, 'each-one-price') }, { children: [jsxs$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3606
3606
|
};
|
|
3607
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3607
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1y, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1y, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3608
3608
|
marginTop: '-5px',
|
|
3609
3609
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __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$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3610
3610
|
marginTop: '-6px',
|
|
@@ -3620,10 +3620,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3620
3620
|
lineHeight: '22px',
|
|
3621
3621
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3622
3622
|
};
|
|
3623
|
-
var templateObject_1$
|
|
3623
|
+
var templateObject_1$2C, templateObject_2$1T, templateObject_3$1t;
|
|
3624
3624
|
|
|
3625
|
-
var Container$
|
|
3626
|
-
var Price = newStyled.p(templateObject_2$
|
|
3625
|
+
var Container$1x = newStyled.div(templateObject_1$2B || (templateObject_1$2B = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3626
|
+
var Price = newStyled.p(templateObject_2$1S || (templateObject_2$1S = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3627
3627
|
var weight = _a.weight;
|
|
3628
3628
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3629
3629
|
}, function (_a) {
|
|
@@ -3636,7 +3636,7 @@ var Price = newStyled.p(templateObject_2$1R || (templateObject_2$1R = __makeTemp
|
|
|
3636
3636
|
var underlined = _a.underlined;
|
|
3637
3637
|
return (underlined ? 'line-through' : 'none');
|
|
3638
3638
|
});
|
|
3639
|
-
var templateObject_1$
|
|
3639
|
+
var templateObject_1$2B, templateObject_2$1S;
|
|
3640
3640
|
|
|
3641
3641
|
function getTestId$1() {
|
|
3642
3642
|
var args = [];
|
|
@@ -3657,10 +3657,10 @@ var PriceLabelV5 = function (_a) {
|
|
|
3657
3657
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3658
3658
|
weight: 700,
|
|
3659
3659
|
};
|
|
3660
|
-
return (jsx$1(Container$
|
|
3660
|
+
return (jsx$1(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsx$1(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3661
3661
|
};
|
|
3662
3662
|
|
|
3663
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3663
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2A || (templateObject_1$2A = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3664
3664
|
var PriceLabel = function (_a) {
|
|
3665
3665
|
var _b;
|
|
3666
3666
|
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"]);
|
|
@@ -3683,15 +3683,15 @@ var PriceLabel = function (_a) {
|
|
|
3683
3683
|
};
|
|
3684
3684
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3685
3685
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3686
|
-
return (jsxs$1(Container$
|
|
3686
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3687
3687
|
marginTop: '-5px',
|
|
3688
3688
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __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$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3689
3689
|
marginTop: '-6px',
|
|
3690
3690
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3691
3691
|
};
|
|
3692
|
-
var templateObject_1$
|
|
3692
|
+
var templateObject_1$2A;
|
|
3693
3693
|
|
|
3694
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3694
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2z || (templateObject_1$2z = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3695
3695
|
var PriceLabelV2 = function (_a) {
|
|
3696
3696
|
var _b;
|
|
3697
3697
|
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"]);
|
|
@@ -3717,13 +3717,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3717
3717
|
var finalPriceString = finalPriceArray[0]
|
|
3718
3718
|
? finalPriceArray[0]
|
|
3719
3719
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3720
|
-
return (jsxs$1(Container$
|
|
3720
|
+
return (jsxs$1(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3721
3721
|
};
|
|
3722
|
-
var templateObject_1$
|
|
3722
|
+
var templateObject_1$2z;
|
|
3723
3723
|
|
|
3724
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3725
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3726
|
-
var templateObject_1$
|
|
3724
|
+
var ContainerWrapper$3 = newStyled.div(templateObject_1$2y || (templateObject_1$2y = __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"])));
|
|
3725
|
+
var ImgWrapper = newStyled.div(templateObject_2$1R || (templateObject_2$1R = __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"])));
|
|
3726
|
+
var templateObject_1$2y, templateObject_2$1R;
|
|
3727
3727
|
|
|
3728
3728
|
var ClubPriceMemberLabel = function (_a) {
|
|
3729
3729
|
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"]);
|
|
@@ -3732,13 +3732,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3732
3732
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$3, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3733
3733
|
};
|
|
3734
3734
|
|
|
3735
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3735
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2x || (templateObject_1$2x = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
3736
3736
|
var width = _a.width;
|
|
3737
3737
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3738
3738
|
});
|
|
3739
|
-
var templateObject_1$
|
|
3739
|
+
var templateObject_1$2x;
|
|
3740
3740
|
|
|
3741
|
-
var Container$
|
|
3741
|
+
var Container$1w = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __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) {
|
|
3742
3742
|
var height = _a.height;
|
|
3743
3743
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3744
3744
|
}, function (_a) {
|
|
@@ -3763,11 +3763,11 @@ var Container$1v = newStyled.div(templateObject_1$2v || (templateObject_1$2v = _
|
|
|
3763
3763
|
var SkeletonBox = function (_a) {
|
|
3764
3764
|
var width = _a.width, height = _a.height;
|
|
3765
3765
|
var theme = useTheme();
|
|
3766
|
-
return jsx$1(Container$
|
|
3766
|
+
return jsx$1(Container$1w, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3767
3767
|
};
|
|
3768
|
-
var templateObject_1$
|
|
3768
|
+
var templateObject_1$2w;
|
|
3769
3769
|
|
|
3770
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3770
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2v || (templateObject_1$2v = __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) {
|
|
3771
3771
|
var width = _a.width;
|
|
3772
3772
|
return width;
|
|
3773
3773
|
}, function (_a) {
|
|
@@ -3783,7 +3783,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u
|
|
|
3783
3783
|
var opacity = _a.opacity;
|
|
3784
3784
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3785
3785
|
});
|
|
3786
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3786
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1Q || (templateObject_2$1Q = __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) {
|
|
3787
3787
|
var width = _a.width;
|
|
3788
3788
|
return width;
|
|
3789
3789
|
}, function (_a) {
|
|
@@ -3796,7 +3796,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$
|
|
|
3796
3796
|
var opacity = _a.opacity;
|
|
3797
3797
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3798
3798
|
});
|
|
3799
|
-
var templateObject_1$
|
|
3799
|
+
var templateObject_1$2v, templateObject_2$1Q;
|
|
3800
3800
|
|
|
3801
3801
|
/* eslint-disable no-undef */
|
|
3802
3802
|
var cache = new Map();
|
|
@@ -3972,7 +3972,7 @@ var buildImageUrl = function (_a) {
|
|
|
3972
3972
|
}
|
|
3973
3973
|
};
|
|
3974
3974
|
|
|
3975
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3975
|
+
var Img$1 = newStyled.img(templateObject_1$2u || (templateObject_1$2u = __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; });
|
|
3976
3976
|
var Image$3 = function (_a) {
|
|
3977
3977
|
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"]);
|
|
3978
3978
|
var config = useTheme().config;
|
|
@@ -3981,15 +3981,15 @@ var Image$3 = function (_a) {
|
|
|
3981
3981
|
: src;
|
|
3982
3982
|
return (jsx$1(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3983
3983
|
};
|
|
3984
|
-
var templateObject_1$
|
|
3984
|
+
var templateObject_1$2u;
|
|
3985
3985
|
|
|
3986
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3987
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3988
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3986
|
+
var LabelWrapper = newStyled.label(templateObject_1$2t || (templateObject_1$2t = __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"])));
|
|
3987
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1P || (templateObject_2$1P = __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"])));
|
|
3988
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1s || (templateObject_3$1s = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3989
3989
|
var $color = _a.$color;
|
|
3990
3990
|
return $color;
|
|
3991
3991
|
});
|
|
3992
|
-
var templateObject_1$
|
|
3992
|
+
var templateObject_1$2t, templateObject_2$1P, templateObject_3$1s;
|
|
3993
3993
|
|
|
3994
3994
|
var ToggleComponent = function (_a) {
|
|
3995
3995
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c, rest = __rest(_a, ["onToggle", "isChecked", "color"]);
|
|
@@ -4871,9 +4871,9 @@ function jsxs(type, props, key) {
|
|
|
4871
4871
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4872
4872
|
// `variants` styles that are consistent through all themes.
|
|
4873
4873
|
var TAGS = {
|
|
4874
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4875
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4876
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4874
|
+
hero1: newStyled.h1(templateObject_1$2s || (templateObject_1$2s = __makeTemplateObject([""], [""]))),
|
|
4875
|
+
hero2: newStyled.h2(templateObject_2$1O || (templateObject_2$1O = __makeTemplateObject([""], [""]))),
|
|
4876
|
+
hero3: newStyled.h3(templateObject_3$1r || (templateObject_3$1r = __makeTemplateObject([""], [""]))),
|
|
4877
4877
|
display1: newStyled.h1(templateObject_4$18 || (templateObject_4$18 = __makeTemplateObject([""], [""]))),
|
|
4878
4878
|
display2: newStyled.h2(templateObject_5$T || (templateObject_5$T = __makeTemplateObject([""], [""]))),
|
|
4879
4879
|
display3: newStyled.h3(templateObject_6$K || (templateObject_6$K = __makeTemplateObject([""], [""]))),
|
|
@@ -5011,17 +5011,17 @@ var DEFAULTS = {
|
|
|
5011
5011
|
size: 'regular',
|
|
5012
5012
|
},
|
|
5013
5013
|
};
|
|
5014
|
-
var templateObject_1$
|
|
5014
|
+
var templateObject_1$2s, templateObject_2$1O, templateObject_3$1r, templateObject_4$18, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t, templateObject_9$h, templateObject_10$f, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$4, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5015
5015
|
|
|
5016
|
-
var Container$
|
|
5017
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5018
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5016
|
+
var Container$1v = newStyled.div(templateObject_1$2r || (templateObject_1$2r = __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"])));
|
|
5017
|
+
var Card$4 = newStyled.div(templateObject_2$1N || (templateObject_2$1N = __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"])));
|
|
5018
|
+
var Tag$2 = newStyled.div(templateObject_3$1q || (templateObject_3$1q = __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"])));
|
|
5019
5019
|
var Label$7 = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
5020
5020
|
var Check$1 = newStyled.div(templateObject_5$S || (templateObject_5$S = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
5021
5021
|
var DiscountContainer$1 = newStyled.div(templateObject_6$J || (templateObject_6$J = __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"])));
|
|
5022
5022
|
var PackSelectorV2 = function (_a) {
|
|
5023
5023
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5024
|
-
return (jsx$1(Container$
|
|
5024
|
+
return (jsx$1(Container$1v, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5025
5025
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5026
5026
|
}) }), void 0));
|
|
5027
5027
|
};
|
|
@@ -5043,27 +5043,27 @@ var PackCard$1 = function (_a) {
|
|
|
5043
5043
|
currency: currencyCode || 'USD',
|
|
5044
5044
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5045
5045
|
};
|
|
5046
|
-
var templateObject_1$
|
|
5046
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$17, templateObject_5$S, templateObject_6$J;
|
|
5047
5047
|
|
|
5048
|
-
var Container$
|
|
5049
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5048
|
+
var Container$1u = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5049
|
+
var DropContainer = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5050
5050
|
var DropList = function (_a) {
|
|
5051
5051
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5052
|
-
return (jsx$1(Container$
|
|
5052
|
+
return (jsx$1(Container$1u, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5053
5053
|
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));
|
|
5054
5054
|
}) }, void 0));
|
|
5055
5055
|
};
|
|
5056
|
-
var templateObject_1$
|
|
5056
|
+
var templateObject_1$2q, templateObject_2$1M;
|
|
5057
5057
|
|
|
5058
5058
|
var DROPS_TOTAL = 5;
|
|
5059
|
-
var Container$
|
|
5060
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5061
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5059
|
+
var Container$1t = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5060
|
+
var Title$b = newStyled.p(templateObject_2$1L || (templateObject_2$1L = __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"])));
|
|
5061
|
+
var Description$3 = newStyled.p(templateObject_3$1p || (templateObject_3$1p = __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"])));
|
|
5062
5062
|
var AbsorbencyLevel = function (_a) {
|
|
5063
5063
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5064
|
-
return (jsxs$1(Container$
|
|
5064
|
+
return (jsxs$1(Container$1t, { 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));
|
|
5065
5065
|
};
|
|
5066
|
-
var templateObject_1$
|
|
5066
|
+
var templateObject_1$2p, templateObject_2$1L, templateObject_3$1p;
|
|
5067
5067
|
|
|
5068
5068
|
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(`
|
|
5069
5069
|
`),"","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(`
|
|
@@ -5139,7 +5139,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5139
5139
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5140
5140
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5141
5141
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5142
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5142
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2o || (templateObject_1$2o = __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"])));
|
|
5143
5143
|
var Accordion$1 = function (_a) {
|
|
5144
5144
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5145
5145
|
var theme = useTheme();
|
|
@@ -5163,9 +5163,9 @@ var Accordion$1 = function (_a) {
|
|
|
5163
5163
|
} }, { 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));
|
|
5164
5164
|
} }), void 0));
|
|
5165
5165
|
};
|
|
5166
|
-
var templateObject_1$
|
|
5166
|
+
var templateObject_1$2o;
|
|
5167
5167
|
|
|
5168
|
-
var Container$
|
|
5168
|
+
var Container$1s = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5169
5169
|
var AccordionOptions = function (_a) {
|
|
5170
5170
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5171
5171
|
var _b = useState({
|
|
@@ -5178,7 +5178,7 @@ var AccordionOptions = function (_a) {
|
|
|
5178
5178
|
}
|
|
5179
5179
|
return false;
|
|
5180
5180
|
};
|
|
5181
|
-
return (jsx$1(Container$
|
|
5181
|
+
return (jsx$1(Container$1s, { children: accordions.map(function (accordion, index) {
|
|
5182
5182
|
var forceOpenValue = getForceOpen(index);
|
|
5183
5183
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5184
5184
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5189,7 +5189,7 @@ var AccordionOptions = function (_a) {
|
|
|
5189
5189
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5190
5190
|
}) }, void 0));
|
|
5191
5191
|
};
|
|
5192
|
-
var templateObject_1$
|
|
5192
|
+
var templateObject_1$2n;
|
|
5193
5193
|
|
|
5194
5194
|
var isDangerouslySetInnerHTML = function (content) {
|
|
5195
5195
|
return content && typeof content === 'object' && '__html' in content;
|
|
@@ -5402,27 +5402,27 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5402
5402
|
literal: true,
|
|
5403
5403
|
});
|
|
5404
5404
|
|
|
5405
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5406
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5407
|
-
var templateObject_1$
|
|
5405
|
+
var Bold = newStyled.span(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5406
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1K || (templateObject_2$1K = __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"])));
|
|
5407
|
+
var templateObject_1$2m, templateObject_2$1K;
|
|
5408
5408
|
|
|
5409
|
-
var Container$
|
|
5409
|
+
var Container$1r = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __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) {
|
|
5410
5410
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5411
5411
|
return width;
|
|
5412
5412
|
}, function (_a) {
|
|
5413
5413
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5414
5414
|
return height;
|
|
5415
5415
|
});
|
|
5416
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5417
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5416
|
+
var FlexCentered = newStyled.div(templateObject_2$1J || (templateObject_2$1J = __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"])));
|
|
5417
|
+
var LeftSide = newStyled.div(templateObject_3$1o || (templateObject_3$1o = __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"])));
|
|
5418
5418
|
var RightSide = newStyled.div(templateObject_4$16 || (templateObject_4$16 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5419
5419
|
var FlexStart = newStyled.div(templateObject_5$R || (templateObject_5$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5420
|
-
var templateObject_1$
|
|
5420
|
+
var templateObject_1$2l, templateObject_2$1J, templateObject_3$1o, templateObject_4$16, templateObject_5$R;
|
|
5421
5421
|
|
|
5422
5422
|
var CouponCard = function (_a) {
|
|
5423
5423
|
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;
|
|
5424
5424
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5425
|
-
return (jsxs$1(Container$
|
|
5425
|
+
return (jsxs$1(Container$1r, __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 () {
|
|
5426
5426
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5427
5427
|
setShowCoupon(function (prev) { return !prev; });
|
|
5428
5428
|
} }, 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: {
|
|
@@ -5505,14 +5505,14 @@ var isValidDate = function (value) {
|
|
|
5505
5505
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5506
5506
|
};
|
|
5507
5507
|
|
|
5508
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5509
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5508
|
+
var ErrorText = newStyled.h3(templateObject_1$2k || (templateObject_1$2k = __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; });
|
|
5509
|
+
var ErrorContainer = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __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"])));
|
|
5510
5510
|
var Error$1 = function (_a) {
|
|
5511
5511
|
var error = _a.error;
|
|
5512
5512
|
var theme = useTheme();
|
|
5513
5513
|
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));
|
|
5514
5514
|
};
|
|
5515
|
-
var templateObject_1$
|
|
5515
|
+
var templateObject_1$2k, templateObject_2$1I;
|
|
5516
5516
|
|
|
5517
5517
|
var BaseSelectButton = function (_a) {
|
|
5518
5518
|
var children = _a.children, as = _a.as;
|
|
@@ -5529,7 +5529,7 @@ function BaseSelectOption(_a) {
|
|
|
5529
5529
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5530
5530
|
}
|
|
5531
5531
|
|
|
5532
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5532
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5533
5533
|
function BaseSelect(_a) {
|
|
5534
5534
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5535
5535
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5539,7 +5539,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5539
5539
|
Options: BaseSelectOptions,
|
|
5540
5540
|
Option: BaseSelectOption,
|
|
5541
5541
|
});
|
|
5542
|
-
var templateObject_1$
|
|
5542
|
+
var templateObject_1$2j;
|
|
5543
5543
|
|
|
5544
5544
|
var CustomButton = newStyled.button(function (_a) {
|
|
5545
5545
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5578,7 +5578,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5578
5578
|
});
|
|
5579
5579
|
});
|
|
5580
5580
|
// TODO Remove this when we find the real solution
|
|
5581
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5581
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5582
5582
|
var open = _a.open;
|
|
5583
5583
|
return open &&
|
|
5584
5584
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5598,7 +5598,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5598
5598
|
} }), void 0));
|
|
5599
5599
|
};
|
|
5600
5600
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5601
|
-
var templateObject_1$
|
|
5601
|
+
var templateObject_1$2i;
|
|
5602
5602
|
|
|
5603
5603
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5604
5604
|
var theme = _a.theme;
|
|
@@ -5765,7 +5765,7 @@ var CustomCheckboxStyles = {
|
|
|
5765
5765
|
},
|
|
5766
5766
|
};
|
|
5767
5767
|
|
|
5768
|
-
var Container$
|
|
5768
|
+
var Container$1q = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __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"])));
|
|
5769
5769
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5770
5770
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5771
5771
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5776,7 +5776,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5776
5776
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5777
5777
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5778
5778
|
]; });
|
|
5779
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5779
|
+
var Input$5 = newStyled.input(templateObject_2$1H || (templateObject_2$1H = __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) {
|
|
5780
5780
|
var disabled = _a.disabled;
|
|
5781
5781
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5782
5782
|
});
|
|
@@ -5790,11 +5790,11 @@ var Checkbox = function (_a) {
|
|
|
5790
5790
|
}
|
|
5791
5791
|
onChange(e.target.checked);
|
|
5792
5792
|
};
|
|
5793
|
-
return (jsxs$1(Container$
|
|
5793
|
+
return (jsxs$1(Container$1q, { 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: text === 'White'
|
|
5794
5794
|
? theme.colors.shades['black'].color
|
|
5795
5795
|
: theme.colors.shades['white'].color }, void 0)) }), void 0), jsx$1(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5796
5796
|
};
|
|
5797
|
-
var templateObject_1$
|
|
5797
|
+
var templateObject_1$2h, templateObject_2$1H;
|
|
5798
5798
|
|
|
5799
5799
|
var CustomOption = newStyled.li(function (_a) {
|
|
5800
5800
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5843,9 +5843,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5843
5843
|
Option: BaseDropdownOption,
|
|
5844
5844
|
});
|
|
5845
5845
|
|
|
5846
|
-
var Container$
|
|
5847
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5848
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5846
|
+
var Container$1p = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject([""], [""])));
|
|
5847
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1G || (templateObject_2$1G = __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"])));
|
|
5848
|
+
var SelectedOption = newStyled.span(templateObject_3$1n || (templateObject_3$1n = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5849
5849
|
var fontWeight = _a.fontWeight;
|
|
5850
5850
|
return fontWeight || '';
|
|
5851
5851
|
});
|
|
@@ -5878,10 +5878,10 @@ function SimpleDropdown(_a) {
|
|
|
5878
5878
|
}
|
|
5879
5879
|
setSelectedValue(value);
|
|
5880
5880
|
}, [value, options, initialValue]);
|
|
5881
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5881
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1p : Fragment$1;
|
|
5882
5882
|
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));
|
|
5883
5883
|
}
|
|
5884
|
-
var templateObject_1$
|
|
5884
|
+
var templateObject_1$2g, templateObject_2$1G, templateObject_3$1n;
|
|
5885
5885
|
|
|
5886
5886
|
/* base styles & size variants */
|
|
5887
5887
|
var CustomRadioStyles$2 = {
|
|
@@ -5946,9 +5946,9 @@ var ContainerStyles$2 = {
|
|
|
5946
5946
|
},
|
|
5947
5947
|
};
|
|
5948
5948
|
|
|
5949
|
-
var Wrapper$
|
|
5950
|
-
var Container$
|
|
5951
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5949
|
+
var Wrapper$8 = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5950
|
+
var Container$1o = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5951
|
+
var Input$4 = newStyled.input(templateObject_2$1F || (templateObject_2$1F = __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) {
|
|
5952
5952
|
var disabled = _a.disabled;
|
|
5953
5953
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5954
5954
|
});
|
|
@@ -5956,7 +5956,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5956
5956
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5957
5957
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5958
5958
|
]; });
|
|
5959
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5959
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5960
5960
|
var theme = _a.theme;
|
|
5961
5961
|
return theme.component.radio.textSize;
|
|
5962
5962
|
}, function (_a) {
|
|
@@ -5980,9 +5980,9 @@ var RadioInput = function (_a) {
|
|
|
5980
5980
|
var value = event.currentTarget.value;
|
|
5981
5981
|
onChange({ value: value, label: label });
|
|
5982
5982
|
};
|
|
5983
|
-
return (jsxs$1(Wrapper$
|
|
5983
|
+
return (jsxs$1(Wrapper$8, { children: [jsxs$1(Container$1o, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5984
5984
|
};
|
|
5985
|
-
var templateObject_1$
|
|
5985
|
+
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m, templateObject_4$15;
|
|
5986
5986
|
|
|
5987
5987
|
var useOnClickOutside = function (ref, handler) {
|
|
5988
5988
|
useEffect(function () {
|
|
@@ -6075,7 +6075,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6075
6075
|
}
|
|
6076
6076
|
};
|
|
6077
6077
|
|
|
6078
|
-
var Wrapper$
|
|
6078
|
+
var Wrapper$7 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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) {
|
|
6079
6079
|
var position = _a.position;
|
|
6080
6080
|
return getWrapperFlexDirection(position);
|
|
6081
6081
|
}, function (_a) {
|
|
@@ -6085,7 +6085,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __ma
|
|
|
6085
6085
|
var disableHover = _a.disableHover;
|
|
6086
6086
|
return (disableHover ? 0 : 1);
|
|
6087
6087
|
});
|
|
6088
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6088
|
+
var TooltipContainer = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __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) {
|
|
6089
6089
|
var position = _a.position;
|
|
6090
6090
|
return getContainerFlexDirection(position);
|
|
6091
6091
|
}, function (_a) {
|
|
@@ -6113,7 +6113,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1D || (templateObject_2$1D
|
|
|
6113
6113
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6114
6114
|
return actual === expected ? margin : '0';
|
|
6115
6115
|
};
|
|
6116
|
-
var ContentWrapper$1 = newStyled.div(templateObject_3$
|
|
6116
|
+
var ContentWrapper$1 = newStyled.div(templateObject_3$1l || (templateObject_3$1l = __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) {
|
|
6117
6117
|
var borderColor = _a.borderColor;
|
|
6118
6118
|
return borderColor;
|
|
6119
6119
|
}, function (_a) {
|
|
@@ -6140,7 +6140,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6140
6140
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6141
6141
|
return right;
|
|
6142
6142
|
});
|
|
6143
|
-
var templateObject_1$
|
|
6143
|
+
var templateObject_1$2e, templateObject_2$1E, templateObject_3$1l, templateObject_4$14, templateObject_5$Q, templateObject_6$I, templateObject_7$z, templateObject_8$s;
|
|
6144
6144
|
|
|
6145
6145
|
var Tooltip = function (_a) {
|
|
6146
6146
|
var _b;
|
|
@@ -6160,7 +6160,7 @@ var Tooltip = function (_a) {
|
|
|
6160
6160
|
var ref = tooltipRef.current;
|
|
6161
6161
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
6162
6162
|
}, [tooltipRef]);
|
|
6163
|
-
return (jsxs$1(Wrapper$
|
|
6163
|
+
return (jsxs$1(Wrapper$7, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$6, { children: React__default.createElement(header.Icon, {
|
|
6164
6164
|
testId: 'HeaderIcon',
|
|
6165
6165
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
6166
6166
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -6183,8 +6183,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6183
6183
|
};
|
|
6184
6184
|
};
|
|
6185
6185
|
|
|
6186
|
-
var FlexContainer$4 = newStyled.div(templateObject_1$
|
|
6187
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6186
|
+
var FlexContainer$4 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6187
|
+
var ContainerBase$5 = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __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) {
|
|
6188
6188
|
var selected = _a.selected, theme = _a.theme;
|
|
6189
6189
|
return selected
|
|
6190
6190
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6198,7 +6198,7 @@ var ContainerBase$5 = newStyled.div(templateObject_2$1C || (templateObject_2$1C
|
|
|
6198
6198
|
var theme = _a.theme;
|
|
6199
6199
|
return theme.colors.pallete.primary.color;
|
|
6200
6200
|
});
|
|
6201
|
-
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$
|
|
6201
|
+
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1k || (templateObject_3$1k = __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) {
|
|
6202
6202
|
var onClick = _a.onClick;
|
|
6203
6203
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6204
6204
|
});
|
|
@@ -6220,8 +6220,8 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6220
6220
|
var selected = _a.selected, theme = _a.theme;
|
|
6221
6221
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6222
6222
|
});
|
|
6223
|
-
var Container$
|
|
6224
|
-
var templateObject_1$
|
|
6223
|
+
var Container$1n = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6224
|
+
var templateObject_1$2d, templateObject_2$1D, templateObject_3$1k, templateObject_4$13, templateObject_5$P, templateObject_6$H, templateObject_7$y, templateObject_8$r, templateObject_9$g, templateObject_10$e, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6225
6225
|
|
|
6226
6226
|
var radioIds$3 = {
|
|
6227
6227
|
oneTime: {
|
|
@@ -6271,17 +6271,17 @@ var Autoship = function (_a) {
|
|
|
6271
6271
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6272
6272
|
};
|
|
6273
6273
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6274
|
-
return (jsxs$1(Container$
|
|
6274
|
+
return (jsxs$1(Container$1n, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$4, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$3.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$3.oneTime.id, id: radioIds$3.oneTime.id, value: radioIds$3.oneTime.id, checked: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$5, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$3.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$5, __assign$1({ onClick: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$3.autoship.id, id: radioIds$3.autoship.id, value: radioIds$3.autoship.id, checked: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$4, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$3.autoship.id === radioCheck.id
|
|
6275
6275
|
? benefitsColor.selected
|
|
6276
6276
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$4, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$4, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6277
6277
|
};
|
|
6278
6278
|
|
|
6279
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6279
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6280
6280
|
var theme = _a.theme;
|
|
6281
6281
|
return theme.name === 'TheSpaDr' &&
|
|
6282
6282
|
"\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 ";
|
|
6283
6283
|
});
|
|
6284
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6284
|
+
var DiscountTag$3 = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __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) {
|
|
6285
6285
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6286
6286
|
return isSelected
|
|
6287
6287
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6297,7 +6297,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6297
6297
|
}
|
|
6298
6298
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6299
6299
|
};
|
|
6300
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$
|
|
6300
|
+
var ContainerBase$4 = newStyled.div(templateObject_3$1j || (templateObject_3$1j = __makeTemplateObject(["\n border-radius: ", ";\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: ", ";\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6301
6301
|
var borderRadiusValue = _a.borderRadiusValue;
|
|
6302
6302
|
return borderRadiusValue !== null && borderRadiusValue !== void 0 ? borderRadiusValue : '8px';
|
|
6303
6303
|
}, function (_a) {
|
|
@@ -6332,13 +6332,13 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6332
6332
|
var selected = _a.selected, theme = _a.theme;
|
|
6333
6333
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6334
6334
|
});
|
|
6335
|
-
var Container$
|
|
6335
|
+
var Container$1m = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6336
6336
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6337
6337
|
var theme = _a.theme;
|
|
6338
6338
|
return theme.component.autoship.tooltip.margin;
|
|
6339
6339
|
});
|
|
6340
6340
|
var BulletIconWrapper = newStyled.div(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n margin-right: 9px;\n"], ["\n margin-right: 9px;\n"])));
|
|
6341
|
-
var templateObject_1$
|
|
6341
|
+
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$12, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$f, templateObject_10$d, templateObject_11$8, templateObject_12$5, templateObject_13$4, templateObject_14$3;
|
|
6342
6342
|
|
|
6343
6343
|
var radioIds$2 = {
|
|
6344
6344
|
oneTime: {
|
|
@@ -6398,7 +6398,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6398
6398
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6399
6399
|
};
|
|
6400
6400
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6401
|
-
return (jsxs$1(Container$
|
|
6401
|
+
return (jsxs$1(Container$1m, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id, borderRadiusValue: borderRadiusValue }, { children: [jsx$1(DiscountTag$3, __assign$1({ isSelected: radioIds$2.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$4, { children: [jsxs$1(FlexContainer$3, { 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, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { 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$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [hasInfoBulletIcons && (jsx$1(BulletIconWrapper, { children: jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6402
6402
|
? benefitsColor.selected
|
|
6403
6403
|
: benefitsColor.base }, void 0) }, void 0)), jsx$1(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery 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: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, borderRadiusValue: borderRadiusValue, 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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6404
6404
|
};
|
|
@@ -6417,13 +6417,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6417
6417
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6418
6418
|
_a$2);
|
|
6419
6419
|
|
|
6420
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6421
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6422
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6420
|
+
var CustomerDetails = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject([""], [""])));
|
|
6421
|
+
var CustomerInfo = 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"])));
|
|
6422
|
+
var Name = newStyled.h4(templateObject_3$1i || (templateObject_3$1i = __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"])));
|
|
6423
6423
|
var StarIconContainer = newStyled.div(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6424
6424
|
var Description$2 = newStyled.p(templateObject_5$N || (templateObject_5$N = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6425
6425
|
var ReviewDays = newStyled.span(templateObject_6$F || (templateObject_6$F = __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"])));
|
|
6426
|
-
var templateObject_1$
|
|
6426
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$11, templateObject_5$N, templateObject_6$F;
|
|
6427
6427
|
|
|
6428
6428
|
var NameWithStars = function (_a) {
|
|
6429
6429
|
var name = _a.name, size = _a.size;
|
|
@@ -6441,9 +6441,9 @@ var ResultFeedback = function (_a) {
|
|
|
6441
6441
|
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));
|
|
6442
6442
|
};
|
|
6443
6443
|
|
|
6444
|
-
var Container$
|
|
6445
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6446
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6444
|
+
var Container$1l = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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; });
|
|
6445
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __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"])));
|
|
6446
|
+
var ImageCard = newStyled.div(templateObject_3$1h || (templateObject_3$1h = __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; });
|
|
6447
6447
|
var UserInfoText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6448
6448
|
var theme = _a.theme;
|
|
6449
6449
|
return theme.colors.pallete.secondary.color;
|
|
@@ -6454,7 +6454,7 @@ var UserInfoText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = _
|
|
|
6454
6454
|
var theme = _a.theme, size = _a.size;
|
|
6455
6455
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6456
6456
|
});
|
|
6457
|
-
var templateObject_1$
|
|
6457
|
+
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$10;
|
|
6458
6458
|
|
|
6459
6459
|
/* base styles & size variants */
|
|
6460
6460
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6529,10 +6529,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6529
6529
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6530
6530
|
var infoText = buildInfoText(name, age, months);
|
|
6531
6531
|
var Component = componentByVariant[variant];
|
|
6532
|
-
return (jsxs$1(Container$
|
|
6532
|
+
return (jsxs$1(Container$1l, __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));
|
|
6533
6533
|
};
|
|
6534
6534
|
|
|
6535
|
-
var Section = newStyled.div(templateObject_1$
|
|
6535
|
+
var Section = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __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) {
|
|
6536
6536
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6537
6537
|
});
|
|
6538
6538
|
var CardHeader = function (_a) {
|
|
@@ -6543,16 +6543,16 @@ var CardFooter = function (_a) {
|
|
|
6543
6543
|
var children = _a.children;
|
|
6544
6544
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6545
6545
|
};
|
|
6546
|
-
var templateObject_1$
|
|
6546
|
+
var templateObject_1$29;
|
|
6547
6547
|
|
|
6548
|
-
var Body$3 = newStyled.div(templateObject_1$
|
|
6548
|
+
var Body$3 = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __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"])));
|
|
6549
6549
|
var CardBody$1 = function (_a) {
|
|
6550
6550
|
var children = _a.children;
|
|
6551
6551
|
return jsx$1(Body$3, { children: children }, void 0);
|
|
6552
6552
|
};
|
|
6553
|
-
var templateObject_1$
|
|
6553
|
+
var templateObject_1$28;
|
|
6554
6554
|
|
|
6555
|
-
var Container$
|
|
6555
|
+
var Container$1k = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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) {
|
|
6556
6556
|
var flex = _a.flex;
|
|
6557
6557
|
return flex &&
|
|
6558
6558
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6567,23 +6567,23 @@ var Container$1j = newStyled.div(templateObject_1$26 || (templateObject_1$26 = _
|
|
|
6567
6567
|
var Card$2 = function (_a) {
|
|
6568
6568
|
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;
|
|
6569
6569
|
var theme = useTheme();
|
|
6570
|
-
return (jsx$1(Container$
|
|
6570
|
+
return (jsx$1(Container$1k, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6571
6571
|
};
|
|
6572
6572
|
var Card$3 = Object.assign(Card$2, {
|
|
6573
6573
|
Header: CardHeader,
|
|
6574
6574
|
Footer: CardFooter,
|
|
6575
6575
|
Body: CardBody$1,
|
|
6576
6576
|
});
|
|
6577
|
-
var templateObject_1$
|
|
6577
|
+
var templateObject_1$27;
|
|
6578
6578
|
|
|
6579
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6580
|
-
var StyledContainer$1 = newStyled.div(templateObject_2$
|
|
6581
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6579
|
+
var StyledWrapper = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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"])));
|
|
6580
|
+
var StyledContainer$1 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
6581
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$1g || (templateObject_3$1g = __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) {
|
|
6582
6582
|
var color = _a.color;
|
|
6583
6583
|
return color;
|
|
6584
6584
|
});
|
|
6585
6585
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6586
|
-
var templateObject_1$
|
|
6586
|
+
var templateObject_1$26, templateObject_2$1z, templateObject_3$1g, templateObject_4$$;
|
|
6587
6587
|
|
|
6588
6588
|
var Minimalistic = function (_a) {
|
|
6589
6589
|
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;
|
|
@@ -6591,24 +6591,24 @@ var Minimalistic = function (_a) {
|
|
|
6591
6591
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer$1, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer$1, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer$1, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6592
6592
|
};
|
|
6593
6593
|
|
|
6594
|
-
var StyledContainer = newStyled.div(templateObject_1$
|
|
6595
|
-
var templateObject_1$
|
|
6594
|
+
var StyledContainer = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 12px;\n @media (max-width: 992px) {\n padding: 0.62px;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 12px;\n @media (max-width: 992px) {\n padding: 0.62px;\n"])));
|
|
6595
|
+
var templateObject_1$25;
|
|
6596
6596
|
|
|
6597
6597
|
var Motivator = function (_a) {
|
|
6598
6598
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, content = _a.content, _d = _a.testId, testId = _d === void 0 ? 'motivator' : _d;
|
|
6599
6599
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: true, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsx$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: typeof content === 'string' ? (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: content }), void 0)) : (content) }), void 0) }), void 0));
|
|
6600
6600
|
};
|
|
6601
6601
|
|
|
6602
|
-
var Container$
|
|
6603
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6604
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6602
|
+
var Container$1j = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6603
|
+
var Title$9 = newStyled.h1(templateObject_2$1y || (templateObject_2$1y = __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; });
|
|
6604
|
+
var Details$1 = newStyled.span(templateObject_3$1f || (templateObject_3$1f = __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; });
|
|
6605
6605
|
var PriceContainer$2 = newStyled.span(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6606
6606
|
var Simple = function (_a) {
|
|
6607
6607
|
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;
|
|
6608
6608
|
var theme = useTheme();
|
|
6609
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6609
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1j, { 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));
|
|
6610
6610
|
};
|
|
6611
|
-
var templateObject_1$
|
|
6611
|
+
var templateObject_1$24, templateObject_2$1y, templateObject_3$1f, templateObject_4$_;
|
|
6612
6612
|
|
|
6613
6613
|
var Bundle = {
|
|
6614
6614
|
Minimalistic: Minimalistic,
|
|
@@ -6616,12 +6616,12 @@ var Bundle = {
|
|
|
6616
6616
|
Motivator: Motivator,
|
|
6617
6617
|
};
|
|
6618
6618
|
|
|
6619
|
-
var Container$
|
|
6619
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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) {
|
|
6620
6620
|
var displayBNPL = _a.displayBNPL;
|
|
6621
6621
|
return (displayBNPL ? 'flex' : 'none');
|
|
6622
6622
|
});
|
|
6623
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6624
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6623
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6624
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$1e || (templateObject_3$1e = __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"])));
|
|
6625
6625
|
var BuyNowPayLater = function (_a) {
|
|
6626
6626
|
var _b;
|
|
6627
6627
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
|
|
@@ -6641,16 +6641,16 @@ var BuyNowPayLater = function (_a) {
|
|
|
6641
6641
|
else {
|
|
6642
6642
|
dynamicText = "or 4 interest-free payments of ";
|
|
6643
6643
|
}
|
|
6644
|
-
return (jsx$1(Container$
|
|
6644
|
+
return (jsx$1(Container$1i, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [dynamicText, jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6645
6645
|
display: 'inline',
|
|
6646
6646
|
fontSize: fontSize,
|
|
6647
6647
|
paddingLeft: '0.25rem',
|
|
6648
6648
|
paddingRight: '0.25rem',
|
|
6649
6649
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6650
6650
|
};
|
|
6651
|
-
var templateObject_1$
|
|
6651
|
+
var templateObject_1$23, templateObject_2$1x, templateObject_3$1e;
|
|
6652
6652
|
|
|
6653
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
6653
|
+
var Text$6 = newStyled.h3(templateObject_1$22 || (templateObject_1$22 = __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) {
|
|
6654
6654
|
var backgroundColor = _a.backgroundColor;
|
|
6655
6655
|
return backgroundColor;
|
|
6656
6656
|
}, function (_a) {
|
|
@@ -6665,47 +6665,47 @@ var OfferBanner = function (_a) {
|
|
|
6665
6665
|
var theme = useTheme();
|
|
6666
6666
|
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6667
6667
|
};
|
|
6668
|
-
var templateObject_1$
|
|
6668
|
+
var templateObject_1$22;
|
|
6669
6669
|
|
|
6670
|
-
var Container$
|
|
6670
|
+
var Container$1h = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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"); });
|
|
6671
6671
|
var CloseButton$1 = function (_a) {
|
|
6672
6672
|
var onClick = _a.onClick, size = _a.size;
|
|
6673
6673
|
var theme = useTheme();
|
|
6674
|
-
return (jsx$1(Container$
|
|
6674
|
+
return (jsx$1(Container$1h, __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));
|
|
6675
6675
|
};
|
|
6676
|
-
var templateObject_1$
|
|
6676
|
+
var templateObject_1$21;
|
|
6677
6677
|
|
|
6678
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6678
|
+
var Text$5 = newStyled.span(templateObject_1$20 || (templateObject_1$20 = __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; });
|
|
6679
6679
|
var Description$1 = function (_a) {
|
|
6680
6680
|
var text = _a.text;
|
|
6681
6681
|
var theme = useTheme();
|
|
6682
6682
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6683
6683
|
};
|
|
6684
|
-
var templateObject_1$
|
|
6684
|
+
var templateObject_1$20;
|
|
6685
6685
|
|
|
6686
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6686
|
+
var P$4 = newStyled.p(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6687
6687
|
var Promo = function (_a) {
|
|
6688
6688
|
var text = _a.text;
|
|
6689
6689
|
var theme = useTheme();
|
|
6690
6690
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6691
6691
|
};
|
|
6692
|
-
var templateObject_1$
|
|
6692
|
+
var templateObject_1$1$;
|
|
6693
6693
|
|
|
6694
|
-
var Text$4 = newStyled.span(templateObject_1$
|
|
6694
|
+
var Text$4 = newStyled.span(templateObject_1$1_ || (templateObject_1$1_ = __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; });
|
|
6695
6695
|
var Title$8 = function (_a) {
|
|
6696
6696
|
var title = _a.title;
|
|
6697
6697
|
var theme = useTheme();
|
|
6698
6698
|
return jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6699
6699
|
};
|
|
6700
|
-
var templateObject_1$
|
|
6700
|
+
var templateObject_1$1_;
|
|
6701
6701
|
|
|
6702
|
-
var Container$
|
|
6703
|
-
var templateObject_1$
|
|
6702
|
+
var Container$1g = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"], ["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6703
|
+
var templateObject_1$1Z;
|
|
6704
6704
|
|
|
6705
6705
|
var TrashButton = function (_a) {
|
|
6706
6706
|
var onClick = _a.onClick, size = _a.size;
|
|
6707
6707
|
useTheme();
|
|
6708
|
-
return (jsx$1(Container$
|
|
6708
|
+
return (jsx$1(Container$1g, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsx$1(Icon.Actions.Trash, { width: size, height: size, fill: "#292929" }, void 0) }), void 0));
|
|
6709
6709
|
};
|
|
6710
6710
|
|
|
6711
6711
|
var CartProductItem = {
|
|
@@ -6717,9 +6717,9 @@ var CartProductItem = {
|
|
|
6717
6717
|
TrashButton: TrashButton,
|
|
6718
6718
|
};
|
|
6719
6719
|
|
|
6720
|
-
var Container$
|
|
6721
|
-
var MobileContainer = newStyled(Container$
|
|
6722
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6720
|
+
var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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"])));
|
|
6721
|
+
var MobileContainer = newStyled(Container$1f)(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6722
|
+
var DollarPart = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __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"])));
|
|
6723
6723
|
var ClubMembersText = newStyled.span(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6724
6724
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6725
6725
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6728,9 +6728,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (t
|
|
|
6728
6728
|
var ClubPriceLabel = function (_a) {
|
|
6729
6729
|
var clubPrice = _a.clubPrice;
|
|
6730
6730
|
var isMobile = useWindowDimensions().isMobile;
|
|
6731
|
-
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$
|
|
6731
|
+
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$1f, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6732
6732
|
};
|
|
6733
|
-
var templateObject_1$
|
|
6733
|
+
var templateObject_1$1Y, templateObject_2$1w, templateObject_3$1d, templateObject_4$Z, templateObject_5$M, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6734
6734
|
|
|
6735
6735
|
var Spacing = function (_a) {
|
|
6736
6736
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6738,9 +6738,9 @@ var Spacing = function (_a) {
|
|
|
6738
6738
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6739
6739
|
};
|
|
6740
6740
|
|
|
6741
|
-
var Container$
|
|
6742
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6743
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6741
|
+
var Container$1e = newStyled('div')(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
6742
|
+
var Content$2 = newStyled('div')(templateObject_2$1v || (templateObject_2$1v = __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"])));
|
|
6743
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$1c || (templateObject_3$1c = __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"])));
|
|
6744
6744
|
var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6745
6745
|
var index = _a.index;
|
|
6746
6746
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6750,12 +6750,12 @@ var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __makeT
|
|
|
6750
6750
|
});
|
|
6751
6751
|
var StrengthBars = function (_a) {
|
|
6752
6752
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6753
|
-
return (jsxs$1(Container$
|
|
6753
|
+
return (jsxs$1(Container$1e, __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));
|
|
6754
6754
|
};
|
|
6755
|
-
var templateObject_1$
|
|
6755
|
+
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Y;
|
|
6756
6756
|
|
|
6757
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6758
|
-
var templateObject_1$
|
|
6757
|
+
var Benefit$2 = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6758
|
+
var templateObject_1$1W;
|
|
6759
6759
|
|
|
6760
6760
|
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
6761
6761
|
|
|
@@ -6777,10 +6777,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6777
6777
|
|
|
6778
6778
|
var STARTS_NUMBER = 5;
|
|
6779
6779
|
|
|
6780
|
-
var Container$
|
|
6781
|
-
var templateObject_1$
|
|
6780
|
+
var Container$1d = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6781
|
+
var templateObject_1$1V;
|
|
6782
6782
|
|
|
6783
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6783
|
+
var StarContainer = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6784
6784
|
var marginRight = _a.marginRight;
|
|
6785
6785
|
return marginRight;
|
|
6786
6786
|
});
|
|
@@ -6792,11 +6792,11 @@ var StarList = function (_a) {
|
|
|
6792
6792
|
width: theme.component.stars.element[size].width,
|
|
6793
6793
|
height: theme.component.stars.element[size].height,
|
|
6794
6794
|
};
|
|
6795
|
-
return (jsx$1(Container$
|
|
6795
|
+
return (jsx$1(Container$1d, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6796
6796
|
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)));
|
|
6797
6797
|
}) }, void 0));
|
|
6798
6798
|
};
|
|
6799
|
-
var templateObject_1$
|
|
6799
|
+
var templateObject_1$1U;
|
|
6800
6800
|
|
|
6801
6801
|
/* base styles & size variants */
|
|
6802
6802
|
var LabelStyles = {
|
|
@@ -6844,7 +6844,7 @@ var LabelStyles = {
|
|
|
6844
6844
|
});
|
|
6845
6845
|
},
|
|
6846
6846
|
};
|
|
6847
|
-
var Container$
|
|
6847
|
+
var Container$1c = newStyled.a(templateObject_1$1T || (templateObject_1$1T = __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"])));
|
|
6848
6848
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6849
6849
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6850
6850
|
return [
|
|
@@ -6863,8 +6863,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6863
6863
|
}),
|
|
6864
6864
|
];
|
|
6865
6865
|
});
|
|
6866
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6867
|
-
var templateObject_1$
|
|
6866
|
+
var RatingLabel = newStyled.span(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6867
|
+
var templateObject_1$1T, templateObject_2$1u;
|
|
6868
6868
|
|
|
6869
6869
|
var Rating = function (_a) {
|
|
6870
6870
|
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;
|
|
@@ -6885,22 +6885,22 @@ var Rating = function (_a) {
|
|
|
6885
6885
|
href: reviewsContainerId,
|
|
6886
6886
|
}
|
|
6887
6887
|
: {};
|
|
6888
|
-
return (jsxs$1(Container$
|
|
6888
|
+
return (jsxs$1(Container$1c, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), (reviews || reviewsText) && (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));
|
|
6889
6889
|
};
|
|
6890
6890
|
|
|
6891
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6891
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
6892
6892
|
var width = _a.width;
|
|
6893
6893
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6894
6894
|
}, function (_a) {
|
|
6895
6895
|
var height = _a.height;
|
|
6896
6896
|
return height !== null && height !== void 0 ? height : 'auto';
|
|
6897
6897
|
});
|
|
6898
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6899
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6898
|
+
var RatingWrapper = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
6899
|
+
var RatingText = newStyled.span(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
6900
6900
|
var fontSize = _a.fontSize;
|
|
6901
6901
|
return fontSize;
|
|
6902
6902
|
});
|
|
6903
|
-
var templateObject_1$
|
|
6903
|
+
var templateObject_1$1S, templateObject_2$1t, templateObject_3$1b;
|
|
6904
6904
|
|
|
6905
6905
|
var OfferAtCartImage = function (_a) {
|
|
6906
6906
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width, height = _a.height;
|
|
@@ -6918,8 +6918,8 @@ var OfferAtCartTitle = function (_a) {
|
|
|
6918
6918
|
return jsx$1(Fragment$2, { children: content }, void 0);
|
|
6919
6919
|
};
|
|
6920
6920
|
|
|
6921
|
-
var Arrow$1 = newStyled.div(templateObject_1$
|
|
6922
|
-
var templateObject_1$
|
|
6921
|
+
var Arrow$1 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 50;\n border-radius: 50%;\n background-color: #d4605b;\n box-shadow: 0 4px 20px 0 #00000040;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 50;\n border-radius: 50%;\n background-color: #d4605b;\n box-shadow: 0 4px 20px 0 #00000040;\n bottom: 20px;\n"])));
|
|
6922
|
+
var templateObject_1$1R;
|
|
6923
6923
|
|
|
6924
6924
|
var ArrowTip$1 = function (_a) {
|
|
6925
6925
|
var _b = _a.isRight, isRight = _b === void 0 ? false : _b;
|
|
@@ -6958,9 +6958,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6958
6958
|
}); });
|
|
6959
6959
|
};
|
|
6960
6960
|
|
|
6961
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6962
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6963
|
-
var templateObject_1$
|
|
6961
|
+
var Benefit$1 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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"])));
|
|
6962
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6963
|
+
var templateObject_1$1Q, templateObject_2$1s;
|
|
6964
6964
|
|
|
6965
6965
|
var BenefitsList = function (_a) {
|
|
6966
6966
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6971,15 +6971,15 @@ var BenefitsList = function (_a) {
|
|
|
6971
6971
|
}) }, void 0));
|
|
6972
6972
|
};
|
|
6973
6973
|
|
|
6974
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6974
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6975
6975
|
var timerColor = _a.timerColor;
|
|
6976
6976
|
return timerColor || '';
|
|
6977
6977
|
});
|
|
6978
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6978
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
6979
6979
|
var timerColor = _a.timerColor;
|
|
6980
6980
|
return timerColor || '';
|
|
6981
6981
|
});
|
|
6982
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
6982
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
6983
6983
|
var theme = _a.theme;
|
|
6984
6984
|
return theme.colors.shades.white.color;
|
|
6985
6985
|
}, function (_a) {
|
|
@@ -6987,7 +6987,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$19 || (templateObject_3$19 =
|
|
|
6987
6987
|
return theme.colors.shades.white.color;
|
|
6988
6988
|
});
|
|
6989
6989
|
var Unit = newStyled.p(templateObject_4$X || (templateObject_4$X = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
6990
|
-
var templateObject_1$
|
|
6990
|
+
var templateObject_1$1P, templateObject_2$1r, templateObject_3$1a, templateObject_4$X;
|
|
6991
6991
|
|
|
6992
6992
|
var HRS = 'HRS';
|
|
6993
6993
|
var MIN = 'MIN';
|
|
@@ -7028,7 +7028,7 @@ var Timer = function (_a) {
|
|
|
7028
7028
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
7029
7029
|
};
|
|
7030
7030
|
|
|
7031
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
7031
|
+
var TimerContainer = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
7032
7032
|
var textPosition = _a.textPosition;
|
|
7033
7033
|
return textPosition;
|
|
7034
7034
|
}, function (_a) {
|
|
@@ -7041,7 +7041,7 @@ var TimerContainer = newStyled.div(templateObject_1$1N || (templateObject_1$1N =
|
|
|
7041
7041
|
var borderRadius = _a.borderRadius;
|
|
7042
7042
|
return borderRadius || '8px';
|
|
7043
7043
|
});
|
|
7044
|
-
var templateObject_1$
|
|
7044
|
+
var templateObject_1$1O;
|
|
7045
7045
|
|
|
7046
7046
|
var getDefaultCountdown = function () {
|
|
7047
7047
|
var tomorrowDate = new Date();
|
|
@@ -7057,7 +7057,7 @@ var HurryUp = function (_a) {
|
|
|
7057
7057
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
7058
7058
|
};
|
|
7059
7059
|
|
|
7060
|
-
var Container$
|
|
7060
|
+
var Container$1b = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
7061
7061
|
var size = _a.size;
|
|
7062
7062
|
return (size ? size : '100%');
|
|
7063
7063
|
}, function (_a) {
|
|
@@ -7072,7 +7072,7 @@ var borderSize = {
|
|
|
7072
7072
|
large: '3px',
|
|
7073
7073
|
};
|
|
7074
7074
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7075
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7075
|
+
var StyledSpinner = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
7076
7076
|
var size = _a.size;
|
|
7077
7077
|
return borderSize[size];
|
|
7078
7078
|
}, function (_a) {
|
|
@@ -7085,29 +7085,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1p || (templateObject_2$1p =
|
|
|
7085
7085
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7086
7086
|
return duration;
|
|
7087
7087
|
});
|
|
7088
|
-
var templateObject_1$
|
|
7088
|
+
var templateObject_1$1N, templateObject_2$1q;
|
|
7089
7089
|
|
|
7090
7090
|
var Spinner = function (_a) {
|
|
7091
7091
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
7092
|
-
return (jsx$1(Container$
|
|
7092
|
+
return (jsx$1(Container$1b, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
7093
7093
|
};
|
|
7094
7094
|
|
|
7095
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7096
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7097
|
-
var templateObject_1$
|
|
7095
|
+
var ProgressContainer = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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); });
|
|
7096
|
+
var ProgressFiller = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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; });
|
|
7097
|
+
var templateObject_1$1M, templateObject_2$1p;
|
|
7098
7098
|
|
|
7099
7099
|
var ProgressBar$1 = function (_a) {
|
|
7100
7100
|
var progress = _a.progress, hide = _a.hide;
|
|
7101
7101
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7102
7102
|
};
|
|
7103
7103
|
|
|
7104
|
-
var Container$
|
|
7105
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7106
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
7104
|
+
var Container$1a = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7105
|
+
var HTMLVideo = newStyled.video(templateObject_2$1o || (templateObject_2$1o = __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; });
|
|
7106
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$19 || (templateObject_3$19 = __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"])));
|
|
7107
7107
|
var PlayContainer = newStyled.div(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
7108
7108
|
var PauseContainer = newStyled.div(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
7109
7109
|
var MuteButton = newStyled.button(templateObject_6$D || (templateObject_6$D = __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"])));
|
|
7110
|
-
var templateObject_1$
|
|
7110
|
+
var templateObject_1$1L, templateObject_2$1o, templateObject_3$19, templateObject_4$W, templateObject_5$L, templateObject_6$D;
|
|
7111
7111
|
|
|
7112
7112
|
var Video$1 = function (_a) {
|
|
7113
7113
|
var _b, _c;
|
|
@@ -7158,9 +7158,78 @@ var Video$1 = function (_a) {
|
|
|
7158
7158
|
}
|
|
7159
7159
|
setIsLoading(false);
|
|
7160
7160
|
};
|
|
7161
|
-
return (jsxs$1(Container$
|
|
7161
|
+
return (jsxs$1(Container$1a, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: handleOnloadedData, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7162
7162
|
};
|
|
7163
7163
|
|
|
7164
|
+
var Container$19 = newStyled.div(function (props) { return ({
|
|
7165
|
+
height: 'auto',
|
|
7166
|
+
textAlign: 'center',
|
|
7167
|
+
justifyContent: 'center',
|
|
7168
|
+
alignItems: 'center',
|
|
7169
|
+
display: props.textPosition !== 'bottom' ? 'flex' : 'inherit',
|
|
7170
|
+
flexDirection: props.textPosition === 'right'
|
|
7171
|
+
? 'row'
|
|
7172
|
+
: props.textPosition === 'top'
|
|
7173
|
+
? 'column-reverse'
|
|
7174
|
+
: props.textPosition === 'left'
|
|
7175
|
+
? 'row-reverse'
|
|
7176
|
+
: 'row',
|
|
7177
|
+
}); });
|
|
7178
|
+
var IconWrapper = newStyled.div(function (props) { return ({
|
|
7179
|
+
borderRadius: '500px',
|
|
7180
|
+
width: "".concat(props.iconSize * 30, "px"),
|
|
7181
|
+
height: "".concat(props.iconSize * 30, "px"),
|
|
7182
|
+
margin: '0 auto 10px',
|
|
7183
|
+
display: 'flex',
|
|
7184
|
+
alignItems: 'center',
|
|
7185
|
+
justifyContent: 'center',
|
|
7186
|
+
backgroundColor: props.backgroundColor,
|
|
7187
|
+
}); });
|
|
7188
|
+
var IconsWithTitle = function (_a) {
|
|
7189
|
+
var _b;
|
|
7190
|
+
var iconName = _a.iconName, iconTitle = _a.iconTitle, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'MyAccount' : _c, _d = _a.withWrapper, withWrapper = _d === void 0 ? true : _d, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor, _e = _a.iconSizeDesktop, iconSizeDesktop = _e === void 0 ? 4 : _e, _f = _a.iconSizeMobile, iconSizeMobile = _f === void 0 ? 3 : _f, _g = _a.iconTitlePosition, iconTitlePosition = _g === void 0 ? 'bottom' : _g, _h = _a.iconTitleStyle, iconTitleStyle = _h === void 0 ? '' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? '' : _j, _k = _a.isTitleInnerHtml, isTitleInnerHtml = _k === void 0 ? false : _k;
|
|
7191
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
7192
|
+
// @ts-ignore
|
|
7193
|
+
var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
|
|
7194
|
+
if (IconComponent == null) {
|
|
7195
|
+
console.error('Icon', iconName, 'not found');
|
|
7196
|
+
return null;
|
|
7197
|
+
}
|
|
7198
|
+
var parseStringStyle = function (style) {
|
|
7199
|
+
try {
|
|
7200
|
+
return JSON.parse(style);
|
|
7201
|
+
}
|
|
7202
|
+
catch (e) {
|
|
7203
|
+
return undefined;
|
|
7204
|
+
}
|
|
7205
|
+
};
|
|
7206
|
+
var titleStyles = parseStringStyle(iconTitleStyle);
|
|
7207
|
+
var iconStyles = parseStringStyle(iconStyle);
|
|
7208
|
+
var defaultTitleStyle = {
|
|
7209
|
+
fontSize: '14px',
|
|
7210
|
+
textTransform: 'uppercase',
|
|
7211
|
+
textAlign: 'center',
|
|
7212
|
+
lineHeight: '18px',
|
|
7213
|
+
};
|
|
7214
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$19, __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));
|
|
7215
|
+
};
|
|
7216
|
+
|
|
7217
|
+
var Container$18 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n padding: 16px;\n border: 1px solid #bbbbbb;\n max-width: 100%;\n border-radius: 8px;\n flex-wrap: wrap;\n @media (max-width: 768px) {\n display: grid;\n grid-template-columns: repeat(2, max-content);\n gap: ", ";\n }\n"], ["\n display: flex;\n gap: ", ";\n padding: 16px;\n border: 1px solid #bbbbbb;\n max-width: 100%;\n border-radius: 8px;\n flex-wrap: wrap;\n @media (max-width: 768px) {\n display: grid;\n grid-template-columns: repeat(2, max-content);\n gap: ", ";\n }\n"])), function (props) { var _a; return (_a = props.desktopGap) !== null && _a !== void 0 ? _a : '36px'; }, function (props) { var _a; return (_a = props.mobileGap) !== null && _a !== void 0 ? _a : '16px'; });
|
|
7218
|
+
var Wrapper$6 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 16px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
|
|
7219
|
+
var DesktopDivider = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n width: ", ";\n transform: scaleX(0.5);\n transform-origin: center;\n height: ", ";\n background-color: #5a5a5a;\n @media (max-width: 768px) {\n display: none;\n }\n"], ["\n width: ", ";\n transform: scaleX(0.5);\n transform-origin: center;\n height: ", ";\n background-color: #5a5a5a;\n @media (max-width: 768px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '2px'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '16px'; });
|
|
7220
|
+
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18;
|
|
7221
|
+
|
|
7222
|
+
function IconsWithTitleList(_a) {
|
|
7223
|
+
var list = _a.list, loading = _a.loading, dividerWidth = _a.dividerWidth, dividerHeight = _a.dividerHeight, skeletonHeight = _a.skeletonHeight, itemsGapDesktop = _a.itemsGapDesktop, itemsGapMobile = _a.itemsGapMobile;
|
|
7224
|
+
if (loading) {
|
|
7225
|
+
return jsx$1(SkeletonBox, { height: skeletonHeight !== null && skeletonHeight !== void 0 ? skeletonHeight : '56px' }, void 0);
|
|
7226
|
+
}
|
|
7227
|
+
return (jsx$1(Container$18, __assign$1({ desktopGap: itemsGapDesktop, mobileGap: itemsGapMobile }, { children: list === null || list === void 0 ? void 0 : list.map(function (item, index) {
|
|
7228
|
+
var _a, _b, _c, _d, _e, _f;
|
|
7229
|
+
return (jsxs$1(Wrapper$6, { children: [jsx$1(IconsWithTitle, { iconName: (_a = item.iconName) !== null && _a !== void 0 ? _a : 'CircleSolidCheck', iconFolder: (_b = item.iconFolder) !== null && _b !== void 0 ? _b : 'Actions', iconTitle: item.text, backgroundColor: "none", iconColor: (_c = item.iconColor) !== null && _c !== void 0 ? _c : '#2F806A', iconSizeDesktop: (_d = item.iconSizeDesktop) !== null && _d !== void 0 ? _d : 1.2, iconSizeMobile: (_e = item.iconSizeMobile) !== null && _e !== void 0 ? _e : 1.2, withWrapper: false, iconTitleStyle: (_f = item.iconTitleStyle) !== null && _f !== void 0 ? _f : '{"textTransform": "none", "fontSize":"16px", "marginLeft":"8px"}' }, void 0), index !== list.length - 1 && (jsx$1(DesktopDivider, { width: dividerWidth, height: dividerHeight, "data-testid": "desktop-divider" }, void 0))] }, item.text));
|
|
7230
|
+
}) }), void 0));
|
|
7231
|
+
}
|
|
7232
|
+
|
|
7164
7233
|
var LikeCount = newStyled.span(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"])), function (_a) {
|
|
7165
7234
|
var theme = _a.theme;
|
|
7166
7235
|
return theme.colors.shades.black.color;
|
|
@@ -7205,7 +7274,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7205
7274
|
};
|
|
7206
7275
|
}
|
|
7207
7276
|
};
|
|
7208
|
-
var Container$
|
|
7277
|
+
var Container$17 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
7209
7278
|
var backgroundColor = _a.backgroundColor;
|
|
7210
7279
|
return backgroundColor;
|
|
7211
7280
|
}, function (_a) {
|
|
@@ -7246,7 +7315,7 @@ var IconButton = function (_a) {
|
|
|
7246
7315
|
var _b, _c;
|
|
7247
7316
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
|
|
7248
7317
|
var theme = useTheme();
|
|
7249
|
-
return (jsx$1(Container$
|
|
7318
|
+
return (jsx$1(Container$17, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
7250
7319
|
};
|
|
7251
7320
|
var templateObject_1$1I;
|
|
7252
7321
|
|
|
@@ -7310,7 +7379,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7310
7379
|
: ComponentSize.XSmall;
|
|
7311
7380
|
return (jsx$1(Price$1, __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));
|
|
7312
7381
|
};
|
|
7313
|
-
return (jsxs$1(Container$
|
|
7382
|
+
return (jsxs$1(Container$1y, __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$1, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, 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$1, __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$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7314
7383
|
? finalPriceArray[0]
|
|
7315
7384
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7316
7385
|
};
|
|
@@ -7388,7 +7457,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7388
7457
|
});
|
|
7389
7458
|
});
|
|
7390
7459
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
7391
|
-
var Container$
|
|
7460
|
+
var Container$16 = newStyled.a(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7392
7461
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7393
7462
|
var Title$7 = newStyled.h2(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
7394
7463
|
var theme = _a.theme;
|
|
@@ -7550,12 +7619,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7550
7619
|
setIsLiked(function (prev) { return !prev; });
|
|
7551
7620
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7552
7621
|
};
|
|
7553
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7622
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$16, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!likeBtn && (jsx(LikeButton, { isLiked: isLiked, likes: likesCount, onClick: handleLikeClick, colors: {
|
|
7554
7623
|
background: {
|
|
7555
7624
|
active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
|
|
7556
7625
|
hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
|
|
7557
7626
|
},
|
|
7558
|
-
} }, void 0)), !!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', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __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', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, 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)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$
|
|
7627
|
+
} }, void 0)), !!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', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __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', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, 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)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$16, __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, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), showDivider && (jsxs(Fragment, { children: [jsx(Divider, { theme: theme }, void 0), jsx(Spacing, { size: space }, void 0)] }, 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 && !ratingOnTop ? (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)) : priceAndReviewInOneLine && !ratingOnTop ? (jsxs(OneLineInfoWrapper, { children: [PriceLabelDisplay(), jsx(RatingDisplay, {}, void 0)] }, 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$4, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7559
7628
|
letterSpacing: '-0.05rem',
|
|
7560
7629
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && !priceAndReviewInOneLine && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7561
7630
|
e.preventDefault();
|
|
@@ -7576,7 +7645,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7576
7645
|
});
|
|
7577
7646
|
});
|
|
7578
7647
|
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
7579
|
-
var Container$
|
|
7648
|
+
var Container$15 = newStyled.a(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
7580
7649
|
var ProdCardContainer$3 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
7581
7650
|
var Title$6 = newStyled.p(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
7582
7651
|
var getStylesBySize$a = function (size) {
|
|
@@ -7658,9 +7727,9 @@ var ProductItemTK = function (_a) {
|
|
|
7658
7727
|
: undefined }, void 0));
|
|
7659
7728
|
};
|
|
7660
7729
|
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)); };
|
|
7661
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7730
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick, style: {
|
|
7662
7731
|
cursor: 'pointer',
|
|
7663
|
-
} }, { 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%", 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), !!topRightTag && jsx(TopRightTagContainer$3, { 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, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", 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$
|
|
7732
|
+
} }, { 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%", 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), !!topRightTag && jsx(TopRightTagContainer$3, { 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, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", 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$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: function () {
|
|
7664
7733
|
if (!colorPicker.shouldStopCardClick) {
|
|
7665
7734
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7666
7735
|
}
|
|
@@ -7678,7 +7747,7 @@ var ProductItemTK = function (_a) {
|
|
|
7678
7747
|
if (colorPicker.shouldStopCardClick) {
|
|
7679
7748
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7680
7749
|
}
|
|
7681
|
-
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$
|
|
7750
|
+
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$15, { children: colorPicker.shouldStopCardClick ? jsx(Fragment, { children: colorPicker.component }, void 0) : null }, void 0), jsxs(Container$15, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: function () {
|
|
7682
7751
|
if (!colorPicker.shouldStopCardClick) {
|
|
7683
7752
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7684
7753
|
}
|
|
@@ -7688,10 +7757,10 @@ var ProductItemTK = function (_a) {
|
|
|
7688
7757
|
};
|
|
7689
7758
|
var templateObject_1$1F, templateObject_2$1j, templateObject_3$15, templateObject_4$T, templateObject_5$I, templateObject_6$B, templateObject_7$u, templateObject_8$n;
|
|
7690
7759
|
|
|
7691
|
-
var Container$
|
|
7760
|
+
var Container$14 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
7692
7761
|
function withProductGrid(ProductItemComponent, data) {
|
|
7693
7762
|
function WithProductGrid(props) {
|
|
7694
|
-
return (jsx$1(Container$
|
|
7763
|
+
return (jsx$1(Container$14, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7695
7764
|
}
|
|
7696
7765
|
/* istanbul ignore next */
|
|
7697
7766
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -7769,7 +7838,7 @@ var OutOfStock = function (_a) {
|
|
|
7769
7838
|
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));
|
|
7770
7839
|
};
|
|
7771
7840
|
|
|
7772
|
-
var Container$
|
|
7841
|
+
var Container$13 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7773
7842
|
var borderColor = _a.borderColor;
|
|
7774
7843
|
return borderColor;
|
|
7775
7844
|
}, function (_a) {
|
|
@@ -7781,7 +7850,7 @@ var PatternSelector = function (_a) {
|
|
|
7781
7850
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7782
7851
|
var theme = useTheme();
|
|
7783
7852
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7784
|
-
return (jsx$1(Container$
|
|
7853
|
+
return (jsx$1(Container$13, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7785
7854
|
};
|
|
7786
7855
|
var templateObject_1$1C, templateObject_2$1h;
|
|
7787
7856
|
|
|
@@ -8040,14 +8109,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
8040
8109
|
return jsx(BaseCTA, __assign$1({}, props, { css: getStyle(theme) }), void 0);
|
|
8041
8110
|
};
|
|
8042
8111
|
|
|
8043
|
-
var Container$
|
|
8112
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
8044
8113
|
var IconContainer$5 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
8045
8114
|
var Text$3 = newStyled.p(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8046
8115
|
var Details = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
8047
8116
|
var Note = function (_a) {
|
|
8048
8117
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
8049
8118
|
var theme = useTheme();
|
|
8050
|
-
return (jsxs$1(Container$
|
|
8119
|
+
return (jsxs$1(Container$12, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
8051
8120
|
};
|
|
8052
8121
|
var templateObject_1$1y, templateObject_2$1d, templateObject_3$12, templateObject_4$Q;
|
|
8053
8122
|
|
|
@@ -8321,12 +8390,12 @@ var SelectorSecondary = function (_a) {
|
|
|
8321
8390
|
var Title$4 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
8322
8391
|
var P$3 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
8323
8392
|
var ArrowContainer = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8324
|
-
var Container$
|
|
8393
|
+
var Container$11 = newStyled.div(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
8325
8394
|
var Accordion = function (_a) {
|
|
8326
8395
|
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;
|
|
8327
8396
|
var theme = useTheme();
|
|
8328
8397
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8329
|
-
return (jsxs$1(Container$
|
|
8398
|
+
return (jsxs$1(Container$11, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8330
8399
|
};
|
|
8331
8400
|
var templateObject_1$1s, templateObject_2$17, templateObject_3$Z, templateObject_4$L;
|
|
8332
8401
|
|
|
@@ -8491,7 +8560,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8491
8560
|
};
|
|
8492
8561
|
|
|
8493
8562
|
var Wrapper$4 = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
8494
|
-
var Container$
|
|
8563
|
+
var Container$10 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
8495
8564
|
var FitGuarantee = function (_a) {
|
|
8496
8565
|
var _b;
|
|
8497
8566
|
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;
|
|
@@ -8502,7 +8571,7 @@ var FitGuarantee = function (_a) {
|
|
|
8502
8571
|
console.error('Icon', iconName, 'not found');
|
|
8503
8572
|
return null;
|
|
8504
8573
|
}
|
|
8505
|
-
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$
|
|
8574
|
+
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$10, __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$10, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8506
8575
|
margin: '0.1rem 0',
|
|
8507
8576
|
width: '100%',
|
|
8508
8577
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -8511,7 +8580,7 @@ var FitGuarantee = function (_a) {
|
|
|
8511
8580
|
};
|
|
8512
8581
|
var templateObject_1$1p, templateObject_2$14;
|
|
8513
8582
|
|
|
8514
|
-
var Container
|
|
8583
|
+
var Container$$ = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
8515
8584
|
var P$2 = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
8516
8585
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8517
8586
|
border: 'none',
|
|
@@ -8525,7 +8594,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8525
8594
|
var FitPredictor = function (_a) {
|
|
8526
8595
|
var onClick = _a.onClick;
|
|
8527
8596
|
var theme = useTheme();
|
|
8528
|
-
return (jsxs(Container
|
|
8597
|
+
return (jsxs(Container$$, __assign$1({ theme: theme }, { children: [jsx(Container$$, { 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));
|
|
8529
8598
|
};
|
|
8530
8599
|
var templateObject_1$1o, templateObject_2$13;
|
|
8531
8600
|
|
|
@@ -12865,7 +12934,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12865
12934
|
|
|
12866
12935
|
var horizontalStyles = css(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12867
12936
|
var verticalStyles = css(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12868
|
-
var Container
|
|
12937
|
+
var Container$_ = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12869
12938
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12870
12939
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12871
12940
|
}, function (_a) {
|
|
@@ -12909,7 +12978,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12909
12978
|
var element = document.querySelector(".imageListContainer");
|
|
12910
12979
|
element.scrollBy(0, 200);
|
|
12911
12980
|
};
|
|
12912
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container
|
|
12981
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$_, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12913
12982
|
arrowWidth: 0.75,
|
|
12914
12983
|
arrowHeight: 1.25,
|
|
12915
12984
|
arrowPadding: 1.625,
|
|
@@ -14509,7 +14578,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14509
14578
|
afterZoomOut: PropTypes.func
|
|
14510
14579
|
} : {};
|
|
14511
14580
|
|
|
14512
|
-
var Container$
|
|
14581
|
+
var Container$Z = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
14513
14582
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14514
14583
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14515
14584
|
});
|
|
@@ -14542,7 +14611,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14542
14611
|
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;
|
|
14543
14612
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14544
14613
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14545
|
-
return (jsxs$1(Container$
|
|
14614
|
+
return (jsxs$1(Container$Z, __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: {
|
|
14546
14615
|
alt: content.alt,
|
|
14547
14616
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14548
14617
|
loading: 'eager',
|
|
@@ -14550,7 +14619,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14550
14619
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14551
14620
|
};
|
|
14552
14621
|
|
|
14553
|
-
var Container$
|
|
14622
|
+
var Container$Y = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
14554
14623
|
var templateObject_1$1j;
|
|
14555
14624
|
|
|
14556
14625
|
var getInitialIndex = function (images, selectedValue) {
|
|
@@ -14577,7 +14646,7 @@ var ProductGallery = function (_a) {
|
|
|
14577
14646
|
setActiveIndex(index);
|
|
14578
14647
|
};
|
|
14579
14648
|
var selectedImage = images[activeIndex];
|
|
14580
|
-
return (jsxs$1(Container$
|
|
14649
|
+
return (jsxs$1(Container$Y, { 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));
|
|
14581
14650
|
};
|
|
14582
14651
|
|
|
14583
14652
|
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
@@ -14591,59 +14660,6 @@ var PaypalButton = function (_a) {
|
|
|
14591
14660
|
};
|
|
14592
14661
|
var templateObject_1$1i;
|
|
14593
14662
|
|
|
14594
|
-
var Container$Y = newStyled.div(function (props) { return ({
|
|
14595
|
-
height: 'auto',
|
|
14596
|
-
textAlign: 'center',
|
|
14597
|
-
justifyContent: 'center',
|
|
14598
|
-
alignItems: 'center',
|
|
14599
|
-
display: props.textPosition !== 'bottom' ? 'flex' : 'inherit',
|
|
14600
|
-
flexDirection: props.textPosition === 'right'
|
|
14601
|
-
? 'row'
|
|
14602
|
-
: props.textPosition === 'top'
|
|
14603
|
-
? 'column-reverse'
|
|
14604
|
-
: props.textPosition === 'left'
|
|
14605
|
-
? 'row-reverse'
|
|
14606
|
-
: 'row',
|
|
14607
|
-
}); });
|
|
14608
|
-
var IconWrapper = newStyled.div(function (props) { return ({
|
|
14609
|
-
borderRadius: '500px',
|
|
14610
|
-
width: "".concat(props.iconSize * 30, "px"),
|
|
14611
|
-
height: "".concat(props.iconSize * 30, "px"),
|
|
14612
|
-
margin: '0 auto 10px',
|
|
14613
|
-
display: 'flex',
|
|
14614
|
-
alignItems: 'center',
|
|
14615
|
-
justifyContent: 'center',
|
|
14616
|
-
backgroundColor: props.backgroundColor,
|
|
14617
|
-
}); });
|
|
14618
|
-
var IconsWithTitle = function (_a) {
|
|
14619
|
-
var _b;
|
|
14620
|
-
var iconName = _a.iconName, iconTitle = _a.iconTitle, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'MyAccount' : _c, _d = _a.withWrapper, withWrapper = _d === void 0 ? true : _d, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor, _e = _a.iconSizeDesktop, iconSizeDesktop = _e === void 0 ? 4 : _e, _f = _a.iconSizeMobile, iconSizeMobile = _f === void 0 ? 3 : _f, _g = _a.iconTitlePosition, iconTitlePosition = _g === void 0 ? 'bottom' : _g, _h = _a.iconTitleStyle, iconTitleStyle = _h === void 0 ? '' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? '' : _j, _k = _a.isTitleInnerHtml, isTitleInnerHtml = _k === void 0 ? false : _k;
|
|
14621
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
14622
|
-
// @ts-ignore
|
|
14623
|
-
var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
|
|
14624
|
-
if (IconComponent == null) {
|
|
14625
|
-
console.error('Icon', iconName, 'not found');
|
|
14626
|
-
return null;
|
|
14627
|
-
}
|
|
14628
|
-
var parseStringStyle = function (style) {
|
|
14629
|
-
try {
|
|
14630
|
-
return JSON.parse(style);
|
|
14631
|
-
}
|
|
14632
|
-
catch (e) {
|
|
14633
|
-
return undefined;
|
|
14634
|
-
}
|
|
14635
|
-
};
|
|
14636
|
-
var titleStyles = parseStringStyle(iconTitleStyle);
|
|
14637
|
-
var iconStyles = parseStringStyle(iconStyle);
|
|
14638
|
-
var defaultTitleStyle = {
|
|
14639
|
-
fontSize: '14px',
|
|
14640
|
-
textTransform: 'uppercase',
|
|
14641
|
-
textAlign: 'center',
|
|
14642
|
-
lineHeight: '18px',
|
|
14643
|
-
};
|
|
14644
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$Y, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14645
|
-
};
|
|
14646
|
-
|
|
14647
14663
|
var Container$X = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14648
14664
|
var ImageContainer$4 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14649
14665
|
var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
@@ -22864,5 +22880,5 @@ function TwoCtasAtCart(_a) {
|
|
|
22864
22880
|
return (jsxs$1(Container, __assign$1({ id: "twoCtasAtCart" }, { children: [jsx$1(TitleWrapper, __assign$1({ id: "twoCtasAtCartTitle" }, { children: title }), void 0), jsx$1(ButtonPrimary, { onClick: saveMoreButtonAction, text: saveMoreButtonLabel, wide: true }, void 0), jsxs$1(BodyContainer, { children: [jsx$1(GridContainer, __assign$1({ style: { marginTop: '8px' } }, { children: descriptions.map(function (description, index) { return (jsx$1(DescriptionItem, { text: description.text, smallerText: description.smallerText, iconName: description === null || description === void 0 ? void 0 : description.iconName, type: description === null || description === void 0 ? void 0 : description.type, link: description === null || description === void 0 ? void 0 : description.link }, "".concat(description.text, "-").concat(index))); }) }), void 0), bottomCopy && jsx$1(BottomCopyWrapper, { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }, void 0), jsx$1(OutLineButtonContainer, { children: version === BottomButtonVersionsTypes.link ? (jsx$1(SaveLessLinkButton, __assign$1({ href: "#", onClick: saveLessButtonAction }, { children: saveLessButtonLabel }), void 0)) : (jsx$1(BtnOutlineWrapper, { wide: true, onClick: saveLessButtonAction, text: saveLessButtonLabel }, void 0)) }, void 0)] }), void 0));
|
|
22865
22881
|
}
|
|
22866
22882
|
|
|
22867
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, ArrowTip$1 as ArrowTip, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipPdpCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferAtCartV3, OfferAtCartV4, OfferAtPDP, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, PriceLabelV5, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProductGalleryMobileV6, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeChartTableV4, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, TwoCtasAtCart, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, debounce$1 as debounce, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22883
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, ArrowTip$1 as ArrowTip, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipPdpCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, IconsWithTitleList, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferAtCartV3, OfferAtCartV4, OfferAtPDP, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, PriceLabelV5, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProductGalleryMobileV6, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeChartTableV4, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, TwoCtasAtCart, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, debounce$1 as debounce, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22868
22884
|
//# sourceMappingURL=index.esm.js.map
|